@maggioli-design-system/mds-input-tip 1.0.0 → 1.1.1

package/dist/types/common/locale.d.ts

@@ -1,14 +1,17 @@
 type LocaleConfig = {
-    it?: Record<string, string>;
-    en?: Record<string, string>;
-    gr?: Record<string, string>;
+    el?: Record<string, string | string[]>;
+    en: Record<string, string | string[]>;
+    es?: Record<string, string | string[]>;
+    it?: Record<string, string | string[]>;
 };
 export declare class Locale {
-    defaultLanguage: string;
+    rollbackLanguage: string;
     language: string;
     config: LocaleConfig;
+    closestElement: HTMLElement;
     constructor(configData: LocaleConfig);
     lang: (element: HTMLElement) => void;
-    get: (tag: string) => string;
+    private pluralize;
+    get: (tag: string | string[], context?: Record<string, string | number>) => string;
 }
 export {};

package/dist/types/components/mds-input-tip/mds-input-tip.d.ts

@@ -1,7 +1,7 @@
 import { InputTipPositionType } from './meta/types';
 export declare class MdsInputTip {
     /**
-     * Specifies the position of the element relative to its container
+     * Specifies if the component is active and shows expanded children or not
      */
     readonly active?: boolean;
     /**

package/dist/types/components/mds-input-tip/meta/dictionary.d.ts

@@ -0,0 +1,2 @@
+declare const inputTipPositionDictionary: string[];
+export { inputTipPositionDictionary, };

package/dist/types/components/mds-input-tip/test/mds-input-tip.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    argTypes: {
+        active: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        position: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ export { InputTipPositionType } from "./components/mds-input-tip/meta/types";
 export namespace Components {
     interface MdsInputTip {
         /**
-          * Specifies the position of the element relative to its container
+          * Specifies if the component is active and shows expanded children or not
          */
         "active"?: boolean;
         /**
@@ -33,7 +33,7 @@ declare global {
 declare namespace LocalJSX {
     interface MdsInputTip {
         /**
-          * Specifies the position of the element relative to its container
+          * Specifies if the component is active and shows expanded children or not
          */
         "active"?: boolean;
         /**

package/dist/types/stencil-public-runtime.d.ts

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/dist/types/type/language.d.ts

@@ -0,0 +1 @@
+export type LanguageType = 'auto' | `${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`;

package/dist/types/type/preference.d.ts

@@ -0,0 +1,2 @@
+export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme' | 'language';
+export type ConsumptionModeType = 'high' | 'medium' | 'low';

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-08-23T14:24:28",
+  "timestamp": "2024-09-13T08:12:14",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "components": [
     {
@@ -26,7 +26,7 @@
           "mutable": false,
           "attr": "active",
           "reflectToAttr": true,
-          "docs": "Specifies the position of the element relative to its container",
+          "docs": "Specifies if the component is active and shows expanded children or not",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -220,7 +220,7 @@
       "path": "src/components/mds-chip/meta/interface.ts"
     },
     "src/components/mds-dropdown/meta/types.ts::DropdownInteractionType": {
-      "declaration": "export type DropdownInteractionType =\n  | 'click'\n  | 'mouseover'",
+      "declaration": "export type DropdownInteractionType =\n  | 'click'\n  | 'none'\n  | 'mouseover'",
       "docstring": "",
       "path": "src/components/mds-dropdown/meta/types.ts"
     },
@@ -269,26 +269,6 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-form/meta/types.ts::CharacterSetType": {
-      "declaration": "export type CharacterSetType =\n  | '8859-1'\n  | 'ansi'\n  | 'ascii'\n  | 'utf-8'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormAutocompleteType": {
-      "declaration": "export type FormAutocompleteType =\n  | 'off'\n  | 'on'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::EnctypeType": {
-      "declaration": "export type EnctypeType =\n  | 'application/x-www-form-urlencoded'\n  | 'multipart/form-data'\n  | 'text/plain'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormMethodType": {
-      "declaration": "export type FormMethodType =\n  | 'get'\n  | 'post'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
     "src/components/mds-header-bar/meta/types.ts::MenuType": {
       "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
@@ -454,16 +434,31 @@
       "docstring": "",
       "path": "src/components/mds-pref-animation/meta/types.ts"
     },
-    "src/components/mds-pref-consumption/meta/types.ts::ConsumptionModeType": {
+    "src/event-detail/preference.ts::MdsPrefChangeEventDetail": {
+      "declaration": "export interface MdsPrefChangeEventDetail {\n  preference: UIPreferenceType\n}",
+      "docstring": "",
+      "path": "src/event-detail/preference.ts"
+    },
+    "src/type/preference.ts::ConsumptionModeType": {
       "declaration": "export type ConsumptionModeType =\n  | 'high'\n  | 'medium'\n  | 'low'",
       "docstring": "",
-      "path": "src/components/mds-pref-consumption/meta/types.ts"
+      "path": "src/type/preference.ts"
     },
     "src/components/mds-pref-contrast/meta/types.ts::ContrastModeType": {
       "declaration": "export type ContrastModeType =\n  | 'more'\n  | 'no-preference'\n  | 'system'",
       "docstring": "",
       "path": "src/components/mds-pref-contrast/meta/types.ts"
     },
+    "src/type/language.ts::LanguageType": {
+      "declaration": "export type LanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
+      "docstring": "",
+      "path": "src/type/language.ts"
+    },
+    "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "docstring": "",
+      "path": "src/event-detail/language.ts"
+    },
     "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
       "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
       "docstring": "",

package/loader/cdn.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1,2 @@
-
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,3 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm-es5/loader.js';
+export * from '../dist/esm-es5/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-tip",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "mds-input-tip is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,36 +24,36 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-input-tip-item": "1.0.0",
-    "@maggioli-design-system/styles": "14.3.2",
-    "@stencil/core": "4.10.0"
-},
+    "@maggioli-design-system/mds-input-tip-item": "1.1.1",
+    "@maggioli-design-system/styles": "15.3.1",
+    "@stencil/core": "4.21.0"
+  },
   "license": "MIT",
   "author": {
     "name": "Vittorio Vittori",
     "email": "vittorio.vittori@maggioli.it",
     "url": "https://vitto.github.io/vit.to/"
-},
+  },
   "contributors": [
     {
-        "name": "Andrea Pruccoli",
-        "email": "andrea.pruccoli@maggioli.it",
-        "role": "Software Engineer"
+      "name": "Andrea Pruccoli",
+      "email": "andrea.pruccoli@maggioli.it",
+      "role": "Software Engineer"
     },
     {
-        "name": "Daniele Tardia",
-        "email": "daniele.tardia@hibo.it",
-        "role": "Senior Developer"
+      "name": "Daniele Tardia",
+      "email": "daniele.tardia@hibo.it",
+      "role": "Senior Developer"
     },
     {
-        "name": "Nicola Tamburini",
-        "email": "nicola.tamburini@maggioli.it",
-        "role": "Software Engineer"
+      "name": "Nicola Tamburini",
+      "email": "nicola.tamburini@maggioli.it",
+      "role": "Software Engineer"
     },
     {
-        "name": "Vittorio Vittori",
-        "email": "vittorio.vittori@maggioli.it",
-        "role": "Product Designer"
+      "name": "Vittorio Vittori",
+      "email": "vittorio.vittori@maggioli.it",
+      "role": "Product Designer"
     }
-]
+  ]
 }

package/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                                     | Type                             | Default |
-| ---------- | ---------- | --------------------------------------------------------------- | -------------------------------- | ------- |
-| `active`   | `active`   | Specifies the position of the element relative to its container | `boolean \| undefined`           | `false` |
-| `position` | `position` | Specifies the position of the element relative to its container | `"bottom" \| "top" \| undefined` | `'top'` |
+| Property   | Attribute  | Description                                                             | Type                             | Default |
+| ---------- | ---------- | ----------------------------------------------------------------------- | -------------------------------- | ------- |
+| `active`   | `active`   | Specifies if the component is active and shows expanded children or not | `boolean \| undefined`           | `false` |
+| `position` | `position` | Specifies the position of the element relative to its container         | `"bottom" \| "top" \| undefined` | `'top'` |
 
 
 ## Dependencies

package/src/common/locale.ts

@@ -1,31 +1,70 @@
+import Handlebars from 'handlebars'
+
 type LocaleConfig = {
-  it?: Record<string, string>
-  en?: Record<string, string>
-  gr?: Record<string, string>
+  el?: Record<string, string | string[]>
+  en: Record<string, string | string[]>
+  es?: Record<string, string | string[]>
+  it?: Record<string, string | string[]>
 }
 
 export class Locale {
-  defaultLanguage: string = 'en'
+  rollbackLanguage: string = 'en'
   language: string
   config: LocaleConfig
+  closestElement:HTMLElement
 
   constructor (configData: LocaleConfig) {
     this.config = configData
   }
 
   lang = (element: HTMLElement): void => {
-    const closestElement:HTMLElement = element.closest('[lang]') as HTMLElement
-    if (closestElement) {
-      if (closestElement.lang) {
-        this.language = closestElement.lang
+    this.closestElement = element.closest('[lang]') as HTMLElement
+
+    
+    if (this.closestElement) {
+      if (this.closestElement.lang) {
+        this.language = this.closestElement.lang
         return
       }
     }
 
-    this.language = this.defaultLanguage
+    this.language = this.rollbackLanguage
+  }
+
+  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])
+    } else {
+      phrases.push(languagePhrase)
+      phrases.push(languagePhrase)
+    }
+
+    const [ defaultPhrase ] = phrases
+    let translatePhrase: string = defaultPhrase
+
+    const keys = Object.keys(context)
+    if (keys.length > 0) {
+      const [firstKey] = keys
+      if (typeof context[firstKey] === 'number') {
+        if (context[firstKey] !== 1) {
+          translatePhrase = phrases[1]
+        }
+      }
+    }
+
+    const template = Handlebars.compile(translatePhrase)
+    return template(context)
   }
 
-  get = (tag: string): string => {
-    return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
+    return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
   }
 }

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

@@ -0,0 +1,16 @@
+@tailwind utilities;
+
+@container style(--magma-pref-animation: reduce) {
+  :host {
+    transition-duration: 0s;
+  }
+}
+
+@container style(--magma-pref-animation: system) {
+
+  @media (prefers-reduced-motion) {
+    :host {
+      transition-duration: 0s;
+    }
+  }
+}

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

@@ -19,34 +19,36 @@
   transform: var(--mds-input-tip-active-translate);
 }
 
-:host ( :empty ) {
+:host(:empty) {
   display: none;
 }
 
-:host ( [position="top"] ) {
+:host([position="top"]) {
   top: theme('spacing.100');
 }
 
-:host ( [position="bottom"] ) {
+:host([position="bottom"]) {
   bottom: theme('spacing.100');
 }
 
-:host ( [position="top"][active]:not([active="false"]) ) {
+:host([position="top"][active]:not([active="false"])) {
 
   --mds-input-tip-active-translate: translate(calc(theme('translate.100') * -1), calc(theme('translate.100') * -1));
 }
 
-:host( [position="top"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
+:host([position="top"][active]:not([active="false"])) ::slotted( mds-input-tip-item ) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-:host ( [position="bottom"][active]:not([active="false"]) ) {
+:host([position="bottom"][active]:not([active="false"])) {
 
   --mds-input-tip-active-translate: translate(calc(theme('translate.100') * -1), theme('translate.100'));
 }
 
-:host( [position="bottom"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
+:host([position="bottom"][active]:not([active="false"])) ::slotted( mds-input-tip-item ) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+@import './css/mds-input-tip-pref-animation.css';

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

@@ -9,7 +9,7 @@ import { InputTipPositionType } from './meta/types'
 export class MdsInputTip {
 
   /**
-   * Specifies the position of the element relative to its container
+   * Specifies if the component is active and shows expanded children or not
    */
   @Prop({ reflect: true }) readonly active?: boolean = false
 

package/src/components/mds-input-tip/meta/dictionary.ts

@@ -0,0 +1,8 @@
+const inputTipPositionDictionary = [
+  'top',
+  'bottom',
+]
+
+export {
+  inputTipPositionDictionary,
+}

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

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                                     | Type                             | Default |
-| ---------- | ---------- | --------------------------------------------------------------- | -------------------------------- | ------- |
-| `active`   | `active`   | Specifies the position of the element relative to its container | `boolean \| undefined`           | `false` |
-| `position` | `position` | Specifies the position of the element relative to its container | `"bottom" \| "top" \| undefined` | `'top'` |
+| Property   | Attribute  | Description                                                             | Type                             | Default |
+| ---------- | ---------- | ----------------------------------------------------------------------- | -------------------------------- | ------- |
+| `active`   | `active`   | Specifies if the component is active and shows expanded children or not | `boolean \| undefined`           | `false` |
+| `position` | `position` | Specifies the position of the element relative to its container         | `"bottom" \| "top" \| undefined` | `'top'` |
 
 
 ----------------------------------------------

package/src/components/mds-input-tip/test/mds-input-tip.stories.tsx

@@ -0,0 +1,26 @@
+import { inputTipPositionDictionary } from '../meta/dictionary'
+import { h } from '@stencil/core'
+
+export default {
+  title: 'Form / Input Tip',
+  argTypes: {
+    active: {
+      type: { name: 'boolean' },
+      description: 'Specifies if the component is active and shows expanded children or not',
+    },
+    position: {
+      description: 'Specifies the position of the element relative to its container',
+      options: inputTipPositionDictionary,
+      control: { type: 'select' },
+    },
+  },
+}
+
+const Template = args =>
+  <mds-input-tip {...args}>
+    <mds-input-tip-item variant="required"></mds-input-tip-item>
+    <mds-input-tip-item variant="disabled"></mds-input-tip-item>
+    <mds-input-tip-item variant="readonly"></mds-input-tip-item>
+  </mds-input-tip>
+
+export const Default = Template.bind({})

package/src/components.d.ts

@@ -10,7 +10,7 @@ export { InputTipPositionType } from "./components/mds-input-tip/meta/types";
 export namespace Components {
     interface MdsInputTip {
         /**
-          * Specifies the position of the element relative to its container
+          * Specifies if the component is active and shows expanded children or not
          */
         "active"?: boolean;
         /**
@@ -33,7 +33,7 @@ declare global {
 declare namespace LocalJSX {
     interface MdsInputTip {
         /**
-          * Specifies the position of the element relative to its container
+          * Specifies if the component is active and shows expanded children or not
          */
         "active"?: boolean;
         /**

package/src/fixtures/icons.json

@@ -282,6 +282,7 @@
     "mi/baseline/badge",
     "mi/baseline/book",
     "mi/baseline/border-all",
+    "mi/baseline/broken-image",
     "mi/baseline/cancel",
     "mi/baseline/category",
     "mi/baseline/check-box",