@maggioli-design-system/mds-input-select 1.0.0

package/dist/collection/components/mds-input-select/mds-input-select.css

@@ -0,0 +1,533 @@
+@tailwind components;
+
+*, ::before, ::after{
+
+  --tw-border-spacing-x: 0;
+
+  --tw-border-spacing-y: 0;
+
+  --tw-translate-x: 0;
+
+  --tw-translate-y: 0;
+
+  --tw-rotate: 0;
+
+  --tw-skew-x: 0;
+
+  --tw-skew-y: 0;
+
+  --tw-scale-x: 1;
+
+  --tw-scale-y: 1;
+
+  --tw-pan-x:  ;
+
+  --tw-pan-y:  ;
+
+  --tw-pinch-zoom:  ;
+
+  --tw-scroll-snap-strictness: proximity;
+
+  --tw-gradient-from-position:  ;
+
+  --tw-gradient-via-position:  ;
+
+  --tw-gradient-to-position:  ;
+
+  --tw-ordinal:  ;
+
+  --tw-slashed-zero:  ;
+
+  --tw-numeric-figure:  ;
+
+  --tw-numeric-spacing:  ;
+
+  --tw-numeric-fraction:  ;
+
+  --tw-ring-inset:  ;
+
+  --tw-ring-offset-width: 0px;
+
+  --tw-ring-offset-color: #fff;
+
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+
+  --tw-ring-offset-shadow: 0 0 #0000;
+
+  --tw-ring-shadow: 0 0 #0000;
+
+  --tw-shadow: 0 0 #0000;
+
+  --tw-shadow-colored: 0 0 #0000;
+
+  --tw-blur:  ;
+
+  --tw-brightness:  ;
+
+  --tw-contrast:  ;
+
+  --tw-grayscale:  ;
+
+  --tw-hue-rotate:  ;
+
+  --tw-invert:  ;
+
+  --tw-saturate:  ;
+
+  --tw-sepia:  ;
+
+  --tw-drop-shadow:  ;
+
+  --tw-backdrop-blur:  ;
+
+  --tw-backdrop-brightness:  ;
+
+  --tw-backdrop-contrast:  ;
+
+  --tw-backdrop-grayscale:  ;
+
+  --tw-backdrop-hue-rotate:  ;
+
+  --tw-backdrop-invert:  ;
+
+  --tw-backdrop-opacity:  ;
+
+  --tw-backdrop-saturate:  ;
+
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop{
+
+  --tw-border-spacing-x: 0;
+
+  --tw-border-spacing-y: 0;
+
+  --tw-translate-x: 0;
+
+  --tw-translate-y: 0;
+
+  --tw-rotate: 0;
+
+  --tw-skew-x: 0;
+
+  --tw-skew-y: 0;
+
+  --tw-scale-x: 1;
+
+  --tw-scale-y: 1;
+
+  --tw-pan-x:  ;
+
+  --tw-pan-y:  ;
+
+  --tw-pinch-zoom:  ;
+
+  --tw-scroll-snap-strictness: proximity;
+
+  --tw-gradient-from-position:  ;
+
+  --tw-gradient-via-position:  ;
+
+  --tw-gradient-to-position:  ;
+
+  --tw-ordinal:  ;
+
+  --tw-slashed-zero:  ;
+
+  --tw-numeric-figure:  ;
+
+  --tw-numeric-spacing:  ;
+
+  --tw-numeric-fraction:  ;
+
+  --tw-ring-inset:  ;
+
+  --tw-ring-offset-width: 0px;
+
+  --tw-ring-offset-color: #fff;
+
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+
+  --tw-ring-offset-shadow: 0 0 #0000;
+
+  --tw-ring-shadow: 0 0 #0000;
+
+  --tw-shadow: 0 0 #0000;
+
+  --tw-shadow-colored: 0 0 #0000;
+
+  --tw-blur:  ;
+
+  --tw-brightness:  ;
+
+  --tw-contrast:  ;
+
+  --tw-grayscale:  ;
+
+  --tw-hue-rotate:  ;
+
+  --tw-invert:  ;
+
+  --tw-saturate:  ;
+
+  --tw-sepia:  ;
+
+  --tw-drop-shadow:  ;
+
+  --tw-backdrop-blur:  ;
+
+  --tw-backdrop-brightness:  ;
+
+  --tw-backdrop-contrast:  ;
+
+  --tw-backdrop-grayscale:  ;
+
+  --tw-backdrop-hue-rotate:  ;
+
+  --tw-backdrop-invert:  ;
+
+  --tw-backdrop-opacity:  ;
+
+  --tw-backdrop-saturate:  ;
+
+  --tw-backdrop-sepia:  ;
+}
+.svg{
+
+  display: flex;
+}
+.svg svg{
+
+  aspect-ratio: 1/1;
+
+  height: 100%;
+
+  width: 100%;
+}
+.static{
+
+  position: static;
+}
+.fixed{
+
+  position: fixed;
+}
+.absolute{
+
+  position: absolute;
+}
+.border{
+
+  border-width: 1px;
+}
+.bg-label-amaranth-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+}
+.bg-label-aqua-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+}
+.bg-label-blue-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+}
+.bg-label-green-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+}
+.bg-label-lime-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+}
+.bg-label-orange-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+}
+.bg-label-orchid-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+}
+.bg-label-violet-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+}
+.bg-label-yellow-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+}
+.bg-tone-neutral-10{
+
+  --tw-bg-opacity: 1;
+
+  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+}
+.fill-label-amaranth-04{
+
+  fill: rgb(var(--label-amaranth-04));
+}
+.fill-label-aqua-04{
+
+  fill: rgb(var(--label-aqua-04));
+}
+.fill-label-blue-04{
+
+  fill: rgb(var(--label-blue-04));
+}
+.fill-label-green-04{
+
+  fill: rgb(var(--label-green-04));
+}
+.fill-label-lime-04{
+
+  fill: rgb(var(--label-lime-04));
+}
+.fill-label-orange-04{
+
+  fill: rgb(var(--label-orange-04));
+}
+.fill-label-orchid-04{
+
+  fill: rgb(var(--label-orchid-04));
+}
+.fill-label-violet-04{
+
+  fill: rgb(var(--label-violet-04));
+}
+.fill-label-yellow-04{
+
+  fill: rgb(var(--label-yellow-04));
+}
+.fill-tone-neutral-04{
+
+  fill: rgb(var(--tone-neutral-04));
+}
+.text-label-amaranth-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+}
+.text-label-aqua-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+}
+.text-label-blue-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
+}
+.text-label-green-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+}
+.text-label-lime-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+}
+.text-label-orange-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+}
+.text-label-orchid-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+}
+.text-label-violet-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+}
+.text-label-yellow-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
+}
+.text-tone-neutral-04{
+
+  --tw-text-opacity: 1;
+
+  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
+}
+.shadow{
+
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+
+:host{
+
+  min-height: 1.5rem;
+
+  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  font-size: 1rem;
+
+  line-height: 1.5rem;
+
+  -webkit-font-smoothing: antialiased;
+
+  -moz-osx-font-smoothing: grayscale;
+
+  --mds-input-select-variant-color: var(--tone-neutral-01);
+  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);
+  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);
+
+  color: rgb(var(--tone-neutral-02));
+  display: flex;
+  position: relative;
+}
+
+.input{
+
+  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  font-size: 1rem;
+
+  line-height: 1.5rem;
+
+  -webkit-font-smoothing: antialiased;
+
+  -moz-osx-font-smoothing: grayscale;
+
+  margin: 0rem;
+
+  min-height: 3rem;
+
+  width: 100%;
+
+  border-radius: 0.5rem;
+
+  padding-top: 0.75rem;
+
+  padding-bottom: 0.75rem;
+
+  padding-left: 1rem;
+
+  padding-right: 3rem;
+
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 300ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  background-color: rgb(var(--tone-neutral));
+  border: 0;
+  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);
+  box-sizing: border-box;
+  color: rgb(var(--tone-neutral-05));
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.input:hover,
+.input:focus{
+
+  outline: 2px solid transparent;
+
+  outline-offset: 2px;
+
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 300ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  --mds-input-select-variant-color: var(--brand-maggioli-04);
+  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);
+  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);
+
+  color: rgb(var(--tone-neutral-03));
+}
+
+:host([value]:not([value=""])) .input {
+  color: rgb(var(--tone-neutral-03));
+}
+
+.input--mds-input-select-selected {
+  color: rgb(var(--tone-neutral-02));
+}
+
+.icon-container{
+
+  right: 1rem;
+
+  height: 3rem;
+
+  align-items: center;
+  color: inherit;
+  display: flex;
+  pointer-events: none;
+  position: absolute;
+}
+
+.icon{
+
+  border-radius: 9999px;
+
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 200ms;
+
+  background-color: transparent;
+  fill: rgb(var(--brand-maggioli-04));
+}
+
+.input:focus + .icon-container .icon,
+.input:hover + .icon-container .icon {
+  background-color: rgb(var(--tone-neutral-09));
+  fill: rgb(var(--brand-maggioli-02));
+}
+
+.option-container {
+  display: none;
+}

