@sbb-esta/lyne-elements 1.11.3 → 1.12.1

package/slider.js

@@ -1,80 +1,121 @@
-import { css as u, LitElement as v, html as c, nothing as b } from "lit";
-import { property as t, state as m, customElement as p } from "lit/decorators.js";
-import { ref as f } from "lit/directives/ref.js";
+import { css as c, LitElement as u, html as d, nothing as h } from "lit";
+import { property as a, state as v, customElement as m } from "lit/decorators.js";
+import { ref as p } from "lit/directives/ref.js";
 import { styleMap as _ } from "lit/directives/style-map.js";
-import { SbbConnectedAbortController as g } from "./core/controllers.js";
-import { hostAttributes as y } from "./core/decorators.js";
-import { setOrRemoveAttribute as n } from "./core/dom.js";
-import { EventEmitter as w, forwardEventToHost as k } from "./core/eventing.js";
-import { SbbDisabledMixin as x } from "./core/mixins.js";
+import { SbbConnectedAbortController as f } from "./core/controllers.js";
+import { hostAttributes as g } from "./core/decorators.js";
+import { EventEmitter as w, forwardEventToHost as y } from "./core/eventing.js";
+import { SbbDisabledMixin as x, SbbFormAssociatedMixin as k } from "./core/mixins.js";
 import "./icon.js";
