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

package/src/components/mds-input-tip-item/mds-input-tip-item.tsx

@@ -0,0 +1,66 @@
+import { Component, Element, Host, h, Prop } from '@stencil/core'
+import { InputTipItemVariantType } from '@component/mds-input-tip-item/meta/types'
+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'
+
+@Component({
+  tag: 'mds-input-tip-item',
+  styleUrl: 'mds-input-tip-item.css',
+  shadow: true,
+})
+export class MdsInputTipItem {
+  @Element() private element: HTMLMdsPrefThemeElement
+
+  private t:Locale = new Locale({
+    en: localeEn,
+    it: localeIt,
+  })
+
+  componentWillRender (): void {
+    this.t.lang(this.element)
+  }
+
+  /**
+   * Specifies the variant of the element
+   */
+  @Prop({ reflect: true }) readonly variant?: InputTipItemVariantType = 'required'
+
+  /**
+   * Specifies if the element is expanded
+   */
+  @Prop({ reflect: true }) readonly expanded?: boolean = true
+
+  render () {
+    return (
+      <Host>
+        <div class="content">
+          { this.variant === 'text' &&
+            <mds-text typography="option" truncate="word">
+              <span class="text"><slot/></span>
+            </mds-text>
+          }
+          { this.variant === 'readonly' &&
+            <mds-text typography="option" truncate="word">
+              <span class="text">{this.variant && this.t.get(this.variant.toString())}</span>
+            </mds-text>
+          }
+          { this.variant === 'disabled' &&
+            <mds-text typography="option" truncate="word">
+              <span class="text">{ this.variant && this.t.get(this.variant.toString()) }</span>
+            </mds-text>
+          }
+          { this.variant === 'required' &&
+            <mds-text typography="option" truncate="word">
+              <span class="text">{this.variant && this.t.get(this.variant.toString())}</span>
+            </mds-text>
+          }
+          { this.variant === 'required-success' &&
+            <span class="icon svg" innerHTML={miBaselineDone}></span>
+          }
+        </div>
+      </Host>
+    )
+  }
+}

package/src/components/mds-input-tip-item/meta/locale.en.json

@@ -0,0 +1,5 @@
+{
+  "required": "Required",
+  "disabled": "Disabled",
+  "readonly": "Read only"
+}

package/src/components/mds-input-tip-item/meta/locale.it.json

@@ -0,0 +1,5 @@
+{
+  "required": "Obbligatorio",
+  "disabled": "Disattivato",
+  "readonly": "Sola lettura"
+}

package/src/components/mds-input-tip-item/meta/types.ts

@@ -0,0 +1,6 @@
+export type InputTipItemVariantType =
+  | 'required'
+  | 'required-success'
+  | 'disabled'
+  | 'readonly'
+  | 'text'

package/src/components/mds-input-tip-item/readme.md

@@ -0,0 +1,18 @@
+# mds-input-tip-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                          | Type                                                                                  | Default      |
+| ---------- | ---------- | ------------------------------------ | ------------------------------------------------------------------------------------- | ------------ |
+| `expanded` | `expanded` | Specifies if the element is expanded | `boolean \| undefined`                                                                | `true`       |
+| `variant`  | `variant`  | Specifies the variant of the element | `"disabled" \| "readonly" \| "required" \| "required-success" \| "text" \| undefined` | `'required'` |
+
+
+----------------------------------------------
+
+Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)

package/src/components/mds-input-tip-item/test/mds-input-tip-item.e2e.ts

@@ -0,0 +1,11 @@
+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/src/components.d.ts

@@ -0,0 +1,55 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { InputTipItemVariantType } from "@component/mds-input-tip-item/meta/types";
+export { InputTipItemVariantType } from "@component/mds-input-tip-item/meta/types";
+export namespace Components {
+    interface MdsInputTipItem {
+        /**
+          * Specifies if the element is expanded
+         */
+        "expanded"?: boolean;
+        /**
+          * Specifies the variant of the element
+         */
+        "variant"?: InputTipItemVariantType;
+    }
+}
+declare global {
+    interface HTMLMdsInputTipItemElement extends Components.MdsInputTipItem, HTMLStencilElement {
+    }
+    var HTMLMdsInputTipItemElement: {
+        prototype: HTMLMdsInputTipItemElement;
+        new (): HTMLMdsInputTipItemElement;
+    };
+    interface HTMLElementTagNameMap {
+        "mds-input-tip-item": HTMLMdsInputTipItemElement;
+    }
+}
+declare namespace LocalJSX {
+    interface MdsInputTipItem {
+        /**
+          * Specifies if the element is expanded
+         */
+        "expanded"?: boolean;
+        /**
+          * Specifies the variant of the element
+         */
+        "variant"?: InputTipItemVariantType;
+    }
+    interface IntrinsicElements {
+        "mds-input-tip-item": MdsInputTipItem;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "mds-input-tip-item": LocalJSX.MdsInputTipItem & JSXBase.HTMLAttributes<HTMLMdsInputTipItemElement>;
+        }
+    }
+}

package/src/dictionary/autocomplete.ts

@@ -0,0 +1,62 @@
+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/src/dictionary/button.ts

@@ -0,0 +1,41 @@
+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/src/dictionary/color.ts

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

package/src/dictionary/file-extensions.ts

@@ -0,0 +1,81 @@
+interface FileExtenstion {
+  [key: string]: ExtensionInfo
+}
+
+interface ExtensionInfo {
+  preview?: boolean
+  format: string
+  description: string
+}
+
+const fileExtensionsDictionary: FileExtenstion = {
+  '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: Map<string, string[]> = 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 {
+  FileExtenstion,
+  ExtensionInfo,
+  fileExtensionsDictionary,
+  genericMimeToExt,
+}

package/src/dictionary/floating-ui.ts

@@ -0,0 +1,25 @@
+
+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/src/dictionary/icon.ts

@@ -0,0 +1,15 @@
+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/src/dictionary/input.ts

@@ -0,0 +1,48 @@
+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/src/dictionary/loading.ts

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

package/src/dictionary/text.ts

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

package/src/dictionary/typography.ts

@@ -0,0 +1,88 @@
+const typographyDictionary = [
+  'action',
+  'caption',
+  'snippet',
+  'detail',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hack',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+]
+
+const typographyVariationsDictionary = [
+  'title',
+  'info',
+  'read',
+  'code',
+]
+
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+]
+
+const typographyMonoDictionary = [
+  'snippet',
+  'hack',
+]
+
+const typographyTitleDictionary = [
+  'action',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]
+
+const typographyInfoDictionary = [
+  'caption',
+  'detail',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+]
+
+const typographyReadDictionary = [
+  'caption',
+  'detail',
+  'paragraph',
+]
+
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+]
+
+const typographyTooltipDictionary = [
+  'caption',
+  'detail',
+  'tip',
+]
+
+const typographyInputDictionary = [
+  'snippet',
+  'detail',
+]
+
+export {
+  typographyDictionary,
+  typographyInfoDictionary,
+  typographyInputDictionary,
+  typographyMonoDictionary,
+  typographyReadDictionary,
+  typographyReadingVariationsDictionary,
+  typographySmallerDictionary,
+  typographyTitleDictionary,
+  typographyTooltipDictionary,
+  typographyVariationsDictionary,
+}