@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-details2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './index2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
+
+const mgDetailsCss = ".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}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{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}}";
+
+const MgDetails = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
+        /**
+         * Handle details toggle
+         */
+        this.handleToggle = () => {
+            this.expanded = this.details.open;
+        };
+    }
+    validateTitles(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
+        }
+    }
+    handleExpanded(newValue) {
+        this.expandedChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateTitles(this.toggleClosed);
+        this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
+        this.element.addEventListener('click', (event) => {
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
+                event.preventDefault();
+            }
+        });
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }; }
+    static get style() { return mgDetailsCss; }
+}, [257, "mg-details", {
+        "toggleClosed": [1, "toggle-closed"],
+        "toggleOpened": [1, "toggle-opened"],
+        "hideSummary": [4, "hide-summary"],
+        "expanded": [1028]
+    }, undefined, {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-details", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgDetails);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { MgDetails as M, defineCustomElement as d };

package/dist/components/mg-divider2.js

@@ -26,7 +26,7 @@ const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLE
             } }));
     }
     static get style() { return mgDividerCss; }
-}, [1, "mg-divider", {
+}, [257, "mg-divider", {
         "fullWidth": [4, "full-width"]
     }]);
 function defineCustomElement() {

package/dist/components/mg-form.js

@@ -244,7 +244,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '6330085d26ecd493eab3fd0fd63344ce1a00e589', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '386adf6d3ee2d0d8ec6adf791da8f21a6fb6ac11', innerHTML: this.requiredMessageText }), h("slot", { key: '5349f004f644b4e02e1c5da27f49df4efacac016' }), !this.readonly && !this.disabled && h("slot", { key: '2ed9817b514033c89933751a3dc00ed668331b68', name: "actions" })));
+        return (h("form", { key: 'd6842c8daef22c0a3747147d99d7bf6920f7623e', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'cf5d9f380dfce313811df2dec390543ee19dffcb', innerHTML: this.requiredMessageText }), h("slot", { key: '2f03dd98f92469bc34b8bf9b8a8ef79cf8adf25c' }), !this.readonly && !this.disabled && h("slot", { key: 'c0f38f24c59d70703accf5fc63a2b58a92a952f0', name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -256,7 +256,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         "disabled": ["handleAttributeChange"]
     }; }
     static get style() { return mgFormCss; }
-}, [1, "mg-form", {
+}, [257, "mg-form", {
         "identifier": [1],
         "name": [1],
         "readonly": [4],