@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/slider/native-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-input.styles.js","sources":["../../../src/components/slider/native-input.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const nativeInputStyles = css`\n  input[type='range'] {\n    left: 0;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 2;\n\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    border: none;\n  }\n  input[type='range']:focus {\n    outline: none;\n  }\n  input[type='range']::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    order: none;\n  }\n\n  input[type='range']:focus::-webkit-slider-runnable-track {\n    background: transparent;\n    border: none;\n  }\n\n  input[type='range']::-moz-range-track {\n    width: 100%;\n    height: 100%;\n    -moz-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n\n  input[type='range']::-ms-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n  input[type='range']::-ms-fill-lower,\n  input[type='range']::-ms-fill-upper {\n    background: transparent;\n    border: 0 none;\n  }\n\n  input[type='range']::-ms-tooltip {\n    display: none;\n  }\n\n  input[type='range']::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  input[type='range']::-ms-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']:focus::-ms-fill-lower {\n    background: transparent;\n  }\n  input[type='range']:focus::-ms-fill-upper {\n    background: transparent;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,9 @@
+import { UUISliderElement } from './slider.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-slider': UUISliderElement;
+    }
+}
+export * from './slider.element.js';
+export * from './UUISliderEvent.js';
+export { UUISliderElement as default } from './slider.element.js';

package/dist/components/slider/slider.element.d.ts

@@ -0,0 +1,111 @@
+import { LitElement, nothing } from 'lit';
+declare const UUISliderElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
+/**
+ * @element uui-slider
+ * @description - Native `<input type="range">` wrapper.
+ * @fires UUISliderEvent#input on input
+ * @extends UUIFormControlMixin
+ */
+export declare class UUISliderElement extends UUISliderElement_base {
+    #private;
+    /**
+     * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
+     * @type {boolean}
+     */
+    static readonly formAssociated = true;
+    /**
+     * Hides the numbers representing the value of each steps. Dots will still be visible
+     * @type {boolean}
+     * @attr 'hide-step-values'
+     * @default false
+     */
+    hideStepValues: boolean;
+    /**
+     * Hides the value label on the thumb.
+     * @type {boolean}
+     * @attr 'hide-value-label'
+     * @default false
+     */
+    hideValueLabel: boolean;
+    /**
+     * This is a minimum value of the input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    min: number;
+    /**
+     * This is a maximum value of the input.
+     * @type {number}
+     * @attr
+     * @default 100
+     */
+    max: number;
+    /**
+     * This reflects the behavior of a native input step attribute.
+     * @type {number}
+     * @attr
+     * @default 1
+     */
+    get step(): number;
+    set step(value: number);
+    /**
+     * This is a value property of the uui-slider.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    get value(): FormDataEntryValue | FormData;
+    set value(newVal: FormDataEntryValue | FormData);
+    /**
+     * Disables the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Label to be used for aria-label and eventually as visual label
+     * @type {string}
+     * @attr
+     */
+    label: string;
+    private readonly _input;
+    private readonly _track;
+    constructor();
+    /**
+     * This method enables <label for="..."> to focus the select
+     */
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    /**
+     * This method enables <label for="..."> to open the select
+     */
+    click(): Promise<void>;
+    protected getFormElement(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _updateSteps;
+    private _stepWidth;
+    private _calculateStepWidth;
+    private readonly onWindowResize;
+    protected _steps: number[];
+    protected _sliderPosition: string;
+    private _calculateSliderPosition;
+    private _onInput;
+    private _onChange;
+    renderTrackSteps(): import("lit-html").TemplateResult<2>;
+    renderStepValues(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/slider/slider.element.js

@@ -0,0 +1,408 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _stepDecimalPlaces, _step, _UUISliderElement_instances, onKeyDown_fn;
+import { LitElement, svg, nothing, html, css } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { nativeInputStyles } from "./native-input.styles.js";
+import { UUISliderEvent } from "./UUISliderEvent.js";
+import { UUIHorizontalPulseKeyframes } from "../../internal/animations/uui-pulse.js";
+import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+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;
+};
+const TRACK_PADDING = 12;
+const STEP_MIN_WIDTH = 24;
+const GenerateStepArray = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+const CountDecimalPlaces = (num) => {
+  const decimalIndex = num.toString().indexOf(".");
+  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
+const _UUISliderElement = class _UUISliderElement extends UUIFormControlWithBasicsMixin(
+  LitElement,
+  ""
+) {
+  constructor() {
+    super();
+    __privateAdd(this, _UUISliderElement_instances);
+    __privateAdd(this, _stepDecimalPlaces);
+    __privateAdd(this, _step);
+    __privateSet(this, _stepDecimalPlaces, 0);
+    this.hideStepValues = false;
+    this.hideValueLabel = false;
+    this.min = 0;
+    this.max = 100;
+    __privateSet(this, _step, 1);
+    this.disabled = false;
+    this.readonly = false;
+    this._stepWidth = 0;
+    this.onWindowResize = () => {
+      this._stepWidth = this._calculateStepWidth();
+    };
+    this._steps = [];
+    this._sliderPosition = "0%";
+    this.addEventListener("keydown", __privateMethod(this, _UUISliderElement_instances, onKeyDown_fn));
+  }
+  get step() {
+    return __privateGet(this, _step);
+  }
+  set step(value) {
+    __privateSet(this, _step, value);
+    __privateSet(this, _stepDecimalPlaces, (value.toString().split(".")[1] || []).length);
+  }
+  get value() {
+    return super.value;
+  }
+  set value(newVal) {
+    if (newVal instanceof File) {
+      return;
+    }
+    const oldVal = super.value;
+    let correctedValue = newVal ? Number.parseFloat(newVal) : 0;
+    correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);
+    if (this.step > 0) {
+      correctedValue = Math.round(correctedValue / this.step) * this.step;
+    }
+    super.value = correctedValue.toFixed(__privateGet(this, _stepDecimalPlaces)).toString();
+    this._calculateSliderPosition();
+    this.requestUpdate("value", oldVal);
+  }
+  /**
+   * This method enables <label for="..."> to focus the select
+   */
+  async focus() {
+    await this.updateComplete;
+    this._input.focus();
+  }
+  async blur() {
+    await this.updateComplete;
+    this._input.blur();
+  }
+  /**
+   * This method enables <label for="..."> to open the select
+   */
+  async click() {
+    await this.updateComplete;
+    this._input.click();
+  }
+  getFormElement() {
+    return this._input;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", this.onWindowResize);
+    if (!this.label) {
+      console.warn(this.tagName + " needs a `label`", this);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onWindowResize);
+    super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._calculateSliderPosition();
+    this._updateSteps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.get("max") || changedProperties.get("min") || changedProperties.get("step")) {
+      this.value = this.value;
+      this._updateSteps();
+    }
+  }
+  _updateSteps() {
+    this._steps = GenerateStepArray(this.min, this.max, this.step);
+    this._stepWidth = this._calculateStepWidth();
+  }
+  _calculateStepWidth() {
+    return (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) / (this._steps.length - 1);
+  }
+  _calculateSliderPosition() {
+    const ratio = (Number.parseFloat(super.value || "0") - this.min) / (this.max - this.min);
+    this._sliderPosition = `${Math.floor(ratio * 1e5) / 1e3}%`;
+  }
+  _onInput(e) {
+    e.stopPropagation();
+    this.value = this._input.value;
+    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));
+  }
+  _onChange(e) {
+    e.stopPropagation();
+    this.pristine = false;
+    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
+  }
+  renderTrackSteps() {
+    return svg`
+  ${this._steps.map((el) => {
+      if (this._stepWidth >= STEP_MIN_WIDTH) {
+        const x = Math.round(
+          TRACK_PADDING + this._stepWidth * this._steps.indexOf(el)
+        );
+        return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
+      }
+      return svg``;
+    })}
+`;
+  }
+  renderStepValues() {
+    if (this.hideStepValues) return nothing;
+    return html`<div id="step-values">
+      ${this._steps.map(
+      (el) => html` <span
+            ><span>
+              ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH ? el.toFixed(CountDecimalPlaces(this.step)) : nothing}
+            </span></span
+          >`
+    )}
+    </div>`;
+  }
+  render() {
+    return html`
+      <input
+        id="input"
+        type="range"
+        min="${this.min}"
+        max="${this.max}"
+        .value="${this.value}"
+        aria-label="${this.label}"
+        step="${+this.step}"
+        ?disabled=${this.disabled || this.readonly}
+        ?readonly=${this.readonly}
+        @input=${this._onInput}
+        @change=${this._onChange} />
+      <div id="track" aria-hidden="true">
+        <svg height="100%" width="100%">
+          <rect x="9" y="9" height="3" rx="2" />
+          ${this.renderTrackSteps()}
+        </svg>
+
+        <div id="track-inner" aria-hidden="true">
+          <div id="thumb" style=${styleMap({ left: this._sliderPosition })}>
+            ${this.hideValueLabel ? null : html`<div id="thumb-label">${this.value}</div>`}
+          </div>
+        </div>
+      </div>
+      ${this.renderStepValues()}
+    `;
+  }
+};
+_stepDecimalPlaces = new WeakMap();
+_step = new WeakMap();
+_UUISliderElement_instances = new WeakSet();
+onKeyDown_fn = function(e) {
+  if (e.key == "Enter") {
+    this.submit();
+  }
+};
+_UUISliderElement.formAssociated = true;
+_UUISliderElement.styles = [
+  UUIHorizontalPulseKeyframes,
+  nativeInputStyles,
+  css`
+      :host {
+        display: inline-block;
+        width: 100%;
+        position: relative;
+        min-height: 30px;
+        user-select: none;
+      }
+
+      input {
+        box-sizing: border-box;
+        height: 18px;
+      }
+
+      #track {
+        position: relative;
+        height: 18px;
+        width: 100%;
+        display: flex;
+      }
+
+      #track svg {
+        height: 21px;
+        border-radius: 10px;
+        background-color: var(--uui-color-surface);
+      }
+      #track svg rect {
+        width: calc(100% - 18px);
+        fill: var(--uui-color-border-standalone);
+        transition: fill 120ms;
+      }
+      :host(:not([disabled]):not([readonly])) input:hover ~ #track svg rect {
+        fill: var(--uui-color-border-emphasis);
+      }
+
+      input:focus-visible ~ #track #thumb {
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      .track-step {
+        fill: var(--uui-color-border);
+      }
+
+      :host(:not([disabled]):not([readonly]))
+        input:hover
+        ~ #track
+        svg
+        .track-step {
+        fill: var(--uui-color-border-emphasis);
+      }
+
+      #track-inner {
+        position: absolute;
+        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+      }
+
+      #thumb {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        top: 2px;
+        bottom: 0;
+        left: 0;
+        height: 17px;
+        width: 17px;
+        margin-left: -8px;
+        margin-right: -8px;
+        border-radius: 50%;
+        box-sizing: border-box;
+
+        background-color: var(--uui-color-surface);
+        border: 3px solid var(--uui-color-selected);
+      }
+      :host([disabled]) #thumb {
+        background-color: var(--uui-color-disabled);
+        border-color: var(--uui-color-disabled-standalone);
+      }
+
+      #thumb-label {
+        position: absolute;
+        box-sizing: border-box;
+        font-weight: 700;
+        bottom: 15px;
+        left: 50%;
+        width: 40px;
+        margin-left: -20px;
+        text-align: center;
+        opacity: 0;
+        transition: 120ms opacity;
+        color: var(--uui-color-selected);
+      }
+
+      input:focus ~ #track #thumb-label,
+      :host(:not([disabled]):not([readonly]))
+        input:hover
+        ~ #track
+        #thumb-label {
+        opacity: 1;
+      }
+
+      #step-values {
+        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+        margin-top: 3px;
+        display: flex;
+        align-items: flex-end;
+        box-sizing: border-box;
+      }
+
+      #step-values > span {
+        flex-basis: 0;
+        flex-grow: 1;
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      :host(:not([disabled]):not([readonly]):hover) #step-values > span,
+      :host(:not([disabled]):not([readonly]):active) #step-values > span {
+        color: var(--uui-color-border-emphasis);
+      }
+
+      #step-values > span > span {
+        transform: translateX(-50%);
+        display: inline-block;
+        text-align: center;
+        font-size: var(--uui-type-small-size);
+      }
+
+      #step-values > span:last-child {
+        width: 0;
+        flex-grow: 0;
+      }
+
+      :host(:not([pristine]):invalid) #thumb {
+        border-color: var(--uui-color-invalid-standalone);
+      }
+
+      // readonly
+      :host([readonly]) #thumb {
+        background-color: var(--uui-color-disabled);
+        border-color: var(--uui-color-disabled-standalone);
+      }
+
+      :host([readonly]) #thumb-label {
+        opacity: 1;
+      }
+    `
+];
+let UUISliderElement = _UUISliderElement;
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-step-values" })
+], UUISliderElement.prototype, "hideStepValues", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-value-label" })
+], UUISliderElement.prototype, "hideValueLabel", 2);
+__decorateClass([
+  property({ type: Number })
+], UUISliderElement.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], UUISliderElement.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], UUISliderElement.prototype, "step", 1);
+__decorateClass([
+  property({ type: String })
+], UUISliderElement.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUISliderElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUISliderElement.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: String })
+], UUISliderElement.prototype, "label", 2);
+__decorateClass([
+  query("#input")
+], UUISliderElement.prototype, "_input", 2);
+__decorateClass([
+  query("#track")
+], UUISliderElement.prototype, "_track", 2);
+__decorateClass([
+  state()
+], UUISliderElement.prototype, "_stepWidth", 2);
+__decorateClass([
+  state()
+], UUISliderElement.prototype, "_steps", 2);
+__decorateClass([
+  state()
+], UUISliderElement.prototype, "_sliderPosition", 2);
+export {
+  UUISliderElement
+};
+//# sourceMappingURL=slider.element.js.map

package/dist/components/slider/slider.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.element.js","sources":["../../../src/components/slider/slider.element.ts"],"sourcesContent":["import { UUIHorizontalPulseKeyframes } from '../../internal/animations/index.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement, nothing, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { nativeInputStyles } from './native-input.styles.js';\nimport { UUISliderEvent } from './UUISliderEvent.js';\n\nconst TRACK_PADDING = 12;\nconst STEP_MIN_WIDTH = 24;\n\nconst GenerateStepArray = (start: number, stop: number, step: number) =>\n  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);\n\nconst CountDecimalPlaces = (num: number) => {\n  const decimalIndex = num.toString().indexOf('.');\n  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;\n};\n\n/**\n * @element uui-slider\n * @description - Native `<input type=\"range\">` wrapper.\n * @fires UUISliderEvent#input on input\n * @extends UUIFormControlMixin\n */\nexport class UUISliderElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  #stepDecimalPlaces = 0;\n\n  /**\n   * Hides the numbers representing the value of each steps. Dots will still be visible\n   * @type {boolean}\n   * @attr 'hide-step-values'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-step-values' })\n  hideStepValues = false;\n\n  /**\n   * Hides the value label on the thumb.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label' })\n  hideValueLabel = false;\n\n  /**\n   * This is a minimum value of the input.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * This is a maximum value of the input.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * This reflects the behavior of a native input step attribute.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  public get step() {\n    return this.#step;\n  }\n\n  public set step(value) {\n    this.#step = value;\n    this.#stepDecimalPlaces = (value.toString().split('.')[1] || []).length;\n  }\n\n  #step = 1;\n\n  /**\n   * This is a value property of the uui-slider.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  get value() {\n    return super.value;\n  }\n\n  set value(newVal) {\n    if (newVal instanceof File) {\n      return;\n    }\n\n    const oldVal = super.value;\n\n    let correctedValue = newVal ? Number.parseFloat(newVal as string) : 0;\n    correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);\n\n    if (this.step > 0) {\n      correctedValue = Math.round(correctedValue / this.step) * this.step;\n    }\n\n    super.value = correctedValue.toFixed(this.#stepDecimalPlaces).toString();\n\n    this._calculateSliderPosition();\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#track')\n  private readonly _track!: HTMLElement;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  /**\n   * This method enables <label for=\"...\"> to open the select\n   */\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._input;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    //TODO: change to observer.\n    window.addEventListener('resize', this.onWindowResize);\n    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._calculateSliderPosition();\n    this._updateSteps();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.get('max') ||\n      changedProperties.get('min') ||\n      changedProperties.get('step')\n    ) {\n      this.value = this.value as string;\n      this._updateSteps();\n    }\n  }\n\n  private _updateSteps() {\n    this._steps = GenerateStepArray(this.min, this.max, this.step);\n    this._stepWidth = this._calculateStepWidth();\n  }\n\n  @state()\n  private _stepWidth = 0;\n\n  private _calculateStepWidth() {\n    return (\n      (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) /\n      (this._steps.length - 1)\n    );\n  }\n\n  private readonly onWindowResize = () => {\n    this._stepWidth = this._calculateStepWidth();\n  };\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  }\n\n  @state()\n  protected _steps: number[] = [];\n\n  @state()\n  protected _sliderPosition = '0%';\n\n  private _calculateSliderPosition() {\n    const ratio =\n      (Number.parseFloat((super.value || '0') as string) - this.min) /\n      (this.max - this.min);\n    this._sliderPosition = `${Math.floor(ratio * 100000) / 1000}%`;\n  }\n\n  private _onInput(e: Event) {\n    e.stopPropagation();\n    this.value = this._input.value;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));\n  }\n\n  private _onChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));\n  }\n\n  renderTrackSteps() {\n    return svg`\n  ${this._steps.map(el => {\n    if (this._stepWidth >= STEP_MIN_WIDTH) {\n      const x = Math.round(\n        TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),\n      );\n      return svg`<circle class=\"track-step\" cx=\"${x}\" cy=\"50%\" r=\"4.5\" />`;\n    }\n    return svg``;\n  })}\n`;\n  }\n\n  renderStepValues() {\n    if (this.hideStepValues) return nothing;\n\n    return html`<div id=\"step-values\">\n      ${this._steps.map(\n        el =>\n          html` <span\n            ><span>\n              ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH\n                ? el.toFixed(CountDecimalPlaces(this.step))\n                : nothing}\n            </span></span\n          >`,\n      )}\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <input\n        id=\"input\"\n        type=\"range\"\n        min=\"${this.min}\"\n        max=\"${this.max}\"\n        .value=\"${this.value}\"\n        aria-label=\"${this.label}\"\n        step=\"${+this.step}\"\n        ?disabled=${this.disabled || this.readonly}\n        ?readonly=${this.readonly}\n        @input=${this._onInput}\n        @change=${this._onChange} />\n      <div id=\"track\" aria-hidden=\"true\">\n        <svg height=\"100%\" width=\"100%\">\n          <rect x=\"9\" y=\"9\" height=\"3\" rx=\"2\" />\n          ${this.renderTrackSteps()}\n        </svg>\n\n        <div id=\"track-inner\" aria-hidden=\"true\">\n          <div id=\"thumb\" style=${styleMap({ left: this._sliderPosition })}>\n            ${this.hideValueLabel\n              ? null\n              : html`<div id=\"thumb-label\">${this.value}</div>`}\n          </div>\n        </div>\n      </div>\n      ${this.renderStepValues()}\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalPulseKeyframes,\n    nativeInputStyles,\n    css`\n      :host {\n        display: inline-block;\n        width: 100%;\n        position: relative;\n        min-height: 30px;\n        user-select: none;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: 18px;\n      }\n\n      #track {\n        position: relative;\n        height: 18px;\n        width: 100%;\n        display: flex;\n      }\n\n      #track svg {\n        height: 21px;\n        border-radius: 10px;\n        background-color: var(--uui-color-surface);\n      }\n      #track svg rect {\n        width: calc(100% - 18px);\n        fill: var(--uui-color-border-standalone);\n        transition: fill 120ms;\n      }\n      :host(:not([disabled]):not([readonly])) input:hover ~ #track svg rect {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      input:focus-visible ~ #track #thumb {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      .track-step {\n        fill: var(--uui-color-border);\n      }\n\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        svg\n        .track-step {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      #track-inner {\n        position: absolute;\n        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n      }\n\n      #thumb {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        top: 2px;\n        bottom: 0;\n        left: 0;\n        height: 17px;\n        width: 17px;\n        margin-left: -8px;\n        margin-right: -8px;\n        border-radius: 50%;\n        box-sizing: border-box;\n\n        background-color: var(--uui-color-surface);\n        border: 3px solid var(--uui-color-selected);\n      }\n      :host([disabled]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      #thumb-label {\n        position: absolute;\n        box-sizing: border-box;\n        font-weight: 700;\n        bottom: 15px;\n        left: 50%;\n        width: 40px;\n        margin-left: -20px;\n        text-align: center;\n        opacity: 0;\n        transition: 120ms opacity;\n        color: var(--uui-color-selected);\n      }\n\n      input:focus ~ #track #thumb-label,\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        #thumb-label {\n        opacity: 1;\n      }\n\n      #step-values {\n        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        margin-top: 3px;\n        display: flex;\n        align-items: flex-end;\n        box-sizing: border-box;\n      }\n\n      #step-values > span {\n        flex-basis: 0;\n        flex-grow: 1;\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #step-values > span,\n      :host(:not([disabled]):not([readonly]):active) #step-values > span {\n        color: var(--uui-color-border-emphasis);\n      }\n\n      #step-values > span > span {\n        transform: translateX(-50%);\n        display: inline-block;\n        text-align: center;\n        font-size: var(--uui-type-small-size);\n      }\n\n      #step-values > span:last-child {\n        width: 0;\n        flex-grow: 0;\n      }\n\n      :host(:not([pristine]):invalid) #thumb {\n        border-color: var(--uui-color-invalid-standalone);\n      }\n\n      // readonly\n      :host([readonly]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      :host([readonly]) #thumb-label {\n        opacity: 1;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/slider/slider.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUISliderElement } from "./slider.element.js";
+import { UUISliderEvent } from "./UUISliderEvent.js";
+defineElement("uui-slider", UUISliderElement);
+export {
+  UUISliderElement,
+  UUISliderEvent,
+  UUISliderElement as default
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUISliderElement } from './slider.element.js';\n\ndefineElement('uui-slider', UUISliderElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-slider': UUISliderElement;\n  }\n}\n\nexport * from './slider.element.js';\nexport * from './UUISliderEvent.js';\nexport { UUISliderElement as default } from './slider.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,cAAc,gBAAgB;"}

package/dist/components/symbol-drag-handle/symbol-drag-handle.d.ts

@@ -0,0 +1,8 @@
+import { UUISymbolDragHandleElement } from './symbol-drag-handle.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-symbol-drag-handle': UUISymbolDragHandleElement;
+    }
+}
+export * from './symbol-drag-handle.element.js';
+export { UUISymbolDragHandleElement as default } from './symbol-drag-handle.element.js';

