@maggioli-design-system/magma 2.0.0-alpha.1 → 2.0.0-beta.2

package/dist/components/mds-pref-theme-variant-item.js

@@ -1,109 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
-import { m as miBaselineCheckCircle } from './check-circle.js';
-import { m as miOutlineCircle } from './circle.js';
-import { d as defineCustomElement$5 } from './mds-button2.js';
-import { d as defineCustomElement$4 } from './mds-icon2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const noCode$1 = "Nessun code impostato";
-var localeIt = {
-	noCode: noCode$1
-};
-
-const noCode = "No code set";
-var localeEn = {
-	noCode: noCode
-};
-
-const mdsPrefThemeVariantItemCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}@layer reset,vendor,theme,base,components,utilities;:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light)inset;box-shadow:var(--shadow-outline-light)inset;content:\"\";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}";
-
-const MdsPrefThemeVariantItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefThemeVariantItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.selectVariantEvent = createEvent(this, "mdsPrefThemeVariantItemSelect", 7);
-        this.t = new Locale({
-            en: localeEn,
-            it: localeIt,
-        });
-        /**
-         * Specifies the theme name
-         */
-        this.name = 'default';
-        /**
-         * Specifies the theme scheme which can be 'light', 'dark' or 'all'
-         */
-        this.scheme = 'all';
-        /**
-         * Specifies if the element is selected
-         */
-        this.selected = false;
-        this.handleClick = () => {
-            this.selectVariantEvent.emit({ name: this.name, scheme: this.scheme });
-        };
-    }
-    async updateLang() {
-        this.language = this.t.lang(this.element);
-    }
-    componentWillRender() {
-        this.t.lang(this.element);
-        if (!this.label) {
-            this.label = this.name.charAt(0).toUpperCase() + this.name.slice(1).replace(/-/g, ' ');
-        }
-    }
-    render() {
-        return (h(Host, { key: '7226e8612de14cb55f08e59867a85bac2a818c20', onClick: this.handleClick }, h("mds-button", { key: '9ba3cfd0a254eaeff4e3ccb6c6b1ceab5f245e07', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '98e24fcf47e692495a0f5c05d5ef9d7924f08949', class: "label" }, h("div", { key: '25d6de60ebe19d3e7f21a425e6fd8069927ee46f', class: "theme-preview" }, h("div", { key: 'd8820f6717263184e7af45e8f9f999a1e013481c', class: "theme-color theme-color--variant-primary" }), h("div", { key: 'd058474d0c8aa30e37647f6a0d07dd2b66bf5bee', class: "theme-color theme-color--status-success" }), h("div", { key: '50ef0f48869b26b846b668963f1ce95ccd2517e4', class: "theme-color theme-color--status-warning" }), h("div", { key: 'f6ca3f58fb1e4df027f79fed26c46e62379e7733', class: "theme-color theme-color--status-error" })), this.label))));
-    }
-    get element() { return this; }
-    static get style() { return mdsPrefThemeVariantItemCss; }
-}, [257, "mds-pref-theme-variant-item", {
-        "label": [1537],
-        "name": [513],
-        "scheme": [513],
-        "selected": [516],
-        "language": [32],
-        "updateLang": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-pref-theme-variant-item", "mds-button", "mds-icon", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-pref-theme-variant-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsPrefThemeVariantItem$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsPrefThemeVariantItem = MdsPrefThemeVariantItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsPrefThemeVariantItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as a,Host as s,transformTag as o}from"@stencil/core/internal/client";import{L as i}from"./locale.js";import{m as n}from"./check-circle.js";import{m}from"./circle.js";import{d as c}from"./mds-button2.js";import{d as l}from"./mds-icon2.js";import{d}from"./mds-spinner2.js";import{d as h}from"./mds-text2.js";var u={noCode:"Nessun code impostato"},v={noCode:"No code set"};const b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.selectVariantEvent=r(this,"mdsPrefThemeVariantItemSelect",7),this.t=new i({en:v,it:u}),this.name="default",this.scheme="all",this.selected=!1,this.handleClick=()=>{this.selectVariantEvent.emit({name:this.name,scheme:this.scheme})}}async updateLang(){this.language=this.t.lang(this.element)}componentWillRender(){this.t.lang(this.element),void 0!==this.label&&""!==this.label||(this.label=this.name.charAt(0).toUpperCase()+this.name.slice(1).replace(/-/g," "))}render(){return a(s,{key:"7c67e626a1111e762cf384dd1e07cca9e8ab3025",onClick:this.handleClick},a("mds-button",{key:"12b4207889f201e6b4424aa28472fcd4a637fb0b",icon:this.selected?n:m,variant:"dark",tone:"text"},a("div",{key:"7ab3d3e6667f2ff83d578579210888af336b7170",class:"label"},a("div",{key:"fadd43f41276b708742e4cf1a3902d2bb6c7dddf",class:"theme-preview"},a("div",{key:"0338afc3745f1212f9e924d7b7fb9e55d7f455fb",class:"theme-color theme-color--variant-primary"}),a("div",{key:"23acf3c5f95614ee9b83562f1061a612ee139332",class:"theme-color theme-color--status-success"}),a("div",{key:"bdefd9b571f74615d63a4e015626a096a92446dd",class:"theme-color theme-color--status-warning"}),a("div",{key:"fc128b9b30699cf52881ee3f559dc10d9323486a",class:"theme-color theme-color--status-error"})),this.label)))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}@layer reset,vendor,theme,base,components,utilities;:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light) inset;box-shadow:var(--shadow-outline-light) inset;content:"";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}'}},[1,"mds-pref-theme-variant-item",{label:[1537],name:[513],scheme:[513],selected:[516],language:[32],updateLang:[64]}]),p=b,f=function(){"undefined"!=typeof customElements&&["mds-pref-theme-variant-item","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-pref-theme-variant-item":customElements.get(o(e))||customElements.define(o(e),b);break;case"mds-button":customElements.get(o(e))||c();break;case"mds-icon":customElements.get(o(e))||l();break;case"mds-spinner":customElements.get(o(e))||d();break;case"mds-text":customElements.get(o(e))||h()}}))};export{p as MdsPrefThemeVariantItem,f as defineCustomElement}

package/dist/components/mds-pref-theme-variant.js

@@ -1,213 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
-import { m as miBaselineKeyboardArrowDown } from './keyboard-arrow-down.js';
-import { m as miBaselineKeyboardArrowUp } from './keyboard-arrow-up.js';
-import { d as defineCustomElement$8 } from './mds-button2.js';
-import { d as defineCustomElement$7 } from './mds-dropdown2.js';
-import { d as defineCustomElement$6 } from './mds-icon2.js';
-import { d as defineCustomElement$5 } from './mds-spinner2.js';
-import { d as defineCustomElement$4 } from './mds-tab2.js';
-import { d as defineCustomElement$3 } from './mds-tab-item2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const label$3 = "Θέμα";
-var localeEl = {
-	label: label$3
-};
-
-const label$2 = "Theme";
-var localeEn = {
-	label: label$2
-};
-
-const label$1 = "Tema";
-var localeEs = {
-	label: label$1
-};
-
-const label = "Tema";
-var localeIt = {
-	label: label
-};
-
-const mdsPrefThemeVariantCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}";
-
-const MdsPrefThemeVariant$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefThemeVariant extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.themeChangeEvent = createEvent(this, "mdsPrefThemeVariantChange", 7);
-        this.prefChangeEvent = createEvent(this, "mdsPrefChange", 7);
-        this.showDropdown = false;
-        this.localStorageAliasThemeName = 'mdsPrefThemeName';
-        this.localStorageAliasThemeScheme = 'mdsPrefThemeScheme';
-        this.defaultTheme = 'default';
-        this.t = new Locale({
-            el: localeEl,
-            en: localeEn,
-            es: localeEs,
-            it: localeIt,
-        });
-        this.clasNameThemeNamePrefix = 'pref-theme-name-';
-        this.previousName = null;
-        this.customPropertyAliasThemeScheme = '--magma-pref-theme-scheme';
-        this.customPropertyAliasThemeName = '--magma-pref-theme-name';
-        this.schemeSet = {
-            light: 'pref-theme-scheme-light',
-            dark: 'pref-theme-scheme-dark',
-            all: 'pref-theme-scheme-all',
-        };
-        /**
-         * Specifies the theme name attribute
-         * A string representing the theme name, should be a simple string name or kebab kase name.
-         * `Examples of valid language codes include "magma", "maggioli-editore", etc.`
-         */
-        this.name = 'default';
-        /**
-         * Specifies the theme scheme which can be 'light', 'dark' or 'all'
-         * Default is 'all' which means this theme supporto both light and dark.
-         * If you set 'light' means this theme support only light mode and will be forced and shown light colors mode only.
-         */
-        this.scheme = 'all';
-        this.toggleDropdown = () => {
-            this.showDropdown = !this.showDropdown;
-        };
-        this.hideThemeVariantDropdownSelect = () => {
-            this.showDropdown = false;
-        };
-        this.changeThemeVariantItem = () => {
-            this.elPreferThemeVariantItems.forEach((element) => {
-                element.selected = false;
-            });
-        };
-        this.checkThemeVariantSelect = () => {
-            this.elPreferThemeVariantItems = this.element.querySelectorAll('mds-pref-theme-variant-item');
-            this.elPreferThemeVariantItems.forEach((element) => {
-                element.addEventListener('mdsPrefThemeVariantItemSelect', (e) => {
-                    this.changeThemeVariantItem();
-                    this.currentSelectedItem = e.currentTarget;
-                    this.currentSelectedItem.selected = true;
-                    const name = e.detail.name.toLowerCase();
-                    const scheme = e.detail.scheme.toLowerCase();
-                    this.themeChangeEvent.emit({ name, scheme });
-                    this.showDropdown = false;
-                    this.setThemeVariant(name, scheme);
-                    this.t.update(document);
-                });
-            });
-            this.elPreferThemeVariantItems.forEach((element) => {
-                element.selected = element.name === this.name;
-            });
-        };
-        this.setThemeVariant = (name, scheme) => {
-            if (!/^[a-z]+(-[a-z]+)*$/gm.exec(name)) {
-                throw Error(`Theme variant name not valid: ${name}`);
-            }
-            this.name = name;
-            this.scheme = scheme;
-            this.prefChangeEvent.emit({ preference: 'theme-variant' });
-            localStorage.setItem(this.localStorageAliasThemeName, this.name);
-            localStorage.setItem(this.localStorageAliasThemeScheme, this.scheme);
-            if (document) {
-                const element = document.querySelector('html');
-                // cleanup previeous selection
-                for (const key in this.schemeSet) {
-                    if ({}.hasOwnProperty.call(this.schemeSet, key)) {
-                        element === null || element === void 0 ? void 0 : element.classList.remove(this.schemeSet[key]);
-                    }
-                }
-                if (this.previousName) {
-                    element === null || element === void 0 ? void 0 : element.classList.remove(this.clasNameThemeNamePrefix + this.previousName);
-                }
-                // set new selection
-                element === null || element === void 0 ? void 0 : element.setAttribute('data-theme-name', this.name);
-                element === null || element === void 0 ? void 0 : element.classList.add(this.schemeSet[this.scheme]);
-                element === null || element === void 0 ? void 0 : element.classList.add(this.clasNameThemeNamePrefix + this.name);
-                element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAliasThemeName, this.name);
-                element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAliasThemeScheme, this.scheme);
-                this.previousName = this.name;
-            }
-        };
-    }
-    async updateLang() {
-        this.language = this.t.lang(this.element);
-    }
-    componentDidLoad() {
-        this.checkThemeVariantSelect();
-    }
-    componentWillRender() {
-        var _a, _b;
-        this.userThemeName = localStorage.getItem(this.localStorageAliasThemeName);
-        this.userThemeScheme = localStorage.getItem(this.localStorageAliasThemeScheme);
-        this.setThemeVariant((_a = this.userThemeName) !== null && _a !== void 0 ? _a : this.name, (_b = this.userThemeScheme) !== null && _b !== void 0 ? _b : this.scheme);
-        this.t.lang(this.element);
-    }
-    render() {
-        return (h(Host, { key: '15e431592fa7b91f8b964a3848de67406baf072f' }, h("div", { key: 'a0a16b7172f212c8664ee3cf1fa298884922b62f', class: "menu" }, h("mds-text", { key: 'b76c54c74c66191278d1dfe9c3eb9bc7e6d55fad', class: "info", typography: "caption" }, h("b", { key: 'ec9f3e8fc0887393539ba47220d20c9db03a3449' }, this.t.get('label'))), h("mds-tab", { key: '7df63e45e1d9265ffc3617cfc49a1e167996d66b', fill: true, size: this.size }, h("mds-tab-item", { key: '2b80350e8481b2e0b7d82f3b4a4f013b6ff949d0', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), h("mds-dropdown", { key: '05732e03bb52fe1477f2933e127cfc699f92f941', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect, autoPlacement: true }, h("slot", { key: '1b984764ffcb3467ff1050b3eef5c1c83edff918' })), this.name !== this.defaultTheme && (h("mds-text", { key: '7871a4799701c0fda9f6c35b913cf7a00e9d7510', typography: "caption" }, this.t.get('defaultTheme')))));
-    }
-    get element() { return this; }
-    static get style() { return mdsPrefThemeVariantCss; }
-}, [257, "mds-pref-theme-variant", {
-        "size": [513],
-        "name": [1537],
-        "scheme": [1537],
-        "showDropdown": [32],
-        "language": [32],
-        "updateLang": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-pref-theme-variant", "mds-button", "mds-dropdown", "mds-icon", "mds-spinner", "mds-tab", "mds-tab-item", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-pref-theme-variant":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsPrefThemeVariant$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mds-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-tab":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-tab-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsPrefThemeVariant = MdsPrefThemeVariant$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsPrefThemeVariant, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as a,transformTag as m}from"@stencil/core/internal/client";import{L as r}from"./locale.js";import{m as n}from"./keyboard-arrow-down.js";import{m as o}from"./keyboard-arrow-up.js";import{d}from"./mds-button2.js";import{d as h}from"./mds-dropdown2.js";import{d as l}from"./mds-icon2.js";import{d as c}from"./mds-spinner2.js";import{d as b}from"./mds-tab2.js";import{d as p}from"./mds-tab-item2.js";import{d as f}from"./mds-text2.js";var u={label:"Θέμα"},v={label:"Theme"},y={label:"Tema"},g={label:"Tema"};const k=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.themeChangeEvent=s(this,"mdsPrefThemeVariantChange",7),this.prefChangeEvent=s(this,"mdsPrefChange",7),this.showDropdown=!1,this.localStorageAliasThemeName="mdsPrefThemeName",this.localStorageAliasThemeScheme="mdsPrefThemeScheme",this.defaultTheme="default",this.t=new r({el:u,en:v,es:y,it:g}),this.clasNameThemeNamePrefix="pref-theme-name-",this.previousName=null,this.customPropertyAliasThemeScheme="--magma-pref-theme-scheme",this.customPropertyAliasThemeName="--magma-pref-theme-name",this.schemeSet={light:"pref-theme-scheme-light",dark:"pref-theme-scheme-dark",all:"pref-theme-scheme-all"},this.name="default",this.scheme="all",this.toggleDropdown=()=>{this.showDropdown=!this.showDropdown},this.hideThemeVariantDropdownSelect=()=>{this.showDropdown=!1},this.changeThemeVariantItem=()=>{this.elPreferThemeVariantItems.forEach((e=>{e.selected=!1}))},this.checkThemeVariantSelect=()=>{this.elPreferThemeVariantItems=this.element.querySelectorAll("mds-pref-theme-variant-item"),this.elPreferThemeVariantItems.forEach((e=>{e.addEventListener("mdsPrefThemeVariantItemSelect",(e=>{this.changeThemeVariantItem(),this.currentSelectedItem=e.currentTarget,this.currentSelectedItem.selected=!0;const t=e.detail.name.toLowerCase(),s=e.detail.scheme.toLowerCase();this.themeChangeEvent.emit({name:t,scheme:s}),this.showDropdown=!1,this.setThemeVariant(t,s),this.t.update(document)}))})),this.elPreferThemeVariantItems.forEach((e=>{e.selected=e.name===this.name}))},this.setThemeVariant=(e,t)=>{if(!/^[a-z]+(-[a-z]+)*$/gm.exec(e))throw Error("Theme variant name not valid: "+e);if(this.name=e,this.scheme=t,this.prefChangeEvent.emit({preference:"theme-variant"}),localStorage.setItem(this.localStorageAliasThemeName,this.name),localStorage.setItem(this.localStorageAliasThemeScheme,this.scheme),"undefined"!=typeof document){const e=document.querySelector("html");for(const t in this.schemeSet)({}).hasOwnProperty.call(this.schemeSet,t)&&(null==e||e.classList.remove(this.schemeSet[t]));null!==this.previousName&&""!==this.previousName&&(null==e||e.classList.remove(this.clasNameThemeNamePrefix+this.previousName)),null==e||e.setAttribute("data-theme-name",this.name),null==e||e.classList.add(this.schemeSet[this.scheme]),null==e||e.classList.add(this.clasNameThemeNamePrefix+this.name),null==e||e.style.setProperty(this.customPropertyAliasThemeName,this.name),null==e||e.style.setProperty(this.customPropertyAliasThemeScheme,this.scheme),this.previousName=this.name}}}async updateLang(){this.language=this.t.lang(this.element)}componentDidLoad(){this.checkThemeVariantSelect()}componentWillRender(){var e,t;this.userThemeName=localStorage.getItem(this.localStorageAliasThemeName),this.userThemeScheme=localStorage.getItem(this.localStorageAliasThemeScheme),this.setThemeVariant(null!==(e=this.userThemeName)&&void 0!==e?e:this.name,null!==(t=this.userThemeScheme)&&void 0!==t?t:this.scheme),this.t.lang(this.element)}render(){return i(a,{key:"5232c814c636b1f3cf3351e67460cdfd9b9c1b56"},i("div",{key:"a2a255a4c62cc2aa4cbac79886e629bebce294f7",class:"menu"},i("mds-text",{key:"02a7f081c306907d973009a3a7e73b8059940352",class:"info",typography:"caption"},i("b",{key:"01967f8b9aea1f6324ef1f15d5ae958b92e005b4"},this.t.get("label"))),i("mds-tab",{key:"ef02c8b82bbadcad95541f67be2dcf4ba0ddc2fc",fill:!0,size:this.size},i("mds-tab-item",{key:"663e683eac4d520e61fbc76cf4d048feacb798d2",selected:!0,onClick:this.toggleDropdown,id:"mds-pref-theme-variant-nav",class:"item item--custom-theme-variant","icon-position":"right",icon:this.showDropdown?o:n},this.name))),i("mds-dropdown",{key:"e86ce5ba509a6b015add47622fe94d6d59aba713",class:"mds-pref-theme-variant-dropdown",target:"#mds-pref-theme-variant-nav",interaction:"none",visible:this.showDropdown,onMdsDropdownHide:this.hideThemeVariantDropdownSelect,autoPlacement:!0},i("slot",{key:"9b18d8d7f8d5bdb1b75150ee0559c12f8d385bda"})),this.name!==this.defaultTheme&&i("mds-text",{key:"60cb41f838f81abdbf7e7d78fb56ea6faca48c26",typography:"caption"},this.t.get("defaultTheme")))}get element(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}"}},[257,"mds-pref-theme-variant",{size:[513],name:[1537],scheme:[1537],showDropdown:[32],language:[32],updateLang:[64]}]),w=k,x=function(){"undefined"!=typeof customElements&&["mds-pref-theme-variant","mds-button","mds-dropdown","mds-icon","mds-spinner","mds-tab","mds-tab-item","mds-text"].forEach((e=>{switch(e){case"mds-pref-theme-variant":customElements.get(m(e))||customElements.define(m(e),k);break;case"mds-button":customElements.get(m(e))||d();break;case"mds-dropdown":customElements.get(m(e))||h();break;case"mds-icon":customElements.get(m(e))||l();break;case"mds-spinner":customElements.get(m(e))||c();break;case"mds-tab":customElements.get(m(e))||b();break;case"mds-tab-item":customElements.get(m(e))||p();break;case"mds-text":customElements.get(m(e))||f()}}))};export{w as MdsPrefThemeVariant,x as defineCustomElement}