@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773393164

package/header/common.js

@@ -1,5 +1,6 @@
-import { t as e } from "../header-action-common-C2YPvOxq.js";
-//#region src/elements/header/common.ts
-console.warn("The entrypoint '@sbb-esta/elements/header/common.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
-//#endregion
-export { e as SbbHeaderActionCommonElementMixin };
+import { SbbHeaderActionCommonElementMixin as n } from "./common/header-action-common.js";
+console.warn(`The entrypoint '@sbb-esta/elements/header/common.js' has been deprecated.
+Use either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.`);
+export {
+  n as SbbHeaderActionCommonElementMixin
+};

package/header/header/header.component.js

@@ -1,2 +1,154 @@
-import { t as e } from "../../header.component-BssLZ6b7.js";
-export { e as SbbHeaderElement };
+var U = (s) => {
+  throw TypeError(s);
+};
+var P = (s, i, r) => i.has(s) || U("Cannot " + r);
+var p = (s, i, r) => (P(s, i, "read from private field"), r ? r.call(s) : i.get(s)), u = (s, i, r) => i.has(s) ? U("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, m) => (P(s, i, "write to private field"), m ? m.call(s, r) : i.set(s, r), r);
+import { __esDecorate as g, __runInitializers as l } from "tslib";
+import { css as A, isServer as j, html as q } from "lit";
+import { property as _, state as B } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as D } from "../../core/a11y.js";
+import { SbbElement as N } from "../../core/base-elements.js";
+import { forceType as F, idReference as R } from "../../core/decorators.js";
+import { isLean as Z } from "../../core/dom.js";
+import { boxSizingStyles as M } from "../../core/styles.js";
+const Q = A`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host{display:block;height:var(--sbb-header-height)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media(forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, V = "[aria-controls][aria-expanded='true']";
+let se = (() => {
+  var d, h, c, b, f, a;
+  let s = N, i, r = [], m = [], v, x = [], O = [], w, y = [], S = [], z, k = [], E = [], T, C = [], L = [];
+  return a = class extends s {
+    constructor() {
+      super();
+      u(this, d);
+      u(this, h);
+      u(this, c);
+      u(this, b);
+      u(this, f);
+      n(this, d, l(this, r, !1)), n(this, h, (l(this, m), l(this, x, null))), n(this, c, (l(this, O), l(this, y, !1))), n(this, b, (l(this, S), l(this, k, Z() ? "s" : "m"))), n(this, f, (l(this, E), l(this, C, !0))), this._scrollElement = l(this, L), this._lastScroll = 0, this.addController(new D(this));
+    }
+    /**
+     * Whether to allow the header content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    get expanded() {
+      return p(this, d);
+    }
+    set expanded(e) {
+      n(this, d, e);
+    }
+    /**
+     * The element's id or the element on which the scroll listener is attached.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get scrollOrigin() {
+      return p(this, h);
+    }
+    set scrollOrigin(e) {
+      n(this, h, e);
+    }
+    /** Whether the header should hide and show on scroll. */
+    get hideOnScroll() {
+      return p(this, c);
+    }
+    set hideOnScroll(e) {
+      n(this, c, e);
+    }
+    /**
+     * Size of the header, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return p(this, b);
+    }
+    set size(e) {
+      n(this, b, e);
+    }
+    get _headerOnTop() {
+      return p(this, f);
+    }
+    set _headerOnTop(e) {
+      n(this, f, e);
+    }
+    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+    connectedCallback() {
+      super.connectedCallback(), this.hasUpdated && this._updateScrollListener();
+    }
+    /** Removes the scroll listener, if previously attached. */
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort();
+    }
+    requestUpdate(e, t, o) {
+      super.requestUpdate(e, t, o), !j && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._updateScrollListener();
+    }
+    _updateScrollListener() {
+      const e = this.scrollOrigin ?? document;
+      if (e === this._scrollElement || (this._scrollEventsController?.abort(), this._scrollElement = e, !this._scrollElement))
+        return;
+      this._scrollEventsController = new AbortController(), this._scrollFunction = this._getScrollFunction.bind(this), this._scrollElement.addEventListener("scroll", this._scrollFunction, {
+        passive: !0,
+        signal: this._scrollEventsController.signal
+      });
+      const t = this._getCurrentScrollProperty("scrollTop");
+      this._lastScroll = t <= 0 ? 0 : t;
+    }
+    /** Returns the correct function to attach on scroll. */
+    _getScrollFunction() {
+      return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
+    }
+    /** Returns the requested property of the scrollContext. */
+    _getCurrentScrollProperty(e) {
+      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : this._scrollElement?.[e] || 0;
+    }
+    /**
+     * Sets the correct value for `scrollTop`, then:
+     * - apply the shadow if the element/document has been scrolled down;
+     * - hides the header, remove the shadow and possibly close any open menu on the header if it is not visible anymore;
+     * - shows the header and re-apply the shadow if the element/document has been scrolled up.
+     */
+    _scrollListener() {
+      const e = this._getCurrentScrollProperty("scrollTop");
+      this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleState("shadow", e !== 0), e > this.offsetHeight && e > 0 && this._lastScroll < e && this._closeOpenOverlays(), e > this.offsetHeight * 2 ? (this._headerOnTop = !1, e > 0 && this._lastScroll < e ? ["shadow", "visible"].forEach((t) => this.internals.states.delete(t)) : ["fixed", "shadow", "animated", "visible"].forEach((t) => this.internals.states.add(t))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["shadow", "animated", "fixed", "visible"].forEach((t) => this.internals.states.delete(t))), this._lastScroll = e <= 0 ? 0 : e);
+    }
+    /** Apply the shadow if the element/document has been scrolled down. */
+    _scrollShadowListener() {
+      this.toggleState("shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+    }
+    _closeOpenOverlays() {
+      if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])"))
+        return;
+      const e = Array.from(this.querySelectorAll(V));
+      for (const t of e) {
+        const o = t.getAttribute("aria-controls"), I = document.getElementById(o);
+        typeof I?.close == "function" && I.close();
+      }
+    }
+    render() {
+      return q`
+      <header class="sbb-header">
+        <div class="sbb-header__wrapper">
+          <slot></slot>
+        </div>
+      </header>
+    `;
+    }
+  }, d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i = [F(), _({ reflect: !0, type: Boolean })], v = [R(), _({ attribute: "scroll-origin" })], w = [F(), _({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], z = [_({ reflect: !0 })], T = [B()], g(a, null, i, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, o) => {
+      t.expanded = o;
+    } }, metadata: e }, r, m), g(a, null, v, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, o) => {
+      t.scrollOrigin = o;
+    } }, metadata: e }, x, O), g(a, null, w, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, o) => {
+      t.hideOnScroll = o;
+    } }, metadata: e }, y, S), g(a, null, z, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
+      t.size = o;
+    } }, metadata: e }, k, E), g(a, null, T, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, o) => {
+      t._headerOnTop = o;
+    } }, metadata: e }, C, L), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.elementName = "sbb-header", a.styles = [M, Q], a;
+})();
+export {
+  se as SbbHeaderElement
+};

package/header/header-button/header-button.component.js

@@ -1,10 +1,9 @@
-import { SbbButtonBaseElement as e } from "../../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as t } from "../common/header-action-common.js";
-//#region src/elements/header/header-button/header-button.component.ts
-var n = class extends t(e) {
-	static {
-		this.elementName = "sbb-header-button";
-	}
+import { SbbButtonBaseElement as m } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as o } from "../common/header-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-header-button";
+let e = t;
+export {
+  e as SbbHeaderButtonElement
 };
-//#endregion
-export { n as SbbHeaderButtonElement };

package/header/header-button.js

@@ -1,4 +1,7 @@
 import { SbbHeaderButtonElement as e } from "./header-button/header-button.component.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-button.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
-//#endregion
-export { e as SbbHeaderButtonElement };
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/header/header-button.js' has been deprecated.
+Use either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.`);
+export {
+  e as SbbHeaderButtonElement
+};