-const I = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host([disabled]){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host([disabled]),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host([disabled]),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is([disabled],[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
-var A = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, o, l, a) => {
-  for (var i = a > 1 ? void 0 : a ? C(o, l) : o, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (i = (a ? h(o, l, i) : h(i)) || i);
-  return a && i && A(o, l, i), i;
+const I = c`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, t = (e, i, l, r) => {
+  for (var o = r > 1 ? void 0 : r ? N(i, l) : i, n = e.length - 1, b; n >= 0; n--)
+    (b = e[n]) && (o = (r ? b(i, l, o) : b(o)) || o);
+  return r && o && M(i, l, o), o;
 };
-let s = class extends x(v) {
+let s = class extends x(k(u)) {
   constructor() {
-    super(...arguments), this.value = "", this.name = "", this.min = "0", this.max = "100", this.readonly = !1, this._valueFraction = 0, this._didChange = new w(this, s.events.didChange, {
+    super(), this._min = "0", this._max = "100", this.readonly = !1, this._valueFraction = 0, this._didChange = new w(this, s.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this._abort = new g(this);
+    }), this._abort = new f(this), this.internals.role = "slider";
+  }
+  set value(e) {
+    this._isValidNumber(e) ? super.value = this._boundBetweenMinMax(e) : super.value = this._getDefaultValue(), this.internals.ariaValueNow = this.value, this._calculateValueFraction();
+  }
+  get value() {
+    return super.value;
+  }
+  set valueAsNumber(e) {
+    this.value = e == null ? void 0 : e.toString();
+  }
+  get valueAsNumber() {
+    return Number(this.value);
+  }
+  set min(e) {
+    this._isValidNumber(e) && (this._min = e, this.value = this._boundBetweenMinMax(this.value));
+  }
+  get min() {
+    return this._min;
+  }
+  set max(e) {
+    this._isValidNumber(e) && (this._max = e, this.value = this._boundBetweenMinMax(this.value));
+  }
+  get max() {
+    return this._max;
   }
   connectedCallback() {
     super.connectedCallback();
     const e = this._abort.signal;
-    this.addEventListener("keydown", (o) => this._handleKeydown(o), { signal: e }), this._handleChange();
+    this.addEventListener("keydown", (i) => this._handleKeydown(i), { signal: e }), this.value || (this.value = this._getDefaultValue());
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("value") ? this._handleChange(Number(this.value)) : e.has("valueAsNumber") && this._handleChange(Number(this.valueAsNumber)), e.has("min") && n(this, "aria-valuemin", this.min ?? null), e.has("max") && n(this, "aria-valuemax", this.max ?? null), e.has("readonly") && n(this, "aria-readonly", this.readonly ? "true" : null), e.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
+    super.willUpdate(e), e.has("min") && (this.internals.ariaValueMin = this.min), e.has("max") && (this.internals.ariaValueMax = this.max), e.has("readonly") && (this.internals.ariaReadOnly = (!!this.readonly).toString());
+  }
+  /**
+   * The reset value is the attribute value (the setup value). If not present, calculates the default.
+   * @internal
+   */
+  formResetCallback() {
+    this.value = this.getAttribute("value") ?? this._getDefaultValue();
   }
-  _syncValues(e) {
-    e != null && (e && typeof e != "number" && (e = +e), this.value = e.toString(), this.valueAsNumber = e, n(this, "aria-valuenow", this.value || null));
+  /**
+   * @internal
+   */
+  formStateRestoreCallback(e, i) {
+    this.value = e;
   }
   /**
-   * Recalculates the `_valueFraction` on change to correctly display the slider knob and lines.
-   * The first calculation happens in connectedCallback(...), so since `_rangeInput` is not yet available,
-   * the `min` and `max` values are used; if `value` is not provided, the default value is halfway between min and max
-   * (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value).
+   *  If no value is provided, default is the middle point between min and max
+   *  (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value)
    */
-  _handleChange(e = ((o) => (o = this._rangeInput) == null ? void 0 : o.valueAsNumber)()) {
-    let l, a;
-    this._rangeInput ? (l = +this._rangeInput.min, a = +this._rangeInput.max) : (l = +this.min, a = +this.max, e = this.value && this.value !== "" ? +this.value : this.valueAsNumber ? this.valueAsNumber : +this.min + (+this.max - +this.min) / 2);
-    const i = (e - l) / (a - l);
-    this._valueFraction = isNaN(i) || i < 0 ? 0 : i > 1 ? 1 : i, this._syncValues(e);
+  _getDefaultValue() {
+    return (+this.min + (+this.max - +this.min) / 2).toString();
+  }
+  _isValidNumber(e) {
+    return !!e && !isNaN(Number(e));
+  }
+  /**
+   * Restrains the value between the min and max
+   */
+  _boundBetweenMinMax(e) {
+    return Math.max(+this.min, Math.min(+this.max, +e)).toString();
+  }
+  _calculateValueFraction() {
+    const e = this.valueAsNumber, i = +this.min, l = +this.max, r = (e - i) / (l - i);
+    this._valueFraction = isNaN(r) ? 0 : Math.max(0, Math.min(1, r));
   }
   async _handleKeydown(e) {
-    if (e.key !== "Tab" && e.preventDefault(), !(this.disabled || this.readonly)) {
+    if (e.key !== "Tab" && e.preventDefault(), !this.readonly) {
       if (e.key === "Home")
-        this._rangeInput.value = this._rangeInput.min;
+        this._rangeInput.value = this.min;
       else if (e.key === "End")
-        this._rangeInput.value = this._rangeInput.max;
+        this._rangeInput.value = this.max;
       else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
         this._rangeInput.stepDown();
       else if (e.key === "ArrowRight" || e.key === "ArrowUp")
         this._rangeInput.stepUp();
       else if (e.key === "PageDown")
-        this._rangeInput.stepDown((+this._rangeInput.max - +this._rangeInput.min) / 10);
+        this._rangeInput.stepDown((+this.max - +this.min) / 10);
       else if (e.key === "PageUp")
-        this._rangeInput.stepUp((+this._rangeInput.max - +this._rangeInput.min) / 10);
+        this._rangeInput.stepUp((+this.max - +this.min) / 10);
       else
         return;
-      this._handleChange(), this.dispatchEvent(
+      this._rangeInput.dispatchEvent(
         new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })
-      ), this._emitChange(new Event("change", { bubbles: !0, cancelable: !0, composed: !0 }));
+      ), this._rangeInput.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
   }
   /** Emits the change event. */
   _emitChange(e) {
-    k(e, this), this._didChange.emit();
+    y(e, this), this._didChange.emit();
   }
   render() {
-    return c`
+    return d`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? c`<sbb-icon name="${this.startIcon}"></sbb-icon>` : b}
+            ${this.startIcon ? d`<sbb-icon name="${this.startIcon}"></sbb-icon>` : h}
           </slot>
           <div
             class="sbb-slider__container"
@@ -82,17 +123,15 @@ let s = class extends x(v) {
           >
             <input
               tabindex="-1"
-              name=${this.name || b}
-              min=${this.min || b}
-              max=${this.max || b}
-              ?disabled=${this.disabled || this.readonly || b}
-              .valueAsNumber=${this.valueAsNumber || b}
-              value=${this.value || b}
+              min=${this.min}
+              max=${this.max}
+              ?disabled=${this.disabled || this.formDisabled || this.readonly}
+              value=${this.value || h}
               class="sbb-slider__range-input"
               type="range"
               @change=${(e) => this._emitChange(e)}
-              @input=${() => this._handleChange()}
-              ${f((e) => this._rangeInput = e)}
+              @input=${() => this.value = this._rangeInput.value}
+              ${p((e) => this._rangeInput = e)}
             />
             <div class="sbb-slider__line">
               <div class="sbb-slider__selected-line"></div>
@@ -100,7 +139,7 @@ let s = class extends x(v) {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? c`<sbb-icon name="${this.endIcon}"></sbb-icon>` : b}
+            ${this.endIcon ? d`<sbb-icon name="${this.endIcon}"></sbb-icon>` : h}
           </slot>
         </div>
       </div>
@@ -111,40 +150,34 @@ s.styles = I;
 s.events = {
   didChange: "didChange"
 };
-r([
-  t()
-], s.prototype, "value", 2);
-r([
-  t({ attribute: "value-as-number", type: Number })
-], s.prototype, "valueAsNumber", 2);
-r([
-  t({ reflect: !0 })
-], s.prototype, "name", 2);
-r([
-  t()
-], s.prototype, "form", 2);
-r([
-  t()
-], s.prototype, "min", 2);
-r([
-  t()
-], s.prototype, "max", 2);
-r([
-  t({ type: Boolean })
+t([
+  a()
+], s.prototype, "value", 1);
+t([
+  a({ attribute: "value-as-number", type: Number })
+], s.prototype, "valueAsNumber", 1);
+t([
+  a()
+], s.prototype, "min", 1);
+t([
+  a()
+], s.prototype, "max", 1);
+t([
+  a({ type: Boolean })
 ], s.prototype, "readonly", 2);
-r([
-  t({ attribute: "start-icon" })
+t([
+  a({ attribute: "start-icon" })
 ], s.prototype, "startIcon", 2);
-r([
-  t({ attribute: "end-icon" })
+t([
+  a({ attribute: "end-icon" })
 ], s.prototype, "endIcon", 2);
-r([
-  m()
+t([
+  v()
 ], s.prototype, "_valueFraction", 2);
-s = r([
-  p("sbb-slider"),
-  y({
-    role: "slider"
+s = t([
+  m("sbb-slider"),
+  g({
+    tabindex: "0"
   })
 ], s);
 export {