@sbb-esta/lyne-elements 4.4.0 → 4.5.1
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/autocomplete/autocomplete-base-element.js +73 -60
- package/button/common.js +1 -1
- package/button/mini-button-group/mini-button-group.component.js +14 -14
- package/button.js +1 -1
- package/chip-label/chip-label.component.js +13 -13
- package/container/container/container.component.js +9 -9
- package/container/sticky-bar/sticky-bar.component.js +12 -12
- package/core/a11y/focus-trap-controller.js +10 -10
- package/core/datetime/temporal-date-adapter.js +12 -6
- package/core/datetime.js +14 -12
- package/core/styles/core.scss +27 -12
- package/core/styles/mixins/chip.scss +6 -6
- package/core.css +75 -8
- package/custom-elements.json +93 -30
- package/datepicker/common.js +5 -3
- package/datepicker/datepicker-next-day/datepicker-next-day.component.js +13 -11
- package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +12 -10
- package/datepicker/datepicker-toggle/datepicker-toggle.component.js +21 -19
- package/datepicker-button-Debzp_As.js +5 -0
- package/datepicker.js +6 -4
- package/development/autocomplete/autocomplete-base-element.d.ts +6 -1
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete-base-element.js +33 -8
- package/development/button/common.js +1 -1
- package/development/button/mini-button-group/mini-button-group.component.js +10 -14
- package/development/button.js +1 -1
- package/development/chip-label/chip-label.component.js +6 -15
- package/development/container/container/container.component.js +1 -3
- package/development/container/sticky-bar/sticky-bar.component.js +9 -14
- package/development/core/a11y/focus-trap-controller.d.ts.map +1 -1
- package/development/core/a11y/focus-trap-controller.js +4 -3
- package/development/core/controllers/overlay-position-controller.d.ts.map +1 -1
- package/development/core/controllers/overlay-position-controller.js +1 -1
- package/development/core/datetime/native-date-adapter.js +1 -1
- package/development/core/datetime/temporal-date-adapter.d.ts +7 -1
- package/development/core/datetime/temporal-date-adapter.d.ts.map +1 -1
- package/development/core/datetime/temporal-date-adapter.js +14 -7
- package/development/core/datetime.d.ts +1 -0
- package/development/core/datetime.d.ts.map +1 -1
- package/development/core/datetime.js +3 -1
- package/development/datepicker/common.d.ts.map +1 -1
- package/development/datepicker/common.js +4 -2
- package/development/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts.map +1 -1
- package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +7 -8
- package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts.map +1 -1
- package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +7 -8
- package/development/datepicker/datepicker-toggle/datepicker-toggle.component.d.ts.map +1 -1
- package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -8
- package/development/datepicker-button-BDlxIp9r.js +9 -0
- package/development/datepicker.js +4 -2
- package/development/dialog/dialog-title/dialog-title.component.js +2 -1
- package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -5
- package/development/{mini-button-label-common-0DeEC1qs.js → mini-button-label-common-BaMSfSTe.js} +13 -63
- package/development/radio-button/radio-button-group/radio-button-group.component.d.ts.map +1 -1
- package/development/radio-button/radio-button-group/radio-button-group.component.js +2 -2
- package/development/select/select.component.d.ts +1 -1
- package/development/select/select.component.d.ts.map +1 -1
- package/development/select/select.component.js +17 -8
- package/development/tabs/tab/tab.component.d.ts.map +1 -1
- package/development/tabs/tab/tab.component.js +6 -4
- package/development/tabs/tab-group/tab-group.component.d.ts +7 -7
- package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
- package/development/tabs/tab-group/tab-group.component.js +29 -66
- package/dialog/dialog-title/dialog-title.component.js +7 -7
- package/expansion-panel/expansion-panel/expansion-panel.component.js +9 -9
- package/mini-button-label-common-Dx9JhmQ6.js +11 -0
- package/off-brand-theme.css +75 -8
- package/package.json +1 -1
- package/radio-button/radio-button-group/radio-button-group.component.js +1 -1
- package/safety-theme.css +75 -8
- package/select/select.component.js +20 -20
- package/standard-theme.css +75 -8
- package/tabs/tab/tab.component.js +5 -5
- package/tabs/tab-group/tab-group.component.js +59 -57
- package/mini-button-label-common-BOB7JQKi.js +0 -11
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var it = (n) => {
|
|
2
|
+
throw TypeError(n);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var p = (
|
|
6
|
-
import { __esDecorate as c, __runInitializers as
|
|
7
|
-
import { ResizeController as
|
|
8
|
-
import { css as
|
|
4
|
+
var st = (n, r, l) => r.has(n) || it("Cannot " + l);
|
|
5
|
+
var p = (n, r, l) => (st(n, r, "read from private field"), l ? l.call(n) : r.get(n)), b = (n, r, l) => r.has(n) ? it("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, l), s = (n, r, l, w) => (st(n, r, "write to private field"), w ? w.call(n, l) : r.set(n, l), l);
|
|
6
|
+
import { __esDecorate as c, __runInitializers as o } from "tslib";
|
|
7
|
+
import { ResizeController as rt } from "@lit-labs/observers/resize-controller.js";
|
|
8
|
+
import { css as lt, isServer as k, nothing as ot, html as pt } from "lit";
|
|
9
9
|
import { property as h } from "lit/decorators.js";
|
|
10
|
-
import { ref as
|
|
11
|
-
import { SbbOpenCloseBaseElement as
|
|
12
|
-
import { SbbEscapableOverlayController as
|
|
13
|
-
import { idReference as
|
|
14
|
-
import { isLean as
|
|
15
|
-
import { SbbNegativeMixin as
|
|
16
|
-
import { isEventOnElement as
|
|
17
|
-
import { boxSizingStyles as
|
|
18
|
-
const mt = ot`.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: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--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-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);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-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, S = ct;
|
|
19
|
-
let
|
|
20
|
-
var d, g, u, v, _, m, f, y,
|
|
21
|
-
let
|
|
22
|
-
return
|
|
10
|
+
import { ref as nt } from "lit/directives/ref.js";
|
|
11
|
+
import { SbbOpenCloseBaseElement as bt } from "../core/base-elements.js";
|
|
12
|
+
import { SbbEscapableOverlayController as ct, SbbPropertyWatcherController as ht } from "../core/controllers.js";
|
|
13
|
+
import { idReference as at, forceType as E } from "../core/decorators.js";
|
|
14
|
+
import { isLean as dt, isZeroAnimationDuration as gt, isSafari as ut } from "../core/dom.js";
|
|
15
|
+
import { SbbNegativeMixin as vt, SbbHydrationMixin as _t } from "../core/mixins.js";
|
|
16
|
+
import { isEventOnElement as S, removeAriaComboBoxAttributes as mt, setOverlayPosition as ft, overlayGapFixCorners as Ot } from "../core/overlay.js";
|
|
17
|
+
import { boxSizingStyles as yt } from "../core/styles.js";
|
|
18
|
+
const xt = lt`.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: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--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-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);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-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, C = ut;
|
|
19
|
+
let Bt = (() => {
|
|
20
|
+
var d, g, u, v, _, m, f, O, y, x, a;
|
|
21
|
+
let n = vt(_t(bt)), r, l = [], w = [], z, I = [], P = [], F, D = [], q = [], L, U = [], B = [], N, W = [], V = [], R, M = [], T = [], $, j = [], H = [], Y, Z = [], K = [], G, J = [], Q = [], X, tt = [], et = [];
|
|
22
|
+
return a = class extends n {
|
|
23
23
|
constructor() {
|
|
24
24
|
super();
|
|
25
25
|
b(this, d);
|
|
@@ -29,9 +29,10 @@ let qt = (() => {
|
|
|
29
29
|
b(this, _);
|
|
30
30
|
b(this, m);
|
|
31
31
|
b(this, f);
|
|
32
|
+
b(this, O);
|
|
32
33
|
b(this, y);
|
|
33
|
-
b(this,
|
|
34
|
-
s(this, d,
|
|
34
|
+
b(this, x);
|
|
35
|
+
s(this, d, o(this, l, null)), s(this, g, (o(this, w), o(this, I, null))), s(this, u, (o(this, P), o(this, D, !1))), s(this, v, (o(this, q), o(this, U, !1))), s(this, _, (o(this, B), o(this, W, null))), s(this, m, (o(this, V), o(this, M, dt() ? "s" : "m"))), s(this, f, (o(this, T), o(this, j, !1))), s(this, O, (o(this, H), o(this, Z, !1))), s(this, y, (o(this, K), o(this, J, !1))), s(this, x, (o(this, Q), o(this, tt, "auto"))), this._triggerElement = o(this, et), this.activeOption = null, this.pendingAutoSelectedOption = null, this._originResizeObserver = new rt(this, {
|
|
35
36
|
target: null,
|
|
36
37
|
skipInitial: !0,
|
|
37
38
|
callback: () => {
|
|
@@ -40,11 +41,11 @@ let qt = (() => {
|
|
|
40
41
|
}), this._triggerAttributeObserver = k ? null : new MutationObserver((t) => {
|
|
41
42
|
const e = t[0].target;
|
|
42
43
|
(e.hasAttribute("disabled") || e.hasAttribute("readonly")) && this.close();
|
|
43
|
-
}), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new
|
|
44
|
-
this._isPointerDownEventOnMenu =
|
|
44
|
+
}), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new ct(this), this._optionsCount = 0, this._lastUserInput = null, this._pointerDownListener = (t) => {
|
|
45
|
+
this._isPointerDownEventOnMenu = S(this._overlay, t);
|
|
45
46
|
}, this._closeOnBackdropClick = (t) => {
|
|
46
|
-
!this._isPointerDownEventOnMenu && !
|
|
47
|
-
}, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new
|
|
47
|
+
!this._isPointerDownEventOnMenu && !S(this._overlay, t) && !S(this.originElement, t) && this.close();
|
|
48
|
+
}, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new ht(this, () => this.closest("sbb-form-field"), {
|
|
48
49
|
negative: (t) => {
|
|
49
50
|
this.negative = t.negative, this.syncNegative();
|
|
50
51
|
},
|
|
@@ -116,6 +117,16 @@ let qt = (() => {
|
|
|
116
117
|
set autoSelectActiveOption(t) {
|
|
117
118
|
s(this, f, t);
|
|
118
119
|
}
|
|
120
|
+
/**
|
|
121
|
+
* When enabled, the active option is automatically selected on blur.
|
|
122
|
+
* This is an experimental feature. It might be subject to changes.
|
|
123
|
+
*/
|
|
124
|
+
get autoSelectActiveOptionOnBlur() {
|
|
125
|
+
return p(this, O);
|
|
126
|
+
}
|
|
127
|
+
set autoSelectActiveOptionOnBlur(t) {
|
|
128
|
+
s(this, O, t);
|
|
129
|
+
}
|
|
119
130
|
/**
|
|
120
131
|
* Whether the user is required to make a selection when they're interacting with the
|
|
121
132
|
* autocomplete. If the user moves away from the autocomplete without selecting an option from
|
|
@@ -133,12 +144,12 @@ let qt = (() => {
|
|
|
133
144
|
* @default 'auto'
|
|
134
145
|
*/
|
|
135
146
|
get position() {
|
|
136
|
-
return p(this,
|
|
147
|
+
return p(this, x);
|
|
137
148
|
}
|
|
138
149
|
set position(t) {
|
|
139
|
-
s(this,
|
|
150
|
+
s(this, x, t);
|
|
140
151
|
}
|
|
141
|
-
/** Returns the element where autocomplete overlay is attached to. */
|
|
152
|
+
/** Returns the element where the autocomplete overlay is attached to. */
|
|
142
153
|
get originElement() {
|
|
143
154
|
return this.origin ?? this.closest?.("sbb-form-field")?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.trigger ?? null;
|
|
144
155
|
}
|
|
@@ -158,13 +169,13 @@ let qt = (() => {
|
|
|
158
169
|
}
|
|
159
170
|
/** Closes the autocomplete. */
|
|
160
171
|
close() {
|
|
161
|
-
this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
|
|
172
|
+
this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption, !0)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
|
|
162
173
|
}
|
|
163
174
|
_isZeroAnimationDuration() {
|
|
164
|
-
return
|
|
175
|
+
return gt(this, "--sbb-options-panel-animation-duration");
|
|
165
176
|
}
|
|
166
177
|
connectedCallback() {
|
|
167
|
-
this.popover = "manual", super.connectedCallback(),
|
|
178
|
+
this.popover = "manual", super.connectedCallback(), C && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
|
|
168
179
|
}
|
|
169
180
|
willUpdate(t) {
|
|
170
181
|
super.willUpdate(t), t.has("negative") && this.syncNegative(), t.has("autoActiveFirstOption") && this.isOpen && this._setNextActiveOptionIfAutoActiveFirstOption();
|
|
@@ -194,10 +205,10 @@ let qt = (() => {
|
|
|
194
205
|
setPendingSelection(t) {
|
|
195
206
|
this.pendingAutoSelectedOption = t, this._setInputValue(t);
|
|
196
207
|
}
|
|
197
|
-
_setValueAndDispatchEvents(t) {
|
|
198
|
-
this.options.filter((
|
|
208
|
+
_setValueAndDispatchEvents(t, e = !1) {
|
|
209
|
+
this.options.filter((i) => i.id !== t.id && i.selected).forEach((i) => i.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(t), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
|
|
199
210
|
detail: { option: t }
|
|
200
|
-
})), this.triggerElement.focus());
|
|
211
|
+
})), e || this.triggerElement.focus());
|
|
201
212
|
}
|
|
202
213
|
/** Set the option value within the input element */
|
|
203
214
|
_setInputValue(t) {
|
|
@@ -225,7 +236,7 @@ let qt = (() => {
|
|
|
225
236
|
}
|
|
226
237
|
_configureTrigger() {
|
|
227
238
|
const t = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
|
|
228
|
-
if (t === this.triggerElement || (this._triggerAbortController?.abort(),
|
|
239
|
+
if (t === this.triggerElement || (this._triggerAbortController?.abort(), mt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
|
|
229
240
|
return;
|
|
230
241
|
const e = this.originElement;
|
|
231
242
|
this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this.triggerElement, {
|
|
@@ -236,8 +247,8 @@ let qt = (() => {
|
|
|
236
247
|
}), this.triggerElement.addEventListener("click", () => this.open(), {
|
|
237
248
|
signal: this._triggerAbortController.signal
|
|
238
249
|
}), this.triggerElement.addEventListener("input", (i) => {
|
|
239
|
-
const
|
|
240
|
-
|
|
250
|
+
const A = i.target.value;
|
|
251
|
+
A && this.open(), this._highlightOptions(A), this._lastUserInput = A, this.pendingAutoSelectedOption = null;
|
|
241
252
|
}, { signal: this._triggerAbortController.signal }), this.triggerElement.addEventListener("keydown", (i) => this._closedPanelKeyboardInteraction(i), {
|
|
242
253
|
signal: this._triggerAbortController.signal,
|
|
243
254
|
// We need key event to run before any other subscription to guarantee a correct
|
|
@@ -247,7 +258,7 @@ let qt = (() => {
|
|
|
247
258
|
}
|
|
248
259
|
// Set overlay position, width and max height
|
|
249
260
|
_setOverlayPosition(t = this.originElement) {
|
|
250
|
-
t &&
|
|
261
|
+
t && ft(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this, this.position);
|
|
251
262
|
}
|
|
252
263
|
/**
|
|
253
264
|
* On open/close animation end.
|
|
@@ -287,7 +298,7 @@ let qt = (() => {
|
|
|
287
298
|
// interaction with other components (necessary for the 'sbb-chip-group' use case).
|
|
288
299
|
capture: !0
|
|
289
300
|
}), this.triggerElement?.addEventListener("blur", (t) => {
|
|
290
|
-
this.contains(t.relatedTarget) || this.close();
|
|
301
|
+
this.contains(t.relatedTarget) || (this.autoSelectActiveOptionOnBlur && this.activeOption && this._lastUserInput && this.triggerElement?.value && (this.activeOption.selected = !0, this._setValueAndDispatchEvents(this.activeOption, !0)), this.close());
|
|
291
302
|
}, {
|
|
292
303
|
signal: this._openPanelEventsController.signal
|
|
293
304
|
});
|
|
@@ -306,22 +317,22 @@ let qt = (() => {
|
|
|
306
317
|
t != null && this.options.forEach((e) => e.highlight(t));
|
|
307
318
|
}
|
|
308
319
|
render() {
|
|
309
|
-
return
|
|
320
|
+
return pt`
|
|
310
321
|
<div class="sbb-autocomplete__gap-fix"></div>
|
|
311
322
|
<div class="sbb-autocomplete__container">
|
|
312
|
-
<div class="sbb-autocomplete__gap-fix">${
|
|
323
|
+
<div class="sbb-autocomplete__gap-fix">${Ot()}</div>
|
|
313
324
|
<div
|
|
314
325
|
@animationend=${this._onAnimationEnd}
|
|
315
326
|
class="sbb-autocomplete__panel"
|
|
316
|
-
${
|
|
327
|
+
${nt((t) => this._overlay = t)}
|
|
317
328
|
>
|
|
318
329
|
<div class="sbb-autocomplete__wrapper">
|
|
319
330
|
<div
|
|
320
331
|
class="sbb-autocomplete__options"
|
|
321
|
-
role=${
|
|
322
|
-
id=${
|
|
332
|
+
role=${C ? ot : this.panelRole}
|
|
333
|
+
id=${C ? ot : this.overlayId}
|
|
323
334
|
tabindex="-1"
|
|
324
|
-
${
|
|
335
|
+
${nt((t) => this._optionContainer = t)}
|
|
325
336
|
>
|
|
326
337
|
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
327
338
|
</div>
|
|
@@ -330,29 +341,31 @@ let qt = (() => {
|
|
|
330
341
|
</div>
|
|
331
342
|
`;
|
|
332
343
|
}
|
|
333
|
-
}, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), y = new WeakMap(),
|
|
334
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
335
|
-
|
|
344
|
+
}, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), O = new WeakMap(), y = new WeakMap(), x = new WeakMap(), (() => {
|
|
345
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
|
|
346
|
+
r = [at(), h()], z = [at(), h()], F = [E(), h({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], L = [E(), h({ attribute: "auto-active-first-option", type: Boolean })], N = [h({ attribute: !1 })], R = [h({ reflect: !0 })], $ = [E(), h({ attribute: "auto-select-active-option", type: Boolean })], Y = [E(), h({ attribute: "auto-select-active-option-on-blur", type: Boolean })], G = [E(), h({ attribute: "require-selection", type: Boolean })], X = [h()], c(a, null, r, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, i) => {
|
|
336
347
|
e.origin = i;
|
|
337
|
-
} }, metadata: t }, l,
|
|
348
|
+
} }, metadata: t }, l, w), c(a, null, z, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
|
|
338
349
|
e.trigger = i;
|
|
339
|
-
} }, metadata: t },
|
|
350
|
+
} }, metadata: t }, I, P), c(a, null, F, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, i) => {
|
|
340
351
|
e.preserveIconSpace = i;
|
|
341
|
-
} }, metadata: t },
|
|
352
|
+
} }, metadata: t }, D, q), c(a, null, L, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, i) => {
|
|
342
353
|
e.autoActiveFirstOption = i;
|
|
343
|
-
} }, metadata: t },
|
|
354
|
+
} }, metadata: t }, U, B), c(a, null, N, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
|
|
344
355
|
e.displayWith = i;
|
|
345
|
-
} }, metadata: t }, W, V), c(
|
|
356
|
+
} }, metadata: t }, W, V), c(a, null, R, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
|
|
346
357
|
e.size = i;
|
|
347
|
-
} }, metadata: t }, M, T), c(
|
|
358
|
+
} }, metadata: t }, M, T), c(a, null, $, { kind: "accessor", name: "autoSelectActiveOption", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOption" in e, get: (e) => e.autoSelectActiveOption, set: (e, i) => {
|
|
348
359
|
e.autoSelectActiveOption = i;
|
|
349
|
-
} }, metadata: t }, j, H), c(
|
|
360
|
+
} }, metadata: t }, j, H), c(a, null, Y, { kind: "accessor", name: "autoSelectActiveOptionOnBlur", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOptionOnBlur" in e, get: (e) => e.autoSelectActiveOptionOnBlur, set: (e, i) => {
|
|
361
|
+
e.autoSelectActiveOptionOnBlur = i;
|
|
362
|
+
} }, metadata: t }, Z, K), c(a, null, G, { kind: "accessor", name: "requireSelection", static: !1, private: !1, access: { has: (e) => "requireSelection" in e, get: (e) => e.requireSelection, set: (e, i) => {
|
|
350
363
|
e.requireSelection = i;
|
|
351
|
-
} }, metadata: t },
|
|
364
|
+
} }, metadata: t }, J, Q), c(a, null, X, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, i) => {
|
|
352
365
|
e.position = i;
|
|
353
|
-
} }, metadata: t },
|
|
354
|
-
})(),
|
|
366
|
+
} }, metadata: t }, tt, et), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
367
|
+
})(), a.styles = [yt, xt], a;
|
|
355
368
|
})();
|
|
356
369
|
export {
|
|
357
|
-
|
|
370
|
+
Bt as SbbAutocompleteBaseElement
|
|
358
371
|
};
|
package/button/common.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
|
|
2
|
-
import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-
|
|
2
|
+
import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-Dx9JhmQ6.js";
|
|
3
3
|
export {
|
|
4
4
|
o as SbbButtonCommonElementMixin,
|
|
5
5
|
a as buttonAccentStyle,
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
var
|
|
1
|
+
var x = (i) => {
|
|
2
2
|
throw TypeError(i);
|
|
3
3
|
};
|
|
4
|
-
var L = (i, t, s) => t.has(i) ||
|
|
5
|
-
var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ?
|
|
4
|
+
var L = (i, t, s) => t.has(i) || x("Cannot " + s);
|
|
5
|
+
var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, a) => (L(i, t, "write to private field"), a ? a.call(i, s) : t.set(i, s), s);
|
|
6
6
|
import { __esDecorate as g, __runInitializers as c } from "tslib";
|
|
7
|
-
import { css as
|
|
7
|
+
import { css as S, LitElement as w, html as N } from "lit";
|
|
8
8
|
import { customElement as E, property as k } from "lit/decorators.js";
|
|
9
9
|
import { forceType as I } from "../../core/decorators.js";
|
|
10
10
|
import { isLean as D } from "../../core/dom.js";
|
|
11
11
|
import { SbbNegativeMixin as M, SbbNamedSlotListMixin as O } from "../../core/mixins.js";
|
|
12
12
|
import { boxSizingStyles as j } from "../../core/styles.js";
|
|
13
|
-
const T =
|
|
13
|
+
const T = S`:host{display:block}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=m]){--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding:var(--sbb-mini-button-group-divider-padding);height:var(--sbb-mini-button-group-divider-height)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);border-radius:var(--sbb-mini-button-group-border-radius);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
|
|
14
14
|
let H = (() => {
|
|
15
|
-
var n, o,
|
|
16
|
-
let i = [E("sbb-mini-button-group")], t, s = [],
|
|
17
|
-
return
|
|
15
|
+
var n, o, r;
|
|
16
|
+
let i = [E("sbb-mini-button-group")], t, s = [], a, p = M(O(w)), h, v = [], y = [], f, _ = [], z = [];
|
|
17
|
+
return r = class extends p {
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
20
|
m(this, n);
|
|
@@ -23,7 +23,7 @@ let H = (() => {
|
|
|
23
23
|
"sbb-mini-button",
|
|
24
24
|
"sbb-mini-button-link",
|
|
25
25
|
"sbb-divider"
|
|
26
|
-
], l(this, n, c(this, v, "")), l(this, o, (c(this,
|
|
26
|
+
], l(this, n, c(this, v, "")), l(this, o, (c(this, y), c(this, _, D() ? "s" : "m"))), c(this, z);
|
|
27
27
|
}
|
|
28
28
|
/** This will be forwarded as aria-label to the list that contains the buttons. */
|
|
29
29
|
get accessibilityLabel() {
|
|
@@ -53,14 +53,14 @@ let H = (() => {
|
|
|
53
53
|
${this.renderList({ ariaLabel: this.accessibilityLabel }, { localNameVisualOnly: ["sbb-divider"] })}
|
|
54
54
|
`;
|
|
55
55
|
}
|
|
56
|
-
}, n = new WeakMap(), o = new WeakMap(),
|
|
56
|
+
}, n = new WeakMap(), o = new WeakMap(), a = r, (() => {
|
|
57
57
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
|
|
58
|
-
h = [I(), k({ attribute: "accessibility-label" })],
|
|
58
|
+
h = [I(), k({ attribute: "accessibility-label" })], f = [k({ reflect: !0 })], g(r, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
|
|
59
59
|
b.accessibilityLabel = u;
|
|
60
|
-
} }, metadata: e }, v,
|
|
60
|
+
} }, metadata: e }, v, y), g(r, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
|
|
61
61
|
b.size = u;
|
|
62
|
-
} }, metadata: e },
|
|
63
|
-
})(),
|
|
62
|
+
} }, metadata: e }, _, z), g(null, t = { value: a }, i, { kind: "class", name: a.name, metadata: e }, null, s), a = t.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
63
|
+
})(), r.styles = [j, T], c(a, s), a;
|
|
64
64
|
})();
|
|
65
65
|
export {
|
|
66
66
|
H as SbbMiniButtonGroupElement
|
package/button.js
CHANGED
|
@@ -14,7 +14,7 @@ import { SbbSecondaryButtonStaticElement as C } from "./button/secondary-button-
|
|
|
14
14
|
import { SbbAccentButtonStaticElement as P } from "./button/accent-button-static/accent-button-static.component.js";
|
|
15
15
|
import { SbbTransparentButtonStaticElement as h } from "./button/transparent-button-static/transparent-button-static.component.js";
|
|
16
16
|
import { SbbButtonCommonElementMixin as q } from "./button/common/button-common.js";
|
|
17
|
-
import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-
|
|
17
|
+
import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-Dx9JhmQ6.js";
|
|
18
18
|
export {
|
|
19
19
|
b as SbbAccentButtonElement,
|
|
20
20
|
L as SbbAccentButtonLinkElement,
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
var k = (e) => {
|
|
2
2
|
throw TypeError(e);
|
|
3
3
|
};
|
|
4
|
-
var y = (e, s,
|
|
5
|
-
var p = (e, s,
|
|
4
|
+
var y = (e, s, l) => s.has(e) || k("Cannot " + l);
|
|
5
|
+
var p = (e, s, l) => (y(e, s, "read from private field"), l ? l.call(e) : s.get(e)), d = (e, s, l) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, l), h = (e, s, l, t) => (y(e, s, "write to private field"), t ? t.call(e, l) : s.set(e, l), l);
|
|
6
6
|
import { __esDecorate as g, __runInitializers as c } from "tslib";
|
|
7
7
|
import { css as S, LitElement as E, html as I } from "lit";
|
|
8
8
|
import { customElement as j, property as w } from "lit/decorators.js";
|
|
9
9
|
import { boxSizingStyles as D } from "../core/styles.js";
|
|
10
|
-
const C = S`:host{display:inline-block
|
|
10
|
+
const C = S`:host{display:inline-block}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
|
|
11
11
|
let B = (() => {
|
|
12
12
|
var o, b, i;
|
|
13
|
-
let e = [j("sbb-chip-label")], s,
|
|
13
|
+
let e = [j("sbb-chip-label")], s, l = [], t, v = E, u, f = [], m = [], x, _ = [], z = [];
|
|
14
14
|
return i = class extends v {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
|
-
d(this, o, c(this,
|
|
18
|
-
d(this, b, (c(this,
|
|
17
|
+
d(this, o, c(this, f, "xxs"));
|
|
18
|
+
d(this, b, (c(this, m), c(this, _, "milk")));
|
|
19
19
|
c(this, z);
|
|
20
20
|
}
|
|
21
21
|
/** Size of the chip. */
|
|
@@ -41,14 +41,14 @@ let B = (() => {
|
|
|
41
41
|
</span>
|
|
42
42
|
`;
|
|
43
43
|
}
|
|
44
|
-
}, o = new WeakMap(), b = new WeakMap(),
|
|
44
|
+
}, o = new WeakMap(), b = new WeakMap(), t = i, (() => {
|
|
45
45
|
const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} }, metadata: r },
|
|
49
|
-
|
|
50
|
-
} }, metadata: r }, _, z), g(null, s = { value:
|
|
51
|
-
})(), i.styles = [D, C], c(
|
|
46
|
+
u = [w({ reflect: !0 })], x = [w({ reflect: !0 })], g(i, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, n) => {
|
|
47
|
+
a.size = n;
|
|
48
|
+
} }, metadata: r }, f, m), g(i, null, x, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, n) => {
|
|
49
|
+
a.color = n;
|
|
50
|
+
} }, metadata: r }, _, z), g(null, s = { value: t }, e, { kind: "class", name: t.name, metadata: r }, null, l), t = s.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
|
|
51
|
+
})(), i.styles = [D, C], c(t, l), t;
|
|
52
52
|
})();
|
|
53
53
|
export {
|
|
54
54
|
B as SbbChipLabelElement
|
|
@@ -3,20 +3,20 @@ var I = (t) => {
|
|
|
3
3
|
};
|
|
4
4
|
var B = (t, a, s) => a.has(t) || I("Cannot " + s);
|
|
5
5
|
var p = (t, a, s) => (B(t, a, "read from private field"), s ? s.call(t) : a.get(t)), g = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), u = (t, a, s, r) => (B(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
|
|
6
|
-
import { __esDecorate as
|
|
6
|
+
import { __esDecorate as m, __runInitializers as i } from "tslib";
|
|
7
7
|
import { css as D, LitElement as T, html as U } from "lit";
|
|
8
|
-
import { customElement as j, property as
|
|
8
|
+
import { customElement as j, property as h } from "lit/decorators.js";
|
|
9
9
|
import { forceType as C } from "../../core/decorators.js";
|
|
10
10
|
import { SbbElementInternalsMixin as O, ɵstateController as q } from "../../core/mixins.js";
|
|
11
11
|
import { boxSizingStyles as F } from "../../core/styles.js";
|
|
12
|
-
const L = D`@charset "UTF-8";:host{
|
|
12
|
+
const L = D`@charset "UTF-8";:host{display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-image])){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
|
|
13
13
|
let Q = (() => {
|
|
14
14
|
var c, d, l, n;
|
|
15
|
-
let t = [j("sbb-container")], a, s = [], r, x = O(T),
|
|
15
|
+
let t = [j("sbb-container")], a, s = [], r, x = O(T), v, k = [], _ = [], f, y = [], E = [], w, S = [], z = [];
|
|
16
16
|
return n = class extends x {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
|
-
g(this, c, i(this,
|
|
19
|
+
g(this, c, i(this, k, !1));
|
|
20
20
|
g(this, d, (i(this, _), i(this, y, !1)));
|
|
21
21
|
g(this, l, (i(this, E), i(this, S, "white")));
|
|
22
22
|
i(this, z);
|
|
@@ -61,13 +61,13 @@ let Q = (() => {
|
|
|
61
61
|
}
|
|
62
62
|
}, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), r = n, (() => {
|
|
63
63
|
const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
|
|
64
|
-
|
|
64
|
+
v = [C(), h({ type: Boolean, reflect: !0 })], f = [C(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], m(n, null, v, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, b) => {
|
|
65
65
|
e.expanded = b;
|
|
66
|
-
} }, metadata: o },
|
|
66
|
+
} }, metadata: o }, k, _), m(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, b) => {
|
|
67
67
|
e.backgroundExpanded = b;
|
|
68
|
-
} }, metadata: o }, y, E),
|
|
68
|
+
} }, metadata: o }, y, E), m(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, b) => {
|
|
69
69
|
e.color = b;
|
|
70
|
-
} }, metadata: o }, S, z),
|
|
70
|
+
} }, metadata: o }, S, z), m(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
|
|
71
71
|
})(), n.styles = [F, L], i(r, s), r;
|
|
72
72
|
})();
|
|
73
73
|
export {
|
|
@@ -2,7 +2,7 @@ var x = (s) => {
|
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
4
|
var w = (s, i, e) => i.has(s) || x("Cannot " + e);
|
|
5
|
-
var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e,
|
|
5
|
+
var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, n) => (w(s, i, "write to private field"), n ? n.call(s, e) : i.set(s, e), e);
|
|
6
6
|
import { __esDecorate as y, __runInitializers as d } from "tslib";
|
|
7
7
|
import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
|
|
8
8
|
import { css as C, LitElement as I, html as R } from "lit";
|
|
@@ -10,16 +10,16 @@ import { customElement as A, property as z } from "lit/decorators.js";
|
|
|
10
10
|
import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
|
|
11
11
|
import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
|
|
12
12
|
import { boxSizingStyles as H } from "../../core/styles.js";
|
|
13
|
-
const L = C`:host{--sbb-sticky-bar-
|
|
13
|
+
const L = C`:host{--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name, unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border, none)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color, transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
|
|
14
14
|
let F = (() => {
|
|
15
|
-
var o, c,
|
|
16
|
-
let s = [A("sbb-sticky-bar")], i, e = [],
|
|
17
|
-
return
|
|
15
|
+
var o, c, r;
|
|
16
|
+
let s = [A("sbb-sticky-bar")], i, e = [], n, h = U(T(I)), g, p = [], v = [], m, _ = [], f = [];
|
|
17
|
+
return r = class extends h {
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
20
20
|
u(this, o);
|
|
21
21
|
u(this, c);
|
|
22
|
-
l(this, o, d(this,
|
|
22
|
+
l(this, o, d(this, p, null)), l(this, c, (d(this, v), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
|
|
23
23
|
// Although `this` is observed, we have to postpone observing
|
|
24
24
|
// into firstUpdated() to achieve a correct initial state.
|
|
25
25
|
target: null,
|
|
@@ -102,19 +102,19 @@ let F = (() => {
|
|
|
102
102
|
<div class="sbb-sticky-bar__intersector"></div>
|
|
103
103
|
`;
|
|
104
104
|
}
|
|
105
|
-
}, o = new WeakMap(), c = new WeakMap(),
|
|
105
|
+
}, o = new WeakMap(), c = new WeakMap(), n = r, (() => {
|
|
106
106
|
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
|
|
107
|
-
g = [z({ reflect: !0 })],
|
|
107
|
+
g = [z({ reflect: !0 })], m = [z({ reflect: !0 })], y(r, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
|
|
108
108
|
a.color = b;
|
|
109
|
-
} }, metadata: t },
|
|
109
|
+
} }, metadata: t }, p, v), y(r, null, m, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
|
|
110
110
|
a.size = b;
|
|
111
|
-
} }, metadata: t }, _, f), y(null, i = { value:
|
|
112
|
-
})(),
|
|
111
|
+
} }, metadata: t }, _, f), y(null, i = { value: n }, s, { kind: "class", name: n.name, metadata: t }, null, e), n = i.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
112
|
+
})(), r.styles = [H, L], r.events = {
|
|
113
113
|
beforestick: "beforestick",
|
|
114
114
|
stick: "stick",
|
|
115
115
|
beforeunstick: "beforeunstick",
|
|
116
116
|
unstick: "unstick"
|
|
117
|
-
}, d(
|
|
117
|
+
}, d(n, e), n;
|
|
118
118
|
})();
|
|
119
119
|
export {
|
|
120
120
|
F as SbbStickyBarElement
|