@sbb-esta/lyne-elements 2.10.1 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/calendar/calendar.component.d.ts +2 -0
- package/calendar/calendar.component.d.ts.map +1 -1
- package/calendar/calendar.component.js +5 -3
- package/card/card/card.component.d.ts +0 -6
- package/card/card/card.component.d.ts.map +1 -1
- package/card/card/card.component.js +11 -19
- package/container/sticky-bar/sticky-bar.component.d.ts +5 -0
- package/container/sticky-bar/sticky-bar.component.d.ts.map +1 -1
- package/container/sticky-bar/sticky-bar.component.js +49 -36
- package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +2 -0
- package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +7 -1
- package/core.css +7 -1
- package/custom-elements.json +53 -30
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete-base-element.js +1 -1
- package/development/calendar/calendar.component.d.ts +2 -0
- package/development/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar.component.js +6 -5
- package/development/card/card/card.component.d.ts +0 -6
- package/development/card/card/card.component.d.ts.map +1 -1
- package/development/card/card/card.component.js +5 -13
- package/development/container/sticky-bar/sticky-bar.component.d.ts +5 -0
- package/development/container/sticky-bar/sticky-bar.component.d.ts.map +1 -1
- package/development/container/sticky-bar/sticky-bar.component.js +28 -5
- package/development/form-field/form-field/form-field.component.js +2 -2
- package/development/header/header/header.component.d.ts +2 -1
- package/development/header/header/header.component.d.ts.map +1 -1
- package/development/header/header/header.component.js +8 -2
- package/development/menu/menu/menu.component.d.ts +2 -1
- package/development/menu/menu/menu.component.d.ts.map +1 -1
- package/development/menu/menu/menu.component.js +8 -2
- package/development/navigation/navigation/navigation.component.d.ts +2 -1
- package/development/navigation/navigation/navigation.component.d.ts.map +1 -1
- package/development/navigation/navigation/navigation.component.js +8 -2
- package/development/navigation/navigation-section/navigation-section.component.d.ts +2 -1
- package/development/navigation/navigation-section/navigation-section.component.d.ts.map +1 -1
- package/development/navigation/navigation-section/navigation-section.component.js +10 -5
- package/development/paginator/common/paginator-common.d.ts.map +1 -1
- package/development/paginator/common/paginator-common.js +8 -3
- package/development/paginator/paginator/paginator.component.d.ts +0 -5
- package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/development/paginator/paginator/paginator.component.js +2 -14
- package/development/popover/popover/popover.component.d.ts.map +1 -1
- package/development/popover/popover/popover.component.js +4 -2
- package/development/sbb-tokens-CVLcOi-S.js +1 -1
- package/development/select/select.component.d.ts +4 -0
- package/development/select/select.component.d.ts.map +1 -1
- package/development/select/select.component.js +12 -3
- package/development/sidebar/sidebar/sidebar.component.js +1 -1
- package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
- package/development/tabs/tab-group/tab-group.component.js +1 -1
- package/development/tabs/tab-label/tab-label.component.js +5 -2
- package/form-field/form-field/form-field.component.js +1 -1
- package/header/header/header.component.d.ts +2 -1
- package/header/header/header.component.d.ts.map +1 -1
- package/header/header/header.component.js +27 -24
- package/menu/menu/menu.component.d.ts +2 -1
- package/menu/menu/menu.component.d.ts.map +1 -1
- package/menu/menu/menu.component.js +10 -7
- package/navigation/navigation/navigation.component.d.ts +2 -1
- package/navigation/navigation/navigation.component.d.ts.map +1 -1
- package/navigation/navigation/navigation.component.js +9 -6
- package/navigation/navigation-section/navigation-section.component.d.ts +2 -1
- package/navigation/navigation-section/navigation-section.component.d.ts.map +1 -1
- package/navigation/navigation-section/navigation-section.component.js +33 -31
- package/package.json +1 -1
- package/paginator/common/paginator-common.d.ts.map +1 -1
- package/paginator/common/paginator-common.js +22 -19
- package/paginator/paginator/paginator.component.d.ts +0 -5
- package/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/paginator/paginator/paginator.component.js +40 -48
- package/popover/popover/popover.component.d.ts.map +1 -1
- package/popover/popover/popover.component.js +18 -18
- package/select/select.component.d.ts +4 -0
- package/select/select.component.d.ts.map +1 -1
- package/select/select.component.js +12 -2
- package/sidebar/sidebar/sidebar.component.js +1 -1
- package/standard-theme.css +7 -1
- package/tabs/tab-group/tab-group.component.d.ts.map +1 -1
- package/tabs/tab-label/tab-label.component.js +1 -1
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAuM5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var k = (
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var k = (i) => {
|
|
2
|
+
throw TypeError(i);
|
|
3
3
|
};
|
|
4
|
-
var C = (
|
|
5
|
-
var
|
|
4
|
+
var C = (i, a, s) => a.has(i) || k("Cannot " + s);
|
|
5
|
+
var _ = (i, a, s) => (C(i, a, "read from private field"), s ? s.call(i) : a.get(i)), x = (i, a, s) => a.has(i) ? k("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), d = (i, a, s, u) => (C(i, a, "write to private field"), u ? u.call(i, s) : a.set(i, s), s);
|
|
6
6
|
import { __runInitializers as h, __esDecorate as p } from "tslib";
|
|
7
7
|
import { html as O } from "lit";
|
|
8
|
-
import { property as
|
|
8
|
+
import { property as m } from "lit/decorators.js";
|
|
9
9
|
import { SbbLanguageController as w } from "../../core/controllers.js";
|
|
10
10
|
import { hostAttributes as D } from "../../core/decorators.js";
|
|
11
11
|
import { isLean as L } from "../../core/dom.js";
|
|
@@ -15,17 +15,17 @@ import { SbbNegativeMixin as B, SbbDisabledMixin as T } from "../../core/mixins.
|
|
|
15
15
|
import "../../button/mini-button.js";
|
|
16
16
|
import "../../button/mini-button-group.js";
|
|
17
17
|
import "../../divider.js";
|
|
18
|
-
const
|
|
18
|
+
const ie = (i) => (() => {
|
|
19
19
|
var o, l, n;
|
|
20
20
|
let s = [D({
|
|
21
21
|
role: "group"
|
|
22
|
-
})],
|
|
22
|
+
})], u, P = [], g, z = B(T(i)), c = [], S, I, f, v, y = [], N = [], E, M = [], $ = [];
|
|
23
23
|
var b = (n = class extends z {
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this._length = (h(this, c), 0), this._pageSize = 10, this._pageIndex = 0, d(this, o, h(this, y, "start")), d(this, l, (h(this, N), h(this, M, L() ? "s" : "m"))), this._page = (h(this, $), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
|
|
26
|
+
x(this, o);
|
|
27
|
+
x(this, l);
|
|
28
|
+
this._length = (h(this, c), 0), this._pageSize = 10, this._pageIndex = 0, d(this, o, h(this, y, "start")), d(this, l, (h(this, N), h(this, M, L() ? "s" : "m"))), this._page = (h(this, $), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this), this._previousPageSize = this._pageSize;
|
|
29
29
|
}
|
|
30
30
|
/** Total number of items. */
|
|
31
31
|
set length(e) {
|
|
@@ -36,8 +36,7 @@ const ae = (a) => (() => {
|
|
|
36
36
|
}
|
|
37
37
|
/** Number of items per page. */
|
|
38
38
|
set pageSize(e) {
|
|
39
|
-
|
|
40
|
-
this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
|
|
39
|
+
this._previousPageSize = this.pageSize, this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * this._previousPageSize / this.pageSize) || 0;
|
|
41
40
|
}
|
|
42
41
|
get pageSize() {
|
|
43
42
|
return this._pageSize;
|
|
@@ -52,7 +51,7 @@ const ae = (a) => (() => {
|
|
|
52
51
|
}
|
|
53
52
|
/** Position of the prev/next buttons. */
|
|
54
53
|
get pagerPosition() {
|
|
55
|
-
return
|
|
54
|
+
return _(this, o);
|
|
56
55
|
}
|
|
57
56
|
set pagerPosition(e) {
|
|
58
57
|
d(this, o, e);
|
|
@@ -62,7 +61,7 @@ const ae = (a) => (() => {
|
|
|
62
61
|
* @default 'm' / 's' (lean)
|
|
63
62
|
*/
|
|
64
63
|
get size() {
|
|
65
|
-
return
|
|
64
|
+
return _(this, l);
|
|
66
65
|
}
|
|
67
66
|
set size(e) {
|
|
68
67
|
d(this, l, e);
|
|
@@ -122,6 +121,10 @@ const ae = (a) => (() => {
|
|
|
122
121
|
this.pageIndex = e;
|
|
123
122
|
}
|
|
124
123
|
emitPageEvent(e) {
|
|
124
|
+
if (!this.hasUpdated || this.pageIndex === e && this._previousPageSize === this.pageSize) {
|
|
125
|
+
this._previousPageSize = this.pageSize;
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
125
128
|
this._page.emit({
|
|
126
129
|
previousPageIndex: e,
|
|
127
130
|
pageIndex: this.pageIndex,
|
|
@@ -158,22 +161,22 @@ const ae = (a) => (() => {
|
|
|
158
161
|
}
|
|
159
162
|
}, o = new WeakMap(), l = new WeakMap(), g = n, (() => {
|
|
160
163
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
|
|
161
|
-
|
|
164
|
+
S = [m({ type: Number })], I = [m({ attribute: "page-size", type: Number })], f = [m({ attribute: "page-index", type: Number })], v = [m({ attribute: "pager-position", reflect: !0 })], E = [m({ reflect: !0 })], p(n, null, S, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
|
|
162
165
|
t.length = r;
|
|
163
|
-
} }, metadata: e }, null, c), p(n, null,
|
|
166
|
+
} }, metadata: e }, null, c), p(n, null, I, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
|
|
164
167
|
t.pageSize = r;
|
|
165
|
-
} }, metadata: e }, null, c), p(n, null,
|
|
168
|
+
} }, metadata: e }, null, c), p(n, null, f, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
|
|
166
169
|
t.pageIndex = r;
|
|
167
170
|
} }, metadata: e }, null, c), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
|
|
168
171
|
t.pagerPosition = r;
|
|
169
172
|
} }, metadata: e }, y, N), p(n, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
|
|
170
173
|
t.size = r;
|
|
171
|
-
} }, metadata: e }, M, $), p(null,
|
|
174
|
+
} }, metadata: e }, M, $), p(null, u = { value: g }, s, { kind: "class", name: g.name, metadata: e }, null, P), b = g = u.value, e && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
172
175
|
})(), n.events = {
|
|
173
176
|
page: "page"
|
|
174
177
|
}, h(g, P), n);
|
|
175
178
|
return b = g;
|
|
176
179
|
})();
|
|
177
180
|
export {
|
|
178
|
-
|
|
181
|
+
ie as SbbPaginatorCommonElementMixin
|
|
179
182
|
};
|
|
@@ -17,11 +17,6 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
|
|
|
17
17
|
accessor pagerPosition: 'start' | 'end';
|
|
18
18
|
private _markForFocus;
|
|
19
19
|
protected updated(changedProperties: PropertyValues<this>): void;
|
|
20
|
-
/**
|
|
21
|
-
* If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
|
|
22
|
-
* emit the `page` event and then update the `pageSize` value.
|
|
23
|
-
*/
|
|
24
|
-
private _pageSizeChanged;
|
|
25
20
|
/** Returns the displayed page elements. */
|
|
26
21
|
private _getVisiblePages;
|
|
27
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
1
|
+
var k = (t) => {
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var u = (t, r, i) => (
|
|
4
|
+
var P = (t, r, i) => r.has(t) || k("Cannot " + i);
|
|
5
|
+
var u = (t, r, i) => (P(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? k("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (P(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
|
|
6
6
|
import { __runInitializers as d, __esDecorate as h } from "tslib";
|
|
7
7
|
import { css as E, LitElement as j, nothing as S, html as b } from "lit";
|
|
8
8
|
import { customElement as A, property as $ } from "lit/decorators.js";
|
|
@@ -29,8 +29,8 @@ let Q = (() => {
|
|
|
29
29
|
get pageSizeOptions() {
|
|
30
30
|
return u(this, p);
|
|
31
31
|
}
|
|
32
|
-
set pageSizeOptions(
|
|
33
|
-
c(this, p,
|
|
32
|
+
set pageSizeOptions(a) {
|
|
33
|
+
c(this, p, a);
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
36
|
* Position of the prev/next buttons: if `pageSizeOptions` is set,
|
|
@@ -39,23 +39,15 @@ let Q = (() => {
|
|
|
39
39
|
get pagerPosition() {
|
|
40
40
|
return u(this, g);
|
|
41
41
|
}
|
|
42
|
-
set pagerPosition(
|
|
43
|
-
c(this, g,
|
|
42
|
+
set pagerPosition(a) {
|
|
43
|
+
c(this, g, a);
|
|
44
44
|
}
|
|
45
|
-
updated(
|
|
46
|
-
if (super.updated(
|
|
47
|
-
const
|
|
48
|
-
|
|
45
|
+
updated(a) {
|
|
46
|
+
if (super.updated(a), this._markForFocus && F.mostRecentModality === "keyboard") {
|
|
47
|
+
const e = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
|
|
48
|
+
e && e.focus(), this._markForFocus = null;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
/**
|
|
52
|
-
* If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
|
|
53
|
-
* emit the `page` event and then update the `pageSize` value.
|
|
54
|
-
*/
|
|
55
|
-
_pageSizeChanged(e) {
|
|
56
|
-
const a = this.pageSize, n = this.pageIndex;
|
|
57
|
-
this.pageSize = e, a !== this.pageSize && this.emitPageEvent(n);
|
|
58
|
-
}
|
|
59
51
|
/** Returns the displayed page elements. */
|
|
60
52
|
_getVisiblePages() {
|
|
61
53
|
return Array.from(this.shadowRoot.querySelectorAll(".sbb-paginator__page--number-item"));
|
|
@@ -67,32 +59,32 @@ let Q = (() => {
|
|
|
67
59
|
* - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
|
|
68
60
|
*/
|
|
69
61
|
_getVisiblePagesIndex() {
|
|
70
|
-
const
|
|
71
|
-
return
|
|
62
|
+
const a = this.numberOfPages(), e = this.pageIndex;
|
|
63
|
+
return a <= l + 2 ? this._range(a) : e < l ? [...this._range(l + 1), "ellipsis", a - 1] : e >= a - l ? [
|
|
72
64
|
0,
|
|
73
65
|
"ellipsis",
|
|
74
|
-
...this._range(l + 1,
|
|
66
|
+
...this._range(l + 1, a - 1 - l)
|
|
75
67
|
] : [
|
|
76
68
|
0,
|
|
77
69
|
"ellipsis",
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
70
|
+
e - 1,
|
|
71
|
+
e,
|
|
72
|
+
e + 1,
|
|
81
73
|
"ellipsis",
|
|
82
|
-
|
|
74
|
+
a - 1
|
|
83
75
|
];
|
|
84
76
|
}
|
|
85
77
|
/** Creates an array of consecutive numbers given the length and the starting value. */
|
|
86
|
-
_range(
|
|
87
|
-
return Array.from({ length:
|
|
78
|
+
_range(a, e = 0) {
|
|
79
|
+
return Array.from({ length: a }, (n, O) => O + e);
|
|
88
80
|
}
|
|
89
|
-
_handleKeyUp(
|
|
90
|
-
if (
|
|
81
|
+
_handleKeyUp(a) {
|
|
82
|
+
if (a.key !== " " && a.key !== "Enter")
|
|
91
83
|
return;
|
|
92
|
-
this._getVisiblePages().find((n) => n ===
|
|
84
|
+
this._getVisiblePages().find((n) => n === a.target) && (this._markForFocus = this.pageIndex);
|
|
93
85
|
}
|
|
94
86
|
_renderItemPerPageTemplate() {
|
|
95
|
-
var
|
|
87
|
+
var a;
|
|
96
88
|
return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
|
|
97
89
|
<div class="sbb-paginator__page-size-options">
|
|
98
90
|
<label for="select">${D[this.language.current]}</label>
|
|
@@ -105,10 +97,10 @@ let Q = (() => {
|
|
|
105
97
|
<sbb-select
|
|
106
98
|
id="select"
|
|
107
99
|
?disabled=${this.disabled}
|
|
108
|
-
value=${((
|
|
109
|
-
@change=${(
|
|
100
|
+
value=${((a = this.pageSizeOptions) == null ? void 0 : a.find((e) => e === this.pageSize)) ?? this.pageSizeOptions[0]}
|
|
101
|
+
@change=${(e) => this.pageSize = +e.target.value}
|
|
110
102
|
>
|
|
111
|
-
${I(this.pageSizeOptions, (
|
|
103
|
+
${I(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
|
|
112
104
|
</sbb-select>
|
|
113
105
|
</sbb-form-field>
|
|
114
106
|
</div>
|
|
@@ -117,23 +109,23 @@ let Q = (() => {
|
|
|
117
109
|
_renderPageNumbers() {
|
|
118
110
|
return b`
|
|
119
111
|
<ul class="sbb-paginator__pages">
|
|
120
|
-
${I(this._getVisiblePagesIndex(), (
|
|
112
|
+
${I(this._getVisiblePagesIndex(), (a) => a === "ellipsis" ? b`
|
|
121
113
|
<li class="sbb-paginator__page--ellipsis">
|
|
122
114
|
<span class="sbb-paginator__page--ellipsis-item">…</span>
|
|
123
115
|
</li>
|
|
124
116
|
` : b`
|
|
125
117
|
<li class="sbb-paginator__page--number">
|
|
126
118
|
<button
|
|
127
|
-
?data-selected=${this.pageIndex ===
|
|
119
|
+
?data-selected=${this.pageIndex === a}
|
|
128
120
|
?disabled=${this.disabled}
|
|
129
121
|
class="sbb-paginator__page--number-item"
|
|
130
|
-
data-index=${
|
|
131
|
-
aria-label="${N[this.language.current]} ${
|
|
132
|
-
aria-current=${this.pageIndex ===
|
|
133
|
-
@click=${() => this.pageIndex =
|
|
122
|
+
data-index=${a}
|
|
123
|
+
aria-label="${N[this.language.current]} ${a + 1}"
|
|
124
|
+
aria-current=${this.pageIndex === a ? "true" : S}
|
|
125
|
+
@click=${() => this.pageIndex = a}
|
|
134
126
|
@keyup=${this._handleKeyUp}
|
|
135
127
|
>
|
|
136
|
-
<span class="sbb-paginator__page--number-item-label">${
|
|
128
|
+
<span class="sbb-paginator__page--number-item-label">${a + 1}</span>
|
|
137
129
|
</button>
|
|
138
130
|
</li>
|
|
139
131
|
`)}
|
|
@@ -154,12 +146,12 @@ let Q = (() => {
|
|
|
154
146
|
`;
|
|
155
147
|
}
|
|
156
148
|
}, p = new WeakMap(), g = new WeakMap(), o = s, (() => {
|
|
157
|
-
const
|
|
158
|
-
f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (
|
|
159
|
-
|
|
160
|
-
} }, metadata:
|
|
161
|
-
|
|
162
|
-
} }, metadata:
|
|
149
|
+
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
|
|
150
|
+
f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (e) => "pageSizeOptions" in e, get: (e) => e.pageSizeOptions, set: (e, n) => {
|
|
151
|
+
e.pageSizeOptions = n;
|
|
152
|
+
} }, metadata: a }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, n) => {
|
|
153
|
+
e.pagerPosition = n;
|
|
154
|
+
} }, metadata: a }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = r.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
163
155
|
})(), s.styles = M, s.events = {
|
|
164
156
|
page: "page"
|
|
165
157
|
}, d(o, i), o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAStE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAU1C;;;;;;;;;;;;GAYG;AACH,qBAGM,iBAAkB,SAAQ,sBAA0C;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAExE,iDAAiD;IACjD,SAEgB,eAAe,EAAE,OAAO,CAAS;IAEjD,wDAAwD;IACxD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C,8CAA8C;IAC9C,SAEgB,SAAS,EAAE,MAAM,CAAK;IAEtC,+CAA+C;IAC/C,SAEgB,UAAU,EAAE,MAAM,CAAK;IAEvC,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAIvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAItE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAElC,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,6BAA6B,CAAiD;IACtF,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAgCnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAqBxC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,cAAc;IAUN,iBAAiB,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"popover.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAStE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAU1C;;;;;;;;;;;;GAYG;AACH,qBAGM,iBAAkB,SAAQ,sBAA0C;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAExE,iDAAiD;IACjD,SAEgB,eAAe,EAAE,OAAO,CAAS;IAEjD,wDAAwD;IACxD,SAEgB,YAAY,EAAE,OAAO,CAAS;IAE9C,8CAA8C;IAC9C,SAEgB,SAAS,EAAE,MAAM,CAAK;IAEtC,+CAA+C;IAC/C,SAEgB,UAAU,EAAE,MAAM,CAAK;IAEvC,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,sEAAsE;IACtE,UAAmB,SAAS,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAIvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAItE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAElC,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAC3C,OAAO,CAAC,4BAA4B,CAAC,CAAU;IAC/C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,6BAA6B,CAAiD;IACtF,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAgCnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAqBxC,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,cAAc;IAUN,iBAAiB,IAAI,IAAI;IAUzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,iBAAiB;IA2DzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAS3B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAMF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,gBAAgB;IAkCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|
|
@@ -2,7 +2,7 @@ var q = (s) => {
|
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
4
|
var W = (s, i, r) => i.has(s) || q("Cannot " + r);
|
|
5
|
-
var
|
|
5
|
+
var h = (s, i, r) => (W(s, i, "read from private field"), r ? r.call(s) : i.get(s)), c = (s, i, r) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (W(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
|
|
6
6
|
import { __runInitializers as l, __esDecorate as d } from "tslib";
|
|
7
7
|
import { css as X, isServer as T, html as j, nothing as G } from "lit";
|
|
8
8
|
import { customElement as J, property as w } from "lit/decorators.js";
|
|
@@ -14,24 +14,24 @@ import { hostAttributes as ne, forceType as C } from "../../core/decorators.js";
|
|
|
14
14
|
import { isZeroAnimationDuration as le } from "../../core/dom.js";
|
|
15
15
|
import { EventEmitter as Q, composedPathHasAttribute as be } from "../../core/eventing.js";
|
|
16
16
|
import { i18nClosePopover as pe } from "../../core/i18n.js";
|
|
17
|
-
import { SbbHydrationMixin as
|
|
18
|
-
import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as
|
|
17
|
+
import { SbbHydrationMixin as he } from "../../core/mixins.js";
|
|
18
|
+
import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as ce, setAriaOverlayTriggerAttributes as de, getElementPosition as ve } from "../../core/overlay.js";
|
|
19
19
|
import "../../button/secondary-button.js";
|
|
20
20
|
const ge = X`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);outline:none!important;display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{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);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;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)}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`, ue = 16, _e = 32;
|
|
21
21
|
let me = 0;
|
|
22
22
|
const E = /* @__PURE__ */ new Set(), fe = T ? !1 : matchMedia(se).matches;
|
|
23
23
|
let Fe = (() => {
|
|
24
24
|
var v, g, u, _, m, f, a;
|
|
25
|
-
let s = [J("sbb-popover"), ne({ popover: "manual" })], i, r = [], b, k =
|
|
25
|
+
let s = [J("sbb-popover"), ne({ popover: "manual" })], i, r = [], b, k = he(oe), D, L = [], P = [], S, O = [], z = [], A, B = [], I = [], F, M = [], R = [], $, U = [], H = [], N, Y = [], Z = [];
|
|
26
26
|
var x = (a = class extends k {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
c(this, v);
|
|
30
|
+
c(this, g);
|
|
31
|
+
c(this, u);
|
|
32
|
+
c(this, _);
|
|
33
|
+
c(this, m);
|
|
34
|
+
c(this, f);
|
|
35
35
|
n(this, v, l(this, L, null)), n(this, g, (l(this, P), l(this, O, !1))), n(this, u, (l(this, z), l(this, B, !1))), n(this, _, (l(this, I), l(this, M, 0))), n(this, m, (l(this, R), l(this, U, 0))), n(this, f, (l(this, H), l(this, Y, ""))), this.willClose = (l(this, Z), new Q(this, x.events.willClose, { cancelable: !0 })), this.didClose = new Q(this, x.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._hoverTrigger = !1, this._triggerIdReferenceController = new ie(this, "trigger"), this._escapableOverlayController = new re(this), this._focusTrapController = new ee(this), this._language = new ae(this), this._pointerDownListener = (t) => {
|
|
36
36
|
this._isPointerDownEventOnPopover = V(this._overlay, t);
|
|
37
37
|
}, this._closeOnBackdropClick = (t) => {
|
|
@@ -51,42 +51,42 @@ let Fe = (() => {
|
|
|
51
51
|
* Accepts both a string (id of an element) or an HTML element.
|
|
52
52
|
*/
|
|
53
53
|
get trigger() {
|
|
54
|
-
return
|
|
54
|
+
return h(this, v);
|
|
55
55
|
}
|
|
56
56
|
set trigger(t) {
|
|
57
57
|
n(this, v, t);
|
|
58
58
|
}
|
|
59
59
|
/** Whether the close button should be hidden. */
|
|
60
60
|
get hideCloseButton() {
|
|
61
|
-
return
|
|
61
|
+
return h(this, g);
|
|
62
62
|
}
|
|
63
63
|
set hideCloseButton(t) {
|
|
64
64
|
n(this, g, t);
|
|
65
65
|
}
|
|
66
66
|
/** Whether the popover should be triggered on hover. */
|
|
67
67
|
get hoverTrigger() {
|
|
68
|
-
return
|
|
68
|
+
return h(this, u);
|
|
69
69
|
}
|
|
70
70
|
set hoverTrigger(t) {
|
|
71
71
|
n(this, u, t);
|
|
72
72
|
}
|
|
73
73
|
/** Open the popover after a certain delay. */
|
|
74
74
|
get openDelay() {
|
|
75
|
-
return
|
|
75
|
+
return h(this, _);
|
|
76
76
|
}
|
|
77
77
|
set openDelay(t) {
|
|
78
78
|
n(this, _, t);
|
|
79
79
|
}
|
|
80
80
|
/** Close the popover after a certain delay. */
|
|
81
81
|
get closeDelay() {
|
|
82
|
-
return
|
|
82
|
+
return h(this, m);
|
|
83
83
|
}
|
|
84
84
|
set closeDelay(t) {
|
|
85
85
|
n(this, m, t);
|
|
86
86
|
}
|
|
87
87
|
/** This will be forwarded as aria-label to the close button element. */
|
|
88
88
|
get accessibilityCloseLabel() {
|
|
89
|
-
return
|
|
89
|
+
return h(this, f);
|
|
90
90
|
}
|
|
91
91
|
set accessibilityCloseLabel(t) {
|
|
92
92
|
n(this, f, t);
|
|
@@ -122,7 +122,7 @@ let Fe = (() => {
|
|
|
122
122
|
this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._escapableOverlayController.connect(), this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.didOpen.emit();
|
|
123
123
|
}
|
|
124
124
|
connectedCallback() {
|
|
125
|
-
super.connectedCallback(), this.id || (this.id = `sbb-popover-${++me}`), this.
|
|
125
|
+
super.connectedCallback(), this.id || (this.id = `sbb-popover-${++me}`), this.state = "closed", E.add(this), this.hasUpdated && this._configureTrigger();
|
|
126
126
|
}
|
|
127
127
|
requestUpdate(t, e, o) {
|
|
128
128
|
super.requestUpdate(t, e, o), !T && (!t || t === "trigger" || t === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
|
|
@@ -144,7 +144,7 @@ let Fe = (() => {
|
|
|
144
144
|
return;
|
|
145
145
|
}
|
|
146
146
|
const t = this.hoverTrigger && !fe, e = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
|
|
147
|
-
if (e === this._triggerElement && t === this._hoverTrigger || ((p = this._triggerAbortController) == null || p.abort(),
|
|
147
|
+
if (e === this._triggerElement && t === this._hoverTrigger || ((p = this._triggerAbortController) == null || p.abort(), ce(this._triggerElement), this._triggerElement = e, this._hoverTrigger = t, !this._triggerElement))
|
|
148
148
|
return;
|
|
149
149
|
de(this._triggerElement, "dialog", this.id, this.state);
|
|
150
150
|
const { signal: o } = this._triggerAbortController = new AbortController();
|
|
@@ -103,6 +103,10 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
103
103
|
/** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
|
|
104
104
|
private _onValueChanged;
|
|
105
105
|
protected firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
106
|
+
/** @internal */
|
|
107
|
+
focus(): void;
|
|
108
|
+
/** @internal */
|
|
109
|
+
blur(): void;
|
|
106
110
|
/**
|
|
107
111
|
* Removes element's first attribute whose qualified name is qualifiedName.
|
|
108
112
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAWnE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAc3B;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKM,gBAAiB,SAAQ,qBAY9B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;;;MAQ3B;IAEX,0DAA0D;IAC1D,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,wDAAwD;IACxD,SAGgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,SAMyB,QAAQ,EAAE,OAAO,CAAS;IAEnD,sCAAsC;IACtC,SAKgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuB;IAE9D,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAAwE;IAEvF,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAAuE;IAErF,gBAAgB;IAChB,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,mBAAmB,CAAmC;IAE9D;;;OAGG;IACH,IAAW,YAAY,IAAI,WAAW,CAErC;IAED,6DAA6D;IAC7D,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,gBAAgB,GAI3B;;IA6BD,OAAO,CAAC,eAAe;IAiCvB,iCAAiC;IAC1B,IAAI,IAAI,IAAI;IA2BnB,kCAAkC;IAC3B,KAAK,IAAI,IAAI;IAmBpB,OAAO,CAAC,wBAAwB;IAIhC,wCAAwC;IACjC,eAAe,IAAI,MAAM;IAIhC,iCAAiC;IACjC,OAAO,CAAC,gBAAgB;IASxB,iCAAiC;IACjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,mBAAmB;IAW3B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,+BAA+B;IAMvC,oHAAoH;IACpH,OAAO,CAAC,eAAe;cAwBJ,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO/F,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAWnE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAc3B;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKM,gBAAiB,SAAQ,qBAY9B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;;;MAQ3B;IAEX,0DAA0D;IAC1D,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,wDAAwD;IACxD,SAGgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,SAMyB,QAAQ,EAAE,OAAO,CAAS;IAEnD,sCAAsC;IACtC,SAKgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuB;IAE9D,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAAwE;IAEvF,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAAuE;IAErF,gBAAgB;IAChB,OAAO,CAAC,oBAAoB,CAM1B;IAEF,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,mBAAmB,CAAmC;IAE9D;;;OAGG;IACH,IAAW,YAAY,IAAI,WAAW,CAErC;IAED,6DAA6D;IAC7D,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,gBAAgB,GAI3B;;IA6BD,OAAO,CAAC,eAAe;IAiCvB,iCAAiC;IAC1B,IAAI,IAAI,IAAI;IA2BnB,kCAAkC;IAC3B,KAAK,IAAI,IAAI;IAmBpB,OAAO,CAAC,wBAAwB;IAIhC,wCAAwC;IACjC,eAAe,IAAI,MAAM;IAIhC,iCAAiC;IACjC,OAAO,CAAC,gBAAgB;IASxB,iCAAiC;IACjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,mBAAmB;IAW3B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,+BAA+B;IAMvC,oHAAoH;IACpH,OAAO,CAAC,eAAe;cAwBJ,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,gBAAgB;IACA,KAAK,IAAI,IAAI;IAK7B,gBAAgB;IACA,IAAI,IAAI,IAAI;IAK5B;;;;;OAKG;IACa,eAAe,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;IAa5C,iBAAiB,IAAI,IAAI;IAqBzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAOY,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5D,oBAAoB,IAAI,IAAI;cAMzB,eAAe,IAAI,IAAI;IAU1C;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAcP,OAAO,CAAC,eAAe;cAeJ,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAItD,QAAQ,IAAI,IAAI;IASnC,OAAO,CAAC,YAAY;IAOpB,sHAAsH;IACtH,OAAO,CAAC,YAAY;IAYpB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAUtB,yGAAyG;IACzG,OAAO,CAAC,iBAAiB;IAkBzB,kGAAkG;IAClG,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,+BAA+B;IAgBvC,OAAO,CAAC,+BAA+B;IAwCvC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,0BAA0B;IA0ClC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,qBAAqB;IAsB7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,2BAA2B;YAMrB,qBAAqB;cAOhB,MAAM,IAAI,cAAc;CAoD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|
|
@@ -18,7 +18,7 @@ import { EventEmitter as V } from "../core/eventing.js";
|
|
|
18
18
|
import { i18nSelectionRequired as pe } from "../core/i18n.js";
|
|
19
19
|
import { SbbUpdateSchedulerMixin as ce, SbbDisabledMixin as ue, SbbNegativeMixin as ve, SbbHydrationMixin as _e, SbbRequiredMixin as ge, SbbFormAssociatedMixin as fe } from "../core/mixins.js";
|
|
20
20
|
import { isEventOnElement as W, setOverlayPosition as me, overlayGapFixCorners as ye } from "../core/overlay.js";
|
|
21
|
-
const we = ee`*,: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__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.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}}`, O = he;
|
|
21
|
+
const we = ee`*,: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;cursor:default;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__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.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}}`, O = he;
|
|
22
22
|
let xe = 0, Re = (() => {
|
|
23
23
|
var c, u, v, _, g, n;
|
|
24
24
|
let o = [se("sbb-select"), ne({
|
|
@@ -163,7 +163,17 @@ let xe = 0, Re = (() => {
|
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
firstUpdated(e) {
|
|
166
|
-
super.firstUpdated(e),
|
|
166
|
+
super.firstUpdated(e), Q() || (this.startUpdate(), this._setupSelect());
|
|
167
|
+
}
|
|
168
|
+
/** @internal */
|
|
169
|
+
focus() {
|
|
170
|
+
var e;
|
|
171
|
+
(e = this._triggerElement) == null || e.focus();
|
|
172
|
+
}
|
|
173
|
+
/** @internal */
|
|
174
|
+
blur() {
|
|
175
|
+
var e;
|
|
176
|
+
(e = this._triggerElement) == null || e.blur();
|
|
167
177
|
}
|
|
168
178
|
/**
|
|
169
179
|
* Removes element's first attribute whose qualified name is qualifiedName.
|
|
@@ -13,7 +13,7 @@ import { SbbEscapableOverlayController as J } from "../../core/controllers.js";
|
|
|
13
13
|
import { forceType as w, handleDistinctChange as K } from "../../core/decorators.js";
|
|
14
14
|
import { isZeroAnimationDuration as Q } from "../../core/dom.js";
|
|
15
15
|
import { SbbAnimationCompleteMixin as X } from "../../core/mixins.js";
|
|
16
|
-
const Y = P`*,:before,:after{box-sizing:border-box}:host{display:block;width:20rem;--sbb-link-text-decoration: none;--sbb-sidebar-background-color: var(--sbb-color-white);--sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);--sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--sbb-sidebar-border-radius: var(--sbb-border-radius-8x);--sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);--sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);--sbb-sidebar__margin: 0;--sbb-sidebar__margin-block-start: var(--sbb-sidebar-margin);--sbb-sidebar__translate-x: -100%;--sbb-sidebar__z-index: 2;--sbb-sidebar__padding-inline-end: var(--sbb-sidebar-padding);--sbb-sidebar__padding-block-start: var(--sbb-sidebar-padding);--sbb-sidebar__border-radius-start: var(--sbb-sidebar-border-radius);--sbb-sidebar__border-radius-end: 0;--sbb-sidebar__close-button-size: var(--sbb-size-element-xs)}@supports (scrollbar-gutter: stable){:host{--sbb-sidebar__padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-color-milk)}:host(:is([mode=over],[data-mode-over-forced]:not([data-mode-over-forced-closing]))){--sbb-sidebar__margin: var(--sbb-sidebar-margin);--sbb-sidebar__border-radius-end: var(--sbb-sidebar-border-radius);--sbb-sidebar__z-index: 3}:host(:is(:dir(rtl),[position=end])){--sbb-sidebar__translate-x: 100%}:host(:dir(rtl)[position=end]){--sbb-sidebar__translate-x: -100%}.sbb-sidebar{width:inherit;max-width:calc(100% - 2 * var(--sbb-sidebar__margin));background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--sbb-sidebar__z-index);border-start-start-radius:var(--sbb-sidebar__border-radius-start);border-start-end-radius:var(--sbb-sidebar__border-radius-start);border-end-start-radius:var(--sbb-sidebar__border-radius-end);border-end-end-radius:var(--sbb-sidebar__border-radius-end);margin:var(--sbb-sidebar__margin);margin-block-start:var(--sbb-sidebar__margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host([data-state=closed]) .sbb-sidebar{visibility:hidden}:host(:is([data-state=closing],[data-state=closed])) .sbb-sidebar{translate:var(--sbb-sidebar__translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host([data-scrolled]) .sbb-sidebar-title-section{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-soft-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-soft-1-color)}.sbb-sidebar-content-section{--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-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-sidebar-content-section::-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-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--sbb-sidebar__padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--sbb-sidebar__padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;padding-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`;
|
|
16
|
+
const Y = P`*,:before,:after{box-sizing:border-box}:host{display:block;width:20rem;--sbb-link-text-decoration: none;--sbb-sidebar-background-color: var(--sbb-color-white);--sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);--sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--sbb-sidebar-border-radius: var(--sbb-border-radius-8x);--sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);--sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);--sbb-sidebar__margin: 0;--sbb-sidebar__margin-block-start: var(--sbb-sidebar-margin);--sbb-sidebar__translate-x: -100%;--sbb-sidebar__z-index: 2;--sbb-sidebar__padding-inline-end: var(--sbb-sidebar-padding);--sbb-sidebar__padding-block-start: var(--sbb-sidebar-padding);--sbb-sidebar__border-radius-start: var(--sbb-sidebar-border-radius);--sbb-sidebar__border-radius-end: 0;--sbb-sidebar__close-button-size: var(--sbb-size-element-xs)}@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)){:host{--sbb-sidebar__padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-color-milk)}:host(:is([mode=over],[data-mode-over-forced]:not([data-mode-over-forced-closing]))){--sbb-sidebar__margin: var(--sbb-sidebar-margin);--sbb-sidebar__border-radius-end: var(--sbb-sidebar-border-radius);--sbb-sidebar__z-index: 3}:host(:is(:dir(rtl),[position=end])){--sbb-sidebar__translate-x: 100%}:host(:dir(rtl)[position=end]){--sbb-sidebar__translate-x: -100%}.sbb-sidebar{width:inherit;max-width:calc(100% - 2 * var(--sbb-sidebar__margin));background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--sbb-sidebar__z-index);border-start-start-radius:var(--sbb-sidebar__border-radius-start);border-start-end-radius:var(--sbb-sidebar__border-radius-start);border-end-start-radius:var(--sbb-sidebar__border-radius-end);border-end-end-radius:var(--sbb-sidebar__border-radius-end);margin:var(--sbb-sidebar__margin);margin-block-start:var(--sbb-sidebar__margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host([data-state=closed]) .sbb-sidebar{visibility:hidden}:host(:is([data-state=closing],[data-state=closed])) .sbb-sidebar{translate:var(--sbb-sidebar__translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host([data-scrolled]) .sbb-sidebar-title-section{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-soft-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-soft-1-color)}.sbb-sidebar-content-section{--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-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-sidebar-content-section::-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-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--sbb-sidebar__padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--sbb-sidebar__padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;padding-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`;
|
|
17
17
|
let ue = (() => {
|
|
18
18
|
var c, h, u, p, _, o;
|
|
19
19
|
let i = [q("sbb-sidebar")], a, r = [], b, k = X(H), x = [], O, y = [], C = [], S, z = [], E = [], A, F = [], T = [], D, I = [], W = [], V, U = [], M = [], Z;
|
package/standard-theme.css
CHANGED
|
@@ -106,7 +106,7 @@ summary {
|
|
|
106
106
|
|
|
107
107
|
/**
|
|
108
108
|
* Do not edit directly
|
|
109
|
-
* Generated on
|
|
109
|
+
* Generated on Tue, 03 Jun 2025 05:23:14 GMT
|
|
110
110
|
*/
|
|
111
111
|
*,
|
|
112
112
|
::before,
|
|
@@ -135,6 +135,10 @@ summary {
|
|
|
135
135
|
* Original Value: 3px
|
|
136
136
|
*/
|
|
137
137
|
--sbb-border-width-3x: 0.1875rem;
|
|
138
|
+
/**
|
|
139
|
+
* Original Value: 4px
|
|
140
|
+
*/
|
|
141
|
+
--sbb-border-width-4x: 0.25rem;
|
|
138
142
|
/**
|
|
139
143
|
* Original Value: 2px
|
|
140
144
|
*/
|
|
@@ -1066,6 +1070,7 @@ summary {
|
|
|
1066
1070
|
--sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
|
|
1067
1071
|
--sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
|
|
1068
1072
|
--sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
|
|
1073
|
+
--sbb-font-size-title-7: var(--sbb-typo-scale-0-75x);
|
|
1069
1074
|
--sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
|
|
1070
1075
|
--sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
|
|
1071
1076
|
--sbb-font-size-text-m: var(--sbb-typo-scale-default);
|
|
@@ -1149,6 +1154,7 @@ summary {
|
|
|
1149
1154
|
--sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
|
|
1150
1155
|
--sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
|
|
1151
1156
|
--sbb-font-size-title-6: var(--sbb-typo-scale-default);
|
|
1157
|
+
--sbb-font-size-title-7: var(--sbb-typo-scale-0-875x);
|
|
1152
1158
|
--sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
|
|
1153
1159
|
--sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
|
|
1154
1160
|
--sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
|