package/header/header-environment/header-environment.component.js

@@ -1,2 +1,29 @@
-import { t as e } from "../../header-environment.component-KqUmsOPQ.js";
-export { e as SbbHeaderEnvironmentElement };
+import { MutationController as s } from "@lit-labs/observers/mutation-controller.js";
+import { css as n, html as r } from "lit";
+import { SbbElement as o } from "../../core/base-elements.js";
+import { boxSizingStyles as a } from "../../core/styles.js";
+const i = n`:host{position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center;font-size:var(--sbb-text-font-size-xxs);font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:dir(rtl)){--sbb-header-environment-rotate: -45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color: var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color: var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color: var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color: var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color: var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{position:absolute;color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x)}`, e = class e extends o {
+  constructor() {
+    super(), this._env = null, this.addController(new s(this, {
+      config: { characterData: !0, subtree: !0 },
+      callback: () => {
+        this._slottedTextChange();
+      }
+    }));
+  }
+  _slottedTextChange() {
+    this._env && this.internals.states.delete(`env-${this._env}`), this._env = this.textContent?.trim() ?? "", this._env && this.internals.states.add(`env-${this._env}`);
+  }
+  render() {
+    return r`
+      <span class="sbb-header-environment__text">
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+e.elementName = "sbb-header-environment", e.styles = [a, i];
+let t = e;
+export {
+  t as SbbHeaderEnvironmentElement
+};

package/header/header-environment.js

@@ -1,4 +1,7 @@
-import { t as e } from "../header-environment.component-KqUmsOPQ.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-environment.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
-//#endregion
-export { e as SbbHeaderEnvironmentElement };
+import { SbbHeaderEnvironmentElement as e } from "./header-environment/header-environment.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/header/header-environment.js' has been deprecated.
+Use either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.`);
+export {
+  e as SbbHeaderEnvironmentElement
+};

package/header/header-link/header-link.component.js

@@ -1,10 +1,9 @@
-import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as t } from "../common/header-action-common.js";
-//#region src/elements/header/header-link/header-link.component.ts
-var n = class extends t(e) {
-	static {
-		this.elementName = "sbb-header-link";
-	}
+import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as o } from "../common/header-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-header-link";
+let e = t;
+export {
+  e as SbbHeaderLinkElement
 };
