@sbb-esta/lyne-elements 3.13.3 → 3.13.6
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/autocomplete/autocomplete-base-element.js +9 -8
- package/autocomplete/autocomplete.component.d.ts.map +1 -1
- package/autocomplete/autocomplete.component.js +8 -9
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +10 -11
- package/calendar/calendar.component.d.ts +2 -0
- package/calendar/calendar.component.d.ts.map +1 -1
- package/calendar/calendar.component.js +291 -287
- package/custom-elements.json +16 -6
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete-base-element.js +12 -10
- package/development/autocomplete/autocomplete.component.d.ts.map +1 -1
- package/development/autocomplete/autocomplete.component.js +13 -15
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +17 -19
- 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 +39 -32
- package/development/notification/notification.component.js +9 -11
- package/development/option/option/option-base-element.js +2 -2
- package/development/paginator/paginator/paginator.component.d.ts +1 -1
- package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/development/paginator/paginator/paginator.component.js +8 -14
- package/notification/notification.component.js +8 -8
- package/option/option/option-base-element.js +1 -1
- package/package.json +1 -1
- package/paginator/paginator/paginator.component.d.ts +1 -1
- package/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/paginator/paginator/paginator.component.js +16 -19
|
@@ -4,28 +4,28 @@ var O = (t) => {
|
|
|
4
4
|
var L = (t, i, r) => i.has(t) || O("Cannot " + r);
|
|
5
5
|
var u = (t, i, r) => (L(t, i, "read from private field"), r ? r.call(t) : i.get(t)), h = (t, i, r) => i.has(t) ? O("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), p = (t, i, r, o) => (L(t, i, "write to private field"), o ? o.call(t, r) : i.set(t, r), r);
|
|
6
6
|
import { __runInitializers as g, __esDecorate as v } from "tslib";
|
|
7
|
-
import { css as F, LitElement as
|
|
8
|
-
import { customElement as
|
|
7
|
+
import { css as F, LitElement as N, nothing as E, html as b } from "lit";
|
|
8
|
+
import { customElement as T, property as _ } from "lit/decorators.js";
|
|
9
9
|
import { repeat as j } from "lit/directives/repeat.js";
|
|
10
|
-
import { sbbInputModalityDetector as
|
|
10
|
+
import { sbbInputModalityDetector as D } from "../../core/a11y.js";
|
|
11
11
|
import { forceType as M } from "../../core/decorators.js";
|
|
12
|
-
import { i18nItemsPerPage as
|
|
13
|
-
import { SbbPaginatorCommonElementMixin as
|
|
12
|
+
import { i18nItemsPerPage as C, i18nPage as V } from "../../core/i18n.js";
|
|
13
|
+
import { SbbPaginatorCommonElementMixin as B } from "../common.js";
|
|
14
14
|
import "../../form-field.js";
|
|
15
15
|
import "../../select.js";
|
|
16
16
|
import "../../option.js";
|
|
17
17
|
import "../../screen-reader-only.js";
|
|
18
|
-
const
|
|
18
|
+
const G = F`*,: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-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--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: var(--sbb-cursor-pointer);--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, 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-5);--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__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);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);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.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:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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-3);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-border-color-2)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-3-negative);--sbb-paginator-page-border-color: var(--sbb-border-color-2-negative)}@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-5);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-border-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-cursor: var(--sbb-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-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}@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-background-color-3);--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-background-color-3-negative)}}@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-3);--sbb-paginator-page-background-color: var(--sbb-background-color-4);--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-3-negative);--sbb-paginator-page-background-color: var(--sbb-background-color-4-negative)}@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-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, m = 3;
|
|
19
19
|
let ie = (() => {
|
|
20
20
|
var l, c, d, s;
|
|
21
|
-
let t = [
|
|
21
|
+
let t = [T("sbb-paginator")], i, r = [], o, f = B(N), y, x = [], P = [], z, w = [], k = [], I, S = [], $ = [];
|
|
22
22
|
return s = class extends f {
|
|
23
23
|
constructor() {
|
|
24
24
|
super(...arguments);
|
|
25
25
|
h(this, l);
|
|
26
26
|
h(this, c);
|
|
27
27
|
h(this, d);
|
|
28
|
-
p(this, l, g(this, x, [])), p(this, c, (g(this, P), g(this, w, "start"))), p(this, d, (g(this, k), g(this, S, ""))), this._markForFocus = (g(this, $),
|
|
28
|
+
p(this, l, g(this, x, [])), p(this, c, (g(this, P), g(this, w, "start"))), p(this, d, (g(this, k), g(this, S, ""))), this._markForFocus = (g(this, $), !1);
|
|
29
29
|
}
|
|
30
30
|
/** The available `pageSize` choices. */
|
|
31
31
|
get pageSizeOptions() {
|
|
@@ -55,9 +55,9 @@ let ie = (() => {
|
|
|
55
55
|
p(this, d, e);
|
|
56
56
|
}
|
|
57
57
|
updated(e) {
|
|
58
|
-
if (super.updated(e), this._markForFocus
|
|
58
|
+
if (super.updated(e), this._markForFocus) {
|
|
59
59
|
const a = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
|
|
60
|
-
a && a.focus(), this._markForFocus =
|
|
60
|
+
a && a.focus(), this._markForFocus = !1;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
/** Returns the displayed page elements. */
|
|
@@ -90,16 +90,14 @@ let ie = (() => {
|
|
|
90
90
|
_range(e, a = 0) {
|
|
91
91
|
return Array.from({ length: e }, (n, A) => A + a);
|
|
92
92
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
return;
|
|
96
|
-
this._getVisiblePages().find((n) => n === e.target) && (this._markForFocus = this.pageIndex);
|
|
93
|
+
_onPageNumberClick(e) {
|
|
94
|
+
this.selectPage(e), this._markForFocus = D.mostRecentModality === "keyboard";
|
|
97
95
|
}
|
|
98
96
|
_renderItemPerPageTemplate() {
|
|
99
97
|
return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
|
|
100
98
|
<div class="sbb-paginator__page-size-options">
|
|
101
99
|
<label for="select"
|
|
102
|
-
>${this.accessibilityItemsPerPageLabel ? this.accessibilityItemsPerPageLabel :
|
|
100
|
+
>${this.accessibilityItemsPerPageLabel ? this.accessibilityItemsPerPageLabel : C[this.language.current]}</label
|
|
103
101
|
>
|
|
104
102
|
<sbb-form-field
|
|
105
103
|
borderless
|
|
@@ -133,10 +131,9 @@ let ie = (() => {
|
|
|
133
131
|
?disabled=${this.disabled}
|
|
134
132
|
class="sbb-paginator__page--number-item"
|
|
135
133
|
data-index=${e}
|
|
136
|
-
aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel :
|
|
134
|
+
aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : V[this.language.current]} ${e + 1}"
|
|
137
135
|
aria-current=${this.pageIndex === e ? "true" : E}
|
|
138
|
-
@click=${() => this.
|
|
139
|
-
@keyup=${this._handleKeyUp}
|
|
136
|
+
@click=${() => this._onPageNumberClick(e)}
|
|
140
137
|
>
|
|
141
138
|
<span class="sbb-paginator__page--number-item-label">${e + 1}</span>
|
|
142
139
|
</button>
|
|
@@ -167,7 +164,7 @@ let ie = (() => {
|
|
|
167
164
|
} }, metadata: e }, w, k), v(s, null, I, { kind: "accessor", name: "accessibilityItemsPerPageLabel", static: !1, private: !1, access: { has: (a) => "accessibilityItemsPerPageLabel" in a, get: (a) => a.accessibilityItemsPerPageLabel, set: (a, n) => {
|
|
168
165
|
a.accessibilityItemsPerPageLabel = n;
|
|
169
166
|
} }, metadata: e }, S, $), v(null, i = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, r), o = i.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
170
|
-
})(), s.styles =
|
|
167
|
+
})(), s.styles = G, s.events = {
|
|
171
168
|
page: "page"
|
|
172
169
|
}, g(o, r), o;
|
|
173
170
|
})();
|