import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-ClISz4NF.js';
import { S as Sizes } from './sizes-BcQO4NH2.js';
import { g as govHost } from './template-CoD1xawt.js';
import { p as pick } from './utils-CQvUntGY.js';
import { C as Colors } from './colors-U40vKHrs.js';
import { i as iconsPath, a as isWindow, b as iconsLazyLoad } from './gov.log-BtqD9K8d.js';
import { v as validateProp } from './props-CJZgTDla.js';

const FlexClass = {
    root: 'gov-flex',
};

const GovFlex = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Controls the flex direction of the container.
         */
        this.direction = 'row';
        /**
         * Option to turn off responsive
         */
        this.responsive = "true";
        this.h = govHost(this.host);
    }
    render() {
        return (h(Host, { key: '1c88a4c6aaf69a13c514bc24c10fd2a32316a7c0', class: this.h.classes(FlexClass.root) }, h("slot", { key: 'b055e2aff7056be660e53d5036341fbaabe796b1' })));
    }
    get host() { return getElement(this); }
};

pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_4XL', '_5XL']);
const IconColors = pick(Colors, [
    'DEFAULT',
    'PRIMARY',
    'SECONDARY',
    'NEUTRAL',
    'ERROR',
    'SUCCESS',
    'WARNING',
    'DISABLED',
    'WHITE',
    'BLACK',
]);
var Types;
(function (Types) {
    Types["BASIC"] = "basic";
    Types["COMPLEX"] = "complex";
    Types["COLORED"] = "colored";
})(Types || (Types = {}));
const IconClass = {
    root: 'gov-icon'};

const version = "4.6.0";

const dsVersion = () => {
    return version;
};

const iconCache = {};
const requestCache = {};
const isExternalUrl = (path) => path.startsWith("http://") || path.startsWith("https://");
const iconUrl = (path, name, type) => {
    if (isExternalUrl(path)) {
        return `${path}/${type}/${name}.svg?v=${dsVersion()}`;
    }
    return `${path}/${type}/${name}.svg` + `?v=${dsVersion()}`;
};
async function fetchIcon({ name, type }) {
    const cacheKey = type + "-" + name;
    if (iconCache[cacheKey]) {
        return iconCache[cacheKey];
    }
    if (!requestCache[cacheKey]) {
        requestCache[cacheKey] = fetch(iconUrl(iconsPath(), name, type)).then(resp => {
            if (resp.status === 200) {
                return resp.text();
            }
            else {
                throw new Error("Gov Icon doesn't exists");
            }
        });
    }
    const path = await requestCache[cacheKey];
    iconCache[cacheKey] = path;
    return path;
}

const setCookie = (name, value, days) => {
    if (!isWindow) {
        return;
    }
    let expires = "";
    document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
};
const getCookie = (name) => {
    if (!isWindow) {
        return null;
    }
    const nameEQ = name + "=";
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        if (cookie.startsWith(nameEQ)) {
            return decodeURIComponent(cookie.substring(nameEQ.length));
        }
    }
    return null;
};
const isValidSVG = (svgContent) => {
    try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(svgContent, "image/svg+xml");
        const parseError = doc.querySelector("parsererror");
        if (parseError) {
            return false;
        }
        const svgElement = doc.documentElement;
        if (svgElement.tagName.toLowerCase() !== "svg") {
            return false;
        }
        return true;
    }
    catch (error) {
        return false;
    }
};

const GovIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Name of icon in folder
         */
        this.name = null;
        /**
         * Type (folder) of icon
         */
        this.type = "components";
        this.visible = false;
        this.error = false;
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(Sizes, newValue, IconClass.root);
    }
    validateColor(newValue) {
        validateProp(IconColors, newValue, IconClass.root);
    }
    async loadIconPathData() {
        const { name, visible } = this;
        if (!name || !visible) {
            return;
        }
        await this.loadIcon();
    }
    connectedCallback() {
        if (iconsLazyLoad()) {
            this.visible = true;
            this.loadIconPathData().finally();
        }
        else {
            this.waitUntilVisible(async () => {
                this.visible = true;
                await this.loadIconPathData();
            });
        }
    }
    disconnectedCallback() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
            this.intersectionObserver = null;
        }
    }
    async componentWillLoad() {
        this.validateSize(this.size);
        this.validateColor(this.color);
        await this.loadIconPathData();
    }
    waitUntilVisible(callback) {
        if (typeof window === "undefined" || !window.IntersectionObserver) {
            callback();
            return;
        }
        this.intersectionObserver = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (this.intersectionObserver) {
                        this.intersectionObserver.disconnect();
                        this.intersectionObserver = null;
                    }
                    callback();
                }
            });
        }, { rootMargin: "50px" });
        this.intersectionObserver.observe(this.host);
    }
    async loadIcon() {
        try {
            const { name, type } = this;
            const data = await fetchIcon({ name, type });
            const isValid = isValidSVG(data);
            this.host.innerHTML = isValid ? data : null;
        }
        catch (e) {
            this.host.innerHTML = '';
            this.error = true;
        }
    }
    render() {
        if (this.error) {
            return null;
        }
        return (h(Host, { class: this.h.classes(IconClass.root), size: this.size, color: this.color }));
    }
    static get assetsDirs() { return ["assets"]; }
    get host() { return getElement(this); }
    static get watchers() { return {
        "size": ["validateSize"],
        "color": ["validateColor"],
        "name": ["loadIconPathData"]
    }; }
};

const ThemeSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
const ThemeSwitchClass = {
    root: 'gov-theme-switch',
    indicator: 'gov-theme-switch__indicator',
    label: 'gov-theme-switch__label',
    iconLight: 'gov-theme-switch__icon-light',
    iconDark: 'gov-theme-switch__icon-dark',
};
const ATTRIBUTE_THEME_NAME = 'data-theme';

var ThemeList;
(function (ThemeList) {
    ThemeList["auto"] = "auto";
    ThemeList["light"] = "light";
    ThemeList["dark"] = "dark";
})(ThemeList || (ThemeList = {}));

const GovThemeSwitch = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govChange = createEvent(this, "gov-change");
        /**
         * Switch's size.
         */
        this.size = "m";
        /**
         * Display switch label
         */
        this.displayLabel = false;
        /**
         * Label in light mode
         */
        this.ariaLabelLight = "Přepnout na tmavý mód";
        /**
         * Label in dark mode
         */
        this.ariaLabelDark = "Přepnout na světlý mód";
        /**
         * Label in light mode
         */
        this.labelLight = "Světlý mód";
        /**
         * Label in dark mode
         */
        this.labelDark = "Tmavý mód";
        this.theme = ThemeList.auto;
        this.setThemeState = (state) => {
            this.theme = state;
            this.govChange.emit({
                component: ThemeSwitchClass.root,
                state: this.theme,
                ref: this.host
            });
        };
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root);
    }
    watchTheme(newValue) {
        this.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);
        this.htmlElement.classList.remove(...Object.keys(ThemeList));
        this.htmlElement.classList.add(newValue);
        setCookie(ATTRIBUTE_THEME_NAME, newValue);
    }
    get storageValue() {
        return getCookie(ATTRIBUTE_THEME_NAME);
    }
    get htmlElement() {
        return document.documentElement;
    }
    get isSystemPrefersColorDark() {
        return isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    componentWillLoad() {
        this.initDefaultState();
        this.validateSize(this.size);
    }
    initDefaultState() {
        const options = Object.keys(ThemeList);
        let currentState = this.storageValue;
        const htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME);
        if (currentState && options.includes(currentState)) {
            this.theme = currentState;
        }
        else if (htmlState && options.includes(htmlState)) {
            this.theme = htmlState;
        }
        else {
            this.theme = ThemeList.auto;
        }
    }
    render() {
        let isDark = this.theme === ThemeList.dark;
        if (this.theme === ThemeList.auto) {
            isDark = this.isSystemPrefersColorDark;
        }
        return (h(Host, { key: '77b26165b2a824ff9649ac9c28d7b300cdb76280', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: 'c46058c2a0e797fef9c7e1ab4975ff379bbc3fb4', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, h("span", { key: 'c1d8824467dc7bfa5d23f1f99db686e91e93087b' }, h("span", { key: '62da0a9fecc5fc713b98ac9e4e728e3e19b9aa67', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: '7c9dd1cf819afbd7f63609916d6c845c2236fbca', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: '3f1acf71f8afb5ca893c460b7d0b6e49fe6f5c2d', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "size": ["validateSize"],
        "theme": ["watchTheme"]
    }; }
};

export { GovFlex as gov_flex, GovIcon as gov_icon, GovThemeSwitch as gov_theme_switch };
//# sourceMappingURL=gov-flex.gov-icon.gov-theme-switch.entry.js.map

//# sourceMappingURL=gov-flex_3.entry.js.map