@maggioli-design-system/mds-accordion-timer-item 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-2ee34dd7.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-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"active":[516],"description":[1],"progress":[2],"uuid":[2],"isActive":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2ee34dd7.js');
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+const mdsAccordionTimerItemCss = ".contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--color, rgb(var(--adjust-tone-02)))}:host(:hover:not(.active)) .progress-bar{--background-active:rgb(var(--adjust-tone-07))}.row{display:-ms-flexbox;display:flex;gap:1rem}.accordion{display:grid}.progress-bar{-ms-flex-negative:0;flex-shrink:0;--thickness:0.25rem}.header{cursor:pointer}:host(.active) .header{cursor:auto}.contents{display:grid;height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}.contents--opened{height:auto;padding-top:1rem;opacity:1}";
+
+let MdsAccordionTimerItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickActive = index.createEvent(this, "clickActive", 7);
+    this.mouseEnterActive = index.createEvent(this, "mouseEnterActive", 7);
+    this.mouseLeaveActive = index.createEvent(this, "mouseLeaveActive", 7);
+    /**
+     * Specifies the typography of the element
+     */
+    this.typography = 'h5';
+    /**
+     * A value between 0 and 100 that rapresents the status progress
+     */
+    this.progress = 0;
+    /**
+     * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+     */
+    this.uuid = 0;
+    this.toggle = () => {
+      if (!this.isActive) {
+        this.isActive = true;
+        this.clickActive.emit(this.description);
+      }
+    };
+    this.mouseEnter = () => {
+      if (this.isActive) {
+        this.mouseEnterActive.emit(this.description);
+      }
+    };
+    this.mouseLeave = () => {
+      if (this.isActive) {
+        this.mouseLeaveActive.emit(this.description);
+      }
+    };
+  }
+  componentWillLoad() {
+    this.isActive = this.active;
+  }
+  validateOpened(newValue) {
+    this.isActive = newValue;
+  }
+  render() {
+    return (index.h(index.Host, { class: clsx(this.isActive && 'active'), onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: this.progress, direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("div", { class: "header", onClick: this.toggle }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: clsx('contents', this.isActive && 'contents--opened') }, index.h("slot", null))))));
+  }
+  static get watchers() { return {
+    "active": ["validateOpened"]
+  }; }
+};
+MdsAccordionTimerItem.style = mdsAccordionTimerItemCss;
+
+exports.mds_accordion_timer_item = MdsAccordionTimerItem;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-2ee34dd7.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-item.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-item.cjs",[[1,"mds-accordion-timer-item",{"typography":[1],"active":[516],"description":[1],"progress":[2],"uuid":[2],"isActive":[32]}]]]], options);
+});

package/dist/collection/collection-manifest.json

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

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

