@sbb-esta/lyne-elements 1.14.1 → 1.15.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.d.ts +1 -1
- package/autocomplete/autocomplete.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +1 -1
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid.js +6 -6
- package/autocomplete.js +20 -19
- package/calendar/calendar.d.ts +1 -1
- package/calendar/calendar.d.ts.map +1 -1
- package/calendar.js +25 -27
- package/checkbox/checkbox-panel/checkbox-panel.d.ts +1 -1
- package/checkbox/checkbox-panel/checkbox-panel.d.ts.map +1 -1
- package/checkbox/checkbox-panel.js +5 -5
- package/checkbox/common.js +1 -1
- package/clock/clock.d.ts +1 -1
- package/clock/clock.d.ts.map +1 -1
- package/clock.js +2 -2
- package/container/sticky-bar/sticky-bar.d.ts +29 -2
- package/container/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/container/sticky-bar.js +69 -31
- package/core/controllers/media-matchers-controller.d.ts +32 -0
- package/core/controllers/media-matchers-controller.d.ts.map +1 -0
- package/core/controllers.d.ts +1 -0
- package/core/controllers.d.ts.map +1 -1
- package/core/controllers.js +75 -33
- package/core/dom/breakpoint.d.ts +2 -1
- package/core/dom/breakpoint.d.ts.map +1 -1
- package/core/dom.js +7 -7
- package/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/core/mixins.js +8 -1
- package/core/styles/core/mediaqueries.scss +1 -2
- package/core/styles/mixins/buttons.scss +5 -5
- package/core/testing/event-spy.d.ts +6 -4
- package/core/testing/event-spy.d.ts.map +1 -1
- package/core/testing.js +82 -55
- package/custom-elements.json +609 -62
- package/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/development/autocomplete/autocomplete.d.ts +1 -1
- package/development/autocomplete/autocomplete.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +1 -1
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid.js +4 -3
- package/development/autocomplete.js +4 -3
- package/development/calendar/calendar.d.ts +1 -1
- package/development/calendar/calendar.d.ts.map +1 -1
- package/development/calendar.js +8 -11
- package/development/checkbox/checkbox-panel/checkbox-panel.d.ts +1 -1
- package/development/checkbox/checkbox-panel/checkbox-panel.d.ts.map +1 -1
- package/development/checkbox/checkbox-panel.js +2 -2
- package/development/checkbox/common.js +2 -2
- package/development/clock/clock.d.ts +1 -1
- package/development/clock/clock.d.ts.map +1 -1
- package/development/clock.js +3 -3
- package/development/container/sticky-bar/sticky-bar.d.ts +29 -2
- package/development/container/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/development/container/sticky-bar.js +149 -36
- package/development/core/controllers/media-matchers-controller.d.ts +32 -0
- package/development/core/controllers/media-matchers-controller.d.ts.map +1 -0
- package/development/core/controllers.d.ts +1 -0
- package/development/core/controllers.d.ts.map +1 -1
- package/development/core/controllers.js +65 -1
- package/development/core/dom/breakpoint.d.ts +2 -1
- package/development/core/dom/breakpoint.d.ts.map +1 -1
- package/development/core/dom.js +2 -2
- package/development/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/development/core/mixins.js +9 -2
- package/development/core/testing/event-spy.d.ts +6 -4
- package/development/core/testing/event-spy.d.ts.map +1 -1
- package/development/core/testing.js +35 -1
- package/development/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/development/datepicker/datepicker.js +1 -1
- package/development/dialog/dialog.js +2 -2
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +2 -0
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts.map +1 -1
- package/development/expansion-panel/expansion-panel-header.js +7 -3
- package/development/file-selector/file-selector.d.ts +5 -0
- package/development/file-selector/file-selector.d.ts.map +1 -1
- package/development/file-selector.js +8 -1
- package/development/flip-card/flip-card/flip-card.d.ts +4 -0
- package/development/flip-card/flip-card/flip-card.d.ts.map +1 -1
- package/development/flip-card/flip-card-details.js +4 -6
- package/development/flip-card/flip-card-summary/flip-card-summary.d.ts +1 -1
- package/development/flip-card/flip-card-summary/flip-card-summary.d.ts.map +1 -1
- package/development/flip-card/flip-card-summary.js +9 -10
- package/development/flip-card/flip-card.js +26 -2
- package/development/form-field/form-field.js +5 -3
- package/development/icon/icon.d.ts +1 -1
- package/development/icon.js +1 -1
- package/development/image/image.d.ts.map +1 -1
- package/development/image.js +3 -19
- package/development/map-container.js +3 -2
- package/development/menu/menu/menu.d.ts +1 -0
- package/development/menu/menu/menu.d.ts.map +1 -1
- package/development/menu/menu.js +15 -11
- package/development/navigation/navigation-section.js +4 -14
- package/development/navigation/navigation.js +2 -7
- package/development/notification.js +3 -2
- package/development/paginator/paginator/paginator.d.ts +1 -5
- package/development/paginator/paginator/paginator.d.ts.map +1 -1
- package/development/paginator/paginator.js +19 -27
- package/development/popover/popover/popover.d.ts.map +1 -1
- package/development/popover/popover.js +9 -16
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts +1 -1
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- package/development/radio-button/radio-button-panel.js +2 -2
- package/development/sbb-tokens-BdGhUJjM.js +33 -0
- package/development/select/select.d.ts +6 -5
- package/development/select/select.d.ts.map +1 -1
- package/development/select.js +23 -14
- package/development/slider/slider.d.ts +5 -0
- package/development/slider/slider.d.ts.map +1 -1
- package/development/slider.js +8 -1
- package/development/table/table-wrapper/table-wrapper.d.ts +1 -1
- package/development/table/table-wrapper/table-wrapper.d.ts.map +1 -1
- package/development/table/table-wrapper.js +1 -1
- package/development/timetable-occupancy-icon/timetable-occupancy-icon.d.ts +2 -1
- package/development/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map +1 -1
- package/development/timetable-occupancy-icon.js +11 -9
- package/development/toggle-check/toggle-check.d.ts +1 -1
- package/development/toggle-check/toggle-check.d.ts.map +1 -1
- package/development/toggle-check.js +2 -2
- package/dialog/dialog.js +1 -1
- package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts +2 -0
- package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts.map +1 -1
- package/expansion-panel/expansion-panel-header.js +25 -23
- package/file-selector/file-selector.d.ts +5 -0
- package/file-selector/file-selector.d.ts.map +1 -1
- package/file-selector.js +7 -0
- package/flip-card/flip-card/flip-card.d.ts +4 -0
- package/flip-card/flip-card/flip-card.d.ts.map +1 -1
- package/flip-card/flip-card-details.js +6 -6
- package/flip-card/flip-card-summary/flip-card-summary.d.ts +1 -1
- package/flip-card/flip-card-summary/flip-card-summary.d.ts.map +1 -1
- package/flip-card/flip-card-summary.js +8 -8
- package/flip-card/flip-card.js +56 -42
- package/icon/icon.d.ts +1 -1
- package/image/image.d.ts.map +1 -1
- package/image.js +46 -45
- package/map-container.js +7 -7
- package/menu/menu/menu.d.ts +1 -0
- package/menu/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +45 -41
- package/navigation/navigation-section.js +7 -7
- package/navigation/navigation.js +8 -8
- package/package.json +1 -1
- package/paginator/paginator/paginator.d.ts +1 -5
- package/paginator/paginator/paginator.d.ts.map +1 -1
- package/paginator/paginator.js +50 -52
- package/popover/popover/popover.d.ts.map +1 -1
- package/popover/popover.js +42 -46
- package/radio-button/radio-button-panel/radio-button-panel.d.ts +1 -1
- package/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
- package/radio-button/radio-button-panel.js +7 -7
- package/sbb-tokens-Dx20OtVg.js +18 -0
- package/select/select.d.ts +6 -5
- package/select/select.d.ts.map +1 -1
- package/select.js +55 -53
- package/slider/slider.d.ts +5 -0
- package/slider/slider.d.ts.map +1 -1
- package/slider.js +12 -5
- package/table/table-wrapper/table-wrapper.d.ts +1 -1
- package/table/table-wrapper/table-wrapper.d.ts.map +1 -1
- package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts +2 -1
- package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map +1 -1
- package/timetable-occupancy-icon.js +45 -44
- package/toggle-check/toggle-check.d.ts +1 -1
- package/toggle-check/toggle-check.d.ts.map +1 -1
- package/toggle-check.js +1 -1
|
@@ -16,19 +16,19 @@ import { SbbUpdateSchedulerMixin as et } from "../core/mixins.js";
|
|
|
16
16
|
import { removeAriaOverlayTriggerAttributes as at, setAriaOverlayTriggerAttributes as nt } from "../core/overlay.js";
|
|
17
17
|
import "../button/transparent-button.js";
|
|
18
18
|
import "../divider.js";
|
|
19
|
-
const st = U`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-transform: translateX(100%);--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width:
|
|
19
|
+
const st = U`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-transform: translateX(100%);--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-navigation-section-column: 5 / 9;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-transform: translateX(0%);--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );transform:translate(calc(var(--sbb-grid-base-gutter-responsive) * -1))}}@media (min-width: 80rem){:host{--sbb-navigation-section-column: 5 / 13}}@media (min-width: 90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host([data-state=opened]){--sbb-navigation-section-pointer-events: all}:host([data-state=opening]){--sbb-navigation-section-position: absolute}:host(:is([data-state=opening],[data-state=closing])){--sbb-navigation-section-pointer-events: none}:host([data-state]:not([data-state=closed])){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted([data-sbb-button]){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-color-white);background-color:transparent;padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation-section{animation-name:close}@media (forced-colors: active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-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-navigation-section__wrapper::-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-navigation-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is([data-state=opening],[data-state=closing])) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media (min-width: 64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (min-width: 80rem){.sbb-navigation-section__header{grid-column:1/4}}:host(:not([data-slot-names~=title],[title-content])) .sbb-navigation-section__header{display:none}.sbb-navigation-section__back{position:absolute;transform:translate(calc((100% + var(--sbb-spacing-fixed-1x)) * -1))}@media (min-width: 64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}@media (min-width: 64rem){.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;grid-gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media (min-width: 64rem){.sbb-navigation-section__content{opacity:0;transform:translateY(var(--sbb-spacing-fixed-3x));transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,transform}:host([data-state=opened]) .sbb-navigation-section__content{opacity:1;transform:translateY(0)}}@media (min-width: 80rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host([data-state=closing]) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{transform:var(--sbb-navigation-section-transform)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:var(--sbb-navigation-section-transform)}}`;
|
|
20
20
|
let ot = 0, kt = (() => {
|
|
21
21
|
var c, g, d, o;
|
|
22
22
|
let a = [G("sbb-navigation-section"), W({
|
|
23
23
|
slot: "navigation-section"
|
|
24
|
-
}), X()], n, s = [], r,
|
|
25
|
-
return o = class extends
|
|
24
|
+
}), X()], n, s = [], r, y = et(Z), w = [], k, E = [], x = [], L, C, S = [], A = [], N, z = [], B = [];
|
|
25
|
+
return o = class extends y {
|
|
26
26
|
constructor() {
|
|
27
27
|
super(...arguments);
|
|
28
28
|
_(this, c);
|
|
29
29
|
_(this, g);
|
|
30
30
|
_(this, d);
|
|
31
|
-
b(this, c, (l(this,
|
|
31
|
+
b(this, c, (l(this, w), l(this, E, ""))), this._trigger = (l(this, x), null), b(this, g, l(this, S, "")), b(this, d, (l(this, A), l(this, z, ""))), this._firstLevelNavigation = (l(this, B), null), this._triggerElement = null, this._language = new V(this), this._handleNavigationSectionClose = (t) => {
|
|
32
32
|
t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => this._isCloseElement(e)) && this.close();
|
|
33
33
|
};
|
|
34
34
|
}
|
|
@@ -139,7 +139,7 @@ let ot = 0, kt = (() => {
|
|
|
139
139
|
return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
|
|
140
140
|
}
|
|
141
141
|
_isZeroToLargeBreakpoint() {
|
|
142
|
-
return tt("zero", "large");
|
|
142
|
+
return tt("zero", "large") ?? !1;
|
|
143
143
|
}
|
|
144
144
|
// Closes the navigation on "Esc" key pressed.
|
|
145
145
|
_onKeydownEvent(t) {
|
|
@@ -210,12 +210,12 @@ let ot = 0, kt = (() => {
|
|
|
210
210
|
`;
|
|
211
211
|
}
|
|
212
212
|
}, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), r = o, (() => {
|
|
213
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
213
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
|
|
214
214
|
k = [f(), p({ attribute: "title-content", reflect: !0, converter: Y })], L = [p()], C = [f(), p({ attribute: "accessibility-label" })], N = [f(), p({ attribute: "accessibility-back-label" })], v(o, null, k, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, e) => {
|
|
215
215
|
i.titleContent = e;
|
|
216
216
|
} }, metadata: t }, E, x), v(o, null, L, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, e) => {
|
|
217
217
|
i.trigger = e;
|
|
218
|
-
} }, metadata: t }, null,
|
|
218
|
+
} }, metadata: t }, null, w), v(o, null, C, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, e) => {
|
|
219
219
|
i.accessibilityLabel = e;
|
|
220
220
|
} }, metadata: t }, S, A), v(o, null, N, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, e) => {
|
|
221
221
|
i.accessibilityBackLabel = e;
|
package/navigation/navigation.js
CHANGED
|
@@ -18,23 +18,23 @@ import { i18nCloseNavigation as V } from "../core/i18n.js";
|
|
|
18
18
|
import { SbbUpdateSchedulerMixin as G } from "../core/mixins.js";
|
|
19
19
|
import { isEventOnElement as m, removeAriaOverlayTriggerAttributes as K, setAriaOverlayTriggerAttributes as W } from "../core/overlay.js";
|
|
20
20
|
import "../button/transparent-button.js";
|
|
21
|
-
const J = H`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height:
|
|
21
|
+
const J = H`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-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-navigation__content::-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-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`, Q = {
|
|
22
22
|
subtree: !0,
|
|
23
23
|
attributeFilter: ["data-state"]
|
|
24
24
|
};
|
|
25
25
|
let Y = 0;
|
|
26
26
|
const Z = 150;
|
|
27
|
-
let
|
|
27
|
+
let pt = (() => {
|
|
28
28
|
var b, l, r;
|
|
29
29
|
let n = [B("sbb-navigation"), $({
|
|
30
30
|
role: "navigation"
|
|
31
|
-
})], e, o = [], s,
|
|
32
|
-
return r = class extends
|
|
31
|
+
})], e, o = [], s, u = G(R), p = [], _, f, w = [], k = [], y, C = [], E = [];
|
|
32
|
+
return r = class extends u {
|
|
33
33
|
constructor() {
|
|
34
34
|
super();
|
|
35
35
|
h(this, b);
|
|
36
36
|
h(this, l);
|
|
37
|
-
this._trigger = (c(this,
|
|
37
|
+
this._trigger = (c(this, p), null), v(this, b, c(this, w, "")), v(this, l, (c(this, k), c(this, C, null))), this._navigation = c(this, E), this._triggerElement = null, this._abort = new q(this), this._language = new M(this), this._inertController = new P(this), this._focusHandler = new F(), this._scrollHandler = new X(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new I(this, {
|
|
38
38
|
skipInitial: !0,
|
|
39
39
|
callback: () => this._onNavigationResize()
|
|
40
40
|
}), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
|
|
@@ -205,10 +205,10 @@ let ut = (() => {
|
|
|
205
205
|
`;
|
|
206
206
|
}
|
|
207
207
|
}, b = new WeakMap(), l = new WeakMap(), s = r, (() => {
|
|
208
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
208
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
|
|
209
209
|
_ = [A()], f = [U(), A({ attribute: "accessibility-close-label" })], y = [D()], g(r, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, a) => {
|
|
210
210
|
i.trigger = a;
|
|
211
|
-
} }, metadata: t }, null,
|
|
211
|
+
} }, metadata: t }, null, p), g(r, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
|
|
212
212
|
i.accessibilityCloseLabel = a;
|
|
213
213
|
} }, metadata: t }, w, k), g(r, null, y, { kind: "accessor", name: "_activeNavigationSection", static: !1, private: !1, access: { has: (i) => "_activeNavigationSection" in i, get: (i) => i._activeNavigationSection, set: (i, a) => {
|
|
214
214
|
i._activeNavigationSection = a;
|
|
@@ -216,5 +216,5 @@ let ut = (() => {
|
|
|
216
216
|
})(), r.styles = J, c(s, o), s;
|
|
217
217
|
})();
|
|
218
218
|
export {
|
|
219
|
-
|
|
219
|
+
pt as SbbNavigationElement
|
|
220
220
|
};
|
package/package.json
CHANGED
|
@@ -9,17 +9,13 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
|
|
|
9
9
|
static styles: CSSResultGroup;
|
|
10
10
|
static readonly events: Record<string, string>;
|
|
11
11
|
/** The available `pageSize` choices. */
|
|
12
|
-
|
|
13
|
-
get pageSizeOptions(): number[] | undefined;
|
|
14
|
-
private _pageSizeOptions?;
|
|
12
|
+
accessor pageSizeOptions: number[];
|
|
15
13
|
/**
|
|
16
14
|
* Position of the prev/next buttons: if `pageSizeOptions` is set,
|
|
17
15
|
* the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
|
|
18
16
|
*/
|
|
19
17
|
accessor pagerPosition: 'start' | 'end';
|
|
20
|
-
private _paginatorOptionsLabel;
|
|
21
18
|
private _markForFocus;
|
|
22
|
-
private _updateSelectAriaLabelledBy;
|
|
23
19
|
protected updated(changedProperties: PropertyValues<this>): void;
|
|
24
20
|
/**
|
|
25
21
|
* If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.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;;
|
|
1
|
+
{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.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;IAgBzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,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"}
|
package/paginator/paginator.js
CHANGED
|
@@ -1,61 +1,60 @@
|
|
|
1
|
-
var
|
|
1
|
+
var P = (t) => {
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __runInitializers as
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as A, property as
|
|
9
|
-
import { repeat as
|
|
10
|
-
import { sbbInputModalityDetector as
|
|
11
|
-
import { i18nItemsPerPage as
|
|
12
|
-
import { SbbPaginatorCommonElementMixin as
|
|
4
|
+
var k = (t, r, i) => r.has(t) || P("Cannot " + i);
|
|
5
|
+
var u = (t, r, i) => (k(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? P("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (k(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
|
|
6
|
+
import { __runInitializers as d, __esDecorate as h } from "tslib";
|
|
7
|
+
import { css as E, LitElement as j, html as b, nothing as S } from "lit";
|
|
8
|
+
import { customElement as A, property as $ } from "lit/decorators.js";
|
|
9
|
+
import { repeat as I } from "lit/directives/repeat.js";
|
|
10
|
+
import { sbbInputModalityDetector as F } from "../core/a11y.js";
|
|
11
|
+
import { i18nItemsPerPage as D, i18nPage as N } from "../core/i18n.js";
|
|
12
|
+
import { SbbPaginatorCommonElementMixin as T } from "./common.js";
|
|
13
13
|
import "../form-field.js";
|
|
14
14
|
import "../select.js";
|
|
15
15
|
import "../option.js";
|
|
16
16
|
import "../screen-reader-only.js";
|
|
17
|
-
const
|
|
18
|
-
let
|
|
19
|
-
var p,
|
|
20
|
-
let t = [A("sbb-paginator")], r, i = [],
|
|
21
|
-
return
|
|
17
|
+
const C = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
|
|
18
|
+
let Q = (() => {
|
|
19
|
+
var p, g, s;
|
|
20
|
+
let t = [A("sbb-paginator")], r, i = [], o, _ = T(j), v, f = [], x = [], y, z = [], w = [];
|
|
21
|
+
return s = class extends _ {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
m(this, p);
|
|
25
|
+
m(this, g);
|
|
26
|
+
c(this, p, d(this, f, [])), c(this, g, (d(this, x), d(this, z, "start"))), this._markForFocus = (d(this, w), null);
|
|
26
27
|
}
|
|
27
28
|
/** The available `pageSize` choices. */
|
|
28
|
-
set pageSizeOptions(a) {
|
|
29
|
-
this._pageSizeOptions = a, this._updateSelectAriaLabelledBy = !0;
|
|
30
|
-
}
|
|
31
29
|
get pageSizeOptions() {
|
|
32
|
-
return this
|
|
30
|
+
return u(this, p);
|
|
31
|
+
}
|
|
32
|
+
set pageSizeOptions(a) {
|
|
33
|
+
c(this, p, a);
|
|
33
34
|
}
|
|
34
35
|
/**
|
|
35
36
|
* Position of the prev/next buttons: if `pageSizeOptions` is set,
|
|
36
37
|
* the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
|
|
37
38
|
*/
|
|
38
39
|
get pagerPosition() {
|
|
39
|
-
return
|
|
40
|
+
return u(this, g);
|
|
40
41
|
}
|
|
41
42
|
set pagerPosition(a) {
|
|
42
|
-
|
|
43
|
+
c(this, g, a);
|
|
43
44
|
}
|
|
44
45
|
updated(a) {
|
|
45
|
-
if (super.updated(a), this._markForFocus &&
|
|
46
|
-
const
|
|
47
|
-
|
|
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;
|
|
48
49
|
}
|
|
49
|
-
const e = this.shadowRoot.querySelector("sbb-select");
|
|
50
|
-
e && this._updateSelectAriaLabelledBy && (e.setAttribute("aria-labelledby", this._paginatorOptionsLabel), this._updateSelectAriaLabelledBy = !1);
|
|
51
50
|
}
|
|
52
51
|
/**
|
|
53
52
|
* If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
|
|
54
53
|
* emit the `page` event and then update the `pageSize` value.
|
|
55
54
|
*/
|
|
56
55
|
_pageSizeChanged(a) {
|
|
57
|
-
const e = this.pageSize,
|
|
58
|
-
this.pageSize = a, e !== this.pageSize && this.emitPageEvent(
|
|
56
|
+
const e = this.pageSize, n = this.pageIndex;
|
|
57
|
+
this.pageSize = a, e !== this.pageSize && this.emitPageEvent(n);
|
|
59
58
|
}
|
|
60
59
|
/** Returns the displayed page elements. */
|
|
61
60
|
_getVisiblePages() {
|
|
@@ -69,10 +68,10 @@ let D = 0, J = (() => {
|
|
|
69
68
|
*/
|
|
70
69
|
_getVisiblePagesIndex() {
|
|
71
70
|
const a = this.numberOfPages(), e = this.pageIndex;
|
|
72
|
-
return a <=
|
|
71
|
+
return a <= l + 2 ? this._range(a) : e < l ? [...this._range(l + 1), "ellipsis", a - 1] : e >= a - l ? [
|
|
73
72
|
0,
|
|
74
73
|
"ellipsis",
|
|
75
|
-
...this._range(
|
|
74
|
+
...this._range(l + 1, a - 1 - l)
|
|
76
75
|
] : [
|
|
77
76
|
0,
|
|
78
77
|
"ellipsis",
|
|
@@ -85,20 +84,18 @@ let D = 0, J = (() => {
|
|
|
85
84
|
}
|
|
86
85
|
/** Creates an array of consecutive numbers given the length and the starting value. */
|
|
87
86
|
_range(a, e = 0) {
|
|
88
|
-
return Array.from({ length: a }, (
|
|
87
|
+
return Array.from({ length: a }, (n, O) => O + e);
|
|
89
88
|
}
|
|
90
89
|
_handleKeyUp(a) {
|
|
91
90
|
if (a.key !== " " && a.key !== "Enter")
|
|
92
91
|
return;
|
|
93
|
-
this._getVisiblePages().find((
|
|
92
|
+
this._getVisiblePages().find((n) => n === a.target) && (this._markForFocus = this.pageIndex);
|
|
94
93
|
}
|
|
95
94
|
_renderItemPerPageTemplate() {
|
|
96
95
|
var a;
|
|
97
96
|
return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
|
|
98
97
|
<div class="sbb-paginator__page-size-options">
|
|
99
|
-
<label
|
|
100
|
-
${L[this.language.current]}
|
|
101
|
-
</label>
|
|
98
|
+
<label for="select">${D[this.language.current]}</label>
|
|
102
99
|
<sbb-form-field
|
|
103
100
|
borderless
|
|
104
101
|
width="collapse"
|
|
@@ -106,20 +103,21 @@ let D = 0, J = (() => {
|
|
|
106
103
|
size=${this.size}
|
|
107
104
|
>
|
|
108
105
|
<sbb-select
|
|
106
|
+
id="select"
|
|
109
107
|
?disabled=${this.disabled}
|
|
110
108
|
value=${((a = this.pageSizeOptions) == null ? void 0 : a.find((e) => e === this.pageSize)) ?? this.pageSizeOptions[0]}
|
|
111
109
|
@change=${(e) => this._pageSizeChanged(+e.target.value)}
|
|
112
110
|
>
|
|
113
|
-
${
|
|
111
|
+
${I(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
|
|
114
112
|
</sbb-select>
|
|
115
113
|
</sbb-form-field>
|
|
116
114
|
</div>
|
|
117
|
-
` :
|
|
115
|
+
` : S;
|
|
118
116
|
}
|
|
119
117
|
_renderPageNumbers() {
|
|
120
118
|
return b`
|
|
121
119
|
<ul class="sbb-paginator__pages">
|
|
122
|
-
${
|
|
120
|
+
${I(this._getVisiblePagesIndex(), (a) => a === "ellipsis" ? b`
|
|
123
121
|
<li class="sbb-paginator__page--ellipsis">
|
|
124
122
|
<span class="sbb-paginator__page--ellipsis-item">…</span>
|
|
125
123
|
</li>
|
|
@@ -130,8 +128,8 @@ let D = 0, J = (() => {
|
|
|
130
128
|
?disabled=${this.disabled}
|
|
131
129
|
class="sbb-paginator__page--number-item"
|
|
132
130
|
data-index=${a}
|
|
133
|
-
aria-label="${
|
|
134
|
-
aria-current=${this.pageIndex === a ? "true" :
|
|
131
|
+
aria-label="${N[this.language.current]} ${a + 1}"
|
|
132
|
+
aria-current=${this.pageIndex === a ? "true" : S}
|
|
135
133
|
@click=${() => this.pageIndexChanged(a)}
|
|
136
134
|
@keyup=${this._handleKeyUp}
|
|
137
135
|
>
|
|
@@ -155,17 +153,17 @@ let D = 0, J = (() => {
|
|
|
155
153
|
</div>
|
|
156
154
|
`;
|
|
157
155
|
}
|
|
158
|
-
}, p = new WeakMap(),
|
|
159
|
-
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
160
|
-
|
|
161
|
-
e.pageSizeOptions =
|
|
162
|
-
} }, metadata: a },
|
|
163
|
-
e.pagerPosition =
|
|
164
|
-
} }, metadata: a },
|
|
165
|
-
})(),
|
|
156
|
+
}, p = new WeakMap(), g = new WeakMap(), o = s, (() => {
|
|
157
|
+
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
|
|
158
|
+
v = [$({ attribute: "page-size-options", type: Array })], y = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, v, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (e) => "pageSizeOptions" in e, get: (e) => e.pageSizeOptions, set: (e, n) => {
|
|
159
|
+
e.pageSizeOptions = n;
|
|
160
|
+
} }, metadata: a }, f, x), h(s, null, y, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, n) => {
|
|
161
|
+
e.pagerPosition = n;
|
|
162
|
+
} }, 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
|
+
})(), s.styles = C, s.events = {
|
|
166
164
|
page: "page"
|
|
167
|
-
},
|
|
165
|
+
}, d(o, i), o;
|
|
168
166
|
})();
|
|
169
167
|
export {
|
|
170
|
-
|
|
168
|
+
Q as SbbPaginatorElement
|
|
171
169
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAItE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/elements/popover/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAW1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAItE,OAAO,EAA4B,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAahF,OAAO,kCAAkC,CAAC;;AAU1C;;;;;;;;;;;;GAYG;AACH,qBAEM,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,CAGvE;IAEF,kDAAkD;IAClD,UAAmB,QAAQ,EAAE,YAAY,CAAC;QAAE,WAAW,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC,CAGtE;IAEF,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAE7C,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,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAmB;IAC/C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;IAEpD,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAyBnB,0BAA0B;IACnB,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAgBxC,OAAO,CAAC,eAAe;IAWP,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,UAAU;IAuDlB,OAAO,CAAC,mBAAmB;IAwB3B,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;IA8B9B,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,mBAAmB;cA6BR,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|