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

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

@@ -1,7 +1,7 @@
 type LocaleConfig = {
-    it?: Record<string, string>;
-    en?: Record<string, string>;
-    gr?: Record<string, string>;
+    it?: Record<string, string | string[]>;
+    en?: Record<string, string | string[]>;
+    gr?: Record<string, string | string[]>;
 };
 export declare class Locale {
     defaultLanguage: string;
@@ -9,6 +9,7 @@ export declare class Locale {
     config: LocaleConfig;
     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/preference.d.ts

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

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-08-23T14:24:28",
+  "timestamp": "2024-09-05T13:13:09",
   "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": [
@@ -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,10 +434,10 @@
       "docstring": "",
       "path": "src/components/mds-pref-animation/meta/types.ts"
     },
-    "src/components/mds-pref-consumption/meta/types.ts::ConsumptionModeType": {
+    "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'",

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.0",
   "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.0",
+    "@maggioli-design-system/styles": "15.3.0",
+    "@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,7 +1,9 @@
+import Handlebars from 'handlebars'
+
 type LocaleConfig = {
-  it?: Record<string, string>
-  en?: Record<string, string>
-  gr?: Record<string, string>
+  it?: Record<string, string | string[]>
+  en?: Record<string, string | string[]>
+  gr?: Record<string, string | string[]>
 }
 
 export class Locale {
@@ -25,7 +27,40 @@ export class Locale {
     this.language = this.defaultLanguage
   }
 
-  get = (tag: string): string => {
+  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+
+    const languagePhrase: string | string[] = this.config[this.language][tag] ?? this.config[this.defaultLanguage][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[], context?: Record<string, string | number>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
     return this.config[this.language][tag] ?? this.config[this.defaultLanguage][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",

package/src/tailwind/components.css

@@ -1,5 +1,6 @@
 @import '~@maggioli-design-system/styles/dist/tailwind/components.css';
 @tailwind components;
+@tailwind utilities;
 
 @layer components {
   .svg {
@@ -12,4 +13,74 @@
       h-full
       w-full;
   }
+
+  .contrast-area-base {
+    border-radius: inherit;
+    box-shadow: theme('boxShadow.outline-50') inset;
+    display: none;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition-behavior: allow-discrete;
+    transition-property: display opacity;
+  }
+
+  .contrast-area-50 {
+    @apply contrast-area-base;
+
+    box-shadow: theme('boxShadow.outline-50') inset;
+  }
+
+  .contrast-area {
+    @apply contrast-area-base;
+
+    box-shadow: theme('boxShadow.outline') inset;
+  }
+
+  @container style(--magma-pref-contrast: more) {
+    .contrast-area,
+    .contrast-area-50 {
+      @apply
+        block
+        opacity-100;
+
+      /* @starting-style {
+        opacity: 0;
+      } */
+    }
+  }
+
+  @container style(--magma-pref-contrast: system) {
+
+    @media (prefers-contrast: more) {
+      .contrast-area,
+      .contrast-area-50 {
+        @apply
+          block
+          opacity-100;
+
+        /* @starting-style {
+          opacity: 0;
+        } */
+      }
+    }
+  }
+
+  @container style(--magma-pref-animation: reduce) {
+    .contrast-area,
+    .contrast-area-50 {
+      @apply duration-0;
+    }
+  }
+
+  @container style(--magma-pref-animation: system) {
+    
+    @media (prefers-reduced-motion) {
+      .contrast-area,
+      .contrast-area-50 {
+        @apply duration-0;
+      }
+    }
+  }
 }

package/src/type/preference.ts

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

package/www/build/mds-input-tip.esm.js

@@ -1 +1 @@
-import{p as t,b as p}from"./p-22b86e20.js";export{s as setNonce}from"./p-22b86e20.js";(()=>{const p=import.meta.url,s={};return""!==p&&(s.resourcesUrl=new URL(".",p).href),t(s)})().then((t=>p([["p-630886b5",[[1,"mds-input-tip",{active:[516],position:[513]}]]]],t)));
+import{p as t,b as p}from"./p-96bf634c.js";export{s as setNonce}from"./p-96bf634c.js";import{g as o}from"./p-e1255160.js";(()=>{const s=import.meta.url,p={};return""!==s&&(p.resourcesUrl=new URL(".",s).href),t(p)})().then((async s=>(await o(),p([["p-14639038",[[1,"mds-input-tip",{active:[516],position:[513]}]]]],s))));

package/www/build/mds-input-tip.js

@@ -115,7 +115,7 @@ DOMTokenList
     var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
     var start = function() {
       // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-      var url = new URL('./p-e5fe0b68.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+      var url = new URL('./p-ca408384.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
       System.import(url.href);
     };