@maggioli-design-system/mds-input 5.4.0 → 5.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-input.cjs.entry.js +6 -4
- package/dist/cjs/mds-input.cjs.js +1 -1
- package/dist/collection/common/keyboard-manager.js +16 -11
- package/dist/collection/components/mds-input/mds-input.css +7 -1
- package/dist/collection/components/mds-input/mds-input.js +34 -14
- package/dist/collection/components/mds-input/test/mds-input.stories.js +4 -0
- package/dist/components/mds-input.js +18 -15
- package/dist/documentation.json +34 -12
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mds-input.entry.js +6 -4
- package/dist/esm/mds-input.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-input.entry.js +1 -1
- package/dist/esm-es5/mds-input.js +1 -1
- package/dist/mds-input/mds-input.esm.js +1 -1
- package/dist/mds-input/p-92707e12.system.js +1 -1
- package/dist/mds-input/p-c408af0b.entry.js +1 -0
- package/dist/mds-input/p-dbebb10f.system.entry.js +1 -0
- package/dist/stats.json +84 -40
- package/dist/types/common/keyboard-manager.d.ts +2 -1
- package/dist/types/components/mds-input/test/mds-input.stories.d.ts +6 -0
- package/dist/types/components.d.ts +8 -0
- package/documentation.json +46 -17
- package/package.json +4 -4
- package/readme.md +3 -0
- package/src/common/keyboard-manager.ts +16 -12
- package/src/components/mds-input/mds-input.css +7 -1
- package/src/components/mds-input/mds-input.tsx +20 -14
- package/src/components/mds-input/readme.md +1 -0
- package/src/components/mds-input/test/mds-input.stories.tsx +4 -0
- package/src/components.d.ts +8 -0
- package/src/fixtures/icons.json +1 -0
- package/src/fixtures/iconsauce.json +1 -0
- package/www/build/mds-input.esm.js +1 -1
- package/www/build/p-92707e12.system.js +1 -1
- package/www/build/p-c408af0b.entry.js +1 -0
- package/www/build/p-dbebb10f.system.entry.js +1 -0
- package/dist/mds-input/p-4b887dd4.entry.js +0 -1
- package/dist/mds-input/p-fcbc65e8.system.entry.js +0 -1
- package/www/build/p-4b887dd4.entry.js +0 -1
- package/www/build/p-fcbc65e8.system.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ const index = require('./index-d13bd48d.js');
|
|
|
6
6
|
|
|
7
7
|
const defineCustomElements = (win, options) => {
|
|
8
8
|
if (typeof window === 'undefined') return undefined;
|
|
9
|
-
return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[
|
|
9
|
+
return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"disabledLabel":[513,"disabled-label"],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"readonlyLabel":[513,"readonly-label"],"required":[516],"requiredLabel":[513,"required-label"],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -16,7 +16,7 @@ const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
|
|
|
16
16
|
|
|
17
17
|
const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
|
|
18
18
|
|
|
19
|
-
const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host( [typography=\"detail\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\ntextarea.input:active {\n -webkit-transition-property: none;\n transition-property: none;\n}\n\ntextarea.input{\n\n max-height: 16rem;\n\n min-height: 6rem;\n\n border-bottom-right-radius: 0;\n}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon{\n\n padding-left: 2.75rem;\n}\n\n\n\n.icon{\n\n left: 0.75rem;\n\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button{\n\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal{\n\n height: 3rem;\n\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:focus ) {\n\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:focus ) {\n\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:focus ) {\n\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:focus ) {\n\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
|
|
19
|
+
const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host( [typography=\"detail\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\ntextarea.input:active {\n -webkit-transition-property: none;\n transition-property: none;\n}\n\ntextarea.input{\n\n max-height: 16rem;\n\n min-height: 6rem;\n\n border-bottom-right-radius: 0;\n}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon{\n\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button{\n\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal{\n\n height: 3rem;\n\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:focus ) {\n\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:focus ) {\n\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:focus ) {\n\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:focus ) {\n\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
|
|
20
20
|
|
|
21
21
|
const MdsInput = class {
|
|
22
22
|
constructor(hostRef) {
|
|
@@ -71,6 +71,7 @@ const MdsInput = class {
|
|
|
71
71
|
this.hasFocus = false;
|
|
72
72
|
this.autocomplete = 'off';
|
|
73
73
|
this.autofocus = false;
|
|
74
|
+
this.await = false;
|
|
74
75
|
this.controlsLayout = 'vertical';
|
|
75
76
|
this.controlsIcon = 'arrow';
|
|
76
77
|
this.controlIncreaseLabel = 'Aumenta';
|
|
@@ -135,11 +136,12 @@ const MdsInput = class {
|
|
|
135
136
|
return Promise.resolve(this.nativeInput);
|
|
136
137
|
}
|
|
137
138
|
render() {
|
|
139
|
+
var _a, _b;
|
|
138
140
|
return (index.h(index.Host, null, this.type === 'number'
|
|
139
141
|
&& this.controlsLayout === 'horizontal'
|
|
140
142
|
&& index.h("mds-button", { class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.controlDecreaseLabel, part: "counter-button-decrease" }), this.type === 'textarea'
|
|
141
|
-
? index.h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
142
|
-
: index.h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.type === 'number'
|
|
143
|
+
? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
144
|
+
: index.h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.type === 'number'
|
|
143
145
|
&& this.controlsLayout === 'vertical'
|
|
144
146
|
&& index.h("div", { class: "counter counter--vertical" }, index.h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.controlIncreaseLabel, part: "counter-button-increase" }), index.h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.controlDecreaseLabel, part: "counter-button-decrease" })), this.type === 'number'
|
|
145
147
|
&& this.controlsLayout === 'horizontal'
|
|
@@ -150,7 +152,7 @@ const MdsInput = class {
|
|
|
150
152
|
index.h("div", { class: "tip tip--expanded tip--variant" }, index.h("div", { class: "tip__content" }, index.h("mds-text", { typography: "option", truncate: "word" }, index.h("span", { class: "tip__text" }, this.tip))))), this.datalist &&
|
|
151
153
|
index.h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
|
|
152
154
|
index.h("option", { value: element });
|
|
153
|
-
})), this.icon && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
|
|
155
|
+
})), this.icon && !this.await && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { running: this.await, class: clsx('await', this.variant) })));
|
|
154
156
|
}
|
|
155
157
|
static get formAssociated() { return true; }
|
|
156
158
|
get el() { return index.getElement(this); }
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[
|
|
20
|
+
return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"disabledLabel":[513,"disabled-label"],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"readonlyLabel":[513,"readonly-label"],"required":[516],"requiredLabel":[513,"required-label"],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export class KeyboardManager {
|
|
2
2
|
constructor() {
|
|
3
|
-
this.elements =
|
|
3
|
+
this.elements = new Map();
|
|
4
4
|
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
5
|
-
if (event.code === '
|
|
5
|
+
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
6
6
|
event.target.click();
|
|
7
7
|
}
|
|
8
8
|
};
|
|
@@ -12,20 +12,25 @@ export class KeyboardManager {
|
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
this.addElement = (el, name = 'element') => {
|
|
15
|
-
|
|
15
|
+
if (!el) {
|
|
16
|
+
throw Error(`Passed an ${el} element parameter to KeyboardManager.addElement`);
|
|
17
|
+
}
|
|
18
|
+
this.elements.set(name, el);
|
|
19
|
+
};
|
|
20
|
+
this.removeElement = (name = 'element') => {
|
|
21
|
+
this.detachClickBehavior(name);
|
|
22
|
+
this.elements.delete(name);
|
|
16
23
|
};
|
|
17
24
|
this.attachClickBehavior = (name = 'element') => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
25
|
+
var _a;
|
|
26
|
+
(_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
21
27
|
};
|
|
22
28
|
this.detachClickBehavior = (name = 'element') => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
29
|
+
var _a;
|
|
30
|
+
(_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
26
31
|
};
|
|
27
|
-
this.attachEscapeBehavior = (
|
|
28
|
-
this.escapeCallback =
|
|
32
|
+
this.attachEscapeBehavior = (callback) => {
|
|
33
|
+
this.escapeCallback = callback;
|
|
29
34
|
if (window !== undefined) {
|
|
30
35
|
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
31
36
|
}
|
|
@@ -356,7 +356,7 @@ textarea.input{
|
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
|
|
359
|
-
|
|
359
|
+
.await,
|
|
360
360
|
.icon{
|
|
361
361
|
|
|
362
362
|
left: 0.75rem;
|
|
@@ -367,6 +367,12 @@ textarea.input{
|
|
|
367
367
|
position: absolute;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
+
.await {
|
|
371
|
+
color: rgb(var(--mds-input-icon-color));
|
|
372
|
+
height: 24px;
|
|
373
|
+
width: 24px;
|
|
374
|
+
}
|
|
375
|
+
|
|
370
376
|
.counter {
|
|
371
377
|
border-left: var(--mds-input-controls-border);
|
|
372
378
|
display: flex;
|
|
@@ -46,6 +46,7 @@ export class MdsInput {
|
|
|
46
46
|
this.hasFocus = false;
|
|
47
47
|
this.autocomplete = 'off';
|
|
48
48
|
this.autofocus = false;
|
|
49
|
+
this.await = false;
|
|
49
50
|
this.controlsLayout = 'vertical';
|
|
50
51
|
this.controlsIcon = 'arrow';
|
|
51
52
|
this.controlIncreaseLabel = 'Aumenta';
|
|
@@ -110,11 +111,12 @@ export class MdsInput {
|
|
|
110
111
|
return Promise.resolve(this.nativeInput);
|
|
111
112
|
}
|
|
112
113
|
render() {
|
|
114
|
+
var _a, _b;
|
|
113
115
|
return (h(Host, null, this.type === 'number'
|
|
114
116
|
&& this.controlsLayout === 'horizontal'
|
|
115
117
|
&& h("mds-button", { class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.controlDecreaseLabel, part: "counter-button-decrease" }), this.type === 'textarea'
|
|
116
|
-
? h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
117
|
-
: h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.type === 'number'
|
|
118
|
+
? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
119
|
+
: h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.type === 'number'
|
|
118
120
|
&& this.controlsLayout === 'vertical'
|
|
119
121
|
&& h("div", { class: "counter counter--vertical" }, h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.controlIncreaseLabel, part: "counter-button-increase" }), h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.controlDecreaseLabel, part: "counter-button-decrease" })), this.type === 'number'
|
|
120
122
|
&& this.controlsLayout === 'horizontal'
|
|
@@ -125,7 +127,7 @@ export class MdsInput {
|
|
|
125
127
|
h("div", { class: "tip tip--expanded tip--variant" }, h("div", { class: "tip__content" }, h("mds-text", { typography: "option", truncate: "word" }, h("span", { class: "tip__text" }, this.tip))))), this.datalist &&
|
|
126
128
|
h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
|
|
127
129
|
h("option", { value: element });
|
|
128
|
-
})), this.icon && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
|
|
130
|
+
})), this.icon && !this.await && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { running: this.await, class: clsx('await', this.variant) })));
|
|
129
131
|
}
|
|
130
132
|
static get is() { return "mds-input"; }
|
|
131
133
|
static get encapsulation() { return "shadow"; }
|
|
@@ -163,7 +165,7 @@ export class MdsInput {
|
|
|
163
165
|
"text": "Specifies whether the element should have autocomplete enabled"
|
|
164
166
|
},
|
|
165
167
|
"attribute": "autocomplete",
|
|
166
|
-
"reflect":
|
|
168
|
+
"reflect": true,
|
|
167
169
|
"defaultValue": "'off'"
|
|
168
170
|
},
|
|
169
171
|
"autofocus": {
|
|
@@ -181,7 +183,25 @@ export class MdsInput {
|
|
|
181
183
|
"text": "Specifies that the element should automatically get focus when the page loads"
|
|
182
184
|
},
|
|
183
185
|
"attribute": "autofocus",
|
|
184
|
-
"reflect":
|
|
186
|
+
"reflect": true,
|
|
187
|
+
"defaultValue": "false"
|
|
188
|
+
},
|
|
189
|
+
"await": {
|
|
190
|
+
"type": "boolean",
|
|
191
|
+
"mutable": false,
|
|
192
|
+
"complexType": {
|
|
193
|
+
"original": "boolean",
|
|
194
|
+
"resolved": "boolean",
|
|
195
|
+
"references": {}
|
|
196
|
+
},
|
|
197
|
+
"required": false,
|
|
198
|
+
"optional": false,
|
|
199
|
+
"docs": {
|
|
200
|
+
"tags": [],
|
|
201
|
+
"text": "Specifies if the spinner icon is shown, replacing the icon if present"
|
|
202
|
+
},
|
|
203
|
+
"attribute": "await",
|
|
204
|
+
"reflect": true,
|
|
185
205
|
"defaultValue": "false"
|
|
186
206
|
},
|
|
187
207
|
"controlsLayout": {
|
|
@@ -351,7 +371,7 @@ export class MdsInput {
|
|
|
351
371
|
"text": "Specifies the maximum value\nuse it with input type=\"number\" or type=\"date\"\nExample: max=\"180\", max=\"2046-12-04\""
|
|
352
372
|
},
|
|
353
373
|
"attribute": "max",
|
|
354
|
-
"reflect":
|
|
374
|
+
"reflect": true
|
|
355
375
|
},
|
|
356
376
|
"maxlength": {
|
|
357
377
|
"type": "number",
|
|
@@ -368,7 +388,7 @@ export class MdsInput {
|
|
|
368
388
|
"text": "Specifies the maximum number of characters allowed in an element\nuse it with input type=\"number\""
|
|
369
389
|
},
|
|
370
390
|
"attribute": "maxlength",
|
|
371
|
-
"reflect":
|
|
391
|
+
"reflect": true
|
|
372
392
|
},
|
|
373
393
|
"min": {
|
|
374
394
|
"type": "any",
|
|
@@ -385,7 +405,7 @@ export class MdsInput {
|
|
|
385
405
|
"text": "Specifies the minimum value\nuse it with input type=\"number\" or type=\"date\"\nExample: min=\"-3\", min=\"1988-04-15\""
|
|
386
406
|
},
|
|
387
407
|
"attribute": "min",
|
|
388
|
-
"reflect":
|
|
408
|
+
"reflect": true
|
|
389
409
|
},
|
|
390
410
|
"minlength": {
|
|
391
411
|
"type": "number",
|
|
@@ -402,7 +422,7 @@ export class MdsInput {
|
|
|
402
422
|
"text": "Specifies the minimum number of characters allowed in an element\nuse it with input type=\"number\""
|
|
403
423
|
},
|
|
404
424
|
"attribute": "minlength",
|
|
405
|
-
"reflect":
|
|
425
|
+
"reflect": true
|
|
406
426
|
},
|
|
407
427
|
"name": {
|
|
408
428
|
"type": "string",
|
|
@@ -419,7 +439,7 @@ export class MdsInput {
|
|
|
419
439
|
"text": "Is needed to reference the form data after the form is submitted"
|
|
420
440
|
},
|
|
421
441
|
"attribute": "name",
|
|
422
|
-
"reflect":
|
|
442
|
+
"reflect": true
|
|
423
443
|
},
|
|
424
444
|
"pattern": {
|
|
425
445
|
"type": "string",
|
|
@@ -436,7 +456,7 @@ export class MdsInput {
|
|
|
436
456
|
"text": "Specifies a regular expression that element\\'s value is checked against"
|
|
437
457
|
},
|
|
438
458
|
"attribute": "pattern",
|
|
439
|
-
"reflect":
|
|
459
|
+
"reflect": true
|
|
440
460
|
},
|
|
441
461
|
"placeholder": {
|
|
442
462
|
"type": "string",
|
|
@@ -453,7 +473,7 @@ export class MdsInput {
|
|
|
453
473
|
"text": "Specifies a short hint that describes the expected value of the element"
|
|
454
474
|
},
|
|
455
475
|
"attribute": "placeholder",
|
|
456
|
-
"reflect":
|
|
476
|
+
"reflect": true,
|
|
457
477
|
"defaultValue": "''"
|
|
458
478
|
},
|
|
459
479
|
"readonly": {
|
|
@@ -566,7 +586,7 @@ export class MdsInput {
|
|
|
566
586
|
"text": "Sets the word(s) of the tip of the input field"
|
|
567
587
|
},
|
|
568
588
|
"attribute": "tip",
|
|
569
|
-
"reflect":
|
|
589
|
+
"reflect": true
|
|
570
590
|
},
|
|
571
591
|
"step": {
|
|
572
592
|
"type": "string",
|
|
@@ -583,7 +603,7 @@ export class MdsInput {
|
|
|
583
603
|
"text": "Specifies the interval between legal numbers in an input field"
|
|
584
604
|
},
|
|
585
605
|
"attribute": "step",
|
|
586
|
-
"reflect":
|
|
606
|
+
"reflect": true
|
|
587
607
|
},
|
|
588
608
|
"type": {
|
|
589
609
|
"type": "string",
|
|
@@ -18,6 +18,10 @@ export default {
|
|
|
18
18
|
type: { name: 'boolean' },
|
|
19
19
|
description: 'Specifies that the element should automatically get focus when the page loads',
|
|
20
20
|
},
|
|
21
|
+
await: {
|
|
22
|
+
type: { name: 'boolean' },
|
|
23
|
+
description: 'Specifies if the spinner icon is shown, replacing the icon if present',
|
|
24
|
+
},
|
|
21
25
|
'control-decrease-label': {
|
|
22
26
|
type: { name: 'string' },
|
|
23
27
|
description: 'Specifies the label for control button decrease for component when type is number',
|