@maggioli-design-system/mds-push-notification 2.1.2 → 2.2.0

package/dist/collection/common/floating-controller.js

@@ -0,0 +1,180 @@
+import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { cssDurationToMilliseconds } from "./unit";
+import { setAttributeIfEmpty } from "./aria";
+export class FloatingController {
+    constructor(host, arrowEl) {
+        this.arrowInset = (middleware, arrowPosition) => {
+            const { arrow } = middleware;
+            const inset = { bottom: '', left: '', right: '', top: '' };
+            if (arrow === undefined) {
+                return {};
+            }
+            switch (arrowPosition) {
+                case 'bottom':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '100%';
+                    break;
+                case 'left':
+                    inset.right = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'right':
+                    inset.left = '100%';
+                    inset.top = arrow.y !== null ? `${arrow.y}px` : '';
+                    break;
+                case 'top':
+                    inset.left = arrow.x !== null ? `${arrow.x}px` : '';
+                    inset.top = '';
+                    break;
+                default:
+                    break;
+            }
+            return inset;
+        };
+        this.arrowTransform = (arrowPosition) => {
+            let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
+            switch (arrowPosition) {
+                case 'bottom':
+                    transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
+                    break;
+                case 'left':
+                    transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`;
+                    break;
+                case 'right':
+                    transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`;
+                    break;
+                case 'top':
+                    transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`;
+                    break;
+                default:
+                    break;
+            }
+            return { transform: transformProps };
+        };
+        this.arrowTransformOrigin = (arrowPosition) => {
+            switch (arrowPosition) {
+                case 'bottom':
+                    return { transformOrigin: 'center top' };
+                case 'left':
+                    return { transformOrigin: 'right center' };
+                case 'right':
+                    return { transformOrigin: 'left center' };
+                case 'top':
+                    return { transformOrigin: 'center bottom' };
+                default:
+                    return { transformOrigin: 'center top' };
+            }
+        };
+        this.calculatePosition = () => {
+            if (!this._caller)
+                return;
+            const middleware = new Array();
+            const config = {};
+            if (this._host.shiftPadding) {
+                config.padding = this._host.shiftPadding;
+            }
+            if (this._host.autoPlacement) {
+                middleware.push(autoPlacement());
+            }
+            if (this._host.offset) {
+                middleware.push(offset(this._host.offset));
+            }
+            if (!this._host.autoPlacement && this._host.flip) {
+                middleware.push(flip(config));
+            }
+            if (this._host.shift) {
+                middleware.push(shift(config));
+            }
+            if (this.arrowEl && this._host.arrow) {
+                middleware.push(arrow({
+                    element: this.arrowEl,
+                    padding: this._host.arrowPadding,
+                }));
+            }
+            computePosition(this._caller, this._host, {
+                middleware,
+                placement: this._host.placement,
+                strategy: this._host.strategy,
+            }).then(({ x, y, placement, middlewareData }) => {
+                Object.assign(this._host.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+                const arrowStyle = {};
+                const arrowPosition = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                if (arrowPosition && this.arrowEl) {
+                    Object.assign(arrowStyle, this.arrowTransform(arrowPosition));
+                    Object.assign(arrowStyle, this.arrowInset(middlewareData, arrowPosition));
+                    Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition));
+                    Object.assign(this.arrowEl.style, arrowStyle);
+                }
+            });
+        };
+        this._host = host;
+        this.arrowEl = arrowEl;
+    }
+    updateCaller(target) {
+        var _a, _b, _c;
+        // search caller in document or rootNode of host (if target is in shadowDOM)
+        const caller = (_c = (_b = (_a = this._host.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(target)) !== null && _c !== void 0 ? _c : this._host.getRootNode().querySelector(target);
+        if (!caller) {
+            throw Error(`Target not found: ${target}`);
+        }
+        this._caller = caller;
+        setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true');
+        setAttributeIfEmpty(this._caller, 'aria-controls', target);
+        setAttributeIfEmpty(this._host, 'role', 'menu');
+        setAttributeIfEmpty(this._host, 'aria-labelledby', target);
+        return caller;
+    }
+    updatePosition() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+    }
+    dismiss() {
+        this.cleanupAutoUpdate();
+    }
+}
+export class Backdrop {
+    constructor(backdropId) {
+        this.defaultBackdropId = 'mds-backdrop';
+        this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
+        this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
+        this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+    }
+    attachBackdrop() {
+        if (!this.backdropEl) {
+            this.backdropEl = document.createElement('div');
+            this.backdropEl.className = this.backdropId;
+            this.backdropEl.style.inset = '0';
+            this.backdropEl.style.pointerEvents = 'none';
+            this.backdropEl.style.position = 'fixed';
+            this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`;
+            this.backdropEl.style.zIndex = this.cssBackdropZIndex;
+        }
+        this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden;
+        document.body.appendChild(this.backdropEl);
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible;
+        }, 1);
+    }
+    detachBackdrop() {
+        if (!this.backdropEl) {
+            return;
+        }
+        this.backdropEl.style.backgroundColor = 'transparent';
+        clearTimeout(this.backdropTimer);
+        this.backdropTimer = setTimeout(() => {
+            this.backdropEl.remove();
+        }, cssDurationToMilliseconds(this.cssBackdropDuration));
+    }
+}

package/dist/collection/common/slot.js

