@orangelogic/design-system 2.219.0 → 2.220.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/library/chunks/{asset-link-format.ofivwxXM.js → asset-link-format.DLYctI8Q.js} +1 -1
- package/library/chunks/{color-swatch-group.Dr7mWhCT.js → color-swatch-group.DMpWk1pm.js} +1 -1
- package/library/chunks/{option.DmQWgEVq.js → option.C3DgnL2F.js} +16 -16
- package/library/chunks/{pagination.GYpExPiQ.js → pagination.DSi4odS9.js} +1 -1
- package/library/components/asset-link-format.js +1 -1
- package/library/components/atoms.js +2 -2
- package/library/components/color-swatch-group.js +1 -1
- package/library/components/corner-position-input-group.js +1 -1
- package/library/components/dynamic-select.js +1 -1
- package/library/components/file-on-demand.js +1 -1
- package/library/components/option.js +1 -1
- package/library/components/organisms.js +2 -2
- package/library/components/pagination.js +2 -2
- package/library/components/select.js +126 -130
- package/library/components/types.js +6 -6
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/option/option.d.ts +0 -1
- package/library/packages/atoms/src/components/select/select.d.ts +3 -1
- package/library/packages/organisms/src/carousel/carousel.d.ts +3 -0
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ import Vt from "../components/divider.js";
|
|
|
27
27
|
import { C as at } from "./icon.CpHbi8tH.js";
|
|
28
28
|
import { C as Pt } from "./icon-button.BBLy-yj3.js";
|
|
29
29
|
import { C as Ft } from "./input.B1JamaTE.js";
|
|
30
|
-
import { C as vt } from "./option.
|
|
30
|
+
import { C as vt } from "./option.C3DgnL2F.js";
|
|
31
31
|
import zt from "../components/select.js";
|
|
32
32
|
import le from "../components/position-picker.js";
|
|
33
33
|
import { c as ce } from "./image.Y5c_hFx8.js";
|
|
@@ -40,7 +40,7 @@ import { o as ft } from "./style-map.llVFPd__.js";
|
|
|
40
40
|
import li from "../components/dropdown.js";
|
|
41
41
|
import ia from "../components/menu-section.js";
|
|
42
42
|
import Kr from "../components/checkbox.js";
|
|
43
|
-
import { C as sa, P as oa } from "./pagination.
|
|
43
|
+
import { C as sa, P as oa } from "./pagination.DSi4odS9.js";
|
|
44
44
|
import { H as qr } from "./slot.j5oheLJC.js";
|
|
45
45
|
import { g as B, a as Bo } from "./dom.gRV2cDjL.js";
|
|
46
46
|
import "./browser.BHOCIF_A.js";
|
|
@@ -3,23 +3,23 @@ import { c as m } from "./component.styles.CRO4Odto.js";
|
|
|
3
3
|
import { c as v } from "./custom-element.L4WJXn1j.js";
|
|
4
4
|
import { L as g } from "./i18n.CXIpdSSZ.js";
|
|
5
5
|
import { w as d } from "./watch.DJF5K-8U.js";
|
|
6
|
-
import { i as
|
|
6
|
+
import { i as _, x as h } from "./lit-element.jLBm65_O.js";
|
|
7
7
|
import { r as f } from "./state.CSDxrqLd.js";
|
|
8
|
-
import { e as
|
|
8
|
+
import { e as b } from "./query.BBf1UFkC.js";
|
|
9
9
|
import { e as y } from "./class-map.BiVq-cVR.js";
|
|
10
10
|
import { n as u } from "./when.Dr1es41R.js";
|
|
11
|
-
import { C as
|
|
12
|
-
import
|
|
13
|
-
var
|
|
14
|
-
const C =
|
|
15
|
-
var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, n, i,
|
|
16
|
-
for (var a =
|
|
17
|
-
(p = t[c]) && (a = (
|
|
18
|
-
return
|
|
11
|
+
import { C as w } from "./icon.CpHbi8tH.js";
|
|
12
|
+
import k from "../components/space.js";
|
|
13
|
+
var r = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(r || {});
|
|
14
|
+
const C = _`:host{-webkit-user-select:none;user-select:none;display:block}:host(:focus){outline:none}.option{font-family:var(--option-font-family), var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--option-font-weight,var(--cx-font-weight-regular));line-height:var(--cx-line-height-large);letter-spacing:var(--cx-letter-spacing-normal);color:var(--option-color,var(--cx-color-neutral-700));padding:var(--cx-spacing-x-small) var(--cx-spacing-medium) var(--cx-spacing-x-small) var(--cx-spacing-x-small);transition:var(--cx-transition-fast) fill;cursor:pointer;align-items:center;display:flex;position:relative}.option:not(.option--show-check){padding-inline:var(--cx-spacing-small)}.option--hover:not(.option--current):not(.option--disabled){background-color:var(--cx-menu-item-background-color-hover)}.option--current,.option--current.option--disabled{background-color:var(--cx-menu-item-background-color-hover);opacity:1}.option--selected{color:var(--option-selected-color,var(--cx-color-primary));font-weight:var(--option-selected-font-weight,var(--cx-font-weight-regular))}.option--disabled{opacity:.5;cursor:default;outline:none}.option__content{flex:1}.option__label{line-height:var(--cx-line-height-medium);flex:auto;display:inline-block}.option .option__check{visibility:hidden;flex:none;justify-content:center;align-items:center;padding-inline-end:var(--cx-spacing-2x-small);display:none}.option--show-check .option__check{display:block}.option--show-check.option--selected .option__check{visibility:visible}.option__help-text{color:var(--option-help-text-color,var(--cx-color-neutral-600));font-weight:var(--option-help-text-font-weight,var(--cx-font-weight-regular))}.option--selected .option__content .option__help-text{color:var(--option-selected-help-text-color,var(--cx-color-primary));font-weight:var(--option-selected-help-text-font-weight,var(--cx-font-weight-regular))}.option__prefix,.option__suffix{flex:none;align-items:center;display:flex}.option__prefix::slotted(*){margin-inline-end:var(--cx-spacing-x-small)}.option__suffix::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.option__prefix{align-self:var(--prefix-alignment,center)}.option__suffix{align-self:var(--suffix-alignment,center)}.option__check{align-self:var(--check-alignment,center)}@media (forced-colors:active){:host(:hover:not([aria-disabled=true])) .option{outline-offset:-1px;outline:1px dashed selecteditem}}`;
|
|
15
|
+
var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, n, i, l) => {
|
|
16
|
+
for (var a = l > 1 ? void 0 : l ? E(n, i) : n, c = t.length - 1, p; c >= 0; c--)
|
|
17
|
+
(p = t[c]) && (a = (l ? p(n, i, a) : p(a)) || a);
|
|
18
|
+
return l && a && L(n, i, a), a;
|
|
19
19
|
};
|
|
20
20
|
let e = class extends x {
|
|
21
21
|
constructor() {
|
|
22
|
-
super(...arguments), this.localize = new g(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement =
|
|
22
|
+
super(...arguments), this.localize = new g(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement = r.Left;
|
|
23
23
|
}
|
|
24
24
|
runFirstUpdated() {
|
|
25
25
|
this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
|
|
@@ -71,18 +71,18 @@ let e = class extends x {
|
|
|
71
71
|
"option--selected": this.selected,
|
|
72
72
|
"option--show-check": this.showCheck
|
|
73
73
|
})} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>${u(
|
|
74
|
-
this.checkPlacement ===
|
|
74
|
+
this.checkPlacement === r.Left,
|
|
75
75
|
() => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
|
|
76
76
|
)}<slot part="prefix" name="prefix" class="option__prefix"></slot><cx-space part="content" class="option__content" direction="vertical" spacing="3x-small"><slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot><slot part="help-text" name="help-text" class="option__help-text"></slot></cx-space><slot part="suffix" name="suffix" class="option__suffix"></slot>${u(
|
|
77
|
-
this.checkPlacement ===
|
|
77
|
+
this.checkPlacement === r.Right,
|
|
78
78
|
() => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
|
|
79
79
|
)}</div>`;
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
e.styles = [m, C];
|
|
83
|
-
e.dependencies = { "cx-icon":
|
|
83
|
+
e.dependencies = { "cx-icon": w, "cx-space": k };
|
|
84
84
|
o([
|
|
85
|
-
|
|
85
|
+
b(".option__label")
|
|
86
86
|
], e.prototype, "defaultSlot", 2);
|
|
87
87
|
o([
|
|
88
88
|
f()
|
|
@@ -119,5 +119,5 @@ e = o([
|
|
|
119
119
|
], e);
|
|
120
120
|
export {
|
|
121
121
|
e as C,
|
|
122
|
-
|
|
122
|
+
r as a
|
|
123
123
|
};
|
|
@@ -12,7 +12,7 @@ import { c as x } from "./repeat.CFjcER6_.js";
|
|
|
12
12
|
import { n as g } from "./when.Dr1es41R.js";
|
|
13
13
|
import { C as w } from "./button.CrhpoXK8.js";
|
|
14
14
|
import { C as v } from "./input.B1JamaTE.js";
|
|
15
|
-
import { C as I } from "./option.
|
|
15
|
+
import { C as I } from "./option.C3DgnL2F.js";
|
|
16
16
|
import B from "../components/select.js";
|
|
17
17
|
import N from "../components/tooltip.js";
|
|
18
18
|
import { C as k } from "./typography.IqHbnd3C.js";
|
|
@@ -3,7 +3,7 @@ import "../chunks/button.CrhpoXK8.js";
|
|
|
3
3
|
import "./space.js";
|
|
4
4
|
import "../chunks/typography.IqHbnd3C.js";
|
|
5
5
|
import "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
6
|
-
import { C as h } from "../chunks/asset-link-format.
|
|
6
|
+
import { C as h } from "../chunks/asset-link-format.DLYctI8Q.js";
|
|
7
7
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
8
8
|
import "../chunks/asset-link-format.ClaYu_v8.js";
|
|
9
9
|
import "../chunks/position-picker.DjnhxIKF.js";
|
|
@@ -51,8 +51,8 @@ import { default as oo } from "./menu-item.js";
|
|
|
51
51
|
import { default as ao } from "./menu-label.js";
|
|
52
52
|
import { default as xo } from "./menu-section.js";
|
|
53
53
|
import { default as mo } from "./mutation-observer.js";
|
|
54
|
-
import { C as po } from "../chunks/option.
|
|
55
|
-
import { C as uo } from "../chunks/pagination.
|
|
54
|
+
import { C as po } from "../chunks/option.C3DgnL2F.js";
|
|
55
|
+
import { C as uo } from "../chunks/pagination.DSi4odS9.js";
|
|
56
56
|
import { default as no } from "./popup.js";
|
|
57
57
|
import { default as co } from "./progress-bar.js";
|
|
58
58
|
import { default as bo } from "./progress-ring.js";
|
|
@@ -3,7 +3,7 @@ import "../chunks/typography.IqHbnd3C.js";
|
|
|
3
3
|
import "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
4
4
|
import "../chunks/color-swatch.CSsvAlq8.js";
|
|
5
5
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
6
|
-
import { C as v } from "../chunks/color-swatch-group.
|
|
6
|
+
import { C as v } from "../chunks/color-swatch-group.DMpWk1pm.js";
|
|
7
7
|
import "../chunks/transformation.Bjs3TBPd.js";
|
|
8
8
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
9
9
|
import "../chunks/debounce.DaHuiSGU.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { C as u } from "../chunks/input.B1JamaTE.js";
|
|
2
|
-
import { C as h } from "../chunks/option.
|
|
2
|
+
import { C as h } from "../chunks/option.C3DgnL2F.js";
|
|
3
3
|
import m from "./select.js";
|
|
4
4
|
import x from "./space.js";
|
|
5
5
|
import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { C as g } from "../chunks/button.CrhpoXK8.js";
|
|
2
2
|
import { C as O } from "../chunks/icon-button.BBLy-yj3.js";
|
|
3
|
-
import { C as h, a as C } from "../chunks/option.
|
|
3
|
+
import { C as h, a as C } from "../chunks/option.C3DgnL2F.js";
|
|
4
4
|
import $ from "./select.js";
|
|
5
5
|
import { n as s, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
6
6
|
import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
|
|
@@ -22,7 +22,7 @@ import Et from "./divider.js";
|
|
|
22
22
|
import nt from "./format-bytes.js";
|
|
23
23
|
import { C as vt } from "../chunks/icon-button.BBLy-yj3.js";
|
|
24
24
|
import { C as Lt } from "../chunks/input.B1JamaTE.js";
|
|
25
|
-
import { C as Ut } from "../chunks/option.
|
|
25
|
+
import { C as Ut } from "../chunks/option.C3DgnL2F.js";
|
|
26
26
|
import yt from "./relative-time.js";
|
|
27
27
|
import Ft from "./select.js";
|
|
28
28
|
import Rt from "./space.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
2
2
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
3
|
-
import { C } from "../chunks/option.
|
|
3
|
+
import { C } from "../chunks/option.C3DgnL2F.js";
|
|
4
4
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
5
5
|
import "../chunks/i18n.CXIpdSSZ.js";
|
|
6
6
|
import "../chunks/watch.DJF5K-8U.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as a } from "../chunks/asset-link-format.
|
|
2
|
-
import { C as t } from "../chunks/color-swatch-group.
|
|
1
|
+
import { C as a } from "../chunks/asset-link-format.DLYctI8Q.js";
|
|
2
|
+
import { C as t } from "../chunks/color-swatch-group.DMpWk1pm.js";
|
|
3
3
|
import { default as C } from "./file-on-demand.js";
|
|
4
4
|
export {
|
|
5
5
|
a as CxAssetLinkFormat,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "./space.js";
|
|
2
2
|
import "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
3
3
|
import "../chunks/icon-button.BBLy-yj3.js";
|
|
4
|
-
import { C as k } from "../chunks/pagination.
|
|
4
|
+
import { C as k } from "../chunks/pagination.DSi4odS9.js";
|
|
5
5
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
6
6
|
import "../chunks/i18n.CXIpdSSZ.js";
|
|
7
7
|
import "../chunks/math.DuKzLacZ.js";
|
|
@@ -13,7 +13,7 @@ import "../chunks/repeat.CFjcER6_.js";
|
|
|
13
13
|
import "../chunks/when.Dr1es41R.js";
|
|
14
14
|
import "../chunks/button.CrhpoXK8.js";
|
|
15
15
|
import "../chunks/input.B1JamaTE.js";
|
|
16
|
-
import "../chunks/option.
|
|
16
|
+
import "../chunks/option.C3DgnL2F.js";
|
|
17
17
|
import "./select.js";
|
|
18
18
|
import "./tooltip.js";
|
|
19
19
|
import "../chunks/typography.IqHbnd3C.js";
|
|
@@ -1,63 +1,65 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { C } from "../chunks/typography.IqHbnd3C.js";
|
|
3
|
-
import { n as a, C as
|
|
4
|
-
import { c as
|
|
5
|
-
import { f as
|
|
6
|
-
import { g as
|
|
7
|
-
import { s as
|
|
8
|
-
import { c as
|
|
9
|
-
import { d as
|
|
10
|
-
import { F as
|
|
11
|
-
import { L as
|
|
12
|
-
import { s as
|
|
13
|
-
import { H as
|
|
14
|
-
import { i as
|
|
15
|
-
import { w as
|
|
16
|
-
import { i as
|
|
17
|
-
import { r as
|
|
18
|
-
import { e as
|
|
19
|
-
import { e as
|
|
20
|
-
import { o as
|
|
21
|
-
import { n as
|
|
22
|
-
import { s as
|
|
23
|
-
import { C as
|
|
24
|
-
import { C as
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
const W = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), H = B`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:var(--cx-select-expand-icon-rotate-open,-180deg)}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--select-max-height,var(--auto-size-available-height));padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small);width:calc(100% - (var(--cx-spacing-x-small) * 2));margin-inline:auto}.select__listbox ::slotted(small){font-size:var(--cx-font-size-x-small);font-weight:var(--cx-font-weight-medium);line-height:var(--cx-line-height-x-small);color:var(--cx-color-neutral-600);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
|
|
29
|
-
var
|
|
30
|
-
|
|
1
|
+
import L from "./line-clamp.js";
|
|
2
|
+
import { C as z } from "../chunks/typography.IqHbnd3C.js";
|
|
3
|
+
import { n as a, C as I } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
4
|
+
import { c as $ } from "../chunks/component.styles.CRO4Odto.js";
|
|
5
|
+
import { f as F } from "../chunks/form-control.styles.CaGWmeAS.js";
|
|
6
|
+
import { g as V } from "../chunks/active-elements.jTVWtBDp.js";
|
|
7
|
+
import { s as O, a as w, w as C } from "../chunks/event.BeKOsirN.js";
|
|
8
|
+
import { c as E } from "../chunks/custom-element.L4WJXn1j.js";
|
|
9
|
+
import { d as T } from "../chunks/default-value.COZopaet.js";
|
|
10
|
+
import { F as A } from "../chunks/form.DSsy3Fcy.js";
|
|
11
|
+
import { L as B } from "../chunks/i18n.CXIpdSSZ.js";
|
|
12
|
+
import { s as U } from "../chunks/scroll.xtO5yojm.js";
|
|
13
|
+
import { H as P } from "../chunks/slot.j5oheLJC.js";
|
|
14
|
+
import { i as M } from "../chunks/user-agent.D9aPuOyL.js";
|
|
15
|
+
import { w as d } from "../chunks/watch.DJF5K-8U.js";
|
|
16
|
+
import { i as N, x as h, E as R } from "../chunks/lit-element.jLBm65_O.js";
|
|
17
|
+
import { r as v } from "../chunks/state.CSDxrqLd.js";
|
|
18
|
+
import { e as b } from "../chunks/query.BBf1UFkC.js";
|
|
19
|
+
import { e as y } from "../chunks/class-map.BiVq-cVR.js";
|
|
20
|
+
import { o as W } from "../chunks/unsafe-html.Dff7-rCx.js";
|
|
21
|
+
import { n as x } from "../chunks/when.Dr1es41R.js";
|
|
22
|
+
import { s as k, g as S } from "../chunks/animation-registry.HmpwNuGH.js";
|
|
23
|
+
import { C as H } from "../chunks/icon.CpHbi8tH.js";
|
|
24
|
+
import { C as m } from "../chunks/option.C3DgnL2F.js";
|
|
25
|
+
import q from "./popup.js";
|
|
26
|
+
import K from "./spinner.js";
|
|
27
|
+
import j from "./tag.js";
|
|
28
|
+
const Y = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), G = N`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:var(--cx-select-expand-icon-rotate-open,-180deg)}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--select-max-height,var(--auto-size-available-height));padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small);width:calc(100% - (var(--cx-spacing-x-small) * 2));margin-inline:auto}.select__listbox ::slotted(small){font-size:var(--cx-font-size-x-small);font-weight:var(--cx-font-weight-medium);line-height:var(--cx-line-height-x-small);color:var(--cx-color-neutral-600);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
|
|
29
|
+
var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, D = (t) => {
|
|
30
|
+
throw TypeError(t);
|
|
31
|
+
}, s = (t, e, o, n) => {
|
|
32
|
+
for (var l = n > 1 ? void 0 : n ? Q(e, o) : e, r = t.length - 1, c; r >= 0; r--)
|
|
31
33
|
(c = t[r]) && (l = (n ? c(e, o, l) : c(l)) || l);
|
|
32
|
-
return n && l &&
|
|
33
|
-
};
|
|
34
|
-
let i = class extends
|
|
34
|
+
return n && l && J(e, o, l), l;
|
|
35
|
+
}, X = (t, e, o) => e.has(t) || D("Cannot " + o), Z = (t, e, o) => e.has(t) ? D("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), f = (t, e, o) => (X(t, e, "access private method"), o), u, g, _;
|
|
36
|
+
let i = class extends I {
|
|
35
37
|
constructor() {
|
|
36
|
-
super(...arguments), this.formControlController = new
|
|
38
|
+
super(...arguments), Z(this, u), this.formControlController = new A(this, {
|
|
37
39
|
assumeInteractionOn: ["cx-input"]
|
|
38
|
-
}), this.hasSlotController = new
|
|
40
|
+
}), this.hasSlotController = new P(
|
|
39
41
|
this,
|
|
40
42
|
"help-text",
|
|
41
43
|
"label"
|
|
42
|
-
), this.localize = new
|
|
44
|
+
), this.localize = new B(this), this.typeToSelectString = "", this.openListenersRoot = null, this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
|
|
43
45
|
const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, l = (r) => {
|
|
44
46
|
this.handleTagRemove(r, t);
|
|
45
47
|
};
|
|
46
|
-
return
|
|
48
|
+
return h`<cx-tag part="tag" exportparts="
|
|
47
49
|
base:tag__base,
|
|
48
50
|
content:tag__content,
|
|
49
51
|
remove-button:tag__remove-button,
|
|
50
52
|
remove-button__base:tag__remove-button__base
|
|
51
53
|
" ?pill=${this.pill} size=${n} ?removable=${this.multiple} @cx-remove=${l}><cx-line-clamp lines="1">${this.getOptionLabel(t)}</cx-line-clamp></cx-tag>`;
|
|
52
|
-
}, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof
|
|
53
|
-
if (!(!t || !(t instanceof
|
|
54
|
+
}, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof m) ? "" : t.value, this.getOptionLabel = (t) => !t || !(t instanceof m) ? "" : t.getTextLabel(), this.getOptionSelected = (t) => {
|
|
55
|
+
if (!(!t || !(t instanceof m)))
|
|
54
56
|
return t.selected;
|
|
55
57
|
}, this.getOptionDisabled = (t) => {
|
|
56
|
-
if (!(!t || !(t instanceof
|
|
58
|
+
if (!(!t || !(t instanceof m)))
|
|
57
59
|
return t.disabled;
|
|
58
60
|
}, this.stayOpenOnSelect = !1, this.closeOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (t) => {
|
|
59
61
|
!t.composedPath().includes(this) && !this.stayOpenOnSelect && requestAnimationFrame(() => {
|
|
60
|
-
const o =
|
|
62
|
+
const o = V();
|
|
61
63
|
!(this.contains(o ?? null) || this.shadowRoot?.contains(o ?? null)) && this.open && this.hide();
|
|
62
64
|
});
|
|
63
65
|
}, this.handleDocumentKeyDown = (t) => {
|
|
@@ -76,29 +78,13 @@ let i = class extends S {
|
|
|
76
78
|
this.show();
|
|
77
79
|
return;
|
|
78
80
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
switch (this.toggleOptionSelection(this.currentOption), this.displayLabel = "", this.displayInput.value = "", this.typeToSelectString = "", this.inputBehavior) {
|
|
83
|
-
case "filter": {
|
|
84
|
-
this.filterOptionsByInput();
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
case "select":
|
|
88
|
-
this.selectOptionByInput();
|
|
89
|
-
}
|
|
90
|
-
else
|
|
91
|
-
this.setSelectedOptions(this.currentOption);
|
|
92
|
-
this.updateComplete.then(() => {
|
|
93
|
-
this.emit("cx-input"), this.emit("cx-change");
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
(!this.multiple || this.closeOnSelect) && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
|
|
97
|
-
}
|
|
81
|
+
this.currentOption && !this.currentOption.hidden && !this.getOptionDisabled(this.currentOption) && (this.noSelectOnEnter || (this.multiple ? (this.toggleOptionSelection(this.currentOption), f(this, u, g).call(this), this.inputBehavior === "select" && this.selectOptionByInput()) : this.setSelectedOptions(this.currentOption), this.updateComplete.then(() => {
|
|
82
|
+
this.emit("cx-input"), this.emit("cx-change");
|
|
83
|
+
})), (!this.multiple || this.closeOnSelect) && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
|
|
98
84
|
return;
|
|
99
85
|
}
|
|
100
86
|
if (["ArrowUp", "ArrowDown", "Home", "End"].includes(t.key)) {
|
|
101
|
-
const l = this.getAllOptions().filter((
|
|
87
|
+
const l = this.getAllOptions().filter((p) => this.inputBehavior === "filter" ? !p.hidden : !0), r = this.currentOption ? l.indexOf(this.currentOption) : -1;
|
|
102
88
|
let c = Math.max(0, r);
|
|
103
89
|
if (t.preventDefault(), !this.open && (this.show(), this.currentOption))
|
|
104
90
|
return;
|
|
@@ -152,7 +138,7 @@ let i = class extends S {
|
|
|
152
138
|
* @returns
|
|
153
139
|
*/
|
|
154
140
|
setOptionSelected(t, e) {
|
|
155
|
-
if (!(!(t instanceof
|
|
141
|
+
if (!(!(t instanceof m) || t.getAttribute("role") !== "option")) {
|
|
156
142
|
if (e === void 0) {
|
|
157
143
|
t.selected = !t.selected;
|
|
158
144
|
return;
|
|
@@ -168,7 +154,7 @@ let i = class extends S {
|
|
|
168
154
|
* @returns
|
|
169
155
|
*/
|
|
170
156
|
setOptionCurrent(t, e) {
|
|
171
|
-
if (t instanceof
|
|
157
|
+
if (t instanceof m) {
|
|
172
158
|
if (e === void 0) {
|
|
173
159
|
t.current = !t.current;
|
|
174
160
|
return;
|
|
@@ -193,7 +179,10 @@ let i = class extends S {
|
|
|
193
179
|
super.disconnectedCallback(), this.removeOpenListeners();
|
|
194
180
|
}
|
|
195
181
|
runFirstUpdated() {
|
|
196
|
-
|
|
182
|
+
M() && (this.contentEditable = "true");
|
|
183
|
+
}
|
|
184
|
+
willUpdate(t) {
|
|
185
|
+
super.willUpdate(t), this.hasUpdated && t.has("open") && t.get("open") !== this.open && this.handleOpenChange();
|
|
197
186
|
}
|
|
198
187
|
addOpenListeners() {
|
|
199
188
|
document.addEventListener(
|
|
@@ -251,7 +240,7 @@ let i = class extends S {
|
|
|
251
240
|
if (!(t.data && o.includes(t.data)))
|
|
252
241
|
switch (this.typeToSelectString = e.value.toLowerCase(), this.displayLabel = e.value, this.emit("cx-input"), this.inputBehavior) {
|
|
253
242
|
case "filter": {
|
|
254
|
-
this.filterOptionsByInput();
|
|
243
|
+
this.filterOptionsByInput(), f(this, u, _).call(this);
|
|
255
244
|
break;
|
|
256
245
|
}
|
|
257
246
|
case "select":
|
|
@@ -275,7 +264,7 @@ let i = class extends S {
|
|
|
275
264
|
t.key !== "Tab" && ((t.key !== "Escape" || this.open && (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0)) && t.stopPropagation(), this.handleDocumentKeyDown(t));
|
|
276
265
|
}
|
|
277
266
|
handleClearClick(t) {
|
|
278
|
-
t.stopPropagation(), (this.value !== "" || this.displayLabel !== "") && (this.setSelectedOptions([]), this.displayInput.focus({ preventScroll: !0 }), this
|
|
267
|
+
t.stopPropagation(), (this.value !== "" || this.displayLabel !== "") && (this.setSelectedOptions([]), this.displayInput.focus({ preventScroll: !0 }), f(this, u, g).call(this), this.updateComplete.then(() => {
|
|
279
268
|
this.emit("cx-clear"), this.emit("cx-input"), this.emit("cx-change");
|
|
280
269
|
}));
|
|
281
270
|
}
|
|
@@ -288,7 +277,7 @@ let i = class extends S {
|
|
|
288
277
|
), r = t.composedPath().some(
|
|
289
278
|
(c) => c?.classList?.contains("tree-item__actions")
|
|
290
279
|
);
|
|
291
|
-
o && !this.getOptionDisabled(o) && !l && !r && (this.multiple ? this.toggleOptionSelection(o) : this.setSelectedOptions(o), this.updateComplete.then(
|
|
280
|
+
o && !this.getOptionDisabled(o) && !l && !r && (this.multiple ? (this.toggleOptionSelection(o), f(this, u, g).call(this)) : this.setSelectedOptions(o), this.updateComplete.then(
|
|
292
281
|
() => this.displayInput.focus({ preventScroll: !0 })
|
|
293
282
|
), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
|
|
294
283
|
this.emit("cx-input"), this.emit("cx-change");
|
|
@@ -298,12 +287,12 @@ let i = class extends S {
|
|
|
298
287
|
const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], o = [];
|
|
299
288
|
for (const r of t) {
|
|
300
289
|
const c = this.getOptionValue(r);
|
|
301
|
-
if (!c && !(r instanceof
|
|
290
|
+
if (!c && !(r instanceof m))
|
|
302
291
|
return;
|
|
303
292
|
o.push(c);
|
|
304
|
-
const
|
|
305
|
-
if (!
|
|
306
|
-
customElements.whenDefined(
|
|
293
|
+
const p = r.tagName.toLowerCase();
|
|
294
|
+
if (!Y(r) && !customElements.get(p)) {
|
|
295
|
+
customElements.whenDefined(p).then(() => this.handleDefaultSlotChange());
|
|
307
296
|
return;
|
|
308
297
|
}
|
|
309
298
|
}
|
|
@@ -315,7 +304,7 @@ let i = class extends S {
|
|
|
315
304
|
this.setSelectedOptions(n, l ? this.value : void 0), this.hasFocus && !this.open && !this.disabled && t.length > 0 && this.show();
|
|
316
305
|
}
|
|
317
306
|
handleTagRemove(t, e) {
|
|
318
|
-
t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
|
|
307
|
+
t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), f(this, u, g).call(this), this.updateComplete.then(() => {
|
|
319
308
|
this.emit("cx-input"), this.emit("cx-change");
|
|
320
309
|
}));
|
|
321
310
|
}
|
|
@@ -350,7 +339,7 @@ let i = class extends S {
|
|
|
350
339
|
let l = !1;
|
|
351
340
|
return t.forEach((r) => {
|
|
352
341
|
const c = e.find(
|
|
353
|
-
(
|
|
342
|
+
(p) => this.getOptionValue(p) === r
|
|
354
343
|
);
|
|
355
344
|
c ? o.push(c) : r !== "" && (l = !0);
|
|
356
345
|
}), l && n && o.push(n), {
|
|
@@ -396,11 +385,11 @@ let i = class extends S {
|
|
|
396
385
|
return this.selectedOptions.map((n, l) => {
|
|
397
386
|
if (l < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
|
|
398
387
|
const r = this.getTag(n, l);
|
|
399
|
-
return
|
|
388
|
+
return h`${typeof r == "string" ? W(r) : r}`;
|
|
400
389
|
} else if (l === this.maxOptionsVisible)
|
|
401
|
-
return
|
|
390
|
+
return h`<cx-tag ?pill=${this.pill} size=${o}>
|
|
402
391
|
+${this.selectedOptions.length - l}</cx-tag>`;
|
|
403
|
-
return
|
|
392
|
+
return R;
|
|
404
393
|
});
|
|
405
394
|
}
|
|
406
395
|
handleInvalid(t) {
|
|
@@ -423,19 +412,19 @@ let i = class extends S {
|
|
|
423
412
|
if (this.open && !this.disabled) {
|
|
424
413
|
if (this.noDropdown)
|
|
425
414
|
return;
|
|
426
|
-
this.inputBehavior === "filter" && this.filterOptionsByInput(), this.noResetCurrent || this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption()), this.emit("cx-show"), this.addOpenListeners(), await
|
|
415
|
+
this.inputBehavior === "filter" && this.filterOptionsByInput(), this.noResetCurrent || this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption()), f(this, u, _).call(this), this.emit("cx-show"), this.addOpenListeners(), await O(this), this.listbox.hidden = !1, this.popup.active = !0, requestAnimationFrame(() => {
|
|
427
416
|
this.currentOption && this.setCurrentOption(this.currentOption);
|
|
428
417
|
});
|
|
429
|
-
const { keyframes: t, options: e } =
|
|
418
|
+
const { keyframes: t, options: e } = S(this, "select.show", {
|
|
430
419
|
dir: this.localize.dir()
|
|
431
420
|
});
|
|
432
|
-
await
|
|
421
|
+
await w(this.popup.popup, t, e), this.currentOption && U(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
|
|
433
422
|
} else {
|
|
434
|
-
this.emit("cx-hide"), this.removeOpenListeners(), await
|
|
435
|
-
const { keyframes: t, options: e } =
|
|
423
|
+
this.emit("cx-hide"), this.removeOpenListeners(), await O(this);
|
|
424
|
+
const { keyframes: t, options: e } = S(this, "select.hide", {
|
|
436
425
|
dir: this.localize.dir()
|
|
437
426
|
});
|
|
438
|
-
await
|
|
427
|
+
await w(this.popup.popup, t, e), this.listbox.hidden = !0, this.popup.active = !1, this.emit("cx-after-hide");
|
|
439
428
|
}
|
|
440
429
|
}
|
|
441
430
|
selectOptionByInput() {
|
|
@@ -459,7 +448,7 @@ let i = class extends S {
|
|
|
459
448
|
return;
|
|
460
449
|
}
|
|
461
450
|
if (!(this.getAllOptions().length === 0 && !this.noOptionText))
|
|
462
|
-
return this.open = !0,
|
|
451
|
+
return this.open = !0, C(this, "cx-after-show");
|
|
463
452
|
}
|
|
464
453
|
/** Hides the listbox. */
|
|
465
454
|
async hide() {
|
|
@@ -467,7 +456,7 @@ let i = class extends S {
|
|
|
467
456
|
this.open = !1;
|
|
468
457
|
return;
|
|
469
458
|
}
|
|
470
|
-
return this.open = !1,
|
|
459
|
+
return this.open = !1, C(this, "cx-after-hide");
|
|
471
460
|
}
|
|
472
461
|
/** Sets focus on the control. */
|
|
473
462
|
focus(t) {
|
|
@@ -478,15 +467,15 @@ let i = class extends S {
|
|
|
478
467
|
this.displayInput.blur();
|
|
479
468
|
}
|
|
480
469
|
render() {
|
|
481
|
-
const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), o = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, l = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0,
|
|
482
|
-
return
|
|
470
|
+
const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), o = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, l = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, p = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
|
|
471
|
+
return h`<div part="form-control" class=${y({
|
|
483
472
|
"form-control": !0,
|
|
484
473
|
"form-control--has-help-text": n,
|
|
485
474
|
"form-control--has-label": o,
|
|
486
475
|
"form-control--large": this.size === "large",
|
|
487
476
|
"form-control--medium": this.size === "medium",
|
|
488
477
|
"form-control--small": this.size === "small"
|
|
489
|
-
})}><div part="form-control-input" class="form-control-input"><cx-popup .active=${this.open && this.stayOpenOnSelect} .syncElement=${this.syncElement} class=${
|
|
478
|
+
})}><div part="form-control-input" class="form-control-input"><cx-popup .active=${this.open && this.stayOpenOnSelect} .syncElement=${this.syncElement} class=${y({
|
|
490
479
|
select: !0,
|
|
491
480
|
"select--bottom": this.placement === "bottom",
|
|
492
481
|
"select--disabled": this.disabled,
|
|
@@ -502,67 +491,77 @@ let i = class extends S {
|
|
|
502
491
|
"select--small": this.size === "small",
|
|
503
492
|
"select--standard": !0,
|
|
504
493
|
"select--top": this.placement === "top"
|
|
505
|
-
})} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${o ? "false" : "true"}><slot name="label">${this.label}</slot></label>${
|
|
506
|
-
|
|
507
|
-
() =>
|
|
508
|
-
)}<input part="display-input" class=${
|
|
494
|
+
})} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${o ? "false" : "true"}><slot name="label">${this.label}</slot></label>${x(
|
|
495
|
+
p,
|
|
496
|
+
() => h`<div part="tags" class="select__tags" @cx-remove=${this.handleTagRemove}>${this.tags}</div>`
|
|
497
|
+
)}<input part="display-input" class=${y({
|
|
509
498
|
"select__display-input": !0,
|
|
510
499
|
"select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus && !c && !(this.open && this.inputBehavior === "filter"),
|
|
511
500
|
"select__display-input--large": this.size === "large",
|
|
512
501
|
"select__display-input--medium": this.size === "medium",
|
|
513
502
|
"select__display-input--small": this.size === "small"
|
|
514
|
-
})} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${o ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${
|
|
503
|
+
})} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${o ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${x(
|
|
515
504
|
this.loading,
|
|
516
|
-
() =>
|
|
505
|
+
() => h`<cx-spinner part="spinner" role="status" aria-live="polite"></cx-spinner>`
|
|
517
506
|
)}
|
|
518
|
-
${
|
|
507
|
+
${x(
|
|
519
508
|
l,
|
|
520
|
-
() =>
|
|
521
|
-
)}<slot name="suffix" part="suffix" class="select__suffix"></slot><slot name="expand-icon" part="expand-icon" class="select__expand-icon"><cx-icon name="arrow_drop_down"></cx-icon></slot></div><div id="listbox" role="listbox" aria-expanded=${this.open ? "true" : "false"} ?hidden=${!this.open || this.disabled} aria-multiselectable=${this.multiple ? "true" : "false"} aria-labelledby="label" part="listbox" class="select__listbox" tabindex="-1" @mouseup=${this.handleOptionClick} @slotchange=${this.handleDefaultSlotChange}><slot></slot>${
|
|
509
|
+
() => h`<button part="clear-button" class="select__clear" type="button" aria-label=${this.localize.term("clearEntry")} @mousedown=${this.handleClearMouseDown} @click=${this.handleClearClick} tabindex="-1"><slot name="clear-icon"><cx-icon name="cancel"></cx-icon></slot></button>`
|
|
510
|
+
)}<slot name="suffix" part="suffix" class="select__suffix"></slot><slot name="expand-icon" part="expand-icon" class="select__expand-icon"><cx-icon name="arrow_drop_down"></cx-icon></slot></div><div id="listbox" role="listbox" aria-expanded=${this.open ? "true" : "false"} ?hidden=${!this.open || this.disabled} aria-multiselectable=${this.multiple ? "true" : "false"} aria-labelledby="label" part="listbox" class="select__listbox" tabindex="-1" @mouseup=${this.handleOptionClick} @slotchange=${this.handleDefaultSlotChange}><slot></slot>${x(
|
|
522
511
|
this.shouldShowNoOptionsMessage,
|
|
523
|
-
() =>
|
|
512
|
+
() => h`<cx-typography variant="body3" class="select__no-options" role="option">${this.noOptionText}</cx-typography>`
|
|
524
513
|
)}</div></cx-popup></div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${n ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
|
|
525
514
|
}
|
|
526
515
|
};
|
|
516
|
+
u = /* @__PURE__ */ new WeakSet();
|
|
517
|
+
g = function() {
|
|
518
|
+
this.typeToSelectString = "", this.displayLabel = "", this.displayInput.value = "", this.inputBehavior === "filter" && this.filterOptionsByInput();
|
|
519
|
+
};
|
|
520
|
+
_ = function() {
|
|
521
|
+
if (!this.currentOption?.hidden)
|
|
522
|
+
return;
|
|
523
|
+
const t = this.getVisibleOptions()[0];
|
|
524
|
+
t && this.setCurrentOption(t);
|
|
525
|
+
};
|
|
527
526
|
i.styles = [
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
527
|
+
$,
|
|
528
|
+
F,
|
|
529
|
+
G
|
|
531
530
|
];
|
|
532
531
|
i.dependencies = {
|
|
533
|
-
"cx-icon":
|
|
534
|
-
"cx-line-clamp":
|
|
535
|
-
"cx-popup":
|
|
536
|
-
"cx-spinner":
|
|
537
|
-
"cx-tag":
|
|
538
|
-
"cx-typography":
|
|
532
|
+
"cx-icon": H,
|
|
533
|
+
"cx-line-clamp": L,
|
|
534
|
+
"cx-popup": q,
|
|
535
|
+
"cx-spinner": K,
|
|
536
|
+
"cx-tag": j,
|
|
537
|
+
"cx-typography": z
|
|
539
538
|
};
|
|
540
539
|
s([
|
|
541
|
-
|
|
540
|
+
b(".select")
|
|
542
541
|
], i.prototype, "popup", 2);
|
|
543
542
|
s([
|
|
544
|
-
|
|
543
|
+
b(".select__combobox")
|
|
545
544
|
], i.prototype, "combobox", 2);
|
|
546
545
|
s([
|
|
547
|
-
|
|
546
|
+
b(".select__display-input")
|
|
548
547
|
], i.prototype, "displayInput", 2);
|
|
549
548
|
s([
|
|
550
|
-
|
|
549
|
+
b(".select__value-input")
|
|
551
550
|
], i.prototype, "valueInput", 2);
|
|
552
551
|
s([
|
|
553
|
-
|
|
552
|
+
b(".select__listbox")
|
|
554
553
|
], i.prototype, "listbox", 2);
|
|
555
554
|
s([
|
|
556
|
-
|
|
555
|
+
v()
|
|
557
556
|
], i.prototype, "hasFocus", 2);
|
|
558
557
|
s([
|
|
559
|
-
|
|
558
|
+
v()
|
|
560
559
|
], i.prototype, "displayLabel", 2);
|
|
561
560
|
s([
|
|
562
|
-
|
|
561
|
+
v()
|
|
563
562
|
], i.prototype, "currentOption", 2);
|
|
564
563
|
s([
|
|
565
|
-
|
|
564
|
+
v()
|
|
566
565
|
], i.prototype, "selectedOptions", 2);
|
|
567
566
|
s([
|
|
568
567
|
a()
|
|
@@ -579,7 +578,7 @@ s([
|
|
|
579
578
|
a({ attribute: "fallback-option-value", type: String })
|
|
580
579
|
], i.prototype, "fallbackOptionValue", 2);
|
|
581
580
|
s([
|
|
582
|
-
|
|
581
|
+
T()
|
|
583
582
|
], i.prototype, "defaultValue", 2);
|
|
584
583
|
s([
|
|
585
584
|
a({ reflect: !0 })
|
|
@@ -706,35 +705,32 @@ s([
|
|
|
706
705
|
a({ attribute: "no-option-text", type: String })
|
|
707
706
|
], i.prototype, "noOptionText", 2);
|
|
708
707
|
s([
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
708
|
+
d("getOptionValue", { waitUntilFirstUpdate: !0 }),
|
|
709
|
+
d("getOptionLabel", { waitUntilFirstUpdate: !0 }),
|
|
710
|
+
d("getOptionSelected", { waitUntilFirstUpdate: !0 }),
|
|
711
|
+
d("getOptionDisabled", { waitUntilFirstUpdate: !0 }),
|
|
712
|
+
d("fallbackOptionValue", { waitUntilFirstUpdate: !0 })
|
|
714
713
|
], i.prototype, "handleDefaultSlotChange", 1);
|
|
715
714
|
s([
|
|
716
|
-
|
|
715
|
+
d("disabled", { waitUntilFirstUpdate: !0 })
|
|
717
716
|
], i.prototype, "handleDisabledChange", 1);
|
|
718
717
|
s([
|
|
719
|
-
|
|
718
|
+
d("value", { waitUntilFirstUpdate: !0 })
|
|
720
719
|
], i.prototype, "handleValueChange", 1);
|
|
721
720
|
s([
|
|
722
|
-
|
|
721
|
+
d("noDropdown", { waitUntilFirstUpdate: !0 })
|
|
723
722
|
], i.prototype, "handleNoDropdownChange", 1);
|
|
724
|
-
s([
|
|
725
|
-
p("open", { waitUntilFirstUpdate: !0 })
|
|
726
|
-
], i.prototype, "handleOpenChange", 1);
|
|
727
723
|
i = s([
|
|
728
|
-
|
|
724
|
+
E("cx-select")
|
|
729
725
|
], i);
|
|
730
|
-
|
|
726
|
+
k("select.show", {
|
|
731
727
|
keyframes: [
|
|
732
728
|
{ opacity: 0, scale: 0.9 },
|
|
733
729
|
{ opacity: 1, scale: 1 }
|
|
734
730
|
],
|
|
735
731
|
options: { duration: 100, easing: "ease" }
|
|
736
732
|
});
|
|
737
|
-
|
|
733
|
+
k("select.hide", {
|
|
738
734
|
keyframes: [
|
|
739
735
|
{ opacity: 1, scale: 1 },
|
|
740
736
|
{ opacity: 0, scale: 0.9 }
|
|
@@ -52,8 +52,8 @@ import gl from "./menu-item.js";
|
|
|
52
52
|
import d6 from "./menu-label.js";
|
|
53
53
|
import qF from "./menu-section.js";
|
|
54
54
|
import fee from "./mutation-observer.js";
|
|
55
|
-
import { C as na, a as vee } from "../chunks/option.
|
|
56
|
-
import { C as yee } from "../chunks/pagination.
|
|
55
|
+
import { C as na, a as vee } from "../chunks/option.C3DgnL2F.js";
|
|
56
|
+
import { C as yee } from "../chunks/pagination.DSi4odS9.js";
|
|
57
57
|
import Qd from "./popup.js";
|
|
58
58
|
import bee from "./progress-bar.js";
|
|
59
59
|
import { default as wZt } from "./progress-ring.js";
|
|
@@ -115,7 +115,7 @@ import { d as ec } from "../chunks/debounce.DaHuiSGU.js";
|
|
|
115
115
|
import { t as eT, c as tl, d as $ee, i as h2, G as Kg, j as gp, h as Fee, s as xM, T as f6, k as gn, l as lz, u as zee, m as jee, n as cz, o as kM } from "../chunks/string.CfI2ejyR.js";
|
|
116
116
|
import { b as IQt, e as DQt, f as MQt, y as PQt, g as NQt, p as LQt, z as BQt, x as RQt, a as $Qt, w as FQt, r as zQt, q as jQt, v as HQt } from "../chunks/string.CfI2ejyR.js";
|
|
117
117
|
import { c as pn } from "../chunks/repeat.CFjcER6_.js";
|
|
118
|
-
import { a as Pf, F as Rh, b as Nf, c as dz, M as v6, d as Dw, e as Mw, f as Hee, g as uz, h as pz, i as y6, j as b6, C as Vee, k as Uy, l as _M, m as CM, n as SM, o as TM, p as Uee, q as qee, r as AM, u as g2, s as b9, t as w9, v as x9 } from "../chunks/asset-link-format.
|
|
118
|
+
import { a as Pf, F as Rh, b as Nf, c as dz, M as v6, d as Dw, e as Mw, f as Hee, g as uz, h as pz, i as y6, j as b6, C as Vee, k as Uy, l as _M, m as CM, n as SM, o as TM, p as Uee, q as qee, r as AM, u as g2, s as b9, t as w9, v as x9 } from "../chunks/asset-link-format.DLYctI8Q.js";
|
|
119
119
|
import { H as h3 } from "../chunks/slot.j5oheLJC.js";
|
|
120
120
|
import { a as UQt, g as qQt } from "../chunks/slot.j5oheLJC.js";
|
|
121
121
|
import { c as Or, d as Wee, H as On, e as Oa, f as ys, a as Gee, b as rr } from "../chunks/resizable-component.styles.CAfXABBc.js";
|
|
@@ -142,8 +142,8 @@ import { g as xz, F as ate } from "../chunks/form.DSsy3Fcy.js";
|
|
|
142
142
|
import { c as xen, f as ken, v as _en, a as Cen } from "../chunks/form.DSsy3Fcy.js";
|
|
143
143
|
import { d as rT, c as LM, e as ste, i as BM, h as lte, p as cte, t as dte } from "../chunks/date.iWq_pkIk.js";
|
|
144
144
|
import { b as Ten, f as Aen, g as Een, a as Oen, n as Ien } from "../chunks/date.iWq_pkIk.js";
|
|
145
|
-
import { F as kz, a as ute, b as x6, H as pte, c as v0, d as hte, o as _u } from "../chunks/color-swatch-group.
|
|
146
|
-
import { C as Men, e as Pen, f as Nen } from "../chunks/color-swatch-group.
|
|
145
|
+
import { F as kz, a as ute, b as x6, H as pte, c as v0, d as hte, o as _u } from "../chunks/color-swatch-group.DMpWk1pm.js";
|
|
146
|
+
import { C as Men, e as Pen, f as Nen } from "../chunks/color-swatch-group.DMpWk1pm.js";
|
|
147
147
|
import { b as v3, a as Pw, c as gte, r as Ue, j as _e, w as mte, R as fte } from "../chunks/jsx-runtime.CTpPVMxj.js";
|
|
148
148
|
import { j as oT } from "../chunks/index.CrhRU5m8.js";
|
|
149
149
|
import { i as k6, T as aT, t as vte } from "../chunks/transform.BuqENXeT.js";
|
|
@@ -46524,7 +46524,7 @@ class Bkt {
|
|
|
46524
46524
|
clearInterval(this.timerId), this.stopped = !0, this.host.requestUpdate();
|
|
46525
46525
|
}
|
|
46526
46526
|
}
|
|
46527
|
-
const Rkt = un`:host{--aspect-ratio:16 / 9;--slide-gap:var(--cx-spacing-medium,1rem);height:var(--height);min-height:var(--min-height,auto);max-height:var(--max-height,auto);width:100%;display:flex;position:relative}:host([use-aspect-ratio]){aspect-ratio:var(--block-aspect-ratio)}:host([orientation=vertical]) .carousel__pagination{height:100%}:host ::slotted(cx-gallery-item){pointer-events:auto;z-index:1;position:relative}.carousel{grid-template:".slides."1fr". . ."min-content/min-content 1fr min-content;align-items:center;min-width:100%;min-height:100%;display:grid;position:relative;overflow:hidden}.container{--check-border-width:var(--scroll-container-border-width,0px);--check-border-radius:var(--scroll-container-border-radius,0px);border:var(--border,none) solid;border-radius:var(--border-radius,var(--cx-border-radius-small));flex-direction:column;width:100%;max-height:100%;display:flex;container:asset-container}.container--vertical{flex-direction:row}.container:has(.carousel__slides:focus-visible){outline:var(--cx-focus-ring);outline-offset:0px}.carousel-container{border:var(--scroll-container-border,none) solid;border-radius:var(--scroll-container-border-radius,var(--cx-border-radius-small));min-height:0;transition:transform var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear);flex:1;display:flex;position:relative;overflow:clip}@container asset-container style(--check-border-width:0px) and style(--check-border-radius:0px){.carousel-container{overflow:unset}}.carousel-container--vertical{overflow-y:clip}.carousel-container--horizontal{overflow-x:clip}.carousel--vertical{grid-template-areas:".slides"".slides"}.carousel--empty:before{color:#fff;content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;text-shadow:.05em .05em .1em #000;vertical-align:middle;background-color:#000;justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:flex;position:absolute}.carousel__pagination{justify-content:center;gap:var(--cx-spacing-small);padding:var(--cx-spacing-large);--dot-pagination-gap:var(--cx-spacing-small);--dot-pagination-padding:0;flex-wrap:wrap;grid-area:pagination;display:flex}.carousel__item-group{width:100%;height:100%;position:relative}.carousel__slides{overscroll-behavior-x:contain;scrollbar-width:none;width:100%;height:100%;aspect-ratio:calc(var(--aspect-ratio) * var(--slides-per-page));--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-area:slides;place-items:center;display:grid;overflow:auto}.carousel__slides:focus-visible{outline:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__slides--horizontal{grid-auto-flow:column;grid-auto-columns:var(--slide-size);column-gap:var(--slide-gap);scroll-snap-type:x mandatory;grid-auto-rows:100%;overflow-y:hidden}.carousel__slides--vertical{grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:var(--slide-size);row-gap:var(--slide-gap);scroll-snap-type:y mandatory;overflow-x:hidden}.carousel__slides--horizontal.carousel__slides--peek-slides{scroll-padding-inline:var(--scroll-hint,0px);padding-inline:var(--scroll-hint,0px)}.carousel__slides--vertical.carousel__slides--peek-slides{scroll-padding-block:var(--scroll-hint,0px);padding-block:var(--scroll-hint,0px)}.carousel__slides--fade--clone{opacity:0;pointer-events:none;position:absolute}:host([orientation=vertical]) ::slotted(cx-gallery-item){height:100%}.carousel__slides::-webkit-scrollbar{display:none}.carousel__navigation{font-size:var(--cx-font-size-x-large);height:0;left:calc(var(--cx-spacing-x-large) / 2);width:calc(100% - var(--cx-spacing-x-large));z-index:calc(var(--cx-z-index-dialog) + 2);justify-content:space-between;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.carousel__navigation-button{border-radius:var(--cx-border-radius-circle);font-size:inherit;color:var(--
|
|
46527
|
+
const Rkt = un`:host{--aspect-ratio:16 / 9;--navigation-button-background-color:var(--color,var(--cx-color-neutral-0));--navigation-icon-color:var(--cx-color-neutral-800);--navigation-icon-size:var(--cx-font-size-2x-large);--slide-gap:var(--cx-spacing-medium,1rem);height:var(--height);min-height:var(--min-height,auto);max-height:var(--max-height,auto);width:100%;display:flex;position:relative}:host([use-aspect-ratio]){aspect-ratio:var(--block-aspect-ratio)}:host([orientation=vertical]) .carousel__pagination{height:100%}:host ::slotted(cx-gallery-item){pointer-events:auto;z-index:1;position:relative}.carousel{grid-template:".slides."1fr". . ."min-content/min-content 1fr min-content;align-items:center;min-width:100%;min-height:100%;display:grid;position:relative;overflow:hidden}.container{--check-border-width:var(--scroll-container-border-width,0px);--check-border-radius:var(--scroll-container-border-radius,0px);border:var(--border,none) solid;border-radius:var(--border-radius,var(--cx-border-radius-small));flex-direction:column;width:100%;max-height:100%;display:flex;container:asset-container}.container--vertical{flex-direction:row}.container:has(.carousel__slides:focus-visible){outline:var(--cx-focus-ring);outline-offset:0px}.carousel-container{border:var(--scroll-container-border,none) solid;border-radius:var(--scroll-container-border-radius,var(--cx-border-radius-small));min-height:0;transition:transform var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear);flex:1;display:flex;position:relative;overflow:clip}@container asset-container style(--check-border-width:0px) and style(--check-border-radius:0px){.carousel-container{overflow:unset}}.carousel-container--vertical{overflow-y:clip}.carousel-container--horizontal{overflow-x:clip}.carousel--vertical{grid-template-areas:".slides"".slides"}.carousel--empty:before{color:#fff;content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;text-shadow:.05em .05em .1em #000;vertical-align:middle;background-color:#000;justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:flex;position:absolute}.carousel__pagination{justify-content:center;gap:var(--cx-spacing-small);padding:var(--cx-spacing-large);--dot-pagination-gap:var(--cx-spacing-small);--dot-pagination-padding:0;flex-wrap:wrap;grid-area:pagination;display:flex}.carousel__item-group{width:100%;height:100%;position:relative}.carousel__slides{overscroll-behavior-x:contain;scrollbar-width:none;width:100%;height:100%;aspect-ratio:calc(var(--aspect-ratio) * var(--slides-per-page));--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-area:slides;place-items:center;display:grid;overflow:auto}.carousel__slides:focus-visible{outline:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__slides--horizontal{grid-auto-flow:column;grid-auto-columns:var(--slide-size);column-gap:var(--slide-gap);scroll-snap-type:x mandatory;grid-auto-rows:100%;overflow-y:hidden}.carousel__slides--vertical{grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:var(--slide-size);row-gap:var(--slide-gap);scroll-snap-type:y mandatory;overflow-x:hidden}.carousel__slides--horizontal.carousel__slides--peek-slides{scroll-padding-inline:var(--scroll-hint,0px);padding-inline:var(--scroll-hint,0px)}.carousel__slides--vertical.carousel__slides--peek-slides{scroll-padding-block:var(--scroll-hint,0px);padding-block:var(--scroll-hint,0px)}.carousel__slides--fade--clone{opacity:0;pointer-events:none;position:absolute}:host([orientation=vertical]) ::slotted(cx-gallery-item){height:100%}.carousel__slides::-webkit-scrollbar{display:none}.carousel__navigation{font-size:var(--cx-font-size-x-large);height:0;left:calc(var(--cx-spacing-x-large) / 2);width:calc(100% - var(--cx-spacing-x-large));z-index:calc(var(--cx-z-index-dialog) + 2);justify-content:space-between;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.carousel__navigation-button{--font-size:var(--navigation-icon-size);border-radius:var(--cx-border-radius-circle);font-size:inherit;color:var(--navigation-icon-color);padding:var(--cx-spacing-x-small);cursor:pointer;transition:var(--cx-transition-medium) color;appearance:none;border:none;flex:none;align-items:center;display:flex}@supports (color:rgb(from white r g b / 1)){.carousel__navigation-button{background-color:rgb(from var(--navigation-button-background-color) r g b / calc(alpha * .6))}}@supports not (color:rgb(from white r g b / 1)){.carousel__navigation-button{background-color:#f0f0f099}}.carousel__navigation-button--disabled{opacity:.5;cursor:default}.carousel__navigation-button--hidden{opacity:0;pointer-events:none}.carousel__navigation-button--disabled::part(base){pointer-events:none}.carousel__navigation-button--previous{grid-area:1/1}.carousel__navigation-button--next{grid-area:1/3}.carousel__pagination-item{cursor:pointer;border-radius:var(--cx-border-radius-circle);width:var(--cx-spacing-small);height:var(--cx-spacing-small);background:0 0;background-color:var(--cx-color-neutral-300);border:0;margin:0;padding:0;display:block}.carousel__pagination-item--active{background-color:var(--cx-color-neutral-500)}.carousel__pagination-item--loading{cursor:default;opacity:.5}.carousel__navigation-button:focus-visible,.carousel__pagination-item:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.carousel__slide{width:100%;height:100%;aspect-ratio:var(--aspect-ratio);padding:var(--item-padding,0);scroll-snap-align:start;scroll-snap-stop:always;display:block}cx-carousel-dot-pagination{display:inline-block}.highlighter__popup--hovered::part(popup){z-index:calc(var(--cx-z-index-dialog) + 1)}`;
|
|
46528
46528
|
var $kt = Object.defineProperty, Fkt = Object.getOwnPropertyDescriptor, En = (n, e, t, i) => {
|
|
46529
46529
|
for (var r = i > 1 ? void 0 : i ? Fkt(e, t) : e, o = n.length - 1, a; o >= 0; o--)
|
|
46530
46530
|
(a = n[o]) && (r = (i ? a(e, t, r) : a(r)) || r);
|
package/library/package.json
CHANGED
|
@@ -19,7 +19,6 @@ import { default as CxSpace } from '../space/space';
|
|
|
19
19
|
* @csspart suffix - The container that wraps the suffix.
|
|
20
20
|
*
|
|
21
21
|
* @cssproperty [--option-color=var(--cx-color-neutral-700)] - The option's color.
|
|
22
|
-
* @cssproperty [--option-current-background-color=var(--cx-menu-item-background-color-hover)] - The background color of the option under the keyboard cursor (`aria-activedescendant`). Only one option is current at a time, and it is not necessarily the selected one.
|
|
23
22
|
* @cssproperty [--option-font-weight=var(--cx-font-weight-regular)] - The option's font weight.
|
|
24
23
|
* @cssproperty [--option-help-text-color=var(--cx-color-neutral-600)] - The option's help text color.
|
|
25
24
|
* @cssproperty [--option-help-text-font-weight=var(--cx-font-weight-regular)] - The option's help text font weight.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
|
|
2
2
|
import { default as CxTypography } from '../typography/typography.ts';
|
|
3
3
|
import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
|
|
4
|
-
import { CSSResultGroup, TemplateResult, nothing } from 'lit';
|
|
4
|
+
import { CSSResultGroup, PropertyValues, TemplateResult, nothing } from 'lit';
|
|
5
5
|
import { default as CxIcon } from '../icon/icon';
|
|
6
6
|
import { default as CxPopup } from '../popup/popup';
|
|
7
7
|
import { default as CxSpinner } from '../spinner/spinner';
|
|
@@ -54,6 +54,7 @@ import { default as CxTag } from '../tag/tag';
|
|
|
54
54
|
* @cssproperty --select-font-size - The font size of the select.
|
|
55
55
|
*/
|
|
56
56
|
export default class CxSelect extends CortexElement implements CortexFormControl {
|
|
57
|
+
#private;
|
|
57
58
|
static readonly styles: CSSResultGroup;
|
|
58
59
|
static readonly dependencies: {
|
|
59
60
|
'cx-icon': typeof CxIcon;
|
|
@@ -319,6 +320,7 @@ export default class CxSelect extends CortexElement implements CortexFormControl
|
|
|
319
320
|
connectedCallback(): void;
|
|
320
321
|
disconnectedCallback(): void;
|
|
321
322
|
runFirstUpdated(): void;
|
|
323
|
+
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
322
324
|
private addOpenListeners;
|
|
323
325
|
private removeOpenListeners;
|
|
324
326
|
private handleFocus;
|
|
@@ -39,6 +39,9 @@ import { AutoplayController } from './autoplay-controller';
|
|
|
39
39
|
* @cssproperty --border - The border of entire carousel.
|
|
40
40
|
* @cssproperty --scroll-container-border - The border of the scroll container.
|
|
41
41
|
* @cssproperty --border-radius - The border radius of the carousel.
|
|
42
|
+
* @cssproperty [--navigation-button-background-color=var(--color, var(--cx-color-neutral-0))] - The background color of the previous and next navigation buttons, applied at 60% of its opacity.
|
|
43
|
+
* @cssproperty [--navigation-icon-color=var(--cx-color-neutral-800)] - The color of the previous and next navigation icons.
|
|
44
|
+
* @cssproperty [--navigation-icon-size=var(--cx-font-size-2x-large)] - The size of the previous and next navigation icons. Also insulates the icons from a `--font-size` inherited from an ancestor.
|
|
42
45
|
*/
|
|
43
46
|
declare class CxCarouselDotPagination extends CxDotPagination {
|
|
44
47
|
createRenderRoot(): this;
|