@sbb-esta/lyne-elements 4.6.0 → 4.8.0

package/teaser-product-common-DkumwiRA.js

@@ -0,0 +1,62 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbNegativeMixin as a } from "./core/mixins.js";
+//#region src/elements/teaser-product/common/teaser-product-common.scss?lit&inline
+var o = n`:host{--sbb-teaser-product-background-color:var(--lightningcss-light,var(--sbb-color-cloud))var(--lightningcss-dark,var(--sbb-color-midnight));--sbb-teaser-product-background-gradient-direction:to right;--sbb-teaser-product-background:var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius:var(--sbb-border-radius-4x);--sbb-teaser-product-content-color:var(--sbb-color-4);--sbb-teaser-product-footer-color:var(--lightningcss-light,var(--sbb-color-anthracite))var(--lightningcss-dark,var(--sbb-color-cloud));--sbb-teaser-product-container-padding-block:var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height:37.5rem;--sbb-teaser-product-background-gradient-start:25%;--sbb-teaser-product-background-gradient-end:75%;display:block}@media (width>=64rem){:host{--sbb-teaser-product-background:linear-gradient(var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end))}}:host([negative]){--sbb-teaser-product-background-color:var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color:var(--sbb-color-4-negative);--sbb-teaser-product-footer-color:var(--sbb-color-4-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override:var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction:to left}.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;overflow:hidden}@media (width>=64rem){.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius);position:absolute;inset:0}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){width:100%;height:100%;display:flex}@media (forced-colors:active){.sbb-teaser-product__root:after{content:"";pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius);display:block;position:absolute;inset:0}}.sbb-action-base{text-decoration:none;display:block;position:relative}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (width>=64rem){.sbb-teaser-product__container{column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);grid:"content."1fr"footnote."/1fr 1fr;display:grid;position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:".content"".footnote"}}.sbb-teaser-product__content{color:var(--sbb-teaser-product-content-color);grid-area:content;align-self:center;margin:0}@media (width>=64rem){.sbb-teaser-product__content{min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block));align-content:center}}.sbb-teaser-product__footnote{color:var(--sbb-teaser-product-footer-color);--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);grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s)}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) .sbb-teaser-product__footnote{padding-block-start:0}@media (width>=64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`, s = (n) => (() => {
+	let o = a(n), s, c = [], l = [];
+	return class extends o {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+			s = [i({
+				attribute: "image-alignment",
+				reflect: !0
+			})], e(this, null, s, {
+				kind: "accessor",
+				name: "imageAlignment",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "imageAlignment" in e,
+					get: (e) => e.imageAlignment,
+					set: (e, t) => {
+						e.imageAlignment = t;
+					}
+				},
+				metadata: t
+			}, c, l), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		#e = t(this, c, "after");
+		get imageAlignment() {
+			return this.#e;
+		}
+		set imageAlignment(e) {
+			this.#e = e;
+		}
+		renderTemplate() {
+			return r`
+        <div class="sbb-teaser-product__root">
+          <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
+          <div class="sbb-teaser-product__container">
+            <span class="sbb-teaser-product__content">
+              <slot></slot>
+            </span>
+            <div class="sbb-teaser-product__footnote">
+              <slot name="footnote"></slot>
+            </div>
+          </div>
+        </div>
+      `;
+		}
+		constructor() {
+			super(...arguments), t(this, l);
+		}
+	};
+})();
+//#endregion
+export { o as n, s as t };

package/teaser-product.component-DiOhM_rU.js

@@ -0,0 +1,29 @@
+import { css as e } from "lit";
+import { SbbLinkBaseElement as t } from "./core/base-elements.js";
+import { boxSizingStyles as n } from "./core/styles.js";
+import { html as r } from "lit/static-html.js";
+import "./screen-reader-only.js";
+import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as a } from "./teaser-product/common/teaser-product-common.js";
+//#region src/elements/teaser-product/teaser-product/teaser-product.scss?lit&inline
+var o = e`:host{--sbb-teaser-product-border-radius:var(--sbb-border-radius-4x)}@media (forced-colors:active){:host{--sbb-title-text-color-normal-override:LinkText!important;--sbb-teaser-product-content-color:LinkText!important;--sbb-teaser-product-footer-color:LinkText!important}}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors:active){:host(:hover) .sbb-teaser-product__root:after{border-color:highlight}}.sbb-teaser-product{position:absolute;inset:0}.sbb-teaser-product: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-teaser-product-border-radius)}`, s = class extends i(t) {
+	static {
+		this.elementName = "sbb-teaser-product";
+	}
+	static {
+		this.styles = [
+			n,
+			a,
+			o
+		];
+	}
+	render() {
+		return r`
+      <div class="sbb-teaser-product__wrapper">
+        ${this.renderLink(r`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
+        ${this.renderTemplate()}
+      </div>
+    `;
+	}
+};
+//#endregion
+export { s as t };

package/teaser-product.js

@@ -1,10 +1,7 @@
-import { SbbTeaserProductElement as r } from "./teaser-product/teaser-product/teaser-product.component.js";
-import { SbbTeaserProductStaticElement as m } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { SbbTeaserProductCommonElementMixin as b } from "./teaser-product/common/teaser-product-common.js";
-import { t as c } from "./teaser-product-common-DwaWdQEh.js";
-export {
-  b as SbbTeaserProductCommonElementMixin,
-  r as SbbTeaserProductElement,
-  m as SbbTeaserProductStaticElement,
-  c as teaserProductCommonStyle
-};
+import { n as e, t } from "./teaser-product-common-DkumwiRA.js";
+import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
+import { t as r } from "./teaser-product.component-DiOhM_rU.js";
+import "./teaser-product.pure.js";
+r.define(), n.define();
+//#endregion
+export { t as SbbTeaserProductCommonElementMixin, r as SbbTeaserProductElement, n as SbbTeaserProductStaticElement, e as teaserProductCommonStyle };

package/teaser-product.pure.js

@@ -0,0 +1,4 @@
+import { n as e, t } from "./teaser-product-common-DkumwiRA.js";
+import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
+import { t as r } from "./teaser-product.component-DiOhM_rU.js";
+export { t as SbbTeaserProductCommonElementMixin, r as SbbTeaserProductElement, n as SbbTeaserProductStaticElement, e as teaserProductCommonStyle };

package/teaser.component-C7sJLVMk.js

@@ -0,0 +1,91 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbLinkBaseElement as i } from "./core/base-elements.js";
+import { boxSizingStyles as a } from "./core/styles.js";
+import { html as o } from "lit/static-html.js";
+import "./screen-reader-only.js";
+//#region src/elements/teaser/teaser.scss?lit&inline
+var s = n`:host{--sbb-teaser-scale-hover:1.02;--sbb-teaser-description-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-silver));--sbb-teaser-flex-direction:row;--sbb-teaser-align-items:center;--sbb-teaser-gap:var(--sbb-spacing-fixed-4x);--sbb-teaser-border-radius:var(--sbb-border-radius-4x);display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-text-color-normal-override:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:calc(2 * var(--sbb-focus-outline-offset))}.sbb-teaser:before{content:"";inset:calc(-1 * var(--sbb-focus-outline-offset));pointer-events:none;border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{--sbb-text-font-size:var(--sbb-text-font-size-s);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);color:var(--sbb-teaser-description-color);max-width:100%;overflow:hidden}::slotted([slot=image]){width:18.75rem;display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x);display:block}::slotted(sbb-title){margin-block:0}`, c = (() => {
+	let n = i, c, l = [], u = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			c = [r({ reflect: !0 })], e(this, null, c, {
+				kind: "accessor",
+				name: "alignment",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "alignment" in e,
+					get: (e) => e.alignment,
+					set: (e, t) => {
+						e.alignment = t;
+					}
+				},
+				metadata: t
+			}, l, u), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-teaser";
+		}
+		static {
+			this.styles = [a, s];
+		}
+		#e = t(this, l, "after-centered");
+		get alignment() {
+			return this.#e;
+		}
+		set alignment(e) {
+			this.#e = e;
+		}
+		_handleSlotchange() {
+			let e = Array.from(this.children).find((e) => e.localName === "sbb-chip-label");
+			e && (e.slot = "chip");
+			let t = Array.from(this.children).find((e) => e.localName === "sbb-title");
+			t && (t.slot = "title");
+		}
+		_configureChip(e) {
+			let t = e.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
+			t && (customElements.upgrade(t), t.color = "charcoal", t.size = "xxs");
+		}
+		_configureTitle(e) {
+			let t = e.target.assignedElements().find((e) => e.localName === "sbb-title");
+			t && (customElements.upgrade(t), t.visualLevel = "5");
+		}
+		render() {
+			return o`
+      <div class="sbb-teaser__wrapper">
+        ${this.renderLink(o`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
+        ${this.renderContent()}
+      </div>
+    `;
+		}
+		renderContent() {
+			return o`
+      <span class="sbb-teaser__container">
+        <span class="sbb-teaser__image-wrapper">
+          <slot name="image"></slot>
+        </span>
+        <span class="sbb-teaser__text">
+          <slot name="chip" @slotchange=${this._configureChip}></slot>
+          <slot name="title" @slotchange=${this._configureTitle}></slot>
+          <p class="sbb-teaser__description">
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </p>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, u);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/teaser.js

@@ -1,4 +1,6 @@
-import { SbbTeaserElement as b } from "./teaser/teaser.component.js";
-export {
-  b as SbbTeaserElement
-};
+import { t as e } from "./teaser.component-C7sJLVMk.js";
+import "./teaser.pure.js";
+//#region src/elements/teaser.ts
+e.define();
+//#endregion
+export { e as SbbTeaserElement };

package/teaser.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./teaser.component-C7sJLVMk.js";
+export { e as SbbTeaserElement };

package/time-input/time-input.component.js

@@ -1,127 +1,2 @@
-import { __esDecorate as c, __runInitializers as h } from "tslib";
-import { css as f, LitElement as v, isServer as p } from "lit";
-import { customElement as g, property as b } from "lit/decorators.js";
-import { sbbLiveAnnouncer as m } from "../core/a11y.js";
-import { SbbLanguageController as A } from "../core/controllers.js";
-import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as D, i18nTimeMaxLength as E } from "../core/i18n.js";
-import { SbbFormAssociatedInputMixin as V } from "../core/mixins.js";
-const w = f`: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:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media(forced-colors:active){:host(:empty):after{color:GrayText}}`, S = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, x = /^([0-9]{1,2})([0-9]{2})$/, C = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let M = (() => {
-  var a;
-  let _ = [g("sbb-time-input")], r, l = [], s, n = V(v), u = [], o;
-  return a = class extends n {
-    /**
-     * The value of the time input. Reflects the current text value
-     * of this input.
-     */
-    set value(e) {
-      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;
-    }
-    get value() {
-      return super.value ?? "";
-    }
-    /** Formats the current input's value as date. */
-    set valueAsDate(e) {
-      if (e instanceof Date && !isNaN(e.valueOf())) {
-        this._valueAsTime = {
-          hours: e.getHours(),
-          minutes: e.getMinutes()
-        };
-        const t = this._formatTime();
-        this.value !== t && (this.value = t);
-      } else
-        this._valueAsTime = null, this.value = "";
-    }
-    get valueAsDate() {
-      if (this._valueAsTime && this._isTimeValid(this._valueAsTime)) {
-        const e = /* @__PURE__ */ new Date(0);
-        return e.setHours(this._valueAsTime.hours), e.setMinutes(this._valueAsTime.minutes), e;
-      } else
-        return null;
-    }
-    constructor() {
-      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));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback();
-    }
-    updateFormValue() {
-      this._tryParseValue();
-      const e = this.valueAsDate !== null ? this._formatTime() : null;
-      this.internals.setFormValue(e, this.value);
-    }
-    _tryParseValue(e = this.value) {
-      this._valueCache?.[0] !== e && (this._valueAsTime = this._parseValue(e), this._valueCache = [e, this._valueAsTime ?? null]);
-    }
-    /** Validate input against the defined RegExps. */
-    _parseValue(e) {
-      const t = e?.trim();
-      if (!t)
-        return null;
-      const i = t.match(x) ?? t.match(C);
-      return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
-    }
-    _updateValueDateFormat() {
-      if (this.valueAsDate) {
-        const e = this._formatTime();
-        this.value !== e && (super.value = e);
-      }
-    }
-    _formatTime() {
-      const e = this.valueAsDate;
-      if (!e)
-        return "";
-      const t = String(e.getHours()).padStart(2, "0"), i = String(e.getMinutes()).padStart(2, "0");
-      return `${t}:${i}`;
-    }
-    preparePastedText(e) {
-      return e.replace(d, "").substring(0, 5 - (this.textContent?.length ?? 0));
-    }
-    shouldValidate(e) {
-      return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
-    }
-    validate() {
-      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();
-    }
-    _removeValidityErrors() {
-      ["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
-    }
-    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
-    _isTimeValid(e) {
-      return e.hours < 24 && e.minutes < 60;
-    }
-    /**  Only allow typing numbers and separator keys. */
-    _preventCharInsert(e) {
-      const t = [
-        "Backspace",
-        "Tab",
-        "Enter",
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-        "Home",
-        "End",
-        "PageUp",
-        "PageDown",
-        "Delete"
-      ];
-      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || S.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(E[this._language.current]));
-    }
-    _hasSelection() {
-      const e = window.getSelection()?.getRangeAt(0);
-      return !!e && e.startOffset !== e.endOffset;
-    }
-  }, s = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    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) => {
-      t.valueAsDate = i;
-    } }, 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 });
-  })(), a.styles = w, h(s, l), s;
-})();
-export {
-  M as SbbTimeInputElement
-};
+import { t as e } from "../time-input.component-DT1BOC8m.js";
+export { e as SbbTimeInputElement };

package/time-input.component-DT1BOC8m.js

@@ -0,0 +1,141 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, isServer as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { SbbFormAssociatedInputMixin as o } from "./core/mixins.js";
+import { SbbLanguageController as s } from "./core/controllers.js";
+import { i18nTimeInputChange as c, i18nTimeInvalid as l, i18nTimeMax as u, i18nTimeMaxLength as d } from "./core/i18n.js";
+import { sbbLiveAnnouncer as f } from "./core/a11y.js";
+//#region src/elements/time-input/time-input.scss?lit&inline
+var p = n`:host{min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}`, m = /[0-9.:,\-;_hH]/, h = /[^0-9.:,\-;_hH]/g, g = /^([0-9]{1,2})([0-9]{2})$/, _ = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/, v = (() => {
+	let n = o(a), v = [], y;
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			y = [i({ attribute: !1 })], e(this, null, y, {
+				kind: "setter",
+				name: "valueAsDate",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "valueAsDate" in e,
+					set: (e, t) => {
+						e.valueAsDate = t;
+					}
+				},
+				metadata: t
+			}, null, v), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-time-input";
+		}
+		static {
+			this.styles = p;
+		}
+		set value(e) {
+			e = typeof e == "string" ? e.replace(h, "").substring(0, 5) : "", this._tryParseValue(e), !r && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+		}
+		get value() {
+			return super.value ?? "";
+		}
+		set valueAsDate(e) {
+			if (e instanceof Date && !isNaN(e.valueOf())) {
+				this._valueAsTime = {
+					hours: e.getHours(),
+					minutes: e.getMinutes()
+				};
+				let t = this._formatTime();
+				this.value !== t && (this.value = t);
+			} else this._valueAsTime = null, this.value = "";
+		}
+		get valueAsDate() {
+			if (this._valueAsTime && this._isTimeValid(this._valueAsTime)) {
+				let e = /* @__PURE__ */ new Date(0);
+				return e.setHours(this._valueAsTime.hours), e.setMinutes(this._valueAsTime.minutes), e;
+			} else return null;
+		}
+		constructor() {
+			super(), this._valueAsTime = t(this, v), this._language = new s(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => f.announce(c(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+		}
+		updateFormValue() {
+			this._tryParseValue();
+			let e = this.valueAsDate === null ? null : this._formatTime();
+			this.internals.setFormValue(e, this.value);
+		}
+		_tryParseValue(e = this.value) {
+			this._valueCache?.[0] !== e && (this._valueAsTime = this._parseValue(e), this._valueCache = [e, this._valueAsTime ?? null]);
+		}
+		_parseValue(e) {
+			let t = e?.trim();
+			if (!t) return null;
+			let n = t.match(g) ?? t.match(_);
+			return n ? {
+				hours: +n[1] || 0,
+				minutes: +n[2] || 0
+			} : null;
+		}
+		_updateValueDateFormat() {
+			if (this.valueAsDate) {
+				let e = this._formatTime();
+				this.value !== e && (super.value = e);
+			}
+		}
+		_formatTime() {
+			let e = this.valueAsDate;
+			return e ? `${String(e.getHours()).padStart(2, "0")}:${String(e.getMinutes()).padStart(2, "0")}` : "";
+		}
+		preparePastedText(e) {
+			return e.replace(h, "").substring(0, 5 - (this.textContent?.length ?? 0));
+		}
+		shouldValidate(e) {
+			return super.shouldValidate(e) || [
+				"valueAsDate",
+				"min",
+				"max",
+				"dateFilter"
+			].includes(e);
+		}
+		validate() {
+			super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", u[this.language.current]) : this.setValidityFlag("badInput", l[this.language.current]) : this._removeValidityErrors();
+		}
+		_removeValidityErrors() {
+			["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
+		}
+		_isTimeValid(e) {
+			return e.hours < 24 && e.minutes < 60;
+		}
+		_preventCharInsert(e) {
+			e.ctrlKey || e.altKey || e.metaKey || [
+				"Backspace",
+				"Tab",
+				"Enter",
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown",
+				"Delete"
+			].includes(e.key) || m.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && f.announce(d[this._language.current]));
+		}
+		_hasSelection() {
+			let e = window.getSelection()?.getRangeAt(0);
+			return !!e && e.startOffset !== e.endOffset;
+		}
+	};
+})();
+//#endregion
+export { v as t };

package/time-input.js

@@ -1,4 +1,6 @@
-import { SbbTimeInputElement as t } from "./time-input/time-input.component.js";
-export {
-  t as SbbTimeInputElement
-};
+import { t as e } from "./time-input.component-DT1BOC8m.js";
+import "./time-input.pure.js";
+//#region src/elements/time-input.ts
+e.define();
+//#endregion
+export { e as SbbTimeInputElement };

package/time-input.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./time-input.component-DT1BOC8m.js";
+export { e as SbbTimeInputElement };

package/timetable-form/timetable-form/timetable-form.component.js

@@ -1,19 +1,2 @@
-import { __esDecorate as b, __runInitializers as i } from "tslib";
-import { css as m, LitElement as c, html as n } from "lit";
-import { customElement as u } from "lit/decorators.js";
-const d = m`:host{--sbb-timetable-form-background-color: var(--sbb-background-color-1);--sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);display:flex;flex-direction:column}`;
-let y = (() => {
-  var t;
-  let s = [u("sbb-timetable-form")], a, l = [], e, o = c;
-  return t = class extends o {
-    render() {
-      return n`<slot></slot>`;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, a = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, l), e = a.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = d, i(e, l), e;
-})();
-export {
-  y as SbbTimetableFormElement
-};
+import { t as e } from "../../timetable-form.component-BqdKekNM.js";
+export { e as SbbTimetableFormElement };

package/timetable-form/timetable-form-details/timetable-form-details.component.js

@@ -1,19 +1,2 @@
-import { __esDecorate as b, __runInitializers as o } from "tslib";
-import { css as d, LitElement as n, html as m } from "lit";
-import { customElement as c } from "lit/decorators.js";
-const f = d`:host{--sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);--sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-timetable-form-details-horizontal-divider-height: 1.5rem;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);padding-block:var(--sbb-timetable-form-details-padding-block);padding-inline-start:calc(var(--sbb-size-icon-ui-small) + var(--sbb-spacing-responsive-xxxs));align-items:center}::slotted(sbb-form-field){--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem}::slotted(sbb-divider[orientation=vertical]){height:var(--sbb-timetable-form-details-horizontal-divider-height)}::slotted(:last-child){margin-inline-end:var(--sbb-timetable-form-details-padding-inline)}`;
-let g = (() => {
-  var t;
-  let l = [c("sbb-timetable-form-details")], i, s = [], e, r = n;
-  return t = class extends r {
-    render() {
-      return m`<slot></slot>`;
-    }
-  }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    b(null, i = { value: e }, l, { kind: "class", name: e.name, metadata: a }, null, s), e = i.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), t.styles = f, o(e, s), e;
-})();
-export {
-  g as SbbTimetableFormDetailsElement
-};
+import { t as e } from "../../timetable-form-details.component-DI5Mr8-O.js";
+export { e as SbbTimetableFormDetailsElement };

package/timetable-form/timetable-form-details.js

@@ -1,4 +1,4 @@
-import { SbbTimetableFormDetailsElement as t } from "./timetable-form-details/timetable-form-details.component.js";
-export {
-  t as SbbTimetableFormDetailsElement
-};
+import { t as e } from "../timetable-form-details.component-DI5Mr8-O.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-details.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
+//#endregion
+export { e as SbbTimetableFormDetailsElement };

package/timetable-form/timetable-form-field/timetable-form-field.component.js

@@ -1,32 +1,2 @@
-import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { css as f, isServer as m, html as i } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbFormFieldElement as l } from "../../form-field/form-field.js";
-const u = f`:host{display:flex;--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem;--sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);--sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1)}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate: 90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate: -90deg;--sbb-timetable-form-field-route-icon-translate: -.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}.sbb-timetable-form-field__start-route-icon{align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline);rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate)}.sbb-timetable-form-field__start-route-icon:after{--connecting-line-offset: .1875rem;--connecting-line-width: calc( (var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--connecting-line-offset) );content:"";position:absolute;inset-block-start:50%;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--connecting-line-width);margin-left:calc(var(--connecting-line-offset) * -1)}.sbb-timetable-form-field__via-route-icon{align-self:stretch;position:relative;width:var(--sbb-size-icon-ui-small);margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__via-route-icon:before{content:"";position:absolute;inset-inline-start:50%;height:100%;margin-inline-start:-.0625rem;border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color)}.sbb-timetable-form-field__via-route-icon:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:.4375rem;height:.4375rem;border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem}.sbb-form-field__space-wrapper{flex-grow:1}`;
-let g = (() => {
-  var t;
-  let n = [d("sbb-timetable-form-field")], o, a = [], e, s = l;
-  return t = class extends s {
-    constructor() {
-      super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
-    }
-    connectedCallback() {
-      super.connectedCallback(), !m && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
-    }
-    render() {
-      return i`
-      ${this._routeIcon ? i` <sbb-icon
-            name="route-circle-start-small"
-            class="sbb-timetable-form-field__start-route-icon"
-          ></sbb-icon>` : i` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
-      ${super.render()}
-    `;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    b(null, o = { value: e }, n, { kind: "class", name: e.name, metadata: r }, null, a), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = [l.styles, u], c(e, a), e;
-})();
-export {
-  g as SbbTimetableFormFieldElement
-};
+import { t as e } from "../../timetable-form-field.component-2kEWygEC.js";
+export { e as SbbTimetableFormFieldElement };

package/timetable-form/timetable-form-field.js

@@ -1,4 +1,4 @@
-import { SbbTimetableFormFieldElement as b } from "./timetable-form-field/timetable-form-field.component.js";
-export {
-  b as SbbTimetableFormFieldElement
-};
+import { t as e } from "../timetable-form-field.component-2kEWygEC.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-field.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
+//#endregion
+export { e as SbbTimetableFormFieldElement };