-//#endregion
-export { n as SbbHeaderLinkElement };

package/header/header-link.js

@@ -1,4 +1,7 @@
 import { SbbHeaderLinkElement as e } from "./header-link/header-link.component.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-link.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
-//#endregion
-export { e as SbbHeaderLinkElement };
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/header/header-link.js' has been deprecated.
+Use either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.`);
+export {
+  e as SbbHeaderLinkElement
+};

package/header/header.js

@@ -1,4 +1,7 @@
-import { t as e } from "../header.component-BssLZ6b7.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
-//#endregion
-export { e as SbbHeaderElement };
+import { SbbHeaderElement as e } from "./header/header.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/header/header.js' has been deprecated.
+Use either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.`);
+export {
+  e as SbbHeaderElement
+};

package/header.js

@@ -1,9 +1,16 @@
-import { t as e } from "./header-action-common-C2YPvOxq.js";
-import { SbbHeaderButtonElement as t } from "./header/header-button/header-button.component.js";
-import { t as n } from "./header-environment.component-KqUmsOPQ.js";
-import { SbbHeaderLinkElement as r } from "./header/header-link/header-link.component.js";
-import { t as i } from "./header.component-BssLZ6b7.js";
-import "./header.pure.js";
-i.define(), t.define(), n.define(), r.define();
-//#endregion
-export { e as SbbHeaderActionCommonElementMixin, t as SbbHeaderButtonElement, i as SbbHeaderElement, n as SbbHeaderEnvironmentElement, r as SbbHeaderLinkElement };
+import { SbbHeaderActionCommonElementMixin as p } from "./header/common/header-action-common.js";
+import { SbbHeaderButtonElement as e } from "./header/header-button/header-button.component.js";
+import { SbbHeaderEnvironmentElement as m } from "./header/header-environment/header-environment.component.js";
+import { SbbHeaderLinkElement as n } from "./header/header-link/header-link.component.js";
+import { SbbHeaderElement as r } from "./header/header/header.component.js";
+r.define();
+e.define();
+m.define();
+n.define();
+export {
+  p as SbbHeaderActionCommonElementMixin,
+  e as SbbHeaderButtonElement,
+  r as SbbHeaderElement,
+  m as SbbHeaderEnvironmentElement,
+  n as SbbHeaderLinkElement
+};

