@maggioli-design-system/mds-progress 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-fd4954d5.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-progress.cjs",[[1,"mds-progress",{"progress":[2],"direction":[1],"variant":[513]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/mds-progress.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fd4954d5.js');
+
+const mdsProgressCss = "@tailwind utilities; :host{--background:rgb(var(--adjust-tone-09));--progress-background:rgb(var(--brand-maggioli-03));--radius:0.5rem;--thickness:0.5rem;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;-webkit-transition-duration:150ms;transition-duration:150ms;background-color:var(--background);border-radius:var(--radius);height:var(--thickness)}:host(.horizontal){width:100%;height:var(--thickness);min-width:var(--thickness)}:host(.vertical){height:100%;min-height:2rem;-ms-flex-direction:column;flex-direction:column;width:var(--thickness)}.progress{-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);background-color:var(--progress-background);border-radius:var(--radius);-webkit-transition-property:background-color, flex-grow;transition-property:background-color, flex-grow;transition-property:background-color, flex-grow, -ms-flex-positive}@tailwind utilities; :host([variant=dark]){--progress-background:rgb(var(--adjust-tone-03));--background:rgb(var(--adjust-tone-09))}@tailwind utilities; :host([variant=error]){--progress-background:rgb(var(--status-error-06));--background:rgb(var(--status-error-09))}@tailwind utilities; :host([variant=info]){--progress-background:rgb(var(--status-info-06));--background:rgb(var(--status-info-09))}@tailwind utilities; :host([variant=light]){--progress-background:rgb(var(--adjust-tone));--background:rgb(var(--adjust-tone-04))}@tailwind utilities; :host([variant=success]){--progress-background:rgb(var(--status-success-06));--background:rgb(var(--status-success-09))}.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([variant=warning]){--progress-background:rgb(var(--status-warning-06));--background:rgb(var(--status-warning-09))}";
+
+let MdsProgress = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * A value between 0 and 1 that rapresents the status progress
+     */
+    this.progress = 0;
+    /**
+     * Specifies the direction of the progress bar, if horizonatl or vertical
+     */
+    this.direction = 'horizontal';
+    /**
+     * Sets the theme variant colors
+     */
+    this.variant = 'dark';
+  }
+  render() {
+    return (index.h(index.Host, { class: this.direction }, index.h("div", { class: "progress", style: this.direction === 'horizontal'
+        ? { flexGrow: `${this.progress}` }
+        : { flexGrow: `${this.progress}`, width: '100%' } })));
+  }
+};
+MdsProgress.style = mdsProgressCss;
+
+exports.mds_progress = MdsProgress;

package/dist/cjs/mds-progress.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-fd4954d5.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-progress.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-progress.cjs",[[1,"mds-progress",{"progress":[2],"direction":[1],"variant":[513]}]]]], options);
+});

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/mds-progress/mds-progress.css

@@ -0,0 +1,113 @@
+@tailwind utilities;
+
+/*
+  * @prop --background: Sets the background-color of the component
+  * @prop --progress-background: Sets the background-color of the progress
+  * @prop --radius: Sets the border-radius of the component
+  * @prop --thickness: Sets the thickness of the progress bar
+  */
+
+:host {
+
+  --background: rgb(var(--adjust-tone-09));
+  --progress-background: rgb(var(--brand-maggioli-03));
+  --radius: 0.5rem;
+  --thickness: 0.5rem;
+  display: flex;
+  overflow: hidden;
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: 150ms;
+
+  background-color: var(--background);
+  border-radius: var(--radius);
+  height: var(--thickness);
+}
+
+:host ( .horizontal ){
+
+  width: 100%;
+
+  height: var(--thickness);
+  min-width: var(--thickness);
+}
+
+:host ( .vertical ){
+
+  height: 100%;
+
+  min-height: 2rem;
+
+  flex-direction: column;
+
+  width: var(--thickness);
+}
+
+.progress{
+
+  transition-duration: 500ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  background-color: var(--progress-background);
+  border-radius: var(--radius);
+  transition-property: background-color, flex-grow;
+}
+
+@tailwind utilities;
+
+:host ( [variant=dark] ) {
+
+  --progress-background: rgb(var(--adjust-tone-03));
+  --background: rgb(var(--adjust-tone-09));
+}
+
+@tailwind utilities;
+
+:host ( [variant=error] ) {
+
+  --progress-background: rgb(var(--status-error-06));
+  --background: rgb(var(--status-error-09));
+}
+
+@tailwind utilities;
+
+:host ( [variant=info] ) {
+
+  --progress-background: rgb(var(--status-info-06));
+  --background: rgb(var(--status-info-09));
+}
+
+@tailwind utilities;
+
+:host ( [variant=light] ) {
+
+  --progress-background: rgb(var(--adjust-tone));
+  --background: rgb(var(--adjust-tone-04));
+}
+
+@tailwind utilities;
+
+:host ( [variant=success] ) {
+
+  --progress-background: rgb(var(--status-success-06));
+  --background: rgb(var(--status-success-09));
+}
+
+.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);
+}
+
+:host ( [variant=warning] ) {
+
+  --progress-background: rgb(var(--status-warning-06));
+  --background: rgb(var(--status-warning-09));
+}
+

