@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/header/header/header.d.ts

@@ -0,0 +1,59 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+
+declare const SbbHeaderElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It displays a header section for the page.
+ *
+ * @slot - Use the unnamed slot to add actions or content to the header.
+ * @slot logo - Slot used to render the logo on the right side (sbb-logo as default).
+ * @cssprop [--sbb-header-z-index=10] - Can be used to modify the z-index of the header.
+ * @cssprop [--sbb-header-height=zero-small:var(--sbb-spacing-fixed-14x);medium-ultra:var(--sbb-spacing-fixed-24x)] - Can be used to modify height of the header.
+ */
+export declare class SbbHeaderElement extends SbbHeaderElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * Whether to allow the header content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    expanded: boolean;
+    /** The element's id or the element on which the scroll listener is attached. */
+    set scrollOrigin(value: string | HTMLElement | Document);
+    get scrollOrigin(): string | HTMLElement | Document;
+    private _scrollOrigin;
+    /** Whether the header should hide and show on scroll. */
+    hideOnScroll: boolean;
+    private _headerOnTop;
+    private _scrollElement;
+    private _scrollEventsController;
+    private _scrollFunction;
+    private _lastScroll;
+    private _updateScrollOrigin;
+    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+    connectedCallback(): void;
+    /** Removes the scroll listener, if previously attached. */
+    disconnectedCallback(): void;
+    /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
+    private _setListenerOnScrollElement;
+    /** Returns the correct function to attach on scroll. */
+    private _getScrollFunction;
+    /** Returns the requested property of the scrollContext. */
+    private _getCurrentScrollProperty;
+    /**
+     * 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.
+     */
+    private _scrollListener;
+    /** Apply the shadow if the element/document has been scrolled down. */
+    private _scrollShadowListener;
+    private _closeOpenOverlays;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header': SbbHeaderElement;
+    }
+}
+export {};
+//# sourceMappingURL=header.d.ts.map

package/header/header/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3F,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,qBAA6B;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACuB,YAAY,UACpF;IAEC,OAAO,CAAC,YAAY,CAAQ;IAErC,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAc5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/header/header-button/header-button.d.ts

@@ -0,0 +1,18 @@
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+
+declare const SbbHeaderButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbHeaderActionCommonElementMixinType> & typeof SbbButtonBaseElement;
+/**
+ * It displays a button element that can be used in the `sbb-header` component.
+ *
+ * @slot icon - Slot used to render the button icon.
+ * @slot - Use the unnamed slot to add content to the `sbb-header-button`.
+ */
+export declare class SbbHeaderButtonElement extends SbbHeaderButtonElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header-button': SbbHeaderButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=header-button.d.ts.map

package/header/header-button/header-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-button/header-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,2BAE3C;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/header/header-button.d.ts

@@ -0,0 +1,2 @@
+export * from './header-button/header-button.js';
+//# sourceMappingURL=header-button.d.ts.map

package/header/header-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-button.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

package/header/header-button.js

@@ -0,0 +1,18 @@
+import { customElement as l } from "lit/decorators.js";
+import { SbbButtonBaseElement as p } from "../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as f } from "./common.js";
+var a = Object.defineProperty, i = Object.getOwnPropertyDescriptor, u = (b, t, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? i(t, o) : t, m = b.length - 1, n; m >= 0; m--)
+    (n = b[m]) && (e = (r ? n(t, o, e) : n(e)) || e);
+  return r && e && a(t, o, e), e;
+};
+let s = class extends f(
+  p
+) {
+};
+s = u([
+  l("sbb-header-button")
+], s);
+export {
+  s as SbbHeaderButtonElement
+};

package/header/header-link/header-link.d.ts

@@ -0,0 +1,18 @@
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+
+declare const SbbHeaderLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbHeaderActionCommonElementMixinType> & typeof SbbLinkBaseElement;
+/**
+ * It displays a link element that can be used in the `sbb-header` component.
+ *
+ * @slot icon - Slot used to render the link icon.
+ * @slot - Use the unnamed slot to add content to the `sbb-header-link`.
+ */
+export declare class SbbHeaderLinkElement extends SbbHeaderLinkElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header-link': SbbHeaderLinkElement;
+    }
+}
+export {};
+//# sourceMappingURL=header-link.d.ts.map

