@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-input-toggle.js

@@ -1,371 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, t as toString, d as allItemsAreString, i as isValidString } from './index2.js';
-import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}";
-
-/**
- * type Option validation function
- * @param option - radio option
- * @returns toggle option type is valid
- */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
-const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChange = createEvent(this, "value-change", 7);
-        this.inputValid = createEvent(this, "input-valid", 7);
-        // Classes
-        this.classIsActive = 'mg-c-input--toggle-is-active';
-        this.classOnOff = 'mg-c-input--toggle-on-off';
-        this.classIcon = 'mg-c-input--toggle-icon';
-        /**
-         * Input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if toggle have on/off style,
-         * the left icon is hidden.
-         * Only available in combination with the "isIcon" prop.
-         */
-        this.isOnOff = false;
-        /**
-         * Define if toggle display icon
-         */
-        this.isIcon = false;
-        /**
-         * Define if input is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--toggle']);
-        /**
-         * Set input error message
-         * @param errorMessage - errorMessage override
-         */
-        this.setErrorMessage = (errorMessage) => {
-            // Set error message
-            this.errorMessage = undefined;
-            // Does have a custom error message
-            if (!this.valid && typeof errorMessage === 'string') {
-                this.errorMessage = errorMessage;
-            }
-        };
-        /**
-         * Handle switch button to update value
-         */
-        this.handleSwitchButton = () => {
-            const currentOptionIndex = this.getCurrentOptionIndex(this.value);
-            this.value = this.options[currentOptionIndex === 0 ? 1 : 0].value;
-        };
-        /**
-         * Slots validation
-         */
-        this.validateSlots = () => {
-            const slots = Array.from(this.element.children);
-            // validate slots
-            if (slots.length !== 2) {
-                if (this.isOnOff && this.isIcon) {
-                    // ONLY slot="item-2" is required in with isOnOff && isIcon
-                    if (this.element.querySelector('[slot="item-2"]') === null) {
-                        throw new Error('<mg-input-toggle> an element with attribute slot="item-2" is required.');
-                    }
-                }
-                else {
-                    throw new Error('<mg-input-toggle> 2 slots are required.');
-                }
-            }
-            // update slots
-            if (!this.isIcon) {
-                // Due to text-overflow set to ellipsis
-                // we need to ensure that slot element have title to display value on mouse over
-                slots.forEach(slot => slot.setAttribute('title', slot.textContent));
-            }
-            else {
-                slots.forEach(slot => {
-                    if (slot.nodeName === 'MG-ICON') {
-                        slot.size = 'small';
-                    }
-                });
-            }
-        };
-        /**
-         * Get checked item
-         * @param checked - checked item
-         * @returns toggle value
-         */
-        this.getCurrentOptionIndex = (value) => {
-            return this.options.findIndex(option => toString(option.value) === toString(value)) === 1 ? 1 : 0;
-        };
-        /**
-         * Check if value is checked
-         * @param value - toggle value
-         * @returns truthy if value is checked
-         */
-        this.isChecked = (value) => {
-            return this.getCurrentOptionIndex(value) === 1;
-        };
-    }
-    watchValue(newValue, oldValue) {
-        // A "true" attribute can be represented by an empty string
-        // We need to convert it to a boolean true value
-        if (newValue === '') {
-            this.value = true;
-            // Return early to prevent infinite loop
-            return;
-        }
-        // https://stenciljs.com/docs/properties
-        // According to the Stencil documentation, when a prop is declared as `any`, boolean values can be bound as boolean attributes.
-        // However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
-        // To avoid incorrect type interpretation when a boolean is received as a string,
-        // we normalize the value and convert it to a proper boolean before internal use.
-        else if (['true', 'false'].includes(newValue) && this.options.every(option => typeof option.value === 'boolean')) {
-            this.value = newValue === 'true';
-            // Return early to prevent infinite loop
-            return;
-        }
-        if (this.isChecked(newValue)) {
-            this.classCollection.add(this.classIsActive);
-        }
-        else {
-            this.classCollection.delete(this.classIsActive);
-        }
-        // when value is reassigned programmatically from previous `watchValue` call
-        // `oldValue` can be a string while `newValue` is boolean or vice versa
-        // so we need to compare them as strings to prevent infinite loop and unnecessary event emission
-        if (toString(newValue) !== toString(oldValue)) {
-            // Emit value-change event
-            this.valueChange.emit(newValue);
-        }
-    }
-    watchItems(newValue) {
-        if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
-        }
-        // String array
-        else if (allItemsAreString(newValue)) {
-            this.options = newValue.map(item => ({ title: item, value: item }));
-        }
-        // Object array
-        else if (Array.isArray(newValue) && newValue.every(isOption)) {
-            this.options = newValue;
-        }
-        else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchIsOnOff(newValue) {
-        if (newValue) {
-            this.classCollection.add(this.classOnOff);
-            if (!this.isIcon) {
-                this.isOnOff = false;
-                console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.');
-            }
-        }
-        else {
-            this.classCollection.delete(this.classOnOff);
-        }
-    }
-    watchIsIcon(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classIcon);
-        else
-            this.classCollection.delete(this.classIcon);
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    watchDisabled(newValue) {
-        if (newValue)
-            this.classCollection.add(classDisabled);
-        else
-            this.classCollection.delete(classDisabled);
-    }
-    /**
-     * Set focus on input.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Set an error and display a custom error message.
-     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-     * It must be paired with an error message to display for the given context.
-     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-     * @param valid - value indicating the validity
-     * @param errorMessage - the error message to display
-     */
-    async setError(valid, errorMessage) {
-        if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
-        }
-        else {
-            this.valid = valid;
-            this.inputValid.emit(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
-        }
-    }
-    /**
-     * Reset value, validity, error and visual state
-     */
-    async reset() {
-        if (!this.readonly) {
-            this.value = this.options[0].value;
-            // Use `Promise` as requested for stencil method
-            // Use `requestAnimationFrame` to ensure:
-            // - DOM is fully updated before validation
-            // - Async operations are completed
-            // - No timing issues with Stencil's render cycle
-            // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
-                requestAnimationFrame(() => {
-                    this.errorMessage = undefined;
-                    resolve();
-                });
-            });
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        this.watchItems(this.items);
-        this.validateSlots();
-        this.watchValue(this.value);
-        this.watchIsIcon(this.isIcon);
-        this.watchIsOnOff(this.isOnOff);
-        this.watchReadonly(this.readonly);
-        this.watchDisabled(this.disabled);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
-        return (h("mg-input", { key: '7e4a6a75069f6f3c0c49a5989f0b4e7a56954efc', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
-                if (el !== null)
-                    this.button = el;
-            } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["watchValue"],
-        "items": ["watchItems"],
-        "isOnOff": ["watchIsOnOff"],
-        "isIcon": ["watchIsIcon"],
-        "readonly": ["watchReadonly"],
-        "disabled": ["watchDisabled"]
-    }; }
-    static get style() { return mgInputToggleCss; }
-}, [257, "mg-input-toggle", {
-        "value": [1040],
-        "items": [16],
-        "identifier": [1],
-        "name": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "isOnOff": [1028, "is-on-off"],
-        "isIcon": [4, "is-icon"],
-        "readonly": [4],
-        "disabled": [4],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "helpText": [1, "help-text"],
-        "classCollection": [32],
-        "options": [32],
-        "errorMessage": [32],
-        "valid": [32],
-        "setFocus": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["watchValue"],
-        "items": ["watchItems"],
-        "isOnOff": ["watchIsOnOff"],
-        "isIcon": ["watchIsIcon"],
-        "readonly": ["watchReadonly"],
-        "disabled": ["watchDisabled"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-toggle", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-toggle":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputToggle$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgInputToggle = MgInputToggle$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputToggle, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as o,h as n}from"@stencil/core/internal/client";import{C as s,t as r,d as g,i as a}from"./index2.js";import{c as l,b as m}from"./mg-input.conf.js";import{d as c}from"./mg-icon2.js";import{d as h}from"./mg-input2.js";import{d as u}from"./mg-input-title2.js";import{d as p}from"./mg-tooltip2.js";import{d}from"./mg-tooltip-content2.js";const b=t=>"object"==typeof t&&"string"==typeof t.title,f=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=o(this,"value-change",7),this.inputValid=o(this,"input-valid",7),this.classIsActive="mg-c-input--toggle-is-active",this.classOnOff="mg-c-input--toggle-on-off",this.classIcon="mg-c-input--toggle-icon",this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.isOnOff=!1,this.isIcon=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new s(["mg-c-input--toggle"]),this.setErrorMessage=t=>{this.errorMessage=void 0,this.valid||"string"!=typeof t||(this.errorMessage=t)},this.handleSwitchButton=()=>{const t=this.getCurrentOptionIndex(this.value);this.value=this.options[0===t?1:0].value},this.validateSlots=()=>{const t=Array.from(this.element.children);if(2!==t.length){if(!this.isOnOff||!this.isIcon)throw Error("<mg-input-toggle> 2 slots are required.");if(null===this.element.querySelector('[slot="item-2"]'))throw Error('<mg-input-toggle> an element with attribute slot="item-2" is required.')}t.forEach(this.isIcon?t=>{"MG-ICON"===t.nodeName&&(t.size="small")}:t=>t.setAttribute("title",t.textContent))},this.getCurrentOptionIndex=t=>1===this.options.findIndex((i=>r(i.value)===r(t)))?1:0,this.isChecked=t=>1===this.getCurrentOptionIndex(t)}watchValue(t,i){""!==t?["true","false"].includes(t)&&this.options.every((t=>"boolean"==typeof t.value))?this.value="true"===t:(this.isChecked(t)?this.classCollection.add(this.classIsActive):this.classCollection.delete(this.classIsActive),r(t)!==r(i)&&this.valueChange.emit(t)):this.value=!0}watchItems(t){if("object"==typeof t&&2!==this.items.length)throw Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${r(t)}.`);if(g(t))this.options=t.map((t=>({title:t,value:t})));else{if(!Array.isArray(t)||!t.every(b))throw Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${r(t)}.`);this.options=t}}watchIsOnOff(t){t?(this.classCollection.add(this.classOnOff),this.isIcon||(this.isOnOff=!1,console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.'))):this.classCollection.delete(this.classOnOff)}watchIsIcon(t){t?this.classCollection.add(this.classIcon):this.classCollection.delete(this.classIcon)}watchReadonly(t){t?this.classCollection.add(l):this.classCollection.delete(l)}watchDisabled(t){t?this.classCollection.add(m):this.classCollection.delete(m)}async setFocus(){var t;null===(t=this.button)||void 0===t||t.focus()}async setError(t,i){if("boolean"!=typeof t)throw Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!a(i))throw Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');this.valid=t,this.inputValid.emit(t),this.setErrorMessage(t?void 0:i)}async reset(){if(!this.readonly)return this.value=this.options[0].value,new Promise((t=>{requestAnimationFrame((()=>{this.errorMessage=void 0,t()}))}))}componentWillLoad(){this.watchItems(this.items),this.validateSlots(),this.watchValue(this.value),this.watchIsIcon(this.isIcon),this.watchIsOnOff(this.isOnOff),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled)}render(){const t=this.options[this.getCurrentOptionIndex(this.value)];return n("mg-input",{key:"834a0b0713019490b91d799ac9688661f930de43",label:this.label,helpText:this.helpText,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:void 0,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,errorMessage:this.errorMessage},this.readonly?t&&n("b",{class:"mg-c-input__readonly-value"},t.title):n("button",{type:"button",role:"switch","aria-checked":""+this.isChecked(this.value),"aria-readonly":this.disabled||this.readonly,id:this.identifier,class:"mg-c-input__button-toggle",disabled:this.disabled||this.readonly,onClick:this.handleSwitchButton,ref:t=>{null!==t&&(this.button=t)}},n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-1"})),n("span",{"aria-hidden":"true",class:"mg-c-input__toggle-item-container"},n("slot",{name:"item-2"}))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{watchDisabled:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}"}},[257,"mg-input-toggle",{value:[1040],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],isOnOff:[1028,"is-on-off"],isIcon:[4,"is-icon"],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],classCollection:[32],options:[32],errorMessage:[32],valid:[32],setFocus:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{watchItems:0}],isOnOff:[{watchIsOnOff:0}],isIcon:[{watchIsIcon:0}],readonly:[{watchReadonly:0}],disabled:[{watchDisabled:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-input-toggle","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-toggle":customElements.get(t(i))||customElements.define(t(i),f);break;case"mg-icon":customElements.get(t(i))||c();break;case"mg-input":customElements.get(t(i))||h();break;case"mg-input-title":customElements.get(t(i))||u();break;case"mg-tooltip":customElements.get(t(i))||p();break;case"mg-tooltip-content":customElements.get(t(i))||d()}}))}v();const w=f,y=v;export{w as MgInputToggle,y as defineCustomElement}

package/dist/components/mg-input.conf.js

@@ -0,0 +1 @@
+const a=[2,4,16,"full"],s=["input","label"],t=["h1","h2","h3","h4","h5","h6"],i=a=>"MG-INPUT-FILE"===a.nodeName,l="mg-c-input--fieldset",c="mg-c-input--disabled",e="mg-c-input--readonly",n="mg-c-input--vertical-list",p="mg-c-input--display-character-left";export{l as a,c as b,e as c,n as d,p as e,i,t as l,s as t,a as w}

package/dist/components/mg-input.js

@@ -1,6 +1 @@
-import { M as MgInput$1, d as defineCustomElement$1 } from './mg-input2.js';
-
-const MgInput = MgInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInput, defineCustomElement };
+import{M as o,d as s}from"./mg-input2.js";const t=o,m=s;export{t as MgInput,m as defineCustomElement}