@sbb-esta/lyne-elements 0.0.0 → 0.52.1

package/datepicker/datepicker-toggle.js

@@ -0,0 +1,147 @@
+import { css as c, LitElement as g, isServer as b, html as p, nothing as f } from "lit";
+import { property as m, state as n, customElement as u } from "lit/decorators.js";
+import { ref as d } from "lit/directives/ref.js";
+import { sbbInputModalityDetector as v } from "../core/a11y.js";
+import { SbbLanguageController as w } from "../core/controllers.js";
+import { hostAttributes as y } from "../core/decorators.js";
+import { i18nShowCalendar as k } from "../core/i18n.js";
+import { SbbNegativeMixin as $, SbbHydrationMixin as x } from "../core/mixins.js";
+import { getDatePicker as P, datepickerControlRegisteredEventFactory as C } from "./datepicker.js";
+import "../calendar.js";
+import "../popover.js";
+const D = c`*,:before,:after{box-sizing:border-box}:host{--sbb-datepicker-control-radius: var(--sbb-border-radius-4x);--sbb-datepicker-control-color: var(--sbb-color-black);display:inline-flex}sbb-popover-trigger{--sbb-button-display: flex;color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, e, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? S(e, i) : e, l = t.length - 1, s; l >= 0; l--)
+    (s = t[l]) && (r = (o ? s(e, i, r) : s(r)) || r);
+  return o && r && E(e, i, r), r;
+};
+let a = class extends $(x(g)) {
+  constructor() {
+    super(), this.f = !1, this.g = null, this.h = null, this.i = !1, this.m = new w(this), b || this.hydrationComplete.then(() => this.i = !0);
+  }
+  /**
+   * Opens the calendar.
+   */
+  open() {
+    this.d || (this.d = this.shadowRoot.querySelector("sbb-popover-trigger")), this.d.click();
+  }
+  connectedCallback() {
+    var e, i;
+    super.connectedCallback(), this.datePicker || this.e();
+    const t = ((e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
+    t && (this.negative = t.hasAttribute("negative"));
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("datePicker") && this.e(this.datePicker);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this.c) == null || t.abort();
+  }
+  e(t) {
+    var e, i, o, r, l;
+    if ((e = this.c) == null || e.abort(), this.c = new AbortController(), this.a = P(this, t), !this.a) {
+      (i = this.parentElement) == null || i.addEventListener(
+        "inputUpdated",
+        (s) => this.e(s.target),
+        { once: !0, signal: this.c.signal }
+      );
+      return;
+    }
+    (o = this.a) == null || o.addEventListener(
+      "inputUpdated",
+      (s) => {
+        this.a = s.target, this.f = !!(s.detail.disabled || s.detail.readonly), this.g = s.detail.min, this.h = s.detail.max;
+      },
+      { signal: this.c.signal }
+    ), (r = this.a) == null || r.addEventListener(
+      "change",
+      (s) => this.n(s),
+      {
+        signal: this.c.signal
+      }
+    ), (l = this.a) == null || l.addEventListener(
+      "datePickerUpdated",
+      (s) => this.k(this.b, s.target),
+      { signal: this.c.signal }
+    ), this.a.dispatchEvent(C());
+  }
+  k(t, e) {
+    !t || !e || (t.wide = e.wide, t.now = this.l(), t.dateFilter = e.dateFilter);
+  }
+  n(t) {
+    this.a = t.target, this.b.selected = this.a.getValueAsDate();
+  }
+  o(t) {
+    var e;
+    this.b && this.b === t || (this.b = t, !(!this.a || !this.a.getValueAsDate || !((e = this.b) != null && e.resetPosition)) && (this.b.selected = this.a.getValueAsDate(), this.k(this.b, this.a), this.b.resetPosition()));
+  }
+  updated(t) {
+    super.updated(t), this.j.trigger = this.d;
+  }
+  l() {
+    var t;
+    return (t = this.a) != null && t.hasCustomNow() ? this.a.now : void 0;
+  }
+  render() {
+    var t, e;
+    return p`
+      <sbb-popover-trigger
+        icon-name="calendar-small"
+        aria-label=${k[this.m.current]}
+        ?disabled=${!b && (!this.a || this.f)}
+        ?negative=${this.negative}
+        data-icon-small
+        ${d((i) => this.d = i)}
+      ></sbb-popover-trigger>
+      <sbb-popover
+        @willOpen=${() => this.b.resetPosition()}
+        @didOpen=${() => {
+      v.mostRecentModality === "keyboard" && this.b.focus();
+    }}
+        .trigger=${this.d}
+        hide-close-button
+        ${d((i) => this.j = i)}
+      >
+        ${this.i ? p`<sbb-calendar
+              .min=${this.g}
+              .max=${this.h}
+              .now=${this.l()}
+              ?wide=${(t = this.a) == null ? void 0 : t.wide}
+              .dateFilter=${(e = this.a) == null ? void 0 : e.dateFilter}
+              @dateSelected=${(i) => {
+      var r;
+      const o = new Date(i.detail);
+      this.b.selected = o, (r = this.a) == null || r.setValueAsDate(o);
+    }}
+              ${d((i) => this.o(i))}
+            ></sbb-calendar>` : f}
+      </sbb-popover>
+    `;
+  }
+};
+a.styles = D;
+h([
+  m({ attribute: "date-picker" })
+], a.prototype, "datePicker", 2);
+h([
+  n()
+], a.prototype, "f", 2);
+h([
+  n()
+], a.prototype, "g", 2);
+h([
+  n()
+], a.prototype, "h", 2);
+h([
+  n()
+], a.prototype, "i", 2);
+a = h([
+  u("sbb-datepicker-toggle"),
+  y({
+    slot: "prefix"
+  })
+], a);
+export {
+  a as SbbDatepickerToggleElement
+};

package/datepicker/datepicker.d.ts

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

package/datepicker/datepicker.d.ts.map

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

package/datepicker/datepicker.js

@@ -0,0 +1,261 @@
+import { css as m, LitElement as f, html as v } from "lit";
+import { property as l, state as w, customElement as g } from "lit/decorators.js";
+import { readConfig as y } from "../core/config.js";
+import { SbbConnectedAbortController as D, SbbLanguageController as C } from "../core/controllers.js";
+import { defaultDateAdapter as p } from "../core/datetime.js";
+import { findReferencedElement as x, findInput as u } from "../core/dom.js";
+import { EventEmitter as d } from "../core/eventing.js";
+import { i18nDatePickerPlaceholder as c, i18nDateChangedTo as E } from "../core/i18n.js";
+import { AgnosticMutationObserver as V } from "../core/observers.js";
+const k = m`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? O(e, s) : e, r = t.length - 1, h; r >= 0; r--)
+    (h = t[r]) && (i = (a ? h(e, s, i) : h(i)) || i);
+  return a && i && A(e, s, i), i;
+};
+const U = /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
+function S(t, e) {
+  var s;
+  if (!e) {
+    const a = (s = t.closest) == null ? void 0 : s.call(t, "sbb-form-field");
+    return a == null ? void 0 : a.querySelector("sbb-datepicker");
+  }
+  return x(e);
+}
+function b(t, e, s, a) {
+  let i = a.addCalendarDays(t, e);
+  if (s)
+    for (; !s(i); )
+      i = a.addCalendarDays(i, e);
+  return i;
+}
+function $(t, e, s, a) {
+  const i = b(t, -1, e, s), r = s.deserialize(a);
+  return !r || s.isValid(r) && s.compareDate(i, r) >= 0 ? i : t;
+}
+function q(t, e, s, a) {
+  const i = b(t, 1, e, s), r = s.deserialize(a);
+  return !r || s.isValid(r) && s.compareDate(i, r) <= 0 ? i : t;
+}
+function F(t, e, s, a) {
+  const i = p, r = i.deserialize(s), h = i.deserialize(a);
+  return i.isValid(r) && i.compareDate(t, r) < 0 || i.isValid(h) && i.compareDate(t, h) > 0 ? !1 : e ? e(t) : !0;
+}
+const L = () => new CustomEvent("datepickerControlRegistered", {
+  bubbles: !1,
+  composed: !0
+});
+let n = class extends f {
+  constructor() {
+    var t;
+    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this.g = null, this.p = new d(this, n.events.didChange, {
+      bubbles: !0,
+      cancelable: !0
+    }), this.q = new d(this, n.events.change, {
+      bubbles: !0
+    }), this.j = new d(
+      this,
+      n.events.inputUpdated,
+      { bubbles: !0, cancelable: !0 }
+    ), this.r = new d(
+      this,
+      n.events.datePickerUpdated,
+      {
+        bubbles: !0,
+        cancelable: !0
+      }
+    ), this.s = new d(
+      this,
+      n.events.validationChange
+    ), this.c = null, this.h = new V(this.l.bind(this)), this.b = ((t = y().datetime) == null ? void 0 : t.dateAdapter) ?? p, this.w = new D(this), this.e = new C(this).withHandler(() => {
+      if (this.a) {
+        this.a.placeholder = c[this.e.current];
+        const e = this.getValueAsDate();
+        e && (this.a.value = this.f(e));
+      }
+    });
+  }
+  set now(t) {
+    this.g = this.b.getValidDateOrNull(this.b.deserialize(t));
+  }
+  get now() {
+    return this.g ?? this.b.today();
+  }
+  get a() {
+    return this.c;
+  }
+  set a(t) {
+    const e = this.c;
+    this.c = t, this.t(this.c, e);
+  }
+  u(t, e) {
+    t !== e && (this.a = u(this, this.input));
+  }
+  t(t, e) {
+    var s, a;
+    if (t !== e) {
+      if ((s = this.d) == null || s.abort(), this.d = new AbortController(), !this.a)
+        return;
+      (a = this.h) == null || a.disconnect(), this.h.observe(this.a, {
+        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
+      }), this.a.type = "text", this.a.placeholder || (this.a.placeholder = c[this.e.current]), this.a.addEventListener(
+        "change",
+        (i) => {
+          i instanceof CustomEvent || this.v(i);
+        },
+        {
+          signal: this.d.signal
+        }
+      );
+    }
+  }
+  /** Gets the input value with the correct date format. */
+  getValueAsDate() {
+    if (this.a && this.a.value)
+      return this.i(this.a.value);
+  }
+  /** Set the input value to the correctly formatted value. */
+  setValueAsDate(t) {
+    const e = t instanceof Date ? t : new Date(t);
+    this.a && (this.k(this.a.value, e), this.a.dispatchEvent(new Event("blur", { composed: !0 })));
+  }
+  /**
+   * @internal
+   * Whether a custom now is configured.
+   */
+  hasCustomNow() {
+    return !!this.g;
+  }
+  l(t) {
+    var e, s, a, i;
+    this.j.emit({
+      disabled: (e = this.a) == null ? void 0 : e.disabled,
+      readonly: (s = this.a) == null ? void 0 : s.readOnly,
+      min: (a = this.a) == null ? void 0 : a.min,
+      max: (i = this.a) == null ? void 0 : i.max
+    }), this.a && t && Array.from(t).some((r) => r.attributeName === "value") && (this.a.value = this.m(this.a.getAttribute("value")));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.w.signal;
+    this.addEventListener("datepickerControlRegistered", () => this.l(), {
+      signal: t
+    }), this.a = u(this, this.input), this.a && (this.a.value = this.m(this.a.value), this.j.emit({
+      disabled: this.a.disabled,
+      readonly: this.a.readOnly,
+      min: this.a.min,
+      max: this.a.max
+    }));
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("input") && this.u(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this.r.emit();
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), (t = this.h) == null || t.disconnect(), (e = this.d) == null || e.abort();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.n(this.getValueAsDate());
+  }
+  x(t) {
+    const e = this.i(t);
+    return this.b.isValid(e) ? this.f(e) : t;
+  }
+  o(t) {
+    const e = new Date(t);
+    return this.f(e);
+  }
+  v(t) {
+    const e = t.target.value;
+    this.k(e, this.i(e));
+  }
+  /** Applies the correct format to values and triggers event dispatch. */
+  k(t, e) {
+    var s, a;
+    if (this.a) {
+      this.a.value = this.b.isValid(e) ? this.f(e) : t;
+      const i = !t || !!e && F(
+        e,
+        this.dateFilter,
+        (s = this.a) == null ? void 0 : s.min,
+        (a = this.a) == null ? void 0 : a.max
+      ), r = !this.a.hasAttribute("data-sbb-invalid");
+      this.a.toggleAttribute("data-sbb-invalid", !i), r !== i && this.s.emit({ valid: i }), this.y(e);
+    }
+  }
+  /** Emits the change event. */
+  y(t) {
+    this.n(t), this.q.emit(), this.p.emit(), this.a && (this.a.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.a.dispatchEvent(
+      new CustomEvent("change", { bubbles: !0, composed: !0 })
+    ));
+  }
+  m(t) {
+    if (!t)
+      return "";
+    const e = t.match(U);
+    return (e == null ? void 0 : e.index) === 0 ? this.x(t) : Number.isInteger(+t) ? this.o(+t) : this.b.isValid(new Date(t)) ? this.o(t) : t;
+  }
+  i(t) {
+    return this.dateParser ? this.dateParser(t) : this.b.parse(t, this.now);
+  }
+  f(t) {
+    return this.format ? this.format(t) : this.b.format(t);
+  }
+  n(t) {
+    var i, r;
+    const e = new Intl.DateTimeFormat(`${this.e.current}-CH`, {
+      weekday: "long"
+    }), s = new Intl.DateTimeFormat("de-CH", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }), a = (r = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : r.call(i, "#status-container");
+    a && (a.innerText = t ? `${E[this.e.current]} ${e.format(
+      t
+    )}, ${s.format(t)}` : "");
+  }
+  render() {
+    return v`<p id="status-container" role="status"></p>`;
+  }
+};
+n.styles = k;
+n.events = {
+  didChange: "didChange",
+  change: "change",
+  inputUpdated: "inputUpdated",
+  datePickerUpdated: "datePickerUpdated",
+  validationChange: "validationChange"
+};
+o([
+  l({ type: Boolean })
+], n.prototype, "wide", 2);
+o([
+  l({ attribute: "date-filter" })
+], n.prototype, "dateFilter", 2);
+o([
+  l({ attribute: "date-parser" })
+], n.prototype, "dateParser", 2);
+o([
+  l()
+], n.prototype, "format", 2);
+o([
+  l()
+], n.prototype, "input", 2);
+o([
+  l()
+], n.prototype, "now", 1);
+o([
+  w()
+], n.prototype, "a", 1);
+n = o([
+  g("sbb-datepicker")
+], n);
+export {
+  n as SbbDatepickerElement,
+  L as datepickerControlRegisteredEventFactory,
+  q as findNextAvailableDate,
+  $ as findPreviousAvailableDate,
+  b as getAvailableDate,
+  S as getDatePicker,
+  F as isDateAvailable
+};

