@maggioli-design-system/magma 1.10.6 → 1.10.8
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/magma-components.cjs.js +1 -1
- package/dist/cjs/mds-input-select.cjs.entry.js +41 -18
- package/dist/cjs/mds-table-row.cjs.entry.js +8 -7
- package/dist/collection/components/mds-input-select/mds-input-select.css +3 -3
- package/dist/collection/components/mds-input-select/mds-input-select.js +60 -17
- package/dist/collection/components/mds-input-select/test/mds-input-select.stories.js +1 -0
- package/dist/collection/components/mds-table-row/mds-table-row.js +8 -7
- package/dist/components/mds-input-select.js +44 -20
- package/dist/components/mds-table-row.js +8 -7
- package/dist/documentation.json +33 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/magma-components.js +1 -1
- package/dist/esm/mds-input-select.entry.js +41 -18
- package/dist/esm/mds-table-row.entry.js +8 -7
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/magma-components.js +1 -1
- package/dist/esm-es5/mds-input-select.entry.js +1 -1
- package/dist/esm-es5/mds-table-row.entry.js +1 -1
- package/dist/hydrate/index.js +51 -26
- package/dist/hydrate/index.mjs +51 -26
- package/dist/magma-components/magma-components.esm.js +1 -1
- package/dist/magma-components/p-26cd6ec8.system.js +1 -1
- package/dist/magma-components/p-2812b739.entry.js +1 -0
- package/dist/magma-components/{p-028dc4fb.system.entry.js → p-3458887d.system.entry.js} +1 -1
- package/dist/magma-components/p-347adbeb.entry.js +1 -0
- package/dist/magma-components/p-7a01206a.system.entry.js +1 -0
- package/dist/stats.json +77 -42
- package/dist/types/components/mds-input-select/mds-input-select.d.ts +14 -1
- package/dist/types/components/mds-input-select/test/mds-input-select.stories.d.ts +1 -0
- package/dist/types/components/mds-table-row/mds-table-row.d.ts +1 -1
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/dist/magma-components/p-045996f1.system.entry.js +0 -1
- package/dist/magma-components/p-4745e425.entry.js +0 -1
- package/dist/magma-components/p-662d3f69.entry.js +0 -1
package/dist/hydrate/index.js
CHANGED
|
@@ -35089,7 +35089,7 @@ class MdsInputRange {
|
|
|
35089
35089
|
}; }
|
|
35090
35090
|
}
|
|
35091
35091
|
|
|
35092
|
-
const mdsInputSelectCss = "@tailwind components;\n\n\n:host{\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 --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\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 min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\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 -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\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 color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:hover),\n:host([variant=\"info\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:hover),\n:host([variant=\"success\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:hover),\n:host([variant=\"warning\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:hover),\n:host([variant=\"error\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
35092
|
+
const mdsInputSelectCss = "@tailwind components;\n\n\n:host{\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 --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\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 min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\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 -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\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 color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([required]:not([required=\"false\"])) .input {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:hover),\n:host([variant=\"info\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:hover),\n:host([variant=\"success\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:hover),\n:host([variant=\"warning\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:hover),\n:host([variant=\"error\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
35093
35093
|
var MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
35094
35094
|
|
|
35095
35095
|
/**
|
|
@@ -35106,6 +35106,7 @@ class MdsInputSelect {
|
|
|
35106
35106
|
this.internals = hostRef.$hostElement$.attachInternals();
|
|
35107
35107
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
35108
35108
|
}
|
|
35109
|
+
// @State() selected: boolean
|
|
35109
35110
|
this.hasFocus = false;
|
|
35110
35111
|
/**
|
|
35111
35112
|
* If true, the element is displayed as disabled
|
|
@@ -35156,10 +35157,9 @@ class MdsInputSelect {
|
|
|
35156
35157
|
});
|
|
35157
35158
|
};
|
|
35158
35159
|
this.onSlotChangeHandler = () => {
|
|
35159
|
-
var _a, _b, _c;
|
|
35160
|
+
var _a, _b, _c, _d;
|
|
35160
35161
|
const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
|
|
35161
|
-
const
|
|
35162
|
-
const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
|
|
35162
|
+
const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
|
|
35163
35163
|
if (!options) {
|
|
35164
35164
|
return;
|
|
35165
35165
|
}
|
|
@@ -35170,19 +35170,16 @@ class MdsInputSelect {
|
|
|
35170
35170
|
this.emptyOptions();
|
|
35171
35171
|
}
|
|
35172
35172
|
elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
|
|
35173
|
-
|
|
35173
|
+
var _a;
|
|
35174
|
+
(_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
|
|
35174
35175
|
});
|
|
35175
|
-
|
|
35176
|
-
|
|
35177
|
-
* selected option that we wanted as a default
|
|
35178
|
-
*/
|
|
35179
|
-
if (this.value) {
|
|
35180
|
-
select === null || select === void 0 ? void 0 : select.querySelectorAll('option').forEach((element) => {
|
|
35176
|
+
if (this.value && this.selectEl) {
|
|
35177
|
+
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
35181
35178
|
element.selected = element.value === this.value;
|
|
35182
35179
|
});
|
|
35183
35180
|
}
|
|
35184
35181
|
else if (!this.placeholder) {
|
|
35185
|
-
this.value =
|
|
35182
|
+
this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
|
|
35186
35183
|
}
|
|
35187
35184
|
};
|
|
35188
35185
|
}
|
|
@@ -35191,7 +35188,6 @@ class MdsInputSelect {
|
|
|
35191
35188
|
*/
|
|
35192
35189
|
valueChanged() {
|
|
35193
35190
|
var _a, _b, _c;
|
|
35194
|
-
this.selected = this.value !== '';
|
|
35195
35191
|
this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
|
|
35196
35192
|
this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
|
|
35197
35193
|
}
|
|
@@ -35205,24 +35201,52 @@ class MdsInputSelect {
|
|
|
35205
35201
|
this.internals.setFormValue(null);
|
|
35206
35202
|
}
|
|
35207
35203
|
}
|
|
35204
|
+
/**
|
|
35205
|
+
* This is for the react component because placeholder is valued after didload
|
|
35206
|
+
* and therefore the placeholder option is drawn as the last option.
|
|
35207
|
+
* Here the option is brought back to the first position
|
|
35208
|
+
* @param newValue placeholder new value
|
|
35209
|
+
* @param oldValue placeholder old value
|
|
35210
|
+
*/
|
|
35211
|
+
placeholderChanged(newValue, oldValue) {
|
|
35212
|
+
if (newValue && !oldValue) {
|
|
35213
|
+
let defaultOption = document.querySelector('.placeholder-option');
|
|
35214
|
+
if (defaultOption)
|
|
35215
|
+
defaultOption.remove();
|
|
35216
|
+
defaultOption = document.createElement('option');
|
|
35217
|
+
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
35218
|
+
defaultOption.value = '';
|
|
35219
|
+
defaultOption.text = newValue;
|
|
35220
|
+
if (!this.defaultValue)
|
|
35221
|
+
defaultOption.selected = true;
|
|
35222
|
+
if (this.required)
|
|
35223
|
+
defaultOption.disabled = true;
|
|
35224
|
+
}
|
|
35225
|
+
}
|
|
35208
35226
|
formResetCallback() {
|
|
35209
35227
|
this.internals.setFormValue('');
|
|
35210
35228
|
}
|
|
35229
|
+
componentWillLoad() {
|
|
35230
|
+
// needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
|
|
35231
|
+
if (this.defaultValue) {
|
|
35232
|
+
this.value = this.defaultValue;
|
|
35233
|
+
}
|
|
35234
|
+
}
|
|
35211
35235
|
componentDidLoad() {
|
|
35212
35236
|
if (this.value) {
|
|
35213
|
-
this.selected = true;
|
|
35214
35237
|
this.internals.setFormValue(this.value.toString());
|
|
35215
35238
|
}
|
|
35216
35239
|
}
|
|
35217
35240
|
render() {
|
|
35218
|
-
return (hAsync(Host, { key: '
|
|
35219
|
-
hAsync("mds-input-tip-item", { key: '
|
|
35241
|
+
return (hAsync(Host, { key: '2f4a0c12b02e735f13102477b670de1d305d4e74' }, hAsync("select", { key: 'af74a6d8be051aa97efe469f02c634b5afb17090', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, hAsync("option", { key: 'eed3a91bff7759bf8861dbf8ac2d2ea133e16a55', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), hAsync("div", { key: '17d85258b38d73baff10b052676fa12e3c07a57e', class: "icon-container" }, hAsync("i", { key: 'a205484c8af4681f9d40c04769220898ebc3bf77', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), hAsync("div", { key: '8f61e86c19b7a7e8ed9ae9a50e31daa4784a4455', class: "option-container" }, hAsync("slot", { key: '425f44dd0376cb0dc9155c9090d2faffaa18a9df', onSlotchange: this.onSlotChangeHandler })), hAsync("mds-input-tip", { key: '0c2cbe8bec30637844b408242be54c471a221e30', position: "top", active: this.hasFocus }, this.disabled && hAsync("mds-input-tip-item", { key: '60bb927f181184b04e6cc703c445f516f77104e0', expanded: true, variant: "disabled" }), this.required &&
|
|
35242
|
+
hAsync("mds-input-tip-item", { key: '575b39745f3ecd81165dbf4b3c82ad64b5227403', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
35220
35243
|
}
|
|
35221
35244
|
static get formAssociated() { return true; }
|
|
35222
35245
|
get host() { return getElement(this); }
|
|
35223
35246
|
static get watchers() { return {
|
|
35224
35247
|
"value": ["valueChanged"],
|
|
35225
|
-
"disabled": ["disabledChanged"]
|
|
35248
|
+
"disabled": ["disabledChanged"],
|
|
35249
|
+
"placeholder": ["placeholderChanged"]
|
|
35226
35250
|
}; }
|
|
35227
35251
|
static get style() { return MdsInputSelectStyle0; }
|
|
35228
35252
|
static get cmpMeta() { return {
|
|
@@ -35238,13 +35262,13 @@ class MdsInputSelect {
|
|
|
35238
35262
|
"multiple": [516],
|
|
35239
35263
|
"size": [514],
|
|
35240
35264
|
"value": [520],
|
|
35265
|
+
"defaultValue": [520, "default-value"],
|
|
35241
35266
|
"variant": [513],
|
|
35242
|
-
"selected": [32],
|
|
35243
35267
|
"hasFocus": [32]
|
|
35244
35268
|
},
|
|
35245
35269
|
"$listeners$": undefined,
|
|
35246
35270
|
"$lazyBundleId$": "-",
|
|
35247
|
-
"$attrsToReflect$": [["autocomplete", "autocomplete"], ["autoFocus", "auto-focus"], ["placeholder", "placeholder"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["multiple", "multiple"], ["size", "size"], ["value", "value"], ["variant", "variant"]]
|
|
35271
|
+
"$attrsToReflect$": [["autocomplete", "autocomplete"], ["autoFocus", "auto-focus"], ["placeholder", "placeholder"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["multiple", "multiple"], ["size", "size"], ["value", "value"], ["defaultValue", "default-value"], ["variant", "variant"]]
|
|
35248
35272
|
}; }
|
|
35249
35273
|
}
|
|
35250
35274
|
|
|
@@ -42799,19 +42823,20 @@ class MdsTableRow {
|
|
|
42799
42823
|
this.observer.observe(this.actions);
|
|
42800
42824
|
}
|
|
42801
42825
|
disconnectedCallback() {
|
|
42802
|
-
this.observer
|
|
42826
|
+
if (this.observer)
|
|
42827
|
+
this.observer.disconnect();
|
|
42803
42828
|
}
|
|
42804
42829
|
render() {
|
|
42805
|
-
return (hAsync(Host, { key: '
|
|
42806
|
-
hAsync("mds-table-cell", { key: '
|
|
42807
|
-
hAsync("mds-table-cell", { key: '
|
|
42808
|
-
hAsync("mds-table-cell", { key: '
|
|
42830
|
+
return (hAsync(Host, { key: 'c0e67a5763f47d180b02a5a3ca85f7164708a60f', role: "row" }, this.selectable &&
|
|
42831
|
+
hAsync("mds-table-cell", { key: '0f55b635bf14f1a5051a4f5438e06424dbf33573', class: "selection-cell" }, hAsync("div", { key: 'bf032a097ae262c64c60cca5d0459726229592c5', class: "checkbox-wrapper" }, hAsync("mds-input-switch", { key: '76b8caf51030115bbda38f71ce237d8f9bfbcf02', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), hAsync("slot", { key: '5e1bdd763f5eec6cb7df2a84775284403c54bdee' }), this.hasActions && isSafari() &&
|
|
42832
|
+
hAsync("mds-table-cell", { key: '5496b73c5e1c84f52209f06f8615b35ec72c02fd', class: "actions-cell actions-cell--disable" }, hAsync("div", { key: '49a200874c6f7183b0aea31b6f781132f5e71f9f', class: "actions" }, hAsync("slot", { key: 'd1819cf376deba84c2e92d4c942b40744bcf9cc9', name: "action" }))), this.hasActions && !isSafari() &&
|
|
42833
|
+
hAsync("mds-table-cell", { key: '0e8a947018302174747d53d0343592698ec84b04', class: "actions-cell" }, hAsync("div", { key: 'fe19579e1d1f937f784415221414def39a77bcec', class: "actions-sizer", style: {
|
|
42809
42834
|
minHeight: '1px',
|
|
42810
42835
|
maxWidth: this.sizerWidth,
|
|
42811
42836
|
minWidth: this.sizerWidth,
|
|
42812
|
-
} }), hAsync("div", { key: '
|
|
42837
|
+
} }), hAsync("div", { key: 'cd0c5cf2da7ea6252a68d0a093f6abdb3b2dd90d', class: "actions-view" }, hAsync("div", { key: 'c6b731c14457f0f36b114d1d258e75efc6842f06', class: "actions", ref: el => this.actions = el, style: {
|
|
42813
42838
|
marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
|
|
42814
|
-
} }, hAsync("slot", { key: '
|
|
42839
|
+
} }, hAsync("slot", { key: '8c6c55a4d759fb04d1f0ae13a6263bb01dc4878e', name: "action" }))))));
|
|
42815
42840
|
}
|
|
42816
42841
|
get host() { return getElement(this); }
|
|
42817
42842
|
static get style() { return MdsTableRowStyle0; }
|
package/dist/hydrate/index.mjs
CHANGED
|
@@ -35085,7 +35085,7 @@ class MdsInputRange {
|
|
|
35085
35085
|
}; }
|
|
35086
35086
|
}
|
|
35087
35087
|
|
|
35088
|
-
const mdsInputSelectCss = "@tailwind components;\n\n\n:host{\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 --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\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 min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\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 -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\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 color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:hover),\n:host([variant=\"info\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:hover),\n:host([variant=\"success\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:hover),\n:host([variant=\"warning\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:hover),\n:host([variant=\"error\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
35088
|
+
const mdsInputSelectCss = "@tailwind components;\n\n\n:host{\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 --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\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 min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\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 -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\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 color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([required]:not([required=\"false\"])) .input {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:hover),\n:host([variant=\"info\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:hover),\n:host([variant=\"success\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:hover),\n:host([variant=\"warning\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:hover),\n:host([variant=\"error\"]:focus-within) {\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
35089
35089
|
var MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
35090
35090
|
|
|
35091
35091
|
/**
|
|
@@ -35102,6 +35102,7 @@ class MdsInputSelect {
|
|
|
35102
35102
|
this.internals = hostRef.$hostElement$.attachInternals();
|
|
35103
35103
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
35104
35104
|
}
|
|
35105
|
+
// @State() selected: boolean
|
|
35105
35106
|
this.hasFocus = false;
|
|
35106
35107
|
/**
|
|
35107
35108
|
* If true, the element is displayed as disabled
|
|
@@ -35152,10 +35153,9 @@ class MdsInputSelect {
|
|
|
35152
35153
|
});
|
|
35153
35154
|
};
|
|
35154
35155
|
this.onSlotChangeHandler = () => {
|
|
35155
|
-
var _a, _b, _c;
|
|
35156
|
+
var _a, _b, _c, _d;
|
|
35156
35157
|
const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
|
|
35157
|
-
const
|
|
35158
|
-
const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
|
|
35158
|
+
const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
|
|
35159
35159
|
if (!options) {
|
|
35160
35160
|
return;
|
|
35161
35161
|
}
|
|
@@ -35166,19 +35166,16 @@ class MdsInputSelect {
|
|
|
35166
35166
|
this.emptyOptions();
|
|
35167
35167
|
}
|
|
35168
35168
|
elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
|
|
35169
|
-
|
|
35169
|
+
var _a;
|
|
35170
|
+
(_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
|
|
35170
35171
|
});
|
|
35171
|
-
|
|
35172
|
-
|
|
35173
|
-
* selected option that we wanted as a default
|
|
35174
|
-
*/
|
|
35175
|
-
if (this.value) {
|
|
35176
|
-
select === null || select === void 0 ? void 0 : select.querySelectorAll('option').forEach((element) => {
|
|
35172
|
+
if (this.value && this.selectEl) {
|
|
35173
|
+
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
35177
35174
|
element.selected = element.value === this.value;
|
|
35178
35175
|
});
|
|
35179
35176
|
}
|
|
35180
35177
|
else if (!this.placeholder) {
|
|
35181
|
-
this.value =
|
|
35178
|
+
this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
|
|
35182
35179
|
}
|
|
35183
35180
|
};
|
|
35184
35181
|
}
|
|
@@ -35187,7 +35184,6 @@ class MdsInputSelect {
|
|
|
35187
35184
|
*/
|
|
35188
35185
|
valueChanged() {
|
|
35189
35186
|
var _a, _b, _c;
|
|
35190
|
-
this.selected = this.value !== '';
|
|
35191
35187
|
this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
|
|
35192
35188
|
this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
|
|
35193
35189
|
}
|
|
@@ -35201,24 +35197,52 @@ class MdsInputSelect {
|
|
|
35201
35197
|
this.internals.setFormValue(null);
|
|
35202
35198
|
}
|
|
35203
35199
|
}
|
|
35200
|
+
/**
|
|
35201
|
+
* This is for the react component because placeholder is valued after didload
|
|
35202
|
+
* and therefore the placeholder option is drawn as the last option.
|
|
35203
|
+
* Here the option is brought back to the first position
|
|
35204
|
+
* @param newValue placeholder new value
|
|
35205
|
+
* @param oldValue placeholder old value
|
|
35206
|
+
*/
|
|
35207
|
+
placeholderChanged(newValue, oldValue) {
|
|
35208
|
+
if (newValue && !oldValue) {
|
|
35209
|
+
let defaultOption = document.querySelector('.placeholder-option');
|
|
35210
|
+
if (defaultOption)
|
|
35211
|
+
defaultOption.remove();
|
|
35212
|
+
defaultOption = document.createElement('option');
|
|
35213
|
+
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
35214
|
+
defaultOption.value = '';
|
|
35215
|
+
defaultOption.text = newValue;
|
|
35216
|
+
if (!this.defaultValue)
|
|
35217
|
+
defaultOption.selected = true;
|
|
35218
|
+
if (this.required)
|
|
35219
|
+
defaultOption.disabled = true;
|
|
35220
|
+
}
|
|
35221
|
+
}
|
|
35204
35222
|
formResetCallback() {
|
|
35205
35223
|
this.internals.setFormValue('');
|
|
35206
35224
|
}
|
|
35225
|
+
componentWillLoad() {
|
|
35226
|
+
// needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
|
|
35227
|
+
if (this.defaultValue) {
|
|
35228
|
+
this.value = this.defaultValue;
|
|
35229
|
+
}
|
|
35230
|
+
}
|
|
35207
35231
|
componentDidLoad() {
|
|
35208
35232
|
if (this.value) {
|
|
35209
|
-
this.selected = true;
|
|
35210
35233
|
this.internals.setFormValue(this.value.toString());
|
|
35211
35234
|
}
|
|
35212
35235
|
}
|
|
35213
35236
|
render() {
|
|
35214
|
-
return (hAsync(Host, { key: '
|
|
35215
|
-
hAsync("mds-input-tip-item", { key: '
|
|
35237
|
+
return (hAsync(Host, { key: '2f4a0c12b02e735f13102477b670de1d305d4e74' }, hAsync("select", { key: 'af74a6d8be051aa97efe469f02c634b5afb17090', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, hAsync("option", { key: 'eed3a91bff7759bf8861dbf8ac2d2ea133e16a55', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), hAsync("div", { key: '17d85258b38d73baff10b052676fa12e3c07a57e', class: "icon-container" }, hAsync("i", { key: 'a205484c8af4681f9d40c04769220898ebc3bf77', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), hAsync("div", { key: '8f61e86c19b7a7e8ed9ae9a50e31daa4784a4455', class: "option-container" }, hAsync("slot", { key: '425f44dd0376cb0dc9155c9090d2faffaa18a9df', onSlotchange: this.onSlotChangeHandler })), hAsync("mds-input-tip", { key: '0c2cbe8bec30637844b408242be54c471a221e30', position: "top", active: this.hasFocus }, this.disabled && hAsync("mds-input-tip-item", { key: '60bb927f181184b04e6cc703c445f516f77104e0', expanded: true, variant: "disabled" }), this.required &&
|
|
35238
|
+
hAsync("mds-input-tip-item", { key: '575b39745f3ecd81165dbf4b3c82ad64b5227403', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
35216
35239
|
}
|
|
35217
35240
|
static get formAssociated() { return true; }
|
|
35218
35241
|
get host() { return getElement(this); }
|
|
35219
35242
|
static get watchers() { return {
|
|
35220
35243
|
"value": ["valueChanged"],
|
|
35221
|
-
"disabled": ["disabledChanged"]
|
|
35244
|
+
"disabled": ["disabledChanged"],
|
|
35245
|
+
"placeholder": ["placeholderChanged"]
|
|
35222
35246
|
}; }
|
|
35223
35247
|
static get style() { return MdsInputSelectStyle0; }
|
|
35224
35248
|
static get cmpMeta() { return {
|
|
@@ -35234,13 +35258,13 @@ class MdsInputSelect {
|
|
|
35234
35258
|
"multiple": [516],
|
|
35235
35259
|
"size": [514],
|
|
35236
35260
|
"value": [520],
|
|
35261
|
+
"defaultValue": [520, "default-value"],
|
|
35237
35262
|
"variant": [513],
|
|
35238
|
-
"selected": [32],
|
|
35239
35263
|
"hasFocus": [32]
|
|
35240
35264
|
},
|
|
35241
35265
|
"$listeners$": undefined,
|
|
35242
35266
|
"$lazyBundleId$": "-",
|
|
35243
|
-
"$attrsToReflect$": [["autocomplete", "autocomplete"], ["autoFocus", "auto-focus"], ["placeholder", "placeholder"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["multiple", "multiple"], ["size", "size"], ["value", "value"], ["variant", "variant"]]
|
|
35267
|
+
"$attrsToReflect$": [["autocomplete", "autocomplete"], ["autoFocus", "auto-focus"], ["placeholder", "placeholder"], ["name", "name"], ["disabled", "disabled"], ["required", "required"], ["multiple", "multiple"], ["size", "size"], ["value", "value"], ["defaultValue", "default-value"], ["variant", "variant"]]
|
|
35244
35268
|
}; }
|
|
35245
35269
|
}
|
|
35246
35270
|
|
|
@@ -42795,19 +42819,20 @@ class MdsTableRow {
|
|
|
42795
42819
|
this.observer.observe(this.actions);
|
|
42796
42820
|
}
|
|
42797
42821
|
disconnectedCallback() {
|
|
42798
|
-
this.observer
|
|
42822
|
+
if (this.observer)
|
|
42823
|
+
this.observer.disconnect();
|
|
42799
42824
|
}
|
|
42800
42825
|
render() {
|
|
42801
|
-
return (hAsync(Host, { key: '
|
|
42802
|
-
hAsync("mds-table-cell", { key: '
|
|
42803
|
-
hAsync("mds-table-cell", { key: '
|
|
42804
|
-
hAsync("mds-table-cell", { key: '
|
|
42826
|
+
return (hAsync(Host, { key: 'c0e67a5763f47d180b02a5a3ca85f7164708a60f', role: "row" }, this.selectable &&
|
|
42827
|
+
hAsync("mds-table-cell", { key: '0f55b635bf14f1a5051a4f5438e06424dbf33573', class: "selection-cell" }, hAsync("div", { key: 'bf032a097ae262c64c60cca5d0459726229592c5', class: "checkbox-wrapper" }, hAsync("mds-input-switch", { key: '76b8caf51030115bbda38f71ce237d8f9bfbcf02', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), hAsync("slot", { key: '5e1bdd763f5eec6cb7df2a84775284403c54bdee' }), this.hasActions && isSafari() &&
|
|
42828
|
+
hAsync("mds-table-cell", { key: '5496b73c5e1c84f52209f06f8615b35ec72c02fd', class: "actions-cell actions-cell--disable" }, hAsync("div", { key: '49a200874c6f7183b0aea31b6f781132f5e71f9f', class: "actions" }, hAsync("slot", { key: 'd1819cf376deba84c2e92d4c942b40744bcf9cc9', name: "action" }))), this.hasActions && !isSafari() &&
|
|
42829
|
+
hAsync("mds-table-cell", { key: '0e8a947018302174747d53d0343592698ec84b04', class: "actions-cell" }, hAsync("div", { key: 'fe19579e1d1f937f784415221414def39a77bcec', class: "actions-sizer", style: {
|
|
42805
42830
|
minHeight: '1px',
|
|
42806
42831
|
maxWidth: this.sizerWidth,
|
|
42807
42832
|
minWidth: this.sizerWidth,
|
|
42808
|
-
} }), hAsync("div", { key: '
|
|
42833
|
+
} }), hAsync("div", { key: 'cd0c5cf2da7ea6252a68d0a093f6abdb3b2dd90d', class: "actions-view" }, hAsync("div", { key: 'c6b731c14457f0f36b114d1d258e75efc6842f06', class: "actions", ref: el => this.actions = el, style: {
|
|
42809
42834
|
marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
|
|
42810
|
-
} }, hAsync("slot", { key: '
|
|
42835
|
+
} }, hAsync("slot", { key: '8c6c55a4d759fb04d1f0ae13a6263bb01dc4878e', name: "action" }))))));
|
|
42811
42836
|
}
|
|
42812
42837
|
get host() { return getElement(this); }
|
|
42813
42838
|
static get style() { return MdsTableRowStyle0; }
|