xv-webcomponents 1.17.12-qa.0 → 1.17.14-qa.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/xv-accordion-v2_48.cjs.entry.js +4 -4
- package/dist/collection/components/xv-dropdown/xv-dropdown.css +3 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +3 -3
- package/dist/esm/xv-accordion-v2_48.entry.js +4 -4
- package/dist/xv-webcomponents/{p-162fa33f.entry.js → p-d485057e.entry.js} +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/package.json +1 -1
|
@@ -80632,7 +80632,7 @@ XvDatepicker.style = xvDatepickerCss();
|
|
|
80632
80632
|
|
|
80633
80633
|
const DropdownItemSelector = '.xv-dropdown-item';
|
|
80634
80634
|
|
|
80635
|
-
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-height:40px;--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:100%;--dropdown-visible-items:6;--dropdown-ghost-width:min-content;display:block;box-sizing:border-box;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;border:1px solid var(--border-subtle-01);transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:var(--dropdown-height);outline:none;padding-block:0;padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_count{margin-right:var(--spacing--03, 8px)}:host .control_placeholder{color:var(--text-primary, #333)}:host .control_icon{width:
|
|
80635
|
+
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-height:40px;--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:100%;--dropdown-visible-items:6;--dropdown-ghost-width:min-content;display:block;box-sizing:border-box;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;border:1px solid var(--border-subtle-01);transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:var(--dropdown-height);outline:none;padding-block:0;padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_count{margin-right:var(--spacing--03, 8px)}:host .control_placeholder{color:var(--text-primary, #333)}:host .control_icon{width:16px;height:16px;margin-right:5px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:min(16px, 1em);inline-size:min(16px, 1em);inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .control.readonly{outline-color:transparent;background:var(--field-01, #F7F7F7);background-blend-mode:multiply;cursor:default}:host .control.readonly .control_value{color:var(--text-secondary)}:host .control.readonly .control_arrow{display:none}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;line-height:16px;max-block-size:calc(1lh * var(--dropdown-visible-items) + var(--dropdown-padding-y) * 12);box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options_search{position:sticky;top:0;z-index:2;background:linear-gradient(to bottom, var(--field-02, #FFF) 0%, var(--field-02, #FFF) 85%, transparent 100%);padding:var(--dropdown-padding-y) var(--dropdown-padding-x)}:host .options.right{left:unset;right:0}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:1lh;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:"";position:absolute;top:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:not([hidden]):first-child):after{display:none}:host .options ::slotted(.xv-dropdown-item:hover),:host .options ::slotted(.xv-dropdown-item[active]){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[hidden]){display:none}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, "IBM Plex Sans"), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:4px 0 0;padding:0}:host(.ghost) .control{background-color:transparent;box-shadow:none;border:none;padding:0;block-size:auto}:host(.ghost) .control_value{padding-inline-end:5px}:host(.ghost) .options{width:var(--dropdown-ghost-width)}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host(:focus){outline:none}:host(:focus-visible){outline:none}:host(:focus-visible) .control{outline:2px solid var(--focus)}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-height:16px}:host([size=sm]){--dropdown-height:32px}:host([size=md]){--dropdown-height:40px}:host([size=lg]){--dropdown-height:48px}:host([size=xl]){--dropdown-height:60px}`;
|
|
80636
80636
|
|
|
80637
80637
|
let dropdownUid = 0;
|
|
80638
80638
|
const XvDropdown = class {
|
|
@@ -80665,9 +80665,9 @@ const XvDropdown = class {
|
|
|
80665
80665
|
return values;
|
|
80666
80666
|
};
|
|
80667
80667
|
this.handleOpen = () => {
|
|
80668
|
-
if (this.disabled || this.
|
|
80668
|
+
if (this.disabled || this.loading || this.readonly)
|
|
80669
80669
|
return;
|
|
80670
|
-
this.open =
|
|
80670
|
+
this.open = !this.open;
|
|
80671
80671
|
};
|
|
80672
80672
|
this.handleClickOutside = (ev) => {
|
|
80673
80673
|
if (!this.open || this.el.contains(ev.target))
|
|
@@ -80917,7 +80917,7 @@ const XvDropdown = class {
|
|
|
80917
80917
|
/* endregion Search methods */
|
|
80918
80918
|
render() {
|
|
80919
80919
|
const message = index$2.resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
80920
|
-
return (index$1.h(index$1.Host, { key: '
|
|
80920
|
+
return (index$1.h(index$1.Host, { key: '2e0a4b087e8b1a66bf4bf3ddac2fb342fb988f1e', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (index$1.h("label", { key: '9317e138effdd7ec69133304fe50d11c406b8faf', class: "label" }, index$1.h("slot", { key: '896604f1fef1f4531793a865c2083eaa5b744aa0', name: "label" }, this.label), this.info && index$1.h("xv-tooltip-v2", { key: 'd862a834642e1c115a063601926711339c53168b', class: "label_info", message: this.info }))), index$1.h("div", { key: '2cf34c1d32737ac0b664757b1a53bea34a507c72', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (index$1.h("xv-tag-v2", { key: '9dd7be50d9ce42e037822502720a949ac071d8e0', class: "control_count", onClick: (e) => e.stopPropagation(), onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (index$1.h("p", { class: "control_value" }, this.selected.join(', '))) : (index$1.h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), index$1.h("svg", { key: '023c89db58f385e8a00cab6dce050048b2765b82', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 448 512" }, index$1.h("path", { key: '5994fb2f805d0f1c904558f0ded054cd30c14210', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && index$1.h("div", { key: 'a2872c7cb6fbeb25583d4ed809b79b11aa533c4e', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (index$1.h("div", { key: '8908992fae99c07e3e9d2e06b705c55a4d73fb0a', class: "options_search" }, index$1.h("xv-text-input-v2", { key: '21fb4c673a3e46c024379ec7252026c0cf199ff4', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), index$1.h("slot", { key: "xv-dropdown-options" })), message && index$1.h("p", { key: '104c79569b898fd9f0a9826654de18d16bc68a16', class: "helper" }, message.text)));
|
|
80921
80921
|
}
|
|
80922
80922
|
componentDidLoad() {
|
|
80923
80923
|
this.syncOpenState();
|
|
@@ -30,9 +30,9 @@ export class XvDropdown {
|
|
|
30
30
|
return values;
|
|
31
31
|
};
|
|
32
32
|
this.handleOpen = () => {
|
|
33
|
-
if (this.disabled || this.
|
|
33
|
+
if (this.disabled || this.loading || this.readonly)
|
|
34
34
|
return;
|
|
35
|
-
this.open =
|
|
35
|
+
this.open = !this.open;
|
|
36
36
|
};
|
|
37
37
|
this.handleClickOutside = (ev) => {
|
|
38
38
|
if (!this.open || this.el.contains(ev.target))
|
|
@@ -282,7 +282,7 @@ export class XvDropdown {
|
|
|
282
282
|
/* endregion Search methods */
|
|
283
283
|
render() {
|
|
284
284
|
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
285
|
-
return (h(Host, { key: '
|
|
285
|
+
return (h(Host, { key: '2e0a4b087e8b1a66bf4bf3ddac2fb342fb988f1e', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (h("label", { key: '9317e138effdd7ec69133304fe50d11c406b8faf', class: "label" }, h("slot", { key: '896604f1fef1f4531793a865c2083eaa5b744aa0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'd862a834642e1c115a063601926711339c53168b', class: "label_info", message: this.info }))), h("div", { key: '2cf34c1d32737ac0b664757b1a53bea34a507c72', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '9dd7be50d9ce42e037822502720a949ac071d8e0', class: "control_count", onClick: (e) => e.stopPropagation(), onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: '023c89db58f385e8a00cab6dce050048b2765b82', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 448 512" }, h("path", { key: '5994fb2f805d0f1c904558f0ded054cd30c14210', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && h("div", { key: 'a2872c7cb6fbeb25583d4ed809b79b11aa533c4e', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (h("div", { key: '8908992fae99c07e3e9d2e06b705c55a4d73fb0a', class: "options_search" }, h("xv-text-input-v2", { key: '21fb4c673a3e46c024379ec7252026c0cf199ff4', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), message && h("p", { key: '104c79569b898fd9f0a9826654de18d16bc68a16', class: "helper" }, message.text)));
|
|
286
286
|
}
|
|
287
287
|
componentDidLoad() {
|
|
288
288
|
this.syncOpenState();
|
|
@@ -80630,7 +80630,7 @@ XvDatepicker.style = xvDatepickerCss();
|
|
|
80630
80630
|
|
|
80631
80631
|
const DropdownItemSelector = '.xv-dropdown-item';
|
|
80632
80632
|
|
|
80633
|
-
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-height:40px;--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:100%;--dropdown-visible-items:6;--dropdown-ghost-width:min-content;display:block;box-sizing:border-box;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;border:1px solid var(--border-subtle-01);transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:var(--dropdown-height);outline:none;padding-block:0;padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_count{margin-right:var(--spacing--03, 8px)}:host .control_placeholder{color:var(--text-primary, #333)}:host .control_icon{width:
|
|
80633
|
+
const xvDropdownCss = () => `.xv-container{width:100%;max-width:1170px;margin-inline:auto}@media (min-width: 576px){.xv-container{max-width:540px}}@media (min-width: 768px){.xv-container{max-width:720px}}@media (min-width: 992px){.xv-container{max-width:960px;padding-inline:var(--bs-gutter-x, 0.75rem)}}@media (min-width: 1200px){.xv-container{max-width:1140px}}@media (min-width: 1400px){.xv-container{max-width:1320px}}.xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:"";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{--dropdown-height:40px;--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:100%;--dropdown-visible-items:6;--dropdown-ghost-width:min-content;display:block;box-sizing:border-box;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{display:block;color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin-bottom:8px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Work Sans), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px}:host .label_info{margin-left:var(--spacing-02)}:host .control{background-blend-mode:multiply;border-radius:3px;border:1px solid var(--border-subtle-01);transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:var(--dropdown-height);outline:none;padding-block:0;padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_count{margin-right:var(--spacing--03, 8px)}:host .control_placeholder{color:var(--text-primary, #333)}:host .control_icon{width:16px;height:16px;margin-right:5px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:min(16px, 1em);inline-size:min(16px, 1em);inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .control.readonly{outline-color:transparent;background:var(--field-01, #F7F7F7);background-blend-mode:multiply;cursor:default}:host .control.readonly .control_value{color:var(--text-secondary)}:host .control.readonly .control_arrow{display:none}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;line-height:16px;max-block-size:calc(1lh * var(--dropdown-visible-items) + var(--dropdown-padding-y) * 12);box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options_search{position:sticky;top:0;z-index:2;background:linear-gradient(to bottom, var(--field-02, #FFF) 0%, var(--field-02, #FFF) 85%, transparent 100%);padding:var(--dropdown-padding-y) var(--dropdown-padding-x)}:host .options.right{left:unset;right:0}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Work Sans), sans-serif;font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:1lh;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:"";position:absolute;top:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:not([hidden]):first-child):after{display:none}:host .options ::slotted(.xv-dropdown-item:hover),:host .options ::slotted(.xv-dropdown-item[active]){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[hidden]){display:none}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, "IBM Plex Sans"), sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:4px 0 0;padding:0}:host(.ghost) .control{background-color:transparent;box-shadow:none;border:none;padding:0;block-size:auto}:host(.ghost) .control_value{padding-inline-end:5px}:host(.ghost) .options{width:var(--dropdown-ghost-width)}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host(:focus){outline:none}:host(:focus-visible){outline:none}:host(:focus-visible) .control{outline:2px solid var(--focus)}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-height:16px}:host([size=sm]){--dropdown-height:32px}:host([size=md]){--dropdown-height:40px}:host([size=lg]){--dropdown-height:48px}:host([size=xl]){--dropdown-height:60px}`;
|
|
80634
80634
|
|
|
80635
80635
|
let dropdownUid = 0;
|
|
80636
80636
|
const XvDropdown = class {
|
|
@@ -80663,9 +80663,9 @@ const XvDropdown = class {
|
|
|
80663
80663
|
return values;
|
|
80664
80664
|
};
|
|
80665
80665
|
this.handleOpen = () => {
|
|
80666
|
-
if (this.disabled || this.
|
|
80666
|
+
if (this.disabled || this.loading || this.readonly)
|
|
80667
80667
|
return;
|
|
80668
|
-
this.open =
|
|
80668
|
+
this.open = !this.open;
|
|
80669
80669
|
};
|
|
80670
80670
|
this.handleClickOutside = (ev) => {
|
|
80671
80671
|
if (!this.open || this.el.contains(ev.target))
|
|
@@ -80915,7 +80915,7 @@ const XvDropdown = class {
|
|
|
80915
80915
|
/* endregion Search methods */
|
|
80916
80916
|
render() {
|
|
80917
80917
|
const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
|
|
80918
|
-
return (h(Host, { key: '
|
|
80918
|
+
return (h(Host, { key: '2e0a4b087e8b1a66bf4bf3ddac2fb342fb988f1e', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (h("label", { key: '9317e138effdd7ec69133304fe50d11c406b8faf', class: "label" }, h("slot", { key: '896604f1fef1f4531793a865c2083eaa5b744aa0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'd862a834642e1c115a063601926711339c53168b', class: "label_info", message: this.info }))), h("div", { key: '2cf34c1d32737ac0b664757b1a53bea34a507c72', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '9dd7be50d9ce42e037822502720a949ac071d8e0', class: "control_count", onClick: (e) => e.stopPropagation(), onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: '023c89db58f385e8a00cab6dce050048b2765b82', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 448 512" }, h("path", { key: '5994fb2f805d0f1c904558f0ded054cd30c14210', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && h("div", { key: 'a2872c7cb6fbeb25583d4ed809b79b11aa533c4e', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (h("div", { key: '8908992fae99c07e3e9d2e06b705c55a4d73fb0a', class: "options_search" }, h("xv-text-input-v2", { key: '21fb4c673a3e46c024379ec7252026c0cf199ff4', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), message && h("p", { key: '104c79569b898fd9f0a9826654de18d16bc68a16', class: "helper" }, message.text)));
|
|
80919
80919
|
}
|
|
80920
80920
|
componentDidLoad() {
|
|
80921
80921
|
this.syncOpenState();
|