@maggioli-design-system/mds-input-tip-item 1.0.0

package/dist/collection/components/mds-input-tip-item/mds-input-tip-item.css

@@ -0,0 +1,306 @@
+@tailwind components;
+
+.svg{
+
+  display: flex;
+}
+
+.svg svg{
+
+  aspect-ratio: 1/1;
+
+  height: 100%;
+
+  width: 100%;
+}
+.static{
+
+  position: static;
+}
+.fixed{
+
+  position: fixed;
+}
+.absolute{
+
+  position: absolute;
+}
+.truncate{
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+}
+.border{
+
+  border-width: 1px;
+}
+.bg-label-amaranth-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+}
+.bg-label-aqua-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+}
+.bg-label-blue-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+}
+.bg-label-green-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+}
+.bg-label-lime-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+}
+.bg-label-orange-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+}
+.bg-label-orchid-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+}
+.bg-label-violet-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+}
+.bg-label-yellow-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+}
+.bg-tone-neutral-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+}
+.fill-label-amaranth-04{
+
+  fill: rgb(var(--label-amaranth-04));
+}
+.fill-label-aqua-04{
+
+  fill: rgb(var(--label-aqua-04));
+}
+.fill-label-blue-04{
+
+  fill: rgb(var(--label-blue-04));
+}
+.fill-label-green-04{
+
+  fill: rgb(var(--label-green-04));
+}
+.fill-label-lime-04{
+
+  fill: rgb(var(--label-lime-04));
+}
+.fill-label-orange-04{
+
+  fill: rgb(var(--label-orange-04));
+}
+.fill-label-orchid-04{
+
+  fill: rgb(var(--label-orchid-04));
+}
+.fill-label-violet-04{
+
+  fill: rgb(var(--label-violet-04));
+}
+.fill-label-yellow-04{
+
+  fill: rgb(var(--label-yellow-04));
+}
+.fill-tone-neutral-04{
+
+  fill: rgb(var(--tone-neutral-04));
+}
+.text-label-amaranth-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+}
+.text-label-aqua-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+}
+.text-label-blue-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
+}
+.text-label-green-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+}
+.text-label-lime-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+}
+.text-label-orange-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+}
+.text-label-orchid-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+}
+.text-label-violet-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+}
+.text-label-yellow-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
+}
+.text-tone-neutral-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
+}
+.shadow{
+
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:host {
+
+  --mds-input-tip-item-background: rgb(var(--tone-neutral-01));
+  --mds-input-tip-item-color: rgb(var(--tone-neutral));
+  --mds-input-tip-item-icon-color: var(--tone-neutral);
+  height: 0.75rem;
+  border-radius: 0.375rem;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  align-items: center;
+  background-color: rgb(var(--mds-input-tip-item-background));
+  color: rgb(var(--mds-input-tip-item-color));
+  display: flex;
+  justify-content: center;
+  min-width: 0.75rem;
+  padding: 0;
+  pointer-events: none;
+  position: static;
+  text-align: center;
+  transform: translate(0, 0);
+  transition-property: background-color, border-radius, color, padding-left, padding-right, transform;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+:host ([expanded="false"]) {
+  color: transparent;
+}
+
+:host ([expanded]:not([expanded="false"])){
+
+  padding-left: 0.5rem;
+
+  padding-right: 0.5rem;
+
+  --mds-input-tip-item-color: var(--tone-neutral);
+}
+
+:host ([expanded]:not([expanded="false"])) .content {
+  grid-template-columns: 1fr;
+  opacity: 1;
+}
+
+.content{
+
+  height: 0.75rem;
+
+  transition-duration: 200ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  display: grid;
+  grid-template-columns: 0fr;
+  opacity: 0;
+  overflow: hidden;
+  transition-property: grid-template-columns, opacity;
+}
+
+.text {
+  line-height: 0.75rem;
+}
+
+.icon{
+
+  height: 0.75rem;
+
+  width: 0.75rem;
+
+  fill: rgb(var(--mds-input-tip-item-icon-color));
+  transform: translateY(-1px);
+}
+
+:host ([variant="required"]) {
+
+  --mds-input-tip-item-background: var(--status-error-05);
+}
+
+:host ([variant="required-success"]) {
+
+  --mds-input-tip-item-background: var(--status-success-05);
+}
+
+:host ([variant="readonly"]) {
+
+  --mds-input-tip-item-background: var(--status-info-05);
+}
+
+:host ([variant="disabled"]) {
+
+  --mds-input-tip-item-background: var(--tone-neutral-05);
+}
+
+:host ([variant="text"]) {
+
+  --mds-input-tip-item-background: var(--tone-neutral-03);
+}

package/dist/collection/components/mds-input-tip-item/mds-input-tip-item.js

@@ -0,0 +1,85 @@
+import { Host, h } from "@stencil/core";
+import miBaselineDone from "@icon/mi/baseline/done.svg";
+import { Locale } from "../../common/locale";
+import localeEn from "./meta/locale.en.json";
+import localeIt from "./meta/locale.it.json";
+export class MdsInputTipItem {
+    constructor() {
+        this.t = new Locale({
+            en: localeEn,
+            it: localeIt,
+        });
+        this.variant = 'required';
+        this.expanded = true;
+    }
+    componentWillRender() {
+        this.t.lang(this.element);
+    }
+    render() {
+        return (h(Host, null, h("div", { class: "content" }, this.variant === 'text' &&
+            h("mds-text", { typography: "option", truncate: "word" }, h("span", { class: "text" }, h("slot", null))), this.variant === 'readonly' &&
+            h("mds-text", { typography: "option", truncate: "word" }, h("span", { class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
+            h("mds-text", { typography: "option", truncate: "word" }, h("span", { class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
+            h("mds-text", { typography: "option", truncate: "word" }, h("span", { class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
+            h("span", { class: "icon svg", innerHTML: miBaselineDone }))));
+    }
+    static get is() { return "mds-input-tip-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mds-input-tip-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mds-input-tip-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputTipItemVariantType",
+                    "resolved": "\"disabled\" | \"readonly\" | \"required\" | \"required-success\" | \"text\" | undefined",
+                    "references": {
+                        "InputTipItemVariantType": {
+                            "location": "import",
+                            "path": "@component/mds-input-tip-item/meta/types",
+                            "id": "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the variant of the element"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'required'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the element is expanded"
+                },
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/dist/collection/components/mds-input-tip-item/meta/types.js

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

package/dist/collection/components/mds-input-tip-item/test/mds-input-tip-item.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('mds-input-tip-item', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<mds-input-tip-item></mds-input-tip-item>');
+        const element = await page.find('mds-input-tip-item');
+        expect(element).toHaveAttribute('hydrated');
+    });
+});

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,30 @@
+const buttonVariantDictionary = [
+    'dark',
+    'error',
+    'info',
+    'light',
+    'primary',
+    'success',
+    'warning',
+];
+const buttonToneVariantDictionary = [
+    'strong',
+    'weak',
+    'ghost',
+    'quiet',
+];
+const buttonTargetDictionary = [
+    'blank',
+    'self',
+];
+const buttonSizeDictionary = [
+    'sm',
+    'md',
+    'lg',
+    'xl',
+];
+const buttonIconPositionDictionary = [
+    'left',
+    'right',
+];
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

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/file-extensions.js

@@ -0,0 +1,64 @@
+const fileExtensionsDictionary = {
+    '7z': { format: 'archive', description: 'Archivio compresso' },
+    ace: { format: 'archive', description: 'Archivio compresso' },
+    ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
+    dart: { format: 'code', description: 'Dart' },
+    db: { format: 'data', description: 'File di database' },
+    default: { format: 'attachment', description: 'Formato sconosciuto' },
+    dmg: { format: 'executable', description: 'Apple Disk Image' },
+    doc: { format: 'text', description: 'Documento Microsoft Word' },
+    docm: { format: 'text', description: 'Documento Microsoft Word' },
+    docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
+    eml: { format: 'email', description: 'E-mail di posta elettronica' },
+    eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
+    exe: { format: 'executable', description: 'File eseguibile Windows' },
+    flac: { format: 'audio', description: 'Audio non compresso' },
+    gif: { format: 'image', description: 'Immagine compressa', preview: true },
+    htm: { format: 'markup', description: 'Pagina web' },
+    heic: { format: 'image', description: 'High Efficiency Image File Format' },
+    html: { format: 'markup', description: 'Pagina web' },
+    jpe: { format: 'image', description: 'Immagine compressa', preview: true },
+    jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
+    jpg: { format: 'image', description: 'Immagine compressa', preview: true },
+    js: { format: 'code', description: 'JavaScript' },
+    json: { format: 'data', description: 'JavaScript Object Notation' },
+    jsx: { format: 'code', description: 'JavaScript' },
+    m2v: { format: 'video', description: 'Filmato SD' },
+    mp2: { format: 'audio', description: 'Audio compresso' },
+    mp3: { format: 'audio', description: 'Audio compresso' },
+    mp4: { format: 'video', description: 'Filmato HD' },
+    mp4v: { format: 'video', description: 'Filmato HD' },
+    mpeg: { format: 'video', description: 'Filmato SD' },
+    mpg4: { format: 'video', description: 'Filmato SD' },
+    mpg: { format: 'video', description: 'Filmato SD' },
+    mpga: { format: 'audio', description: 'Audio compresso' },
+    odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
+    ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
+    odt: { format: 'text', description: 'File di testo LibreOffice' },
+    pdf: { format: 'document', description: 'Documento Adobe' },
+    php: { format: 'code', description: 'Hypertext Preprocessor' },
+    png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
+    ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
+    rar: { format: 'archive', description: 'Archivio compresso' },
+    rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
+    sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
+    shtml: { format: 'markup', description: 'Pagina web' },
+    svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
+    tar: { format: 'archive', description: 'Archivio non compresso' },
+    tiff: { format: 'image', description: 'Tag Image File Format' },
+    ts: { format: 'code', description: 'TypeScript' },
+    tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
+    txt: { format: 'text', description: 'Documento di testo non formattato' },
+    wav: { format: 'audio', description: 'Audio non compresso' },
+    webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
+    xar: { format: 'archive', description: 'Archivio compresso' },
+    xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+    xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+    zip: { format: 'archive', description: 'Archivio compresso' },
+};
+const genericMimeToExt = new Map([
+    ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
+    ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],
+    ['video', ['.mv2', '.mp4', '.mp4v', '.mpeg', '.mpg4', '.mpg']],
+]);
+export { fileExtensionsDictionary, genericMimeToExt, };

package/dist/collection/dictionary/floating-ui.js

@@ -0,0 +1,19 @@
+const floatingUIPlacementDictionary = [
+    'bottom',
+    'bottom-end',
+    'bottom-start',
+    'left',
+    'left-end',
+    'left-start',
+    'right',
+    'right-end',
+    'right-start',
+    'top',
+    'top-end',
+    'top-start',
+];
+const floatingUIStrategyDictionary = [
+    'absolute',
+    'fixed',
+];
+export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };

package/dist/collection/dictionary/icon.js

@@ -0,0 +1,10 @@
+import jsonIconsDictionary from "../fixtures/icons.json";
+import jsonMggIconsDictionary from "../fixtures/iconsauce.json";
+const iconsDictionary = jsonIconsDictionary;
+const mggIconsDictionary = jsonMggIconsDictionary;
+const svgIconsDictionary = [
+    `${location.origin}/svg/mi/baseline/email.svg`,
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yMzMtODAgNjUtMjgxTDgwLTU1MGwyODgtMjUgMTEyLTI2NSAxMTIgMjY1IDI4OCAyNS0yMTggMTg5IDY1IDI4MS0yNDctMTQ5TDIzMy04MFoiLz48L3N2Zz4=',
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>',
+];
+export { iconsDictionary, mggIconsDictionary, svgIconsDictionary, };

package/dist/collection/dictionary/input.js

@@ -0,0 +1,37 @@
+const inputTextTypeDictionary = [
+    'date',
+    'email',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'textarea',
+    'time',
+    'url',
+];
+const inputFieldTypeDictionary = [
+    'date',
+    'email',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'textarea',
+    'time',
+    'url',
+    'cc',
+    'cf',
+    'isbn',
+    'piva',
+];
+const inputControlsLayoutDictionary = [
+    'horizontal',
+    'vertical',
+];
+const inputControlsIconDictionary = [
+    'arrow',
+    'arithmetic',
+];
+export { inputControlsIconDictionary, inputControlsLayoutDictionary, inputTextTypeDictionary, inputFieldTypeDictionary, };

package/dist/collection/dictionary/loading.js

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

package/dist/collection/dictionary/text.js

@@ -0,0 +1,6 @@
+const truncateDictionary = [
+    'all',
+    'none',
+    'word',
+];
+export { truncateDictionary, };