@maggioli-design-system/mds-table-row 4.5.3 → 4.6.1

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-04-18T15:04:37",
+  "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": [
     {
@@ -187,7 +187,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"
     },
@@ -236,26 +236,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": "",
@@ -366,11 +346,26 @@
       "docstring": "",
       "path": "src/components/mds-input-switch/meta/event-detail.ts"
     },
+    "src/components/mds-input-tip/meta/types.ts::InputTipPositionType": {
+      "declaration": "export type InputTipPositionType =\n  | 'top'\n  | 'bottom'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip/meta/types.ts"
+    },
+    "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType": {
+      "declaration": "export type InputTipItemVariantType =\n  | 'required'\n  | 'required-success'\n  | 'disabled'\n  | 'readonly'\n  | 'text'",
+      "docstring": "",
+      "path": "src/components/mds-input-tip-item/meta/types.ts"
+    },
     "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
       "declaration": "type AttachmentSort =\n  'status' |\n  'date'",
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-input-upload/meta/types.ts::FileError": {
+      "declaration": "interface FileError {\n  filename: string,\n  errorMessage: string,\n}",
+      "docstring": "",
+      "path": "src/components/mds-input-upload/meta/types.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -401,6 +396,46 @@
       "docstring": "",
       "path": "src/components/mds-paginator/meta/event-detail.ts"
     },
