@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/icon/icon-validate.js

@@ -0,0 +1,26 @@
+const a = (e) => typeof e == "string", s = (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 (a(o) && o.toLowerCase().indexOf("on") === 0)
+        return !1;
+    }
+    for (let t = 0; t < e.childNodes.length; t++)
+      if (!s(e.childNodes[t]))
+        return !1;
+  }
+  return !0;
+}, l = (e, t = !0, o = !1) => {
+  const i = document.createElement("div");
+  i.innerHTML = e;
+  for (let r = i.childNodes.length - 1; r >= 0; r--)
+    i.childNodes[r].nodeName.toLowerCase() !== "svg" && i.removeChild(i.childNodes[r]);
+  const n = i.firstElementChild;
+  return n && n.nodeName.toLowerCase() === "svg" && (o && !n.classList.contains("color-immutable") && n.classList.add("color-immutable"), t === !1 || s(n)) ? i.innerHTML : "";
+};
+export {
+  s as isValid,
+  l as validateContent
+};

package/icon/icon.js

@@ -0,0 +1,77 @@
+var v = (e) => {
+  throw TypeError(e);
+};
+var I = (e, i, s) => i.has(e) || v("Cannot " + s);
+var m = (e, i, s) => (I(e, i, "read from private field"), s ? s.call(e) : i.get(e)), h = (e, i, s) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, s), u = (e, i, s, r) => (I(e, i, "write to private field"), r ? r.call(e, s) : i.set(e, s), s);
+import { __esDecorate as _, __runInitializers as c } from "tslib";
+import { html as S } from "lit";
+import { customElement as z, property as k, state as x } from "lit/decorators.js";
+import { forceType as E, omitEmptyConverter as L } from "../core/decorators.js";
+import { SbbIconBase as U } from "./icon-base.js";
+let q = (() => {
+  var n, b, l;
+  let e = [z("sbb-icon")], i, s = [], r, p = U, d, f = [], g = [], A, y = [], C = [];
+  return l = class extends p {
+    constructor() {
+      super(...arguments);
+      h(this, n);
+      h(this, b);
+      u(this, n, c(this, f, "")), this._defaultAriaLabel = (c(this, g), ""), u(this, b, c(this, y, !1)), c(this, C);
+    }
+    /**
+     * We need to additionally observe the svgicon attribute
+     * for sbb-angular compatibility.
+     * @internal
+     */
+    static get observedAttributes() {
+      return super.observedAttributes.concat("svgicon");
+    }
+    /**
+     * 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`.
+     */
+    get name() {
+      return m(this, n);
+    }
+    set name(t) {
+      u(this, n, t);
+    }
+    /**
+     * The sbb-angular library has a sbb-icon component as well. In order to provide
+     * compatibility with it (as some icons are used internally inside the other sbb-angular
+     * components) we need to check whether the attribute svgicon is used.
+     */
+    get _sbbAngularCompatibility() {
+      return m(this, b);
+    }
+    set _sbbAngularCompatibility(t) {
+      u(this, b, t);
+    }
+    async fetchSvgIcon(t, a) {
+      return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${a.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && a && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(t, a);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("name") && this.name && this.loadSvgIcon(this.name);
+    }
+    attributeChangedCallback(t, a, o) {
+      t === "svgicon" ? this._sbbAngularCompatibility = !!o : super.attributeChangedCallback(t, a, o);
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+    }
+    render() {
+      return this._sbbAngularCompatibility ? S`<slot></slot>` : super.render();
+    }
+  }, n = new WeakMap(), b = new WeakMap(), r = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    d = [E(), k({ reflect: !0, converter: L })], A = [x()], _(l, null, d, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (a) => "name" in a, get: (a) => a.name, set: (a, o) => {
+      a.name = o;
+    } }, metadata: t }, f, g), _(l, null, A, { kind: "accessor", name: "_sbbAngularCompatibility", static: !1, private: !1, access: { has: (a) => "_sbbAngularCompatibility" in a, get: (a) => a._sbbAngularCompatibility, set: (a, o) => {
+      a._sbbAngularCompatibility = o;
+    } }, metadata: t }, y, C), _(null, i = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, s), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), c(r, s);
+  })(), r;
+})();
+export {
+  q as SbbIconElement
+};