package/header.pure.js

@@ -1,6 +1,12 @@
-import { t as e } from "./header-action-common-C2YPvOxq.js";
-import { SbbHeaderButtonElement as t } from "./header/header-button/header-button.component.js";
-import { t as n } from "./header-environment.component-KqUmsOPQ.js";
-import { SbbHeaderLinkElement as r } from "./header/header-link/header-link.component.js";
-import { t as i } from "./header.component-BssLZ6b7.js";
-export { e as SbbHeaderActionCommonElementMixin, t as SbbHeaderButtonElement, i as SbbHeaderElement, n as SbbHeaderEnvironmentElement, r as SbbHeaderLinkElement };
+import { SbbHeaderActionCommonElementMixin as o } from "./header/common/header-action-common.js";
+import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.component.js";
+import { SbbHeaderEnvironmentElement as b } from "./header/header-environment/header-environment.component.js";
+import { SbbHeaderLinkElement as E } from "./header/header-link/header-link.component.js";
+import { SbbHeaderElement as d } from "./header/header/header.component.js";
+export {
+  o as SbbHeaderActionCommonElementMixin,
+  m as SbbHeaderButtonElement,
+  d as SbbHeaderElement,
+  b as SbbHeaderEnvironmentElement,
+  E as SbbHeaderLinkElement
+};

package/icon/icon-base.js

@@ -1,2 +1,105 @@
-import { t as e } from "../icon-base-BYJzaEDb.js";
-export { e as SbbIconBase };
+var I = (s) => {
+  throw TypeError(s);
+};
+var w = (s, a, i) => a.has(s) || I("Cannot " + i);
+var h = (s, a, i) => (w(s, a, "read from private field"), i ? i.call(s) : a.get(s)), g = (s, a, i) => a.has(s) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), u = (s, a, i, l) => (w(s, a, "write to private field"), l ? l.call(s, i) : a.set(s, i), i);
+import { __esDecorate as v, __runInitializers as r } from "tslib";
+import { css as j, html as N } from "lit";
+import { state as k, property as E } from "lit/decorators.js";
+import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
+import { until as T } from "lit/directives/until.js";
+import { SbbElement as C } from "../core/base-elements.js";
+import { forceType as D } from "../core/decorators.js";
+import { boxSizingStyles as H } from "../core/styles.js";
+import { getSvgContent as L } from "./icon-request.js";
+const M = j`:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host(:is(:state(empty),[state--empty])){--sbb-icon-default-dimension: 0}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-extra-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-extra-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`, x = "default";
+let W = (() => {
+  var c, m, p, n;
+  let s = C, a, i = [], l = [], d, f = [], _ = [], b, y = [], z = [];
+  return n = class extends s {
+    constructor() {
+      super();
+      g(this, c, r(this, i, x));
+      g(this, m, (r(this, l), r(this, f, null)));
+      g(this, p, (r(this, _), r(this, y, !1)));
+      r(this, z), this.internals.states.add("empty");
+    }
+    get _svgNamespace() {
+      return h(this, c);
+    }
+    set _svgNamespace(e) {
+      u(this, c, e);
+    }
+    /**
+     * The icon svg content rendered on the page: <svg>...</svg>.
+     */
+    get _svgIcon() {
+      return h(this, m);
+    }
+    set _svgIcon(e) {
+      u(this, m, e);
+    }
+    /**
+     * When set to `true`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     * @default false
+     */
+    get noSanitize() {
+      return h(this, p);
+    }
+    set noSanitize(e) {
+      u(this, p, e);
+    }
+    async loadSvgIcon(e) {
+      if (!e)
+        return;
+      const [t, o] = this._splitIconName(e);
+      this._svgNamespace && this.internals.states.delete(`namespace-${this._svgNamespace}`), this._svgNamespace = t, this._svgNamespace && this.internals.states.add(`namespace-${this._svgNamespace}`);
+      const S = this.fetchSvgIcon(this._svgNamespace, o);
+      this._svgIcon = S.then(($) => O($));
+      try {
+        this.toggleState("empty", !await S);
+      } catch {
+        this.internals.states.add("empty");
+      }
+    }
+    async fetchSvgIcon(e, t) {
+      return await L(e, t, !this.noSanitize);
+    }
+    _splitIconName(e) {
+      if (!e)
+        return ["", ""];
+      const t = e.split(":");
+      switch (t.length) {
+        case 1:
+          return [x, t[0]];
+        case 2:
+          return t;
+        default:
+          throw Error(`Invalid icon name: "${e}"`);
+      }
+    }
+    render() {
+      return N`<span class="sbb-icon-inner"
+      >${T(
+        this._svgIcon,
+        // To reserve space, we need an empty svg to apply dimension to.
+        N`<svg width="0" height="0"></svg>`
+      )}</span
+    >`;
+    }
+  }, c = new WeakMap(), m = new WeakMap(), p = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    a = [k()], d = [k()], b = [D(), E({ attribute: "no-sanitize", type: Boolean })], v(n, null, a, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, o) => {
+      t._svgNamespace = o;
+    } }, metadata: e }, i, l), v(n, null, d, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (t) => "_svgIcon" in t, get: (t) => t._svgIcon, set: (t, o) => {
+      t._svgIcon = o;
+    } }, metadata: e }, f, _), v(n, null, b, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (t) => "noSanitize" in t, get: (t) => t.noSanitize, set: (t, o) => {
+      t.noSanitize = o;
+    } }, metadata: e }, y, z), e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = [H, M], n.role = "img", n;
+})();
+export {
+  W as SbbIconBase
+};

