@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-panel.js

@@ -1,350 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, a as isValideID, t as toString, i as isValidString } from './index2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$a } from './mg-button2.js';
-import { d as defineCustomElement$9 } from './mg-card2.js';
-import { d as defineCustomElement$8 } from './mg-character-left2.js';
-import { d as defineCustomElement$7 } from './mg-icon2.js';
-import { d as defineCustomElement$6 } from './mg-input2.js';
-import { d as defineCustomElement$5 } from './mg-input-text2.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';
-
-/**
- * Available expand toggle display options
- */
-const expandToggleDisplays = ['text', 'icon'];
-/**
- * Available title positions
- */
-const titlePositions = ['left', 'right'];
-
-const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-c-card-border-radius-default`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `unset`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}";
-
-const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.titleChange = createEvent(this, "title-change", 7);
-        this.expandedChange = createEvent(this, "expanded-change", 7);
-        /**
-         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-         * If not set, it will be created.
-         */
-        this.identifier = createID('mg-panel');
-        /**
-         * Define if panel title is editable
-         */
-        this.titleEditable = false;
-        /**
-         * Define title position
-         */
-        this.titlePosition = 'left';
-        /**
-         * Panel is opened
-         */
-        this.expanded = false;
-        /**
-         * Define expand toggle button display
-         */
-        this.expandToggleDisplay = 'text';
-        /**
-         * Disable possibility to toggle expand
-         */
-        this.expandToggleDisabled = false;
-        /**
-         * Add box-shadow style
-         */
-        this.shadow = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-panel']);
-        /**
-         * Title is in edition mode
-         */
-        this.isEditing = false;
-        /************
-         * Methods *
-         ************/
-        /**
-         * Check if panel-title slot is used
-         * @returns true if slot is used
-         */
-        this.hasPanelTitleSlot = () => {
-            return this.element.querySelector('[slot="panel-title"]') !== null;
-        };
-        /**
-         * Toggle is editing state
-         */
-        this.toggleIsEditing = () => {
-            this.isEditing = !this.isEditing;
-        };
-        /************
-         * Handlers *
-         ************/
-        /**
-         * Collapse button click handler
-         */
-        this.handleCollapseButton = () => {
-            if (!this.expandToggleDisabled)
-                this.expanded = !this.expanded;
-        };
-        /**
-         * Edit button click handler
-         */
-        this.handleEditButton = () => {
-            this.toggleIsEditing();
-        };
-        /**
-         * Update title handler
-         * @param event - input value change event
-         */
-        this.handleUpdateTitle = (event) => {
-            this.updatedPanelTitle = event.detail;
-        };
-        /**
-         * Cancel edition button handler
-         */
-        this.handleCancelEditButton = () => {
-            this.updatedPanelTitle = undefined;
-            this.toggleIsEditing();
-        };
-        /**
-         * Validate edition button handler
-         */
-        this.handleValidateEditButton = () => {
-            if (!this.editInputElement.valid)
-                return;
-            if (this.updatedPanelTitle !== undefined)
-                this.panelTitle = this.updatedPanelTitle;
-            this.toggleIsEditing();
-        };
-        /*************
-         * Render *
-         *************/
-        /**
-         * Render collapse button
-         * @returns collpase button
-         */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
-        /**
-         * Render edit button
-         * @returns edit Button
-         */
-        this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton }, h("mg-icon", { icon: "pen" })));
-        /**
-         * Render input button
-         * @returns edit title input
-         */
-        this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, characterLeftHide: true, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton }, h("mg-icon", { icon: "check" }))));
-        /**
-         * Render title
-         * @returns title element
-         */
-        this.renderTitle = () => {
-            const elementsToRender = [this.renderCollapseButton()];
-            // Add edit functionality only if not using slot and title is editable
-            if (this.titleEditable && !this.hasPanelTitleSlot()) {
-                if (!this.isEditing)
-                    elementsToRender.push(this.renderEditButton());
-                else
-                    elementsToRender.push(this.renderEditInput());
-            }
-            return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;
-        };
-        /**
-         * Render header children
-         * @returns header child
-         */
-        this.renderHeaderChildren = () => {
-            const children = [
-                h("div", { class: { 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
-                h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
-            ];
-            return this.titlePosition === 'right' ? children.reverse() : children;
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validatePanelTitle(newValue) {
-        if (newValue !== undefined) {
-            if (!isValidString(newValue)) {
-                throw new Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${toString(newValue)}.`);
-            }
-            else {
-                this.titleChange.emit(newValue);
-            }
-        }
-    }
-    validateTitlePattern(newValue) {
-        if (newValue !== undefined && !this.titleEditable)
-            throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
-    }
-    validateTitleEditable(newValue) {
-        if (newValue && this.hasPanelTitleSlot()) {
-            throw new Error(`<mg-panel> prop "titleEditable" cannot be used with panel-title slot.`);
-        }
-    }
-    validateTitlePosition(newValue) {
-        if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);
-    }
-    handleExpanded(newValue) {
-        this.expandedChange.emit(newValue);
-    }
-    validateExpandToggleDisplay(newValue) {
-        if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);
-        if (newValue === 'icon' && this.titleEditable)
-            this.titleEditable = false;
-        if (newValue === 'icon' && this.hasPanelTitleSlot()) {
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
-        this.watchIdentifier(this.identifier);
-        this.validateTitlePattern(this.titlePattern);
-        this.validateTitlePattern(this.titlePatternErrorMessage);
-        // Only validate panelTitle if slot is not used
-        if (!this.hasPanelTitleSlot()) {
-            if (!isValidString(this.panelTitle))
-                throw new Error(`<mg-panel> prop "panelTitle" is required when panel-title slot is not used.`);
-            this.validatePanelTitle(this.panelTitle);
-        }
-        this.validateExpandToggleDisplay(this.expandToggleDisplay);
-        this.validateTitlePosition(this.titlePosition);
-        this.validateTitleEditable(this.titleEditable);
-    }
-    /**
-     * Edit DOM after render
-     */
-    componentDidRender() {
-        // when we are editing we get focus on edition input
-        if (this.isEditing)
-            this.editInputElement.setFocus();
-    }
-    /**
-     * Render component
-     * @returns rendered component
-     */
-    render() {
-        const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '3662204d763051c34ea13de4b7b3f7abc7914b81', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '46f113258172b1d040f65a4d312554b0c0551489', shadow: this.shadow }, h("header", { key: '1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ab0aec831cc79d982b7556d6e245c80ae2979083', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'e831573fe9d5ff783073d123b7e2a54baad73bfc' })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "panelTitle": ["validatePanelTitle"],
-        "titlePattern": ["validateTitlePattern"],
-        "titlePatternErrorMessage": ["validateTitlePattern"],
-        "titleEditable": ["validateTitleEditable"],
-        "titlePosition": ["validateTitlePosition"],
-        "expanded": ["handleExpanded"],
-        "expandToggleDisplay": ["validateExpandToggleDisplay"]
-    }; }
-    static get style() { return mgPanelCss; }
-}, [257, "mg-panel", {
-        "identifier": [1],
-        "panelTitle": [1025, "panel-title"],
-        "titlePattern": [1, "title-pattern"],
-        "titlePatternErrorMessage": [1, "title-pattern-error-message"],
-        "titleEditable": [1028, "title-editable"],
-        "titlePosition": [1, "title-position"],
-        "expanded": [1028],
-        "expandToggleDisplay": [1, "expand-toggle-display"],
-        "expandToggleDisabled": [4, "expand-toggle-disabled"],
-        "shadow": [4],
-        "classCollection": [32],
-        "isEditing": [32],
-        "updatedPanelTitle": [32]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "panelTitle": ["validatePanelTitle"],
-        "titlePattern": ["validateTitlePattern"],
-        "titlePatternErrorMessage": ["validateTitlePattern"],
-        "titleEditable": ["validateTitleEditable"],
-        "titlePosition": ["validateTitlePosition"],
-        "expanded": ["handleExpanded"],
-        "expandToggleDisplay": ["validateExpandToggleDisplay"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgPanel$1);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "mg-character-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input-text":
-            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 MgPanel = MgPanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgPanel, defineCustomElement };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{c as n,C as l,a as o,t as r,i as c}from"./index2.js";import{i as d}from"./index3.js";import{d as h}from"./mg-button2.js";import{d as m}from"./mg-card2.js";import{d as g}from"./mg-character-left2.js";import{d as p}from"./mg-icon2.js";import{d as u}from"./mg-input2.js";import{d as f}from"./mg-input-text2.js";import{d as b}from"./mg-input-title2.js";import{d as v}from"./mg-tooltip2.js";import{d as x}from"./mg-tooltip-content2.js";const _=["text","icon"],E=["left","right"],w=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.titleChange=a(this,"title-change",7),this.expandedChange=a(this,"expanded-change",7),this.identifier=n("mg-panel"),this.titleEditable=!1,this.titlePosition="left",this.expanded=!1,this.expandToggleDisplay="text",this.expandToggleDisabled=!1,this.shadow=!1,this.classCollection=new l(["mg-c-panel"]),this.isEditing=!1,this.hasPanelTitleSlot=()=>null!==this.element.querySelector('[slot="panel-title"]'),this.toggleIsEditing=()=>{this.isEditing=!this.isEditing},this.handleCollapseButton=()=>{this.expandToggleDisabled||(this.expanded=!this.expanded)},this.handleEditButton=()=>{this.toggleIsEditing()},this.handleUpdateTitle=t=>{this.updatedPanelTitle=t.detail},this.handleCancelEditButton=()=>{this.updatedPanelTitle=void 0,this.toggleIsEditing()},this.handleValidateEditButton=()=>{this.editInputElement.valid&&(void 0!==this.updatedPanelTitle&&(this.panelTitle=this.updatedPanelTitle),this.toggleIsEditing())},this.renderCollapseButton=()=>s("mg-button",{onClick:this.handleCollapseButton,variant:"flat","aria-expanded":""+this.expanded,"aria-controls":this.identifier+"-content",disabled:this.expandToggleDisabled,isIcon:"icon"===this.expandToggleDisplay,label:"icon"===this.expandToggleDisplay?this.panelTitle:void 0},s("span",{class:"mg-c-panel__collapse-button-content"},s("mg-icon",{icon:"chevron-up",class:{"mg-c-panel__collapse-button-icon":!0,"mg-c-panel__collapse-button-icon--reverse":!this.expanded}}),!this.isEditing&&"icon"!==this.expandToggleDisplay&&(this.hasPanelTitleSlot()?s("slot",{name:"panel-title"}):this.panelTitle))),this.renderEditButton=()=>s("mg-button",{key:"edit-button","is-icon":!0,variant:"flat",label:this.messages.panel.editLabel,onClick:this.handleEditButton},s("mg-icon",{icon:"pen"})),this.renderEditInput=()=>s("mg-input-text",{key:"edition-input",label:this.messages.panel.editLabel,"label-hide":!0,value:this.panelTitle,"onValue-change":this.handleUpdateTitle,characterLeftHide:!0,pattern:this.titlePattern,"pattern-error-message":this.titlePatternErrorMessage,identifier:this.identifier+"-edition-input",ref:t=>this.editInputElement=t},s("mg-button",{slot:"append-input",label:this.messages.general.cancel,"is-icon":!0,variant:"secondary",onClick:this.handleCancelEditButton},s("mg-icon",{icon:"cross"})),s("mg-button",{slot:"append-input",label:this.messages.general.confirm,"is-icon":!0,variant:"secondary",onClick:this.handleValidateEditButton},s("mg-icon",{icon:"check"}))),this.renderTitle=()=>{const t=[this.renderCollapseButton()];return this.titleEditable&&!this.hasPanelTitleSlot()&&t.push(this.isEditing?this.renderEditInput():this.renderEditButton()),"right"===this.titlePosition?t.reverse():t},this.renderHeaderChildren=()=>{const t=[s("div",{class:{"mg-c-panel__header-title":!0,"mg-c-panel__header-title--full":this.isEditing,"mg-c-panel__header-title--reverse":"right"===this.titlePosition},key:this.panelTitle},this.renderTitle()),s("div",{class:"mg-c-panel__header-content",key:"slot-header"},s("slot",{name:"header-right"}))];return"right"===this.titlePosition?t.reverse():t}}watchIdentifier(t){o(t)||console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${r(t)}.`)}validatePanelTitle(t){if(void 0!==t){if(!c(t))throw Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${r(t)}.`);this.titleChange.emit(t)}}validateTitlePattern(t){if(void 0!==t&&!this.titleEditable)throw Error('<mg-panel> prop "titleEditable" must be set to "true".')}validateTitleEditable(t){if(t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "titleEditable" cannot be used with panel-title slot.')}validateTitlePosition(t){if(!E.includes(t))throw Error(`<mg-panel> prop "titlePosition" must be one of: ${E.join(", ")}. Passed value: ${r(t)}.`)}handleExpanded(t){this.expandedChange.emit(t)}validateExpandToggleDisplay(t){if(!_.includes(t))throw Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${_.join(", ")}. Passed value: ${r(t)}.`);if("icon"===t&&this.titleEditable&&(this.titleEditable=!1),"icon"===t&&this.hasPanelTitleSlot())throw Error('<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.')}componentWillLoad(){if(this.messages=d(this.element).messages,this.watchIdentifier(this.identifier),this.validateTitlePattern(this.titlePattern),this.validateTitlePattern(this.titlePatternErrorMessage),!this.hasPanelTitleSlot()){if(!c(this.panelTitle))throw Error('<mg-panel> prop "panelTitle" is required when panel-title slot is not used.');this.validatePanelTitle(this.panelTitle)}this.validateExpandToggleDisplay(this.expandToggleDisplay),this.validateTitlePosition(this.titlePosition),this.validateTitleEditable(this.titleEditable)}componentDidRender(){this.isEditing&&this.editInputElement.setFocus()}render(){const t=this.identifier+"-header";return s("section",{key:"e92b270e15717a1b6ab7d938674ccd785fe3ee97",class:this.classCollection.join(),id:this.identifier},s("mg-card",{key:"40647ea277463f5e915c2fb5aa982f22527545ea",shadow:this.shadow},s("header",{key:"604611af47d683cf1f0d3ffc8b5873be390e3fb9",class:{"mg-c-panel__header":!0,"mg-c-panel__header--reverse":"right"===this.titlePosition},id:t},this.renderHeaderChildren()),s("article",{key:"ff640071dd4813aa113f5928b2a0350f4528a22c",class:"mg-c-panel__content",id:this.identifier+"-content","aria-labelledby":t,hidden:!this.expanded},s("slot",{key:"fe54d2ca332c573e8dfa782a3e72454501b47adf"}))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}"}},[257,"mg-panel",{identifier:[1],panelTitle:[1025,"panel-title"],titlePattern:[1,"title-pattern"],titlePatternErrorMessage:[1,"title-pattern-error-message"],titleEditable:[1028,"title-editable"],titlePosition:[1,"title-position"],expanded:[1028],expandToggleDisplay:[1,"expand-toggle-display"],expandToggleDisabled:[4,"expand-toggle-disabled"],shadow:[4],classCollection:[32],isEditing:[32],updatedPanelTitle:[32]},void 0,{identifier:[{watchIdentifier:0}],panelTitle:[{validatePanelTitle:0}],titlePattern:[{validateTitlePattern:0}],titlePatternErrorMessage:[{validateTitlePattern:0}],titleEditable:[{validateTitleEditable:0}],titlePosition:[{validateTitlePosition:0}],expanded:[{handleExpanded:0}],expandToggleDisplay:[{validateExpandToggleDisplay:0}]}]);function T(){"undefined"!=typeof customElements&&["mg-panel","mg-button","mg-card","mg-character-left","mg-icon","mg-input","mg-input-text","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((e=>{switch(e){case"mg-panel":customElements.get(t(e))||customElements.define(t(e),w);break;case"mg-button":customElements.get(t(e))||h();break;case"mg-card":customElements.get(t(e))||m();break;case"mg-character-left":customElements.get(t(e))||g();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-input":customElements.get(t(e))||u();break;case"mg-input-text":customElements.get(t(e))||f();break;case"mg-input-title":customElements.get(t(e))||b();break;case"mg-tooltip":customElements.get(t(e))||v();break;case"mg-tooltip-content":customElements.get(t(e))||x()}}))}T();const k=w,y=T;export{k as MgPanel,y as defineCustomElement}

package/dist/components/mg-popover-content.js

@@ -1,6 +1 @@
-import { M as MgPopoverContent$1, d as defineCustomElement$1 } from './mg-popover-content2.js';
-
-const MgPopoverContent = MgPopoverContent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgPopoverContent, defineCustomElement };
+import{M as o,d as t}from"./mg-popover-content2.js";const p=o,r=t;export{p as MgPopoverContent,r as defineCustomElement}

package/dist/components/mg-popover-content2.js

@@ -1,96 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ClassList, b as isTagName } from './index2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
-import { d as defineCustomElement$2 } from './mg-card2.js';
-import { d as defineCustomElement$1 } from './mg-icon2.js';
-
-const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-popover-border-radius)}";
-
-const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.hideContent = createEvent(this, "hide-content", 7);
-        /**
-         * Define if popover has a cross button
-         */
-        this.closeButton = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-popover-content']);
-        /**
-         * Handle action for close button
-         */
-        this.handleCloseButton = () => {
-            this.hideContent.emit();
-        };
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are valide
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-    }
-    /**
-     * Check if component slots are valide
-     */
-    componentDidLoad() {
-        const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-        const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-            throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
-        }
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
-    }
-    get element() { return this; }
-    static get style() { return mgPopoverContentCss; }
-}, [257, "mg-popover-content", {
-        "closeButton": [4, "close-button"],
-        "classCollection": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-popover-content", "mg-button", "mg-card", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgPopoverContent);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgPopoverContent as M, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as o,HTMLElement as e,createEvent as r,h as a,Host as s}from"@stencil/core/internal/client";import{C as p,b as d}from"./index2.js";import{i as c}from"./index3.js";import{d as l}from"./mg-button2.js";import{d as i}from"./mg-card2.js";import{d as m}from"./mg-icon2.js";const n=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.hideContent=r(this,"hide-content",7),this.closeButton=!1,this.classCollection=new p(["mg-c-popover-content"]),this.handleCloseButton=()=>{this.hideContent.emit()}}componentWillLoad(){this.messages=c(this.element).messages}componentDidLoad(){const t=["h1","h2","h3","h4","h5","h6"],o=this.element.querySelector('[slot="title"]');if(o&&!d(o,t))throw new Error(`<mg-popover> Slotted title must be a heading: ${t.join(", ")}.`)}render(){return a(s,{key:"56962c792e0015e1b52f8121914829b7da136283"},a("mg-card",{key:"05b557704fd10e1be87e1931fe672f5c29d3afc4",class:this.classCollection.join(),shadow:!0},this.closeButton&&a("mg-button",{key:"d2fc38c5be7ea92d0d0efc36133d6c683baa4e68","is-icon":!0,variant:"flat",label:this.messages.general.close,onClick:this.handleCloseButton},a("mg-icon",{key:"5d2091d064f3908a291af3b90acaddc59e2b9268",icon:"cross"})),a("div",{key:"d599231cfe330cdbc73f4bf7553b2cc66baf4889",class:"mg-c-popover-content__title"},a("slot",{key:"fbb836bac9d9f5f2327ecba13ddc3b1cab974930",name:"title"})),a("slot",{key:"bdb29d255f35931efa24be57c13c4303ba326778",name:"content"})),a("slot",{key:"b09b667ea04096baaeac07fac9097a3a22335f2b",name:"arrow"}))}get element(){return this}static get style(){return':host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:"";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-popover-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-popover-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-popover-border-radius)}'}},[257,"mg-popover-content",{closeButton:[4,"close-button"],classCollection:[32]}]);function g(){"undefined"!=typeof customElements&&["mg-popover-content","mg-button","mg-card","mg-icon"].forEach((o=>{switch(o){case"mg-popover-content":customElements.get(t(o))||customElements.define(t(o),n);break;case"mg-button":customElements.get(t(o))||l();break;case"mg-card":customElements.get(t(o))||i();break;case"mg-icon":customElements.get(t(o))||m()}}))}g();export{n as M,g as d}

package/dist/components/mg-popover.js

@@ -1,6 +1 @@
-import { M as MgPopover$1, d as defineCustomElement$1 } from './mg-popover2.js';
-
-const MgPopover = MgPopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgPopover, defineCustomElement };
+import{M as o,d as p}from"./mg-popover2.js";const r=o,s=p;export{r as MgPopover,s as defineCustomElement}