package/datepicker.d.ts

@@ -0,0 +1,6 @@
+export * from './datepicker/datepicker.js';
+export * from './datepicker/datepicker-next-day.js';
+export * from './datepicker/datepicker-previous-day.js';
+export * from './datepicker/datepicker-toggle.js';
+export * from './datepicker/common.js';
+//# sourceMappingURL=datepicker.d.ts.map

package/datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/elements/datepicker.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC"}

package/datepicker.js

@@ -0,0 +1,5 @@
+export * from "./datepicker/datepicker.js";
+export * from "./datepicker/datepicker-next-day.js";
+export * from "./datepicker/datepicker-previous-day.js";
+export * from "./datepicker/datepicker-toggle.js";
+export * from "./datepicker/common.js";

package/development/accordion/accordion.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+declare const SbbAccordionElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It can be used as a container for one or more `sbb-expansion-panel` component.
+ *
+ * @slot - Use the unnamed slot to add `sbb-expansion-panel` elements.
+ */
+export declare class SbbAccordionElement extends SbbAccordionElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The heading level for the sbb-expansion-panel-headers within the component.
+     * @controls SbbExpansionPanelElement.titleLevel
+     */
+    set titleLevel(value: SbbTitleLevel | null);
+    get titleLevel(): SbbTitleLevel | null;
+    private _titleLevel;
+    /** Whether more than one sbb-expansion-panel can be open at the same time. */
+    set multi(value: boolean);
+    get multi(): boolean;
+    private _multi;
+    /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
+    size: 's' | 'l';
+    private _abort;
+    private _closePanels;
+    private _resetExpansionPanels;
+    private _setTitleLevelOnChildren;
+    private get _expansionPanels();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handleSlotchange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-accordion': SbbAccordionElement;
+    }
+}
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/development/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/elements/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,wBAA6B;IACpE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,EAGhD;IACD,IAAW,UAAU,IAAI,aAAa,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,WAAW,CAA8B;IAEjD,8EAA8E;IAC9E,IACW,KAAK,CAAC,KAAK,EAAE,OAAO,EAI9B;IACD,IAAW,KAAK,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,MAAM,CAAkB;IAEhC,+FAA+F;IAC3D,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,KAAK,gBAAgB,GAE3B;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,OAAO,CAAC,iBAAiB;cAWN,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/development/accordion.d.ts

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