package/dist/collection/components/mds-progress/mds-progress.js

@@ -0,0 +1,97 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class MdsProgress {
+  constructor() {
+    /**
+     * A value between 0 and 1 that rapresents the status progress
+     */
+    this.progress = 0;
+    /**
+     * Specifies the direction of the progress bar, if horizonatl or vertical
+     */
+    this.direction = 'horizontal';
+    /**
+     * Sets the theme variant colors
+     */
+    this.variant = 'dark';
+  }
+  render() {
+    return (h(Host, { class: this.direction },
+      h("div", { class: "progress", style: this.direction === 'horizontal'
+          ? { flexGrow: `${this.progress}` }
+          : { flexGrow: `${this.progress}`, width: '100%' } })));
+  }
+  static get is() { return "mds-progress"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-progress.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-progress.css"]
+  }; }
+  static get properties() { return {
+    "progress": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A value between 0 and 1 that rapresents the status progress"
+      },
+      "attribute": "progress",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DirectionType",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "DirectionType": {
+            "location": "import",
+            "path": "./meta/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the direction of the progress bar, if horizonatl or vertical"
+      },
+      "attribute": "direction",
+      "reflect": false,
+      "defaultValue": "'horizontal'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ThemeVariantType",
+        "resolved": "\"dark\" | \"error\" | \"info\" | \"light\" | \"success\" | \"warning\"",
+        "references": {
+          "ThemeVariantType": {
+            "location": "import",
+            "path": "../../types/variant"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the theme variant colors"
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "'dark'"
+    }
+  }; }
+}

package/dist/collection/components/mds-progress/meta/dictionary.js

@@ -0,0 +1,5 @@
+const directionDictionary = [
+  'horizontal',
+  'vertical',
+];
+export { directionDictionary, };

package/dist/collection/components/mds-progress/meta/types.js

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

package/dist/collection/components/mds-progress/test/mds-progress.stories.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import faker from 'faker'
+import MdsProgress from '@component/mds-progress/mds-progress'
+import { directionDictionary } from '../meta/dictionary'
+import { themeVariantDictionary } from '@dictionary/variant'
+
+export default {
+  title: 'UI / Progress',
+  component: MdsProgress,
+  argTypes: {
+    direction: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      description: 'Specifies the direction of the progress bar, if horizonatl or vertical',
+      options: directionDictionary,
+    },
+    progress: {
+      control: { type: 'range', step: 0.01, min: 0, max: 1 },
+      type: { name: 'number', required: false },
+      description: 'A value between 0 and 1 that rapresents the status progress',
+    },
+    variant: {
+      type: { name: 'string', required: false },
+      description: 'Sets the theme variant colors',
+      options: themeVariantDictionary,
+      control: { type: 'select' },
+    },
+  },
+}
+
+const Template = args =>
+  <mds-progress {...args}/>
+
+export const Default = Template.bind({})
+Default.args = {
+  progress: 0.35,
+}

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