@sbb-esta/lyne-elements-dev 4.7.0-dev.1773405905 → 4.7.0-dev.1773409936

package/chip/chip-group/chip-group.component.js

@@ -1,14 +1,14 @@
-var x = (i) => {
-  throw TypeError(i);
+var x = (a) => {
+  throw TypeError(a);
 };
-var I = (i, a, l) => a.has(i) || x("Cannot " + l);
-var d = (i, a, l) => (I(i, a, "read from private field"), l ? l.call(i) : a.get(i)), g = (i, a, l) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, l), h = (i, a, l, c) => (I(i, a, "write to private field"), c ? c.call(i, l) : a.set(i, l), l);
+var I = (a, i, l) => i.has(a) || x("Cannot " + l);
+var d = (a, i, l) => (I(a, i, "read from private field"), l ? l.call(a) : i.get(a)), g = (a, i, l) => i.has(a) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, l), h = (a, i, l, c) => (I(a, i, "write to private field"), c ? c.call(a, l) : i.set(a, l), l);
 import { __esDecorate as _, __runInitializers as p } from "tslib";
 import { css as B, isServer as O, html as D } from "lit";
 import { property as y } from "lit/decorators.js";
 import { isArrowKeyPressed as K, getNextElementIndex as L } from "../../core/a11y.js";
 import { SbbElement as W } from "../../core/base-elements.js";
-import { SbbLanguageController as T, SbbPropertyWatcherController as F } from "../../core/controllers.js";
+import { SbbLanguageController as F, SbbPropertyWatcherController as T } from "../../core/controllers.js";
 import { forceType as q } from "../../core/decorators.js";
 import { isLean as V } from "../../core/dom/lean-context.js";
 import { i18nSelectionRequired as M, i18nChipGroupInputDescription as N } from "../../core/i18n.js";
