@sbb-esta/lyne-elements 2.11.0 → 2.11.2

package/flip-card/flip-card-details/flip-card-details.component.js

@@ -1,18 +1,18 @@
-import { __esDecorate as n, __runInitializers as b } from "tslib";
-import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
-import { css as p, LitElement as f, html as u } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { IS_FOCUSABLE_QUERY as v } from "../../core/a11y.js";
-import { hostAttributes as y } from "../../core/decorators.js";
-const h = p`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
-let E = (() => {
+import { __esDecorate as d, __runInitializers as n } from "tslib";
+import { MutationController as b } from "@lit-labs/observers/mutation-controller.js";
+import { css as c, LitElement as p, html as f } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { IS_FOCUSABLE_QUERY as m } from "../../core/a11y.js";
+import { hostAttributes as v } from "../../core/decorators.js";
+const y = c`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
+let A = (() => {
   var a;
-  let o = [m("sbb-flip-card-details"), y({
+  let l = [u("sbb-flip-card-details"), v({
     slot: "details"
-  })], e, r = [], t, i = f;
+  })], e, r = [], t, i = p;
   return a = class extends i {
     constructor() {
-      super(), this.addController(new c(this, {
+      super(), this.addController(new b(this, {
         config: {
           childList: !0,
           subtree: !0,
@@ -22,12 +22,11 @@ let E = (() => {
       }));
     }
     _checkForSlottedActions() {
-      var l;
       const s = "data-card-focusable";
-      Array.from(((l = this.querySelectorAll) == null ? void 0 : l.call(this, v)) ?? []).forEach((d) => d.toggleAttribute(s, !0));
+      Array.from(this.querySelectorAll?.(m) ?? []).forEach((o) => o.toggleAttribute(s, !0));
     }
     render() {
-      return u`
+      return f`
       <div class="sbb-flip-card-details--wrapper">
         <div class="sbb-flip-card-details">
           <slot></slot>
@@ -37,9 +36,9 @@ let E = (() => {
     }
   }, t = a, (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n(null, e = { value: t }, o, { kind: "class", name: t.name, metadata: s }, null, r), t = e.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), a.styles = h, b(t, r), t;
+    d(null, e = { value: t }, l, { kind: "class", name: t.name, metadata: s }, null, r), t = e.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), a.styles = y, n(t, r), t;
 })();
 export {
-  E as SbbFlipCardDetailsElement
+  A as SbbFlipCardDetailsElement
 };

package/flip-card/flip-card-summary/flip-card-summary.component.js

@@ -1,34 +1,33 @@
-var c = (a) => {
+var p = (a) => {
   throw TypeError(a);
 };
-var u = (a, e, t) => e.has(a) || c("Cannot " + t);
-var f = (a, e, t) => (u(a, e, "read from private field"), t ? t.call(a) : e.get(a)), h = (a, e, t) => e.has(a) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), y = (a, e, t, i) => (u(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
-import { __esDecorate as v, __runInitializers as o } from "tslib";
+var c = (a, e, t) => e.has(a) || p("Cannot " + t);
+var u = (a, e, t) => (c(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (c(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
+import { __esDecorate as y, __runInitializers as n } from "tslib";
 import { css as w, LitElement as _, html as A } from "lit";
 import { customElement as x, property as S } from "lit/decorators.js";
 import { hostAttributes as z } from "../../core/decorators.js";
 const E = w`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
 let C = (() => {
-  var l, s;
+  var m, s;
   let a = [x("sbb-flip-card-summary"), z({
     slot: "summary"
-  })], e, t = [], i, d = _, b, g = [], p = [];
-  return s = class extends d {
+  })], e, t = [], i, o = _, d, b = [], g = [];
+  return s = class extends o {
     constructor() {
       super(...arguments);
-      h(this, l, o(this, g, "after"));
-      o(this, p);
+      f(this, m, n(this, b, "after"));
+      n(this, g);
     }
     /** The position where to render the image. */
     get imageAlignment() {
-      return f(this, l);
+      return u(this, m);
     }
     set imageAlignment(r) {
-      y(this, l, r);
+      h(this, m, r);
     }
     willUpdate(r) {
-      var m, n;
-      super.willUpdate(r), r.has("imageAlignment") && ((n = (m = this.closest) == null ? void 0 : m.call(this, "sbb-flip-card")) == null || n.setAttribute("data-image-alignment", this.imageAlignment));
+      super.willUpdate(r), r.has("imageAlignment") && this.closest?.("sbb-flip-card")?.setAttribute("data-image-alignment", this.imageAlignment);
     }
     render() {
       return A`
@@ -40,12 +39,12 @@ let C = (() => {
       </div>
     `;
     }
-  }, l = new WeakMap(), i = s, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    b = [S({ attribute: "image-alignment", reflect: !0 })], v(s, null, b, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (m) => "imageAlignment" in m, get: (m) => m.imageAlignment, set: (m, n) => {
-      m.imageAlignment = n;
-    } }, metadata: r }, g, p), v(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, t), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), s.styles = E, o(i, t), i;
+  }, m = new WeakMap(), i = s, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    d = [S({ attribute: "image-alignment", reflect: !0 })], y(s, null, d, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (l) => "imageAlignment" in l, get: (l) => l.imageAlignment, set: (l, v) => {
+      l.imageAlignment = v;
+    } }, metadata: r }, b, g), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, t), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), s.styles = E, n(i, t), i;
 })();
 export {
   C as SbbFlipCardSummaryElement

package/form-error/form-error.component.js

@@ -1,20 +1,19 @@
-import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { css as m, LitElement as f, html as h } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbNegativeMixin as g } from "../core/mixins.js";
-const v = m`*,:before,:after{box-sizing:border-box}:host{--sbb-form-error-color: var(--sbb-color-red125);--sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);--sbb-form-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-form-error-icon-size);--sbb-icon-svg-height: var(--sbb-form-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-form-error-color);min-height:var(--sbb-form-error-height);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}@media (forced-colors: active){:host{--sbb-form-error-color: LinkText !important}}:host([negative]){--sbb-form-error-color: var(--sbb-color-red-mode-dark)}.form-error__icon{display:flex;align-items:center;height:var(--sbb-form-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.form-error-content{line-height:var(--sbb-typo-line-height-body-text);vertical-align:text-top}.form-error__icon-svg{stroke:currentcolor;height:var(--sbb-form-error-height)}`;
-let x = 0, z = (() => {
+import { __esDecorate as l, __runInitializers as n } from "tslib";
+import { css as b, LitElement as c, html as m } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { SbbNegativeMixin as h } from "../core/mixins.js";
+const d = b`*,:before,:after{box-sizing:border-box}:host{--sbb-form-error-color: var(--sbb-color-red125);--sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);--sbb-form-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-form-error-icon-size);--sbb-icon-svg-height: var(--sbb-form-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-form-error-color);min-height:var(--sbb-form-error-height);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}@media (forced-colors: active){:host{--sbb-form-error-color: LinkText !important}}:host([negative]){--sbb-form-error-color: var(--sbb-color-red-mode-dark)}.form-error__icon{display:flex;align-items:center;height:var(--sbb-form-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.form-error-content{line-height:var(--sbb-typo-line-height-body-text);vertical-align:text-top}.form-error__icon-svg{stroke:currentcolor;height:var(--sbb-form-error-height)}`;
+let g = 0, u = (() => {
   var r;
-  let n = [d("sbb-form-error")], o, s = [], e, i = g(f);
+  let a = [f("sbb-form-error")], o, s = [], e, i = h(c);
   return r = class extends i {
     connectedCallback() {
-      var a, l;
-      super.connectedCallback(), this.id || (this.id = `sbb-form-error-${x++}`);
-      const t = ((a = this.closest) == null ? void 0 : a.call(this, "sbb-form-field")) ?? ((l = this.closest) == null ? void 0 : l.call(this, "[data-form-field]"));
+      super.connectedCallback(), this.id ||= `sbb-form-error-${g++}`;
+      const t = this.closest?.("sbb-form-field") ?? this.closest?.("[data-form-field]");
       t && (this.negative = t.hasAttribute("negative"));
     }
     render() {
-      return h`
+      return m`
       <span class="form-error__icon">
         <slot name="icon">
           <svg
@@ -39,9 +38,9 @@ let x = 0, z = (() => {
     }
   }, e = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    b(null, o = { value: e }, n, { kind: "class", name: e.name, metadata: t }, null, s), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = v, c(e, s), e;
+    l(null, o = { value: e }, a, { kind: "class", name: e.name, metadata: t }, null, s), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = d, n(e, s), e;
 })();
 export {
-  z as SbbFormErrorElement
+  u as SbbFormErrorElement
 };