@maggioli-design-system/mds-accordion-timer 3.6.0 → 3.6.2

package/dist/components/mds-accordion-timer.js

@@ -3,129 +3,129 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 const mdsAccordionTimerCss = ":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}";
 
 const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionTimer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.changeEvent = createEvent(this, "mdsAccordionTimerChange", 7);
-    this.clearIntervals = () => {
-      window.clearInterval(this.timer);
-      window.clearInterval(this.timeChecker);
-      this.timeChecker = 0;
-    };
-    this.progress = () => {
-      return Math.abs(this.remainingTime() / this.duration - 1);
-    };
-    this.addTimeListener = () => {
-      this.timeChecker = window.setInterval(() => {
-        const progress = this.progress();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.changeEvent = createEvent(this, "mdsAccordionTimerChange", 7);
+        this.clearIntervals = () => {
+            window.clearInterval(this.timer);
+            window.clearInterval(this.timeChecker);
+            this.timeChecker = 0;
+        };
+        this.progress = () => {
+            return Math.abs(this.remainingTime() / this.duration - 1);
+        };
+        this.addTimeListener = () => {
+            this.timeChecker = window.setInterval(() => {
+                const progress = this.progress();
+                if (this.selectedItem !== undefined) {
+                    this.selectedItem.progress = progress;
+                }
+                if (progress === 1) {
+                    this.selectedItem.progress = 0;
+                    this.startNext();
+                }
+            }, 100);
+        };
+        this.beginningTime = () => {
+            this.timeStarted = (new Date()).getTime();
+            return this.timeStarted;
+        };
+        this.remainingTime = () => {
+            const remainingTime = this.selectedItemDurationTime - ((new Date()).getTime() - this.timeStarted);
+            return remainingTime >= 0 ? remainingTime : 0;
+        };
+        this.setSelectedItem = (uuid) => {
+            this.children.forEach((item, key) => {
+                if (key === uuid) {
+                    item.selected = true;
+                    this.selectedItem = item;
+                    this.changeEvent.emit();
+                }
+                else {
+                    item.selected = false;
+                }
+            });
+        };
+        this.startNext = () => {
+            const nextUuid = this.selectedItem.uuid + 1 > this.children.length - 1 ? 0 : this.selectedItem.uuid + 1;
+            this.setSelectedItem(nextUuid);
+            this.startTimer();
+        };
+        this.startTimer = () => {
+            this.clearIntervals();
+            this.time = this.beginningTime();
+            this.selectedItemDurationTime = this.duration;
+            this.addTimeListener();
+        };
+        this.playTimer = () => {
+            this.beginningTime();
+            this.addTimeListener();
+        };
+        this.pauseTimer = () => {
+            this.clearIntervals();
+            this.selectedItemDurationTime = this.remainingTime();
+        };
+        this.stopTimer = () => {
+            this.clearIntervals();
+        };
+        this.time = 0;
+        this.duration = 10000;
+    }
+    componentDidLoad() {
+        this.children = this.element.querySelectorAll('mds-accordion-timer-item');
+        this.children.forEach((item, key) => {
+            item.uuid = key;
+            if (item.selected) {
+                this.selectedItem = item;
+            }
+        });
         if (this.selectedItem !== undefined) {
-          this.selectedItem.progress = progress;
-        }
-        if (progress === 1) {
-          this.selectedItem.progress = 0;
-          this.startNext();
+            this.startTimer();
         }
-      }, 100);
-    };
-    this.beginningTime = () => {
-      this.timeStarted = (new Date()).getTime();
-      return this.timeStarted;
-    };
-    this.remainingTime = () => {
-      const remainingTime = this.selectedItemDurationTime - ((new Date()).getTime() - this.timeStarted);
-      return remainingTime >= 0 ? remainingTime : 0;
-    };
-    this.setSelectedItem = (uuid) => {
-      this.children.forEach((item, key) => {
-        if (key === uuid) {
-          item.selected = true;
-          this.selectedItem = item;
-          this.changeEvent.emit();
-        }
-        else {
-          item.selected = false;
+    }
+    disconnectedCallback() {
+        this.stopTimer();
+        this.clearIntervals();
+    }
+    onClickActive(event) {
+        if (this.selectedItem) {
+            this.selectedItem.progress = 0;
         }
-      });
-    };
-    this.startNext = () => {
-      const nextUuid = this.selectedItem.uuid + 1 > this.children.length - 1 ? 0 : this.selectedItem.uuid + 1;
-      this.setSelectedItem(nextUuid);
-      this.startTimer();
-    };
-    this.startTimer = () => {
-      this.clearIntervals();
-      this.time = this.beginningTime();
-      this.selectedItemDurationTime = this.duration;
-      this.addTimeListener();
-    };
-    this.playTimer = () => {
-      this.beginningTime();
-      this.addTimeListener();
-    };
-    this.pauseTimer = () => {
-      this.clearIntervals();
-      this.selectedItemDurationTime = this.remainingTime();
-    };
-    this.stopTimer = () => {
-      this.clearIntervals();
-    };
-    this.time = 0;
-    this.duration = 10000;
-  }
-  componentDidLoad() {
-    this.children = this.element.querySelectorAll('mds-accordion-timer-item');
-    this.children.forEach((item, key) => {
-      item.uuid = key;
-      if (item.selected) {
-        this.selectedItem = item;
-      }
-    });
-    if (this.selectedItem !== undefined) {
-      this.startTimer();
+        this.setSelectedItem(event.detail.uuid);
+        this.startTimer();
+        this.pauseTimer();
+    }
+    onMouseEnterSelect() {
+        this.pauseTimer();
     }
-  }
-  disconnectedCallback() {
-    this.stopTimer();
-    this.clearIntervals();
-  }
-  onClickActive(event) {
-    if (this.selectedItem) {
-      this.selectedItem.progress = 0;
+    onMouseLeaveSelect() {
+        if (this.timeChecker === 0) {
+            this.playTimer();
+        }
     }
-    this.setSelectedItem(event.detail.uuid);
-    this.startTimer();
-    this.pauseTimer();
-  }
-  onMouseEnterSelect() {
-    this.pauseTimer();
-  }
-  onMouseLeaveSelect() {
-    if (this.timeChecker === 0) {
-      this.playTimer();
+    render() {
+        return (h(Host, null, h("slot", null)));
     }
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get element() { return this; }
-  static get style() { return mdsAccordionTimerCss; }
+    get element() { return this; }
+    static get style() { return mdsAccordionTimerCss; }
 }, [1, "mds-accordion-timer", {
-    "duration": [2],
-    "time": [32]
-  }, [[0, "mdsAccordionTimerItemClickSelect", "onClickActive"], [0, "mdsAccordionTimerItemMouseEnterSelect", "onMouseEnterSelect"], [0, "mdsAccordionTimerItemMouseLeaveSelect", "onMouseLeaveSelect"]]]);
+        "duration": [2],
+        "time": [32]
+    }, [[0, "mdsAccordionTimerItemClickSelect", "onClickActive"], [0, "mdsAccordionTimerItemMouseEnterSelect", "onMouseEnterSelect"], [0, "mdsAccordionTimerItemMouseLeaveSelect", "onMouseLeaveSelect"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mds-accordion-timer"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mds-accordion-timer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MdsAccordionTimer$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mds-accordion-timer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mds-accordion-timer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MdsAccordionTimer$1);
+            }
+            break;
+    } });
 }
 
 const MdsAccordionTimer = MdsAccordionTimer$1;

package/dist/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-11-08T17:53:20",
+  "timestamp": "2023-12-20T08:46:16",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.7.1",
+    "version": "4.8.0",
     "typescriptVersion": "5.2.2"
   },
   "components": [

package/dist/esm/{index-1e1d02d3.js → index-df0a164e.js}

@@ -26,6 +26,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 const isDef = (v) => v != null;
 /**
  * Check whether a value is a 'complex type', defined here as an object or a
@@ -228,6 +235,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -914,10 +925,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -940,6 +951,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -995,11 +1007,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const instance = hostRef.$lazyInstance$ ;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1194,12 +1207,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -1208,6 +1222,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -1261,15 +1280,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
+    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+    if (hasSlotRelocation) {
+        dataStyles.innerHTML += SLOT_FB_CSS;
+    }
+    // Add hydration styles
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1376,19 +1403,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
         return module[exportName];
     }
     
-    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-      const processMod = importedModule => {
-        cmpModules.set(bundleId, importedModule);
-        return importedModule[exportName];
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'mds-accordion-timer':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './mds-accordion-timer.entry.js').then(processMod, consoleError);
+          }
       }
-      switch(bundleId) {
-        
-        case 'mds-accordion-timer':
-          return import(
-            /* webpackMode: "lazy" */
-            './mds-accordion-timer.entry.js').then(processMod, consoleError);
-      }
-    }
     return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
