@maggioli-design-system/mds-input 6.1.4 → 6.2.0
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 +27 -11
- package/dist/cjs/mds-input.cjs.js +1 -1
- package/dist/collection/components/mds-input/mds-input.css +52 -2
- package/dist/collection/components/mds-input/mds-input.js +17 -9
- package/dist/collection/components/mds-input/test/mds-input.stories.js +5 -0
- package/dist/components/mds-input.js +29 -11
- package/dist/documentation.json +5 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mds-input.entry.js +27 -11
- 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-16ddda69.system.js +1 -1
- package/dist/mds-input/{p-4135d6c3.entry.js → p-66b9836a.entry.js} +1 -1
- package/dist/mds-input/p-fa8df187.system.entry.js +1 -0
- package/dist/stats.json +31 -16
- package/dist/types/components/mds-input/mds-input.d.ts +3 -0
- package/dist/types/components/mds-input/test/mds-input.stories.d.ts +1 -0
- package/dist/types/type/language.d.ts +2 -1
- package/documentation.json +12 -3
- package/package.json +1 -1
- package/readme.md +16 -0
- package/src/components/mds-input/mds-input.css +20 -2
- package/src/components/mds-input/mds-input.tsx +21 -4
- package/src/components/mds-input/meta/locale.en.json +3 -1
- package/src/components/mds-input/meta/locale.it.json +3 -1
- package/src/components/mds-input/readme.md +1 -0
- package/src/components/mds-input/test/mds-input.stories.tsx +6 -0
- package/src/fixtures/icons.json +7 -0
- package/src/fixtures/iconsauce.json +5 -0
- package/src/type/language.ts +4 -0
- package/www/build/mds-input.esm.js +1 -1
- package/www/build/p-16ddda69.system.js +1 -1
- package/www/build/{p-4135d6c3.entry.js → p-66b9836a.entry.js} +1 -1
- package/www/build/p-fa8df187.system.entry.js +1 -0
- package/dist/mds-input/p-92ebc5be.system.entry.js +0 -1
- package/www/build/p-92ebc5be.system.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
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],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
11
|
+
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],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isPasswordVisible":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -14,6 +14,10 @@ const miBaselineArrowUp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
|
|
|
14
14
|
|
|
15
15
|
const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>`;
|
|
16
16
|
|
|
17
|
+
const miBaselineVisible = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg>`;
|
|
18
|
+
|
|
19
|
+
const miBaselineVisibleOff = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5c0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28l.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22L21 20.73L3.27 3L2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65c0 1.66 1.34 3 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53c-2.76 0-5-2.24-5-5c0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15l.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>`;
|
|
20
|
+
|
|
17
21
|
function getDefaultExportFromCjs (x) {
|
|
18
22
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
19
23
|
}
|
|
@@ -4811,19 +4815,27 @@ class Locale {
|
|
|
4811
4815
|
|
|
4812
4816
|
const increase$1 = "Increase";
|
|
4813
4817
|
const decrease$1 = "Decrease";
|
|
4818
|
+
const showPassword$1 = "Show Password";
|
|
4819
|
+
const hidePassword$1 = "Hide Password";
|
|
4814
4820
|
const localeEn = {
|
|
4815
4821
|
increase: increase$1,
|
|
4816
|
-
decrease: decrease$1
|
|
4822
|
+
decrease: decrease$1,
|
|
4823
|
+
showPassword: showPassword$1,
|
|
4824
|
+
hidePassword: hidePassword$1
|
|
4817
4825
|
};
|
|
4818
4826
|
|
|
4819
4827
|
const increase = "Aumenta";
|
|
4820
4828
|
const decrease = "Diminuisci";
|
|
4829
|
+
const showPassword = "Visualizza password";
|
|
4830
|
+
const hidePassword = "Nascondi password";
|
|
4821
4831
|
const localeIt = {
|
|
4822
4832
|
increase: increase,
|
|
4823
|
-
decrease: decrease
|
|
4833
|
+
decrease: decrease,
|
|
4834
|
+
showPassword: showPassword,
|
|
4835
|
+
hidePassword: hidePassword
|
|
4824
4836
|
};
|
|
4825
4837
|
|
|
4826
|
-
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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\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 --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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-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 -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::placeholder {\n color: rgb(var(--tone-neutral-04));\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{\n\n resize: vertical;\n\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\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 --mds-button-background: transparent;\n fill: var(--mds-input-controls-color);\n\n border: 0;\n min-height: 0;\n padding: 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@tailwind utilities;\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@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n }\n }\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.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@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\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";
|
|
4838
|
+
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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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 --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\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-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\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(--brand-maggioli-03));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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-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 -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-04));\n}\n\n.input::placeholder {\n color: rgb(var(--tone-neutral-04));\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{\n\n resize: vertical;\n\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\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 --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 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.password-toggle-button{\n\n top: 0.375rem;\n\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\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:host( [type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){\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:host( [type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){\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:host( [type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){\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@tailwind utilities;\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@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n }\n }\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.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@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\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";
|
|
4827
4839
|
const MdsInputStyle0 = mdsInputCss;
|
|
4828
4840
|
|
|
4829
4841
|
const MdsInput = class {
|
|
@@ -4881,6 +4893,8 @@ const MdsInput = class {
|
|
|
4881
4893
|
}
|
|
4882
4894
|
};
|
|
4883
4895
|
this.hasFocus = false;
|
|
4896
|
+
this.language = undefined;
|
|
4897
|
+
this.isPasswordVisible = false;
|
|
4884
4898
|
this.autocomplete = 'off';
|
|
4885
4899
|
this.autofocus = false;
|
|
4886
4900
|
this.await = false;
|
|
@@ -4909,6 +4923,7 @@ const MdsInput = class {
|
|
|
4909
4923
|
}
|
|
4910
4924
|
componentWillLoad() {
|
|
4911
4925
|
var _a;
|
|
4926
|
+
this.language = this.t.lang(this.el);
|
|
4912
4927
|
// If the mds-input has a tabindex attribute we get the value
|
|
4913
4928
|
// and pass it down to the native input, then remove it from the
|
|
4914
4929
|
// mds-input to avoid causing tabbing twice on the same element
|
|
@@ -4949,19 +4964,20 @@ const MdsInput = class {
|
|
|
4949
4964
|
}
|
|
4950
4965
|
render() {
|
|
4951
4966
|
var _a, _b;
|
|
4952
|
-
return (index.h(index.Host, { key: '
|
|
4967
|
+
return (index.h(index.Host, { key: '626a4b919dafe2bbab8cd83bbc1eaa3c6f1cd22d' }, this.type === 'number'
|
|
4953
4968
|
&& this.controlsLayout === 'horizontal'
|
|
4954
|
-
&& index.h("mds-button", { key: '
|
|
4969
|
+
&& index.h("mds-button", { key: 'a0e5b1e57cf2022e7130ff67fc540d106567a722', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
4955
4970
|
? 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, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
4956
|
-
: 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', part: "field", 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'
|
|
4971
|
+
: 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', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
4957
4972
|
&& this.controlsLayout === 'vertical'
|
|
4958
|
-
&& index.h("div", { key: '
|
|
4973
|
+
&& index.h("div", { key: '36ac345e3b806b68b50c01db76c4e3049b90a331', class: "counter counter--vertical" }, index.h("mds-button", { key: '89308d04da21c10aede3fa3a83d9e549a7e9f975', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '8111ccdf9b5b831d744676b6e0b9cc8ef11c02bd', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
4959
4974
|
&& this.controlsLayout === 'horizontal'
|
|
4960
|
-
&& index.h("mds-button", { key: '
|
|
4961
|
-
index.h("mds-
|
|
4962
|
-
index.h("
|
|
4975
|
+
&& index.h("mds-button", { key: '2446f6ade80181344ebac21dd5eb2435e4b92f25', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
4976
|
+
&& index.h("mds-button", { key: 'c86c4922192a2afff27d84a5f259b9cd45532091', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: '1db9b22cee504bc76c98bd6e58e2a618801fa1df', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '652a40efd42d4a355889b2d319dd1b8f0a6243ec', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '584ed372026874627b064dae89a364a7e40b14b7', expanded: true, variant: "readonly" }), this.required &&
|
|
4977
|
+
index.h("mds-input-tip-item", { key: '8d0937ebdaf5a1e725ec2a87564d956d7c5f6eae', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: '45a882df504d7eedabda51dc306a680f832b16c0', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'dc4fe2048030fba4708a5d75106a0812111ba7b6', expanded: true, variant: "text" }, this.tip)), this.datalist &&
|
|
4978
|
+
index.h("datalist", { key: '591d9c017b9921447893d2153e258807cd859e70', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
|
|
4963
4979
|
index.h("option", { value: element });
|
|
4964
|
-
})), this.icon && !this.await && index.h("mds-icon", { key: '
|
|
4980
|
+
})), this.icon && !this.await && index.h("mds-icon", { key: 'd55d1619946a2b121a80b299e9a80c22dfd13695', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'a46633118ba4ae177495063c384cd7279e916258', running: this.await, class: clsx('await', this.variant) })));
|
|
4965
4981
|
}
|
|
4966
4982
|
static get formAssociated() { return true; }
|
|
4967
4983
|
get el() { return index.getElement(this); }
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
22
|
+
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],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isPasswordVisible":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
--mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);
|
|
230
230
|
--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);
|
|
231
231
|
--mds-input-variant-color: 0 0 0;
|
|
232
|
-
--mds-input-controls-color: rgb(var(--
|
|
232
|
+
--mds-input-controls-color: rgb(var(--brand-maggioli-03));
|
|
233
233
|
--mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));
|
|
234
234
|
--mds-input-textarea-min-height: 6rem;
|
|
235
235
|
--mds-input-textarea-max-height: 16rem;
|
|
@@ -417,9 +417,9 @@ textarea.input{
|
|
|
417
417
|
border-radius: 0.5rem;
|
|
418
418
|
|
|
419
419
|
--mds-button-background: transparent;
|
|
420
|
-
fill: var(--mds-input-controls-color);
|
|
421
420
|
|
|
422
421
|
border: 0;
|
|
422
|
+
fill: var(--mds-input-controls-color);
|
|
423
423
|
min-height: 0;
|
|
424
424
|
padding: 0;
|
|
425
425
|
}
|
|
@@ -466,6 +466,16 @@ textarea.input{
|
|
|
466
466
|
right: 0;
|
|
467
467
|
}
|
|
468
468
|
|
|
469
|
+
.password-toggle-button{
|
|
470
|
+
|
|
471
|
+
top: 0.375rem;
|
|
472
|
+
|
|
473
|
+
right: 0.375rem;
|
|
474
|
+
|
|
475
|
+
fill: var(--mds-input-controls-color);
|
|
476
|
+
position: absolute;
|
|
477
|
+
}
|
|
478
|
+
|
|
469
479
|
:host( [type="number"] ) .input{
|
|
470
480
|
|
|
471
481
|
padding-right: 2rem;
|
|
@@ -493,6 +503,46 @@ textarea.input{
|
|
|
493
503
|
left: 3.75rem;
|
|
494
504
|
}
|
|
495
505
|
|
|
506
|
+
:host( [type="password"]) .input[type="password"]:not(:-moz-placeholder-shown) {
|
|
507
|
+
font-size: 3rem;
|
|
508
|
+
max-height: 3rem;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
:host( [type="password"]) .input[type="password"]:not(:placeholder-shown) {
|
|
512
|
+
font-size: 3rem;
|
|
513
|
+
max-height: 3rem;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
:host( [type="password"]) .input[type="text"]:not(:-moz-placeholder-shown){
|
|
517
|
+
|
|
518
|
+
min-height: 1.5rem;
|
|
519
|
+
|
|
520
|
+
font-family: 'Roboto Mono', 'Courier New', monospace;
|
|
521
|
+
|
|
522
|
+
font-size: 1rem;
|
|
523
|
+
|
|
524
|
+
line-height: 1.5rem;
|
|
525
|
+
|
|
526
|
+
-webkit-font-smoothing: antialiased;
|
|
527
|
+
|
|
528
|
+
-moz-osx-font-smoothing: grayscale;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
:host( [type="password"]) .input[type="text"]:not(:placeholder-shown){
|
|
532
|
+
|
|
533
|
+
min-height: 1.5rem;
|
|
534
|
+
|
|
535
|
+
font-family: 'Roboto Mono', 'Courier New', monospace;
|
|
536
|
+
|
|
537
|
+
font-size: 1rem;
|
|
538
|
+
|
|
539
|
+
line-height: 1.5rem;
|
|
540
|
+
|
|
541
|
+
-webkit-font-smoothing: antialiased;
|
|
542
|
+
|
|
543
|
+
-moz-osx-font-smoothing: grayscale;
|
|
544
|
+
}
|
|
545
|
+
|
|
496
546
|
@tailwind utilities;
|
|
497
547
|
|
|
498
548
|
:host {
|
|
@@ -3,6 +3,8 @@ import miBaselineAdd from "@icon/mi/baseline/add.svg";
|
|
|
3
3
|
import miBaselineArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
|
|
4
4
|
import miBaselineArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
|
|
5
5
|
import miBaselineRemove from "@icon/mi/baseline/remove.svg";
|
|
6
|
+
import miBaselineVisible from "@icon/mi/baseline/visibility.svg";
|
|
7
|
+
import miBaselineVisibleOff from "@icon/mi/baseline/visibility-off.svg";
|
|
6
8
|
import { Host, h } from "@stencil/core";
|
|
7
9
|
import { Locale } from "../../common/locale";
|
|
8
10
|
import localeEn from "./meta/locale.en.json";
|
|
@@ -50,6 +52,8 @@ export class MdsInput {
|
|
|
50
52
|
}
|
|
51
53
|
};
|
|
52
54
|
this.hasFocus = false;
|
|
55
|
+
this.language = undefined;
|
|
56
|
+
this.isPasswordVisible = false;
|
|
53
57
|
this.autocomplete = 'off';
|
|
54
58
|
this.autofocus = false;
|
|
55
59
|
this.await = false;
|
|
@@ -78,6 +82,7 @@ export class MdsInput {
|
|
|
78
82
|
}
|
|
79
83
|
componentWillLoad() {
|
|
80
84
|
var _a;
|
|
85
|
+
this.language = this.t.lang(this.el);
|
|
81
86
|
// If the mds-input has a tabindex attribute we get the value
|
|
82
87
|
// and pass it down to the native input, then remove it from the
|
|
83
88
|
// mds-input to avoid causing tabbing twice on the same element
|
|
@@ -118,19 +123,20 @@ export class MdsInput {
|
|
|
118
123
|
}
|
|
119
124
|
render() {
|
|
120
125
|
var _a, _b;
|
|
121
|
-
return (h(Host, { key: '
|
|
126
|
+
return (h(Host, { key: '626a4b919dafe2bbab8cd83bbc1eaa3c6f1cd22d' }, this.type === 'number'
|
|
122
127
|
&& this.controlsLayout === 'horizontal'
|
|
123
|
-
&& h("mds-button", { key: '
|
|
128
|
+
&& h("mds-button", { key: 'a0e5b1e57cf2022e7130ff67fc540d106567a722', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
124
129
|
? 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, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
125
|
-
: 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', part: "field", 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'
|
|
130
|
+
: 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', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
126
131
|
&& this.controlsLayout === 'vertical'
|
|
127
|
-
&& h("div", { key: '
|
|
132
|
+
&& h("div", { key: '36ac345e3b806b68b50c01db76c4e3049b90a331', class: "counter counter--vertical" }, h("mds-button", { key: '89308d04da21c10aede3fa3a83d9e549a7e9f975', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '8111ccdf9b5b831d744676b6e0b9cc8ef11c02bd', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
128
133
|
&& this.controlsLayout === 'horizontal'
|
|
129
|
-
&& h("mds-button", { key: '
|
|
130
|
-
h("mds-
|
|
131
|
-
h("
|
|
134
|
+
&& h("mds-button", { key: '2446f6ade80181344ebac21dd5eb2435e4b92f25', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
135
|
+
&& h("mds-button", { key: 'c86c4922192a2afff27d84a5f259b9cd45532091', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: '1db9b22cee504bc76c98bd6e58e2a618801fa1df', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '652a40efd42d4a355889b2d319dd1b8f0a6243ec', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '584ed372026874627b064dae89a364a7e40b14b7', expanded: true, variant: "readonly" }), this.required &&
|
|
136
|
+
h("mds-input-tip-item", { key: '8d0937ebdaf5a1e725ec2a87564d956d7c5f6eae', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '45a882df504d7eedabda51dc306a680f832b16c0', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'dc4fe2048030fba4708a5d75106a0812111ba7b6', expanded: true, variant: "text" }, this.tip)), this.datalist &&
|
|
137
|
+
h("datalist", { key: '591d9c017b9921447893d2153e258807cd859e70', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
|
|
132
138
|
h("option", { value: element });
|
|
133
|
-
})), this.icon && !this.await && h("mds-icon", { key: '
|
|
139
|
+
})), this.icon && !this.await && h("mds-icon", { key: 'd55d1619946a2b121a80b299e9a80c22dfd13695', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a46633118ba4ae177495063c384cd7279e916258', running: this.await, class: clsx('await', this.variant) })));
|
|
134
140
|
}
|
|
135
141
|
static get is() { return "mds-input"; }
|
|
136
142
|
static get encapsulation() { return "shadow"; }
|
|
@@ -624,7 +630,9 @@ export class MdsInput {
|
|
|
624
630
|
}
|
|
625
631
|
static get states() {
|
|
626
632
|
return {
|
|
627
|
-
"hasFocus": {}
|
|
633
|
+
"hasFocus": {},
|
|
634
|
+
"language": {},
|
|
635
|
+
"isPasswordVisible": {}
|
|
628
636
|
};
|
|
629
637
|
}
|
|
630
638
|
static get events() {
|
|
@@ -197,6 +197,11 @@ Tip.args = {
|
|
|
197
197
|
placeholder: 'Scrivi qualcosa...',
|
|
198
198
|
tip: 'input',
|
|
199
199
|
};
|
|
200
|
+
export const Password = Template.bind({});
|
|
201
|
+
Password.args = {
|
|
202
|
+
type: 'password',
|
|
203
|
+
placeholder: 'Insert a pasword',
|
|
204
|
+
};
|
|
200
205
|
export const Search = Template.bind({});
|
|
201
206
|
Search.args = {
|
|
202
207
|
datalist: citiesDictionary,
|