package/header/header-link/header-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-link/header-link.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAGjE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,yBAAqD;CAAG;AAElG,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/header/header-link.d.ts

@@ -0,0 +1,2 @@
+export * from './header-link/header-link.js';
+//# sourceMappingURL=header-link.d.ts.map

package/header/header-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-link.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/header/header-link.js

@@ -0,0 +1,16 @@
+import { customElement as s } from "lit/decorators.js";
+import { SbbLinkBaseElement as i } from "../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as p } from "./common.js";
+var f = Object.defineProperty, a = Object.getOwnPropertyDescriptor, v = (b, r, m, t) => {
+  for (var e = t > 1 ? void 0 : t ? a(r, m) : r, n = b.length - 1, o; n >= 0; n--)
+    (o = b[n]) && (e = (t ? o(r, m, e) : o(e)) || e);
+  return t && e && f(r, m, e), e;
+};
+let l = class extends p(i) {
+};
+l = v([
+  s("sbb-header-link")
+], l);
+export {
+  l as SbbHeaderLinkElement
+};

package/header/header.d.ts

@@ -0,0 +1,2 @@
+export * from './header/header.js';
+//# sourceMappingURL=header.d.ts.map

package/header/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/header/header.js

@@ -0,0 +1,120 @@
+import { css as h, LitElement as c, isServer as b, html as f } from "lit";
+import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as m } from "../core/a11y.js";
+import { findReferencedElement as p } from "../core/dom.js";
+import { SbbHydrationMixin as g } from "../core/mixins.js";
+import "../logo.js";
+const _ = h`*,:before,:after{box-sizing:border-box}:host{--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0;display:block;height:var(--sbb-header-height)}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-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][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-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][data-fixed][data-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-color-white);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([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@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-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{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-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::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(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) 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)}}`;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (o = (r ? n(t, s, o) : n(o)) || o);
+  return r && o && w(t, s, o), o;
+};
+const y = "[aria-controls][aria-expanded='true']";
+let i = class extends g(c) {
+  constructor() {
+    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this._headerOnTop = !0, this._lastScroll = 0;
+  }
+  set scrollOrigin(e) {
+    const t = this._scrollOrigin;
+    this._scrollOrigin = e, this._updateScrollOrigin(this._scrollOrigin, t);
+  }
+  get scrollOrigin() {
+    return this._scrollOrigin;
+  }
+  _updateScrollOrigin(e, t) {
+    if (e !== t) {
+      this._setListenerOnScrollElement(e);
+      const s = this._getCurrentScrollProperty("scrollTop");
+      this._lastScroll = s <= 0 ? 0 : s;
+    }
+  }
+  /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+  connectedCallback() {
+    super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new m(this);
+  }
+  /** Removes the scroll listener, if previously attached. */
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._scrollEventsController) == null || e.abort();
+  }
+  /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
+  _setListenerOnScrollElement(e) {
+    var t, s;
+    (t = this._scrollEventsController) == null || t.abort(), this._scrollEventsController = new AbortController(), this._scrollElement = p(e) || (b ? null : document), this._scrollFunction = this._getScrollFunction.bind(this), (s = this._scrollElement) == null || s.addEventListener("scroll", this._scrollFunction, {
+      passive: !0,
+      signal: this._scrollEventsController.signal
+    });
+  }
+  /** 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) {
+    var t;
+    return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[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.toggleAttribute("data-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 ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach(
+      (t) => this.toggleAttribute(t, !0)
+    )) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach(
+      (t) => this.removeAttribute(t)
+    )), this._lastScroll = e <= 0 ? 0 : e);
+  }
+  /** Apply the shadow if the element/document has been scrolled down. */
+  _scrollShadowListener() {
+    this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+  }
+  _closeOpenOverlays() {
+    if (this.hasAttribute("data-has-visible-focus-within"))
+      return;
+    const e = Array.from(
+      this.querySelectorAll(y)
+    );
+    for (const t of e) {
+      const s = t.getAttribute("aria-controls"), r = document.getElementById(s);
+      typeof (r == null ? void 0 : r.close) == "function" && r.close();
+    }
+  }
+  render() {
+    return f`
+      <header class="sbb-header">
+        <div class="sbb-header__wrapper">
+          <slot></slot>
+          <div class="sbb-header__logo">
+            <slot name="logo">
+              <sbb-logo protective-room="none"></sbb-logo>
+            </slot>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+};
+i.styles = _;
+a([
+  d({ reflect: !0, type: Boolean })
+], i.prototype, "expanded", 2);
+a([
+  d({ attribute: "scroll-origin" })
+], i.prototype, "scrollOrigin", 1);
+a([
+  d({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
+], i.prototype, "hideOnScroll", 2);
+a([
+  u()
+], i.prototype, "_headerOnTop", 2);
+i = a([
+  v("sbb-header")
+], i);
+export {
+  i as SbbHeaderElement
+};

package/header.d.ts

@@ -0,0 +1,5 @@
+export * from './header/header.js';
+export * from './header/header-button.js';
+export * from './header/header-link.js';
+export * from './header/common.js';
+//# sourceMappingURL=header.d.ts.map

package/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/elements/header.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC"}

package/header.js

@@ -0,0 +1,4 @@
+export * from "./header/header.js";
+export * from "./header/header-button.js";
+export * from "./header/header-link.js";
+export * from "./header/common.js";

package/icon/icon-base.d.ts

@@ -0,0 +1,28 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+/**
+ * @cssprop [--sbb-icon-svg-width=auto] - Can be used to set a custom width.
+ * @cssprop [--sbb-icon-svg-height=auto] - Can be used to set a custom height.
+ */
+export declare abstract class SbbIconBase extends LitElement {
+    static styles: CSSResultGroup;
+    private static readonly _defaultNamespace;
+    private _svgNamespace;
+    /**
+     * The icon svg content rendered on the page: <svg>...</svg>.
+     */
+    private _svgIcon?;
+    /**
+     * 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
+     */
+    noSanitize: boolean;
+    protected loadSvgIcon(iconName: string): Promise<void>;
+    protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
+    private _splitIconName;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=icon-base.d.ts.map

package/icon/icon-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-base.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAYvC;;;GAGG;AACH,8BAIsB,WAAY,SAAQ,UAAU;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAa;IAE7C,OAAO,CAAC,aAAa,CAAiC;IAE/D;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAC,CAAuD;IAEjF;;;;;OAKG;IAC2D,UAAU,UAAS;cAEjE,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;cAkB5C,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI9E,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAS5C"}

package/icon/icon-name-mixin.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, TemplateResult } from 'lit';
+import { AbstractConstructor } from '../core/mixins.js';
+
+export declare class SbbIconNameMixinType {
+    iconName?: string;
+    protected renderIconSlot(classname?: string): TemplateResult;
+}
+/**
+ * Enhance your component with an iconName property and provides a template for the icon slot.
+ */
+export declare const SbbIconNameMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbIconNameMixinType> & T;
+//# sourceMappingURL=icon-name-mixin.d.ts.map

package/icon/icon-name-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-name-mixin.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-name-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,WAAW,CAAC;AAEnB,MAAM,CAAC,OAAO,OAAO,oBAAoB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc;CAC7D;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,0DACf,CAAC,KACZ,oBAAoB,oBAAoB,CAAC,GAAG,CAqB9C,CAAC"}

package/icon/icon-request.d.ts

@@ -0,0 +1,3 @@
+/** Fetches icon svg content from providers and asserts only one request per icon is made. */
+export declare const getSvgContent: (namespace: string, name: string, sanitize: boolean) => Promise<string>;
+//# sourceMappingURL=icon-request.d.ts.map

package/icon/icon-request.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-request.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-request.ts"],"names":[],"mappings":"AAYA,6FAA6F;AAC7F,eAAO,MAAM,aAAa,cACb,MAAM,QACX,MAAM,YACF,OAAO,KAChB,QAAQ,MAAM,CAgDhB,CAAC"}

package/icon/icon-validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Sanitizes the SVG element and all its child nodes.
+ * Does not allow `<script>` elements, or any attributes that start with `on`, such as `onclick`.
+ */
+export declare const isValid: (elm: HTMLElement) => boolean;
+/**
+ * Validates the SVG content by checking that it has only one root element `<svg>`,
+ * adding the `color-immutable` class if the `colorImmutable` option is set to `true`,
+ * and sanitizing the provided content as long as the `sanitize` property is not explicitly set to `false`.
+ */
+export declare const validateContent: (svgContent: string, sanitize?: boolean, colorImmutable?: boolean) => string;
+//# sourceMappingURL=icon-validate.d.ts.map

package/icon/icon-validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-validate.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-validate.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,OAAO,QAAS,WAAW,KAAG,OAsB1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,eACd,MAAM,mDAGjB,MA6BF,CAAC"}

package/icon/icon.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValues } from 'lit';
+import { SbbIconBase } from './icon-base.js';
+
+/**
+ * It displays an icon loaded from a registered namespace.
+ */
+export declare class SbbIconElement extends SbbIconBase {
+    /**
+     * The provided name consisting of the namespace and the name of the icon.
+     * If the namespace is missing, the default namespace "sbb" will be used.
+     * E.g. `name` (will use "sbb" as namespace) or `namespace:name`.
+     */
+    name: string;
+    private _defaultAriaLabel;
+    protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-icon': SbbIconElement;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

package/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;cAEN,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAM/E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/icon.d.ts

@@ -0,0 +1,6 @@
+export * from './icon/icon.js';
+export * from './icon/icon-base.js';
+export * from './icon/icon-request.js';
+export * from './icon/icon-validate.js';
+export * from './icon/icon-name-mixin.js';
+//# sourceMappingURL=icon.d.ts.map

package/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/elements/icon.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/icon.js

@@ -0,0 +1,174 @@
+import { state as g, property as h, customElement as y } from "lit/decorators.js";
+import { css as N, LitElement as I, html as u, nothing as b } from "lit";
+import { unsafeHTML as $ } from "lit/directives/unsafe-html.js";
+import { until as A } from "lit/directives/until.js";
+import { hostAttributes as S } from "./core/decorators.js";
+import { readConfig as L } from "./core/config.js";
+const E = (e) => typeof e == "string", _ = (e) => {
+  if (e.nodeType === 1) {
+    if (e.nodeName.toLowerCase() === "script")
+      return !1;
+    for (let t = 0; t < e.attributes.length; t++) {
+      const o = e.attributes[t].name;
+      if (E(o) && o.toLowerCase().indexOf("on") === 0)
+        return !1;
+    }
+    for (let t = 0; t < e.childNodes.length; t++)
+      if (!_(e.childNodes[t]))
+        return !1;
+  }
+  return !0;
+}, P = (e, t = !0, o = !1) => {
+  const r = document.createElement("div");
+  r.innerHTML = e;
+  for (let i = r.childNodes.length - 1; i >= 0; i--)
+    r.childNodes[i].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[i]);
+  const s = r.firstElementChild;
+  return s && s.nodeName.toLowerCase() === "svg" && (o && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), t === !1 || _(s)) ? r.innerHTML : "";
+}, m = "https://icons.app.sbb.ch/", C = (/* @__PURE__ */ new Map()).set("default", `${m}icons/`).set("picto", `${m}picto/`), v = /* @__PURE__ */ new Map(), O = (e, t, o) => {
+  var p;
+  const r = L().icon ?? {}, s = ((p = r.namespaces) == null ? void 0 : p.get(e)) ?? C.get(e);
+  if (s === void 0)
+    throw Error(
+      `Unable to find the namespace "${e}". Please register your custom namespace.`
+    );
+  const i = `${s}${t}.svg`;
+  let a = v.get(i);
+  if (!a)
+    if (typeof fetch < "u" && typeof document < "u")
+      a = (r.interceptor ?? ((l) => l.request()))({
+        namespace: e,
+        name: t,
+        url: i,
+        request: () => fetch(i).then((l) => {
+          if (l.ok)
+            return l.text().then((c) => (c && (c = P(c, o)), c));
+          throw new Error("Failed to load icon " + e + ":" + t);
+        }).catch((l) => {
+          throw Error(l);
+        })
+      }), v.set(i, a);
+    else
+      return Promise.resolve("");
+  return a;
+}, x = N`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-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}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (e, t, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? M(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (s = (r ? a(t, o, s) : a(s)) || s);
+  return r && s && z(t, o, s), s;
+};
+let n = class extends I {
+  constructor() {
+    super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
+  }
+  async loadSvgIcon(e) {
+    if (!e)
+      return;
+    const [t, o] = this._splitIconName(e);
+    this._svgNamespace = t, this.setAttribute("data-namespace", this._svgNamespace);
+    const r = this.fetchSvgIcon(this._svgNamespace, o);
+    this._svgIcon = r.then((s) => $(s));
+    try {
+      this.toggleAttribute("data-empty", !await r);
+    } catch {
+      this.toggleAttribute("data-empty", !0);
+    }
+  }
+  async fetchSvgIcon(e, t) {
+    return await O(e, t, !this.noSanitize);
+  }
+  _splitIconName(e) {
+    if (!e)
+      return ["", ""];
+    const t = e.split(":");
+    switch (t.length) {
+      case 1:
+        return [n._defaultNamespace, t[0]];
+      case 2:
+        return t;
+      default:
+        throw Error(`Invalid icon name: "${e}"`);
+    }
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.setAttribute("role", this.getAttribute("role") ?? "img");
+  }
+  render() {
+    return u`<span class="sbb-icon-inner"
+      >${A(
+      this._svgIcon,
+      // To reserve space, we need an empty svg to apply dimension to.
+      u`<svg width="0" height="0"></svg>`
+    )}</span
+    >`;
+  }
+};
+n.styles = x;
+n._defaultNamespace = "default";
+d([
+  g()
+], n.prototype, "_svgNamespace", 2);
+d([
+  g()
+], n.prototype, "_svgIcon", 2);
+d([
+  h({ attribute: "no-sanitize", type: Boolean })
+], n.prototype, "noSanitize", 2);
+n = d([
+  S({
+    "data-namespace": n._defaultNamespace,
+    "data-empty": ""
+  })
+], n);
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, w = (e, t, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? j(t, o) : t, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (s = (r ? a(t, o, s) : a(s)) || s);
+  return r && s && U(t, o, s), s;
+};
+let f = class extends n {
+  constructor() {
+    super(...arguments), this._defaultAriaLabel = "";
+  }
+  async fetchSvgIcon(e, t) {
+    return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${t.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && t && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(e, t);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("name") && this.loadSvgIcon(this.name);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+  }
+};
+w([
+  h({ reflect: !0 })
+], f.prototype, "name", 2);
+f = w([
+  y("sbb-icon")
+], f);
+var T = Object.defineProperty, q = (e, t, o, r) => {
+  for (var s = void 0, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (s = a(t, o, s) || s);
+  return s && T(t, o, s), s;
+};
+const J = (e) => {
+  class t extends e {
+    renderIconSlot(r) {
+      return u`
+        <slot name="icon">
+          ${this.iconName ? u`<sbb-icon name=${this.iconName} class=${r || b}></sbb-icon>` : b}
+        </slot>
+      `;
+    }
+  }
+  return q([
+    h({ attribute: "icon-name", reflect: !0 })
+  ], t.prototype, "iconName"), t;
+};
+export {
+  n as SbbIconBase,
+  f as SbbIconElement,
+  J as SbbIconNameMixin,
+  O as getSvgContent,
+  _ as isValid,
+  P as validateContent
+};