'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-81cd6930.js');
const constants = require('./constants-4d389abc.js');

const Theme = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.brandChange = index.createEvent(this, "brandChange", 7);
        this.icThemeChange = index.createEvent(this, "icThemeChange", 7);
        this.themeClass = "";
        /**
         * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
         */
        this.brandColor = null;
        /**
         * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
         */
        this.theme = "light";
        this.darkModeChangeHandler = () => {
            if (this.theme === "system") {
                this.themeClass =
                    window.matchMedia &&
                        window.matchMedia("(prefers-color-scheme: dark)").matches
                        ? "ic-theme-dark"
                        : "ic-theme-light";
            }
            else {
                this.themeClass = `ic-theme-${this.theme}`;
            }
            this.icThemeChange.emit(this.theme);
        };
        this.checkBrandColorContrast = () => {
            if (helpers.getBrandColorBrightness() < constants.BLACK_MIN_COLOR_BRIGHTNESS &&
                helpers.getBrandColorBrightness() > constants.WHITE_MAX_COLOR_BRIGHTNESS) {
                console.warn(`The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
            }
        };
        this.setBrandColor = () => {
            const colorRGBA = this.brandColor ? helpers.convertToRGBA(this.brandColor) : null;
            if (colorRGBA) {
                const { r, g, b, a } = colorRGBA;
                const { style } = document.documentElement;
                style.setProperty("--ic-brand-color-primary-r", `${r}`);
                style.setProperty("--ic-brand-color-primary-g", `${g}`);
                style.setProperty("--ic-brand-color-primary-b", `${b}`);
                style.setProperty("--ic-brand-color-primary-a", `${a}`);
                this.checkBrandColorContrast();
                this.brandChange.emit({
                    mode: helpers.getBrandForegroundAppearance(),
                    color: colorRGBA,
                });
            }
        };
    }
    watchBrandColorPropHandler() {
        this.setBrandColor();
    }
    watchThemePropHandler() {
        this.darkModeChangeHandler();
    }
    componentWillLoad() {
        this.darkModeChangeHandler();
        this.setBrandColor();
        window.matchMedia &&
            window
                .matchMedia("(prefers-color-scheme: dark)")
                .addEventListener("change", this.darkModeChangeHandler);
    }
    render() {
        const { themeClass } = this;
        return (index.h(index.Host, { key: '29325dda558601bd748d1712aa146bfd5c2d1240', class: themeClass }, index.h("slot", { key: 'c352dc6c92ee972a7542c01f8fefa62c38575034' })));
    }
    static get watchers() { return {
        "brandColor": ["watchBrandColorPropHandler"],
        "theme": ["watchThemePropHandler"]
    }; }
};

exports.ic_theme = Theme;

//# sourceMappingURL=ic-theme.cjs.entry.js.map