@maggioli-design-system/mds-modal 4.7.1 → 4.7.3

package/dist/collection/common/aria.js

@@ -1,29 +1,29 @@
 const hash = (s) => {
-  let i, h;
-  for (i = 0, h = 0; i < s.length; i++) {
-    h = Math.imul(31, h) + s.charCodeAt(i) | 0;
-  }
-  return h.toString();
+    let i, h;
+    for (i = 0, h = 0; i < s.length; i++) {
+        h = Math.imul(31, h) + s.charCodeAt(i) | 0;
+    }
+    return h.toString();
 };
 const randomInt = (max) => Math.floor(Math.random() * max);
 const unslugName = (name) => {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
+    var _a, _b, _c;
+    return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 const setAttributeIfEmpty = (element, attribute, value) => {
-  var _a;
-  if (element.hasAttribute(attribute)) {
-    return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
-  }
-  element.setAttribute(attribute, value);
-  return value;
+    var _a;
+    if (element.hasAttribute(attribute)) {
+        return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
+    }
+    element.setAttribute(attribute, value);
+    return value;
 };
 const hashValue = (value) => `${value}-${hash(value)}`;
 const hashRandomValue = (value) => {
-  const randomValue = randomInt(1000000);
-  if (value) {
-    return `${value}-${hash(randomValue.toString())}`;
-  }
-  return hash(randomValue.toString());
+    const randomValue = randomInt(1000000);
+    if (value) {
+        return `${value}-${hash(randomValue.toString())}`;
+    }
+    return hash(randomValue.toString());
 };
 export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };

package/dist/collection/common/keyboard-manager.js

@@ -1,40 +1,40 @@
 export class KeyboardManager {
-  constructor() {
-    this.elements = [];
-    this.handleClickBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
-        event.target.click();
-      }
-    };
-    this.handleEscapeBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Escape' && this.escapeCallback) {
-        this.escapeCallback();
-      }
-    };
-    this.addElement = (el, name = 'element') => {
-      this.elements[name] = el;
-    };
-    this.attachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.detachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.attachEscapeBehavior = (callBack) => {
-      this.escapeCallback = callBack;
-      if (window !== undefined) {
-        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-    this.detachEscapeBehavior = () => {
-      this.escapeCallback = () => { return; };
-      if (window !== undefined) {
-        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-  }
+    constructor() {
+        this.elements = [];
+        this.handleClickBehaviorDispatchEvent = (event) => {
+            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+                event.target.click();
+            }
+        };
+        this.handleEscapeBehaviorDispatchEvent = (event) => {
+            if (event.code === 'Escape' && this.escapeCallback) {
+                this.escapeCallback();
+            }
+        };
+        this.addElement = (el, name = 'element') => {
+            this.elements[name] = el;
+        };
+        this.attachClickBehavior = (name = 'element') => {
+            if (this.elements[name]) {
+                this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            }
+        };
+        this.detachClickBehavior = (name = 'element') => {
+            if (this.elements[name]) {
+                this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            }
+        };
+        this.attachEscapeBehavior = (callBack) => {
+            this.escapeCallback = callBack;
+            if (window !== undefined) {
+                window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+            }
+        };
+        this.detachEscapeBehavior = () => {
+            this.escapeCallback = () => { return; };
+            if (window !== undefined) {
+                window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+            }
+        };
+    }
 }

package/dist/collection/common/unit.js

@@ -1,10 +1,10 @@
 const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
-  if (duration.includes('s')) {
-    return Number(duration.replace('s', '')) * 1000;
-  }
-  if (duration.includes('ms')) {
-    return Number(duration.replace('s', ''));
-  }
-  return defaultValue;
+    if (duration.includes('s')) {
+        return Number(duration.replace('s', '')) * 1000;
+    }
+    if (duration.includes('ms')) {
+        return Number(duration.replace('s', ''));
+    }
+    return defaultValue;
 };
 export { cssDurationToMilliseconds, };

package/dist/collection/components/mds-modal/mds-modal.css

@@ -18,7 +18,7 @@
 
 
 .svg svg {
-  aspect-ratio: 1 / 1;
+  aspect-ratio: 1/1;
   height: 100%;
   width: 100%;
 }
@@ -34,21 +34,14 @@
 .absolute {
   position: absolute;
 }
-.mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
 .ml-auto {
   margin-left: auto;
 }
 .flex {
   display: flex;
 }
