@sbb-esta/lyne-elements 4.3.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/breadcrumb/breadcrumb/breadcrumb.component.js +11 -11
- package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +26 -26
- package/button/common.js +1 -1
- package/button.js +1 -1
- package/checkbox/checkbox/checkbox.component.d.ts.map +1 -1
- package/checkbox/checkbox/checkbox.component.js +18 -20
- package/chip/chip/chip.component.js +10 -10
- package/clock/clock.component.d.ts.map +1 -1
- package/clock/clock.component.js +36 -38
- package/container/sticky-bar/sticky-bar.component.js +1 -1
- package/core/styles/core.scss +13 -0
- package/core/testing/event-spy.d.ts.map +1 -1
- package/core/testing/event-spy.js +4 -4
- package/core.css +27 -0
- package/custom-elements.json +732 -668
- package/development/breadcrumb/breadcrumb/breadcrumb.component.js +6 -19
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +2 -15
- package/development/button/common.js +1 -1
- package/development/button.js +1 -1
- package/development/checkbox/checkbox/checkbox.component.d.ts.map +1 -1
- package/development/checkbox/checkbox/checkbox.component.js +5 -4
- package/development/chip/chip/chip.component.js +2 -1
- package/development/clock/clock.component.d.ts.map +1 -1
- package/development/clock/clock.component.js +25 -40
- package/development/container/sticky-bar/sticky-bar.component.js +1 -1
- package/development/core/testing/event-spy.d.ts.map +1 -1
- package/development/core/testing/event-spy.js +3 -3
- package/development/form-field/form-field/form-field.component.js +2 -1
- package/development/{mini-button-label-common-DzMdb-kV.js → mini-button-label-common-0DeEC1qs.js} +5 -1
- package/development/selection-action-panel/selection-action-panel.component.d.ts +1 -0
- package/development/selection-action-panel/selection-action-panel.component.d.ts.map +1 -1
- package/development/selection-action-panel/selection-action-panel.component.js +27 -3
- package/development/stepper/step-label/step-label.component.d.ts +9 -0
- package/development/stepper/step-label/step-label.component.d.ts.map +1 -1
- package/development/stepper/step-label/step-label.component.js +25 -3
- package/development/stepper/stepper/stepper.component.d.ts +5 -3
- package/development/stepper/stepper/stepper.component.d.ts.map +1 -1
- package/development/stepper/stepper/stepper.component.js +48 -22
- package/development/toggle/toggle/toggle.component.d.ts +1 -0
- package/development/toggle/toggle/toggle.component.d.ts.map +1 -1
- package/development/toggle/toggle/toggle.component.js +19 -10
- package/form-field/form-field/form-field.component.js +1 -1
- package/{mini-button-label-common-ps7PVXtB.js → mini-button-label-common-BOB7JQKi.js} +1 -1
- package/off-brand-theme.css +27 -0
- package/package.json +1 -1
- package/safety-theme.css +27 -0
- package/selection-action-panel/selection-action-panel.component.d.ts +1 -0
- package/selection-action-panel/selection-action-panel.component.d.ts.map +1 -1
- package/selection-action-panel/selection-action-panel.component.js +25 -16
- package/standard-theme.css +27 -0
- package/stepper/step-label/step-label.component.d.ts +9 -0
- package/stepper/step-label/step-label.component.d.ts.map +1 -1
- package/stepper/step-label/step-label.component.js +38 -16
- package/stepper/stepper/stepper.component.d.ts +5 -3
- package/stepper/stepper/stepper.component.d.ts.map +1 -1
- package/stepper/stepper/stepper.component.js +62 -68
- package/toggle/toggle/toggle.component.d.ts +1 -0
- package/toggle/toggle/toggle.component.d.ts.map +1 -1
- package/toggle/toggle/toggle.component.js +46 -44
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { __esDecorate as l, __runInitializers as i } from "tslib";
|
|
2
|
-
import { customElement as
|
|
3
|
-
import { html as
|
|
2
|
+
import { customElement as n } from "lit/decorators.js";
|
|
3
|
+
import { html as c } from "lit/static-html.js";
|
|
4
4
|
import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
|
|
5
5
|
import { SbbHydrationMixin as d } from "../../core/mixins.js";
|
|
6
6
|
import { boxSizingStyles as u } from "../../core/styles.js";
|
|
7
7
|
import { SbbIconNameMixin as f } from "../../icon.js";
|
|
8
8
|
import { css as v } from "lit";
|
|
9
|
-
const
|
|
9
|
+
const p = v`:host{display:flex}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-breadcrumb-color-hover)}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-breadcrumb-color: var(--sbb-breadcrumb-color-active)}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-breadcrumb-gap);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none;font-size:var(--sbb-breadcrumb-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}.sbb-breadcrumb: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);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
|
|
10
10
|
let z = (() => {
|
|
11
|
-
var
|
|
12
|
-
let
|
|
13
|
-
return
|
|
11
|
+
var t;
|
|
12
|
+
let b = [n("sbb-breadcrumb")], o, s = [], e, a = f(d(m));
|
|
13
|
+
return t = class extends a {
|
|
14
14
|
renderTemplate() {
|
|
15
|
-
return
|
|
15
|
+
return c`
|
|
16
16
|
${this.renderIconSlot("sbb-breadcrumb__icon")}
|
|
17
17
|
<span class="sbb-breadcrumb__label">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</span>
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
|
-
}, e =
|
|
23
|
-
const
|
|
24
|
-
l(null, o = { value: e },
|
|
25
|
-
})(),
|
|
22
|
+
}, e = t, (() => {
|
|
23
|
+
const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
24
|
+
l(null, o = { value: e }, b, { kind: "class", name: e.name, metadata: r }, null, s), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
|
|
25
|
+
})(), t.styles = [u, p], i(e, s), e;
|
|
26
26
|
})();
|
|
27
27
|
export {
|
|
28
28
|
z as SbbBreadcrumbElement
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { __esDecorate as u, __runInitializers as h } from "tslib";
|
|
2
|
-
import { ResizeController as
|
|
2
|
+
import { ResizeController as g } from "@lit-labs/observers/resize-controller.js";
|
|
3
3
|
import { css as f, LitElement as v, html as a, nothing as x } from "lit";
|
|
4
4
|
import { customElement as y, state as C } from "lit/decorators.js";
|
|
5
|
-
import { isArrowKeyPressed as w, sbbInputModalityDetector as
|
|
6
|
-
import { SbbLanguageController as
|
|
7
|
-
import { i18nBreadcrumbEllipsisButtonLabel as
|
|
5
|
+
import { isArrowKeyPressed as w, sbbInputModalityDetector as S, getNextElementIndex as k } from "../../core/a11y.js";
|
|
6
|
+
import { SbbLanguageController as z } from "../../core/controllers.js";
|
|
7
|
+
import { i18nBreadcrumbEllipsisButtonLabel as E } from "../../core/i18n.js";
|
|
8
8
|
import { SbbElementInternalsMixin as I, SbbNamedSlotListMixin as $ } from "../../core/mixins.js";
|
|
9
9
|
import { boxSizingStyles as B } from "../../core/styles.js";
|
|
10
10
|
import "../../icon.js";
|
|
11
|
-
const D = f`:host{
|
|
11
|
+
const D = f`:host{display:block}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);line-height:0;letter-spacing:.01em;font-size:var(--sbb-text-font-size-xxs);width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis: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)}`, m = 3;
|
|
12
12
|
let j = (() => {
|
|
13
|
-
var
|
|
14
|
-
let
|
|
15
|
-
return
|
|
13
|
+
var s;
|
|
14
|
+
let p = [y("sbb-breadcrumb-group")], l, o = [], r, b = I($(v)), n = [], d;
|
|
15
|
+
return s = class extends b {
|
|
16
16
|
/** The state of the breadcrumb group. */
|
|
17
17
|
set _state(e) {
|
|
18
18
|
this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = e, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
|
|
@@ -21,11 +21,11 @@ let j = (() => {
|
|
|
21
21
|
return this._stateInternal;
|
|
22
22
|
}
|
|
23
23
|
constructor() {
|
|
24
|
-
super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new
|
|
24
|
+
super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new g(this, {
|
|
25
25
|
target: null,
|
|
26
26
|
skipInitial: !0,
|
|
27
27
|
callback: () => this._evaluateCollapsedState()
|
|
28
|
-
}), this._language = new
|
|
28
|
+
}), this._language = new z(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
|
|
29
29
|
}
|
|
30
30
|
_handleKeyDown(e) {
|
|
31
31
|
if (!(!this.listChildren.length || // don't trap nested handling
|
|
@@ -42,26 +42,26 @@ let j = (() => {
|
|
|
42
42
|
super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
|
|
43
43
|
}
|
|
44
44
|
updated(e) {
|
|
45
|
-
super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus &&
|
|
45
|
+
super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && S.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
|
|
46
46
|
}
|
|
47
47
|
/** Apply the aria-current attribute to the last sbb-breadcrumb element. */
|
|
48
48
|
_syncBreadcrumbs() {
|
|
49
|
-
this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length <
|
|
49
|
+
this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < m && (this._state = null);
|
|
50
50
|
}
|
|
51
51
|
/**
|
|
52
52
|
* Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
|
|
53
53
|
*/
|
|
54
54
|
_focusNextCollapsed(e) {
|
|
55
|
-
const
|
|
55
|
+
const t = [
|
|
56
56
|
this.listChildren[0],
|
|
57
57
|
this.shadowRoot.querySelector("#sbb-breadcrumb-ellipsis"),
|
|
58
58
|
this.listChildren[this.listChildren.length - 1]
|
|
59
59
|
];
|
|
60
|
-
this._focusNext(e,
|
|
60
|
+
this._focusNext(e, t);
|
|
61
61
|
}
|
|
62
|
-
_focusNext(e,
|
|
63
|
-
const i =
|
|
64
|
-
|
|
62
|
+
_focusNext(e, t = this.listChildren) {
|
|
63
|
+
const i = t.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), _ = k(e, i, t.length);
|
|
64
|
+
t[_]?.focus(), e.preventDefault();
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* Note: due to @State annotation on _state, this method triggers a new render; as a consequence, the focus is moved
|
|
@@ -72,7 +72,7 @@ let j = (() => {
|
|
|
72
72
|
}
|
|
73
73
|
/** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
|
|
74
74
|
_evaluateCollapsedState() {
|
|
75
|
-
!this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >=
|
|
75
|
+
!this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= m && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
|
|
76
76
|
}
|
|
77
77
|
_renderCollapsed() {
|
|
78
78
|
return a`
|
|
@@ -87,7 +87,7 @@ let j = (() => {
|
|
|
87
87
|
<button
|
|
88
88
|
type="button"
|
|
89
89
|
id="sbb-breadcrumb-ellipsis"
|
|
90
|
-
aria-label=${
|
|
90
|
+
aria-label=${E[this._language.current]}
|
|
91
91
|
aria-expanded="false"
|
|
92
92
|
@click=${() => this._expandBreadcrumbs()}
|
|
93
93
|
>
|
|
@@ -104,10 +104,10 @@ let j = (() => {
|
|
|
104
104
|
`;
|
|
105
105
|
}
|
|
106
106
|
_renderExpanded() {
|
|
107
|
-
return this.listSlotEntries().map((e,
|
|
107
|
+
return this.listSlotEntries().map((e, t, i) => a`
|
|
108
108
|
<li class="sbb-breadcrumb-group__item">
|
|
109
109
|
<slot name=${e.name}></slot>
|
|
110
|
-
${
|
|
110
|
+
${t !== i.length - 1 ? a`<sbb-icon
|
|
111
111
|
name="chevron-small-right-small"
|
|
112
112
|
class="sbb-breadcrumb-group__divider-icon"
|
|
113
113
|
></sbb-icon>` : x}
|
|
@@ -122,12 +122,12 @@ let j = (() => {
|
|
|
122
122
|
${this.renderHiddenSlot()}
|
|
123
123
|
`;
|
|
124
124
|
}
|
|
125
|
-
}, r =
|
|
125
|
+
}, r = s, (() => {
|
|
126
126
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
|
|
127
|
-
d = [C()], u(
|
|
128
|
-
|
|
129
|
-
} }, metadata: e }, null, n), u(null, l = { value: r },
|
|
130
|
-
})(),
|
|
127
|
+
d = [C()], u(s, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (t) => "_state" in t, set: (t, i) => {
|
|
128
|
+
t._state = i;
|
|
129
|
+
} }, metadata: e }, null, n), u(null, l = { value: r }, p, { kind: "class", name: r.name, metadata: e }, null, o), r = l.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
130
|
+
})(), s.role = "navigation", s.styles = [B, D], h(r, o), r;
|
|
131
131
|
})();
|
|
132
132
|
export {
|
|
133
133
|
j as SbbBreadcrumbGroupElement
|
package/button/common.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
|
|
2
|
-
import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-
|
|
2
|
+
import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-BOB7JQKi.js";
|
|
3
3
|
export {
|
|
4
4
|
o as SbbButtonCommonElementMixin,
|
|
5
5
|
a as buttonAccentStyle,
|
package/button.js
CHANGED
|
@@ -14,7 +14,7 @@ import { SbbSecondaryButtonStaticElement as C } from "./button/secondary-button-
|
|
|
14
14
|
import { SbbAccentButtonStaticElement as P } from "./button/accent-button-static/accent-button-static.component.js";
|
|
15
15
|
import { SbbTransparentButtonStaticElement as h } from "./button/transparent-button-static/transparent-button-static.component.js";
|
|
16
16
|
import { SbbButtonCommonElementMixin as q } from "./button/common/button-common.js";
|
|
17
|
-
import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-
|
|
17
|
+
import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-BOB7JQKi.js";
|
|
18
18
|
export {
|
|
19
19
|
b as SbbAccentButtonElement,
|
|
20
20
|
L as SbbAccentButtonLinkElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAItB,OAAO,0BAA0B,CAAC;;AAElC;;;;;;;;GAQG;AACH,qBAEM,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,uBAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAI3C;IAEF,iCAAiC;IACjC,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IACH,SAEgB,IAAI,EAAE,eAAe,CAAyB;IAE9D,oEAAoE;IACpE,SACgB,aAAa,EAAE,gBAAgB,CAAS;cAErC,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAItB,OAAO,0BAA0B,CAAC;;AAElC;;;;;;;;GAQG;AACH,qBAEM,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,uBAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAI3C;IAEF,iCAAiC;IACjC,SACgB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IACH,SAEgB,IAAI,EAAE,eAAe,CAAyB;IAE9D,oEAAoE;IACpE,SACgB,aAAa,EAAE,gBAAgB,CAAS;cAErC,MAAM,IAAI,cAAc;CAsB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
|
|
@@ -2,51 +2,51 @@ var I = (t) => {
|
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
4
|
var j = (t, s, a) => s.has(t) || I("Cannot " + a);
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
5
|
+
var h = (t, s, a) => (j(t, s, "read from private field"), a ? a.call(t) : s.get(t)), u = (t, s, a) => s.has(t) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, a), d = (t, s, a, l) => (j(t, s, "write to private field"), l ? l.call(t, a) : s.set(t, a), a);
|
|
6
|
+
import { __esDecorate as f, __runInitializers as n } from "tslib";
|
|
7
7
|
import { css as E, LitElement as $, html as C } from "lit";
|
|
8
|
-
import { customElement as D, property as
|
|
8
|
+
import { customElement as D, property as p } from "lit/decorators.js";
|
|
9
9
|
import { getOverride as O } from "../../core/decorators.js";
|
|
10
10
|
import { isLean as L } from "../../core/dom.js";
|
|
11
11
|
import { boxSizingStyles as M } from "../../core/styles.js";
|
|
12
12
|
import { SbbIconNameMixin as N } from "../../icon.js";
|
|
13
13
|
import { SbbCheckboxCommonElementMixin as T, checkboxCommonStyle as q } from "../common.js";
|
|
14
14
|
import "../../visual-checkbox.js";
|
|
15
|
-
const A = E`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
|
|
15
|
+
const A = E`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
|
|
16
16
|
let X = (() => {
|
|
17
17
|
var r, b, m, c;
|
|
18
18
|
let t = [D("sbb-checkbox")], s, a = [], l, _ = N(T($)), x, v = [], k = [], g, z = [], y = [], S, P = [], w = [];
|
|
19
19
|
return c = class extends _ {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
u(this, r, n(this, v, null));
|
|
23
|
+
u(this, b, (n(this, k), n(this, z, L() ? "xs" : "m")));
|
|
24
|
+
u(this, m, (n(this, y), n(this, P, "end")));
|
|
25
25
|
n(this, w);
|
|
26
26
|
}
|
|
27
27
|
/** Value of the form element. */
|
|
28
28
|
get value() {
|
|
29
|
-
return
|
|
29
|
+
return h(this, r);
|
|
30
30
|
}
|
|
31
31
|
set value(i) {
|
|
32
|
-
|
|
32
|
+
d(this, r, i);
|
|
33
33
|
}
|
|
34
34
|
/**
|
|
35
35
|
* Size variant, either xs, s or m.
|
|
36
36
|
* @default 'm' / 'xs' (lean)
|
|
37
37
|
*/
|
|
38
38
|
get size() {
|
|
39
|
-
return
|
|
39
|
+
return h(this, b);
|
|
40
40
|
}
|
|
41
41
|
set size(i) {
|
|
42
|
-
|
|
42
|
+
d(this, b, i);
|
|
43
43
|
}
|
|
44
44
|
/** The label position relative to the labelIcon. Defaults to end */
|
|
45
45
|
get iconPlacement() {
|
|
46
|
-
return
|
|
46
|
+
return h(this, m);
|
|
47
47
|
}
|
|
48
48
|
set iconPlacement(i) {
|
|
49
|
-
|
|
49
|
+
d(this, m, i);
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
52
|
return C`
|
|
@@ -62,9 +62,7 @@ let X = (() => {
|
|
|
62
62
|
></sbb-visual-checkbox>
|
|
63
63
|
</span>
|
|
64
64
|
<span class="sbb-checkbox__label">
|
|
65
|
-
<
|
|
66
|
-
<slot></slot>
|
|
67
|
-
</span>
|
|
65
|
+
<slot></slot>
|
|
68
66
|
${this.renderIconSlot()}
|
|
69
67
|
</span>
|
|
70
68
|
</span>
|
|
@@ -74,13 +72,13 @@ let X = (() => {
|
|
|
74
72
|
}
|
|
75
73
|
}, r = new WeakMap(), b = new WeakMap(), m = new WeakMap(), l = c, (() => {
|
|
76
74
|
const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
|
|
77
|
-
x = [
|
|
75
|
+
x = [p()], g = [p({ reflect: !0 }), O((e, o) => e.group?.size ?? o)], S = [p({ attribute: "icon-placement", reflect: !0 })], f(c, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, o) => {
|
|
78
76
|
e.value = o;
|
|
79
|
-
} }, metadata: i }, v, k),
|
|
77
|
+
} }, metadata: i }, v, k), f(c, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
|
|
80
78
|
e.size = o;
|
|
81
|
-
} }, metadata: i }, z, y),
|
|
79
|
+
} }, metadata: i }, z, y), f(c, null, S, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (e) => "iconPlacement" in e, get: (e) => e.iconPlacement, set: (e, o) => {
|
|
82
80
|
e.iconPlacement = o;
|
|
83
|
-
} }, metadata: i }, P, w),
|
|
81
|
+
} }, metadata: i }, P, w), f(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: i }, null, a), l = s.value, i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
|
|
84
82
|
})(), c.styles = [
|
|
85
83
|
M,
|
|
86
84
|
q,
|
|
@@ -2,7 +2,7 @@ var v = (e) => {
|
|
|
2
2
|
throw TypeError(e);
|
|
3
3
|
};
|
|
4
4
|
var p = (e, r, b) => r.has(e) || v("Cannot " + b);
|
|
5
|
-
var m = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b,
|
|
5
|
+
var m = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, t) => (p(e, r, "write to private field"), t ? t.call(e, b) : r.set(e, b), b);
|
|
6
6
|
import { __runInitializers as n, __esDecorate as f } from "tslib";
|
|
7
7
|
import { css as x, LitElement as y, html as k } from "lit";
|
|
8
8
|
import { customElement as w, property as S } from "lit/decorators.js";
|
|
@@ -12,11 +12,11 @@ import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, Sb
|
|
|
12
12
|
import { boxSizingStyles as I } from "../../core/styles.js";
|
|
13
13
|
import "../../button/mini-button.js";
|
|
14
14
|
import "../../screen-reader-only.js";
|
|
15
|
-
const M = x`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
|
|
15
|
+
const M = x`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
|
|
16
16
|
let H = (() => {
|
|
17
|
-
var s,
|
|
18
|
-
let e = [w("sbb-chip")], r, b = [],
|
|
19
|
-
return
|
|
17
|
+
var s, o;
|
|
18
|
+
let e = [w("sbb-chip")], r, b = [], t, c = E(C(q(B(y)))), d, u = [], h = [];
|
|
19
|
+
return o = class extends c {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
22
|
g(this, s);
|
|
@@ -60,14 +60,14 @@ let H = (() => {
|
|
|
60
60
|
</div>
|
|
61
61
|
`;
|
|
62
62
|
}
|
|
63
|
-
}, s = new WeakMap(),
|
|
63
|
+
}, s = new WeakMap(), t = o, (() => {
|
|
64
64
|
const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
|
|
65
|
-
d = [S()], f(
|
|
65
|
+
d = [S()], f(o, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
|
|
66
66
|
a.value = _;
|
|
67
|
-
} }, metadata: i }, u, h), f(null, r = { value:
|
|
68
|
-
})(),
|
|
67
|
+
} }, metadata: i }, u, h), f(null, r = { value: t }, e, { kind: "class", name: t.name, metadata: i }, null, b), t = r.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
|
|
68
|
+
})(), o.role = "option", o.styles = [I, M], o.events = {
|
|
69
69
|
requestdelete: "requestdelete"
|
|
70
|
-
}, n(
|
|
70
|
+
}, n(t, b), t;
|
|
71
71
|
})();
|
|
72
72
|
export {
|
|
73
73
|
H as SbbChipElement
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clock.component.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;;AAgDrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,oBAAoC;IAChE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAUjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"clock.component.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;;AAgDrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,oBAAoC;IAChE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAUjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA0B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
|
package/clock/clock.component.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
var M = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var p = (s, n,
|
|
5
|
-
var
|
|
6
|
-
import { __runInitializers as
|
|
4
|
+
var p = (s, n, e) => n.has(s) || M("Cannot " + e);
|
|
5
|
+
var H = (s, n, e) => (p(s, n, "read from private field"), e ? e.call(s) : n.get(s)), g = (s, n, e) => n.has(s) ? M("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, e), h = (s, n, e, i) => (p(s, n, "write to private field"), i ? i.call(s, e) : n.set(s, e), e);
|
|
6
|
+
import { __runInitializers as _, __esDecorate as f } from "tslib";
|
|
7
7
|
import { css as L, LitElement as A, isServer as y, html as I } from "lit";
|
|
8
8
|
import { customElement as O, property as T } from "lit/decorators.js";
|
|
9
|
-
import { ref as
|
|
9
|
+
import { ref as m } from "lit/directives/ref.js";
|
|
10
10
|
import { SbbElementInternalsMixin as N } from "../core/mixins.js";
|
|
11
11
|
import { boxSizingStyles as P } from "../core/styles.js";
|
|
12
12
|
const x = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="var(--sbb-clock-background-color)" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
|
|
13
13
|
`, F = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
|
|
14
14
|
`, U = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
|
|
15
15
|
`, $ = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
|
|
16
|
-
`, D = L`:host{
|
|
16
|
+
`, D = L`:host{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, "paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle, 0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle, 0deg))}97.5%,to{transform:rotate(360deg)}}`, V = 12, G = 60, z = 60, R = 50, S = 360, w = 30, B = 6, K = 360 / 58.5, j = 60, E = 3600, Z = E / 2, C = {
|
|
17
17
|
once: !0,
|
|
18
18
|
passive: !0
|
|
19
19
|
};
|
|
20
20
|
let nt = (() => {
|
|
21
|
-
var
|
|
22
|
-
let s = [O("sbb-clock")], n,
|
|
21
|
+
var l, o;
|
|
22
|
+
let s = [O("sbb-clock")], n, e = [], i, u = N(A), b, v = [], k = [];
|
|
23
23
|
return o = class extends u {
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments);
|
|
26
|
-
|
|
27
|
-
h(this,
|
|
26
|
+
g(this, l);
|
|
27
|
+
h(this, l, _(this, v, null)), this._state = (_(this, k), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
|
|
28
28
|
this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
|
|
29
29
|
};
|
|
30
30
|
}
|
|
@@ -33,10 +33,10 @@ let nt = (() => {
|
|
|
33
33
|
* @param value HH:MM:ss
|
|
34
34
|
*/
|
|
35
35
|
get now() {
|
|
36
|
-
return
|
|
36
|
+
return H(this, l);
|
|
37
37
|
}
|
|
38
38
|
set now(t) {
|
|
39
|
-
h(this,
|
|
39
|
+
h(this, l, t);
|
|
40
40
|
}
|
|
41
41
|
connectedCallback() {
|
|
42
42
|
super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), Z * 1e3);
|
|
@@ -72,14 +72,14 @@ let nt = (() => {
|
|
|
72
72
|
/** Set the starting position for the three hands on the clock face. */
|
|
73
73
|
_setHandsStartingPosition() {
|
|
74
74
|
this._assignCurrentTime();
|
|
75
|
-
const t = z - this._seconds, a = G - this._minutes,
|
|
75
|
+
const t = z - this._seconds, a = G - this._minutes, c = V - this._hours;
|
|
76
76
|
let r = 0, d = 0;
|
|
77
|
-
t > 0 && (r += t, d = 1), a > 0 && (r += (a - d) * j, d = 1),
|
|
77
|
+
t > 0 && (r += t, d = 1), a > 0 && (r += (a - d) * j, d = 1), c > 0 && (r += (c - d) * E), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * w + this._minutes / 2)}deg`), this.style?.setProperty("--sbb-clock-hours-animation-duration", `${r}s`), this.style?.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * K)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.internals.states.add("initialized");
|
|
78
78
|
}
|
|
79
79
|
/** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
|
|
80
80
|
_assignCurrentTime() {
|
|
81
|
-
const t = this.now ? null : /* @__PURE__ */ new Date(), [a,
|
|
82
|
-
this._hours = a % 12, this._minutes =
|
|
81
|
+
const t = this.now ? null : /* @__PURE__ */ new Date(), [a, c, r] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
|
|
82
|
+
this._hours = a % 12, this._minutes = c, this._seconds = r;
|
|
83
83
|
}
|
|
84
84
|
/** Set the starting position for the minutes hand. */
|
|
85
85
|
_setMinutesHand() {
|
|
@@ -117,38 +117,36 @@ let nt = (() => {
|
|
|
117
117
|
}
|
|
118
118
|
render() {
|
|
119
119
|
return I`
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
${_((t) => {
|
|
120
|
+
<span class="sbb-clock__face" .innerHTML=${x}></span>
|
|
121
|
+
<span
|
|
122
|
+
class="sbb-clock__hand-hours"
|
|
123
|
+
.innerHTML=${F}
|
|
124
|
+
${m((t) => {
|
|
126
125
|
this._clockHandHours = t;
|
|
127
126
|
})}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
127
|
+
></span>
|
|
128
|
+
<span
|
|
129
|
+
class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
|
|
130
|
+
.innerHTML=${U}
|
|
131
|
+
${m((t) => {
|
|
133
132
|
this._clockHandMinutes = t;
|
|
134
133
|
})}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
134
|
+
></span>
|
|
135
|
+
<span
|
|
136
|
+
class="sbb-clock__hand-seconds"
|
|
137
|
+
.innerHTML=${$}
|
|
138
|
+
${m((t) => {
|
|
140
139
|
this._clockHandSeconds = t;
|
|
141
140
|
})}
|
|
142
|
-
|
|
143
|
-
</div>
|
|
141
|
+
></span>
|
|
144
142
|
`;
|
|
145
143
|
}
|
|
146
|
-
},
|
|
144
|
+
}, l = new WeakMap(), i = o, (() => {
|
|
147
145
|
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
|
|
148
|
-
b = [T()], f(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (a) => "now" in a, get: (a) => a.now, set: (a,
|
|
149
|
-
a.now =
|
|
150
|
-
} }, metadata: t },
|
|
151
|
-
})(), o.styles = [P, D],
|
|
146
|
+
b = [T()], f(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (a) => "now" in a, get: (a) => a.now, set: (a, c) => {
|
|
147
|
+
a.now = c;
|
|
148
|
+
} }, metadata: t }, v, k), f(null, n = { value: i }, s, { kind: "class", name: i.name, metadata: t }, null, e), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
149
|
+
})(), o.styles = [P, D], _(i, e), i;
|
|
152
150
|
})();
|
|
153
151
|
export {
|
|
154
152
|
nt as SbbClockElement
|
|
@@ -10,7 +10,7 @@ import { customElement as A, property as z } from "lit/decorators.js";
|
|
|
10
10
|
import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
|
|
11
11
|
import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
|
|
12
12
|
import { boxSizingStyles as H } from "../../core/styles.js";
|
|
13
|
-
const L = C`:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-
|
|
13
|
+
const L = C`:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
|
|
14
14
|
let F = (() => {
|
|
15
15
|
var o, c, n;
|
|
16
16
|
let s = [A("sbb-sticky-bar")], i, e = [], r, h = U(T(I)), g, v = [], m = [], p, _ = [], f = [];
|
package/core/styles/core.scss
CHANGED
|
@@ -14,6 +14,12 @@ $theme: 'standard' !default;
|
|
|
14
14
|
@use './mixins/scrollbar';
|
|
15
15
|
@use './mixins/typo';
|
|
16
16
|
|
|
17
|
+
@use '../../breadcrumb/breadcrumb/breadcrumb.global' as breadcrumb with (
|
|
18
|
+
$theme: $theme
|
|
19
|
+
);
|
|
20
|
+
@use '../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
|
|
21
|
+
$theme: $theme
|
|
22
|
+
);
|
|
17
23
|
@use '../../card/card/card.global' as card with (
|
|
18
24
|
$theme: $theme
|
|
19
25
|
);
|
|
@@ -32,6 +38,9 @@ $theme: 'standard' !default;
|
|
|
32
38
|
@use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
|
|
33
39
|
$theme: $theme
|
|
34
40
|
);
|
|
41
|
+
@use '../../clock/clock.global' as clock with (
|
|
42
|
+
$theme: $theme
|
|
43
|
+
);
|
|
35
44
|
@use '../../divider/divider.global' as divider with (
|
|
36
45
|
$theme: $theme
|
|
37
46
|
);
|
|
@@ -79,12 +88,15 @@ $theme: 'standard' !default;
|
|
|
79
88
|
// Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
|
|
80
89
|
@include sbb-css-tokens.base;
|
|
81
90
|
|
|
91
|
+
@include breadcrumb.base;
|
|
92
|
+
@include breadcrumb-group.base;
|
|
82
93
|
@include card.base;
|
|
83
94
|
@include card-badge.base;
|
|
84
95
|
@include panel-common.base;
|
|
85
96
|
@include checkbox.base;
|
|
86
97
|
@include checkbox-group.base;
|
|
87
98
|
@include checkbox-common.base;
|
|
99
|
+
@include clock.base;
|
|
88
100
|
@include divider.base;
|
|
89
101
|
@include expansion-panel.base;
|
|
90
102
|
@include expansion-panel-content.base;
|
|
@@ -100,6 +112,7 @@ $theme: 'standard' !default;
|
|
|
100
112
|
@include a11y.if-forced-colors {
|
|
101
113
|
@include sbb-css-tokens.forced-colors;
|
|
102
114
|
|
|
115
|
+
@include breadcrumb.base-forced-colors;
|
|
103
116
|
@include card.base-forced-colors;
|
|
104
117
|
@include card-badge.base-forced-colors;
|
|
105
118
|
@include expansion-panel-header.base-forced-colors;
|