@maggioli-design-system/mds-input-select 1.0.2 → 2.0.0

package/dist/types/components.d.ts

@@ -5,7 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ThemeStatusVariantType } from "@type/variant";
 import { InputValue } from "@interface/input-value";
+export { ThemeStatusVariantType } from "@type/variant";
 export { InputValue } from "@interface/input-value";
 export namespace Components {
     interface MdsInputSelect {
@@ -17,14 +19,38 @@ export namespace Components {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * If true, the element is displayed as disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Specifies if the select should allow multiple options to be selected in the list
+         */
+        "multiple"?: boolean;
+        /**
+          * Is needed to reference the form data after the form is submitted
+         */
+        "name"?: string;
         /**
           * Specifies a short hint that describes the expected value of the element
          */
         "placeholder"?: string;
         /**
-          * Specifies the value of the element
+          * Specifies that the element must be filled out before submitting the form
+         */
+        "required"?: boolean;
+        /**
+          * When `multiple` is set to `true`, represents the number or rows in the list that should be visible
+         */
+        "size"?: number;
+        /**
+          * Specifies the value of the component
          */
         "value"?: string | number | null;
+        /**
+          * Sets the variant of the component
+         */
+        "variant"?: ThemeStatusVariantType;
     }
 }
 export interface MdsInputSelectCustomEvent<T> extends CustomEvent<T> {
@@ -63,6 +89,18 @@ declare namespace LocalJSX {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * If true, the element is displayed as disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Specifies if the select should allow multiple options to be selected in the list
+         */
+        "multiple"?: boolean;
+        /**
+          * Is needed to reference the form data after the form is submitted
+         */
+        "name"?: string;
         /**
           * Emits an InputChangeEventDetail when the value of the input element changes
          */
@@ -72,9 +110,21 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Specifies the value of the element
+          * Specifies that the element must be filled out before submitting the form
+         */
+        "required"?: boolean;
+        /**
+          * When `multiple` is set to `true`, represents the number or rows in the list that should be visible
+         */
+        "size"?: number;
+        /**
+          * Specifies the value of the component
          */
         "value"?: string | number | null;
+        /**
+          * Sets the variant of the component
+         */
+        "variant"?: ThemeStatusVariantType;
     }
     interface IntrinsicElements {
         "mds-input-select": MdsInputSelect;

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-04-18T15:04:37",
+  "timestamp": "2024-08-23T14:24:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.10.0",
@@ -12,7 +12,12 @@
       "tag": "mds-input-select",
       "readme": "# mds-input-select\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.\n",
       "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "select - The select HTML element"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -64,6 +69,80 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "disabled",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "If true, the element is displayed as disabled",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "multiple",
+          "reflectToAttr": true,
+          "docs": "Specifies if the select should allow multiple options to be selected in the list",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "Is needed to reference the form data after the form is submitted",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "placeholder",
           "type": "string | undefined",
@@ -88,6 +167,56 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "required",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "required",
+          "reflectToAttr": true,
+          "docs": "Specifies that the element must be filled out before submitting the form",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "When `multiple` is set to `true`, represents the number or rows in the list that should be visible",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "null | number | string | undefined",
@@ -99,7 +228,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "Specifies the value of the element",
+          "docs": "Specifies the value of the component",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -118,6 +247,49 @@
           ],
           "optional": true,
           "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"error\" | \"info\" | \"success\" | \"warning\" | undefined",
+          "complexType": {
+            "original": "ThemeStatusVariantType",
+            "resolved": "\"error\" | \"info\" | \"success\" | \"warning\" | undefined",
+            "references": {
+              "ThemeStatusVariantType": {
+                "location": "import",
+                "path": "@type/variant",
+                "id": "src/type/variant.ts::ThemeStatusVariantType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": true,
+          "docs": "Sets the variant of the component",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "error",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
         }
       ],
       "methods": [],
@@ -146,10 +318,26 @@
       "listeners": [],
       "styles": [],
       "slots": [],
-      "parts": [],
+      "parts": [
+        {
+          "name": "select",
+          "docs": "The select HTML element"
+        }
+      ],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "mds-input-tip",
+        "mds-input-tip-item"
+      ],
+      "dependencyGraph": {
+        "mds-input-select": [
+          "mds-input-tip",
+          "mds-input-tip-item"
+        ],
+        "mds-input-tip-item": [
+          "mds-text"
+        ]
+      }
     }
   ],
   "typeLibrary": {
@@ -453,11 +641,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": "",
@@ -488,6 +691,31 @@
       "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/components/mds-pref-consumption/meta/types.ts::ConsumptionModeType": {
+      "declaration": "export type ConsumptionModeType =\n  | 'high'\n  | 'medium'\n  | 'low'",
+      "docstring": "",
+      "path": "src/components/mds-pref-consumption/meta/types.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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-select",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "mds-input-select 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",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@maggioli-design-system/styles": "14.3.2",
+    "@maggioli-design-system/mds-input-tip": "1.0.0",
     "@stencil/core": "4.10.0",
     "clsx": "2.1.0"
   },

package/readme.md

@@ -9,12 +9,18 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property       | Attribute      | Description                                                             | Type                                    | Default     |
-| -------------- | -------------- | ----------------------------------------------------------------------- | --------------------------------------- | ----------- |
-| `autoFocus`    | `auto-focus`   | Specifies a short hint that describes the expected value of the element | `boolean \| undefined`                  | `undefined` |
-| `autocomplete` | `autocomplete` | Specifies a short hint that describes the expected value of the element | `"on" \| undefined`                     | `undefined` |
-| `placeholder`  | `placeholder`  | Specifies a short hint that describes the expected value of the element | `string \| undefined`                   | `undefined` |
-| `value`        | `value`        | Specifies the value of the element                                      | `null \| number \| string \| undefined` | `''`        |
+| Property       | Attribute      | Description                                                                                        | Type                                                       | Default     |
+| -------------- | -------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
+| `autoFocus`    | `auto-focus`   | Specifies a short hint that describes the expected value of the element                            | `boolean \| undefined`                                     | `undefined` |
+| `autocomplete` | `autocomplete` | Specifies a short hint that describes the expected value of the element                            | `"on" \| undefined`                                        | `undefined` |
+| `disabled`     | `disabled`     | If true, the element is displayed as disabled                                                      | `boolean \| undefined`                                     | `false`     |
+| `multiple`     | `multiple`     | Specifies if the select should allow multiple options to be selected in the list                   | `boolean \| undefined`                                     | `false`     |
+| `name`         | `name`         | Is needed to reference the form data after the form is submitted                                   | `string \| undefined`                                      | `undefined` |
+| `placeholder`  | `placeholder`  | Specifies a short hint that describes the expected value of the element                            | `string \| undefined`                                      | `undefined` |
+| `required`     | `required`     | Specifies that the element must be filled out before submitting the form                           | `boolean \| undefined`                                     | `false`     |
+| `size`         | `size`         | When `multiple` is set to `true`, represents the number or rows in the list that should be visible | `number \| undefined`                                      | `0`         |
+| `value`        | `value`        | Specifies the value of the component                                                               | `null \| number \| string \| undefined`                    | `''`        |
+| `variant`      | `variant`      | Sets the variant of the component                                                                  | `"error" \| "info" \| "success" \| "warning" \| undefined` | `undefined` |
 
 
 ## Events
@@ -24,6 +30,29 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `mdsInputSelectChange` | Emits an InputChangeEventDetail when the value of the input element changes | `CustomEvent<InputValue>` |
 
 
+## Shadow Parts
+
+| Part       | Description             |
+| ---------- | ----------------------- |
+| `"select"` | The select HTML element |
+
+
+## Dependencies
+
+### Depends on
+
+- [mds-input-tip](../mds-input-tip)
+- [mds-input-tip-item](../mds-input-tip-item)
+
+### Graph
+```mermaid
+graph TD;
+  mds-input-select --> mds-input-tip
+  mds-input-select --> mds-input-tip-item
+  mds-input-tip-item --> mds-text
+  style mds-input-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 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/common/locale.ts

@@ -0,0 +1,31 @@
+type LocaleConfig = {
+  it?: Record<string, string>
+  en?: Record<string, string>
+  gr?: Record<string, string>
+}
+
+export class Locale {
+  defaultLanguage: string = 'en'
+  language: string
+  config: LocaleConfig
+
+  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
+        return
+      }
+    }
+
+    this.language = this.defaultLanguage
+  }
+
+  get = (tag: string): string => {
+    return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+  }
+}

package/src/components/mds-input-select/css/mds-input-variant.css

@@ -0,0 +1,89 @@
+@tailwind utilities;
+
+:host {
+
+  --mds-input-select-icon-color: var(--brand-maggioli-03);
+  --mds-input-select-variant-color: 0 0 0;
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));
+}
+
+:host( :hover ),
+:host( :focus-within ) {
+
+  --mds-input-select-variant-color: var(--brand-maggioli-04);
+}
+
+:host( [variant="info"] ) {
+
+  --mds-input-select-icon-color: var(--status-info-05);
+  --mds-input-select-tip-background: var(--status-info-05);
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));
+  --mds-input-select-variant-color: 0 0 0;
+}
+
+:host( [variant="info"]:hover ),
+:host( [variant="info"]:focus-within ) {
+
+  --mds-input-select-icon-color: var(--status-info-04);
+  --mds-input-select-variant-color: var(--status-info-05);
+}
+
+:host( [variant="success"] ) {
+
+  --mds-input-select-icon-color: var(--status-success-05);
+  --mds-input-select-tip-background: var(--status-success-05);
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));
+  --mds-input-select-variant-color: 0 0 0;
+}
+
+:host( [variant="success"]:hover ),
+:host( [variant="success"]:focus-within ) {
+
+  --mds-input-select-icon-color: var(--status-success-04);
+  --mds-input-select-variant-color: var(--status-success-05);
+}
+
+:host( [variant="warning"] ) {
+
+  --mds-input-select-icon-color: var(--status-warning-05);
+  --mds-input-select-tip-background: var(--status-warning-05);
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));
+  --mds-input-select-variant-color: 0 0 0;
+}
+
+:host( [variant="warning"]:hover ),
+:host( [variant="warning"]:focus-within ) {
+
+  --mds-input-select-icon-color: var(--status-warning-04);
+  --mds-input-select-variant-color: var(--status-warning-05);
+}
+
+:host( [variant="error"] ) {
+
+  --mds-input-select-icon-color: var(--status-error-05);
+  --mds-input-select-tip-background: var(--status-error-05);
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));
+  --mds-input-select-variant-color: 0 0 0;
+}
+
+:host( [variant="error"]:hover ),
+:host( [variant="error"]:focus-within ) {
+
+  --mds-input-select-icon-color: var(--status-error-04);
+  --mds-input-select-variant-color: var(--status-error-05);
+}