@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/form-field/form-field-clear.js

@@ -1,45 +1,43 @@
-import { css as n, html as l } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbButtonBaseElement as c } from "../core/base-elements.js";
-import { SbbConnectedAbortController as u, SbbLanguageController as v } from "../core/controllers.js";
-import { hostAttributes as f } from "../core/decorators.js";
-import { i18nClearInput as m } from "../core/i18n.js";
-import { SbbNegativeMixin as h } from "../core/mixins.js";
+import { __esDecorate as l, __runInitializers as d } from "tslib";
+import { css as c, html as u } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbButtonBaseElement as v } from "../core/base-elements.js";
+import { SbbConnectedAbortController as f, SbbLanguageController as h } from "../core/controllers.js";
+import { hostAttributes as g } from "../core/decorators.js";
+import { i18nClearInput as p } from "../core/i18n.js";
+import { SbbNegativeMixin as k } from "../core/mixins.js";
 import "../icon.js";
-const p = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (o, t, b, a) => {
-  for (var r = a > 1 ? void 0 : a ? k(t, b) : t, e = o.length - 1, s; e >= 0; e--)
-    (s = o[e]) && (r = (a ? s(t, b, r) : s(r)) || r);
-  return a && r && g(t, b, r), r;
-};
-let i = class extends h(c) {
-  constructor() {
-    super(...arguments), this._abort = new u(this), this._language = new v(this);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const o = this._abort.signal;
-    this.addEventListener("click", () => this._handleClick(), { signal: o }), this._formField = this.closest("sbb-form-field, [data-form-field]"), this._formField && (this.negative = this._formField.hasAttribute("negative"));
-  }
-  async _handleClick() {
-    var t, b;
-    const o = (t = this._formField) == null ? void 0 : t.inputElement;
-    !o || o.localName !== "input" || ((b = this._formField) == null || b.clear(), o.focus(), o.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), o.dispatchEvent(new Event("change", { bubbles: !0 })));
-  }
-  willUpdate(o) {
-    super.willUpdate(o), this.setAttribute("aria-label", m[this._language.current]);
-  }
-  renderTemplate() {
-    return l` <sbb-icon name="cross-small"></sbb-icon> `;
-  }
-};
-i.styles = p;
-i = x([
-  d("sbb-form-field-clear"),
-  f({
+const y = c`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
+let A = (() => {
+  var r;
+  let n = [m("sbb-form-field-clear"), g({
     slot: "suffix"
-  })
-], i);
+  })], b, a = [], o, e = k(v);
+  return r = class extends e {
+    constructor() {
+      super(...arguments), this._abort = new f(this), this._language = new h(this);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this._abort.signal;
+      this.addEventListener("click", () => this._handleClick(), { signal: t }), this._formField = this.closest("sbb-form-field, [data-form-field]"), this._formField && (this.negative = this._formField.hasAttribute("negative"));
+    }
+    async _handleClick() {
+      var s, i;
+      const t = (s = this._formField) == null ? void 0 : s.inputElement;
+      !t || t.localName !== "input" || ((i = this._formField) == null || i.clear(), t.focus(), t.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
+    }
+    willUpdate(t) {
+      super.willUpdate(t), this.setAttribute("aria-label", p[this._language.current]);
+    }
+    renderTemplate() {
+      return u` <sbb-icon name="cross-small"></sbb-icon> `;
+    }
+  }, o = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    l(null, b = { value: o }, n, { kind: "class", name: o.name, metadata: t }, null, a), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = y, d(o, a), o;
+})();
 export {
-  i as SbbFormFieldClearElement
+  A as SbbFormFieldClearElement
 };