@@ -16,16 +16,39 @@ import { SbbRequiredMixin as R, SbbDisabledMixin as $, SbbNegativeMixin as j, Sb
 import { boxSizingStyles as J } from "../../core/styles.js";
 import { SbbChipElement as P } from "../chip/chip.component.js";
 const H = B`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`;
-let ht = (() => {
-  var u, m, b, r;
-  let i = R($(j(U(W)))), a = [], l, c, f = [], v = [], z, w = [], k = [], E, C = [], S = [];
-  return r = class extends i {
+class Q extends CustomEvent {
+  /**
+   * @deprecated Use event properties directly.
+   */
+  get detail() {
+    return this;
+  }
+  constructor(i) {
+    super("chipinputtokenend", {
+      cancelable: !0,
+      bubbles: !0,
+      composed: !0
+    }), this.origin = i.origin, this.value = i.value, this.label = i.label;
+  }
+  /** Set a new value for the chip that will be created */
+  setValue(i) {
+    this.value = i;
+  }
+  /** Set a label for the chip that will be created */
+  setLabel(i) {
+    this.label = i;
+  }
+}
+let pt = (() => {
+  var u, b, m, r;
+  let a = R($(j(U(W)))), i = [], l, c, f = [], v = [], z, w = [], k = [], E, C = [], S = [];
+  return r = class extends a {
     constructor() {
       super();
       g(this, u);
-      g(this, m);
       g(this, b);
-      h(this, u, (p(this, a), p(this, f, null))), h(this, m, (p(this, v), p(this, w, ["Enter"]))), h(this, b, (p(this, k), p(this, C, !1))), this._inputAttributeObserver = (p(this, S), O ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new T(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new F(this, () => this.closest("sbb-form-field"), {
+      g(this, m);
+      h(this, u, (p(this, i), p(this, f, null))), h(this, b, (p(this, v), p(this, w, ["Enter"]))), h(this, m, (p(this, k), p(this, C, !1))), this._inputAttributeObserver = (p(this, S), O ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new T(this, () => this.closest("sbb-form-field"), {
         size: (t) => this._updateSize(t.size),
         label: (t) => this._updateLabelState(t),
         hiddenLabel: (t) => this._updateLabelState(t)
@@ -35,13 +58,13 @@ let ht = (() => {
     set value(t) {
       t = t ?? [];
       const e = this.value, s = [...e];
-      for (const n of t)
-        s.includes(n) && s.splice(s.indexOf(n), 1);
-      s.forEach((n) => this._chipElements().find((A) => A.value === n)?.remove());
-      const o = [...t];
-      for (const n of e)
-        o.includes(n) && o.splice(o.indexOf(n), 1);
-      o.forEach((n) => this._createChipElement(n));
+      for (const o of t)
+        s.includes(o) && s.splice(s.indexOf(o), 1);
+      s.forEach((o) => this._chipElements().find((A) => A.value === o)?.remove());
+      const n = [...t];
+      for (const o of e)
+        n.includes(o) && n.splice(n.indexOf(o), 1);
+      n.forEach((o) => this._createChipElement(o));
     }
     get value() {
       return this._chipElements().map((t) => t.value);
@@ -55,17 +78,17 @@ let ht = (() => {
     }
     /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
     get separatorKeys() {
-      return d(this, m);
+      return d(this, b);
     }
     set separatorKeys(t) {
-      h(this, m, t);
+      h(this, b, t);
     }
     /** Whether to automatically add a chip when the input loses focus if there's a value. */
     get addOnBlur() {
-      return d(this, b);
+      return d(this, m);
     }
     set addOnBlur(t) {
-      h(this, b, t);
+      h(this, m, t);
     }
     _updateLabelState(t) {
       this.toggleState("without-label", !t.label || t.hiddenLabel);
@@ -128,8 +151,8 @@ let ht = (() => {
       const e = t.target;
       if (e.localName === "sbb-chip") {
         if (K(t)) {
-          const s = this._enabledChipElements(), o = L(t, s.indexOf(e), s.length);
-          s[o].focus();
+          const s = this._enabledChipElements(), n = L(t, s.indexOf(e), s.length);
+          s[n].focus();
           return;
         }
         switch (t.key) {
@@ -168,22 +191,12 @@ let ht = (() => {
       const s = e ?? this._inputElement.value.trim();
       if (!s)
         return;
-      const o = {
+      const n = new Q({
         origin: t,
         value: s,
-        label: (e ? this.displayWith?.(e) : null) ?? void 0,
-        setValue: (n) => o.value = n,
-        setLabel: (n) => o.label = n
-      };
-      this._dispatchChipInputTokenEnd(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
-    }
-    _dispatchChipInputTokenEnd(t) {
-      return this.dispatchEvent(new CustomEvent("chipinputtokenend", {
-        detail: t,
-        cancelable: !0,
-        bubbles: !0,
-        composed: !0
-      }));
+        label: (e ? this.displayWith?.(e) : null) ?? void 0
+      });
+      this.dispatchEvent(n) && (this._createChipElement(n.value, n.label), this._inputElement.value = "", this._emitInputEvents());
     }
     _deleteChip(t) {
       const e = this._enabledChipElements();
@@ -231,11 +244,11 @@ let ht = (() => {
     render() {
       return D`<slot @slotchange=${this._setupComponent}></slot>`;
     }
-  }, u = new WeakMap(), m = new WeakMap(), b = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+  }, u = new WeakMap(), b = new WeakMap(), m = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
     l = [y({ type: Array })], c = [y({ attribute: !1 })], z = [y({ attribute: "separator-keys", type: Array })], E = [q(), y({ attribute: "add-on-blur", type: Boolean })], _(r, null, l, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
       e.value = s;
-    } }, metadata: t }, null, a), _(r, null, c, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
+    } }, metadata: t }, null, i), _(r, null, c, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
       e.displayWith = s;
     } }, metadata: t }, f, v), _(r, null, z, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
       e.separatorKeys = s;
@@ -249,5 +262,6 @@ let ht = (() => {
   }, r;
 })();
 export {
-  ht as SbbChipGroupElement
+  pt as SbbChipGroupElement,
+  Q as SbbChipInputTokenEndEvent
 };

package/chip/chip-group.js

@@ -1,7 +1,9 @@
 import { SbbChipGroupElement as e } from "./chip-group/chip-group.component.js";
+import { SbbChipInputTokenEndEvent as p } from "./chip-group/chip-group.component.js";
 e.define();
 console.warn(`The entrypoint '@sbb-esta/elements/chip/chip-group.js' has been deprecated.
 Use either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.`);
 export {
-  e as SbbChipGroupElement
+  e as SbbChipGroupElement,
+  p as SbbChipInputTokenEndEvent
 };

package/chip.js

@@ -1,8 +1,10 @@
 import { SbbChipGroupElement as e } from "./chip/chip-group/chip-group.component.js";
-import { SbbChipElement as i } from "./chip/chip/chip.component.js";
-i.define();
+import { SbbChipInputTokenEndEvent as i } from "./chip/chip-group/chip-group.component.js";
+import { SbbChipElement as o } from "./chip/chip/chip.component.js";
+o.define();
 e.define();
 export {
-  i as SbbChipElement,
-  e as SbbChipGroupElement
+  o as SbbChipElement,
+  e as SbbChipGroupElement,
+  i as SbbChipInputTokenEndEvent
 };

package/chip.pure.js

@@ -1,6 +1,7 @@
-import { SbbChipGroupElement as p } from "./chip/chip-group/chip-group.component.js";
-import { SbbChipElement as b } from "./chip/chip/chip.component.js";
+import { SbbChipGroupElement as b, SbbChipInputTokenEndEvent as n } from "./chip/chip-group/chip-group.component.js";
+import { SbbChipElement as t } from "./chip/chip/chip.component.js";
 export {
-  b as SbbChipElement,
-  p as SbbChipGroupElement
+  t as SbbChipElement,
+  b as SbbChipGroupElement,
+  n as SbbChipInputTokenEndEvent
 };