@@ -1,13 +1,19 @@
 const hasSlottedElements = (el, name) => {
     var _a;
-    let query = 'slot';
-    if (name) {
-        query = `slot[name=${name}]`;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedElements({ flatten: true }).length > 0;
     }
+    return false;
+};
+const hasSlottedNodes = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
     const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
     if (slot) {
         return slot.assignedNodes().length > 0;
     }
     return false;
 };
-export { hasSlottedElements, };
+export { hasSlottedElements, hasSlottedNodes, };

package/dist/collection/components/mds-push-notification/mds-push-notification.js

@@ -25,22 +25,30 @@ export class MdsPushNotification {
             es: localeEs,
             it: localeIt,
         });
-        this.onClickClose = (e) => {
-            e.stopPropagation();
-            this.closedEvent.emit();
-        };
-        this.language = undefined;
-        this.datetime = undefined;
+        /**
+         * Specifies if the notification date format shows time passed or displays date as a static string
+         */
         this.dateFormat = 'timeago';
+        /**
+         * Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notifications`
+         */
         this.deletable = true;
-        this.icon = undefined;
-        this.initials = undefined;
+        /**
+         * Specifies the message of the component
+         */
         this.message = 'Nessun messaggio disponibile';
+        /**
+         * Specifies if the `src` attribute is used to show a the image as avatar or full image
+         */
         this.preview = 'image';
-        this.src = undefined;
-        this.subject = undefined;
+        /**
+         * Specifies the color tone of the component
+         */
         this.tone = 'weak';
-        this.variant = undefined;
+        this.onClickClose = (e) => {
+            e.stopPropagation();
+            this.closedEvent.emit();
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);
@@ -104,6 +112,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the notification date based on [standard ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "datetime",
                 "reflect": true
             },
@@ -127,6 +137,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies if the notification date format shows time passed or displays date as a static string"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "date-format",
                 "reflect": true,
                 "defaultValue": "'timeago'"
@@ -145,6 +157,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notifications`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "deletable",
                 "reflect": true,
                 "defaultValue": "true"
@@ -163,6 +177,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the icon to be displayed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true
             },
@@ -180,6 +196,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "initials",
                 "reflect": true
             },
@@ -197,6 +215,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the message of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message",
                 "reflect": true,
                 "defaultValue": "'Nessun messaggio disponibile'"
@@ -221,6 +241,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies if the `src` attribute is used to show a the image as avatar or full image"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "preview",
                 "reflect": true,
                 "defaultValue": "'image'"
@@ -239,6 +261,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the path to the image"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src",
                 "reflect": true
             },
@@ -256,6 +280,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the subject of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subject",
                 "reflect": true
             },
@@ -279,6 +305,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the color tone of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tone",
                 "reflect": true,
                 "defaultValue": "'weak'"
@@ -303,6 +331,8 @@ export class MdsPushNotification {
                     "tags": [],
                     "text": "Specifies the color variant of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": true
             }

package/dist/collection/dictionary/tree.js

@@ -0,0 +1,13 @@
+const treeActionsDictionary = [
+    'auto',
+    'visible',
+];
+const treeAppearanceDictionary = [
+    'depth',
+    'none',
+];
+const treeIconDictionary = [
+    'folder',
+    'chevron',
+];
+export { treeActionsDictionary, treeAppearanceDictionary, treeIconDictionary, };

package/dist/collection/type/tree.js

@@ -0,0 +1 @@
+export {};

package/dist/components/mds-push-notification.js

@@ -1013,22 +1013,30 @@ const MdsPushNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsPushNoti
             es: localeEs,
             it: localeIt,
         });
-        this.onClickClose = (e) => {
-            e.stopPropagation();
-            this.closedEvent.emit();
-        };
-        this.language = undefined;
-        this.datetime = undefined;
+        /**
+         * Specifies if the notification date format shows time passed or displays date as a static string
+         */
         this.dateFormat = 'timeago';
+        /**
+         * Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notifications`
+         */
         this.deletable = true;
-        this.icon = undefined;
-        this.initials = undefined;
+        /**
+         * Specifies the message of the component
+         */
         this.message = 'Nessun messaggio disponibile';
+        /**
+         * Specifies if the `src` attribute is used to show a the image as avatar or full image
+         */
         this.preview = 'image';
-        this.src = undefined;
-        this.subject = undefined;
+        /**
+         * Specifies the color tone of the component
+         */
         this.tone = 'weak';
-        this.variant = undefined;
+        this.onClickClose = (e) => {
+            e.stopPropagation();
+            this.closedEvent.emit();
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);

package/dist/documentation.d.ts

@@ -316,6 +316,14 @@ export interface JsonDocsProp {
    * ```
    */
   required: boolean;
+  /**
+   * `true` if the prop has a `get()`. `false` otherwise
+   */
+  getter: boolean;
+  /**
+   * `true` if the prop has a `set()`. `false` otherwise
+   */
+  setter: boolean;
 }
 export interface JsonDocsMethod {
   name: string;

package/dist/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-12-19T16:02:56",
+  "timestamp": "2025-02-06T09:47:21",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -65,7 +65,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "datetime",
@@ -89,7 +91,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "deletable",
@@ -111,7 +115,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "icon",
@@ -135,7 +141,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "initials",
@@ -159,7 +167,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "message",
@@ -181,7 +191,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "preview",
@@ -217,7 +229,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "src",
@@ -241,7 +255,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "subject",
@@ -265,7 +281,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "tone",
@@ -301,7 +319,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "variant",
@@ -388,7 +408,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [