@maggioli-design-system/mds-accordion-timer 3.2.0 → 3.3.0

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

@@ -1 +1 @@
-import{p as e,b as o}from"./p-a7b74010.js";export{s as setNonce}from"./p-a7b74010.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((e=>o([["p-8d875f1d",[[1,"mds-accordion-timer",{duration:[2],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickActive"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]]]]]],e)));
+import{p as e,b as o}from"./p-a7b74010.js";export{s as setNonce}from"./p-a7b74010.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((e=>o([["p-778834a9",[[1,"mds-accordion-timer",{duration:[2],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickActive"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]]]]]],e)));

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

@@ -115,7 +115,7 @@ DOMTokenList
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
     // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-    var url = new URL('./p-4620ac30.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+    var url = new URL('./p-5e09eed0.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };
 

package/dist/mds-accordion-timer/p-2a65b768.system.entry.js

@@ -0,0 +1 @@
+System.register(["./p-5029b85d.system.js"],(function(e){"use strict";var t,i,r,n,s;return{setters:[function(e){t=e.r;i=e.c;r=e.h;n=e.H;s=e.g}],execute:function(){var c=":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}";var o=e("mds_accordion_timer",function(){function e(e){var r=this;t(this,e);this.changeEvent=i(this,"mdsAccordionTimerChange",7);this.clearIntervals=function(){window.clearInterval(r.timer);window.clearInterval(r.timeChecker);r.timeChecker=0};this.progress=function(){return Math.abs(r.remainingTime()/r.duration-1)};this.addTimeListener=function(){r.timeChecker=window.setInterval((function(){var e=r.progress();if(r.selectedItem!==undefined){r.selectedItem.progress=e}if(e===1){r.selectedItem.progress=0;r.startNext()}}),100)};this.beginningTime=function(){r.timeStarted=(new Date).getTime();return r.timeStarted};this.remainingTime=function(){var e=r.selectedItemDurationTime-((new Date).getTime()-r.timeStarted);return e>=0?e:0};this.setSelectedItem=function(e){r.children.forEach((function(t,i){if(i===e){t.selected=true;r.selectedItem=t;r.changeEvent.emit()}else{t.selected=false}}))};this.startNext=function(){var e=r.selectedItem.uuid+1>r.children.length-1?0:r.selectedItem.uuid+1;r.setSelectedItem(e);r.startTimer()};this.startTimer=function(){r.clearIntervals();r.time=r.beginningTime();r.selectedItemDurationTime=r.duration;r.addTimeListener()};this.playTimer=function(){r.beginningTime();r.addTimeListener()};this.pauseTimer=function(){r.clearIntervals();r.selectedItemDurationTime=r.remainingTime()};this.stopTimer=function(){r.clearIntervals()};this.time=0;this.duration=1e4}e.prototype.componentDidLoad=function(){var e=this;this.children=this.element.querySelectorAll("mds-accordion-timer-item");this.children.forEach((function(t,i){t.uuid=i;if(t.selected){e.selectedItem=t}}));if(this.selectedItem!==undefined){this.startTimer()}};e.prototype.disconnectedCallback=function(){this.stopTimer();this.clearIntervals()};e.prototype.onClickActive=function(e){if(this.selectedItem){this.selectedItem.progress=0}this.setSelectedItem(e.detail.uuid);this.startTimer();this.pauseTimer()};e.prototype.onMouseEnterSelect=function(){this.pauseTimer()};e.prototype.onMouseLeaveSelect=function(){if(this.timeChecker===0){this.playTimer()}};e.prototype.render=function(){return r(n,null,r("slot",null))};Object.defineProperty(e.prototype,"element",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());o.style=c}}}));

package/{www/build/p-4620ac30.system.js → dist/mds-accordion-timer/p-5e09eed0.system.js}

@@ -1 +1 @@
-System.register(["./p-5029b85d.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-2bfbd758.system",[[1,"mds-accordion-timer",{duration:[2],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickActive"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]]]]]],e)}))}}}));
+System.register(["./p-5029b85d.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-2a65b768.system",[[1,"mds-accordion-timer",{duration:[2],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickActive"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]]]]]],e)}))}}}));

package/dist/mds-accordion-timer/p-778834a9.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i,H as h,g as o}from"./p-a7b74010.js";const r=class{constructor(i){t(this,i),this.changeEvent=s(this,"mdsAccordionTimerChange",7),this.clearIntervals=()=>{window.clearInterval(this.timer),window.clearInterval(this.timeChecker),this.timeChecker=0},this.progress=()=>Math.abs(this.remainingTime()/this.duration-1),this.addTimeListener=()=>{this.timeChecker=window.setInterval((()=>{const t=this.progress();void 0!==this.selectedItem&&(this.selectedItem.progress=t),1===t&&(this.selectedItem.progress=0,this.startNext())}),100)},this.beginningTime=()=>(this.timeStarted=(new Date).getTime(),this.timeStarted),this.remainingTime=()=>{const t=this.selectedItemDurationTime-((new Date).getTime()-this.timeStarted);return t>=0?t:0},this.setSelectedItem=t=>{this.children.forEach(((s,i)=>{i===t?(s.selected=!0,this.selectedItem=s,this.changeEvent.emit()):s.selected=!1}))},this.startNext=()=>{this.setSelectedItem(this.selectedItem.uuid+1>this.children.length-1?0:this.selectedItem.uuid+1),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=1e4}componentDidLoad(){this.children=this.element.querySelectorAll("mds-accordion-timer-item"),this.children.forEach(((t,s)=>{t.uuid=s,t.selected&&(this.selectedItem=t)})),void 0!==this.selectedItem&&this.startTimer()}disconnectedCallback(){this.stopTimer(),this.clearIntervals()}onClickActive(t){this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer(),this.pauseTimer()}onMouseEnterSelect(){this.pauseTimer()}onMouseLeaveSelect(){0===this.timeChecker&&this.playTimer()}render(){return i(h,null,i("slot",null))}get element(){return o(this)}};r.style=":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}";export{r as mds_accordion_timer}

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-14T14:54:29",
+  "timestamp": "2023-06-23T10:11:40",
   "compiler": {
     "name": "node",
     "version": "18.3.0"
@@ -9,14 +9,15 @@
     "fsNamespace": "mds-accordion-timer",
     "components": 1,
     "entries": 1,
-    "bundles": 65,
+    "bundles": 66,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 24,
+        "files": 25,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
           "./dist/collection/common/keyboard-manager.js",
+          "./dist/collection/common/unit.js",
           "./dist/collection/components/mds-accordion-timer/mds-accordion-timer.js",
           "./dist/collection/components/mds-accordion-timer/test/mds-accordion-timer.stories.js",
           "./dist/collection/dictionary/autocomplete.js",
@@ -75,20 +76,20 @@
           "./dist/mds-accordion-timer/index.esm.js",
           "./dist/mds-accordion-timer/mds-accordion-timer.esm.js",
           "./dist/mds-accordion-timer/mds-accordion-timer.js",
-          "./dist/mds-accordion-timer/p-2bfbd758.system.entry.js",
-          "./dist/mds-accordion-timer/p-4620ac30.system.js",
+          "./dist/mds-accordion-timer/p-2a65b768.system.entry.js",
           "./dist/mds-accordion-timer/p-5029b85d.system.js",
           "./dist/mds-accordion-timer/p-50ea2036.system.js",
-          "./dist/mds-accordion-timer/p-8d875f1d.entry.js",
+          "./dist/mds-accordion-timer/p-5e09eed0.system.js",
+          "./dist/mds-accordion-timer/p-778834a9.entry.js",
           "./dist/mds-accordion-timer/p-a7b74010.js",
           "./www/build/index.esm.js",
           "./www/build/mds-accordion-timer.esm.js",
           "./www/build/mds-accordion-timer.js",
-          "./www/build/p-2bfbd758.system.entry.js",
-          "./www/build/p-4620ac30.system.js",
+          "./www/build/p-2a65b768.system.entry.js",
           "./www/build/p-5029b85d.system.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-8d875f1d.entry.js",
+          "./www/build/p-5e09eed0.system.js",
+          "./www/build/p-778834a9.entry.js",
           "./www/build/p-a7b74010.js"
         ]
       },
@@ -122,12 +123,12 @@
         "components": [
           "mds-accordion-timer"
         ],
-        "bundleId": "p-8d875f1d",
-        "fileName": "p-8d875f1d.entry.js",
+        "bundleId": "p-778834a9",
+        "fileName": "p-778834a9.entry.js",
         "imports": [
           "p-a7b74010.js"
         ],
-        "originalByteSize": 3512
+        "originalByteSize": 3489
       }
     ],
     "esm": [
@@ -141,7 +142,7 @@
         "imports": [
           "index-bd689d6a.js"
         ],
-        "originalByteSize": 3516
+        "originalByteSize": 3493
       }
     ],
     "es5": [
@@ -155,7 +156,7 @@
         "imports": [
           "index-bd689d6a.js"
         ],
-        "originalByteSize": 3516
+        "originalByteSize": 3493
       }
     ],
     "system": [
@@ -164,12 +165,12 @@
         "components": [
           "mds-accordion-timer"
         ],
-        "bundleId": "p-2bfbd758.system",
-        "fileName": "p-2bfbd758.system.entry.js",
+        "bundleId": "p-2a65b768.system",
+        "fileName": "p-2a65b768.system.entry.js",
         "imports": [
           "p-5029b85d.system.js"
         ],
-        "originalByteSize": 4458
+        "originalByteSize": 4381
       }
     ],
     "commonjs": [
@@ -183,7 +184,7 @@
         "imports": [
           "index-b99075ba.js"
         ],
-        "originalByteSize": 3563
+        "originalByteSize": 3540
       }
     ]
   },
@@ -257,7 +258,7 @@
           "reflect": false,
           "mutable": false,
           "required": false,
-          "optional": true,
+          "optional": false,
           "defaultValue": "10000",
           "complexType": {
             "original": "number",
@@ -298,7 +299,7 @@
               "reflect": false,
               "mutable": false,
               "required": false,
-              "optional": true,
+              "optional": false,
               "defaultValue": "10000",
               "complexType": {
                 "original": "number",
@@ -378,7 +379,33 @@
           "legacyContext": [],
           "internal": false,
           "assetsDirs": [],
-          "styleDocs": [],
+          "styleDocs": [
+            {
+              "name": "--mds-accordion-timer-progress-bar-color",
+              "docs": "Sets the color of the progress bar when the mds-accordion-timer-item is selected",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-accordion-timer-progress-bar-background",
+              "docs": "Sets the background-color of the progress bar when the mds-accordion-timer-item is selected",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-accordion-timer-color",
+              "docs": "Sets the text color of the component mds-accordion-timer-item",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-accordion-timer-progress-bar-thickness",
+              "docs": "Sets thickness of the progress bar of the mds-accordion-timer-item",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-accordion-timer-duration",
+              "docs": "Sets the transition duration of open/close animation of the mds-accordion-timer-item",
+              "annotation": "prop"
+            }
+          ],
           "docs": {
             "tags": [],
             "text": ""
@@ -456,6 +483,7 @@
   "sourceGraph": {
     "./src/common/aria.ts": [],
     "./src/common/keyboard-manager.ts": [],
+    "./src/common/unit.ts": [],
     "./src/components/mds-accordion-timer/mds-accordion-timer.tsx": [],
     "./src/components/mds-accordion-timer/test/mds-accordion-timer.stories.tsx": [],
     "./src/dictionary/autocomplete.ts": [],

package/dist/types/common/unit.d.ts

@@ -0,0 +1,2 @@
+declare const cssDurationToMilliseconds: (duration: string, defaultValue?: number) => number;
+export { cssDurationToMilliseconds, };

package/dist/types/components/mds-accordion-timer/mds-accordion-timer.d.ts

@@ -1,3 +1,4 @@
+import { MdsAccordionTimerItemEventDetail } from '@component/mds-accordion-timer-item/meta/event-detail';
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class MdsAccordionTimer {
   private timer;
@@ -11,7 +12,7 @@ export declare class MdsAccordionTimer {
   /**
    * Sets the duration of the single accordion item
    */
-  duration?: number;
+  duration: number;
   /**
    * Emits when the accordion changes it's item
    */
@@ -29,7 +30,7 @@ export declare class MdsAccordionTimer {
   private playTimer;
   private pauseTimer;
   private stopTimer;
-  onClickActive(event: CustomEvent<string>): void;
+  onClickActive(event: CustomEvent<MdsAccordionTimerItemEventDetail>): void;
   onMouseEnterSelect(): void;
   onMouseLeaveSelect(): void;
   render(): any;

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ export namespace Components {
         /**
           * Sets the duration of the single accordion item
          */
-        "duration"?: number;
+        "duration": number;
     }
 }
 export interface MdsAccordionTimerCustomEvent<T> extends CustomEvent<T> {

package/dist/types/dictionary/button.d.ts

@@ -1,5 +1,6 @@
 declare const buttonVariantDictionary: string[];
 declare const buttonToneVariantDictionary: string[];
+declare const buttonTargetDictionary: string[];
 declare const buttonSizeDictionary: string[];
 declare const buttonIconPositionDictionary: string[];
-export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

package/dist/types/dictionary/variant.d.ts

@@ -4,6 +4,7 @@ declare const themeStatusVariantDictionary: string[];
 declare const themeFullVariantDictionary: string[];
 declare const themeLabelVariantDictionary: string[];
 declare const toneVariantDictionary: string[];
+declare const toneActionVariantDictionary: string[];
 declare const toneSimpleVariantDictionary: string[];
 declare const toneMinimalVariantDictionary: string[];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/types/interface/input-value.d.ts

@@ -1,4 +1,4 @@
-import { InputValueType } from '../types/input-value-type';
+import { InputValueType } from '@type/input-value-type';
 export interface InputValue {
   value: InputValueType;
 }

package/dist/types/type/button.d.ts

@@ -1,4 +1,5 @@
 export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export type ButtonTargetType = 'self' | 'blank';
 export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonIconPositionType = 'left' | 'right';
 export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/type/variant.d.ts

@@ -5,6 +5,7 @@ export type ThemeLuminanceVariantType = 'dark' | 'light';
 export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export type ActionVariantType = 'primary' | 'dark' | 'light';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
 export type ToneMinimalVariantType = 'strong' | 'weak';

package/documentation.json

@@ -0,0 +1,99 @@
+{
+  "timestamp": "2023-06-23T10:05:29",
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.22.3",
+    "typescriptVersion": "4.9.4"
+  },
+  "components": [
+    {
+      "filePath": "./src/components/mds-accordion-timer/mds-accordion-timer.tsx",
+      "encapsulation": "shadow",
+      "tag": "mds-accordion-timer",
+      "readme": "# mds-accordion-timer\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "duration",
+          "type": "number",
+          "mutable": false,
+          "attr": "duration",
+          "reflectToAttr": false,
+          "docs": "Sets the duration of the single accordion item",
+          "docsTags": [],
+          "default": "10000",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "mdsAccordionTimerChange",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emits when the accordion changes it's item",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "mdsAccordionTimerItemClickSelect",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "mdsAccordionTimerItemMouseEnterSelect",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "mdsAccordionTimerItemMouseLeaveSelect",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [
+        {
+          "name": "--mds-accordion-timer-color",
+          "annotation": "prop",
+          "docs": "Sets the text color of the component mds-accordion-timer-item"
+        },
+        {
+          "name": "--mds-accordion-timer-duration",
+          "annotation": "prop",
+          "docs": "Sets the transition duration of open/close animation of the mds-accordion-timer-item"
+        },
+        {
+          "name": "--mds-accordion-timer-progress-bar-background",
+          "annotation": "prop",
+          "docs": "Sets the background-color of the progress bar when the mds-accordion-timer-item is selected"
+        },
+        {
+          "name": "--mds-accordion-timer-progress-bar-color",
+          "annotation": "prop",
+          "docs": "Sets the color of the progress bar when the mds-accordion-timer-item is selected"
+        },
+        {
+          "name": "--mds-accordion-timer-progress-bar-thickness",
+          "annotation": "prop",
+          "docs": "Sets thickness of the progress bar of the mds-accordion-timer-item"
+        }
+      ],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-accordion-timer",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "mds-accordion-timer is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -12,6 +12,7 @@
   "unpkg": "dist/mds-accordion-timer/mds-accordion-timer.esm.js",
   "files": [
     "dist/",
+    "documentation.json",
     "loader/",
     "readme.md",
     "src/",
@@ -23,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-accordion-timer-item": "^3.1.0",
-    "@maggioli-design-system/styles": "^11.2.1",
-    "@stencil/core": "^2.22.2"
+    "@maggioli-design-system/mds-accordion-timer-item": "^3.2.0",
+    "@maggioli-design-system/styles": "^11.5.2",
+    "@stencil/core": "^2.22.3"
   },
   "license": "MIT",
   "author": {
@@ -39,10 +40,15 @@
       "email": "andrea.pruccoli@maggioli.it",
       "role": "Software Engineer"
     },
+    {
+      "name": "Nicola Tamburini",
+      "email": "nicola.tamburini@maggioli.it",
+      "role": "Software Engineer"
+    },
     {
       "name": "Vittorio Vittori",
       "email": "vittorio.vittori@maggioli.it",
-      "role": "UX UI Designer"
+      "role": "Product Designer"
     }
   ]
 }

package/readme.md

@@ -19,6 +19,17 @@
 | `mdsAccordionTimerChange` | Emits when the accordion changes it's item | `CustomEvent<void>` |
 
 
+## CSS Custom Properties
+
+| Name                                            | Description                                                                                 |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `--mds-accordion-timer-color`                   | Sets the text color of the component mds-accordion-timer-item                               |
+| `--mds-accordion-timer-duration`                | Sets the transition duration of open/close animation of the mds-accordion-timer-item        |
+| `--mds-accordion-timer-progress-bar-background` | Sets the background-color of the progress bar when the mds-accordion-timer-item is selected |
+| `--mds-accordion-timer-progress-bar-color`      | Sets the color of the progress bar when the mds-accordion-timer-item is selected            |
+| `--mds-accordion-timer-progress-bar-thickness`  | Sets thickness of the progress bar of the mds-accordion-timer-item                          |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

package/src/common/aria.ts

@@ -7,12 +7,12 @@ const hash = (s: string): string => {
 }
 
 const unslugName = (name: string): string => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ')
+  return name.split('/')?.slice(-1).pop()?.replace(/-/g, ' ') ?? name
 }
 
 const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: string): string => {
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute)
+    return element.getAttribute(attribute) ?? ''
   }
   element.setAttribute(attribute, value)
   return value

package/src/common/keyboard-manager.ts

@@ -38,7 +38,7 @@ export class KeyboardManager {
   }
 
   detachEscapeBehavior = (): void => {
-    this.escapeCallback = null
+    this.escapeCallback = () => {return}
     if (typeof window !== undefined) {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }

package/src/common/unit.ts

@@ -0,0 +1,14 @@
+const cssDurationToMilliseconds = (duration: string, defaultValue = 1000): number => {
+  if (duration.includes('s')) {
+    return Number(duration.replace('s', '')) * 1000
+  }
+
+  if (duration.includes('ms')) {
+    return Number(duration.replace('s', ''))
+  }
+
+  return defaultValue
+}
+export {
+  cssDurationToMilliseconds,
+}

package/src/components/mds-accordion-timer/mds-accordion-timer.css

@@ -1,3 +1,17 @@
+/**
+* @prop --mds-accordion-timer-progress-bar-color: Sets the color of the progress bar when the mds-accordion-timer-item is selected
+* @prop --mds-accordion-timer-progress-bar-background: Sets the background-color of the progress bar when the mds-accordion-timer-item is selected
+* @prop --mds-accordion-timer-color: Sets the text color of the component mds-accordion-timer-item
+* @prop --mds-accordion-timer-progress-bar-thickness: Sets thickness of the progress bar of the mds-accordion-timer-item
+* @prop --mds-accordion-timer-duration: Sets the transition duration of open/close animation of the mds-accordion-timer-item
+*/
+
 :host {
+
+  --mds-accordion-timer-progress-bar-color: theme('colors.tone-neutral-03');
+  --mds-accordion-timer-progress-bar-background: theme('colors.tone-neutral-08');
+  --mds-accordion-timer-progress-bar-thickness: theme('width.1');
+  --mds-accordion-timer-duration: 500ms;
+
   display: block;
 }

package/src/components/mds-accordion-timer/mds-accordion-timer.tsx

@@ -1,3 +1,4 @@
+import { MdsAccordionTimerItemEventDetail } from '@component/mds-accordion-timer-item/meta/event-detail'
 import { Component, Host, Element, Event, EventEmitter, h, Prop, Listen, State } from '@stencil/core'
 
 @Component({
@@ -20,7 +21,7 @@ export class MdsAccordionTimer {
   /**
    * Sets the duration of the single accordion item
    */
-  @Prop() duration?: number = 10000
+  @Prop() duration = 10000
 
   /**
    * Emits when the accordion changes it's item
@@ -44,8 +45,7 @@ export class MdsAccordionTimer {
   private clearIntervals = (): void => {
     window.clearInterval(this.timer)
     window.clearInterval(this.timeChecker)
-    this.timer = null
-    this.timeChecker = null
+    this.timeChecker = 0
   }
 
   disconnectedCallback (): void {
@@ -117,22 +117,14 @@ export class MdsAccordionTimer {
 
   private stopTimer = (): void => {
     this.clearIntervals()
-    this.time = null
   }
 
   @Listen('mdsAccordionTimerItemClickSelect')
-  onClickActive (event: CustomEvent<string>): void {
-    if (this.selectedItem && event.detail === this.selectedItem.description) {
-      return
+  onClickActive (event: CustomEvent<MdsAccordionTimerItemEventDetail>): void {
+    if (this.selectedItem) {
+      this.selectedItem.progress = 0
     }
-    let selectedUuid: number
-    this.children.forEach(item => {
-      item.progress = 0
-      if (item.description === event.detail) {
-        selectedUuid = item.uuid
-      }
-    })
-    this.setSelectedItem(selectedUuid)
+    this.setSelectedItem(event.detail.uuid)
     this.startTimer()
     this.pauseTimer()
   }
@@ -144,7 +136,7 @@ export class MdsAccordionTimer {
 
   @Listen('mdsAccordionTimerItemMouseLeaveSelect')
   onMouseLeaveSelect (): void {
-    if (this.timeChecker === null) {
+    if (this.timeChecker === 0) {
       this.playTimer()
     }
   }

package/src/components/mds-accordion-timer/readme.md

@@ -19,6 +19,17 @@
 | `mdsAccordionTimerChange` | Emits when the accordion changes it's item | `CustomEvent<void>` |
 
 
+## CSS Custom Properties
+
+| Name                                            | Description                                                                                 |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `--mds-accordion-timer-color`                   | Sets the text color of the component mds-accordion-timer-item                               |
+| `--mds-accordion-timer-duration`                | Sets the transition duration of open/close animation of the mds-accordion-timer-item        |
+| `--mds-accordion-timer-progress-bar-background` | Sets the background-color of the progress bar when the mds-accordion-timer-item is selected |
+| `--mds-accordion-timer-progress-bar-color`      | Sets the color of the progress bar when the mds-accordion-timer-item is selected            |
+| `--mds-accordion-timer-progress-bar-thickness`  | Sets thickness of the progress bar of the mds-accordion-timer-item                          |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-accordion-timer/test/mds-accordion-timer.stories.tsx

@@ -14,7 +14,7 @@ export default {
 const Template = args =>
   <div>
     <mds-accordion-timer {...args}>
-      <mds-accordion-timer-item description="Blipbug">
+      <mds-accordion-timer-item selected description="Blipbug">
         <mds-text>Blipbug presenta delle fattezze riconducibili agli insetti nello stadio pre-crisalide. Il suo corpo si sviluppa in lunghezza, ed è formato principalmente da tre parti: la sua grande testa, il suo collo (molto simile ad un collare), e il corpo vero e proprio. La prima di queste è suddivisa in una parte color crema e una parte color denim; dello stesso colore sono le appenidici a forma di "V" che si trovano sopra e ai lati della testa. I suoi occhi sono enormi e grigi, ed hanno delle sottilissime sopracciglia sopra di essi. Il suo "collare", anch'esso color denim, presenta delle "setole" giallo sabbia, con le quali percepisce i segnali esterni: stesso colore si presenta nel segmento centrale della sua parte inferiore, dove sono presenti un primo paio di zampe crema. Il segmento superiore del corpo è bianco e ospita delle zampe anteriori color crema, ed infine, la parte finale, o la "coda", è color denim e finisce con un'appendice a "V" un po' piú grossa.</mds-text>
       </mds-accordion-timer-item>
       <mds-accordion-timer-item description="Drednaw">

package/src/components.d.ts

@@ -10,7 +10,7 @@ export namespace Components {
         /**
           * Sets the duration of the single accordion item
          */
-        "duration"?: number;
+        "duration": number;
     }
 }
 export interface MdsAccordionTimerCustomEvent<T> extends CustomEvent<T> {

package/src/dictionary/button.ts

@@ -15,6 +15,11 @@ const buttonToneVariantDictionary = [
   'quiet',
 ]
 
+const buttonTargetDictionary = [
+  'blank',
+  'self',
+]
+
 const buttonSizeDictionary = [
   'sm',
   'md',
@@ -28,8 +33,9 @@ const buttonIconPositionDictionary = [
 ]
 
 export {
+  buttonIconPositionDictionary,
   buttonSizeDictionary,
+  buttonTargetDictionary,
   buttonToneVariantDictionary,
   buttonVariantDictionary,
-  buttonIconPositionDictionary,
 }