@@ -0,0 +1,109 @@
+.contents {
+
+  display: contents;
+}
+
+.border {
+
+  border-width: 1px;
+}
+
+.shadow {
+
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+/**
+  * @prop --background-active: Sets the background-color of the progress bar when the item is selected
+  * @prop --color: Sets the text color of the component
+  * @prop --thickness: Sets thickness of the progress bar
+  */
+
+:host {
+
+  position: relative;
+
+  display: grid;
+
+  padding-top: 1rem;
+
+  padding-bottom: 1rem;
+
+  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+
+  transition-duration: 150ms;
+
+  transition-duration: 500ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  color: var(--color, rgb(var(--adjust-tone-02)));
+}
+
+:host ( :hover:not(.active) ) .progress-bar {
+
+  --background-active: rgb(var(--adjust-tone-07));
+}
+
+.row {
+
+  display: flex;
+
+  gap: 1rem;
+}
+
+.accordion {
+
+  display: grid;
+}
+
+.progress-bar {
+
+  flex-shrink: 0;
+
+  --thickness: 0.25rem;
+}
+
+.header {
+
+  cursor: pointer;
+}
+
+:host ( .active ) .header {
+
+  cursor: auto;
+}
+
+.contents {
+
+  display: grid;
+
+  height: 0px;
+
+  gap: 1rem;
+
+  overflow: hidden;
+
+  padding-top: 0px;
+
+  opacity: 0;
+
+  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+
+  transition-duration: 150ms;
+
+  transition-duration: 300ms;
+
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.contents--opened {
+
+  height: auto;
+
+  padding-top: 1rem;
+
+  opacity: 1;
+}

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

@@ -0,0 +1,206 @@
+import { Component, Host, h, Prop, State, Event, Watch } from '@stencil/core';
+import clsx from 'clsx';
+export class MdsAccordionTimerItem {
+  constructor() {
+    /**
+     * Specifies the typography of the element
+     */
+    this.typography = 'h5';
+    /**
+     * A value between 0 and 100 that rapresents the status progress
+     */
+    this.progress = 0;
+    /**
+     * Used automatically by MdsAccordionTimer wrapper to handle it's siblings
+     */
+    this.uuid = 0;
+    this.toggle = () => {
+      if (!this.isActive) {
+        this.isActive = true;
+        this.clickActive.emit(this.description);
+      }
+    };
+    this.mouseEnter = () => {
+      if (this.isActive) {
+        this.mouseEnterActive.emit(this.description);
+      }
+    };
+    this.mouseLeave = () => {
+      if (this.isActive) {
+        this.mouseLeaveActive.emit(this.description);
+      }
+    };
+  }
+  componentWillLoad() {
+    this.isActive = this.active;
+  }
+  validateOpened(newValue) {
+    this.isActive = newValue;
+  }
+  render() {
+    return (h(Host, { class: clsx(this.isActive && 'active'), onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave },
+      h("div", { class: "row" },
+        h("mds-progress", { class: "progress-bar", progress: this.progress, direction: "vertical" }),
+        h("div", { class: "accordion" },
+          h("div", { class: "header", onClick: this.toggle },
+            h("mds-text", { typography: this.typography }, this.description)),
+          h("div", { class: clsx('contents', this.isActive && 'contents--opened') },
+            h("slot", null))))));
+  }
+  static get is() { return "mds-accordion-timer-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-accordion-timer-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-accordion-timer-item.css"]
+  }; }
+  static get properties() { return {
+    "typography": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TypographyPrimaryType",
+        "resolved": "\"action\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+        "references": {
+          "TypographyPrimaryType": {
+            "location": "import",
+            "path": "../../types/typography"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the typography of the element"
+      },
+      "attribute": "typography",
+      "reflect": false,
+      "defaultValue": "'h5'"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies if the accordion item is opened or not"
+      },
+      "attribute": "active",
+      "reflect": true
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the title shown when the accordion is closed or opened"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "progress": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A value between 0 and 100 that rapresents the status progress"
+      },
+      "attribute": "progress",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "uuid": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Used automatically by MdsAccordionTimer wrapper to handle it's siblings"
+      },
+      "attribute": "uuid",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "isActive": {}
+  }; }
+  static get events() { return [{
+      "method": "clickActive",
+      "name": "clickActive",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when the accordion is clicked by the mouse"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "mouseEnterActive",
+      "name": "mouseEnterActive",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when the accordion is hovered by the mouse"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "mouseLeaveActive",
+      "name": "mouseLeaveActive",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when the accordion is hovered by the mouse"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "active",
+      "methodName": "validateOpened"
+    }]; }
+}

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import MdsAccordionTimerItem from '@component/mds-accordion-timer-item/mds-accordion-timer-item'
+import { typographyPrimaryDictionary } from '@dictionary/typography'
+import faker from 'faker'
+
+export default {
+  title: 'UI / Accordion Timer / Accordion Timer Item',
+  component: MdsAccordionTimerItem,
+  argTypes: {
+    description: {
+      type: { name: 'string', required: true },
+      description: 'Specifies the title shown when the accordion is closed or opened',
+    },
+    active: {
+      type: { name: 'boolean', required: false },
+      description: 'Specifies if the accordion item is opened or not',
+    },
+    progress: {
+      control: { type: 'range', step: 0.01, min: 0, max: 1 },
+      type: { name: 'number', required: false },
+      description: 'A value between 0 and 100 that rapresents the status progress',
+    },
+    typography: {
+      type: { name: 'string', required: false },
+      description: 'Specifies the typography of the element',
+      options: typographyPrimaryDictionary,
+      control: { type: 'select' },
+    },
+  },
+}
+
+const Template = args =>
+  <div>
+    <mds-accordion-timer-item {...args}>
+      <mds-text typography="paragraph" class="text-adjust-tone-08">{ faker.lorem.paragraphs(2) }</mds-text>
+    </mds-accordion-timer-item>
+  </div>
+
+export const Default = Template.bind({})
+Default.args = {
+  progress: 0.15,
+  description: 'Come funziona il monitoraggio del sonno?',
+}
+
+export const active = Template.bind({})
+active.args = {
+  active: true,
+  description: 'Come funziona il monitoraggio del sonno?',
+}

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, };