package/icon/icon-name-mixin.js

@@ -1,64 +1,55 @@
-import "../icon-base-BYJzaEDb.js";
+var l = (e) => {
+  throw TypeError(e);
+};
+var u = (e, t, a) => t.has(e) || l("Cannot " + a);
+var N = (e, t, a) => (u(e, t, "read from private field"), a ? a.call(e) : t.get(e)), b = (e, t, a) => t.has(e) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), d = (e, t, a, i) => (u(e, t, "write to private field"), i ? i.call(e, a) : t.set(e, a), a);
+import { __esDecorate as y, __runInitializers as p } from "tslib";
+import { nothing as h, html as _ } from "lit";
+import { property as I } from "lit/decorators.js";
+import { forceType as S, omitEmptyConverter as g } from "../core/decorators.js";
 import "./icon.component.js";
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { html as n, nothing as r } from "lit";
-import { property as i } from "lit/decorators.js";
-import { forceType as a, omitEmptyConverter as o } from "../core/decorators.js";
-//#region src/elements/icon/icon-name-mixin.ts
-var s = (s) => (() => {
-	let c = s, l, u = [], d = [];
-	return class extends c {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-			l = [a(), i({
-				attribute: "icon-name",
-				converter: o
-			})], e(this, null, l, {
-				kind: "accessor",
-				name: "iconName",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "iconName" in e,
-					get: (e) => e.iconName,
-					set: (e, t) => {
-						e.iconName = t;
-					}
-				},
-				metadata: t
-			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		#e = t(this, u, "");
-		get iconName() {
-			return this.#e;
-		}
-		set iconName(e) {
-			this.#e = e;
-		}
-		renderIconSlot(e) {
-			let t = this._renderIconName();
-			return n`
+const k = (e) => (() => {
+  var c, r;
+  let a = e, i, m = [], s = [];
+  return r = class extends a {
+    constructor() {
+      super(...arguments);
+      b(this, c, p(this, m, ""));
+      p(this, s);
+    }
+    /**
+     * The icon name we want to use, choose from the small icon variants
+     * from the ui-icons category from here
+     * https://icons.app.sbb.ch.
+     */
+    get iconName() {
+      return N(this, c);
+    }
+    set iconName(n) {
+      d(this, c, n);
+    }
+    renderIconSlot(n) {
+      const o = this._renderIconName();
+      return _`
         <slot name="icon">
-          ${t ? n`<sbb-icon name=${t} class=${e || r}></sbb-icon>` : r}
+          ${o ? _`<sbb-icon name=${o} class=${n || h}></sbb-icon>` : h}
         </slot>
       `;
-		}
-		renderIconName() {
-			return this.iconName;
-		}
-		_renderIconName() {
-			let e = this.renderIconName();
-			return this.toggleState("has-icon-name", !!e), e;
-		}
-		constructor() {
-			super(...arguments), t(this, d);
-		}
-	};
+    }
+    renderIconName() {
+      return this.iconName;
+    }
+    _renderIconName() {
+      const n = this.renderIconName();
+      return this.toggleState("has-icon-name", !!n), n;
+    }
+  }, c = new WeakMap(), (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    i = [S(), I({ attribute: "icon-name", converter: g })], y(r, null, i, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (o) => "iconName" in o, get: (o) => o.iconName, set: (o, f) => {
+      o.iconName = f;
+    } }, metadata: n }, m, s), n && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), r;
 })();
-//#endregion
-export { s as SbbIconNameMixin };
+export {
+  k as SbbIconNameMixin
+};

package/icon/icon-request.js

@@ -1,24 +1,30 @@
-import { validateContent as e } from "./icon-validate.js";
-import { isServer as t } from "lit";
-import { readConfig as n } from "../core/config.js";
-//#region src/elements/icon/icon-request.ts
-var r = "https://icons.app.sbb.ch/", i = (/* @__PURE__ */ new Map()).set("default", `${r}icons/`).set("picto", `${r}picto/`), a = /* @__PURE__ */ new Map(), o = (r, o, s) => {
-	let c = n().icon ?? {}, l = c.namespaces?.get(r) ?? i.get(r);
-	if (l == null) throw Error(`Unable to find the namespace "${r}". Please register your custom namespace.`);
-	let u = `${l}${o}.svg`, d = a.get(u);
-	if (!d) if (typeof fetch < "u" && !t) d = (c.interceptor ?? ((e) => e.request()))({
-		namespace: r,
-		name: o,
-		url: u,
-		request: () => fetch(u).then(async (t) => {
-			if (!t.ok) throw Error(`Failed to load icon ${r}:${o}`);
-			return e(await t.text(), s);
-		}).catch((e) => {
-			throw Error(e);
-		})
-	}), a.set(u, d);
-	else return Promise.resolve("");
-	return d;
+import { isServer as p } from "lit";
+import { readConfig as l } from "../core/config.js";
+import { validateContent as u } from "./icon-validate.js";
+const i = "https://icons.app.sbb.ch/", d = (/* @__PURE__ */ new Map()).set("default", `${i}icons/`).set("picto", `${i}picto/`), a = /* @__PURE__ */ new Map(), $ = (e, n, f) => {
+  const s = l().icon ?? {}, c = s.namespaces?.get(e) ?? d.get(e);
+  if (c == null)
+    throw Error(`Unable to find the namespace "${e}". Please register your custom namespace.`);
+  const o = `${c}${n}.svg`;
+  let r = a.get(o);
+  if (!r)
+    if (typeof fetch < "u" && !p)
+      r = (s.interceptor ?? ((t) => t.request()))({
+        namespace: e,
+        name: n,
+        url: o,
+        request: () => fetch(o).then(async (t) => {
+          if (!t.ok)
+            throw new Error(`Failed to load icon ${e}:${n}`);
+          return u(await t.text(), f);
+        }).catch((t) => {
+          throw Error(t);
+        })
+      }), a.set(o, r);
+    else
+      return Promise.resolve("");
+  return r;
+};
+export {
+  $ as getSvgContent
 };
-//#endregion
-export { o as getSvgContent };