@sbb-esta/lyne-elements 2.0.0 → 2.0.2
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 +1 -1
- package/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-radio-button-mixin.d.ts +1 -0
- package/core/mixins/form-associated-radio-button-mixin.d.ts.map +1 -1
- package/core/mixins.js +28 -34
- package/core/styles/core.scss +34 -31
- package/core/styles/mixins/buttons.scss +1 -1
- package/core/styles/mixins/lists.scss +100 -35
- package/core.css +17 -15
- package/custom-elements.json +243 -377
- 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 +1 -1
- package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-radio-button-mixin.d.ts +1 -0
- package/development/core/mixins/form-associated-radio-button-mixin.d.ts.map +1 -1
- package/development/core/mixins.js +9 -18
- 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 +5 -2
- 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.map +1 -1
- package/development/radio-button/common.js +11 -11
- 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 +5 -9
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts +2 -2
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- package/development/radio-button/radio-button-panel.js +1 -1
- 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/teaser.js +4 -3
- 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 +15 -15
- 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.map +1 -1
- package/radio-button/common.js +13 -14
- 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 +20 -24
- package/radio-button/radio-button-panel/radio-button-panel.d.ts +2 -2
- package/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- 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 +63 -77
- 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/teaser.js +6 -6
- 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
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"}
|
|
@@ -3,27 +3,28 @@ var L = (n) => {
|
|
|
3
3
|
};
|
|
4
4
|
var U = (n, i, s) => i.has(n) || L("Cannot " + s);
|
|
5
5
|
var m = (n, i, s) => (U(n, i, "read from private field"), s ? s.call(n) : i.get(n)), g = (n, i, s) => i.has(n) ? L("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, s), c = (n, i, s, r) => (U(n, i, "write to private field"), r ? r.call(n, s) : i.set(n, s), s);
|
|
6
|
-
import {
|
|
6
|
+
import { __esDecorate as _, __runInitializers as l } from "tslib";
|
|
7
7
|
import { css as F, LitElement as N, isServer as $, html as j } from "lit";
|
|
8
8
|
import { customElement as q, property as x, state as B } from "lit/decorators.js";
|
|
9
|
-
import { SbbLanguageController as M
|
|
10
|
-
import { slotState as
|
|
11
|
-
import { isZeroAnimationDuration as
|
|
9
|
+
import { SbbLanguageController as M } from "./core/controllers.js";
|
|
10
|
+
import { slotState as P, forceType as Z } from "./core/decorators.js";
|
|
11
|
+
import { isZeroAnimationDuration as T } from "./core/dom.js";
|
|
12
12
|
import { EventEmitter as f } from "./core/eventing.js";
|
|
13
|
-
import { i18nExpanded as
|
|
14
|
-
import { SbbHydrationMixin as
|
|
13
|
+
import { i18nExpanded as H, i18nCollapsed as G } from "./core/i18n.js";
|
|
14
|
+
import { SbbHydrationMixin as J } from "./core/mixins.js";
|
|
15
15
|
import "./divider.js";
|
|
16
|
-
const
|
|
17
|
-
let
|
|
16
|
+
const K = F`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-expansion-panel-background: var(--sbb-color-white);--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-selection-expansion-panel-inner-background: transparent;--sbb-selection-expansion-panel-inner-border-width: 0px;--sbb-selection-expansion-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-expansion-panel-content-visibility: hidden;--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([data-size=s]){--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-expansion-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-expansion-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud)}:host([borderless]:not([data-checked])){--sbb-selection-expansion-panel-border-color: transparent}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-expansion-panel-content-visibility: visible;--sbb-selection-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs)}.sbb-selection-expansion-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-expansion-panel-background);border-radius:var(--sbb-selection-expansion-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-expansion-panel-border-width) var(--sbb-selection-expansion-panel-border-color);transition-duration:var(--sbb-selection-expansion-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-expansion-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-expansion-panel-border-width) solid var(--sbb-selection-expansion-panel-border-color);border-radius:var(--sbb-selection-expansion-panel-border-radius)}}.sbb-selection-expansion-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-expansion-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-expansion-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-expansion-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-expansion-panel__content--wrapper{display:none}.sbb-selection-expansion-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-selection-expansion-panel-content-padding-block-end);transition:padding var(--sbb-selection-expansion-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
|
|
17
|
+
let oe = (() => {
|
|
18
18
|
var b, p, h, o;
|
|
19
|
-
let n = [q("sbb-selection-expansion-panel"),
|
|
19
|
+
let n = [q("sbb-selection-expansion-panel"), P()], i, s = [], r, v = J(N), w = [], y, k = [], O = [], C, z = [], S = [], A, E = [], I = [], D;
|
|
20
20
|
var d = (o = class extends v {
|
|
21
21
|
constructor() {
|
|
22
|
-
|
|
22
|
+
var e;
|
|
23
|
+
super();
|
|
23
24
|
g(this, b);
|
|
24
25
|
g(this, p);
|
|
25
26
|
g(this, h);
|
|
26
|
-
c(this, b, (l(this, w), l(this, k, "white"))), c(this, p, (l(this, O), l(this, z, !1))), c(this, h, (l(this, S), l(this, E, !1))), this._willOpen = (l(this, I), new f(this, d.events.willOpen, { cancelable: !0 })), this._didOpen = new f(this, d.events.didOpen, { cancelable: !0 }), this._willClose = new f(this, d.events.willClose, { cancelable: !0 }), this._didClose = new f(this, d.events.didClose, { cancelable: !0 }), this._language = new M(this), this.
|
|
27
|
+
c(this, b, (l(this, w), l(this, k, "white"))), c(this, p, (l(this, O), l(this, z, !1))), c(this, h, (l(this, S), l(this, E, !1))), this._willOpen = (l(this, I), new f(this, d.events.willOpen, { cancelable: !0 })), this._didOpen = new f(this, d.events.didOpen, { cancelable: !0 }), this._willClose = new f(this, d.events.willClose, { cancelable: !0 }), this._didClose = new f(this, d.events.didClose, { cancelable: !0 }), this._language = new M(this), this._initialized = !1, this._sizeAttributeObserver = $ ? null : new MutationObserver((t) => this._onSizeAttributesChange(t)), (e = this.addEventListener) == null || e.call(this, "panelConnected", (t) => this._initFromInput(t));
|
|
27
28
|
}
|
|
28
29
|
/** The background color of the panel. */
|
|
29
30
|
get color() {
|
|
@@ -73,9 +74,7 @@ let re = (() => {
|
|
|
73
74
|
return this.closest("sbb-radio-button-group, sbb-checkbox-group");
|
|
74
75
|
}
|
|
75
76
|
connectedCallback() {
|
|
76
|
-
super.connectedCallback(), this.
|
|
77
|
-
signal: this._abort.signal
|
|
78
|
-
}), this._state || (this._state = "closed");
|
|
77
|
+
super.connectedCallback(), this._state || (this._state = "closed");
|
|
79
78
|
}
|
|
80
79
|
disconnectedCallback() {
|
|
81
80
|
var e;
|
|
@@ -97,7 +96,7 @@ let re = (() => {
|
|
|
97
96
|
this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit(), this._isZeroAnimationDuration() && this._handleClosing());
|
|
98
97
|
}
|
|
99
98
|
_isZeroAnimationDuration() {
|
|
100
|
-
return
|
|
99
|
+
return T(this, "--sbb-selection-expansion-panel-animation-duration");
|
|
101
100
|
}
|
|
102
101
|
_handleClosing() {
|
|
103
102
|
this._state = "closed", this._didClose.emit();
|
|
@@ -143,7 +142,7 @@ let re = (() => {
|
|
|
143
142
|
t.expansionState = "";
|
|
144
143
|
return;
|
|
145
144
|
}
|
|
146
|
-
t.expansionState = e ? ", " +
|
|
145
|
+
t.expansionState = e ? ", " + H[this._language.current] : ", " + G[this._language.current];
|
|
147
146
|
}
|
|
148
147
|
}
|
|
149
148
|
render() {
|
|
@@ -176,7 +175,7 @@ let re = (() => {
|
|
|
176
175
|
} }, metadata: e }, E, I), _(o, null, D, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (t) => "_state" in t, set: (t, a) => {
|
|
177
176
|
t._state = a;
|
|
178
177
|
} }, metadata: e }, null, w), _(null, i = { value: r }, n, { kind: "class", name: r.name, metadata: e }, null, s), d = r = i.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
179
|
-
})(), o.styles =
|
|
178
|
+
})(), o.styles = K, o.events = {
|
|
180
179
|
willOpen: "willOpen",
|
|
181
180
|
didOpen: "didOpen",
|
|
182
181
|
willClose: "willClose",
|
|
@@ -185,5 +184,5 @@ let re = (() => {
|
|
|
185
184
|
return d = r;
|
|
186
185
|
})();
|
|
187
186
|
export {
|
|
188
|
-
|
|
187
|
+
oe as SbbSelectionExpansionPanelElement
|
|
189
188
|
};
|
package/slider/slider.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
|
|
|
20
20
|
set value(value: string | null);
|
|
21
21
|
get value(): string;
|
|
22
22
|
/** Numeric value for the inner HTMLInputElement. */
|
|
23
|
-
set valueAsNumber(value: number);
|
|
23
|
+
set valueAsNumber(value: number | null);
|
|
24
24
|
get valueAsNumber(): number | null;
|
|
25
25
|
/** Minimum acceptable value for the inner HTMLInputElement. */
|
|
26
26
|
set min(value: string);
|
|
@@ -55,7 +55,6 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
|
|
|
55
55
|
private _didChange;
|
|
56
56
|
/** Reference to the inner HTMLInputElement with type='range'. */
|
|
57
57
|
private _rangeInput;
|
|
58
|
-
private _abort;
|
|
59
58
|
constructor();
|
|
60
59
|
connectedCallback(): void;
|
|
61
60
|
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
package/slider/slider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAOhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;GAMG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAE5C;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;;IASvB,iBAAiB,IAAI,IAAI;cAQtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAIY,eAAe,IAAI,IAAI;IAI1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|