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

package/dist/components/color-slider/UUIColorSliderEvent.js

@@ -0,0 +1,15 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIColorSliderEvent = class _UUIColorSliderEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIColorSliderEvent.CHANGE = "change";
+let UUIColorSliderEvent = _UUIColorSliderEvent;
+export {
+  UUIColorSliderEvent
+};
+//# sourceMappingURL=UUIColorSliderEvent.js.map

package/dist/components/color-slider/UUIColorSliderEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIColorSliderEvent.js","sources":["../../../src/components/color-slider/UUIColorSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIColorSliderElement } from './color-slider.element.js';\n\nexport class UUIColorSliderEvent extends UUIEvent<{}, UUIColorSliderElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,uBAAN,MAAM,6BAA4B,SAAoC;AAAA,EAG3E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,qBAAuB,SAAS;AAD3B,IAAM,sBAAN;"}

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

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

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

@@ -0,0 +1,103 @@
+import { LitElement } from 'lit';
+export type UUIColorSliderOrientation = 'horizontal' | 'vertical';
+export type UUIColorSliderType = 'hue' | 'opacity' | 'saturation' | 'lightness';
+declare const UUIColorSliderElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ *  @element uui-color-slider
+ *  @description A slider that is a part of uui-color-picker
+ * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.
+ * @cssprop --uui-slider-height - The height of the slider.
+ * @cssprop --uui-slider-handle-size - The size of the slider handle.
+ * @cssprop --uui-slider-background-image - The background image of the slider.
+ * @cssprop --uui-slider-background-size - The background size of the slider.
+ * @cssprop --uui-slider-background-position - The background position of the slider.
+ */
+export declare class UUIColorSliderElement extends UUIColorSliderElement_base {
+    #private;
+    /**
+     * The type of the slider.
+     * @type {UUIColorSliderType}
+     * @attr
+     * @default 'hue'
+     */
+    type: UUIColorSliderType;
+    /**
+     * The color value.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    color: string;
+    /**
+     * This is a minimum value of the slider.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    min: number;
+    /**
+     * This is a maximum value of the slider.
+     * @type {number}
+     * @attr
+     * @default 100
+     */
+    max: number;
+    /**
+     * The minimum increment value allowed by the slider.
+     * @type {number}
+     * @attr
+     **/
+    precision: number;
+    /**
+     * Draws the slider in a vertical orientation.
+     * @type {boolean}
+     * @attr
+     * @default false
+     **/
+    vertical: boolean;
+    /**
+     * The current value of the slider.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    value: number;
+    /**
+     * Sets the color slider to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Sets the color slider to disabled.
+     * @type {boolean}
+     * @attr
+     * @default false
+     **/
+    disabled: boolean;
+    /**
+     * Hides the value label under the slider.
+     * @type {boolean}
+     * @attr 'hide-value-label'
+     * @default false
+     */
+    hideValueLabel: boolean;
+    private container;
+    private handle;
+    willUpdate(changedProperties: Map<string, any>): void;
+    firstUpdated(): void;
+    handleDrag(event: PointerEvent): void;
+    handleClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    getValueFromMousePosition(event: MouseEvent): number;
+    getValueFromTouchPosition(event: TouchEvent): number;
+    getValueFromXCoordinate(coordinate: number): number;
+    getValueFromYCoordinate(coordinate: number): number;
+    roundToPrecision(numberToRound: number): number;
+    syncValues(): void;
+    get cssPropCurrentValue(): number;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

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

@@ -0,0 +1,348 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _UUIColorSliderElement_instances, updateGradients_fn;
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { UUIColorSliderEvent } from "./UUIColorSliderEvent.js";
+import { parseColor, hslaToRgb } from "../../internal/utils/color.js";
+import { reverseNumberInRange, clamp } from "../../internal/utils/math.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { drag } from "../../internal/utils/drag.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIColorSliderElement = class _UUIColorSliderElement extends LabelMixin("label", LitElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _UUIColorSliderElement_instances);
+    this.type = "hue";
+    this.color = "";
+    this.min = 0;
+    this.max = 100;
+    this.precision = 1;
+    this.vertical = false;
+    this.value = 0;
+    this.readonly = false;
+    this.disabled = false;
+    this.hideValueLabel = false;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("type")) {
+      const typeMaxValues = {
+        hue: 360,
+        saturation: 100,
+        lightness: 100,
+        opacity: 100
+      };
+      this.max = typeMaxValues[this.type] ?? this.max;
+    }
+    if ((changedProperties.has("type") || changedProperties.has("color")) && this.color) {
+      __privateMethod(this, _UUIColorSliderElement_instances, updateGradients_fn).call(this);
+    }
+  }
+  firstUpdated() {
+    this.container = this.shadowRoot.querySelector("#color-slider");
+    this.handle = this.container.querySelector(
+      "#color-slider__handle"
+    );
+  }
+  handleDrag(event) {
+    if (this.disabled || this.readonly || !this.container || !this.handle)
+      return;
+    const { width, height } = this.container.getBoundingClientRect();
+    this.handle.focus();
+    event.preventDefault();
+    drag(this.container, {
+      onMove: (x, y) => {
+        if (this.vertical) {
+          this.value = reverseNumberInRange(
+            clamp(y / height * this.max, this.min, this.max),
+            this.min,
+            this.max
+          );
+        } else {
+          this.value = clamp(x / width * this.max, this.min, this.max);
+        }
+        this.syncValues();
+      },
+      initialEvent: event
+    });
+  }
+  handleClick(event) {
+    if (this.disabled || this.readonly) return;
+    this.value = this.getValueFromMousePosition(event);
+    this.syncValues();
+  }
+  handleKeyDown(event) {
+    const increment = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      event.preventDefault();
+      this.value = clamp(this.value - increment, this.min, this.max);
+      this.syncValues();
+    } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      event.preventDefault();
+      this.value = clamp(this.value + increment, this.min, this.max);
+      this.syncValues();
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      this.value = this.min;
+      this.syncValues();
+    } else if (event.key === "End") {
+      event.preventDefault();
+      this.value = this.max;
+      this.syncValues();
+    }
+  }
+  getValueFromMousePosition(event) {
+    if (this.vertical) {
+      return this.getValueFromYCoordinate(event.clientY);
+    }
+    return this.getValueFromXCoordinate(event.clientX);
+  }
+  getValueFromTouchPosition(event) {
+    if (this.vertical) {
+      return this.getValueFromYCoordinate(event.touches[0].clientY);
+    }
+    return this.getValueFromXCoordinate(event.touches[0].clientX);
+  }
+  getValueFromXCoordinate(coordinate) {
+    const { left, width } = this.container.getBoundingClientRect();
+    return clamp(
+      this.roundToPrecision((coordinate - left) / width * this.max),
+      this.min,
+      this.max
+    );
+  }
+  getValueFromYCoordinate(coordinate) {
+    const { top, height } = this.container.getBoundingClientRect();
+    return clamp(
+      this.roundToPrecision((coordinate - top) / height * this.max),
+      this.min,
+      this.max
+    );
+  }
+  roundToPrecision(numberToRound) {
+    const multiplier = 1 / this.precision;
+    return Math.ceil(numberToRound * multiplier) / multiplier;
+  }
+  syncValues() {
+    this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));
+  }
+  get cssPropCurrentValue() {
+    if (this.value === 0) {
+      return this.vertical ? 100 : 0;
+    }
+    const ratio = this.vertical ? this.max / reverseNumberInRange(this.value, this.min, this.max) : this.max / this.value;
+    return 100 / ratio;
+  }
+  render() {
+    return html`<div
+        part="slider"
+        id="color-slider"
+        role="slider"
+        aria-label="${this.label}"
+        aria-orientation="${this.vertical ? "vertical" : "horizontal"}"
+        aria-valuemin="${Math.round(this.min)}"
+        aria-valuemax="${Math.round(this.max)}"
+        aria-valuenow="${Math.round(this.value)}"
+        @click=${this.handleClick}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+        @keydown=${this.handleKeyDown}>
+        ${this.type === "opacity" ? html`<div
+              id="current-hue"
+              style=${styleMap({
+      backgroundImage: `var(--uui-slider-hue-color)`
+    })}></div>` : ""}
+        <!-- <slot name="detail"> </slot> -->
+        <span
+          id="color-slider__handle"
+          style="--current-value: ${this.cssPropCurrentValue}%;"
+          tabindex=${ifDefined(this.disabled ? void 0 : "0")}>
+        </span>
+      </div>
+      ${this.hideValueLabel ? null : Math.round(this.value)}`;
+  }
+};
+_UUIColorSliderElement_instances = new WeakSet();
+updateGradients_fn = function() {
+  const parsed = parseColor(this.color);
+  if (!parsed) return;
+  const { h, s, l } = parsed;
+  const { r, g, b } = hslaToRgb(h, s, l);
+  const direction = this.vertical ? "top" : "right";
+  const gradients = {
+    saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,
+    lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`
+  };
+  const hueColor = this.type === "opacity" ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)` : null;
+  this.style.setProperty(
+    "--uui-slider-background-image",
+    gradients[this.type] ?? null
+  );
+  this.style.setProperty("--uui-slider-hue-color", hueColor);
+};
+_UUIColorSliderElement.styles = [
+  css`
+      :host {
+        --uui-slider-height: 15px;
+        --uui-slider-handle-size: 17px;
+        --uui-slider-background-image: #fff;
+        --uui-slider-background-size: 100%;
+        --uui-slider-background-position: top left;
+        display: block;
+      }
+
+      :host([type='hue']) {
+        --uui-slider-background-image: linear-gradient(
+          to right,
+          rgb(255, 0, 0) 0%,
+          rgb(255, 255, 0) 17%,
+          rgb(0, 255, 0) 33%,
+          rgb(0, 255, 255) 50%,
+          rgb(0, 0, 255) 67%,
+          rgb(255, 0, 255) 83%,
+          rgb(255, 0, 0) 100%
+        );
+      }
+
+      :host([vertical][type='hue']) {
+        --uui-slider-background-image: linear-gradient(
+          to top,
+          rgb(255, 0, 0) 0%,
+          rgb(255, 255, 0) 17%,
+          rgb(0, 255, 0) 33%,
+          rgb(0, 255, 255) 50%,
+          rgb(0, 0, 255) 67%,
+          rgb(255, 0, 255) 83%,
+          rgb(255, 0, 0) 100%
+        );
+      }
+
+      :host([type='opacity']) {
+        --uui-slider-background-image:
+          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),
+          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),
+          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),
+          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);
+
+        --uui-slider-background-size: 10px 10px;
+        --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+      }
+
+      #color-slider {
+        position: relative;
+        background-image: var(--uui-slider-background-image);
+        background-size: var(--uui-slider-background-size);
+        background-position: var(--uui-slider-background-position);
+        border-radius: var(--uui-border-radius);
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        height: var(--uui-slider-height);
+      }
+
+      :host([vertical]) #color-slider {
+        width: var(--uui-slider-height);
+        height: 300px;
+      }
+
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) #color-slider {
+        user-select: none;
+        pointer-events: none;
+        opacity: 0.55;
+      }
+
+      :host([readonly]) {
+        cursor: default;
+      }
+
+      :host([readonly]) #color-slider {
+        pointer-events: none;
+      }
+
+      #color-slider__handle {
+        position: absolute;
+        top: calc(50% - var(--uui-slider-handle-size) / 2);
+        width: var(--uui-slider-handle-size);
+        height: var(--uui-slider-handle-size);
+        background-color: white;
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+        margin-left: calc(var(--uui-slider-handle-size) / -2);
+        left: var(--current-value, 0%);
+      }
+
+      :host([vertical]) #color-slider__handle {
+        left: unset;
+        top: var(--current-value, 100%);
+        margin-left: -1px;
+        margin-top: calc(var(--uui-slider-handle-size) / -2);
+      }
+
+      ::slotted(*:first-child) {
+        border-radius: 3px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+      }
+
+      #current-hue {
+        border-radius: var(--uui-border-radius);
+        position: absolute;
+        inset: 0 0 0 0;
+      }
+    `
+];
+let UUIColorSliderElement = _UUIColorSliderElement;
+__decorateClass([
+  property({ reflect: true })
+], UUIColorSliderElement.prototype, "type");
+__decorateClass([
+  property()
+], UUIColorSliderElement.prototype, "color");
+__decorateClass([
+  property({ type: Number })
+], UUIColorSliderElement.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], UUIColorSliderElement.prototype, "max");
+__decorateClass([
+  property({ type: Number })
+], UUIColorSliderElement.prototype, "precision");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSliderElement.prototype, "vertical");
+__decorateClass([
+  property({ type: Number })
+], UUIColorSliderElement.prototype, "value");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSliderElement.prototype, "readonly");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSliderElement.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-value-label", reflect: true })
+], UUIColorSliderElement.prototype, "hideValueLabel");
+export {
+  UUIColorSliderElement
+};
+//# sourceMappingURL=color-slider.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-slider.element.js","sources":["../../../src/components/color-slider/color-slider.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  drag,\n  clamp,\n  reverseNumberInRange,\n  parseColor,\n  hslaToRgb,\n} from '../../internal/utils/index.js';\n\nimport { UUIColorSliderEvent } from './UUIColorSliderEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nexport type UUIColorSliderOrientation = 'horizontal' | 'vertical';\nexport type UUIColorSliderType = 'hue' | 'opacity' | 'saturation' | 'lightness';\n\n/**\n *  @element uui-color-slider\n *  @description A slider that is a part of uui-color-picker\n * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.\n * @cssprop --uui-slider-height - The height of the slider.\n * @cssprop --uui-slider-handle-size - The size of the slider handle.\n * @cssprop --uui-slider-background-image - The background image of the slider.\n * @cssprop --uui-slider-background-size - The background size of the slider.\n * @cssprop --uui-slider-background-position - The background position of the slider.\n */\nexport class UUIColorSliderElement extends LabelMixin('label', LitElement) {\n  /**\n   * The type of the slider.\n   * @type {UUIColorSliderType}\n   * @attr\n   * @default 'hue'\n   */\n  @property({ reflect: true }) type: UUIColorSliderType = 'hue';\n\n  /**\n   * The color value.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property() color: string = '';\n\n  /**\n   * This is a minimum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * This is a maximum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * The minimum increment value allowed by the slider.\n   * @type {number}\n   * @attr\n   **/\n  @property({ type: Number }) precision = 1;\n\n  /**\n   * Draws the slider in a vertical orientation.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * The current value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) value = 0;\n\n  /**\n   * Sets the color slider to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Sets the color slider to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Hides the value label under the slider.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })\n  hideValueLabel = false;\n\n  private container!: HTMLElement;\n  private handle!: HTMLElement;\n\n  willUpdate(changedProperties: Map<string, any>) {\n    if (changedProperties.has('type')) {\n      const typeMaxValues: Record<string, number> = {\n        hue: 360,\n        saturation: 100,\n        lightness: 100,\n        opacity: 100,\n      };\n      this.max = typeMaxValues[this.type] ?? this.max;\n    }\n\n    if (\n      (changedProperties.has('type') || changedProperties.has('color')) &&\n      this.color\n    ) {\n      this.#updateGradients();\n    }\n  }\n\n  #updateGradients() {\n    const parsed = parseColor(this.color);\n    if (!parsed) return;\n    const { h, s, l } = parsed;\n    const { r, g, b } = hslaToRgb(h, s, l);\n    const direction = this.vertical ? 'top' : 'right';\n\n    const gradients: Record<string, string | null> = {\n      saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,\n      lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`,\n    };\n\n    const hueColor =\n      this.type === 'opacity'\n        ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)`\n        : null;\n\n    this.style.setProperty(\n      '--uui-slider-background-image',\n      gradients[this.type] ?? null,\n    );\n    this.style.setProperty('--uui-slider-hue-color', hueColor);\n  }\n\n  firstUpdated() {\n    this.container =\n      this.shadowRoot!.querySelector<HTMLElement>('#color-slider')!;\n    this.handle = this.container.querySelector<HTMLElement>(\n      '#color-slider__handle',\n    )!;\n  }\n\n  handleDrag(event: PointerEvent) {\n    if (this.disabled || this.readonly || !this.container || !this.handle)\n      return;\n\n    const { width, height } = this.container.getBoundingClientRect();\n\n    this.handle.focus();\n    event.preventDefault();\n    drag(this.container, {\n      onMove: (x, y) => {\n        if (this.vertical) {\n          this.value = reverseNumberInRange(\n            clamp((y / height) * this.max, this.min, this.max),\n            this.min,\n            this.max,\n          );\n        } else {\n          this.value = clamp((x / width) * this.max, this.min, this.max);\n        }\n\n        this.syncValues();\n      },\n      initialEvent: event,\n    });\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled || this.readonly) return;\n\n    this.value = this.getValueFromMousePosition(event);\n    this.syncValues();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const increment = event.shiftKey ? 10 : 1;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.value = clamp(this.value - increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.value = clamp(this.value + increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      this.value = this.min;\n      this.syncValues();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      this.value = this.max;\n      this.syncValues();\n    }\n  }\n\n  getValueFromMousePosition(event: MouseEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.clientY);\n    }\n    return this.getValueFromXCoordinate(event.clientX);\n  }\n\n  getValueFromTouchPosition(event: TouchEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.touches[0].clientY);\n    }\n    return this.getValueFromXCoordinate(event.touches[0].clientX);\n  }\n\n  getValueFromXCoordinate(coordinate: number) {\n    const { left, width } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - left) / width) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  getValueFromYCoordinate(coordinate: number) {\n    const { top, height } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - top) / height) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  roundToPrecision(numberToRound: number) {\n    const multiplier = 1 / this.precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  syncValues() {\n    this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));\n  }\n\n  get cssPropCurrentValue() {\n    if (this.value === 0) {\n      return this.vertical ? 100 : 0;\n    }\n    const ratio = this.vertical\n      ? this.max / reverseNumberInRange(this.value, this.min, this.max)\n      : this.max / this.value;\n    return 100 / ratio;\n  }\n\n  render() {\n    return html`<div\n        part=\"slider\"\n        id=\"color-slider\"\n        role=\"slider\"\n        aria-label=\"${this.label}\"\n        aria-orientation=\"${this.vertical ? 'vertical' : 'horizontal'}\"\n        aria-valuemin=\"${Math.round(this.min)}\"\n        aria-valuemax=\"${Math.round(this.max)}\"\n        aria-valuenow=\"${Math.round(this.value)}\"\n        @click=${this.handleClick}\n        @mousedown=${this.handleDrag}\n        @touchstart=${this.handleDrag}\n        @keydown=${this.handleKeyDown}>\n        ${this.type === 'opacity'\n          ? html`<div\n              id=\"current-hue\"\n              style=${styleMap({\n                backgroundImage: `var(--uui-slider-hue-color)`,\n              })}></div>`\n          : ''}\n        <!-- <slot name=\"detail\"> </slot> -->\n        <span\n          id=\"color-slider__handle\"\n          style=\"--current-value: ${this.cssPropCurrentValue}%;\"\n          tabindex=${ifDefined(this.disabled ? undefined : '0')}>\n        </span>\n      </div>\n      ${this.hideValueLabel ? null : Math.round(this.value)}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        --uui-slider-height: 15px;\n        --uui-slider-handle-size: 17px;\n        --uui-slider-background-image: #fff;\n        --uui-slider-background-size: 100%;\n        --uui-slider-background-position: top left;\n        display: block;\n      }\n\n      :host([type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to right,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([vertical][type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to top,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([type='opacity']) {\n        --uui-slider-background-image:\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n\n        --uui-slider-background-size: 10px 10px;\n        --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n      }\n\n      #color-slider {\n        position: relative;\n        background-image: var(--uui-slider-background-image);\n        background-size: var(--uui-slider-background-size);\n        background-position: var(--uui-slider-background-position);\n        border-radius: var(--uui-border-radius);\n        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);\n        width: 100%;\n        height: var(--uui-slider-height);\n      }\n\n      :host([vertical]) #color-slider {\n        width: var(--uui-slider-height);\n        height: 300px;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) #color-slider {\n        user-select: none;\n        pointer-events: none;\n        opacity: 0.55;\n      }\n\n      :host([readonly]) {\n        cursor: default;\n      }\n\n      :host([readonly]) #color-slider {\n        pointer-events: none;\n      }\n\n      #color-slider__handle {\n        position: absolute;\n        top: calc(50% - var(--uui-slider-handle-size) / 2);\n        width: var(--uui-slider-handle-size);\n        height: var(--uui-slider-handle-size);\n        background-color: white;\n        border-radius: 50%;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n        margin-left: calc(var(--uui-slider-handle-size) / -2);\n        left: var(--current-value, 0%);\n      }\n\n      :host([vertical]) #color-slider__handle {\n        left: unset;\n        top: var(--current-value, 100%);\n        margin-left: -1px;\n        margin-top: calc(var(--uui-slider-handle-size) / -2);\n      }\n\n      ::slotted(*:first-child) {\n        border-radius: 3px;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        width: 100%;\n        height: 100%;\n      }\n\n      #current-hue {\n        border-radius: var(--uui-border-radius);\n        position: absolute;\n        inset: 0 0 0 0;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/color-slider/color-slider.js

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

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

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