@@ -1463,7 +1490,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-1e1d02d3.js';
-export { s as setNonce } from './index-1e1d02d3.js';
+import { b as bootstrapLazy } from './index-df0a164e.js';
+export { s as setNonce } from './index-df0a164e.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/mds-accordion-timer.entry.js

@@ -1,112 +1,112 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1e1d02d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-df0a164e.js';
 
 const mdsAccordionTimerCss = ":host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08));--mds-accordion-timer-progress-bar-thickness:0.25rem;--mds-accordion-timer-duration:500ms;display:block}";
 
 const MdsAccordionTimer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.changeEvent = createEvent(this, "mdsAccordionTimerChange", 7);
-    this.clearIntervals = () => {
-      window.clearInterval(this.timer);
-      window.clearInterval(this.timeChecker);
-      this.timeChecker = 0;
-    };
-    this.progress = () => {
-      return Math.abs(this.remainingTime() / this.duration - 1);
-    };
-    this.addTimeListener = () => {
-      this.timeChecker = window.setInterval(() => {
-        const progress = this.progress();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeEvent = createEvent(this, "mdsAccordionTimerChange", 7);
+        this.clearIntervals = () => {
+            window.clearInterval(this.timer);
+            window.clearInterval(this.timeChecker);
+            this.timeChecker = 0;
+        };
+        this.progress = () => {
+            return Math.abs(this.remainingTime() / this.duration - 1);
+        };
+        this.addTimeListener = () => {
+            this.timeChecker = window.setInterval(() => {
+                const progress = this.progress();
+                if (this.selectedItem !== undefined) {
+                    this.selectedItem.progress = progress;
+                }
+                if (progress === 1) {
+                    this.selectedItem.progress = 0;
+                    this.startNext();
+                }
+            }, 100);
+        };
+        this.beginningTime = () => {
+            this.timeStarted = (new Date()).getTime();
+            return this.timeStarted;
+        };
+        this.remainingTime = () => {
+            const remainingTime = this.selectedItemDurationTime - ((new Date()).getTime() - this.timeStarted);
+            return remainingTime >= 0 ? remainingTime : 0;
+        };
+        this.setSelectedItem = (uuid) => {
+            this.children.forEach((item, key) => {
+                if (key === uuid) {
+                    item.selected = true;
+                    this.selectedItem = item;
+                    this.changeEvent.emit();
+                }
+                else {
+                    item.selected = false;
+                }
+            });
+        };
+        this.startNext = () => {
+            const nextUuid = this.selectedItem.uuid + 1 > this.children.length - 1 ? 0 : this.selectedItem.uuid + 1;
+            this.setSelectedItem(nextUuid);
+            this.startTimer();
+        };
+        this.startTimer = () => {
+            this.clearIntervals();
+            this.time = this.beginningTime();
+            this.selectedItemDurationTime = this.duration;
+            this.addTimeListener();
+        };
+        this.playTimer = () => {
+            this.beginningTime();
+            this.addTimeListener();
+        };
+        this.pauseTimer = () => {
+            this.clearIntervals();
+            this.selectedItemDurationTime = this.remainingTime();
+        };
+        this.stopTimer = () => {
+            this.clearIntervals();
+        };
+        this.time = 0;
+        this.duration = 10000;
+    }
+    componentDidLoad() {
+        this.children = this.element.querySelectorAll('mds-accordion-timer-item');
+        this.children.forEach((item, key) => {
+            item.uuid = key;
+            if (item.selected) {
+                this.selectedItem = item;
+            }
+        });
         if (this.selectedItem !== undefined) {
-          this.selectedItem.progress = progress;
-        }
-        if (progress === 1) {
-          this.selectedItem.progress = 0;
-          this.startNext();
+            this.startTimer();
         }
-      }, 100);
-    };
-    this.beginningTime = () => {
-      this.timeStarted = (new Date()).getTime();
-      return this.timeStarted;
-    };
-    this.remainingTime = () => {
-      const remainingTime = this.selectedItemDurationTime - ((new Date()).getTime() - this.timeStarted);
-      return remainingTime >= 0 ? remainingTime : 0;
-    };
-    this.setSelectedItem = (uuid) => {
-      this.children.forEach((item, key) => {
-        if (key === uuid) {
-          item.selected = true;
-          this.selectedItem = item;
-          this.changeEvent.emit();
-        }
-        else {
-          item.selected = false;
+    }
+    disconnectedCallback() {
+        this.stopTimer();
+        this.clearIntervals();
+    }
+    onClickActive(event) {
+        if (this.selectedItem) {
+            this.selectedItem.progress = 0;
         }
-      });
-    };
-    this.startNext = () => {
-      const nextUuid = this.selectedItem.uuid + 1 > this.children.length - 1 ? 0 : this.selectedItem.uuid + 1;
-      this.setSelectedItem(nextUuid);
-      this.startTimer();
-    };
-    this.startTimer = () => {
-      this.clearIntervals();
-      this.time = this.beginningTime();
-      this.selectedItemDurationTime = this.duration;
-      this.addTimeListener();
-    };
-    this.playTimer = () => {
-      this.beginningTime();
-      this.addTimeListener();
-    };
-    this.pauseTimer = () => {
-      this.clearIntervals();
-      this.selectedItemDurationTime = this.remainingTime();
-    };
-    this.stopTimer = () => {
-      this.clearIntervals();
-    };
-    this.time = 0;
-    this.duration = 10000;
-  }
-  componentDidLoad() {
-    this.children = this.element.querySelectorAll('mds-accordion-timer-item');
-    this.children.forEach((item, key) => {
-      item.uuid = key;
-      if (item.selected) {
-        this.selectedItem = item;
-      }
-    });
-    if (this.selectedItem !== undefined) {
-      this.startTimer();
+        this.setSelectedItem(event.detail.uuid);
+        this.startTimer();
+        this.pauseTimer();
+    }
+    onMouseEnterSelect() {
+        this.pauseTimer();
     }
-  }
-  disconnectedCallback() {
-    this.stopTimer();
-    this.clearIntervals();
-  }
-  onClickActive(event) {
-    if (this.selectedItem) {
-      this.selectedItem.progress = 0;
+    onMouseLeaveSelect() {
+        if (this.timeChecker === 0) {
+            this.playTimer();
+        }
     }
-    this.setSelectedItem(event.detail.uuid);
-    this.startTimer();
-    this.pauseTimer();
-  }
-  onMouseEnterSelect() {
-    this.pauseTimer();
-  }
-  onMouseLeaveSelect() {
-    if (this.timeChecker === 0) {
-      this.playTimer();
+    render() {
+        return (h(Host, null, h("slot", null)));
     }
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get element() { return getElement(this); }
+    get element() { return getElement(this); }
 };
 MdsAccordionTimer.style = mdsAccordionTimerCss;
 

package/dist/esm/mds-accordion-timer.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1e1d02d3.js';
-export { s as setNonce } from './index-1e1d02d3.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-df0a164e.js';
+export { s as setNonce } from './index-df0a164e.js';
 
 /*
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;