-.w-16 {
-  width: 4rem;
-}
 .min-w-0 {
-  min-width: 0px;
+  min-width: 0rem;
 }
 .max-w-lg {
   max-width: 32rem;
@@ -59,9 +52,6 @@
 .items-center {
   align-items: center;
 }
-.gap-4 {
-  gap: 1rem;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -86,12 +76,6 @@
 .bg-transparent {
   background-color: transparent;
 }
-.p-4 {
-  padding: 1rem;
-}
-.p-8 {
-  padding: 2rem;
-}
 .text-tone-neutral-02 {
   --tw-text-opacity: 1;
   color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));
@@ -160,12 +144,11 @@
 }
 
 .close {
-  top: 0px;
+  top: 0rem;
   height: 2.25rem;
   width: 2.25rem;
   border-radius: 9999px;
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+  font-size: 3rem;
   opacity: 0;
   transition-duration: 500ms;
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
@@ -180,7 +163,7 @@
 
 .window {
   height: 100%;
-  gap: 0px;
+  gap: 0rem;
 
   background-color: var(--mds-modal-window-background);
   box-shadow: var(--mds-modal-window-shadow);
@@ -332,7 +315,7 @@
 }
 
 :host( .to-left ) .close {
-  right: 0px;
+  right: 0rem;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
@@ -381,7 +364,7 @@
 }
 
 :host( .to-right ) .close {
-  left: 0px;
+  left: 0rem;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
@@ -429,10 +412,4 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-@media (max-width: 767px) {
-  .mobile\:w-12 {
-    width: 3rem;
-  }
-}
-
 

package/dist/collection/components/mds-modal/mds-modal.js

@@ -9,194 +9,194 @@ import { KeyboardManager } from "../../common/keyboard-manager";
  * @slot window - Use directly a window component if you need it. Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsModal {
-  constructor() {
-    this.window = false;
-    this.top = false;
-    this.bottom = false;
-    this.animationState = 'intro';
-    this.km = new KeyboardManager();
-    this.componentDidLoad = () => {
-      var _a;
-      this.km.addElement(this.host, 'host');
-      const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
-      if (close)
-        this.km.addElement(close, 'close');
-      this.km.attachEscapeBehavior(() => this.closeEvent.emit());
-      this.km.attachClickBehavior('close');
-    };
-    this.animationName = (customState = '', customPosition = '') => {
-      return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
-    };
-    this.closeModal = (e) => {
-      var _a;
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-        return;
-      }
-      this.opened = e.target !== e.currentTarget;
-      if (!this.opened) {
-        this.closeEvent.emit();
-      }
-    };
-    this.stateOpened = undefined;
-    this.opened = false;
-    this.position = 'center';
-  }
-  componentWillLoad() {
-    var _a;
-    this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
-    this.top = this.host.querySelector('[slot="top"]') !== null;
-    this.window = this.host.querySelector('[slot="window"]') !== null;
-    this.stateOpened = this.opened;
-    if (!this.window) {
-      this.position = 'right';
-    }
-    if (this.window) {
-      (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
-    }
-  }
-  componentWillRender() {
-    this.animationState = this.opened ? 'intro' : 'outro';
-    this.host.classList.add(this.animationName());
-  }
-  componentDidRender() {
-    this.animationDeelay = window.setTimeout(() => {
-      this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
-      this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
-      this.host.classList.add(this.animationName(this.animationState));
-      window.clearTimeout(this.animationDeelay);
-    }, 500);
-  }
-  disconnectedCallback() {
-    this.km.detachEscapeBehavior();
-    this.km.detachClickBehavior('close');
-  }
-  positionChange(_newValue, oldValue) {
-    window.clearTimeout(this.animationDeelay);
-    this.host.classList.remove(this.animationName('', oldValue));
-    this.host.classList.remove(this.animationName('intro', oldValue));
-    this.host.classList.remove(this.animationName('outro', oldValue));
-  }
-  openedChange(newValue) {
-    this.stateOpened = newValue;
-    window.clearTimeout(this.animationDeelay);
-  }
-  onModalCloseListener() {
-    this.opened = false;
-  }
-  onBannerCloseListener() {
-    this.opened = false;
-  }
-  render() {
-    return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
-      ? h("slot", { name: "window" })
-      : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
-        h("slot", { name: "top" }), h("slot", null), this.bottom &&
-        h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
-  }
-  static get is() { return "mds-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["mds-modal.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["mds-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies if the modal is opened or not"
-        },
-        "attribute": "opened",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "position": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "ModalPositionType",
-          "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
-          "references": {
-            "ModalPositionType": {
-              "location": "import",
-              "path": "./meta/types",
-              "id": "src/components/mds-modal/meta/types.ts::ModalPositionType"
+    constructor() {
+        this.window = false;
+        this.top = false;
+        this.bottom = false;
+        this.animationState = 'intro';
+        this.km = new KeyboardManager();
+        this.componentDidLoad = () => {
+            var _a;
+            this.km.addElement(this.host, 'host');
+            const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
+            if (close)
+                this.km.addElement(close, 'close');
+            this.km.attachEscapeBehavior(() => this.closeEvent.emit());
+            this.km.attachClickBehavior('close');
+        };
+        this.animationName = (customState = '', customPosition = '') => {
+            return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
+        };
+        this.closeModal = (e) => {
+            var _a;
+            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                return;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the animation position of the modal window"
-        },
-        "attribute": "position",
-        "reflect": true,
-        "defaultValue": "'center'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "stateOpened": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "closeEvent",
-        "name": "mdsModalClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits when a modal is closed"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+            this.opened = e.target !== e.currentTarget;
+            if (!this.opened) {
+                this.closeEvent.emit();
+            }
+        };
+        this.stateOpened = undefined;
+        this.opened = false;
+        this.position = 'center';
+    }
+    componentWillLoad() {
+        var _a;
+        this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
+        this.top = this.host.querySelector('[slot="top"]') !== null;
+        this.window = this.host.querySelector('[slot="window"]') !== null;
+        this.stateOpened = this.opened;
+        if (!this.window) {
+            this.position = 'right';
+        }
+        if (this.window) {
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "position",
-        "methodName": "positionChange"
-      }, {
-        "propName": "opened",
-        "methodName": "openedChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "mdsModalClose",
-        "method": "onModalCloseListener",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mdsBannerClose",
-        "method": "onBannerCloseListener",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    componentWillRender() {
+        this.animationState = this.opened ? 'intro' : 'outro';
+        this.host.classList.add(this.animationName());
+    }
+    componentDidRender() {
+        this.animationDeelay = window.setTimeout(() => {
+            this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
+            this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
+            this.host.classList.add(this.animationName(this.animationState));
+            window.clearTimeout(this.animationDeelay);
+        }, 500);
+    }
+    disconnectedCallback() {
+        this.km.detachEscapeBehavior();
+        this.km.detachClickBehavior('close');
+    }
+    positionChange(_newValue, oldValue) {
+        window.clearTimeout(this.animationDeelay);
+        this.host.classList.remove(this.animationName('', oldValue));
+        this.host.classList.remove(this.animationName('intro', oldValue));
+        this.host.classList.remove(this.animationName('outro', oldValue));
+    }
+    openedChange(newValue) {
+        this.stateOpened = newValue;
+        window.clearTimeout(this.animationDeelay);
+    }
+    onModalCloseListener() {
+        this.opened = false;
+    }
+    onBannerCloseListener() {
+        this.opened = false;
+    }
+    render() {
+        return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+            ? h("slot", { name: "window" })
+            : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
+                h("slot", { name: "top" }), h("slot", null), this.bottom &&
+                h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
+    }
+    static get is() { return "mds-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mds-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mds-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the modal is opened or not"
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ModalPositionType",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "ModalPositionType": {
+                            "location": "import",
+                            "path": "./meta/types",
+                            "id": "src/components/mds-modal/meta/types.ts::ModalPositionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the animation position of the modal window"
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'center'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stateOpened": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeEvent",
+                "name": "mdsModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "position",
+                "methodName": "positionChange"
+            }, {
+                "propName": "opened",
+                "methodName": "openedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mdsModalClose",
+                "method": "onModalCloseListener",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mdsBannerClose",
+                "method": "onBannerCloseListener",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/mds-modal/meta/dictionary.js

@@ -1,8 +1,8 @@
 const modalPositionDictionary = [
-  'bottom',
-  'center',
-  'left',
-  'right',
-  'top',
+    'bottom',
+    'center',
+    'left',
+    'right',
+    'top',
 ];
 export { modalPositionDictionary, };