package/icon-sidebar-button-common-DG8bnrBu.js

@@ -0,0 +1,7 @@
+import { css as o } from "lit";
+const b = o`*,:before,:after{box-sizing:border-box}:host{position:absolute;top:0;right:0;bottom:0;left:0}`, i = o`*,:before,:after{box-sizing:border-box}:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, r = o`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-current-color: var(--sbb-color-charcoal);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color)}@media (forced-colors: active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media (forced-colors: active){:host([data-button]){--sbb-icon-sidebar-button-color: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-icon-sidebar-button-color: LinkText !important}}@media (any-hover: hover){:host(:not(:active,[data-active]):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: pointer}}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}:host(:focus-visible) .sbb-action-base,.sbb-action-base: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);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
+export {
+  i as a,
+  r as i,
+  b as s
+};

package/icon.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './icon/icon.js';
 export * from './icon/icon-base.js';
 export * from './icon/icon-request.js';

package/icon.d.ts.map

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

package/icon.js

@@ -1,256 +1,13 @@
-var T = (t) => {
-  throw TypeError(t);
-};
-var M = (t, e, i) => e.has(t) || T("Cannot " + i);
-var I = (t, e, i) => (M(t, e, "read from private field"), i ? i.call(t) : e.get(t)), N = (t, e, i) => e.has(t) ? T("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), _ = (t, e, i, a) => (M(t, e, "write to private field"), a ? a.call(t, i) : e.set(t, i), i);
-import { __esDecorate as v, __runInitializers as d } from "tslib";
-import { isServer as P, css as B, LitElement as F, html as C, nothing as O } from "lit";
-import { state as x, property as L, customElement as V } from "lit/decorators.js";
-import { hostAttributes as G, forceType as E, omitEmptyConverter as D } from "./core/decorators.js";
-import { unsafeHTML as J } from "lit/directives/unsafe-html.js";
-import { until as K } from "lit/directives/until.js";
-import { readConfig as Q } from "./core/config.js";
-const R = (t) => typeof t == "string", q = (t) => {
-  if (t.nodeType === 1) {
-    if (t.nodeName.toLowerCase() === "script")
-      return !1;
-    for (let e = 0; e < t.attributes.length; e++) {
-      const i = t.attributes[e].name;
-      if (R(i) && i.toLowerCase().indexOf("on") === 0)
-        return !1;
-    }
-    for (let e = 0; e < t.childNodes.length; e++)
-      if (!q(t.childNodes[e]))
-        return !1;
-  }
-  return !0;
-}, W = (t, e = !0, i = !1) => {
-  const a = document.createElement("div");
-  a.innerHTML = t;
-  for (let l = a.childNodes.length - 1; l >= 0; l--)
-    a.childNodes[l].nodeName.toLowerCase() !== "svg" && a.removeChild(a.childNodes[l]);
-  const c = a.firstElementChild;
-  return c && c.nodeName.toLowerCase() === "svg" && (i && !c.classList.contains("color-immutable") && c.classList.add("color-immutable"), e === !1 || q(c)) ? a.innerHTML : "";
-}, U = "https://icons.app.sbb.ch/", X = (/* @__PURE__ */ new Map()).set("default", `${U}icons/`).set("picto", `${U}picto/`), j = /* @__PURE__ */ new Map(), Y = (t, e, i) => {
-  var u;
-  const a = Q().icon ?? {}, c = ((u = a.namespaces) == null ? void 0 : u.get(t)) ?? X.get(t);
-  if (c == null)
-    throw Error(`Unable to find the namespace "${t}". Please register your custom namespace.`);
-  const l = `${c}${e}.svg`;
-  let m = j.get(l);
-  if (!m)
-    if (typeof fetch < "u" && !P)
-      m = (a.interceptor ?? ((h) => h.request()))({
-        namespace: t,
-        name: e,
-        url: l,
-        request: () => fetch(l).then(async (h) => {
-          if (!h.ok)
-            throw new Error("Failed to load icon " + t + ":" + e);
-          return W(await h.text(), i);
-        }).catch((h) => {
-          throw Error(h);
-        })
-      }), j.set(l, m);
-    else
-      return Promise.resolve("");
-  return m;
-}, Z = B`*,: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}`, k = "default";
-let tt = (() => {
-  var z, A, r, s;
-  let t = [G({
-    "data-namespace": k,
-    "data-empty": ""
-  })], e, i = [], a, c = F, l, m = [], u = [], w, h = [], g = [], b, p = [], f = [];
-  return s = class extends c {
-    constructor() {
-      super(...arguments);
-      N(this, z, d(this, m, k));
-      N(this, A, (d(this, u), d(this, h, null)));
-      N(this, r, (d(this, g), d(this, p, !1)));
-      d(this, f);
-    }
-    get _svgNamespace() {
-      return I(this, z);
-    }
-    set _svgNamespace(o) {
-      _(this, z, o);
-    }
-    /**
-     * The icon svg content rendered on the page: <svg>...</svg>.
-     */
-    get _svgIcon() {
-      return I(this, A);
-    }
-    set _svgIcon(o) {
-      _(this, A, o);
-    }
-    /**
-     * 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 I(this, r);
-    }
-    set noSanitize(o) {
-      _(this, r, o);
-    }
-    async loadSvgIcon(o) {
-      if (!o)
-        return;
-      const [n, S] = this._splitIconName(o);
-      this._svgNamespace = n, this.setAttribute("data-namespace", this._svgNamespace);
-      const $ = this.fetchSvgIcon(this._svgNamespace, S);
-      this._svgIcon = $.then((H) => J(H));
-      try {
-        this.toggleAttribute("data-empty", !await $);
-      } catch {
-        this.toggleAttribute("data-empty", !0);
-      }
-    }
-    async fetchSvgIcon(o, n) {
-      return await Y(o, n, !this.noSanitize);
-    }
-    _splitIconName(o) {
-      if (!o)
-        return ["", ""];
-      const n = o.split(":");
-      switch (n.length) {
-        case 1:
-          return [k, n[0]];
-        case 2:
-          return n;
-        default:
-          throw Error(`Invalid icon name: "${o}"`);
-      }
-    }
-    firstUpdated(o) {
-      super.firstUpdated(o), this.setAttribute("role", this.getAttribute("role") ?? "img");
-    }
-    render() {
-      return C`<span class="sbb-icon-inner"
-      >${K(
-        this._svgIcon,
-        // To reserve space, we need an empty svg to apply dimension to.
-        C`<svg width="0" height="0"></svg>`
-      )}</span
-    >`;
-    }
-  }, z = new WeakMap(), A = new WeakMap(), r = new WeakMap(), a = s, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    l = [x()], w = [x()], b = [E(), L({ attribute: "no-sanitize", type: Boolean })], v(s, null, l, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (n) => "_svgNamespace" in n, get: (n) => n._svgNamespace, set: (n, S) => {
-      n._svgNamespace = S;
-    } }, metadata: o }, m, u), v(s, null, w, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (n) => "_svgIcon" in n, get: (n) => n._svgIcon, set: (n, S) => {
-      n._svgIcon = S;
-    } }, metadata: o }, h, g), v(s, null, b, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (n) => "noSanitize" in n, get: (n) => n.noSanitize, set: (n, S) => {
-      n.noSanitize = S;
-    } }, metadata: o }, p, f), v(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: o }, null, i), a = e.value, o && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), s.styles = Z, d(a, i), a;
-})(), ct = (() => {
-  var b, p, f;
-  let t = [V("sbb-icon")], e, i = [], a, c = tt, l, m = [], u = [], w, h = [], g = [];
-  return f = class extends c {
-    constructor() {
-      super(...arguments);
-      N(this, b);
-      N(this, p);
-      _(this, b, d(this, m, "")), this._defaultAriaLabel = (d(this, u), ""), _(this, p, d(this, h, !1)), d(this, g);
-    }
-    /**
-     * We need to additionally observe the svgicon attribute
-     * for sbb-angular compatibility.
-     * @internal
-     */
-    static get observedAttributes() {
-      return super.observedAttributes.concat("svgicon");
-    }
-    /**
-     * 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`.
-     */
-    get name() {
-      return I(this, b);
-    }
-    set name(r) {
-      _(this, b, r);
-    }
-    /**
-     * The sbb-angular library has a sbb-icon component as well. In order to provide
-     * compatibility with it (as some icons are used internally inside the other sbb-angular
-     * components) we need to check whether the attribute svgicon is used.
-     */
-    get _sbbAngularCompatibility() {
-      return I(this, p);
-    }
-    set _sbbAngularCompatibility(r) {
-      _(this, p, r);
-    }
-    async fetchSvgIcon(r, s) {
-      return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${s.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && s && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(r, s);
-    }
-    willUpdate(r) {
-      super.willUpdate(r), r.has("name") && this.name && this.loadSvgIcon(this.name);
-    }
-    attributeChangedCallback(r, s, y) {
-      r === "svgicon" ? this._sbbAngularCompatibility = !!y : super.attributeChangedCallback(r, s, y);
-    }
-    firstUpdated(r) {
-      super.firstUpdated(r), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
-    }
-    render() {
-      return this._sbbAngularCompatibility ? C`<slot></slot>` : super.render();
-    }
-  }, b = new WeakMap(), p = new WeakMap(), a = f, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    l = [E(), L({ reflect: !0, converter: D })], w = [x()], v(f, null, l, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (s) => "name" in s, get: (s) => s.name, set: (s, y) => {
-      s.name = y;
-    } }, metadata: r }, m, u), v(f, null, w, { kind: "accessor", name: "_sbbAngularCompatibility", static: !1, private: !1, access: { has: (s) => "_sbbAngularCompatibility" in s, get: (s) => s._sbbAngularCompatibility, set: (s, y) => {
-      s._sbbAngularCompatibility = y;
-    } }, metadata: r }, h, g), v(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: r }, null, i), a = e.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r }), d(a, i);
-  })(), a;
-})();
-const mt = (t) => (() => {
-  var m, u;
-  let i = t, a, c = [], l = [];
-  return u = class extends i {
-    constructor() {
-      super(...arguments);
-      N(this, m, d(this, c, ""));
-      d(this, l);
-    }
-    /**
-     * 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 I(this, m);
-    }
-    set iconName(g) {
-      _(this, m, g);
-    }
-    renderIconSlot(g) {
-      return C`
-        <slot name="icon">
-          ${this.iconName ? C`<sbb-icon name=${this.iconName} class=${g || O}></sbb-icon>` : O}
-        </slot>
-      `;
-    }
-  }, m = new WeakMap(), (() => {
-    const g = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    a = [E(), L({ attribute: "icon-name", reflect: !0, converter: D })], v(u, null, a, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (b) => "iconName" in b, get: (b) => b.iconName, set: (b, p) => {
-      b.iconName = p;
-    } }, metadata: g }, c, l), g && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: g });
-  })(), u;
-})();
+import { SbbIconElement as t } from "./icon/icon.js";
+import { SbbIconBase as n } from "./icon/icon-base.js";
+import { getSvgContent as b } from "./icon/icon-request.js";
+import { isValid as a, validateContent as f } from "./icon/icon-validate.js";
+import { SbbIconNameMixin as p } from "./icon/icon-name-mixin.js";
 export {
-  tt as SbbIconBase,
-  ct as SbbIconElement,
-  mt as SbbIconNameMixin,
-  Y as getSvgContent,
-  q as isValid,
-  W as validateContent
+  n as SbbIconBase,
+  t as SbbIconElement,
+  p as SbbIconNameMixin,
+  b as getSvgContent,
+  a as isValid,
+  f as validateContent
 };