@maggioli-design-system/mds-input-tip 1.1.3 → 1.2.2

package/src/common/keyboard-manager.ts

@@ -36,14 +36,14 @@ export class KeyboardManager {
 
   attachEscapeBehavior = (callback: () => void): void => {
     this.escapeCallback = callback
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }
 
   detachEscapeBehavior = (): void => {
     this.escapeCallback = () => { return }
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }

package/src/common/locale.ts

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars'
+import { render } from 'mustache'
 
 type LocaleConfig = {
   el?: Record<string, string | string[]>
@@ -12,6 +12,7 @@ export class Locale {
   language: string
   config: LocaleConfig
   closestElement:HTMLElement
+  element: HTMLElement
 
   constructor (configData?: LocaleConfig) {
     if (configData) {
@@ -23,8 +24,9 @@ export class Locale {
     this.config = configData
   }
 
-  lang = (element: HTMLElement): string => {
-    this.closestElement = element.closest('[lang]') as HTMLElement
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
 
     if (this.closestElement) {
       if (this.closestElement.lang) {
@@ -37,11 +39,24 @@ export class Locale {
     return this.language
   }
 
+  update = (doc?: Document | ShadowRoot): void => {
+    const context = doc ?? this.element.shadowRoot
+    context && context.querySelectorAll('*').forEach(el => {
+      if (el.tagName.toLowerCase().startsWith('mds-')) {
+        // eslint-disable-next-line no-restricted-syntax
+        if (el && 'updateLang' in el) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (el as any).updateLang()
+        }
+      }
+    })
+  }
+
   private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
-    
+
     if (Array.isArray(languagePhrase)) {
       phrases.push(languagePhrase[0])
       phrases.push(languagePhrase[1])
@@ -63,8 +78,7 @@ export class Locale {
       }
     }
 
-    const template = Handlebars.compile(translatePhrase)
-    return template(context)
+    return render(translatePhrase, context)
   }
 
   get = (tag: string | string[], context?: Record<string, string | number>): string => {

package/src/common/unit.ts

@@ -23,7 +23,7 @@ const cssSizeToNumber = (size: string, defaultValue = 0): number => {
   if (size.includes('em')) {
     return Number(size.replace('em', '')) * 16
   }
-  
+
   return defaultValue
 }
 

package/src/components/mds-input-tip/.gitlab-ci.yml

@@ -2,24 +2,19 @@
   variables:
     COMPONENT: mds-input-tip
 
-# ISOLATE
-input-tip-isolate:
-  extends: [.base-isolate, .base-input-tip]
-  dependencies: [base-stencil-build]
-
 # TEST
 input-tip-publish-test:
   extends: [.base-stencil-publish-test, .base-input-tip]
-  dependencies: [base-stencil-build, input-tip-isolate]
+  dependencies: [base-stencil-build, base-isolate]
 
 # PUBLISH
 input-tip-publish:
   extends: [.base-stencil-publish, .base-input-tip]
-  dependencies: [base-stencil-build, input-tip-isolate]
-  needs: [base-stencil-build, input-tip-isolate, input-tip-publish-test]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-tip-publish-test]
 
 # INSTALL TEST
 input-tip-install-test:
   extends: [.base-stencil-install-test, .base-input-tip]
-  dependencies: [base-stencil-build, input-tip-isolate]
-  needs: [base-stencil-build, input-tip-isolate, input-tip-publish]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-tip-publish]

package/src/components/mds-input-tip/mds-input-tip.css

@@ -9,14 +9,14 @@
     ease-out-expo
     gap-100
     left-100
-    right-100
-    transition-cosmetic;
+    right-100;
 
   display: flex;
   justify-content: flex-end;
   pointer-events: none;
   position: absolute;
   transform: var(--mds-input-tip-active-translate);
+  transition-property: transform;
 }
 
 :host(:empty) {

package/src/dictionary/button.ts

@@ -4,6 +4,7 @@ const buttonVariantDictionary = [
   'info',
   'light',
   'primary',
+  'secondary',
   'success',
   'warning',
 ]

package/src/dictionary/file-extensions.ts

@@ -1,72 +1,133 @@
+import { FileFormat } from '@type/variant-file-format'
+
 interface FileExtenstion {
   [key: string]: ExtensionInfo
 }
 
 interface ExtensionInfo {
   preview?: boolean
-  format: string
+  format: FileFormat
   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' },
+  '7z': { format: 'archive', description: 'compressedArchive' },
+  ace: { format: 'archive', description: 'compressedArchive' },
+  ai: { format: 'vector', description: 'fileAI' },
+  dart: { format: 'code', description: 'dart' },
+  db: { format: 'data', description: 'fileDB' },
+  default: { format: 'attachment', description: 'unknown' },
+  dmg: { format: 'executable', description: 'appleDiskImage' },
+  doc: { format: 'text', description: 'documentMS' },
+  docm: { format: 'text', description: 'documentMS' },
+  docx: { format: 'text', description: 'compressedDocumentMS' },
+  eml: { format: 'email', description: 'email' },
+  eps: { format: 'vector', description: 'fileEPS' },
+  exe: { format: 'executable', description: 'fileEXE' },
+  flac: { format: 'audio', description: 'uncompressedAudio' },
+  gif: { format: 'image', description: 'compressedImage', preview: true },
+  htm: { format: 'markup', description: 'documentWeb' },
+  heic: { format: 'image', description: 'imageHEFF' },
+  html: { format: 'markup', description: 'documentWeb' },
+  jpe: { format: 'image', description: 'compressedImage', preview: true },
+  jpeg: { format: 'image', description: 'compressedImage', preview: true },
+  jpg: { format: 'image', description: 'compressedImage', preview: true },
+  js: { format: 'code', description: 'fileJS' },
+  json: { format: 'data', description: 'fileJSON' },
+  jsx: { format: 'code', description: 'fileJS' },
+  m2v: { format: 'video', description: 'videoSD' },
+  mp2: { format: 'audio', description: 'compressedAudio' },
+  mp3: { format: 'audio', description: 'compressedAudio' },
+  mp4: { format: 'video', description: 'videoHD' },
+  mp4v: { format: 'video', description: 'videoHD' },
+  mpeg: { format: 'video', description: 'videoSD' },
+  mpg4: { format: 'video', description: 'videoSD' },
+  mpg: { format: 'video', description: 'videoSD' },
+  mpga: { format: 'audio', description: 'compressedAudio' },
+  odp: { format: 'slide', description: 'slideLO' },
+  ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
+  odt: { format: 'text', description: 'documentLO' },
+  pdf: { format: 'document', description: 'documentAdobe' },
+  php: { format: 'code', description: 'filePHP' },
+  png: { format: 'image', description: 'imagePNG', preview: true },
+  ppt: { format: 'slide', description: 'slidePowerPoint' },
+  rar: { format: 'archive', description: 'compressedArchive' },
+  rtf: { format: 'text', description: 'documentRTF' },
+  sass: { format: 'code', description: 'fileSASS' },
+  shtml: { format: 'markup', description: 'documentWeb' },
+  svg: { format: 'vector', description: 'imageSVG', preview: true },
+  tar: { format: 'archive', description: 'uncompressedArchive' },
+  tiff: { format: 'image', description: 'imageTIFF' },
+  ts: { format: 'code', description: 'fileTS' },
+  tsx: { format: 'code', description: 'fileTSX' },
+  txt: { format: 'text', description: 'documentTXT' },
+  wav: { format: 'audio', description: 'uncompressedAudio' },
+  webp: { format: 'image', description: 'imageWEBP', preview: true },
+  xar: { format: 'archive', description: 'compressedArchive' },
+  xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
+  xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+  zip: { format: 'archive', description: 'compressedArchive' },
 }
 
+// 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']],

package/src/dictionary/text.ts

@@ -1,3 +1,65 @@
+const typographyTagDictionary = [
+  'abbr',
+  'address',
+  'article',
+  'b',
+  'bdo',
+  'blockquote',
+  'cite',
+  'code',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'figcaption',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'i',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'mark',
+  'ol',
+  'p',
+  'pre',
+  'q',
+  'rb',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'time',
+  'u',
+  'ul',
+  'var',
+]
+
+const typographyHeadingTagDictionary = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]
+
+
 const truncateDictionary = [
   'all',
   'none',
@@ -6,4 +68,6 @@ const truncateDictionary = [
 
 export {
   truncateDictionary,
+  typographyHeadingTagDictionary,
+  typographyTagDictionary,
 }

package/src/dictionary/variant.ts

@@ -77,6 +77,16 @@ const toneVariantDictionary = [
   'quiet',
 ]
 
+const themeVariantChipDictionary = [
+  'primary',
+  'secondary',
+  'dark',
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
 const toneActionVariantDictionary = [
   'primary',
   'secondary',
@@ -110,6 +120,7 @@ export {
   themeLuminanceVariantDictionary,
   themeStatusVariantDictionary,
   themeVariantDictionary,
+  themeVariantChipDictionary,
   toneActionVariantDictionary,
   toneMinimalVariantDictionary,
   toneSimpleVariantDictionary,

package/src/fixtures/icons.json

@@ -33,8 +33,17 @@
     "mgg/address-book-off",
     "mgg/address-book-on",
     "mgg/adv-denied",
-    "mgg/ai",
+    "mgg/ai-brain",
+    "mgg/ai-brain-outline",
+    "mgg/ai-human",
+    "mgg/ai-message",
+    "mgg/ai-outline",
+    "mgg/ai-status-completed",
+    "mgg/ai-status-error",
+    "mgg/ai-status-processing",
+    "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
@@ -46,6 +55,7 @@
     "mgg/assignments-rejected",
     "mgg/assignments-sorted",
     "mgg/auto-awesome-motion",
+    "mgg/back-to-document",
     "mgg/balance",
     "mgg/bill",
     "mgg/box-multiple",
@@ -86,6 +96,7 @@
     "mgg/document-rename",
     "mgg/download-csv",
     "mgg/download-json",
+    "mgg/edit-article",
     "mgg/electronic-document",
     "mgg/email-assigned",
     "mgg/email-open-blocked",
@@ -101,6 +112,8 @@
     "mgg/factory",
     "mgg/farmer",
     "mgg/field",
+    "mgg/file-certificate",
+    "mgg/file-clock",
     "mgg/file-download",
     "mgg/file-folder-tree",
     "mgg/file-folder-tree-open",
@@ -122,6 +135,7 @@
     "mgg/finance-euro-cashback",
     "mgg/fit-horizontal",
     "mgg/fit-vertical",
+    "mgg/fontawesome-torii-gate",
     "mgg/forwarded-with-a-single-sending",
     "mgg/fullscreen-on-alt",
     "mgg/google-book-closed",
@@ -131,6 +145,7 @@
     "mgg/google-book-opening",
     "mgg/google-book-opening-outline",
     "mgg/google-check-small",
+    "mgg/google-drag-pan",
     "mgg/google-experiment",
     "mgg/google-face-retouching-off",
     "mgg/google-hub",
@@ -167,6 +182,10 @@
     "mgg/logo-ilibro",
     "mgg/map-marker-settings",
     "mgg/masks-office",
+    "mgg/mdi-binoculars",
+    "mgg/mdi-graph-outline",
+    "mgg/mdi-microscope",
+    "mgg/mdi-telescope",
     "mgg/military-draft",
     "mgg/money-bag-settings",
     "mgg/money-on-hand",
@@ -232,6 +251,7 @@
     "mgg/settings-attachment",
     "mgg/sign-shop",
     "mgg/square-viewfinder",
+    "mgg/stacked-documents",
     "mgg/stamp",
     "mgg/status-progress-a-quarter",
     "mgg/status-progress-complete",
@@ -241,6 +261,9 @@
     "mgg/subtractive-permission",
     "mgg/tea-light",
     "mgg/terminal",
+    "mgg/tie",
+    "mgg/to-single-document",
+    "mgg/to-stacked-documents",
     "mgg/todo",
     "mgg/todo-action-businessman-view",
     "mgg/todo-action-certificate",
@@ -278,8 +301,10 @@
     "mgg/user-location",
     "mgg/user-location-off",
     "mgg/user-signed-out",
+    "mgg/user-substitution",
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
+    "mgg/vote",
     "mgg/warning-superscript",
     "mgg/web-app-ansc",
     "mgg/work-book",
@@ -300,6 +325,7 @@
     "mi/baseline/book",
     "mi/baseline/border-all",
     "mi/baseline/broken-image",
+    "mi/baseline/call",
     "mi/baseline/cancel",
     "mi/baseline/category",
     "mi/baseline/check-box",
@@ -309,7 +335,10 @@
     "mi/baseline/contrast",
     "mi/baseline/css",
     "mi/baseline/dark-mode",
+    "mi/baseline/delete",
     "mi/baseline/description",
+    "mi/baseline/directions-run",
+    "mi/baseline/directions-walk",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
     "mi/baseline/eco",
@@ -318,7 +347,6 @@
     "mi/baseline/explore",
     "mi/baseline/file-download-done",
     "mi/baseline/folder-zip",
-    "mi/baseline/groups",
     "mi/baseline/horizontal-rule",
     "mi/baseline/indeterminate-check-box",
     "mi/baseline/info",
@@ -339,11 +367,18 @@
     "mi/baseline/remove",
     "mi/baseline/remove-circle",
     "mi/baseline/route",
+    "mi/baseline/send",
     "mi/baseline/settings",
+    "mi/baseline/sports",
+    "mi/baseline/sports-soccer",
+    "mi/baseline/stadium",
     "mi/baseline/terminal",
     "mi/baseline/timer",
     "mi/baseline/tv",
+    "mi/baseline/unfold-more",
     "mi/baseline/videocam",
+    "mi/baseline/visibility",
+    "mi/baseline/visibility-off",
     "mi/baseline/warning",
     "mi/baseline/warning-amber",
     "mi/baseline/web",
@@ -355,7 +390,6 @@
     "mi/outline/schedule",
     "mi/round/arrow-circle-down",
     "mi/round/email",
-    "mi/round/groups",
     "mi/round/menu",
     "mi/round/more-vert",
     "mi/round/person"