@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/visual-checkbox.js

@@ -1,21 +1,51 @@
-import { css as h, LitElement as d, html as n, nothing as v } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
-import { SbbDisabledMixin as x, SbbNegativeMixin as k } from "./core/mixins.js";
-const m = h`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([size=xs]){--sbb-visual-checkbox-dimension: 1.25rem}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
-var p = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (t, s, r, b) => {
-  for (var o = b > 1 ? void 0 : b ? f(s, r) : s, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (o = (b ? a(s, r, o) : a(o)) || o);
-  return b && o && p(s, r, o), o;
+var C = (e) => {
+  throw TypeError(e);
 };
-let e = class extends x(k(d)) {
-  constructor() {
-    super(...arguments), this.checked = !1, this.indeterminate = !1, this.size = "m";
-  }
-  render() {
-    return n`
+var I = (e, o, i) => o.has(e) || C("Cannot " + i);
+var h = (e, o, i) => (I(e, o, "read from private field"), i ? i.call(e) : o.get(e)), u = (e, o, i) => o.has(e) ? C("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), v = (e, o, i, t) => (I(e, o, "write to private field"), t ? t.call(e, i) : o.set(e, i), i);
+import { __esDecorate as k, __runInitializers as r } from "tslib";
+import { css as D, LitElement as E, html as T, nothing as L } from "lit";
+import { customElement as M, property as m } from "lit/decorators.js";
+import { forceType as j } from "./core/decorators.js";
+import { SbbDisabledMixin as $, SbbNegativeMixin as G } from "./core/mixins.js";
+const H = D`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([size=xs]){--sbb-visual-checkbox-dimension: 1.25rem}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
+let J = (() => {
+  var b, l, n, a;
+  let e = [M("sbb-visual-checkbox")], o, i = [], t, x = $(G(E)), _, g = [], f = [], p, z = [], y = [], w, S = [], B = [];
+  return a = class extends x {
+    constructor() {
+      super(...arguments);
+      u(this, b, r(this, g, !1));
+      u(this, l, (r(this, f), r(this, z, !1)));
+      u(this, n, (r(this, y), r(this, S, "m")));
+      r(this, B);
+    }
+    /** Checked state. */
+    get checked() {
+      return h(this, b);
+    }
+    set checked(c) {
+      v(this, b, c);
+    }
+    /** Indeterminate state. */
+    get indeterminate() {
+      return h(this, l);
+    }
+    set indeterminate(c) {
+      v(this, l, c);
+    }
+    /** Size of the checkbox. */
+    get size() {
+      return h(this, n);
+    }
+    set size(c) {
+      v(this, n, c);
+    }
+    render() {
+      return T`
       <span class="sbb-visual-checkbox">
         <span class="sbb-visual-checkbox__icon">
-          ${this.checked || this.indeterminate ? n`<svg
+          ${this.checked || this.indeterminate ? T`<svg
                 width=${this.size === "xs" ? "20" : "24"}
                 height=${this.size === "xs" ? "20" : "24"}
                 viewBox="0 0 24 24"
@@ -28,25 +58,22 @@ let e = class extends x(k(d)) {
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
-              </svg>` : v}
+              </svg>` : L}
         </span>
       </span>
     `;
-  }
-};
-e.styles = m;
-c([
-  l({ reflect: !0, type: Boolean })
-], e.prototype, "checked", 2);
-c([
-  l({ reflect: !0, type: Boolean })
-], e.prototype, "indeterminate", 2);
-c([
-  l({ reflect: !0 })
-], e.prototype, "size", 2);
-e = c([
-  u("sbb-visual-checkbox")
-], e);
+    }
+  }, b = new WeakMap(), l = new WeakMap(), n = new WeakMap(), t = a, (() => {
+    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    _ = [j(), m({ reflect: !0, type: Boolean })], p = [j(), m({ reflect: !0, type: Boolean })], w = [m({ reflect: !0 })], k(a, null, _, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (s) => "checked" in s, get: (s) => s.checked, set: (s, d) => {
+      s.checked = d;
+    } }, metadata: c }, g, f), k(a, null, p, { kind: "accessor", name: "indeterminate", static: !1, private: !1, access: { has: (s) => "indeterminate" in s, get: (s) => s.indeterminate, set: (s, d) => {
+      s.indeterminate = d;
+    } }, metadata: c }, z, y), k(a, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
+      s.size = d;
+    } }, metadata: c }, S, B), k(null, o = { value: t }, e, { kind: "class", name: t.name, metadata: c }, null, i), t = o.value, c && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
+  })(), a.styles = H, r(t, i), t;
+})();
 export {
-  e as SbbVisualCheckboxElement
+  J as SbbVisualCheckboxElement
 };