package/dist/components/color-swatch/color-swatch.d.ts

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

package/dist/components/color-swatch/color-swatch.element.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+declare const UUIColorSwatchElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & (new (...args: any[]) => import("../../index.js").UUISelectableMixinInterface) & (new (...args: any[]) => import("../../index.js").UUIActiveMixinInterface) & typeof LitElement;
+/**
+ * Color swatch, can have label and be selectable, disabled or readonly.
+ *
+ * @element uui-color-swatch
+ * @cssprop --uui-swatch-size - The size of the swatch.
+ * @cssprop --uui-swatch-border-width - The width of the border.
+ * @cssprop --uui-swatch-color - The width of the border.
+ * @slot label - Default slot for the label.
+ */
+export declare class UUIColorSwatchElement extends UUIColorSwatchElement_base {
+    #private;
+    private _contrast;
+    /**
+     * Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.
+     */
+    get value(): string;
+    set value(newValue: string);
+    private _value?;
+    /**
+     * Color of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.
+     */
+    get color(): string | undefined;
+    set color(newValue: string);
+    private _color?;
+    /**
+     * Sets the swatch to disabled.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the swatch to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * When true shows element label below the color checkbox
+     *
+     * @attr
+     * @memberof UUIColorSwatchElement
+     */
+    showLabel: boolean;
+    constructor();
+    private _setAriaAttributes;
+    firstUpdated(): void;
+    willUpdate(changedProperties: Map<string, any>): void;
+    focus(options?: FocusOptions | undefined): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderWithLabel;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};