package/development/accordion.d.ts.map

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

package/development/accordion.js

@@ -0,0 +1,134 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { SbbConnectedAbortController } from "./core/controllers.js";
+import { SbbHydrationMixin } from "./core/mixins.js";
+import { SbbExpansionPanelElement } from "./expansion-panel.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let SbbAccordionElement = class extends SbbHydrationMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this._titleLevel = null;
+    this._multi = false;
+    this.size = "l";
+    this._abort = new SbbConnectedAbortController(this);
+  }
+  set titleLevel(value) {
+    this._titleLevel = value;
+    this._setTitleLevelOnChildren();
+  }
+  get titleLevel() {
+    return this._titleLevel;
+  }
+  set multi(value) {
+    const oldValue = this._multi;
+    this._multi = value;
+    this._resetExpansionPanels(this._multi, oldValue);
+  }
+  get multi() {
+    return this._multi;
+  }
+  _closePanels(e) {
+    var _a;
+    if (((_a = e.target) == null ? void 0 : _a.localName) !== "sbb-expansion-panel" || this.multi) {
+      return;
+    }
+    this._expansionPanels.filter((panel) => panel !== e.target).forEach((panel) => panel.expanded = false);
+  }
+  _resetExpansionPanels(newValue, oldValue) {
+    const expansionPanels = this._expansionPanels;
+    if (expansionPanels.length > 1 && oldValue && !newValue) {
+      expansionPanels[0].expanded = true;
+      expansionPanels.filter((_, index) => index > 0).forEach((panel) => panel.expanded = false);
+    }
+  }
+  _setTitleLevelOnChildren() {
+    this._expansionPanels.forEach(
+      (panel) => panel.titleLevel = this.titleLevel
+    );
+  }
+  get _expansionPanels() {
+    var _a;
+    return Array.from(((_a = this.querySelectorAll) == null ? void 0 : _a.call(this, "sbb-expansion-panel")) ?? []);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener(
+      SbbExpansionPanelElement.events.willOpen,
+      (e) => this._closePanels(e),
+      { signal }
+    );
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("size")) {
+      this._expansionPanels.forEach((panel) => panel.size = this.size);
+    }
+  }
+  _handleSlotchange() {
+    this._expansionPanels.forEach(
+      (panel, index, array) => {
+        panel.titleLevel = this.titleLevel;
+        panel.size = this.size;
+        panel.toggleAttribute("data-accordion-first", index === 0);
+        panel.toggleAttribute("data-accordion-last", index === array.length - 1);
+      }
+    );
+  }
+  render() {
+    return html`
+      <div class="sbb-accordion">
+        <slot @slotchange=${this._handleSlotchange}></slot>
+      </div>
+    `;
+  }
+};
+SbbAccordionElement.styles = style;
+__decorateClass([
+  property({ attribute: "title-level" })
+], SbbAccordionElement.prototype, "titleLevel", 1);
+__decorateClass([
+  property({ type: Boolean })
+], SbbAccordionElement.prototype, "multi", 1);
+__decorateClass([
+  property({ reflect: true })
+], SbbAccordionElement.prototype, "size", 2);
+SbbAccordionElement = __decorateClass([
+  customElement("sbb-accordion")
+], SbbAccordionElement);
+export {
+  SbbAccordionElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBQcm9wZXJ0eVZhbHVlcywgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgU2JiQ29ubmVjdGVkQWJvcnRDb250cm9sbGVyIH0gZnJvbSAnLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBTYmJIeWRyYXRpb25NaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCB9IGZyb20gJy4uL2V4cGFuc2lvbi1wYW5lbC5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlRpdGxlTGV2ZWwgfSBmcm9tICcuLi90aXRsZS5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2FjY29yZGlvbi5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IGNhbiBiZSB1c2VkIGFzIGEgY29udGFpbmVyIGZvciBvbmUgb3IgbW9yZSBgc2JiLWV4cGFuc2lvbi1wYW5lbGAgY29tcG9uZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGBzYmItZXhwYW5zaW9uLXBhbmVsYCBlbGVtZW50cy5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1hY2NvcmRpb24nKVxuZXhwb3J0IGNsYXNzIFNiYkFjY29yZGlvbkVsZW1lbnQgZXh0ZW5kcyBTYmJIeWRyYXRpb25NaXhpbihMaXRFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKlxuICAgKiBUaGUgaGVhZGluZyBsZXZlbCBmb3IgdGhlIHNiYi1leHBhbnNpb24tcGFuZWwtaGVhZGVycyB3aXRoaW4gdGhlIGNvbXBvbmVudC5cbiAgICogQGNvbnRyb2xzIFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudC50aXRsZUxldmVsXG4gICAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICd0aXRsZS1sZXZlbCcgfSlcbiAgcHVibGljIHNldCB0aXRsZUxldmVsKHZhbHVlOiBTYmJUaXRsZUxldmVsIHwgbnVsbCkge1xuICAgIHRoaXMuX3RpdGxlTGV2ZWwgPSB2YWx1ZTtcbiAgICB0aGlzLl9zZXRUaXRsZUxldmVsT25DaGlsZHJlbigpO1xuICB9XG4gIHB1YmxpYyBnZXQgdGl0bGVMZXZlbCgpOiBTYmJUaXRsZUxldmVsIHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuX3RpdGxlTGV2ZWw7XG4gIH1cbiAgcHJpdmF0ZSBfdGl0bGVMZXZlbDogU2JiVGl0bGVMZXZlbCB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBXaGV0aGVyIG1vcmUgdGhhbiBvbmUgc2JiLWV4cGFuc2lvbi1wYW5lbCBjYW4gYmUgb3BlbiBhdCB0aGUgc2FtZSB0aW1lLiAqL1xuICBAcHJvcGVydHkoeyB0eXBlOiBCb29sZWFuIH0pXG4gIHB1YmxpYyBzZXQgbXVsdGkodmFsdWU6IGJvb2xlYW4pIHtcbiAgICBjb25zdCBvbGRWYWx1ZSA9IHRoaXMuX211bHRpO1xuICAgIHRoaXMuX211bHRpID0gdmFsdWU7XG4gICAgdGhpcy5fcmVzZXRFeHBhbnNpb25QYW5lbHModGhpcy5fbXVsdGksIG9sZFZhbHVlKTtcbiAgfVxuICBwdWJsaWMgZ2V0IG11bHRpKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9tdWx0aTtcbiAgfVxuICBwcml2YXRlIF9tdWx0aTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBsIG9yIHM7IG92ZXJyaWRlcyB0aGUgc2l6ZSBvbiBhbnkgcHJvamVjdGVkIGBzYmItZXhwYW5zaW9uLXBhbmVsYC4gYCovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIHNpemU6ICdzJyB8ICdsJyA9ICdsJztcblxuICBwcml2YXRlIF9hYm9ydCA9IG5ldyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIodGhpcyk7XG5cbiAgcHJpdmF0ZSBfY2xvc2VQYW5lbHMoZTogQ3VzdG9tRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoKGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50KT8ubG9jYWxOYW1lICE9PSAnc2JiLWV4cGFuc2lvbi1wYW5lbCcgfHwgdGhpcy5tdWx0aSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuX2V4cGFuc2lvblBhbmVsc1xuICAgICAgLmZpbHRlcigocGFuZWwpID0+IHBhbmVsICE9PSBlLnRhcmdldClcbiAgICAgIC5mb3JFYWNoKChwYW5lbCkgPT4gKHBhbmVsLmV4cGFuZGVkID0gZmFsc2UpKTtcbiAgfVxuXG4gIHByaXZhdGUgX3Jlc2V0RXhwYW5zaW9uUGFuZWxzKG5ld1ZhbHVlOiBib29sZWFuLCBvbGRWYWx1ZTogYm9vbGVhbik6IHZvaWQge1xuICAgIC8vIElmIGl0J3MgY2hhbmdpbmcgZnJvbSBcIm11bHRpID0gdHJ1ZVwiIHRvIFwibXVsdGkgPSBmYWxzZVwiLCBvcGVuIHRoZSBmaXJzdCBwYW5lbCBhbmQgY2xvc2UgYWxsIHRoZSBvdGhlcnMuXG4gICAgY29uc3QgZXhwYW5zaW9uUGFuZWxzID0gdGhpcy5fZXhwYW5zaW9uUGFuZWxzO1xuICAgIGlmIChleHBhbnNpb25QYW5lbHMubGVuZ3RoID4gMSAmJiBvbGRWYWx1ZSAmJiAhbmV3VmFsdWUpIHtcbiAgICAgIGV4cGFuc2lvblBhbmVsc1swXS5leHBhbmRlZCA9IHRydWU7XG4gICAgICBleHBhbnNpb25QYW5lbHNcbiAgICAgICAgLmZpbHRlcigoXywgaW5kZXg6IG51bWJlcikgPT4gaW5kZXggPiAwKVxuICAgICAgICAuZm9yRWFjaCgocGFuZWwpID0+IChwYW5lbC5leHBhbmRlZCA9IGZhbHNlKSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfc2V0VGl0bGVMZXZlbE9uQ2hpbGRyZW4oKTogdm9pZCB7XG4gICAgdGhpcy5fZXhwYW5zaW9uUGFuZWxzLmZvckVhY2goXG4gICAgICAocGFuZWw6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCkgPT4gKHBhbmVsLnRpdGxlTGV2ZWwgPSB0aGlzLnRpdGxlTGV2ZWwpLFxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIGdldCBfZXhwYW5zaW9uUGFuZWxzKCk6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudFtdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLnF1ZXJ5U2VsZWN0b3JBbGw/Lignc2JiLWV4cGFuc2lvbi1wYW5lbCcpID8/IFtdKTtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIGNvbnN0IHNpZ25hbCA9IHRoaXMuX2Fib3J0LnNpZ25hbDtcbiAgICB0aGlzLmFkZEV2ZW50TGlzdGVuZXIoXG4gICAgICBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQuZXZlbnRzLndpbGxPcGVuLFxuICAgICAgKGU6IEN1c3RvbUV2ZW50PHZvaWQ+KSA9PiB0aGlzLl9jbG9zZVBhbmVscyhlKSxcbiAgICAgIHsgc2lnbmFsIH0sXG4gICAgKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgaWYgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygnc2l6ZScpKSB7XG4gICAgICB0aGlzLl9leHBhbnNpb25QYW5lbHMuZm9yRWFjaCgocGFuZWw6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCkgPT4gKHBhbmVsLnNpemUgPSB0aGlzLnNpemUpKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuX2V4cGFuc2lvblBhbmVscy5mb3JFYWNoKFxuICAgICAgKHBhbmVsOiBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQsIGluZGV4OiBudW1iZXIsIGFycmF5OiBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnRbXSkgPT4ge1xuICAgICAgICBwYW5lbC50aXRsZUxldmVsID0gdGhpcy50aXRsZUxldmVsO1xuICAgICAgICBwYW5lbC5zaXplID0gdGhpcy5zaXplO1xuICAgICAgICBwYW5lbC50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtYWNjb3JkaW9uLWZpcnN0JywgaW5kZXggPT09IDApO1xuICAgICAgICBwYW5lbC50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtYWNjb3JkaW9uLWxhc3QnLCBpbmRleCA9PT0gYXJyYXkubGVuZ3RoIC0gMSk7XG4gICAgICB9LFxuICAgICk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItYWNjb3JkaW9uXCI+XG4gICAgICAgIDxzbG90IEBzbG90Y2hhbmdlPSR7dGhpcy5faGFuZGxlU2xvdGNoYW5nZX0+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWFjY29yZGlvbic6IFNiYkFjY29yZGlvbkVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdz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

package/development/action-group/action-group.d.ts

@@ -0,0 +1,45 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbButtonSize } from '../button.js';
+import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
+import { SbbLinkSize } from '../link.js';
+
+/**
+ * It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`.
+ *
+ * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`.
+ */
+export declare class SbbActionGroupElement extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Set the slotted `<sbb-action-group>` children's alignment.
+     */
+    alignGroup: 'start' | 'center' | 'stretch' | 'end';
+    /**
+     * Overrides the behaviour of `orientation` property.
+     */
+    horizontalFrom: SbbHorizontalFrom;
+    /**
+     * Indicates the orientation of the components inside the `<sbb-action-group>`.
+     */
+    orientation: SbbOrientation;
+    /**
+     * Size of the nested sbb-button instances. This will overwrite the size attribute of nested
+     * sbb-button instances.
+     */
+    buttonSize: SbbButtonSize;
+    /**
+     * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested
+     * sbb-block-link instances.
+     */
+    linkSize: SbbLinkSize;
+    private _syncButtons;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _syncLinks;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-action-group': SbbActionGroupElement;
+    }
+}
+//# sourceMappingURL=action-group.d.ts.map