package/dist/components/symbol-drag-handle/symbol-drag-handle.element.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import '../icon/icon.js';
+declare const UUISymbolDragHandleElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ * @element uui-symbol-drag-handle
+ */
+export declare class UUISymbolDragHandleElement extends UUISymbolDragHandleElement_base {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../icon/icon.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+const _UUISymbolDragHandleElement = class _UUISymbolDragHandleElement extends LabelMixin("", LitElement) {
+  render() {
+    return html`<uui-icon
+      name="drag"
+      aria-label=${ifDefined(this.label)}></uui-icon>`;
+  }
+};
+_UUISymbolDragHandleElement.styles = [
+  css`
+      :host {
+        cursor: grab;
+      }
+      :host:active {
+        cursor: grabbing;
+      }
+    `
+];
+let UUISymbolDragHandleElement = _UUISymbolDragHandleElement;
+export {
+  UUISymbolDragHandleElement
+};
+//# sourceMappingURL=symbol-drag-handle.element.js.map

package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-drag-handle.element.js","sources":["../../../src/components/symbol-drag-handle/symbol-drag-handle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LabelMixin } from '../../internal/index.js';\nimport '../icon/icon.js';\n\n/**\n * @element uui-symbol-drag-handle\n */\nexport class UUISymbolDragHandleElement extends LabelMixin('', LitElement) {\n  render() {\n    return html`<uui-icon\n      name=\"drag\"\n      aria-label=${ifDefined(this.label)}></uui-icon>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        cursor: grab;\n      }\n      :host:active {\n        cursor: grabbing;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;AAQO,MAAM,8BAAN,MAAM,oCAAmC,WAAW,IAAI,UAAU,EAAE;AAAA,EACzE,SAAS;AACP,WAAO;AAAA;AAAA,mBAEQ,UAAU,KAAK,KAAK,CAAC;AAAA,EACtC;AAYF;AAVE,4BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AARG,IAAM,6BAAN;"}

package/dist/components/symbol-drag-handle/symbol-drag-handle.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUISymbolDragHandleElement } from "./symbol-drag-handle.element.js";
+defineElement("uui-symbol-drag-handle", UUISymbolDragHandleElement);
+export {
+  UUISymbolDragHandleElement,
+  UUISymbolDragHandleElement as default
+};
+//# sourceMappingURL=symbol-drag-handle.js.map

package/dist/components/symbol-drag-handle/symbol-drag-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-drag-handle.js","sources":["../../../src/components/symbol-drag-handle/symbol-drag-handle.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUISymbolDragHandleElement } from './symbol-drag-handle.element.js';\n\ndefineElement('uui-symbol-drag-handle', UUISymbolDragHandleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-symbol-drag-handle': UUISymbolDragHandleElement;\n  }\n}\n\nexport * from './symbol-drag-handle.element.js';\nexport { UUISymbolDragHandleElement as default } from './symbol-drag-handle.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,0BAA0B,0BAA0B;"}

package/dist/components/symbol-expand/symbol-expand.d.ts

@@ -0,0 +1,8 @@
+import { UUISymbolExpandElement } from './symbol-expand.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-symbol-expand': UUISymbolExpandElement;
+    }
+}
+export * from './symbol-expand.element.js';
+export { UUISymbolExpandElement as default } from './symbol-expand.element.js';