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

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

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputValue } from '@interface/input-value';
+import { ThemeStatusVariantType } from '@type/variant';
+/**
+ * @part select - The select HTML element
+ */
+export declare class MdsInputSelect {
+    host: HTMLMdsInputSelectElement;
+    selected: boolean;
+    hasFocus: boolean;
+    internals: ElementInternals;
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly autocomplete?: 'on';
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly autoFocus?: boolean;
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly placeholder?: string;
+    /**
+     * Is needed to reference the form data after the form is submitted
+     */
+    readonly name?: string;
+    /**
+     * If true, the element is displayed as disabled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Specifies that the element must be filled out before submitting the form
+     */
+    readonly required?: boolean;
+    /**
+     * Specifies if the select should allow multiple options to be selected in the list
+     */
+    readonly multiple?: boolean;
+    /**
+     * When `multiple` is set to `true`, represents the number or rows in the list that should be visible
+     */
+    readonly size?: number;
+    /**
+     * Specifies the value of the component
+     */
+    value?: string | number | null;
+    /**
+     * Sets the variant of the component
+     */
+    readonly variant?: ThemeStatusVariantType;
+    /**
+     * Emits an InputChangeEventDetail when the value of the input element changes
+     */
+    changeEvent: EventEmitter<InputValue>;
+    /**
+     * Emits the change event when the component value changes
+     */
+    protected valueChanged(): void;
+    componentDidLoad(): void;
+    private onInput;
+    private onBlur;
+    private onFocus;
+    private emptyOptions;
+    private onSlotChangeHandler;
+    render(): any;
+}

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

@@ -1,6 +1,12 @@
 declare const _default: {
     title: string;
     argTypes: {
+        value: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
         autocomplete: {
             description: string;
             options: string[];
@@ -20,7 +26,44 @@ declare const _default: {
             };
             description: string;
         };
+        required: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        disabled: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        multiple: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        size: {
+            type: {
+                name: string;
+            };
+            description: string;
+        };
+        variant: {
+            type: {
+                name: string;
+            };
+            options: string[];
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
 };
 export default _default;
 export declare const Default: any;
+export declare const Multiple: any;
+export declare const Required: any;
+export declare const Disabled: any;

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/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-04-18T15:04:37",
+  "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": [
     {
@@ -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": {
@@ -323,26 +511,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": "",
@@ -453,11 +621,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 +671,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/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/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';