package/dist/collection/components/mds-input-select/mds-input-select.js

@@ -0,0 +1,174 @@
+import clsx from "clsx";
+import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
+import { Host, h } from "@stencil/core";
+export class MdsInputSelect {
+    constructor() {
+        this.onInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                this.selected = input.value !== '';
+                this.value = input.value;
+                this.internals.setFormValue(input.value);
+            }
+        };
+        this.emptyOptions = () => {
+            var _a;
+            const select = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('select');
+            const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
+            if (!options) {
+                return;
+            }
+            options.forEach((option, index) => {
+                if (!this.placeholder) {
+                    option.remove();
+                }
+                if (this.placeholder && index > 0) {
+                    option.remove();
+                }
+            });
+        };
+        this.onSlotChangeHandler = () => {
+            var _a, _b, _c;
+            const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
+            const select = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('select');
+            const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
+            if (!options) {
+                return;
+            }
+            if (!this.placeholder && options.length > 0) {
+                this.emptyOptions();
+            }
+            if (this.placeholder && options.length > 1) {
+                this.emptyOptions();
+            }
+            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+                select === null || select === void 0 ? void 0 : select.appendChild(element.cloneNode(true));
+            });
+        };
+        this.selected = undefined;
+        this.autocomplete = undefined;
+        this.autoFocus = undefined;
+        this.placeholder = undefined;
+        this.value = '';
+    }
+    render() {
+        return (h(Host, null, h("select", { class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this) }, this.placeholder && h("option", { value: "", disabled: true, selected: true }, this.placeholder)), h("div", { class: "icon-container" }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { class: "option-container" }, h("slot", { onSlotchange: this.onSlotChangeHandler }))));
+    }
+    static get is() { return "mds-input-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mds-input-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mds-input-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'on'",
+                    "resolved": "\"on\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the element"
+                },
+                "attribute": "autocomplete",
+                "reflect": true
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the element"
+                },
+                "attribute": "auto-focus",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the element"
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number | null",
+                    "resolved": "null | number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the value of the element"
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "mdsInputSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an InputChangeEventDetail when the value of the input element changes"
+                },
+                "complexType": {
+                    "original": "InputValue",
+                    "resolved": "InputValue",
+                    "references": {
+                        "InputValue": {
+                            "location": "import",
+                            "path": "@interface/input-value",
+                            "id": "src/interface/input-value.ts::InputValue"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/mds-input-select/test/mds-input-select.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('mds-input-select', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<mds-input-select></mds-input-select>');
+        const element = await page.find('mds-input-select');
+        expect(element).toHaveAttribute('hydrated');
+        expect(true).toBe(true);
+    });
+});