@maggioli-design-system/mds-accordion-timer 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dc0bb58e.js');
+
+/*
+ Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["mds-accordion-timer.cjs",[[1,"mds-accordion-timer",{"duration":[2],"time":[32]},[[0,"clickActive","onClickActive"],[0,"mouseEnterActive","onMouseEnterActive"],[0,"mouseLeaveActive","onMouseLeaveActive"]]]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dc0bb58e.js');
+
+const mdsAccordionTimerCss = ":host{display:block}";
+
+let MdsAccordionTimer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemActivated = index.createEvent(this, "itemActivated", 7);
+    this.time = 0;
+    /**
+     * Sets the duration of the single accordion item
+     */
+    this.duration = 5000;
+    this.clearIntervals = () => {
+      window.clearInterval(this.timer);
+      window.clearInterval(this.timeChecker);
+      this.timer = null;
+      this.timeChecker = null;
+    };
+    this.progress = () => {
+      return Math.abs(this.remainingTime() / this.duration - 1);
+    };
+    this.addTimeListener = () => {
+      this.timeChecker = window.setInterval(() => {
+        const progress = this.progress();
+        if (this.activeItem !== undefined) {
+          this.activeItem.progress = progress;
+        }
+        if (progress === 1) {
+          this.activeItem.progress = 0;
+          this.startNext();
+        }
+      }, 100);
+    };
+    this.beginningTime = () => {
+      this.timeStarted = (new Date()).getTime();
+      return this.timeStarted;
+    };
+    this.remainingTime = () => {
+      const remainingTime = this.activeItemDurationTime - ((new Date()).getTime() - this.timeStarted);
+      return remainingTime >= 0 ? remainingTime : 0;
+    };
+    this.setActiveItem = (uuid) => {
+      this.children.forEach((item, key) => {
+        if (key === uuid) {
+          item.active = true;
+          this.activeItem = item;
+          this.itemActivated.emit(uuid);
+        }
+        else {
+          item.active = false;
+        }
+      });
+    };
+    this.startNext = () => {
+      const nextUuid = this.activeItem.uuid + 1 > this.children.length - 1 ? 0 : this.activeItem.uuid + 1;
+      this.setActiveItem(nextUuid);
+      this.startTimer();
+    };
+    this.startTimer = () => {
+      this.clearIntervals();
+      this.time = this.beginningTime();
+      this.activeItemDurationTime = this.duration;
+      this.addTimeListener();
+    };
+    this.playTimer = () => {
+      this.beginningTime();
+      this.addTimeListener();
+    };
+    this.pauseTimer = () => {
+      this.clearIntervals();
+      this.activeItemDurationTime = this.remainingTime();
+    };
+    this.stopTimer = () => {
+      this.clearIntervals();
+      this.time = null;
+    };
+  }
+  componentDidLoad() {
+    this.children = this.element.querySelectorAll('mds-accordion-timer-item');
+    this.children.forEach((item, key) => {
+      item.uuid = key;
+      if (item.active) {
+        this.activeItem = item;
+      }
+    });
+  }
+  connectedCallback() {
+    this.startTimer();
+  }
+  disconnectedCallback() {
+    this.stopTimer();
+    this.clearIntervals();
+  }
+  onClickActive(event) {
+    if (event.detail === this.activeItem.description) {
+      return;
+    }
+    let selectedUuid;
+    this.children.forEach(item => {
+      item.progress = 0;
+      if (item.description === event.detail) {
+        selectedUuid = item.uuid;
+      }
+    });
+    this.setActiveItem(selectedUuid);
+    this.startTimer();
+    this.pauseTimer();
+  }
+  onMouseEnterActive() {
+    this.pauseTimer();
+  }
+  onMouseLeaveActive() {
+    if (this.timeChecker === null) {
+      this.playTimer();
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get element() { return index.getElement(this); }
+};
+MdsAccordionTimer.style = mdsAccordionTimerCss;
+
+exports.mds_accordion_timer = MdsAccordionTimer;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-dc0bb58e.js');
+
+/*
+ Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-accordion-timer.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["mds-accordion-timer.cjs",[[1,"mds-accordion-timer",{"duration":[2],"time":[32]},[[0,"clickActive","onClickActive"],[0,"mouseEnterActive","onMouseEnterActive"],[0,"mouseLeaveActive","onMouseLeaveActive"]]]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/mds-accordion-timer/mds-accordion-timer.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.10.0",
+    "typescriptVersion": "4.3.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,184 @@
+import { Component, Host, Element, Event, h, Prop, Listen, State } from '@stencil/core';
+export class MdsAccordionTimer {
+  constructor() {
+    this.time = 0;
+    /**
+     * Sets the duration of the single accordion item
+     */
+    this.duration = 5000;
+    this.clearIntervals = () => {
+      window.clearInterval(this.timer);
+      window.clearInterval(this.timeChecker);
+      this.timer = null;
+      this.timeChecker = null;
+    };
+    this.progress = () => {
+      return Math.abs(this.remainingTime() / this.duration - 1);
+    };
+    this.addTimeListener = () => {
+      this.timeChecker = window.setInterval(() => {
+        const progress = this.progress();
+        if (this.activeItem !== undefined) {
+          this.activeItem.progress = progress;
+        }
+        if (progress === 1) {
+          this.activeItem.progress = 0;
+          this.startNext();
+        }
+      }, 100);
+    };
+    this.beginningTime = () => {
+      this.timeStarted = (new Date()).getTime();
+      return this.timeStarted;
+    };
+    this.remainingTime = () => {
+      const remainingTime = this.activeItemDurationTime - ((new Date()).getTime() - this.timeStarted);
+      return remainingTime >= 0 ? remainingTime : 0;
+    };
+    this.setActiveItem = (uuid) => {
+      this.children.forEach((item, key) => {
+        if (key === uuid) {
+          item.active = true;
+          this.activeItem = item;
+          this.itemActivated.emit(uuid);
+        }
+        else {
+          item.active = false;
+        }
+      });
+    };
+    this.startNext = () => {
+      const nextUuid = this.activeItem.uuid + 1 > this.children.length - 1 ? 0 : this.activeItem.uuid + 1;
+      this.setActiveItem(nextUuid);
+      this.startTimer();
+    };
+    this.startTimer = () => {
+      this.clearIntervals();
+      this.time = this.beginningTime();
+      this.activeItemDurationTime = this.duration;
+      this.addTimeListener();
+    };
+    this.playTimer = () => {
+      this.beginningTime();
+      this.addTimeListener();
+    };
+    this.pauseTimer = () => {
+      this.clearIntervals();
+      this.activeItemDurationTime = this.remainingTime();
+    };
+    this.stopTimer = () => {
+      this.clearIntervals();
+      this.time = null;
+    };
+  }
+  componentDidLoad() {
+    this.children = this.element.querySelectorAll('mds-accordion-timer-item');
+    this.children.forEach((item, key) => {
+      item.uuid = key;
+      if (item.active) {
+        this.activeItem = item;
+      }
+    });
+  }
+  connectedCallback() {
+    this.startTimer();
+  }
+  disconnectedCallback() {
+    this.stopTimer();
+    this.clearIntervals();
+  }
+  onClickActive(event) {
+    if (event.detail === this.activeItem.description) {
+      return;
+    }
+    let selectedUuid;
+    this.children.forEach(item => {
+      item.progress = 0;
+      if (item.description === event.detail) {
+        selectedUuid = item.uuid;
+      }
+    });
+    this.setActiveItem(selectedUuid);
+    this.startTimer();
+    this.pauseTimer();
+  }
+  onMouseEnterActive() {
+    this.pauseTimer();
+  }
+  onMouseLeaveActive() {
+    if (this.timeChecker === null) {
+      this.playTimer();
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "mds-accordion-timer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-accordion-timer.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-accordion-timer.css"]
+  }; }
+  static get properties() { return {
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the duration of the single accordion item"
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "5000"
+    }
+  }; }
+  static get states() { return {
+    "time": {}
+  }; }
+  static get events() { return [{
+      "method": "itemActivated",
+      "name": "itemActivated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when the accordion changes it's item"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get listeners() { return [{
+      "name": "clickActive",
+      "method": "onClickActive",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseEnterActive",
+      "method": "onMouseEnterActive",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseLeaveActive",
+      "method": "onMouseLeaveActive",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/mds-accordion-timer/test/mds-accordion-timer.stories.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import MdsAccordionTimer from '@component/mds-accordion-timer/mds-accordion-timer'
+import faker from 'faker'
+
+export default {
+  title: 'UI / Accordion Timer',
+  component: MdsAccordionTimer,
+  argTypes: {
+    duration: {
+      type: { name: 'number', required: false },
+      description: 'Sets the duration of the single accordion item',
+    },
+  },
+}
+
+const Template = args =>
+  <div>
+    <mds-accordion-timer {...args}>
+      <mds-accordion-timer-item active description={ faker.lorem.sentence() }><mds-text>{ faker.lorem.paragraphs(2) }</mds-text></mds-accordion-timer-item>
+      <mds-accordion-timer-item description={ faker.lorem.sentence() }><mds-text>{ faker.lorem.paragraphs(2) }</mds-text></mds-accordion-timer-item>
+      <mds-accordion-timer-item description={ faker.lorem.sentence() }><mds-text>{ faker.lorem.paragraphs(2) }</mds-text></mds-accordion-timer-item>
+      <mds-accordion-timer-item description={ faker.lorem.sentence() }><mds-text>{ faker.lorem.paragraphs(2) }</mds-text></mds-accordion-timer-item>
+      <mds-accordion-timer-item description={ faker.lorem.sentence() }><mds-text>{ faker.lorem.paragraphs(2) }</mds-text></mds-accordion-timer-item>
+    </mds-accordion-timer>
+  </div>
+
+export const Default = Template.bind({})
+
+export const Duration = Template.bind({})
+Duration.args = {
+  duration: 1000,
+}

package/dist/collection/dictionary/autocomplete.js

@@ -0,0 +1,59 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+];
+export { autoCompleteDictionary, };

package/dist/collection/dictionary/button.js

@@ -0,0 +1,26 @@
+const buttonVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+];
+const buttonToneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const buttonSizeDictionary = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+];
+const buttonIconPositionDictionary = [
+  'left',
+  'right',
+];
+export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };

package/dist/collection/dictionary/color.js

@@ -0,0 +1,19 @@
+const colorLabelDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const colorStatusDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+export { colorLabelDictionary, colorStatusDictionary, };

package/dist/collection/dictionary/icon.js

@@ -0,0 +1,3 @@
+import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
+const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+export { iconsDictionary, };

package/dist/collection/dictionary/input-text-type.js

@@ -0,0 +1,13 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+];
+export { inputTextTypeDictionary, };

package/dist/collection/dictionary/loading.js

@@ -0,0 +1,5 @@
+const loadingDictionary = [
+  'eager',
+  'lazy',
+];
+export { loadingDictionary, };

package/dist/collection/dictionary/typography.js

@@ -0,0 +1,37 @@
+const typographyDictionary = [
+  'action',
+  'caption',
+  'code',
+  'detail',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hack',
+  'label',
+  'option',
+  'paragraph',
+];
+const typographyMonoDictionary = [
+  'code',
+  'hack',
+];
+const typographyPrimaryDictionary = [
+  'action',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+];
+const typographySecondaryDictionary = [
+  'caption',
+  'detail',
+  'label',
+  'option',
+  'paragraph',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };

package/dist/collection/dictionary/variant.js

@@ -0,0 +1,64 @@
+const themeVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'success',
+  'warning',
+];
+const themeLuminanceVariantDictionary = [
+  'dark',
+  'light',
+];
+const themeStatusVariantDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+const themeFullVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'dark',
+  'error',
+  'green',
+  'info',
+  'light',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'success',
+  'violet',
+  'warning',
+  'yellow',
+];
+const themeLabelVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const toneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const toneSimpleVariantDictionary = [
+  'strong',
+  'weak',
+  'quiet',
+];
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+];
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };