@nanoporetech-digital/components 2.8.0 → 2.9.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/CHANGELOG.md +17 -0
- package/dist/cjs/{form-control-8f530f7d.js → form-control-d54a847f.js} +26 -19
- package/dist/cjs/form-control-d54a847f.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nano-components.cjs.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +4 -3
- package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-input.cjs.entry.js +12 -8
- package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-nav-item_2.cjs.entry.js +14 -9
- package/dist/cjs/nano-nav-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js +6 -4
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.js +1 -1
- package/dist/collection/components/alert/alert.js +1 -1
- package/dist/collection/components/algolia/algolia-filter.js +2 -2
- package/dist/collection/components/algolia/algolia-input.js +5 -5
- package/dist/collection/components/algolia/algolia-results.js +1 -1
- package/dist/collection/components/algolia/algolia.js +6 -6
- package/dist/collection/components/checkbox/checkbox-group.js +2 -2
- package/dist/collection/components/checkbox/checkbox.js +3 -3
- package/dist/collection/components/datalist/datalist.js +4 -2
- package/dist/collection/components/datalist/datalist.js.map +1 -1
- package/dist/collection/components/date-input/date-input.js +7 -7
- package/dist/collection/components/date-picker/date-picker.js +5 -5
- package/dist/collection/components/details/details.js +1 -1
- package/dist/collection/components/dialog/dialog.js +1 -1
- package/dist/collection/components/dropdown/dropdown.js +1 -1
- package/dist/collection/components/file-upload/file-upload.js +4 -4
- package/dist/collection/components/form-control/form-control.js +25 -18
- package/dist/collection/components/form-control/form-control.js.map +1 -1
- package/dist/collection/components/global-nav/global-nav.js +4 -4
- package/dist/collection/components/grid/grid-item.js +1 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/input/input.css +54 -3
- package/dist/collection/components/input/input.js +19 -12
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/menu/menu.js +1 -2
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/nav-item/nav-item.js +4 -4
- package/dist/collection/components/range/range.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +7 -6
- package/dist/collection/components/resize-observe/resize-observe.js.map +1 -1
- package/dist/collection/components/select/select.css +57 -3
- package/dist/collection/components/select/select.js +21 -14
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/slides/slides.js +7 -7
- package/dist/collection/components/tabs/tab-group.js +2 -2
- package/dist/components/datalist.js +3 -1
- package/dist/components/datalist.js.map +1 -1
- package/dist/components/form-control.js +25 -18
- package/dist/components/form-control.js.map +1 -1
- package/dist/components/input.js +13 -8
- package/dist/components/input.js.map +1 -1
- package/dist/components/menu.js +1 -2
- package/dist/components/menu.js.map +1 -1
- package/dist/components/resize-observe.js +6 -4
- package/dist/components/resize-observe.js.map +1 -1
- package/dist/components/select.js +14 -8
- package/dist/components/select.js.map +1 -1
- package/dist/custom-elements/index.js +61 -42
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/{form-control-c52b6256.js → form-control-cf23c6a2.js} +26 -19
- package/dist/esm/form-control-cf23c6a2.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nano-components.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +4 -3
- package/dist/esm/nano-datalist_3.entry.js.map +1 -1
- package/dist/esm/nano-input.entry.js +12 -8
- package/dist/esm/nano-input.entry.js.map +1 -1
- package/dist/esm/nano-nav-item_2.entry.js +14 -9
- package/dist/esm/nano-nav-item_2.entry.js.map +1 -1
- package/dist/esm/nano-resize-observe_2.entry.js +6 -4
- package/dist/esm/nano-resize-observe_2.entry.js.map +1 -1
- package/dist/esm-es5/form-control-cf23c6a2.js +5 -0
- package/dist/esm-es5/form-control-cf23c6a2.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/nano-components.js +1 -1
- package/dist/esm-es5/nano-components.js.map +1 -1
- package/dist/esm-es5/nano-datalist_3.entry.js +1 -1
- package/dist/esm-es5/nano-datalist_3.entry.js.map +1 -1
- package/dist/esm-es5/nano-input.entry.js +1 -1
- package/dist/esm-es5/nano-input.entry.js.map +1 -1
- package/dist/esm-es5/nano-nav-item_2.entry.js +1 -1
- package/dist/esm-es5/nano-nav-item_2.entry.js.map +1 -1
- package/dist/esm-es5/nano-resize-observe_2.entry.js +2 -2
- package/dist/esm-es5/nano-resize-observe_2.entry.js.map +1 -1
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-components.esm.js.map +1 -1
- package/dist/nano-components/p-096682d9.system.js +1 -1
- package/dist/nano-components/p-096682d9.system.js.map +1 -1
- package/dist/nano-components/p-1ca46443.entry.js +5 -0
- package/dist/nano-components/p-1ca46443.entry.js.map +1 -0
- package/dist/nano-components/p-39a5280e.system.entry.js +5 -0
- package/dist/nano-components/p-39a5280e.system.entry.js.map +1 -0
- package/dist/nano-components/p-44c08842.system.entry.js +5 -0
- package/dist/nano-components/p-44c08842.system.entry.js.map +1 -0
- package/dist/nano-components/p-6eb25600.system.js +5 -0
- package/dist/nano-components/p-6eb25600.system.js.map +1 -0
- package/dist/nano-components/p-6f94d755.entry.js +5 -0
- package/dist/nano-components/p-6f94d755.entry.js.map +1 -0
- package/dist/nano-components/p-84767e87.entry.js +5 -0
- package/dist/nano-components/p-84767e87.entry.js.map +1 -0
- package/dist/nano-components/p-933c35a6.system.entry.js +5 -0
- package/dist/nano-components/p-933c35a6.system.entry.js.map +1 -0
- package/dist/nano-components/p-971b40a4.system.entry.js +5 -0
- package/dist/nano-components/p-971b40a4.system.entry.js.map +1 -0
- package/dist/nano-components/p-9ea13fbe.entry.js +5 -0
- package/dist/nano-components/p-9ea13fbe.entry.js.map +1 -0
- package/dist/nano-components/p-a6c84740.js +5 -0
- package/dist/nano-components/p-a6c84740.js.map +1 -0
- package/dist/types/components/form-control/form-control.d.ts +2 -0
- package/dist/types/components/input/input.d.ts +3 -0
- package/dist/types/components/resize-observe/resize-observe.d.ts +0 -1
- package/dist/types/components/select/select.d.ts +2 -0
- package/docs-json.json +19 -3
- package/docs-vscode.json +1 -1
- package/package.json +2 -2
- package/dist/cjs/form-control-8f530f7d.js.map +0 -1
- package/dist/esm/form-control-c52b6256.js.map +0 -1
- package/dist/esm-es5/form-control-c52b6256.js +0 -5
- package/dist/esm-es5/form-control-c52b6256.js.map +0 -1
- package/dist/nano-components/p-0618fac6.system.entry.js +0 -5
- package/dist/nano-components/p-0618fac6.system.entry.js.map +0 -1
- package/dist/nano-components/p-173bae15.system.entry.js +0 -5
- package/dist/nano-components/p-173bae15.system.entry.js.map +0 -1
- package/dist/nano-components/p-18176c26.system.entry.js +0 -5
- package/dist/nano-components/p-18176c26.system.entry.js.map +0 -1
- package/dist/nano-components/p-4ee978ff.entry.js +0 -5
- package/dist/nano-components/p-4ee978ff.entry.js.map +0 -1
- package/dist/nano-components/p-5e7c7d3d.entry.js +0 -5
- package/dist/nano-components/p-5e7c7d3d.entry.js.map +0 -1
- package/dist/nano-components/p-829d7f05.system.entry.js +0 -5
- package/dist/nano-components/p-829d7f05.system.entry.js.map +0 -1
- package/dist/nano-components/p-aaef7cc7.js +0 -5
- package/dist/nano-components/p-aaef7cc7.js.map +0 -1
- package/dist/nano-components/p-af7abf5e.entry.js +0 -5
- package/dist/nano-components/p-af7abf5e.entry.js.map +0 -1
- package/dist/nano-components/p-df0897ec.system.js +0 -5
- package/dist/nano-components/p-df0897ec.system.js.map +0 -1
- package/dist/nano-components/p-f79c3ea0.entry.js +0 -5
- package/dist/nano-components/p-f79c3ea0.entry.js.map +0 -1
|
@@ -7703,10 +7703,12 @@ let DataList = class extends H {
|
|
|
7703
7703
|
};
|
|
7704
7704
|
// sets focus immediately on open when 'select' - mirroring native behaviour
|
|
7705
7705
|
this.handleShow = async () => {
|
|
7706
|
-
if (this.
|
|
7706
|
+
if (this.shouldFocus) {
|
|
7707
7707
|
this.shouldFocus = false;
|
|
7708
7708
|
this.listBox.setFocus();
|
|
7709
7709
|
}
|
|
7710
|
+
else if (this.type === 'select')
|
|
7711
|
+
this.listBox.showActiveElement();
|
|
7710
7712
|
};
|
|
7711
7713
|
this.inputClick = () => {
|
|
7712
7714
|
this.shouldOpen = true;
|
|
@@ -15532,7 +15534,8 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
|
|
|
15532
15534
|
if (floatLabel) {
|
|
15533
15535
|
return (h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
|
|
15534
15536
|
label && label,
|
|
15535
|
-
!label && hasLabelSlot && h("slot", { name: "label" })
|
|
15537
|
+
!label && hasLabelSlot && h("slot", { name: "label" }),
|
|
15538
|
+
showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
|
|
15536
15539
|
}
|
|
15537
15540
|
else {
|
|
15538
15541
|
return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
|
|
@@ -15552,23 +15555,29 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
|
|
|
15552
15555
|
}
|
|
15553
15556
|
};
|
|
15554
15557
|
const FormControlWrap = (props, children) => {
|
|
15555
|
-
const { rtl, floatLabel, label, moreId, type, hasHelperSlot, showInlineError, errorMessage, } = props;
|
|
15556
|
-
|
|
15557
|
-
|
|
15558
|
-
|
|
15559
|
-
|
|
15560
|
-
|
|
15561
|
-
|
|
15562
|
-
|
|
15563
|
-
|
|
15564
|
-
|
|
15565
|
-
floatLabel
|
|
15566
|
-
|
|
15567
|
-
|
|
15568
|
-
|
|
15569
|
-
|
|
15570
|
-
|
|
15571
|
-
|
|
15558
|
+
const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
|
|
15559
|
+
const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';
|
|
15560
|
+
return (h(MainTag, { states: "350w has-enough-width", class: {
|
|
15561
|
+
'has-label': label !== null && !floatLabel,
|
|
15562
|
+
'has-float-label': label !== null && floatLabel,
|
|
15563
|
+
'has-helper-end': hasHelperEndSlot,
|
|
15564
|
+
rtl,
|
|
15565
|
+
'form-ctrl': true,
|
|
15566
|
+
} },
|
|
15567
|
+
h("div", { class: "form-ctrl__wrapper" },
|
|
15568
|
+
!floatLabel ? renderLabel(Object.assign({}, props)) : '',
|
|
15569
|
+
h("div", { class: {
|
|
15570
|
+
'form-ctrl__input': true,
|
|
15571
|
+
'form-ctrl__textarea': type === 'textarea',
|
|
15572
|
+
} },
|
|
15573
|
+
floatLabel && renderLabel(Object.assign(Object.assign({}, props), { rtl })),
|
|
15574
|
+
children),
|
|
15575
|
+
showInlineError || hasHelperSlot ? (h("div", { class: "form-ctrl__more", id: moreId },
|
|
15576
|
+
!!showInlineError ? (h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)) : (''),
|
|
15577
|
+
h("div", { class: "form-ctrl__helper" },
|
|
15578
|
+
h("slot", { name: "helper" })))) : ('')),
|
|
15579
|
+
hasHelperEndSlot ? (h("div", { class: "form-ctrl__helper-end", id: helperEndId },
|
|
15580
|
+
h("slot", { name: "helper-end" }))) : ('')));
|
|
15572
15581
|
};
|
|
15573
15582
|
const FormControl = (props, children) => {
|
|
15574
15583
|
const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
|
|
@@ -15593,7 +15602,7 @@ const FormControl = (props, children) => {
|
|
|
15593
15602
|
endSlot)));
|
|
15594
15603
|
};
|
|
15595
15604
|
|
|
15596
|
-
const inputCss = ".sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:inline-block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.7em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
|
|
15605
|
+
const inputCss = ".sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
|
|
15597
15606
|
|
|
15598
15607
|
let inputIds = 0;
|
|
15599
15608
|
let Input = class extends H {
|
|
@@ -15615,6 +15624,7 @@ let Input = class extends H {
|
|
|
15615
15624
|
this.hasFocus = false;
|
|
15616
15625
|
this.hasLabelSlot = false;
|
|
15617
15626
|
this.hasHelperSlot = false;
|
|
15627
|
+
this.hasHelperEndSlot = false;
|
|
15618
15628
|
this.errorMessage = '';
|
|
15619
15629
|
this.datalist = null;
|
|
15620
15630
|
this._invalid = false;
|
|
@@ -15719,8 +15729,7 @@ let Input = class extends H {
|
|
|
15719
15729
|
};
|
|
15720
15730
|
this.onInput = (ev) => {
|
|
15721
15731
|
const input = ev.target;
|
|
15722
|
-
|
|
15723
|
-
this.value = input.value || '';
|
|
15732
|
+
this.value = (input === null || input === void 0 ? void 0 : input.value) || '';
|
|
15724
15733
|
this.nanoInput.emit(ev);
|
|
15725
15734
|
};
|
|
15726
15735
|
this.onBlur = () => {
|
|
@@ -15896,6 +15905,7 @@ let Input = class extends H {
|
|
|
15896
15905
|
// see if we have label / button content
|
|
15897
15906
|
this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]');
|
|
15898
15907
|
this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
|
|
15908
|
+
this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
|
|
15899
15909
|
this.datalist = this.el.querySelector('nano-datalist:not([slot])');
|
|
15900
15910
|
// breaking change introduced in v2. Rm in v3
|
|
15901
15911
|
if (!!this.el.querySelector('[slot="inline-button"]')) {
|
|
@@ -15936,8 +15946,9 @@ let Input = class extends H {
|
|
|
15936
15946
|
const value = this.getValue();
|
|
15937
15947
|
const labelId = this.inputId + '-lbl';
|
|
15938
15948
|
const moreId = this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';
|
|
15949
|
+
const helperEndId = this.hasHelperEndSlot ? this.inputId + '-helper' : '';
|
|
15939
15950
|
this.rtl = this.el.ownerDocument.dir === 'rtl';
|
|
15940
|
-
const compWrapOptions = (({ el, floatLabel, label, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, }) => ({
|
|
15951
|
+
const compWrapOptions = (({ el, floatLabel, label, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, hasHelperEndSlot, }) => ({
|
|
15941
15952
|
el,
|
|
15942
15953
|
floatLabel,
|
|
15943
15954
|
label,
|
|
@@ -15952,19 +15963,21 @@ let Input = class extends H {
|
|
|
15952
15963
|
charCount,
|
|
15953
15964
|
showCharCount,
|
|
15954
15965
|
rtl,
|
|
15966
|
+
hasHelperEndSlot,
|
|
15955
15967
|
}))(this);
|
|
15956
15968
|
const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
|
|
15957
|
-
moreId,
|
|
15969
|
+
moreId,
|
|
15970
|
+
helperEndId, hasValue: this.hasValue(), controlId: this.inputId });
|
|
15958
15971
|
const controlOptions = (({ clearInput, readonly, disabled }) => ({
|
|
15959
15972
|
clearInput,
|
|
15960
15973
|
readonly,
|
|
15961
15974
|
disabled,
|
|
15962
15975
|
clearControl: this.clearInput,
|
|
15963
15976
|
}))(this);
|
|
15964
|
-
return (h$1(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h$1("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h$1("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
|
|
15977
|
+
return (h$1(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h$1("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h$1("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
|
|
15965
15978
|
'input__native-ctrl': true,
|
|
15966
15979
|
input__resizable: this.resize === 'true',
|
|
15967
|
-
}, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))), h$1("slot", null))));
|
|
15980
|
+
}, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))), h$1("slot", null))));
|
|
15968
15981
|
}
|
|
15969
15982
|
get el() { return this; }
|
|
15970
15983
|
static get watchers() { return {
|
|
@@ -16133,8 +16146,7 @@ let Menu = class extends H {
|
|
|
16133
16146
|
i.classList.contains('has-focus'));
|
|
16134
16147
|
}
|
|
16135
16148
|
get selectedItem() {
|
|
16136
|
-
|
|
16137
|
-
return this.getItems.find((i) => i.selected || i === activeElement);
|
|
16149
|
+
return this.getItems.find((i) => i.selected);
|
|
16138
16150
|
}
|
|
16139
16151
|
async setActiveFocusItem(item, focus = true) {
|
|
16140
16152
|
const items = this.getItems;
|
|
@@ -17363,6 +17375,8 @@ let ResizeObserve = class extends H {
|
|
|
17363
17375
|
});
|
|
17364
17376
|
if (hasChanged)
|
|
17365
17377
|
this.applyChanges(changedStates);
|
|
17378
|
+
else if (!this.classNames.includes('is-ready'))
|
|
17379
|
+
this.classNames = ['is-ready'];
|
|
17366
17380
|
};
|
|
17367
17381
|
}
|
|
17368
17382
|
dimensionChanged() {
|
|
@@ -17409,7 +17423,7 @@ let ResizeObserve = class extends H {
|
|
|
17409
17423
|
});
|
|
17410
17424
|
});
|
|
17411
17425
|
});
|
|
17412
|
-
this.classNames = classNames;
|
|
17426
|
+
this.classNames = ['is-ready', ...classNames];
|
|
17413
17427
|
this.nanoResizeStateChange.emit(this.toSimpleObj(changes));
|
|
17414
17428
|
}
|
|
17415
17429
|
toSimpleObj(stateMaps) {
|
|
@@ -17428,7 +17442,7 @@ let ResizeObserve = class extends H {
|
|
|
17428
17442
|
this.currentHeight = entry.contentRect.height;
|
|
17429
17443
|
}
|
|
17430
17444
|
});
|
|
17431
|
-
this.ro.observe(this.
|
|
17445
|
+
this.ro.observe(this.host);
|
|
17432
17446
|
}
|
|
17433
17447
|
connectedCallback() {
|
|
17434
17448
|
this.assessChanges = debounce$1(this.assessChanges, 50);
|
|
@@ -17438,7 +17452,7 @@ let ResizeObserve = class extends H {
|
|
|
17438
17452
|
return;
|
|
17439
17453
|
if (!this.currentWidth || !this.currentHeight) {
|
|
17440
17454
|
readTask(() => {
|
|
17441
|
-
const { width, height } = this.
|
|
17455
|
+
const { width, height } = this.host.getBoundingClientRect();
|
|
17442
17456
|
this.currentWidth = width;
|
|
17443
17457
|
this.currentHeight = height;
|
|
17444
17458
|
});
|
|
@@ -17452,7 +17466,7 @@ let ResizeObserve = class extends H {
|
|
|
17452
17466
|
render() {
|
|
17453
17467
|
return (h$1(Host, { class: {
|
|
17454
17468
|
[this.classNames.join(' ')]: true,
|
|
17455
|
-
} }, h$1("
|
|
17469
|
+
} }, h$1("slot", null)));
|
|
17456
17470
|
}
|
|
17457
17471
|
get host() { return this; }
|
|
17458
17472
|
static get watchers() { return {
|
|
@@ -17463,7 +17477,7 @@ let ResizeObserve = class extends H {
|
|
|
17463
17477
|
static get style() { return ":host { display: inline-block } div { height: 100%; }"; }
|
|
17464
17478
|
};
|
|
17465
17479
|
|
|
17466
|
-
const selectCss = ".sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-top:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select__mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.select__multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-top:1.3em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.6em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .select__multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.select__multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.select__multi-value.sc-nano-select{margin-top:5px;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:-3px;margin-inline-end:-3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.2em 0.5em;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);letter-spacing:1px}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.2}.select__multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(38%);transform:translateY(38%);top:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
|
|
17480
|
+
const selectCss = ".sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-top:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select__mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.select__multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-top:1.3em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.5em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .select__multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.select__multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.select__multi-value.sc-nano-select{margin-top:5px;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:-3px;margin-inline-end:-3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.2em 0.5em;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);letter-spacing:1px}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.2}.select__multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + (var(--padding-start) * 2)))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(38%);transform:translateY(38%);top:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
|
|
17467
17481
|
|
|
17468
17482
|
let selectIds = 0;
|
|
17469
17483
|
let Select = class extends H {
|
|
@@ -17487,6 +17501,7 @@ let Select = class extends H {
|
|
|
17487
17501
|
this.hasFocus = false;
|
|
17488
17502
|
this.hasLabelSlot = false;
|
|
17489
17503
|
this.hasHelperSlot = false;
|
|
17504
|
+
this.hasHelperEndSlot = false;
|
|
17490
17505
|
this.inputSearchVal = '';
|
|
17491
17506
|
this._invalid = false;
|
|
17492
17507
|
/**
|
|
@@ -17900,6 +17915,7 @@ let Select = class extends H {
|
|
|
17900
17915
|
// see if we have label / helper content
|
|
17901
17916
|
this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
|
|
17902
17917
|
this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
|
|
17918
|
+
this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
|
|
17903
17919
|
// breaking change introduced in v2. Rm in v3
|
|
17904
17920
|
if (!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')) {
|
|
17905
17921
|
console.warn('nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.', this.el);
|
|
@@ -17963,34 +17979,37 @@ let Select = class extends H {
|
|
|
17963
17979
|
const moreId = this.showInlineError || this.hasHelperSlot
|
|
17964
17980
|
? this.selectId + '-moreId'
|
|
17965
17981
|
: '';
|
|
17982
|
+
const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';
|
|
17966
17983
|
this.rtl = this.el.ownerDocument.dir === 'rtl';
|
|
17967
17984
|
this.valueItems = [];
|
|
17968
|
-
const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
|
|
17985
|
+
const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasHelperEndSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
|
|
17969
17986
|
el,
|
|
17970
17987
|
floatLabel,
|
|
17971
17988
|
label,
|
|
17972
17989
|
errorMessage,
|
|
17973
17990
|
showInlineError,
|
|
17974
17991
|
hasHelperSlot,
|
|
17992
|
+
hasHelperEndSlot,
|
|
17975
17993
|
hasLabelSlot,
|
|
17976
17994
|
hideLabel,
|
|
17977
17995
|
placeholder,
|
|
17978
17996
|
rtl,
|
|
17979
17997
|
}))(this);
|
|
17980
17998
|
const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
|
|
17981
|
-
moreId,
|
|
17999
|
+
moreId,
|
|
18000
|
+
helperEndId, hasValue: !!this.value.length || !!this.inputSearchVal.length, controlId: this.selectId });
|
|
17982
18001
|
const controlOptions = (({ readonly, disabled }) => ({
|
|
17983
18002
|
readonly,
|
|
17984
18003
|
disabled,
|
|
17985
18004
|
clearControl: this.clearSelect,
|
|
17986
18005
|
}))(this);
|
|
17987
|
-
return (h$1(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h$1("slot", { name: "down-arrow" }, h$1("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }), this.multiple && (h$1("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId))), !this.multiple && [
|
|
18006
|
+
return (h$1(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h$1("slot", { name: "down-arrow" }, h$1("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }), this.multiple && (h$1("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
|
|
17988
18007
|
this.mask && (h$1("div", { class: "select__mask" }, this.getLabel(this.value))),
|
|
17989
|
-
h$1("input", { id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
|
|
18008
|
+
h$1("input", { id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
|
|
17990
18009
|
])), !this.readonly && !this.disabled && (h$1("nano-datalist", { onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
|
|
17991
18010
|
e.preventDefault();
|
|
17992
18011
|
this.removeValue(e.detail.value);
|
|
17993
|
-
}, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h$1("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h$1("span", { slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h$1("slot", null))), h$1("select", { id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
|
|
18012
|
+
}, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h$1("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h$1("span", { slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h$1("slot", null))), h$1("select", { id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
|
|
17994
18013
|
this.valArray.map((val) => {
|
|
17995
18014
|
return (h$1("option", { value: val, selected: true }, val));
|
|
17996
18015
|
}), !this.allowCustomValues &&
|
|
@@ -17998,8 +18017,8 @@ let Select = class extends H {
|
|
|
17998
18017
|
return (h$1("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
|
|
17999
18018
|
}))));
|
|
18000
18019
|
}
|
|
18001
|
-
multipleValues(labelId, moreId) {
|
|
18002
|
-
let input = (h$1("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId }));
|
|
18020
|
+
multipleValues(labelId, moreId, helperEndId) {
|
|
18021
|
+
let input = (h$1("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
|
|
18003
18022
|
if (!this.value.length)
|
|
18004
18023
|
return input;
|
|
18005
18024
|
return this.value.map((val, i) => {
|
|
@@ -23975,7 +23994,7 @@ const NanoHero = /*@__PURE__*/proxyCustomElement(Hero, [1,"nano-hero",{"imgSrc":
|
|
|
23975
23994
|
const NanoIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"nano-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]}]);
|
|
23976
23995
|
const NanoIconButton = /*@__PURE__*/proxyCustomElement(IconButton, [2,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"disabled":[516],"href":[1],"target":[1]}]);
|
|
23977
23996
|
const NanoImg = /*@__PURE__*/proxyCustomElement(Img, [1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]}]);
|
|
23978
|
-
const NanoInput = /*@__PURE__*/proxyCustomElement(Input, [6,"nano-input",{"invalid":[2564],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[
|
|
23997
|
+
const NanoInput = /*@__PURE__*/proxyCustomElement(Input, [6,"nano-input",{"invalid":[2564],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[513],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"errorMessage":[32],"datalist":[32],"_invalid":[32]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]);
|
|
23979
23998
|
const NanoMenu = /*@__PURE__*/proxyCustomElement(Menu, [1,"nano-menu",{"hasFocus":[2052,"has-focus"],"type":[1],"label":[1]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]);
|
|
23980
23999
|
const NanoMenuDrawer = /*@__PURE__*/proxyCustomElement(MenuDrawer, [1,"nano-menu-drawer",{"open":[4],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"],[16,"nanoIsReady","handleGlobalNavReady"]]]);
|
|
23981
24000
|
const NanoNavItem = /*@__PURE__*/proxyCustomElement(NavItem, [1,"nano-nav-item",{"href":[1025],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"notification":[4],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"isLegacy":[32],"hasFocus":[32]}]);
|
|
@@ -23983,7 +24002,7 @@ const NanoOption = /*@__PURE__*/proxyCustomElement(Option, [1,"nano-option",{"va
|
|
|
23983
24002
|
const NanoRange = /*@__PURE__*/proxyCustomElement(Range, [6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]}]);
|
|
23984
24003
|
const NanoRating = /*@__PURE__*/proxyCustomElement(Rating, [2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32]}]);
|
|
23985
24004
|
const NanoResizeObserve = /*@__PURE__*/proxyCustomElement(ResizeObserve, [1,"nano-resize-observe",{"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32]}]);
|
|
23986
|
-
const NanoSelect = /*@__PURE__*/proxyCustomElement(Select, [6,"nano-select",{"invalid":[2564],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[1040],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"inputSearchVal":[32],"_eOptions":[32]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]);
|
|
24005
|
+
const NanoSelect = /*@__PURE__*/proxyCustomElement(Select, [6,"nano-select",{"invalid":[2564],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[1040],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_eOptions":[32]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]);
|
|
23987
24006
|
const NanoSkeleton = /*@__PURE__*/proxyCustomElement(Skeleton, [1,"nano-skeleton",{"animated":[4]}]);
|
|
23988
24007
|
const NanoSlide = /*@__PURE__*/proxyCustomElement(Slide$2, [1,"nano-slide",{"ready":[1540]}]);
|
|
23989
24008
|
const NanoSlides = /*@__PURE__*/proxyCustomElement(Slides, [1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32]}]);
|