@sbb-esta/lyne-elements 3.3.2 → 3.4.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/core/i18n/i18n.d.ts +5 -0
- package/core/i18n/i18n.d.ts.map +1 -1
- package/core/i18n/i18n.js +108 -84
- package/core/i18n.js +84 -80
- package/core/mixins/element-internals-mixin.js +6 -6
- package/core/mixins/form-associated-input-mixin.d.ts +1 -0
- package/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-input-mixin.js +2 -2
- package/core/styles/core/mediaqueries.scss +1 -1
- package/core/styles/core.scss +34 -1
- package/core/styles/mixins/typo.scss +88 -41
- package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +530 -0
- package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +1123 -0
- package/core.css +30 -0
- package/custom-elements.json +1176 -471
- package/date-input/date-input.component.d.ts +5 -4
- package/date-input/date-input.component.d.ts.map +1 -1
- package/date-input/date-input.component.js +19 -21
- package/development/core/i18n/i18n.d.ts +5 -0
- package/development/core/i18n/i18n.d.ts.map +1 -1
- package/development/core/i18n/i18n.js +38 -10
- package/development/core/i18n.js +5 -1
- package/development/core/mixins/element-internals-mixin.js +3 -3
- package/development/core/mixins/form-associated-input-mixin.d.ts +1 -0
- package/development/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-input-mixin.js +3 -2
- package/development/date-input/date-input.component.d.ts +5 -4
- package/development/date-input/date-input.component.d.ts.map +1 -1
- package/development/date-input/date-input.component.js +5 -8
- package/development/dialog/dialog-title/dialog-title.component.js +2 -6
- package/development/file-selector/common/file-selector-common.d.ts +2 -1
- package/development/file-selector/common/file-selector-common.d.ts.map +1 -1
- package/development/file-selector/common/file-selector-common.js +64 -19
- package/development/file-selector/common.js +1 -1
- package/development/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
- package/development/file-selector/file-selector/file-selector.component.js +12 -17
- package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
- package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
- package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +32 -76
- package/development/{file-selector-common-csww18o8.js → file-selector-common-BxXdRZxt.js} +3 -3
- package/development/file-selector.js +1 -1
- package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
- package/development/form-field/form-field/form-field.component.js +4 -4
- package/development/navigation/common/navigation-action-common.js +5 -8
- package/development/navigation/navigation/navigation.component.js +21 -4
- package/development/navigation/navigation-marker/navigation-marker.component.js +5 -8
- package/development/navigation/navigation-section/navigation-section.component.js +6 -19
- package/development/paginator/common/paginator-common.d.ts +3 -0
- package/development/paginator/common/paginator-common.d.ts.map +1 -1
- package/development/paginator/common/paginator-common.js +68 -10
- package/development/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
- package/development/paginator/compact-paginator/compact-paginator.component.js +8 -3
- package/development/paginator/paginator/paginator.component.d.ts +5 -0
- package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/development/paginator/paginator/paginator.component.js +28 -6
- package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
- package/development/tabs/tab-group/tab-group.component.js +3 -4
- package/development/time-input/time-input.component.d.ts +5 -4
- package/development/time-input/time-input.component.d.ts.map +1 -1
- package/development/time-input/time-input.component.js +5 -8
- package/development/title/title-base.js +14 -67
- package/development/title/title.component.js +17 -14
- package/development/toast/toast.component.js +6 -9
- package/development/train/train-wagon/train-wagon.component.js +6 -9
- package/dialog/dialog-title/dialog-title.component.js +1 -1
- package/file-selector/common/file-selector-common.d.ts +2 -1
- package/file-selector/common/file-selector-common.d.ts.map +1 -1
- package/file-selector/common/file-selector-common.js +88 -63
- package/file-selector/common.js +1 -1
- package/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
- package/file-selector/file-selector/file-selector.component.js +26 -31
- package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
- package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
- package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +50 -74
- package/file-selector-common-Cn6U8goV.js +5 -0
- package/file-selector.js +1 -1
- package/form-field/form-field/form-field.component.d.ts.map +1 -1
- package/form-field/form-field/form-field.component.js +3 -3
- package/navigation/common/navigation-action-common.js +8 -8
- package/navigation/navigation/navigation.component.js +1 -1
- package/navigation/navigation-marker/navigation-marker.component.js +1 -1
- package/navigation/navigation-section/navigation-section.component.js +14 -14
- package/package.json +1 -1
- package/paginator/common/paginator-common.d.ts +3 -0
- package/paginator/common/paginator-common.d.ts.map +1 -1
- package/paginator/common/paginator-common.js +103 -63
- package/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
- package/paginator/compact-paginator/compact-paginator.component.js +13 -8
- package/paginator/paginator/paginator.component.d.ts +5 -0
- package/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/paginator/paginator/paginator.component.js +77 -61
- package/sidebar/sidebar-title/sidebar-title.component.js +14 -14
- package/standard-theme.css +30 -0
- package/tabs/tab-group/tab-group.component.js +7 -7
- package/time-input/time-input.component.d.ts +5 -4
- package/time-input/time-input.component.d.ts.map +1 -1
- package/time-input/time-input.component.js +21 -22
- package/title/title-base.js +33 -33
- package/title/title.component.js +9 -9
- package/toast/toast.component.js +1 -1
- package/train/train-wagon/train-wagon.component.js +6 -6
- package/file-selector-common-Dw5d8vA4.js +0 -5
|
@@ -13,6 +13,11 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
|
|
|
13
13
|
* the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
|
|
14
14
|
*/
|
|
15
15
|
accessor pagerPosition: 'start' | 'end';
|
|
16
|
+
/**
|
|
17
|
+
* Accessibility label for the items per page. Defaults to `Items per page.`.
|
|
18
|
+
* Can be set for cases like a carousel, where `slide` or `image` fits better.
|
|
19
|
+
*/
|
|
20
|
+
accessor accessibilityItemsPerPageLabel: string;
|
|
16
21
|
private _markForFocus;
|
|
17
22
|
protected updated(changedProperties: PropertyValues<this>): void;
|
|
18
23
|
/** Returns the displayed page elements. */
|
|
@@ -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;
|
|
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;AAYb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;GAEG;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;;;OAGG;IACH,SAEgB,8BAA8B,EAAE,MAAM,CAAM;IAE5D,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;IAkClC,OAAO,CAAC,kBAAkB;cAmCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
|
|
@@ -1,51 +1,63 @@
|
|
|
1
|
-
var
|
|
1
|
+
var O = (t) => {
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var u = (t,
|
|
6
|
-
import { __runInitializers as
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as
|
|
9
|
-
import { repeat as
|
|
10
|
-
import { sbbInputModalityDetector as
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
4
|
+
var L = (t, i, r) => i.has(t) || O("Cannot " + r);
|
|
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
|
+
import { __runInitializers as g, __esDecorate as _ } from "tslib";
|
|
7
|
+
import { css as F, LitElement as T, nothing as E, html as b } from "lit";
|
|
8
|
+
import { customElement as D, property as f } from "lit/decorators.js";
|
|
9
|
+
import { repeat as j } from "lit/directives/repeat.js";
|
|
10
|
+
import { sbbInputModalityDetector as N } from "../../core/a11y.js";
|
|
11
|
+
import { forceType as M } from "../../core/decorators.js";
|
|
12
|
+
import { i18nItemsPerPage as V, i18nPage as B } from "../../core/i18n.js";
|
|
13
|
+
import { SbbPaginatorCommonElementMixin as G } from "../common.js";
|
|
13
14
|
import "../../form-field.js";
|
|
14
15
|
import "../../select.js";
|
|
15
16
|
import "../../option.js";
|
|
16
17
|
import "../../screen-reader-only.js";
|
|
17
|
-
const
|
|
18
|
-
let
|
|
19
|
-
var
|
|
20
|
-
let t = [
|
|
18
|
+
const H = 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-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-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-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__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-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}`, m = 3;
|
|
19
|
+
let ie = (() => {
|
|
20
|
+
var l, c, d, s;
|
|
21
|
+
let t = [D("sbb-paginator")], i, r = [], o, v = G(T), y, x = [], P = [], z, w = [], k = [], I, S = [], $ = [];
|
|
21
22
|
return s = class extends v {
|
|
22
23
|
constructor() {
|
|
23
24
|
super(...arguments);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
h(this, l);
|
|
26
|
+
h(this, c);
|
|
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, $), null);
|
|
27
29
|
}
|
|
28
30
|
/** The available `pageSize` choices. */
|
|
29
31
|
get pageSizeOptions() {
|
|
30
|
-
return u(this,
|
|
32
|
+
return u(this, l);
|
|
31
33
|
}
|
|
32
|
-
set pageSizeOptions(
|
|
33
|
-
|
|
34
|
+
set pageSizeOptions(e) {
|
|
35
|
+
p(this, l, e);
|
|
34
36
|
}
|
|
35
37
|
/**
|
|
36
38
|
* Position of the prev/next buttons: if `pageSizeOptions` is set,
|
|
37
39
|
* the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
|
|
38
40
|
*/
|
|
39
41
|
get pagerPosition() {
|
|
40
|
-
return u(this,
|
|
42
|
+
return u(this, c);
|
|
41
43
|
}
|
|
42
|
-
set pagerPosition(
|
|
43
|
-
|
|
44
|
+
set pagerPosition(e) {
|
|
45
|
+
p(this, c, e);
|
|
44
46
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
/**
|
|
48
|
+
* Accessibility label for the items per page. Defaults to `Items per page.`.
|
|
49
|
+
* Can be set for cases like a carousel, where `slide` or `image` fits better.
|
|
50
|
+
*/
|
|
51
|
+
get accessibilityItemsPerPageLabel() {
|
|
52
|
+
return u(this, d);
|
|
53
|
+
}
|
|
54
|
+
set accessibilityItemsPerPageLabel(e) {
|
|
55
|
+
p(this, d, e);
|
|
56
|
+
}
|
|
57
|
+
updated(e) {
|
|
58
|
+
if (super.updated(e), this._markForFocus && N.mostRecentModality === "keyboard") {
|
|
59
|
+
const a = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
|
|
60
|
+
a && a.focus(), this._markForFocus = null;
|
|
49
61
|
}
|
|
50
62
|
}
|
|
51
63
|
/** Returns the displayed page elements. */
|
|
@@ -59,34 +71,36 @@ let Q = (() => {
|
|
|
59
71
|
* - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
|
|
60
72
|
*/
|
|
61
73
|
_getVisiblePagesIndex() {
|
|
62
|
-
const
|
|
63
|
-
return
|
|
74
|
+
const e = this.numberOfPages(), a = this.pageIndex;
|
|
75
|
+
return e <= m + 2 ? this._range(e) : a < m ? [...this._range(m + 1), "ellipsis", e - 1] : a >= e - m ? [
|
|
64
76
|
0,
|
|
65
77
|
"ellipsis",
|
|
66
|
-
...this._range(
|
|
78
|
+
...this._range(m + 1, e - 1 - m)
|
|
67
79
|
] : [
|
|
68
80
|
0,
|
|
69
81
|
"ellipsis",
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
82
|
+
a - 1,
|
|
83
|
+
a,
|
|
84
|
+
a + 1,
|
|
73
85
|
"ellipsis",
|
|
74
|
-
|
|
86
|
+
e - 1
|
|
75
87
|
];
|
|
76
88
|
}
|
|
77
89
|
/** Creates an array of consecutive numbers given the length and the starting value. */
|
|
78
|
-
_range(
|
|
79
|
-
return Array.from({ length:
|
|
90
|
+
_range(e, a = 0) {
|
|
91
|
+
return Array.from({ length: e }, (n, A) => A + a);
|
|
80
92
|
}
|
|
81
|
-
_handleKeyUp(
|
|
82
|
-
if (
|
|
93
|
+
_handleKeyUp(e) {
|
|
94
|
+
if (e.key !== " " && e.key !== "Enter")
|
|
83
95
|
return;
|
|
84
|
-
this._getVisiblePages().find((n) => n ===
|
|
96
|
+
this._getVisiblePages().find((n) => n === e.target) && (this._markForFocus = this.pageIndex);
|
|
85
97
|
}
|
|
86
98
|
_renderItemPerPageTemplate() {
|
|
87
99
|
return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
|
|
88
100
|
<div class="sbb-paginator__page-size-options">
|
|
89
|
-
<label for="select"
|
|
101
|
+
<label for="select"
|
|
102
|
+
>${this.accessibilityItemsPerPageLabel ? this.accessibilityItemsPerPageLabel : V[this.language.current]}</label
|
|
103
|
+
>
|
|
90
104
|
<sbb-form-field
|
|
91
105
|
borderless
|
|
92
106
|
width="collapse"
|
|
@@ -96,35 +110,35 @@ let Q = (() => {
|
|
|
96
110
|
<sbb-select
|
|
97
111
|
id="select"
|
|
98
112
|
?disabled=${this.disabled}
|
|
99
|
-
value=${this.pageSizeOptions?.find((
|
|
100
|
-
@change=${(
|
|
113
|
+
value=${this.pageSizeOptions?.find((e) => e === this.pageSize) ?? this.pageSizeOptions[0]}
|
|
114
|
+
@change=${(e) => this.pageSize = +e.target.value}
|
|
101
115
|
>
|
|
102
|
-
${
|
|
116
|
+
${j(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
|
|
103
117
|
</sbb-select>
|
|
104
118
|
</sbb-form-field>
|
|
105
119
|
</div>
|
|
106
|
-
` :
|
|
120
|
+
` : E;
|
|
107
121
|
}
|
|
108
122
|
_renderPageNumbers() {
|
|
109
123
|
return b`
|
|
110
124
|
<ul class="sbb-paginator__pages">
|
|
111
|
-
${
|
|
125
|
+
${j(this._getVisiblePagesIndex(), (e) => e === "ellipsis" ? b`
|
|
112
126
|
<li class="sbb-paginator__page--ellipsis">
|
|
113
127
|
<span class="sbb-paginator__page--ellipsis-item">…</span>
|
|
114
128
|
</li>
|
|
115
129
|
` : b`
|
|
116
130
|
<li class="sbb-paginator__page--number">
|
|
117
131
|
<button
|
|
118
|
-
?data-selected=${this.pageIndex ===
|
|
132
|
+
?data-selected=${this.pageIndex === e}
|
|
119
133
|
?disabled=${this.disabled}
|
|
120
134
|
class="sbb-paginator__page--number-item"
|
|
121
|
-
data-index=${
|
|
122
|
-
aria-label="${
|
|
123
|
-
aria-current=${this.pageIndex ===
|
|
124
|
-
@click=${() => this.pageIndex =
|
|
135
|
+
data-index=${e}
|
|
136
|
+
aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : B[this.language.current]} ${e + 1}"
|
|
137
|
+
aria-current=${this.pageIndex === e ? "true" : E}
|
|
138
|
+
@click=${() => this.pageIndex = e}
|
|
125
139
|
@keyup=${this._handleKeyUp}
|
|
126
140
|
>
|
|
127
|
-
<span class="sbb-paginator__page--number-item-label">${
|
|
141
|
+
<span class="sbb-paginator__page--number-item-label">${e + 1}</span>
|
|
128
142
|
</button>
|
|
129
143
|
</li>
|
|
130
144
|
`)}
|
|
@@ -144,17 +158,19 @@ let Q = (() => {
|
|
|
144
158
|
</div>
|
|
145
159
|
`;
|
|
146
160
|
}
|
|
147
|
-
},
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
} }, metadata:
|
|
152
|
-
|
|
153
|
-
} }, metadata:
|
|
154
|
-
|
|
161
|
+
}, l = new WeakMap(), c = new WeakMap(), d = new WeakMap(), o = s, (() => {
|
|
162
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
|
|
163
|
+
y = [f({ attribute: "page-size-options", type: Array })], z = [f({ attribute: "pager-position", reflect: !0 })], I = [M(), f({ attribute: "accessibility-items-per-page-label" })], _(s, null, y, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (a) => "pageSizeOptions" in a, get: (a) => a.pageSizeOptions, set: (a, n) => {
|
|
164
|
+
a.pageSizeOptions = n;
|
|
165
|
+
} }, metadata: e }, x, P), _(s, null, z, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (a) => "pagerPosition" in a, get: (a) => a.pagerPosition, set: (a, n) => {
|
|
166
|
+
a.pagerPosition = n;
|
|
167
|
+
} }, metadata: e }, w, k), _(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
|
+
a.accessibilityItemsPerPageLabel = n;
|
|
169
|
+
} }, metadata: e }, S, $), _(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 = H, s.events = {
|
|
155
171
|
page: "page"
|
|
156
|
-
},
|
|
172
|
+
}, g(o, r), o;
|
|
157
173
|
})();
|
|
158
174
|
export {
|
|
159
|
-
|
|
175
|
+
ie as SbbPaginatorElement
|
|
160
176
|
};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
var _ = (e) => {
|
|
2
2
|
throw TypeError(e);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
7
|
-
import { customElement as g, property as
|
|
8
|
-
import { SbbTitleBase as
|
|
9
|
-
import { css as
|
|
10
|
-
const x =
|
|
4
|
+
var d = (e, t, l) => t.has(e) || _("Cannot " + l);
|
|
5
|
+
var h = (e, t, l) => (d(e, t, "read from private field"), l ? l.call(e) : t.get(e)), v = (e, t, l) => t.has(e) ? _("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), p = (e, t, l, s) => (d(e, t, "write to private field"), s ? s.call(e, l) : t.set(e, l), l);
|
|
6
|
+
import { __esDecorate as y, __runInitializers as o } from "tslib";
|
|
7
|
+
import { customElement as g, property as k } from "lit/decorators.js";
|
|
8
|
+
import { SbbTitleBase as f } from "../../title.js";
|
|
9
|
+
import { css as z } from "lit";
|
|
10
|
+
const x = z`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - 1em * var(--sbb-typo-line-height-titles)));min-height:var(--sbb-sidebar__close-button-size)}`;
|
|
11
11
|
let C = (() => {
|
|
12
12
|
var r, a;
|
|
13
|
-
let e = [g("sbb-sidebar-title")], t, l = [], s, n =
|
|
13
|
+
let e = [g("sbb-sidebar-title")], t, l = [], s, n = f, b, m = [], u = [];
|
|
14
14
|
return a = class extends n {
|
|
15
15
|
constructor() {
|
|
16
16
|
super();
|
|
17
|
-
|
|
18
|
-
o(this,
|
|
17
|
+
v(this, r, o(this, m, "2"));
|
|
18
|
+
o(this, u), this.visualLevel ??= "5";
|
|
19
19
|
}
|
|
20
20
|
/** Title level */
|
|
21
21
|
get level() {
|
|
22
|
-
return
|
|
22
|
+
return h(this, r);
|
|
23
23
|
}
|
|
24
24
|
set level(i) {
|
|
25
25
|
p(this, r, i);
|
|
@@ -29,10 +29,10 @@ let C = (() => {
|
|
|
29
29
|
}
|
|
30
30
|
}, r = new WeakMap(), s = a, (() => {
|
|
31
31
|
const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
|
|
32
|
-
b = [
|
|
32
|
+
b = [k({ reflect: !0 })], y(a, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (c) => "level" in c, get: (c) => c.level, set: (c, S) => {
|
|
33
33
|
c.level = S;
|
|
34
|
-
} }, metadata: i },
|
|
35
|
-
})(), a.styles = [
|
|
34
|
+
} }, metadata: i }, m, u), y(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: i }, null, l), s = t.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
|
|
35
|
+
})(), a.styles = [f.styles, x], o(s, l), s;
|
|
36
36
|
})();
|
|
37
37
|
export {
|
|
38
38
|
C as SbbSidebarTitleElement
|
package/standard-theme.css
CHANGED
|
@@ -1228,8 +1228,38 @@ summary {
|
|
|
1228
1228
|
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1229
1229
|
--sbb-time-input-max-width: 3.625rem;
|
|
1230
1230
|
--sbb-overlay-default-z-index: 1000;
|
|
1231
|
+
--sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
|
|
1232
|
+
--sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
|
|
1233
|
+
--sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
|
|
1234
|
+
--sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
|
|
1235
|
+
--sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
|
|
1236
|
+
--sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
|
|
1237
|
+
--sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
|
|
1238
|
+
--sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
|
|
1239
|
+
--sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
|
|
1240
|
+
--sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
|
|
1241
|
+
--sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
|
|
1242
|
+
--sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
|
|
1243
|
+
--sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
|
|
1244
|
+
--sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
|
|
1231
1245
|
--sbb-border-radius-infinity: 100000em;
|
|
1232
1246
|
}
|
|
1247
|
+
:root.sbb-lean {
|
|
1248
|
+
--sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
|
|
1249
|
+
--sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
|
|
1250
|
+
--sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
|
|
1251
|
+
--sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
|
|
1252
|
+
--sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
|
|
1253
|
+
--sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
|
|
1254
|
+
--sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
|
|
1255
|
+
--sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
|
|
1256
|
+
--sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
|
|
1257
|
+
--sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
|
|
1258
|
+
--sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
|
|
1259
|
+
--sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
|
|
1260
|
+
--sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
|
|
1261
|
+
--sbb-title-margin-block-end-level-6: 0;
|
|
1262
|
+
}
|
|
1233
1263
|
:root:has(sbb-header[size=s]) {
|
|
1234
1264
|
--sbb-header-height: 3.25rem;
|
|
1235
1265
|
}
|
|
@@ -2,8 +2,8 @@ var g = (s) => {
|
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
4
|
var x = (s, a, n) => a.has(s) || g("Cannot " + n);
|
|
5
|
-
var A = (s, a, n) => (x(s, a, "read from private field"), n ? n.call(s) : a.get(s)), T = (s, a, n) => a.has(s) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n),
|
|
6
|
-
import { __esDecorate as u, __runInitializers as
|
|
5
|
+
var A = (s, a, n) => (x(s, a, "read from private field"), n ? n.call(s) : a.get(s)), T = (s, a, n) => a.has(s) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), d = (s, a, n, r) => (x(s, a, "write to private field"), r ? r.call(s, n) : a.set(s, n), n);
|
|
6
|
+
import { __esDecorate as u, __runInitializers as b } from "tslib";
|
|
7
7
|
import { MutationController as z } from "@lit-labs/observers/mutation-controller.js";
|
|
8
8
|
import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
|
|
9
9
|
import { css as E, LitElement as G, html as C } from "lit";
|
|
@@ -15,7 +15,7 @@ import { isLean as D } from "../../core/dom.js";
|
|
|
15
15
|
import { throttle as N } from "../../core/eventing.js";
|
|
16
16
|
import { SbbHydrationMixin as K } from "../../core/mixins.js";
|
|
17
17
|
import { SbbTabElement as M } from "../tab.js";
|
|
18
|
-
const P = E`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(
|
|
18
|
+
const P = E`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(sbb-tab){visibility:hidden;opacity:0;height:0;overflow:hidden}.tab-content ::slotted(sbb-tab[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted(sbb-tab:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, j = {
|
|
19
19
|
attributeFilter: ["active", "disabled"]
|
|
20
20
|
};
|
|
21
21
|
let H = 0, it = (() => {
|
|
@@ -25,7 +25,7 @@ let H = 0, it = (() => {
|
|
|
25
25
|
constructor() {
|
|
26
26
|
super();
|
|
27
27
|
T(this, c);
|
|
28
|
-
this._tabs = (
|
|
28
|
+
this._tabs = (b(this, f), []), this._tabAttributeObserver = new z(this, {
|
|
29
29
|
target: null,
|
|
30
30
|
config: j,
|
|
31
31
|
callback: (t) => this._onTabAttributesChange(t)
|
|
@@ -37,7 +37,7 @@ let H = 0, it = (() => {
|
|
|
37
37
|
target: null,
|
|
38
38
|
skipInitial: !0,
|
|
39
39
|
callback: (t) => this._onTabContentElementResize(t)
|
|
40
|
-
}), this._size = D() ? "s" : "l",
|
|
40
|
+
}), this._size = D() ? "s" : "l", d(this, c, b(this, v, 0)), this._onContentSlotChange = (b(this, p), () => {
|
|
41
41
|
this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
|
|
42
42
|
const t = this._getTabs().filter((e) => !this._tabs.includes(e));
|
|
43
43
|
t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t), t.find((e) => e.active)?.tabGroupActions?.select());
|
|
@@ -66,7 +66,7 @@ let H = 0, it = (() => {
|
|
|
66
66
|
return A(this, c);
|
|
67
67
|
}
|
|
68
68
|
set initialSelectedIndex(t) {
|
|
69
|
-
|
|
69
|
+
d(this, c, t);
|
|
70
70
|
}
|
|
71
71
|
firstUpdated(t) {
|
|
72
72
|
super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
|
|
@@ -199,7 +199,7 @@ let H = 0, it = (() => {
|
|
|
199
199
|
} }, metadata: t }, v, p), u(null, a = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, n), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
200
200
|
})(), o.styles = P, o.events = {
|
|
201
201
|
tabchange: "tabchange"
|
|
202
|
-
},
|
|
202
|
+
}, b(r, n), r;
|
|
203
203
|
})();
|
|
204
204
|
export {
|
|
205
205
|
it as SbbTabGroupElement
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement } from 'lit';
|
|
2
|
-
import { SbbFormFieldElementControl } from '../form-field.js';
|
|
3
2
|
declare const SbbTimeInputElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedInputMixinType> & typeof LitElement;
|
|
4
3
|
/**
|
|
5
4
|
* Custom input for a time.
|
|
6
5
|
*/
|
|
7
|
-
export declare class SbbTimeInputElement extends SbbTimeInputElement_base
|
|
6
|
+
export declare class SbbTimeInputElement extends SbbTimeInputElement_base {
|
|
8
7
|
static styles: CSSResultGroup;
|
|
9
8
|
/**
|
|
10
9
|
* The value of the time input. Reflects the current text value
|
|
@@ -16,7 +15,10 @@ export declare class SbbTimeInputElement extends SbbTimeInputElement_base implem
|
|
|
16
15
|
set valueAsDate(date: Date | null);
|
|
17
16
|
get valueAsDate(): Date | null;
|
|
18
17
|
private _valueAsTime?;
|
|
19
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Whether the input is empty.
|
|
20
|
+
* @deprecated
|
|
21
|
+
*/
|
|
20
22
|
get empty(): boolean;
|
|
21
23
|
/**
|
|
22
24
|
* Stores the last string and parsed date object value to prevent repeated
|
|
@@ -42,7 +44,6 @@ export declare class SbbTimeInputElement extends SbbTimeInputElement_base implem
|
|
|
42
44
|
/** Only allow typing numbers and separator keys. */
|
|
43
45
|
private _preventCharInsert;
|
|
44
46
|
private _hasSelection;
|
|
45
|
-
private _dispatchFormFieldChange;
|
|
46
47
|
}
|
|
47
48
|
declare global {
|
|
48
49
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time-input.component.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC
|
|
1
|
+
{"version":3,"file":"time-input.component.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC;;AAyBhE;;GAEG;AACH,qBAEM,mBAAoB,SAAQ,wBAAuC;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAYtC;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,iDAAiD;IACjD,IACW,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAcvC;IACD,IAAW,WAAW,IAAI,IAAI,GAAG,IAAI,CASpC;IACD,OAAO,CAAC,YAAY,CAAC,CAAc;IAEnC;;;OAGG;IACH,IAAW,KAAK,IAAI,OAAO,CAE1B;IAED;;;OAGG;IACH,OAAO,CAAC,WAAW,CAAC,CAAwB;IAE5C,OAAO,CAAC,SAAS,CAAmC;;IAWpC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;cAIzB,eAAe,IAAI,IAAI;IAM1C,OAAO,CAAC,cAAc;IAOtB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,WAAW;cAUA,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;cAMvC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAOtD,QAAQ,IAAI,IAAI;IAanC,OAAO,CAAC,qBAAqB;IAI7B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IAgC1B,OAAO,CAAC,aAAa;CAItB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
import { __esDecorate as
|
|
2
|
-
import { css as f, LitElement as
|
|
1
|
+
import { __esDecorate as c, __runInitializers as h } from "tslib";
|
|
2
|
+
import { css as f, LitElement as v, isServer as p } from "lit";
|
|
3
3
|
import { customElement as g, property as b } from "lit/decorators.js";
|
|
4
4
|
import { sbbLiveAnnouncer as m } from "../core/a11y.js";
|
|
5
5
|
import { SbbLanguageController as A } from "../core/controllers.js";
|
|
6
|
-
import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as
|
|
7
|
-
import { SbbFormAssociatedInputMixin as
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
let G = (() => {
|
|
6
|
+
import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as D, i18nTimeMaxLength as E } from "../core/i18n.js";
|
|
7
|
+
import { SbbFormAssociatedInputMixin as V } from "../core/mixins.js";
|
|
8
|
+
const w = f`*,:before,:after{box-sizing:border-box}:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media (forced-colors: active){:host{color:FieldText}}:host(:disabled){cursor:default}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}@media (forced-colors: active){:host(:empty):after{color:GrayText}}`, x = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, S = /^([0-9]{1,2})([0-9]{2})$/, C = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
|
|
9
|
+
let M = (() => {
|
|
11
10
|
var a;
|
|
12
|
-
let _ = [g("sbb-time-input")], r, l = [], s, n =
|
|
11
|
+
let _ = [g("sbb-time-input")], r, l = [], s, n = V(v), u = [], o;
|
|
13
12
|
return a = class extends n {
|
|
14
13
|
/**
|
|
15
14
|
* The value of the time input. Reflects the current text value
|
|
16
15
|
* of this input.
|
|
17
16
|
*/
|
|
18
17
|
set value(e) {
|
|
19
|
-
e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !
|
|
18
|
+
e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !p && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
|
|
20
19
|
}
|
|
21
20
|
get value() {
|
|
22
21
|
return super.value ?? "";
|
|
@@ -40,15 +39,18 @@ let G = (() => {
|
|
|
40
39
|
} else
|
|
41
40
|
return null;
|
|
42
41
|
}
|
|
43
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* Whether the input is empty.
|
|
44
|
+
* @deprecated
|
|
45
|
+
*/
|
|
44
46
|
get empty() {
|
|
45
47
|
return !this.value || this.value.trim() === "";
|
|
46
48
|
}
|
|
47
49
|
constructor() {
|
|
48
|
-
super(), this._valueAsTime =
|
|
50
|
+
super(), this._valueAsTime = h(this, u), this._language = new A(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => m.announce(T(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
|
|
49
51
|
}
|
|
50
52
|
connectedCallback() {
|
|
51
|
-
super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM"
|
|
53
|
+
super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
|
|
52
54
|
}
|
|
53
55
|
disconnectedCallback() {
|
|
54
56
|
super.disconnectedCallback();
|
|
@@ -66,7 +68,7 @@ let G = (() => {
|
|
|
66
68
|
const t = e?.trim();
|
|
67
69
|
if (!t)
|
|
68
70
|
return null;
|
|
69
|
-
const i = t.match(
|
|
71
|
+
const i = t.match(S) ?? t.match(C);
|
|
70
72
|
return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
|
|
71
73
|
}
|
|
72
74
|
_updateValueDateFormat() {
|
|
@@ -89,7 +91,7 @@ let G = (() => {
|
|
|
89
91
|
return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
|
|
90
92
|
}
|
|
91
93
|
validate() {
|
|
92
|
-
super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow",
|
|
94
|
+
super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", D[this.language.current]) : this.setValidityFlag("badInput", y[this.language.current]) : this._removeValidityErrors();
|
|
93
95
|
}
|
|
94
96
|
_removeValidityErrors() {
|
|
95
97
|
["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
|
|
@@ -114,22 +116,19 @@ let G = (() => {
|
|
|
114
116
|
"PageDown",
|
|
115
117
|
"Delete"
|
|
116
118
|
];
|
|
117
|
-
e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || x.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(
|
|
119
|
+
e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || x.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(E[this._language.current]));
|
|
118
120
|
}
|
|
119
121
|
_hasSelection() {
|
|
120
122
|
const e = window.getSelection()?.getRangeAt(0);
|
|
121
123
|
return !!e && e.startOffset !== e.endOffset;
|
|
122
124
|
}
|
|
123
|
-
_dispatchFormFieldChange() {
|
|
124
|
-
this.closest?.("sbb-form-field")?.dispatchEvent(new V(this));
|
|
125
|
-
}
|
|
126
125
|
}, s = a, (() => {
|
|
127
126
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
|
|
128
|
-
|
|
127
|
+
o = [b({ attribute: !1 })], c(a, null, o, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, i) => {
|
|
129
128
|
t.valueAsDate = i;
|
|
130
|
-
} }, metadata: e }, null,
|
|
131
|
-
})(), a.styles =
|
|
129
|
+
} }, metadata: e }, null, u), c(null, r = { value: s }, _, { kind: "class", name: s.name, metadata: e }, null, l), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
130
|
+
})(), a.styles = w, h(s, l), s;
|
|
132
131
|
})();
|
|
133
132
|
export {
|
|
134
|
-
|
|
133
|
+
M as SbbTimeInputElement
|
|
135
134
|
};
|