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

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

@@ -0,0 +1,358 @@
+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 _UUIColorSwatchElement_instances, computeContrast_fn, selectButtonChanged_fn, contrast_fn, hexToRgb_fn, _rgbToHex;
+import { state, property } from "lit/decorators.js";
+import { html, nothing, css, LitElement } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.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 _UUIColorSwatchElement = class _UUIColorSwatchElement extends LabelMixin(
+  "label",
+  SelectableMixin(ActiveMixin(LitElement))
+) {
+  constructor() {
+    super();
+    __privateAdd(this, _UUIColorSwatchElement_instances);
+    __privateAdd(this, _rgbToHex);
+    this._contrast = void 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.showLabel = false;
+    __privateSet(this, _rgbToHex, (r, g, b, hash = "") => hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0"));
+    this.addEventListener("click", this._setAriaAttributes);
+  }
+  get value() {
+    return this._value ?? "";
+  }
+  set value(newValue) {
+    const oldValue = this._value;
+    this._value = newValue;
+    this.requestUpdate("value", oldValue);
+  }
+  get color() {
+    return this._color;
+  }
+  set color(newValue) {
+    const oldValue = this._color;
+    this._color = newValue;
+    this.requestUpdate("color", oldValue);
+  }
+  _setAriaAttributes() {
+    if (this.selectable)
+      this.setAttribute("aria-checked", this.selected.toString());
+  }
+  firstUpdated() {
+    this._setAriaAttributes();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("disabled") || changedProperties.has("readonly")) {
+      if (this.selectable) {
+        this.selectable = !this.disabled && !this.readonly;
+        this.deselectable = !this.disabled && !this.readonly;
+      }
+    }
+    if (changedProperties.has("selectable") || changedProperties.has("selected")) {
+      this._setAriaAttributes();
+    }
+    if (changedProperties.has("value") || changedProperties.has("color")) {
+      __privateMethod(this, _UUIColorSwatchElement_instances, computeContrast_fn).call(this);
+    }
+  }
+  focus(options) {
+    this.selectableTarget?.focus(options);
+  }
+  render() {
+    const classes = {
+      [`color-swatch--${this._contrast}`]: this._contrast !== void 0
+    };
+    const colorStr = `var(--uui-swatch-color, ${this.color ?? this.value})`;
+    return html`
+      <button
+        id="swatch"
+        ${ref(__privateMethod(this, _UUIColorSwatchElement_instances, selectButtonChanged_fn))}
+        aria-label=${this.label}
+        ?disabled="${this.disabled}"
+        title="${this.label}">
+        <div
+          class="color-swatch color-swatch--transparent-bg ${classMap(
+      classes
+    )}">
+          <div
+            class="color-swatch__color"
+            style=${styleMap({ background: colorStr })}></div>
+          <div
+            class="color-swatch__check"
+            style=${styleMap({ color: colorStr })}>
+            ${iconCheck}
+          </div>
+        </div>
+        ${this._renderWithLabel()}
+      </button>
+    `;
+  }
+  _renderWithLabel() {
+    if (!this.showLabel) return nothing;
+    return html`<div class="color-swatch__label">
+      <strong>${this.renderLabel()}</strong>
+      ${this.value}
+    </div>`;
+  }
+};
+_UUIColorSwatchElement_instances = new WeakSet();
+computeContrast_fn = function() {
+  const color = this.color ?? this.value;
+  if (color.startsWith("#")) {
+    this._contrast = __privateMethod(this, _UUIColorSwatchElement_instances, contrast_fn).call(this, color) === "light" ? "light" : "dark";
+  } else if (color.startsWith("rgb")) {
+    const [r, g, b, a] = color.match(/[.\d]+/g)?.map(Number) ?? [0, 0, 0];
+    if (a <= 0.5) {
+      this._contrast = "light";
+    } else {
+      this._contrast = __privateMethod(this, _UUIColorSwatchElement_instances, contrast_fn).call(this, __privateGet(this, _rgbToHex).call(this, r, g, b)) === "light" ? "light" : "dark";
+    }
+  } else {
+    this._contrast = void 0;
+  }
+};
+selectButtonChanged_fn = function(button) {
+  this.selectableTarget = button || this;
+};
+contrast_fn = function(hex) {
+  const rgb = __privateMethod(this, _UUIColorSwatchElement_instances, hexToRgb_fn).call(this, hex);
+  const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3);
+  return o <= 180 ? "dark" : "light";
+};
+hexToRgb_fn = function(hex) {
+  hex = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (hex.length === 3) {
+    hex = Array.from(hex).reduce((str, x) => str + x + x, "");
+  }
+  const bigint = Number.parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return [r, g, b];
+};
+_rgbToHex = new WeakMap();
+_UUIColorSwatchElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        transition: box-shadow 100ms ease-out;
+        flex-direction: column;
+      }
+
+      :host(*),
+      * {
+        /* TODO: implement globally shared outline style */
+        outline-color: var(--uui-color-focus);
+        outline-offset: 4px;
+      }
+
+      :host(:focus-within:not([disabled])) {
+        outline: none;
+      }
+
+      :host(:focus:not([disabled])) #swatch {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-swatch-border-width, 1px);
+        outline-style: solid;
+        outline-offset: var(--uui-swatch-border-width, 1px);
+      }
+
+      :host([selectable]) #swatch {
+        cursor: pointer;
+      }
+
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      :host([readonly]) {
+        cursor: default;
+      }
+
+      #swatch {
+        cursor: inherit;
+        outline: none;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+        border: 1px solid #ccc;
+        border-radius: var(--uui-size-4);
+      }
+
+      :host(:not([selectable])) #swatch:focus {
+        outline: none;
+      }
+
+      :host([selectable]) #swatch::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: calc(var(--uui-swatch-border-width, 1px) * -1);
+        width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));
+        height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));
+        box-sizing: border-box;
+        border: var(--uui-swatch-border-width, 2px) solid
+          var(--uui-color-selected);
+        border-radius: calc(
+          var(--uui-border-radius) + var(--uui-swatch-border-width, 1px)
+        );
+        transition: opacity 100ms ease-out;
+        opacity: 0;
+      }
+      :host([selectable]:not([disabled]):hover) #swatch::after {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:not([disabled]):hover) #swatch::after {
+        opacity: 0.66;
+      }
+      :host([selectable][selected]:not([disabled])) #swatch::after {
+        opacity: 1;
+      }
+
+      .color-swatch {
+        position: relative;
+        width: var(--uui-swatch-size, 25px);
+        height: var(--uui-swatch-size, 25px);
+        border-radius: inherit;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin: 2px;
+      }
+
+      :host([show-label]) .color-swatch {
+        width: 120px;
+        height: 50px;
+      }
+
+      .color-swatch.color-swatch--transparent-bg {
+        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%);
+        background-size: 10px 10px;
+        background-position:
+          0 0,
+          0 0,
+          -5px -5px,
+          5px 5px;
+      }
+      .color-swatch__color {
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        border-radius: inherit;
+        box-sizing: border-box;
+      }
+
+      :host([show-label]) .color-swatch__color {
+        border-radius: 3px 3px 0 0;
+      }
+
+      .color-swatch__check {
+        position: absolute;
+        vertical-align: middle;
+        width: calc(var(--uui-swatch-size, 25px) / 2);
+        height: calc(var(--uui-swatch-size, 25px) / 2);
+        line-height: 0;
+        filter: invert(1) grayscale(1) contrast(9);
+        pointer-events: none;
+        opacity: 0;
+        border-radius: inherit;
+      }
+
+      .color-swatch.color-swatch--light .color-swatch__check {
+        color: #000 !important;
+        filter: none;
+      }
+
+      .color-swatch.color-swatch--dark .color-swatch__check {
+        color: #fff !important;
+        filter: none;
+      }
+
+      :host([selected]) .color-swatch__check {
+        opacity: 1;
+      }
+
+      slot[name='label']::slotted(*),
+      .label {
+        font-size: var(--uui-size-4);
+      }
+
+      .color-swatch__label {
+        max-width: 120px;
+        box-sizing: border-box;
+        padding: var(--uui-size-space-1) var(--uui-size-space-2);
+        line-height: 1.5;
+        display: flex;
+        flex-direction: column;
+        background: white;
+        border: 1px solid var(--uui-color-border);
+        border-radius: 0 0 3px 3px;
+        font-size: var(--uui-size-4, 12px);
+      }
+
+      .color-swatch__label strong {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+      }
+    `
+];
+let UUIColorSwatchElement = _UUIColorSwatchElement;
+__decorateClass([
+  state()
+], UUIColorSwatchElement.prototype, "_contrast", 2);
+__decorateClass([
+  property()
+], UUIColorSwatchElement.prototype, "value", 1);
+__decorateClass([
+  property()
+], UUIColorSwatchElement.prototype, "color", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchElement.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-label", reflect: true })
+], UUIColorSwatchElement.prototype, "showLabel", 2);
+export {
+  UUIColorSwatchElement
+};
+//# sourceMappingURL=color-swatch.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.element.js","sources":["../../../src/components/color-swatch/color-swatch.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { iconCheck } from '../icon-registry-essential/svgs/index.js';\nimport {\n  ActiveMixin,\n  LabelMixin,\n  SelectableMixin,\n} from '../../internal/mixins/index.js';\n\n/**\n * Color swatch, can have label and be selectable, disabled or readonly.\n *\n * @element uui-color-swatch\n * @cssprop --uui-swatch-size - The size of the swatch.\n * @cssprop --uui-swatch-border-width - The width of the border.\n * @cssprop --uui-swatch-color - The width of the border.\n * @slot label - Default slot for the label.\n */\nexport class UUIColorSwatchElement extends LabelMixin(\n  'label',\n  SelectableMixin(ActiveMixin(LitElement)),\n) {\n  @state()\n  private _contrast: 'dark' | 'light' | undefined = undefined;\n\n  /**\n   * Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.\n   */\n  @property()\n  get value(): string {\n    return this._value ?? '';\n  }\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n  }\n  private _value?: string;\n\n  /**\n   * 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.\n   */\n  @property()\n  get color(): string | undefined {\n    return this._color;\n  }\n  set color(newValue: string) {\n    const oldValue = this._color;\n    this._color = newValue;\n    this.requestUpdate('color', oldValue);\n  }\n  private _color?: string;\n\n  /**\n   * Sets the swatch to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the swatch to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * When true shows element label below the color checkbox\n   *\n   * @attr\n   * @memberof UUIColorSwatchElement\n   */\n  @property({ type: Boolean, attribute: 'show-label', reflect: true })\n  showLabel = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._setAriaAttributes);\n  }\n\n  private _setAriaAttributes() {\n    if (this.selectable)\n      this.setAttribute('aria-checked', this.selected.toString());\n  }\n\n  firstUpdated() {\n    this._setAriaAttributes();\n  }\n\n  willUpdate(changedProperties: Map<string, any>) {\n    if (\n      changedProperties.has('disabled') ||\n      changedProperties.has('readonly')\n    ) {\n      if (this.selectable) {\n        this.selectable = !this.disabled && !this.readonly;\n        this.deselectable = !this.disabled && !this.readonly;\n      }\n    }\n    if (\n      changedProperties.has('selectable') ||\n      changedProperties.has('selected')\n    ) {\n      this._setAriaAttributes();\n    }\n    if (changedProperties.has('value') || changedProperties.has('color')) {\n      this.#computeContrast();\n    }\n  }\n\n  #computeContrast() {\n    const color = this.color ?? this.value;\n    if (color.startsWith('#')) {\n      this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';\n    } else if (color.startsWith('rgb')) {\n      const [r, g, b, a] = color.match(/[.\\d]+/g)?.map(Number) ?? [0, 0, 0];\n      if (a <= 0.5) {\n        this._contrast = 'light';\n      } else {\n        this._contrast =\n          this.#contrast(this.#rgbToHex(r, g, b)) === 'light'\n            ? 'light'\n            : 'dark';\n      }\n    } else {\n      this._contrast = undefined;\n    }\n  }\n\n  focus(options?: FocusOptions | undefined): void {\n    (this.selectableTarget as HTMLElement | undefined)?.focus(options);\n  }\n\n  #selectButtonChanged(button?: Element | undefined) {\n    this.selectableTarget = button || this;\n  }\n\n  #contrast(hex: string): string {\n    const rgb = this.#hexToRgb(hex);\n    const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);\n\n    return o <= 180 ? 'dark' : 'light';\n  }\n\n  #hexToRgb(hex: string): number[] {\n    hex = hex.startsWith('#') ? hex.slice(1) : hex;\n    if (hex.length === 3) {\n      hex = Array.from(hex).reduce((str, x) => str + x + x, ''); // 123 -> 112233\n    }\n\n    const bigint = Number.parseInt(hex, 16);\n    const r = (bigint >> 16) & 255;\n    const g = (bigint >> 8) & 255;\n    const b = bigint & 255;\n\n    return [r, g, b];\n  }\n\n  readonly #rgbToHex = (\n    r: number,\n    g: number,\n    b: number,\n    hash: '#' | '' = '',\n  ): string => hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');\n\n  render() {\n    const classes = {\n      [`color-swatch--${this._contrast}`]: this._contrast !== undefined,\n    };\n    const colorStr = `var(--uui-swatch-color, ${this.color ?? this.value})`;\n    return html`\n      <button\n        id=\"swatch\"\n        ${ref(this.#selectButtonChanged)}\n        aria-label=${this.label}\n        ?disabled=\"${this.disabled}\"\n        title=\"${this.label}\">\n        <div\n          class=\"color-swatch color-swatch--transparent-bg ${classMap(\n            classes,\n          )}\">\n          <div\n            class=\"color-swatch__color\"\n            style=${styleMap({ background: colorStr })}></div>\n          <div\n            class=\"color-swatch__check\"\n            style=${styleMap({ color: colorStr })}>\n            ${iconCheck}\n          </div>\n        </div>\n        ${this._renderWithLabel()}\n      </button>\n    `;\n  }\n\n  private _renderWithLabel() {\n    if (!this.showLabel) return nothing;\n    return html`<div class=\"color-swatch__label\">\n      <strong>${this.renderLabel()}</strong>\n      ${this.value}\n    </div>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        transition: box-shadow 100ms ease-out;\n        flex-direction: column;\n      }\n\n      :host(*),\n      * {\n        /* TODO: implement globally shared outline style */\n        outline-color: var(--uui-color-focus);\n        outline-offset: 4px;\n      }\n\n      :host(:focus-within:not([disabled])) {\n        outline: none;\n      }\n\n      :host(:focus:not([disabled])) #swatch {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-swatch-border-width, 1px);\n        outline-style: solid;\n        outline-offset: var(--uui-swatch-border-width, 1px);\n      }\n\n      :host([selectable]) #swatch {\n        cursor: pointer;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      :host([readonly]) {\n        cursor: default;\n      }\n\n      #swatch {\n        cursor: inherit;\n        outline: none;\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        text-align: left;\n        border: 1px solid #ccc;\n        border-radius: var(--uui-size-4);\n      }\n\n      :host(:not([selectable])) #swatch:focus {\n        outline: none;\n      }\n\n      :host([selectable]) #swatch::after {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        inset: calc(var(--uui-swatch-border-width, 1px) * -1);\n        width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n        height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n        box-sizing: border-box;\n        border: var(--uui-swatch-border-width, 2px) solid\n          var(--uui-color-selected);\n        border-radius: calc(\n          var(--uui-border-radius) + var(--uui-swatch-border-width, 1px)\n        );\n        transition: opacity 100ms ease-out;\n        opacity: 0;\n      }\n      :host([selectable]:not([disabled]):hover) #swatch::after {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:not([disabled]):hover) #swatch::after {\n        opacity: 0.66;\n      }\n      :host([selectable][selected]:not([disabled])) #swatch::after {\n        opacity: 1;\n      }\n\n      .color-swatch {\n        position: relative;\n        width: var(--uui-swatch-size, 25px);\n        height: var(--uui-swatch-size, 25px);\n        border-radius: inherit;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        margin: 2px;\n      }\n\n      :host([show-label]) .color-swatch {\n        width: 120px;\n        height: 50px;\n      }\n\n      .color-swatch.color-swatch--transparent-bg {\n        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        background-size: 10px 10px;\n        background-position:\n          0 0,\n          0 0,\n          -5px -5px,\n          5px 5px;\n      }\n      .color-swatch__color {\n        width: 100%;\n        height: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.125);\n        border-radius: inherit;\n        box-sizing: border-box;\n      }\n\n      :host([show-label]) .color-swatch__color {\n        border-radius: 3px 3px 0 0;\n      }\n\n      .color-swatch__check {\n        position: absolute;\n        vertical-align: middle;\n        width: calc(var(--uui-swatch-size, 25px) / 2);\n        height: calc(var(--uui-swatch-size, 25px) / 2);\n        line-height: 0;\n        filter: invert(1) grayscale(1) contrast(9);\n        pointer-events: none;\n        opacity: 0;\n        border-radius: inherit;\n      }\n\n      .color-swatch.color-swatch--light .color-swatch__check {\n        color: #000 !important;\n        filter: none;\n      }\n\n      .color-swatch.color-swatch--dark .color-swatch__check {\n        color: #fff !important;\n        filter: none;\n      }\n\n      :host([selected]) .color-swatch__check {\n        opacity: 1;\n      }\n\n      slot[name='label']::slotted(*),\n      .label {\n        font-size: var(--uui-size-4);\n      }\n\n      .color-swatch__label {\n        max-width: 120px;\n        box-sizing: border-box;\n        padding: var(--uui-size-space-1) var(--uui-size-space-2);\n        line-height: 1.5;\n        display: flex;\n        flex-direction: column;\n        background: white;\n        border: 1px solid var(--uui-color-border);\n        border-radius: 0 0 3px 3px;\n        font-size: var(--uui-size-4, 12px);\n      }\n\n      .color-swatch__label strong {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        box-sizing: border-box;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/color-swatches/UUIColorSwatchesEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIColorSwatchElement } from '../color-swatch/color-swatch.element.js';
+export declare class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {
+    static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/color-swatches/UUIColorSwatchesEvent.js

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

package/dist/components/color-swatches/UUIColorSwatchesEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIColorSwatchesEvent.js","sources":["../../../src/components/color-swatches/UUIColorSwatchesEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.element.js';\n\nexport class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {\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":";AAIO,MAAM,yBAAN,MAAM,+BAA8B,SAAoC;AAAA,EAG7E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,uBAAuB,SAAS;AAD3B,IAAM,wBAAN;"}

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

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

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

@@ -0,0 +1,51 @@
+import type { PropertyValueMap } from 'lit';
+import { LitElement } from 'lit';
+declare const UUIColorSwatchesElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ *  Put uui-color-swatch elements inside this element to create a color swatch selector.
+ *  @element uui-color-swatches
+ *  @slot - Default slot for content.
+ *  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.
+ */
+export declare class UUIColorSwatchesElement extends UUIColorSwatchesElement_base {
+    /**
+     * Value of selected option.
+     *
+     * @attr
+     */
+    value: string;
+    /**
+     * Sets the swatches to disabled.
+     * @type {boolean}
+     * @attr
+     * @default false
+     **/
+    disabled: boolean;
+    /**
+     * Sets the swatches to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    private readonly _swatches;
+    private __activeElement;
+    private get _activeElement();
+    private set _activeElement(value);
+    private _selectedElement;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private _handleSlotChange;
+    private readonly _onSelected;
+    private readonly _onDeselected;
+    /**
+     * Deselects all swatches.
+     *
+     * @memberof UUIColorSwatchesElement
+     */
+    resetSelection(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

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

@@ -0,0 +1,140 @@
+import { LitElement, html, css } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { UUIColorSwatchesEvent } from "./UUIColorSwatchesEvent.js";
+import { UUISelectableEvent } from "../../internal/events/UUISelectableEvent.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.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 _UUIColorSwatchesElement = class _UUIColorSwatchesElement extends LabelMixin("label", LitElement) {
+  constructor() {
+    super();
+    this.value = "";
+    this.disabled = false;
+    this.readonly = false;
+    this._onSelected = (event) => {
+      const target = event.target;
+      if (!this._swatches.includes(target)) return;
+      if (this._selectedElement) {
+        this._selectedElement.selected = false;
+        this._selectedElement.active = false;
+        this._selectedElement = void 0;
+      }
+      this._selectedElement = target;
+      this._activeElement = this._selectedElement;
+      this.value = this._selectedElement.value || "";
+      this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));
+    };
+    this._onDeselected = (event) => {
+      const target = event.target;
+      if (!this._swatches.includes(target)) return;
+      if (this._activeElement === target) {
+        this._activeElement = void 0;
+      }
+      if (this._selectedElement === target) {
+        this._selectedElement.selected = false;
+        this._selectedElement.active = false;
+        this._selectedElement = void 0;
+        this.value = "";
+        this.dispatchEvent(
+          new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE)
+        );
+      }
+    };
+    this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);
+    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
+  }
+  get _activeElement() {
+    return this.__activeElement;
+  }
+  set _activeElement(el) {
+    if (this.__activeElement) {
+      this.__activeElement.active = false;
+    }
+    if (el) {
+      el.active = true;
+      this.__activeElement = el;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "radiogroup");
+    this.setAttribute("aria-label", this.label);
+  }
+  willUpdate(_changedProperties) {
+    if (_changedProperties.has("label")) {
+      this.setAttribute("aria-label", this.label);
+    }
+  }
+  _handleSlotChange() {
+    if (!this._swatches || this._swatches.length === 0) return;
+    this._swatches.forEach((swatch) => {
+      swatch.setAttribute("aria-checked", "false");
+      swatch.setAttribute("role", "radio");
+      if (this.disabled) {
+        swatch.setAttribute("disabled", "");
+      } else {
+        swatch.setAttribute("selectable", "selectable");
+      }
+      if (this.readonly) {
+        swatch.setAttribute("readonly", "");
+      }
+      if (this.value !== "" && swatch.value === this.value) {
+        swatch.selected = true;
+        swatch.setAttribute("aria-checked", "true");
+        this._selectedElement = swatch;
+        this._activeElement = this._selectedElement;
+      }
+    });
+  }
+  /**
+   * Deselects all swatches.
+   *
+   * @memberof UUIColorSwatchesElement
+   */
+  resetSelection() {
+    this._swatches.forEach((swatch) => {
+      swatch.selected = false;
+      swatch.active = false;
+      swatch.selectable = !swatch.disabled;
+    });
+    this._activeElement = void 0;
+    this._selectedElement = void 0;
+    this.value = "";
+  }
+  render() {
+    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+  }
+};
+_UUIColorSwatchesElement.styles = [
+  css`
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+      }
+    `
+];
+let UUIColorSwatchesElement = _UUIColorSwatchesElement;
+__decorateClass([
+  property()
+], UUIColorSwatchesElement.prototype, "value");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchesElement.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchesElement.prototype, "readonly");
+__decorateClass([
+  queryAssignedElements({ selector: "uui-color-swatch" })
+], UUIColorSwatchesElement.prototype, "_swatches");
+export {
+  UUIColorSwatchesElement
+};
+//# sourceMappingURL=color-swatches.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatches.element.js","sources":["../../../src/components/color-swatches/color-swatches.element.ts"],"sourcesContent":["import { UUISelectableEvent } from '../../internal/events/index.js';\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.js';\nimport type { PropertyValueMap } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { LabelMixin } from '../../internal/mixins/index.js';\nimport { UUIColorSwatchesEvent } from './UUIColorSwatchesEvent.js';\n\n/**\n *  Put uui-color-swatch elements inside this element to create a color swatch selector.\n *  @element uui-color-swatches\n *  @slot - Default slot for content.\n *  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.\n */\nexport class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {\n  /**\n   * Value of selected option.\n   *\n   * @attr\n   */\n  @property()\n  value = '';\n\n  /**\n   * Sets the swatches to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Sets the swatches to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  @queryAssignedElements({ selector: 'uui-color-swatch' })\n  private readonly _swatches!: Array<UUIColorSwatchElement>;\n\n  private __activeElement: UUIColorSwatchElement | undefined;\n  private get _activeElement(): UUIColorSwatchElement | undefined {\n    return this.__activeElement;\n  }\n\n  private set _activeElement(el: UUIColorSwatchElement | undefined) {\n    if (this.__activeElement) {\n      this.__activeElement.active = false;\n    }\n    if (el) {\n      el.active = true;\n      this.__activeElement = el;\n    }\n  }\n\n  private _selectedElement: UUIColorSwatchElement | undefined;\n\n  constructor() {\n    super();\n    this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'radiogroup');\n    this.setAttribute('aria-label', this.label);\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (_changedProperties.has('label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  private _handleSlotChange() {\n    if (!this._swatches || this._swatches.length === 0) return;\n    this._swatches.forEach(swatch => {\n      swatch.setAttribute('aria-checked', 'false');\n      swatch.setAttribute('role', 'radio');\n\n      if (this.disabled) {\n        swatch.setAttribute('disabled', '');\n      } else {\n        // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:\n        swatch.setAttribute('selectable', 'selectable');\n      }\n\n      if (this.readonly) {\n        swatch.setAttribute('readonly', '');\n      }\n\n      if (this.value !== '' && swatch.value === this.value) {\n        swatch.selected = true;\n        swatch.setAttribute('aria-checked', 'true');\n        this._selectedElement = swatch;\n        this._activeElement = this._selectedElement;\n      }\n    });\n  }\n\n  private readonly _onSelected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    //react only to selectable events from UUI-Color-Swatch elements\n    //? can I use instanceof here instead? that creates a dependency on the uui-color-swatch element\n    if (!this._swatches.includes(target)) return;\n    if (this._selectedElement) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n    }\n    this._selectedElement = target;\n    this._activeElement = this._selectedElement;\n\n    this.value = this._selectedElement.value || '';\n\n    this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));\n  };\n\n  private readonly _onDeselected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    if (!this._swatches.includes(target)) return;\n\n    if (this._activeElement === target) {\n      this._activeElement = undefined;\n    }\n    if (this._selectedElement === target) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n      this.value = '';\n      this.dispatchEvent(\n        new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE),\n      );\n    }\n  };\n\n  /**\n   * Deselects all swatches.\n   *\n   * @memberof UUIColorSwatchesElement\n   */\n  resetSelection() {\n    this._swatches.forEach(swatch => {\n      swatch.selected = false;\n      swatch.active = false;\n      swatch.selectable = !swatch.disabled;\n    });\n    this._activeElement = undefined;\n    this._selectedElement = undefined;\n    this.value = '';\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.4rem;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

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

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

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

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