+    "src/components/mds-pref-animation/meta/types.ts::AnimationModeType": {
+      "declaration": "export type AnimationModeType =\n  | 'reduce'\n  | 'no-preference'\n  | 'system'",
+      "docstring": "",
+      "path": "src/components/mds-pref-animation/meta/types.ts"
+    },
+    "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/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": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
+    "src/components/mds-pref-theme/meta/types.ts::ThemeTransitionType": {
+      "declaration": "export type ThemeTransitionType =\n  | 'none'\n  | 'flash'\n  | 'smooth'",
+      "docstring": "",
+      "path": "src/components/mds-pref-theme/meta/types.ts"
+    },
     "src/components/mds-price-table-features-cell/meta/types.ts::PriceTableFeaturesCellType": {
       "declaration": "export type PriceTableFeaturesCellType =\n  | 'custom'\n  | 'label'\n  | 'supported'\n  | 'text'\n  | 'unsupported'",
       "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-table-row",
-  "version": "4.5.3",
+  "version": "4.6.1",
   "description": "mds-table-row 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",
@@ -23,9 +23,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "4.5.1",
-    "@maggioli-design-system/styles": "14.3.2",
-    "@stencil/core": "4.10.0"
+    "@maggioli-design-system/mds-table-cell": "4.6.1",
+    "@maggioli-design-system/styles": "15.3.1",
+    "@stencil/core": "4.21.0"
   },
   "license": "MIT",
   "author": {

package/src/common/locale.ts

@@ -0,0 +1,70 @@
+import Handlebars from 'handlebars'
+
+type LocaleConfig = {
+  el?: Record<string, string | string[]>
+  en: Record<string, string | string[]>
+  es?: Record<string, string | string[]>
+  it?: Record<string, string | string[]>
+}
+
+export class Locale {
+  rollbackLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+  closestElement:HTMLElement
+
+  constructor (configData: LocaleConfig) {
+    this.config = configData
+  }
+
+  lang = (element: HTMLElement): void => {
+    this.closestElement = element.closest('[lang]') as HTMLElement
+
+    
+    if (this.closestElement) {
+      if (this.closestElement.lang) {
+        this.language = this.closestElement.lang
+        return
+      }
+    }
+
+    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[], 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-table-row/css/mds-table-row-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-table-row/mds-table-row.css

@@ -1,10 +1,24 @@
 @tailwind utilities;
 
 :host {
+
+  --mds-table-row-color-hover: var(--mds-table-color-hover, theme('colors.tone-neutral-02'));
+  --mds-table-row-color: var(--mds-table-color, theme('colors.tone-neutral-03'));
+
+  @apply
+    duration-200
+    ease-out;
+
+  color: var(--mds-table-row-color);
   display: table-row;
+  transition-property: color;
+
 }
 
 :host( [interactive]:hover ) {
 
   --mds-table-cell-background: var(--mds-table-cell-background-hover, theme('colors.tone-neutral'));
+  --mds-table-row-color: var(--mds-table-row-color-hover);
 }
+
+@import './css/mds-table-row-pref-animation.css';

package/src/fixtures/icons.json

@@ -34,6 +34,7 @@
     "mgg/address-book-on",
     "mgg/adv-denied",
     "mgg/alerts-pagopa",
+    "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
     "mgg/assignments-accept-rejection",
@@ -61,6 +62,9 @@
     "mgg/citizenship",
     "mgg/city-bin",
     "mgg/classic-permission",
+    "mgg/consumption-high",
+    "mgg/consumption-low",
+    "mgg/consumption-medium",
     "mgg/copy-paste",
     "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -113,6 +117,8 @@
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-experiment",
+    "mgg/google-face-retouching-off",
+    "mgg/google-hub",
     "mgg/google-keyboard-double-arrow-down",
     "mgg/google-keyboard-double-arrow-up",
     "mgg/google-place-item",
@@ -159,6 +165,7 @@
     "mgg/national-document-off",
     "mgg/not-instrumental-d-buildings",
     "mgg/not-sent-yet",
+    "mgg/office-off",
     "mgg/order-return-down-left-to-right",
     "mgg/order-return-down-left-to-up",
     "mgg/order-return-down-right-to-left",
@@ -197,6 +204,7 @@
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
+    "mgg/robot",
     "mgg/roles-permission",
     "mgg/rubber-stamp",
     "mgg/rurale",
@@ -256,6 +264,7 @@
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
     "mgg/warning-superscript",
+    "mgg/web-app-ansc",
     "mgg/work-book",
     "mi/baseline/account-balance",
     "mi/baseline/account-balance-wallet",
@@ -263,21 +272,26 @@
     "mi/baseline/add-circle",
     "mi/baseline/adobe",
     "mi/baseline/agriculture",
+    "mi/baseline/animation",
     "mi/baseline/arrow-back",
     "mi/baseline/arrow-forward",
     "mi/baseline/attach-file",
     "mi/baseline/attachment",
     "mi/baseline/audiotrack",
+    "mi/baseline/auto-awesome",
     "mi/baseline/badge",
     "mi/baseline/book",
     "mi/baseline/border-all",
+    "mi/baseline/broken-image",
     "mi/baseline/cancel",
     "mi/baseline/category",
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
     "mi/baseline/close",
+    "mi/baseline/contrast",
     "mi/baseline/css",
+    "mi/baseline/dark-mode",
     "mi/baseline/description",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
@@ -294,6 +308,7 @@
     "mi/baseline/insert-drive-file",
     "mi/baseline/keyboard-arrow-down",
     "mi/baseline/keyboard-arrow-up",
+    "mi/baseline/light-mode",
     "mi/baseline/local-activity",
     "mi/baseline/lock-open",
     "mi/baseline/login",
@@ -316,6 +331,9 @@
     "mi/baseline/warning-amber",
     "mi/baseline/web",
     "mi/baseline/wysiwyg",
+    "mi/outline/auto-awesome",
+    "mi/outline/circle",
+    "mi/outline/dark-mode",
     "mi/outline/help-outline",
     "mi/outline/schedule",
     "mi/round/arrow-circle-down",

package/src/fixtures/iconsauce.json

@@ -22,6 +22,7 @@
     "mgg/address-book-on",
     "mgg/adv-denied",
     "mgg/alerts-pagopa",
+    "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
     "mgg/assignments-accept-rejection",
@@ -49,6 +50,9 @@
     "mgg/citizenship",
     "mgg/city-bin",
     "mgg/classic-permission",
+    "mgg/consumption-high",
+    "mgg/consumption-low",
+    "mgg/consumption-medium",
     "mgg/copy-paste",
     "mgg/d-instrumental-buildings",
     "mgg/data-analytics-alt",
@@ -101,6 +105,8 @@
     "mgg/fullscreen-on-alt",
     "mgg/google-check-small",
     "mgg/google-experiment",
+    "mgg/google-face-retouching-off",
+    "mgg/google-hub",
     "mgg/google-keyboard-double-arrow-down",
     "mgg/google-keyboard-double-arrow-up",
     "mgg/google-place-item",
@@ -147,6 +153,7 @@
     "mgg/national-document",
     "mgg/not-instrumental-d-buildings",
     "mgg/not-sent-yet",
+    "mgg/office-off",
     "mgg/order-return-down-left-to-right",
     "mgg/order-return-down-left-to-up",
     "mgg/order-return-down-right-to-left",
@@ -185,6 +192,7 @@
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
+    "mgg/robot",
     "mgg/roles-permission",
     "mgg/rubber-stamp",
     "mgg/rurale",
@@ -244,5 +252,6 @@
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
     "mgg/warning-superscript",
+    "mgg/web-app-ansc",
     "mgg/work-book"
 ]

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/language.ts

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

package/src/type/preference.ts

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