@sbb-esta/lyne-elements 2.0.1 → 2.0.3
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/accordion/accordion.d.ts +1 -2
- package/accordion/accordion.d.ts.map +1 -1
- package/accordion.js +39 -44
- package/alert/alert-group/alert-group.d.ts +1 -2
- package/alert/alert-group/alert-group.d.ts.map +1 -1
- package/alert/alert-group.js +29 -34
- package/autocomplete/autocomplete-base-element.d.ts +1 -0
- package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/autocomplete/autocomplete.d.ts +1 -1
- package/autocomplete/autocomplete.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +1 -1
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid.js +18 -22
- package/autocomplete.js +17 -18
- package/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts +1 -2
- package/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
- package/breadcrumb/breadcrumb-group.js +26 -30
- package/button/common.js +4 -4
- package/calendar/calendar.d.ts +3 -3
- package/calendar/calendar.d.ts.map +1 -1
- package/checkbox/checkbox-group/checkbox-group.d.ts +1 -1
- package/checkbox/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/checkbox/checkbox-group.js +34 -36
- package/core/base-elements/button-base-element.d.ts +1 -1
- package/core/base-elements/button-base-element.d.ts.map +1 -1
- package/core/base-elements.js +1 -1
- package/core/controllers/connected-abort-controller.d.ts +4 -0
- package/core/controllers/connected-abort-controller.d.ts.map +1 -1
- package/core/eventing/forward-event.d.ts +7 -1
- package/core/eventing/forward-event.d.ts.map +1 -1
- package/core/eventing.js +14 -12
- package/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-mixin.d.ts +2 -4
- package/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-radio-button-mixin.d.ts +4 -3
- package/core/mixins/form-associated-radio-button-mixin.d.ts.map +1 -1
- package/core/mixins.js +278 -284
- package/core/styles/core.scss +13 -12
- package/core/styles/mixins/buttons.scss +1 -1
- package/core/styles/mixins/lists.scss +100 -35
- package/core.css +2 -1
- package/custom-elements.json +390 -492
- package/datepicker/common/datepicker-button.d.ts +1 -1
- package/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/datepicker/common.js +24 -24
- package/datepicker/datepicker/datepicker.d.ts +1 -1
- package/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/datepicker/datepicker-toggle/datepicker-toggle.d.ts +1 -2
- package/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
- package/datepicker/datepicker-toggle.js +76 -75
- package/datepicker/datepicker.js +58 -60
- package/development/accordion/accordion.d.ts +1 -2
- package/development/accordion/accordion.d.ts.map +1 -1
- package/development/accordion.js +16 -23
- package/development/alert/alert-group/alert-group.d.ts +1 -2
- package/development/alert/alert-group/alert-group.d.ts.map +1 -1
- package/development/alert/alert-group.js +12 -17
- package/development/autocomplete/autocomplete-base-element.d.ts +1 -0
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete.d.ts +1 -1
- package/development/autocomplete/autocomplete.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +1 -1
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid.js +9 -12
- package/development/autocomplete.js +12 -12
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts +1 -2
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
- package/development/breadcrumb/breadcrumb-group.js +13 -17
- package/development/button/common.js +20 -6
- package/development/calendar/calendar.d.ts +3 -3
- package/development/calendar/calendar.d.ts.map +1 -1
- package/development/calendar.js +1 -1
- package/development/checkbox/checkbox-group/checkbox-group.d.ts +1 -1
- package/development/checkbox/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/development/checkbox/checkbox-group.js +10 -15
- package/development/core/base-elements/button-base-element.d.ts +1 -1
- package/development/core/base-elements/button-base-element.d.ts.map +1 -1
- package/development/core/base-elements.js +2 -2
- package/development/core/controllers/connected-abort-controller.d.ts +4 -0
- package/development/core/controllers/connected-abort-controller.d.ts.map +1 -1
- package/development/core/controllers.js +1 -1
- package/development/core/eventing/forward-event.d.ts +7 -1
- package/development/core/eventing/forward-event.d.ts.map +1 -1
- package/development/core/eventing.js +5 -3
- package/development/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-mixin.d.ts +2 -4
- package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-radio-button-mixin.d.ts +4 -3
- package/development/core/mixins/form-associated-radio-button-mixin.d.ts.map +1 -1
- package/development/core/mixins.js +51 -64
- package/development/datepicker/common/datepicker-button.d.ts +1 -1
- package/development/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/development/datepicker/common.js +6 -7
- package/development/datepicker/datepicker/datepicker.d.ts +1 -1
- package/development/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts +1 -2
- package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
- package/development/datepicker/datepicker-toggle.js +14 -14
- package/development/datepicker/datepicker.js +8 -11
- package/development/dialog/dialog/dialog.d.ts +1 -1
- package/development/dialog/dialog/dialog.d.ts.map +1 -1
- package/development/dialog/dialog-content/dialog-content.d.ts.map +1 -1
- package/development/dialog/dialog-content.js +3 -2
- package/development/dialog/dialog.js +7 -13
- package/development/expansion-panel/expansion-panel/expansion-panel.d.ts +1 -1
- package/development/expansion-panel/expansion-panel/expansion-panel.d.ts.map +1 -1
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +1 -2
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts.map +1 -1
- package/development/expansion-panel/expansion-panel-header.js +7 -11
- package/development/expansion-panel/expansion-panel.js +5 -7
- package/development/file-selector/common.js +3 -3
- package/development/flip-card/flip-card/flip-card.d.ts +1 -2
- package/development/flip-card/flip-card/flip-card.d.ts.map +1 -1
- package/development/flip-card/flip-card.js +12 -15
- package/development/footer/footer.d.ts +1 -1
- package/development/footer.js +2 -2
- package/development/form-field/form-field-clear/form-field-clear.d.ts +1 -1
- package/development/form-field/form-field-clear/form-field-clear.d.ts.map +1 -1
- package/development/form-field/form-field-clear.js +5 -6
- package/development/image/image.d.ts +2 -2
- package/development/image.js +1 -1
- package/development/map-container/map-container.d.ts.map +1 -1
- package/development/map-container.js +3 -2
- package/development/menu/menu/menu.d.ts +2 -1
- package/development/menu/menu/menu.d.ts.map +1 -1
- package/development/menu/menu.js +20 -13
- package/development/message.js +2 -1
- package/development/navigation/common/navigation-action-common.d.ts +1 -1
- package/development/navigation/common/navigation-action-common.d.ts.map +1 -1
- package/development/navigation/common.js +11 -13
- package/development/navigation/navigation/navigation.d.ts +0 -1
- package/development/navigation/navigation/navigation.d.ts.map +1 -1
- package/development/navigation/navigation-section/navigation-section.d.ts +1 -0
- package/development/navigation/navigation-section/navigation-section.d.ts.map +1 -1
- package/development/navigation/navigation-section.js +5 -6
- package/development/navigation/navigation.js +9 -10
- package/development/notification.js +2 -2
- package/development/option/option/option-base-element.d.ts +1 -1
- package/development/option/option/option-base-element.d.ts.map +1 -1
- package/development/option/option.js +17 -21
- package/development/overlay/overlay-base-element.d.ts +1 -0
- package/development/overlay/overlay-base-element.d.ts.map +1 -1
- package/development/overlay.js +4 -4
- package/development/popover/popover/popover.d.ts.map +1 -1
- package/development/popover/popover.js +6 -3
- package/development/radio-button/common/radio-button-common.d.ts +0 -2
- package/development/radio-button/common/radio-button-common.d.ts.map +1 -1
- package/development/radio-button/common.js +11 -27
- package/development/radio-button/radio-button-group/radio-button-group.d.ts +3 -3
- package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/development/radio-button/radio-button-group.js +6 -10
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts +9 -1
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- package/development/radio-button/radio-button-panel.js +17 -7
- package/development/select/select.d.ts +5 -2
- package/development/select/select.d.ts.map +1 -1
- package/development/select.js +59 -34
- package/development/selection-expansion-panel/selection-expansion-panel.d.ts +1 -1
- package/development/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -1
- package/development/selection-expansion-panel.js +6 -8
- package/development/slider/slider.d.ts +1 -2
- package/development/slider/slider.d.ts.map +1 -1
- package/development/slider.js +6 -8
- package/development/stepper/step/step.d.ts +5 -5
- package/development/stepper/step/step.d.ts.map +1 -1
- package/development/stepper/step-label/step-label.d.ts +1 -1
- package/development/stepper/step-label/step-label.d.ts.map +1 -1
- package/development/stepper/step-label.js +12 -14
- package/development/stepper/step.js +8 -10
- package/development/stepper/stepper/stepper.d.ts +9 -8
- package/development/stepper/stepper/stepper.d.ts.map +1 -1
- package/development/stepper/stepper.js +28 -27
- package/development/tabs/tab-group/tab-group.d.ts +1 -2
- package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/development/tabs/tab-group.js +9 -14
- package/development/tag/tag/tag.d.ts +1 -1
- package/development/tag/tag/tag.d.ts.map +1 -1
- package/development/tag/tag-group/tag-group.d.ts +1 -1
- package/development/tag/tag-group/tag-group.d.ts.map +1 -1
- package/development/tag/tag-group.js +1 -1
- package/development/tag/tag.js +5 -6
- package/development/teaser-hero.js +6 -2
- package/development/time-input/time-input.d.ts +1 -1
- package/development/time-input/time-input.d.ts.map +1 -1
- package/development/time-input.js +6 -4
- package/development/toast/toast.d.ts +1 -1
- package/development/toast/toast.d.ts.map +1 -1
- package/development/toast.js +6 -7
- package/development/toggle/toggle/toggle.d.ts +1 -1
- package/development/toggle/toggle/toggle.d.ts.map +1 -1
- package/development/toggle/toggle-option/toggle-option.d.ts +1 -1
- package/development/toggle/toggle-option/toggle-option.d.ts.map +1 -1
- package/development/toggle/toggle-option.js +9 -13
- package/development/toggle/toggle.js +6 -8
- package/development/train/train-formation/train-formation.d.ts +1 -2
- package/development/train/train-formation/train-formation.d.ts.map +1 -1
- package/development/train/train-formation.js +8 -12
- package/dialog/dialog/dialog.d.ts +1 -1
- package/dialog/dialog/dialog.d.ts.map +1 -1
- package/dialog/dialog-content/dialog-content.d.ts.map +1 -1
- package/dialog/dialog-content.js +8 -7
- package/dialog/dialog.js +36 -42
- package/expansion-panel/expansion-panel/expansion-panel.d.ts +1 -1
- package/expansion-panel/expansion-panel/expansion-panel.d.ts.map +1 -1
- package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +1 -2
- package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts.map +1 -1
- package/expansion-panel/expansion-panel-header.js +29 -33
- package/expansion-panel/expansion-panel.js +58 -60
- package/file-selector/common.js +5 -5
- package/flip-card/flip-card/flip-card.d.ts +1 -2
- package/flip-card/flip-card/flip-card.d.ts.map +1 -1
- package/flip-card/flip-card.js +34 -36
- package/footer/footer.d.ts +1 -1
- package/footer.js +1 -1
- package/form-field/form-field-clear/form-field-clear.d.ts +1 -1
- package/form-field/form-field-clear/form-field-clear.d.ts.map +1 -1
- package/form-field/form-field-clear.js +10 -11
- package/image/image.d.ts +2 -2
- package/lists.css +46 -62
- package/map-container/map-container.d.ts.map +1 -1
- package/map-container.js +22 -21
- package/menu/menu/menu.d.ts +2 -1
- package/menu/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +84 -77
- package/message.js +12 -12
- package/navigation/common/navigation-action-common.d.ts +1 -1
- package/navigation/common/navigation-action-common.d.ts.map +1 -1
- package/navigation/common.js +24 -26
- package/navigation/navigation/navigation.d.ts +0 -1
- package/navigation/navigation/navigation.d.ts.map +1 -1
- package/navigation/navigation-section/navigation-section.d.ts +1 -0
- package/navigation/navigation-section/navigation-section.d.ts.map +1 -1
- package/navigation/navigation-section.js +35 -36
- package/navigation/navigation.js +64 -65
- package/notification.js +1 -1
- package/option/option/option-base-element.d.ts +1 -1
- package/option/option/option-base-element.d.ts.map +1 -1
- package/option/option.js +125 -125
- package/overlay/overlay-base-element.d.ts +1 -0
- package/overlay/overlay-base-element.d.ts.map +1 -1
- package/overlay.js +35 -35
- package/package.json +1 -1
- package/popover/popover/popover.d.ts.map +1 -1
- package/popover/popover.js +6 -3
- package/radio-button/common/radio-button-common.d.ts +0 -2
- package/radio-button/common/radio-button-common.d.ts.map +1 -1
- package/radio-button/common.js +17 -23
- package/radio-button/radio-button-group/radio-button-group.d.ts +3 -3
- package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/radio-button/radio-button-group.js +21 -25
- package/radio-button/radio-button-panel/radio-button-panel.d.ts +9 -1
- package/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- package/radio-button/radio-button-panel.js +40 -38
- package/select/select.d.ts +5 -2
- package/select/select.d.ts.map +1 -1
- package/select.js +96 -84
- package/selection-expansion-panel/selection-expansion-panel.d.ts +1 -1
- package/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -1
- package/selection-expansion-panel.js +17 -18
- package/slider/slider.d.ts +1 -2
- package/slider/slider.d.ts.map +1 -1
- package/slider.js +23 -25
- package/standard-theme.css +48 -63
- package/stepper/step/step.d.ts +5 -5
- package/stepper/step/step.d.ts.map +1 -1
- package/stepper/step-label/step-label.d.ts +1 -1
- package/stepper/step-label/step-label.d.ts.map +1 -1
- package/stepper/step-label.js +16 -18
- package/stepper/step.js +22 -24
- package/stepper/stepper/stepper.d.ts +9 -8
- package/stepper/stepper/stepper.d.ts.map +1 -1
- package/stepper/stepper.js +57 -58
- package/tabs/tab-group/tab-group.d.ts +1 -2
- package/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/tabs/tab-group.js +83 -88
- package/tag/tag/tag.d.ts +1 -1
- package/tag/tag/tag.d.ts.map +1 -1
- package/tag/tag-group/tag-group.d.ts +1 -1
- package/tag/tag-group/tag-group.d.ts.map +1 -1
- package/tag/tag.js +30 -30
- package/teaser-hero.js +19 -19
- package/time-input/time-input.d.ts +1 -1
- package/time-input/time-input.d.ts.map +1 -1
- package/time-input.js +7 -5
- package/toast/toast.d.ts +1 -1
- package/toast/toast.d.ts.map +1 -1
- package/toast.js +32 -33
- package/toggle/toggle/toggle.d.ts +1 -1
- package/toggle/toggle/toggle.d.ts.map +1 -1
- package/toggle/toggle-option/toggle-option.d.ts +1 -1
- package/toggle/toggle-option/toggle-option.d.ts.map +1 -1
- package/toggle/toggle-option.js +31 -35
- package/toggle/toggle.js +31 -33
- package/train/train-formation/train-formation.d.ts +1 -2
- package/train/train-formation/train-formation.d.ts.map +1 -1
- package/train/train-formation.js +35 -39
|
@@ -1,41 +1,42 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var f = (t) => {
|
|
2
|
+
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __runInitializers as b, __esDecorate as
|
|
7
|
-
import { LitElement as
|
|
8
|
-
import { customElement as
|
|
9
|
-
import { slotState as
|
|
10
|
-
import { isLean as
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
4
|
+
var g = (t, s, i) => s.has(t) || f("Cannot " + i);
|
|
5
|
+
var y = (t, s, i) => (g(t, s, "read from private field"), i ? i.call(t) : s.get(t)), S = (t, s, i) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), d = (t, s, i, n) => (g(t, s, "write to private field"), n ? n.call(t, i) : s.set(t, i), i);
|
|
6
|
+
import { __runInitializers as b, __esDecorate as x } from "tslib";
|
|
7
|
+
import { LitElement as E, html as z, nothing as v } from "lit";
|
|
8
|
+
import { customElement as C, property as k } from "lit/decorators.js";
|
|
9
|
+
import { slotState as B, getOverride as R } from "../core/decorators.js";
|
|
10
|
+
import { isLean as w } from "../core/dom.js";
|
|
11
|
+
import { EventEmitter as I } from "../core/eventing.js";
|
|
12
|
+
import { SbbPanelMixin as P, SbbUpdateSchedulerMixin as D, panelCommonStyle as M } from "../core/mixins.js";
|
|
13
|
+
import { SbbRadioButtonCommonElementMixin as O, radioButtonCommonStyle as U } from "./common.js";
|
|
13
14
|
import "../screen-reader-only.js";
|
|
14
|
-
let
|
|
15
|
+
let N = (() => {
|
|
15
16
|
var o, l;
|
|
16
|
-
let
|
|
17
|
-
|
|
17
|
+
let t = [C("sbb-radio-button-panel"), B()], s, i = [], n, m = P(O(D(E))), u, h = [], p = [];
|
|
18
|
+
var r = (l = class extends m {
|
|
18
19
|
constructor() {
|
|
19
20
|
super(...arguments);
|
|
20
21
|
S(this, o);
|
|
21
|
-
|
|
22
|
+
d(this, o, b(this, h, w() ? "s" : "m")), this._hasSelectionExpansionPanelElement = (b(this, p), !1), this._stateChange = new I(this, r.events.stateChange, { bubbles: !0 });
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
24
25
|
* Size variant, either s or m.
|
|
25
26
|
* @default 'm' / 's' (lean)
|
|
26
27
|
*/
|
|
27
28
|
get size() {
|
|
28
|
-
return
|
|
29
|
+
return y(this, o);
|
|
29
30
|
}
|
|
30
|
-
set size(
|
|
31
|
-
|
|
31
|
+
set size(e) {
|
|
32
|
+
d(this, o, e);
|
|
32
33
|
}
|
|
33
34
|
connectedCallback() {
|
|
34
|
-
var
|
|
35
|
-
super.connectedCallback(), this._hasSelectionExpansionPanelElement = !!((
|
|
35
|
+
var e;
|
|
36
|
+
super.connectedCallback(), this._hasSelectionExpansionPanelElement = !!((e = this.closest) != null && e.call(this, "sbb-selection-expansion-panel"));
|
|
36
37
|
}
|
|
37
|
-
willUpdate(
|
|
38
|
-
super.willUpdate(
|
|
38
|
+
willUpdate(e) {
|
|
39
|
+
super.willUpdate(e), e.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== e.get("checked") && this._stateChange.emit({ type: "checked", checked: this.checked })), e.has("disabled") && this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled });
|
|
39
40
|
}
|
|
40
41
|
/**
|
|
41
42
|
* As an exception, panels with an expansion-panel attached are always focusable
|
|
@@ -46,11 +47,11 @@ let G = (() => {
|
|
|
46
47
|
/**
|
|
47
48
|
* As an exception, radio-panels with an expansion-panel attached are not checked automatically when navigating by keyboard
|
|
48
49
|
*/
|
|
49
|
-
async navigateByKeyboard(
|
|
50
|
-
this._hasSelectionExpansionPanelElement ?
|
|
50
|
+
async navigateByKeyboard(e) {
|
|
51
|
+
this._hasSelectionExpansionPanelElement ? e.focus() : await super.navigateByKeyboard(e);
|
|
51
52
|
}
|
|
52
53
|
render() {
|
|
53
|
-
return
|
|
54
|
+
return z`
|
|
54
55
|
<label class="sbb-selection-panel">
|
|
55
56
|
<div class="sbb-selection-panel__badge">
|
|
56
57
|
<slot name="badge"></slot>
|
|
@@ -61,26 +62,27 @@ let G = (() => {
|
|
|
61
62
|
<slot name="suffix"></slot>
|
|
62
63
|
</span>
|
|
63
64
|
<slot name="subtext"></slot>
|
|
64
|
-
${this.expansionState ?
|
|
65
|
+
${this.expansionState ? z`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : v}
|
|
65
66
|
</span>
|
|
66
67
|
</label>
|
|
67
68
|
`;
|
|
68
69
|
}
|
|
69
70
|
}, o = new WeakMap(), n = l, (() => {
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
var
|
|
73
|
-
return (
|
|
74
|
-
})],
|
|
75
|
-
a.size =
|
|
76
|
-
} }, metadata:
|
|
77
|
-
})(), l.styles = [
|
|
78
|
-
stateChange: "stateChange",
|
|
71
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
|
|
72
|
+
u = [k({ reflect: !0 }), R((a, c) => {
|
|
73
|
+
var _;
|
|
74
|
+
return (_ = a.group) != null && _.size ? a.group.size === "xs" ? "s" : a.group.size : c;
|
|
75
|
+
})], x(l, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, c) => {
|
|
76
|
+
a.size = c;
|
|
77
|
+
} }, metadata: e }, h, p), x(null, s = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, i), r = n = s.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
78
|
+
})(), l.styles = [U, M], l.events = {
|
|
79
79
|
change: "change",
|
|
80
80
|
input: "input",
|
|
81
|
-
panelConnected: "panelConnected"
|
|
82
|
-
|
|
81
|
+
panelConnected: "panelConnected",
|
|
82
|
+
stateChange: "stateChange"
|
|
83
|
+
}, b(n, i), l);
|
|
84
|
+
return r = n;
|
|
83
85
|
})();
|
|
84
86
|
export {
|
|
85
|
-
|
|
87
|
+
N as SbbRadioButtonPanelElement
|
|
86
88
|
};
|
package/select/select.d.ts
CHANGED
|
@@ -62,7 +62,6 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
62
62
|
private _searchString;
|
|
63
63
|
private _didLoad;
|
|
64
64
|
private _isPointerDownEventOnMenu;
|
|
65
|
-
private _abort;
|
|
66
65
|
/**
|
|
67
66
|
* The 'combobox' input element
|
|
68
67
|
* @internal
|
|
@@ -82,6 +81,9 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
82
81
|
getDisplayValue(): string;
|
|
83
82
|
/** Listens to option changes. */
|
|
84
83
|
private _onOptionChanged;
|
|
84
|
+
/** Listens to option changes. */
|
|
85
|
+
private _onOptionLabelChanged;
|
|
86
|
+
private _updateDisplayValue;
|
|
85
87
|
/** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
|
|
86
88
|
private _onValueChanged;
|
|
87
89
|
protected firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
@@ -135,7 +137,8 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
135
137
|
private _resetActiveElement;
|
|
136
138
|
private _pointerDownListener;
|
|
137
139
|
private _closeOnBackdropClick;
|
|
138
|
-
private
|
|
140
|
+
private _setValueFromSelected;
|
|
141
|
+
private _getSelected;
|
|
139
142
|
private _toggleOpening;
|
|
140
143
|
private _spreadDeferredDisplayValue;
|
|
141
144
|
private _deferredDisplayValue;
|
package/select/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAKnE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAc3B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKM,gBAAiB,SAAQ,qBAY9B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;;;MAQ3B;IAEX,0DAA0D;IAC1D,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,wDAAwD;IACxD,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sCAAsC;IACtC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuB;IAE9D,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAAwE;IAEvF,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAAuE;IAErF,gBAAgB;IAChB,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAKnE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAc3B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKM,gBAAiB,SAAQ,qBAY9B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;;;MAQ3B;IAEX,0DAA0D;IAC1D,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,wDAAwD;IACxD,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sCAAsC;IACtC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuB;IAE9D,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAAwE;IAEvF,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAAuE;IAErF,gBAAgB;IAChB,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IAEnD;;;OAGG;IACH,IAAW,YAAY,IAAI,WAAW,CAErC;IAED,6DAA6D;IAC7D,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,gBAAgB,GAI3B;;IA6BD,OAAO,CAAC,eAAe;IAiCvB,iCAAiC;IAC1B,IAAI,IAAI,IAAI;IAwBnB,kCAAkC;IAC3B,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,wBAAwB;IAIhC,wCAAwC;IACjC,eAAe,IAAI,MAAM;IAIhC,iCAAiC;IACjC,OAAO,CAAC,gBAAgB;IASxB,iCAAiC;IACjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,mBAAmB;IAU3B,oHAAoH;IACpH,OAAO,CAAC,eAAe;cAyBJ,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc9E;;;;;OAKG;IACa,eAAe,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;IAa5C,iBAAiB,IAAI,IAAI;cAwBtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY5D,oBAAoB,IAAI,IAAI;cAMzB,eAAe,IAAI,IAAI;IAU1C;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAcP,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,YAAY;IAOpB,sHAAsH;IACtH,OAAO,CAAC,YAAY;IAYpB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAQtB,yGAAyG;IACzG,OAAO,CAAC,iBAAiB;IAkBzB,kGAAkG;IAClG,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,+BAA+B;IAgBvC,OAAO,CAAC,+BAA+B;IAyCvC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,0BAA0B;IA0ClC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,2BAA2B;YAMrB,qBAAqB;cAOhB,MAAM,IAAI,cAAc;CAoD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|
package/select.js
CHANGED
|
@@ -1,66 +1,70 @@
|
|
|
1
1
|
var R = (a) => {
|
|
2
2
|
throw TypeError(a);
|
|
3
3
|
};
|
|
4
|
-
var q = (a, o,
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
4
|
+
var q = (a, o, r) => o.has(a) || R("Cannot " + r);
|
|
5
|
+
var f = (a, o, r) => (q(a, o, "read from private field"), r ? r.call(a) : o.get(a)), g = (a, o, r) => o.has(a) ? R("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, r), d = (a, o, r, b) => (q(a, o, "write to private field"), b ? b.call(a, r) : o.set(a, r), r);
|
|
6
|
+
import { __esDecorate as m, __runInitializers as h } from "tslib";
|
|
7
7
|
import { MutationController as Z } from "@lit-labs/observers/mutation-controller.js";
|
|
8
|
-
import { css as G, html as
|
|
8
|
+
import { css as G, html as w, nothing as k } from "lit";
|
|
9
9
|
import { customElement as W, property as E, state as J } from "lit/decorators.js";
|
|
10
|
-
import { ref as
|
|
10
|
+
import { ref as A } from "lit/directives/ref.js";
|
|
11
11
|
import { until as j } from "lit/directives/until.js";
|
|
12
12
|
import { getNextElementIndex as Q } from "./core/a11y.js";
|
|
13
13
|
import { SbbOpenCloseBaseElement as X } from "./core/base-elements.js";
|
|
14
|
-
import {
|
|
15
|
-
import { hostAttributes as
|
|
16
|
-
import { setOrRemoveAttribute as C, isZeroAnimationDuration as
|
|
14
|
+
import { SbbLanguageController as ee } from "./core/controllers.js";
|
|
15
|
+
import { hostAttributes as te, forceType as O } from "./core/decorators.js";
|
|
16
|
+
import { setOrRemoveAttribute as C, isZeroAnimationDuration as se, isNextjs as H, isSafari as ie } from "./core/dom.js";
|
|
17
17
|
import { EventEmitter as S } from "./core/eventing.js";
|
|
18
|
-
import { SbbUpdateSchedulerMixin as
|
|
19
|
-
import { isEventOnElement as Y, setOverlayPosition as
|
|
20
|
-
const ce = G`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, x = ae;
|
|
21
|
-
let
|
|
22
|
-
var c, v, u,
|
|
23
|
-
let a = [W("sbb-select"),
|
|
18
|
+
import { SbbUpdateSchedulerMixin as ae, SbbDisabledMixin as oe, SbbNegativeMixin as re, SbbHydrationMixin as le, SbbRequiredMixin as ne, SbbFormAssociatedMixin as be } from "./core/mixins.js";
|
|
19
|
+
import { isEventOnElement as Y, setOverlayPosition as de, overlayGapFixCorners as he } from "./core/overlay.js";
|
|
20
|
+
const pe = G`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, x = ie;
|
|
21
|
+
let ce = 0, Ie = (() => {
|
|
22
|
+
var p, c, v, u, n;
|
|
23
|
+
let a = [W("sbb-select"), te({
|
|
24
24
|
role: x ? "listbox" : null
|
|
25
|
-
})], o,
|
|
26
|
-
var
|
|
25
|
+
})], o, r = [], b, D = ae(oe(re(le(ne(be(X)))))), I, V = [], L = [], $, P = [], T = [], z, N = [], U = [], B, K = [], M = [];
|
|
26
|
+
var _ = (n = class extends D {
|
|
27
27
|
constructor() {
|
|
28
|
+
var e, t, s;
|
|
28
29
|
super();
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
d(this,
|
|
30
|
+
g(this, p);
|
|
31
|
+
g(this, c);
|
|
32
|
+
g(this, v);
|
|
33
|
+
g(this, u);
|
|
34
|
+
d(this, p, h(this, V, "")), d(this, c, (h(this, L), h(this, P, !1))), d(this, v, (h(this, T), h(this, N, !1))), d(this, u, (h(this, U), h(this, K, null))), this._change = (h(this, M), new S(this, _.events.change)), this._input = new S(this, _.events.input), this._stateChange = new S(this, _.events.stateChange, {
|
|
34
35
|
composed: !1
|
|
35
|
-
}), this._overlayId = `sbb-select-${++
|
|
36
|
-
this._isPointerDownEventOnMenu = Y(this._overlay,
|
|
37
|
-
}, this._closeOnBackdropClick = (
|
|
38
|
-
!this._isPointerDownEventOnMenu && !Y(this._overlay,
|
|
39
|
-
},
|
|
36
|
+
}), this._overlayId = `sbb-select-${++ce}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._pointerDownListener = (i) => {
|
|
37
|
+
this._isPointerDownEventOnMenu = Y(this._overlay, i);
|
|
38
|
+
}, this._closeOnBackdropClick = (i) => {
|
|
39
|
+
!this._isPointerDownEventOnMenu && !Y(this._overlay, i) && this.close();
|
|
40
|
+
}, (e = this.addEventListener) == null || e.call(this, "optionSelectionChange", (i) => this._onOptionChanged(i)), (t = this.addEventListener) == null || t.call(this, "optionLabelChanged", (i) => this._onOptionLabelChanged(i)), (s = this.addEventListener) == null || s.call(this, "click", (i) => {
|
|
41
|
+
const l = i.target;
|
|
42
|
+
l.localName === "sbb-option" ? !this.multiple && !l.disabled && (this.close(), this.focus()) : this._toggleOpening();
|
|
43
|
+
}), new Z(this, {
|
|
40
44
|
config: { attributeFilter: ["aria-labelledby", "aria-label", "aria-describedby"] },
|
|
41
45
|
callback: () => this._syncAriaLabels()
|
|
42
|
-
}), new
|
|
46
|
+
}), new ee(this).withHandler(() => setTimeout(() => this._syncAriaLabels()));
|
|
43
47
|
}
|
|
44
48
|
/** The placeholder used if no value has been selected. */
|
|
45
49
|
get placeholder() {
|
|
46
|
-
return
|
|
50
|
+
return f(this, p);
|
|
47
51
|
}
|
|
48
52
|
set placeholder(e) {
|
|
49
|
-
d(this,
|
|
53
|
+
d(this, p, e);
|
|
50
54
|
}
|
|
51
55
|
/** Whether the select allows for multiple selection. */
|
|
52
56
|
get multiple() {
|
|
53
|
-
return
|
|
57
|
+
return f(this, c);
|
|
54
58
|
}
|
|
55
59
|
set multiple(e) {
|
|
56
|
-
d(this,
|
|
60
|
+
d(this, c, e);
|
|
57
61
|
}
|
|
58
62
|
/** Whether the select is readonly. */
|
|
59
63
|
get readonly() {
|
|
60
|
-
return
|
|
64
|
+
return f(this, v);
|
|
61
65
|
}
|
|
62
66
|
set readonly(e) {
|
|
63
|
-
d(this,
|
|
67
|
+
d(this, v, e);
|
|
64
68
|
}
|
|
65
69
|
/**
|
|
66
70
|
* Form type of element.
|
|
@@ -71,10 +75,10 @@ let ve = 0, Ve = (() => {
|
|
|
71
75
|
}
|
|
72
76
|
/** The value displayed by the component. */
|
|
73
77
|
get _displayValue() {
|
|
74
|
-
return
|
|
78
|
+
return f(this, u);
|
|
75
79
|
}
|
|
76
80
|
set _displayValue(e) {
|
|
77
|
-
d(this,
|
|
81
|
+
d(this, u, e);
|
|
78
82
|
}
|
|
79
83
|
/**
|
|
80
84
|
* The 'combobox' input element
|
|
@@ -104,7 +108,7 @@ let ve = 0, Ve = (() => {
|
|
|
104
108
|
this.state === "opened" && this.willClose.emit() && (this.state = "closing", this._openPanelEventsController.abort(), this._isZeroAnimationDuration() && this._handleClosing());
|
|
105
109
|
}
|
|
106
110
|
_isZeroAnimationDuration() {
|
|
107
|
-
return
|
|
111
|
+
return se(this, "--sbb-options-panel-animation-duration");
|
|
108
112
|
}
|
|
109
113
|
/** Gets the current displayed value. */
|
|
110
114
|
getDisplayValue() {
|
|
@@ -115,16 +119,24 @@ let ve = 0, Ve = (() => {
|
|
|
115
119
|
const t = e.target;
|
|
116
120
|
t.selected ? this._onOptionSelected(t) : this._onOptionDeselected(t);
|
|
117
121
|
}
|
|
122
|
+
/** Listens to option changes. */
|
|
123
|
+
_onOptionLabelChanged(e) {
|
|
124
|
+
const t = e.target, s = this._getSelected();
|
|
125
|
+
!Array.isArray(s) && t !== s || Array.isArray(s) && !s.includes(t) || this._updateDisplayValue(s);
|
|
126
|
+
}
|
|
127
|
+
_updateDisplayValue(e) {
|
|
128
|
+
Array.isArray(e) ? this._displayValue = e.map((t) => t.textContent).join(", ") || null : e ? this._displayValue = (e == null ? void 0 : e.textContent) || null : this._displayValue = null;
|
|
129
|
+
}
|
|
118
130
|
/** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
|
|
119
131
|
_onValueChanged(e) {
|
|
120
132
|
const t = this._filteredOptions;
|
|
121
133
|
if (Array.isArray(e)) {
|
|
122
134
|
t.filter((i) => !e.includes(i.value ?? i.getAttribute("value"))).forEach((i) => i.selected = !1);
|
|
123
135
|
const s = t.filter((i) => e.includes(i.value ?? i.getAttribute("value")));
|
|
124
|
-
s.forEach((i) => i.selected = !0), this.
|
|
136
|
+
s.forEach((i) => i.selected = !0), this._updateDisplayValue(s);
|
|
125
137
|
} else {
|
|
126
|
-
const s = t.find((i) => (i.value ?? i.getAttribute("value")) === e);
|
|
127
|
-
s && (s.selected = !0), t.filter((i) => (i.value ?? i.getAttribute("value")) !== e).forEach((i) => i.selected = !1), this.
|
|
138
|
+
const s = t.find((i) => (i.value ?? i.getAttribute("value")) === e) ?? null;
|
|
139
|
+
s && (s.selected = !0), t.filter((i) => (i.value ?? i.getAttribute("value")) !== e).forEach((i) => i.selected = !1), this._updateDisplayValue(s);
|
|
128
140
|
}
|
|
129
141
|
this._stateChange.emit({ type: "value", value: e });
|
|
130
142
|
}
|
|
@@ -141,13 +153,10 @@ let ve = 0, Ve = (() => {
|
|
|
141
153
|
H() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
|
|
142
154
|
}
|
|
143
155
|
connectedCallback() {
|
|
144
|
-
var
|
|
156
|
+
var t, s;
|
|
145
157
|
super.connectedCallback(), x && (this.id || (this.id = this._overlayId));
|
|
146
|
-
const e =
|
|
147
|
-
|
|
148
|
-
const p = r.target;
|
|
149
|
-
p.localName === "sbb-option" ? !this.multiple && !p.disabled && (this.close(), this.focus()) : this._toggleOpening();
|
|
150
|
-
}, { signal: e });
|
|
158
|
+
const e = ((t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field")) ?? ((s = this.closest) == null ? void 0 : s.call(this, "[data-form-field]"));
|
|
159
|
+
e && (this.negative = e.hasAttribute("negative")), this._syncProperties(), this._syncAriaLabels(), this._didLoad && (this._setupOrigin(), this._setupTrigger()), this.value && this._onValueChanged(this.value);
|
|
151
160
|
}
|
|
152
161
|
willUpdate(e) {
|
|
153
162
|
super.willUpdate(e), e.has("value") && this._didLoad && this._onValueChanged(this.value), (e.has("negative") || e.has("multiple")) && this._syncProperties();
|
|
@@ -191,9 +200,9 @@ let ve = 0, Ve = (() => {
|
|
|
191
200
|
}
|
|
192
201
|
/** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
|
|
193
202
|
_setupOrigin() {
|
|
194
|
-
var t, s, i,
|
|
203
|
+
var t, s, i, l;
|
|
195
204
|
const e = (t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field");
|
|
196
|
-
this._originElement = ((i = (s = e == null ? void 0 : e.shadowRoot) == null ? void 0 : s.querySelector) == null ? void 0 : i.call(s, "#overlay-anchor")) ?? this.parentElement, this._originElement && this.toggleAttribute("data-option-panel-origin-borderless", !!((
|
|
205
|
+
this._originElement = ((i = (s = e == null ? void 0 : e.shadowRoot) == null ? void 0 : s.querySelector) == null ? void 0 : i.call(s, "#overlay-anchor")) ?? this.parentElement, this._originElement && this.toggleAttribute("data-option-panel-origin-borderless", !!((l = e == null ? void 0 : e.hasAttribute) != null && l.call(e, "borderless")));
|
|
197
206
|
}
|
|
198
207
|
/**
|
|
199
208
|
* To assess screen-readers problems caused by the interaction between aria patterns and shadow DOM,
|
|
@@ -206,7 +215,7 @@ let ve = 0, Ve = (() => {
|
|
|
206
215
|
this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
|
|
207
216
|
}
|
|
208
217
|
_setOverlayPosition() {
|
|
209
|
-
|
|
218
|
+
de(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
|
|
210
219
|
}
|
|
211
220
|
// In rare cases it can be that the animationEnd event is triggered twice.
|
|
212
221
|
// To avoid entering a corrupt state, exit when state is not expected.
|
|
@@ -230,7 +239,10 @@ let ve = 0, Ve = (() => {
|
|
|
230
239
|
_attachOpenPanelEvents() {
|
|
231
240
|
this._openPanelEventsController = new AbortController(), document.addEventListener("scroll", () => this._setOverlayPosition(), {
|
|
232
241
|
passive: !0,
|
|
233
|
-
signal: this._openPanelEventsController.signal
|
|
242
|
+
signal: this._openPanelEventsController.signal,
|
|
243
|
+
// Without capture, other scroll contexts would not bubble to this event listener.
|
|
244
|
+
// Capture allows us to react to all scroll contexts in this DOM.
|
|
245
|
+
capture: !0
|
|
234
246
|
}), window.addEventListener("resize", () => this._setOverlayPosition(), {
|
|
235
247
|
passive: !0,
|
|
236
248
|
signal: this._openPanelEventsController.signal
|
|
@@ -291,18 +303,18 @@ let ve = 0, Ve = (() => {
|
|
|
291
303
|
const t = this._activeItemIndex + 1, s = [
|
|
292
304
|
...this._filteredOptions.slice(t),
|
|
293
305
|
...this._filteredOptions.slice(0, t)
|
|
294
|
-
], i = s.find((
|
|
295
|
-
var
|
|
296
|
-
return ((
|
|
306
|
+
], i = s.find((l) => {
|
|
307
|
+
var y;
|
|
308
|
+
return ((y = l.textContent) == null ? void 0 : y.toLowerCase().indexOf(this._searchString.toLowerCase())) === 0;
|
|
297
309
|
});
|
|
298
310
|
if (i)
|
|
299
311
|
this._setNextActiveOption(e, this._filteredOptions.indexOf(i));
|
|
300
312
|
else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
|
|
301
|
-
const
|
|
313
|
+
const l = s.find((y) => {
|
|
302
314
|
var F;
|
|
303
|
-
return ((F =
|
|
315
|
+
return ((F = y.textContent) == null ? void 0 : F.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
|
|
304
316
|
});
|
|
305
|
-
|
|
317
|
+
l && this._setNextActiveOption(e, this._filteredOptions.indexOf(l));
|
|
306
318
|
} else
|
|
307
319
|
clearTimeout(this._searchTimeout), this._searchString = "";
|
|
308
320
|
}
|
|
@@ -311,8 +323,8 @@ let ve = 0, Ve = (() => {
|
|
|
311
323
|
this.multiple ? e.setSelectedViaUserInteraction(!e.selected) : this.close();
|
|
312
324
|
}
|
|
313
325
|
_setNextActiveOption(e, t) {
|
|
314
|
-
const s = t ?? Q(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s],
|
|
315
|
-
this._setActiveElement(i,
|
|
326
|
+
const s = t ?? Q(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s], l = this._filteredOptions[this._activeItemIndex];
|
|
327
|
+
this._setActiveElement(i, l), this.multiple ? e != null && e.shiftKey && i.setSelectedViaUserInteraction(!i.selected) : this._setSelectedElement(i, l), this._activeItemIndex = s;
|
|
316
328
|
}
|
|
317
329
|
_setActiveElement(e, t = null, s = !0) {
|
|
318
330
|
e.setActive(!0), e.scrollIntoView({ block: "nearest" }), s && this._triggerElement.setAttribute("aria-activedescendant", e.id), t && t !== e && t.setActive(!1);
|
|
@@ -324,19 +336,19 @@ let ve = 0, Ve = (() => {
|
|
|
324
336
|
const e = this._filteredOptions[this._activeItemIndex];
|
|
325
337
|
e && e.setActive(!1), this._activeItemIndex = -1, this._triggerElement.removeAttribute("aria-activedescendant");
|
|
326
338
|
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
339
|
+
_setValueFromSelected() {
|
|
340
|
+
const e = this._getSelected();
|
|
341
|
+
if (Array.isArray(e)) {
|
|
330
342
|
if (e && e.length > 0) {
|
|
331
343
|
const t = [];
|
|
332
344
|
for (const s of e)
|
|
333
345
|
t.push(s.value);
|
|
334
346
|
this.value = t;
|
|
335
347
|
}
|
|
336
|
-
} else
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
348
|
+
} else e && (this._activeItemIndex = this._filteredOptions.findIndex((t) => t === e), this.value = e.value);
|
|
349
|
+
}
|
|
350
|
+
_getSelected() {
|
|
351
|
+
return this.multiple ? this._filteredOptions.filter((e) => e.selected) : this._filteredOptions.find((e) => e.selected) ?? null;
|
|
340
352
|
}
|
|
341
353
|
_toggleOpening() {
|
|
342
354
|
var e;
|
|
@@ -356,10 +368,10 @@ let ve = 0, Ve = (() => {
|
|
|
356
368
|
return [this._deferredDisplayValue(e), e];
|
|
357
369
|
}
|
|
358
370
|
async _deferredDisplayValue(e) {
|
|
359
|
-
return this.hydrationRequired && await this.hydrationComplete, this._displayValue ?
|
|
371
|
+
return this.hydrationRequired && await this.hydrationComplete, this._displayValue ? w`${this._displayValue}` : e;
|
|
360
372
|
}
|
|
361
373
|
render() {
|
|
362
|
-
return
|
|
374
|
+
return w`
|
|
363
375
|
<!-- This element is visually hidden and will be appended to the light DOM to allow screen
|
|
364
376
|
readers to work properly -->
|
|
365
377
|
<div
|
|
@@ -373,23 +385,23 @@ let ve = 0, Ve = (() => {
|
|
|
373
385
|
aria-owns=${this._overlayId}
|
|
374
386
|
@keydown=${this._onKeyDown}
|
|
375
387
|
@click=${this._toggleOpening}
|
|
376
|
-
${
|
|
388
|
+
${A((e) => this._triggerElement = e)}
|
|
377
389
|
>
|
|
378
|
-
${j(...this._spreadDeferredDisplayValue(
|
|
390
|
+
${j(...this._spreadDeferredDisplayValue(w`<span>${this.placeholder}</span>`))}
|
|
379
391
|
</div>
|
|
380
392
|
|
|
381
393
|
<!-- Visually display the value -->
|
|
382
394
|
<div class="sbb-select__trigger" aria-hidden="true">
|
|
383
|
-
${j(...this._spreadDeferredDisplayValue(
|
|
395
|
+
${j(...this._spreadDeferredDisplayValue(w`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`))}
|
|
384
396
|
</div>
|
|
385
397
|
|
|
386
398
|
<div class="sbb-select__gap-fix"></div>
|
|
387
399
|
<div class="sbb-select__container">
|
|
388
|
-
<div class="sbb-select__gap-fix">${
|
|
400
|
+
<div class="sbb-select__gap-fix">${he()}</div>
|
|
389
401
|
<div
|
|
390
402
|
@animationend=${this._onAnimationEnd}
|
|
391
403
|
class="sbb-select__panel"
|
|
392
|
-
${
|
|
404
|
+
${A((e) => this._overlay = e)}
|
|
393
405
|
>
|
|
394
406
|
<div class="sbb-select__wrapper">
|
|
395
407
|
<div
|
|
@@ -397,27 +409,27 @@ let ve = 0, Ve = (() => {
|
|
|
397
409
|
class="sbb-select__options"
|
|
398
410
|
role=${x ? k : "listbox"}
|
|
399
411
|
?aria-multiselectable=${this.multiple}
|
|
400
|
-
${
|
|
412
|
+
${A((e) => this._optionContainer = e)}
|
|
401
413
|
>
|
|
402
|
-
<slot @slotchange=${this.
|
|
414
|
+
<slot @slotchange=${this._setValueFromSelected}></slot>
|
|
403
415
|
</div>
|
|
404
416
|
</div>
|
|
405
417
|
</div>
|
|
406
418
|
</div>
|
|
407
419
|
`;
|
|
408
420
|
}
|
|
409
|
-
},
|
|
410
|
-
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
411
|
-
|
|
421
|
+
}, p = new WeakMap(), c = new WeakMap(), v = new WeakMap(), u = new WeakMap(), b = n, (() => {
|
|
422
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
|
|
423
|
+
I = [O(), E()], $ = [O(), E({ reflect: !0, type: Boolean })], z = [O(), E({ type: Boolean })], B = [J()], m(n, null, I, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
|
|
412
424
|
t.placeholder = s;
|
|
413
|
-
} }, metadata: e }, V, L),
|
|
425
|
+
} }, metadata: e }, V, L), m(n, null, $, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
|
|
414
426
|
t.multiple = s;
|
|
415
|
-
} }, metadata: e }, P, T),
|
|
427
|
+
} }, metadata: e }, P, T), m(n, null, z, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, s) => {
|
|
416
428
|
t.readonly = s;
|
|
417
|
-
} }, metadata: e }, N, U),
|
|
429
|
+
} }, metadata: e }, N, U), m(n, null, B, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
|
|
418
430
|
t._displayValue = s;
|
|
419
|
-
} }, metadata: e }, K, M),
|
|
420
|
-
})(), n.styles =
|
|
431
|
+
} }, metadata: e }, K, M), m(null, o = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, r), _ = b = o.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
432
|
+
})(), n.styles = pe, n.events = {
|
|
421
433
|
change: "change",
|
|
422
434
|
input: "input",
|
|
423
435
|
stateChange: "stateChange",
|
|
@@ -425,9 +437,9 @@ let ve = 0, Ve = (() => {
|
|
|
425
437
|
didOpen: "didOpen",
|
|
426
438
|
willClose: "willClose",
|
|
427
439
|
didClose: "didClose"
|
|
428
|
-
}, h(b,
|
|
429
|
-
return
|
|
440
|
+
}, h(b, r), n);
|
|
441
|
+
return _ = b;
|
|
430
442
|
})();
|
|
431
443
|
export {
|
|
432
|
-
|
|
444
|
+
Ie as SbbSelectElement
|
|
433
445
|
};
|
|
@@ -36,12 +36,12 @@ export declare class SbbSelectionExpansionPanelElement extends SbbSelectionExpan
|
|
|
36
36
|
/** Emits whenever the content section is closed. */
|
|
37
37
|
private _didClose;
|
|
38
38
|
private _language;
|
|
39
|
-
private _abort;
|
|
40
39
|
private _initialized;
|
|
41
40
|
private _sizeAttributeObserver;
|
|
42
41
|
/** Whether it has an expandable content */
|
|
43
42
|
private get _hasContent();
|
|
44
43
|
private get _group();
|
|
44
|
+
constructor();
|
|
45
45
|
connectedCallback(): void;
|
|
46
46
|
disconnectedCallback(): void;
|
|
47
47
|
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAeb,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAGM,iCAAkC,SAAQ,sCAA6B;IAE3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACzC,SAA4B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAE9D,qDAAqD;IACrD,SAEgB,SAAS,EAAE,OAAO,CAAS;IAE3C,iDAAiD;IACjD,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAIf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAId;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAIhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAeb,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAGM,iCAAkC,SAAQ,sCAA6B;IAE3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACzC,SAA4B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAE9D,qDAAqD;IACrD,SAEgB,SAAS,EAAE,OAAO,CAAS;IAE3C,iDAAiD;IACjD,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAIf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAId;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAIhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,sBAAsB,CAIrB;IAET,2CAA2C;IAC3C,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,KAAK,MAAM,GAIjB;;IAOe,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;cAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,KAAK;IAeb,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAQT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}
|