@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

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

@@ -1,243 +1,236 @@
-import { LitElement, html, nothing, css } from "lit";
-import { query, state, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { live } from "lit/directives/live.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { UUIColorPickerChangeEvent } from "./UUIColorPickerEvent.js";
-import "../color-area/color-area.js";
-import "../color-slider/color-slider.js";
-import "../input/input.js";
-import "../button-group/button-group.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { hslaToHex, hslaToHsv, hslaToRgb, parseColor } from "../../internal/utils/color.js";
+import "../icon/icon.js";
 import "../button/button.js";
 import "../icon-registry-essential/icon-registry-essential.js";
-import "../icon/icon.js";
-import "../color-swatches/color-swatches.js";
-import "../color-swatch/color-swatch.js";
+import "../input/input.js";
+import "../button-group/button-group.js";
 import "../popover-container/popover-container.js";
-import { hslaToHex, hslaToRgb, hslaToHsv, parseColor } from "../../internal/utils/color.js";
-import { LabelMixin } from "../../internal/mixins/LabelMixin.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 hasEyeDropper = "EyeDropper" in window;
-const _UUIColorPickerElement = class _UUIColorPickerElement extends LabelMixin("label", LitElement) {
-  constructor() {
-    super(...arguments);
-    this._value = "";
-    this.inputValue = "";
-    this.hue = 0;
-    this.saturation = 0;
-    this.lightness = 0;
-    this.alpha = 100;
-    this._color = { h: 0, s: 0, l: 0, a: 1 };
-    this.format = "hex";
-    this.name = "";
-    this.size = "medium";
-    this.noFormatToggle = false;
-    this.inline = false;
-    this.disabled = false;
-    this.opacity = false;
-    this.readonly = false;
-    this.uppercase = false;
-    this.swatches = [
-      "#d0021b",
-      "#f5a623",
-      "#f8e71c",
-      "#8b572a",
-      "#7ed321",
-      "#417505",
-      "#bd10e0",
-      "#9013fe",
-      "#4a90e2",
-      "#50e3c2",
-      "#b8e986",
-      "#000",
-      "#444",
-      "#888",
-      "#ccc",
-      "#fff"
-    ];
-  }
-  set value(value) {
-    if (this.value !== value) {
-      if (!this.setColor(value)) return;
-    }
-    this._value = value;
-  }
-  get value() {
-    return this._value;
-  }
-  /** Returns the current value as a string in the specified format. */
-  getFormattedValue(format) {
-    const formatToUse = this.opacity ? `${format}a` : format;
-    const { h, s, l, a } = this._color;
-    const hexa = hslaToHex(h, s, l, a * 100);
-    const hex = hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa;
-    const { r, g, b } = hslaToRgb(h, s, l);
-    const { s: sv, v } = hslaToHsv(h, s, l);
-    switch (formatToUse) {
-      case "hex":
-        return this.setLetterCase(hex);
-      case "hexa":
-        return this.setLetterCase(hexa);
-      case "rgb":
-      case "rgba":
-        return this.setLetterCase(`rgb(${r} ${g} ${b} / ${a})`);
-      case "hsl":
-      case "hsla":
-        return this.setLetterCase(`hsl(${h} ${s}% ${l}% / ${a})`);
-      case "hsv":
-        return this.setLetterCase(`hsv(${h}, ${sv}%, ${v}%)`);
-      case "hsva":
-        return this.setLetterCase(`hsva(${h}, ${sv}%, ${v}%, ${a})`);
-      default:
-        return "";
-    }
-  }
-  handleFormatToggle() {
-    const formats = ["hex", "rgb", "hsl", "hsv"];
-    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
-    this.format = formats[nextIndex];
-    this._syncValues();
-  }
-  handleAlphaChange(event) {
-    event.stopPropagation();
-    this._swatches?.resetSelection();
-    const element = event.target;
-    const newColor = {
-      h: this.hue,
-      s: this.saturation,
-      l: this.lightness,
-      a: Math.round(element.value) / 100
-    };
-    this.setColor(newColor);
-  }
-  handleHueChange(event) {
-    event.stopPropagation();
-    this._swatches?.resetSelection();
-    const element = event.target;
-    const newColor = {
-      h: element.value,
-      s: this.saturation,
-      l: this.lightness,
-      a: this.alpha / 100
-    };
-    this.setColor(newColor);
-  }
-  handleGridChange(event) {
-    event.stopPropagation();
-    this._swatches?.resetSelection();
-    const element = event.target;
-    const newColor = {
-      h: this.hue,
-      s: element.saturation,
-      l: element.lightness,
-      a: this.alpha / 100
-    };
-    this.setColor(newColor);
-  }
-  handleInputChange(event) {
-    event.stopImmediatePropagation();
-    this._swatches?.resetSelection();
-    this.inputValue = this._input.value;
-    this.setColor(this.inputValue);
-  }
-  handleInputKeyDown(event) {
-    event.stopImmediatePropagation();
-    if (event.key === "Enter") {
-      this._swatches?.resetSelection();
-      this.inputValue = this._input.value;
-      this.setColor(this.inputValue);
-      setTimeout(() => this._input.select());
-    }
-  }
-  handleColorSwatchChange(event) {
-    event.stopImmediatePropagation();
-    const target = event.target;
-    this.setColor(target.value);
-  }
-  handleCopy() {
-    navigator.clipboard.writeText(this._input.value).then(() => {
-      this._previewButton.classList.add("color-picker__preview-color--copied");
-      this._previewButton.addEventListener(
-        "animationend",
-        () => {
-          this._previewButton.classList.remove(
-            "color-picker__preview-color--copied"
-          );
-        },
-        { once: true }
-      );
-    });
-  }
-  handleEyeDropper() {
-    if (!hasEyeDropper) {
-      return;
-    }
-    const eyeDropper = new EyeDropper();
-    eyeDropper.open().then((result) => this.setColor(result.sRGBHex)).catch(() => {
-    });
-  }
-  setColor(colorString) {
-    if (colorString === this.value) return;
-    if (!colorString) {
-      this.alpha = 100;
-      this.inputValue = "";
-      this._value = colorString;
-      this._color = { h: 0, s: 0, l: 0, a: 1 };
-      this.dispatchEvent(
-        new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE)
-      );
-      return true;
-    }
-    const parsed = parseColor(colorString);
-    if (!parsed) return false;
-    const { h, s, l, a } = parsed;
-    this.hue = h;
-    this.saturation = Math.round(s);
-    this.lightness = Math.round(l);
-    this.alpha = this.opacity ? a * 100 : 100;
-    if (typeof colorString !== "string" && colorString.h) {
-      this.hue = colorString.h;
-    }
-    this._color = {
-      h: this.hue,
-      s: this.saturation,
-      l: this.lightness,
-      a: this.opacity ? a : 1
-    };
-    this._syncValues();
-    this.dispatchEvent(
-      new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE)
-    );
-    return true;
-  }
-  setLetterCase(string) {
-    if (typeof string !== "string") {
-      return "";
-    }
-    return this.uppercase ? string.toUpperCase() : string.toLowerCase();
-  }
-  _syncValues() {
-    this.inputValue = this.getFormattedValue(this.format);
-    this._value = this.inputValue;
-  }
-  _renderColorPicker() {
-    const previewColor = this.value ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})` : "transparent";
-    return html`
+import "../color-area/color-area.js";
+import "../color-slider/color-slider.js";
+import "../color-swatch/color-swatch.js";
+import "../color-swatches/color-swatches.js";
+import { UUIColorPickerChangeEvent } from "./UUIColorPickerEvent.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
+//#region src/components/color-picker/color-picker.element.ts
+var hasEyeDropper = "EyeDropper" in window;
+/**
+* @element uui-color-picker
+* @cssprop --uui-color-picker-width - The width of the color picker
+* @description
+* @fires {UUIColorPickerChangeEvent} change - Fired when the color changes
+*/
+var UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._value = "";
+		this.inputValue = "";
+		this.hue = 0;
+		this.saturation = 0;
+		this.lightness = 0;
+		this.alpha = 100;
+		this._color = {
+			h: 0,
+			s: 0,
+			l: 0,
+			a: 1
+		};
+		this.format = "hex";
+		this.name = "";
+		this.size = "medium";
+		this.noFormatToggle = false;
+		this.inline = false;
+		this.disabled = false;
+		this.opacity = false;
+		this.readonly = false;
+		this.uppercase = false;
+		this.swatches = [
+			"#d0021b",
+			"#f5a623",
+			"#f8e71c",
+			"#8b572a",
+			"#7ed321",
+			"#417505",
+			"#bd10e0",
+			"#9013fe",
+			"#4a90e2",
+			"#50e3c2",
+			"#b8e986",
+			"#000",
+			"#444",
+			"#888",
+			"#ccc",
+			"#fff"
+		];
+	}
+	/**
+	* The current color.
+	* @attr
+	* @type {string}
+	* @default ''
+	**/
+	set value(value) {
+		if (this.value !== value) {
+			if (!this.setColor(value)) return;
+		}
+		this._value = value;
+	}
+	get value() {
+		return this._value;
+	}
+	/** Returns the current value as a string in the specified format. */
+	getFormattedValue(format) {
+		const formatToUse = this.opacity ? `${format}a` : format;
+		const { h, s, l, a } = this._color;
+		const hexa = hslaToHex(h, s, l, a * 100);
+		const hex = hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa;
+		const { r, g, b } = hslaToRgb(h, s, l);
+		const { s: sv, v } = hslaToHsv(h, s, l);
+		switch (formatToUse) {
+			case "hex": return this.setLetterCase(hex);
+			case "hexa": return this.setLetterCase(hexa);
+			case "rgb":
+			case "rgba": return this.setLetterCase(`rgb(${r} ${g} ${b} / ${a})`);
+			case "hsl":
+			case "hsla": return this.setLetterCase(`hsl(${h} ${s}% ${l}% / ${a})`);
+			case "hsv": return this.setLetterCase(`hsv(${h}, ${sv}%, ${v}%)`);
+			case "hsva": return this.setLetterCase(`hsva(${h}, ${sv}%, ${v}%, ${a})`);
+			default: return "";
+		}
+	}
+	handleFormatToggle() {
+		const formats = [
+			"hex",
+			"rgb",
+			"hsl",
+			"hsv"
+		];
+		const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
+		this.format = formats[nextIndex];
+		this._syncValues();
+	}
+	handleAlphaChange(event) {
+		event.stopPropagation();
+		this._swatches?.resetSelection();
+		const element = event.target;
+		const newColor = {
+			h: this.hue,
+			s: this.saturation,
+			l: this.lightness,
+			a: Math.round(element.value) / 100
+		};
+		this.setColor(newColor);
+	}
+	handleHueChange(event) {
+		event.stopPropagation();
+		this._swatches?.resetSelection();
+		const newColor = {
+			h: event.target.value,
+			s: this.saturation,
+			l: this.lightness,
+			a: this.alpha / 100
+		};
+		this.setColor(newColor);
+	}
+	handleGridChange(event) {
+		event.stopPropagation();
+		this._swatches?.resetSelection();
+		const element = event.target;
+		const newColor = {
+			h: this.hue,
+			s: element.saturation,
+			l: element.lightness,
+			a: this.alpha / 100
+		};
+		this.setColor(newColor);
+	}
+	handleInputChange(event) {
+		event.stopImmediatePropagation();
+		this._swatches?.resetSelection();
+		this.inputValue = this._input.value;
+		this.setColor(this.inputValue);
+	}
+	handleInputKeyDown(event) {
+		event.stopImmediatePropagation();
+		if (event.key === "Enter") {
+			this._swatches?.resetSelection();
+			this.inputValue = this._input.value;
+			this.setColor(this.inputValue);
+			setTimeout(() => this._input.select());
+		}
+	}
+	handleColorSwatchChange(event) {
+		event.stopImmediatePropagation();
+		const target = event.target;
+		this.setColor(target.value);
+	}
+	handleCopy() {
+		navigator.clipboard.writeText(this._input.value).then(() => {
+			this._previewButton.classList.add("color-picker__preview-color--copied");
+			this._previewButton.addEventListener("animationend", () => {
+				this._previewButton.classList.remove("color-picker__preview-color--copied");
+			}, { once: true });
+		});
+	}
+	handleEyeDropper() {
+		if (!hasEyeDropper) return;
+		new EyeDropper().open().then((result) => this.setColor(result.sRGBHex)).catch(() => {});
+	}
+	setColor(colorString) {
+		if (colorString === this.value) return;
+		if (!colorString) {
+			this.alpha = 100;
+			this.inputValue = "";
+			this._value = colorString;
+			this._color = {
+				h: 0,
+				s: 0,
+				l: 0,
+				a: 1
+			};
+			this.dispatchEvent(new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE));
+			return true;
+		}
+		const parsed = parseColor(colorString);
+		if (!parsed) return false;
+		const { h, s, l, a } = parsed;
+		this.hue = Math.round(h);
+		this.saturation = Math.round(s);
+		this.lightness = Math.round(l);
+		this.alpha = this.opacity ? a * 100 : 100;
+		if (typeof colorString !== "string" && colorString.h) this.hue = Math.round(colorString.h);
+		this._color = {
+			h: this.hue,
+			s: this.saturation,
+			l: this.lightness,
+			a: this.opacity ? a : 1
+		};
+		this._syncValues();
+		this.dispatchEvent(new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE));
+		return true;
+	}
+	setLetterCase(string) {
+		if (typeof string !== "string") return "";
+		return this.uppercase ? string.toUpperCase() : string.toLowerCase();
+	}
+	_syncValues() {
+		this.inputValue = this.getFormattedValue(this.format);
+		this._value = this.inputValue;
+	}
+	_renderColorPicker() {
+		const previewColor = this.value ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})` : "transparent";
+		return html`
       <div
         class=${classMap({
-      "color-picker": true,
-      "color-picker--inline": this.inline,
-      "color-picker--disabled": this.disabled
-    })}
+			"color-picker": true,
+			"color-picker--inline": this.inline,
+			"color-picker--disabled": this.disabled
+		})}
         aria-disabled=${this.disabled ? "true" : "false"}>
         <uui-color-area
           .value="${this.value}"
@@ -264,11 +257,7 @@ const _UUIColorPickerElement = class _UUIColorPickerElement extends LabelMixin("
                     class="opacity-slider"
                     .value=${Math.round(this.alpha)}
                     type="opacity"
-                    .color=${hslaToHex(
-      this.hue,
-      this.saturation,
-      this.lightness
-    )}
+                    .color=${hslaToHex(this.hue, this.saturation, this.lightness)}
                     ?disabled=${this.disabled}
                     ?readonly=${this.readonly}
                     @change=${this.handleAlphaChange}>
@@ -322,51 +311,48 @@ const _UUIColorPickerElement = class _UUIColorPickerElement extends LabelMixin("
         ${this._renderSwatches()}
       </div>
     `;
-  }
-  _renderSwatches() {
-    if (!this.swatches?.length) return nothing;
-    return html`<uui-color-swatches
+	}
+	_renderSwatches() {
+		if (!this.swatches?.length) return nothing;
+		return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"
       label="Swatches"
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       @change=${this.handleColorSwatchChange}>
-      ${this.swatches.map(
-      (swatch) => html`<uui-color-swatch label="${swatch}" .value=${swatch}>
-          </uui-color-swatch>`
-    )}
+      ${this.swatches.map((swatch) => html`<uui-color-swatch label="${swatch}" .value=${swatch}>
+          </uui-color-swatch>`)}
     </uui-color-swatches>`;
-  }
-  _renderPreviewButton() {
-    const previewColor = this.value ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})` : "transparent";
-    return html`<button
+	}
+	_renderPreviewButton() {
+		const previewColor = this.value ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})` : "transparent";
+		return html`<button
         type="button"
         part="trigger"
         aria-label="${this.label || "Open Color picker"}"
         class=${classMap({
-      "color-picker__trigger": true,
-      "color-dropdown__trigger--disabled": this.disabled,
-      "color-dropdown__trigger--small": this.size === "small",
-      "color-dropdown__trigger--medium": this.size === "medium",
-      "color-dropdown__trigger--large": this.size === "large",
-      "color-picker__transparent-bg": true
-    })}
+			"color-picker__trigger": true,
+			"color-dropdown__trigger--disabled": this.disabled,
+			"color-dropdown__trigger--small": this.size === "small",
+			"color-dropdown__trigger--medium": this.size === "medium",
+			"color-dropdown__trigger--large": this.size === "large",
+			"color-picker__transparent-bg": true
+		})}
         style=${styleMap({ "--preview-color": previewColor })}
         ?disabled=${this.disabled}
         aria-haspopup="true"
         aria-expanded="false"
         popovertarget="color-picker-popover"></button>
-      <uui-popover-container id="color-picker-popover">
+      <uui-popover-container id="color-picker-popover" no-scroll>
         ${this._renderColorPicker()}
       </uui-popover-container>`;
-  }
-  render() {
-    return this.inline ? this._renderColorPicker() : this._renderPreviewButton();
-  }
-};
-_UUIColorPickerElement.styles = [
-  css`
+	}
+	render() {
+		return this.inline ? this._renderColorPicker() : this._renderPreviewButton();
+	}
+	static {
+		this.styles = [css`
       :host {
         --uui-look-outline-border: #ddd;
         --uui-look-outline-border-hover: #aaa;
@@ -513,76 +499,49 @@ _UUIColorPickerElement.styles = [
       }
 
       button.color-picker__trigger:focus-visible {
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       uui-color-area {
         width: 100%;
       }
-    `
-];
-let UUIColorPickerElement = _UUIColorPickerElement;
-__decorateClass([
-  query('[part="input"]')
-], UUIColorPickerElement.prototype, "_input", 2);
-__decorateClass([
-  query(".color-picker__preview")
-], UUIColorPickerElement.prototype, "_previewButton", 2);
-__decorateClass([
-  query("#swatches")
-], UUIColorPickerElement.prototype, "_swatches", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "inputValue", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "hue", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "saturation", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "lightness", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "alpha", 2);
-__decorateClass([
-  state()
-], UUIColorPickerElement.prototype, "_color", 2);
-__decorateClass([
-  property()
-], UUIColorPickerElement.prototype, "value", 1);
-__decorateClass([
-  property()
-], UUIColorPickerElement.prototype, "format", 2);
-__decorateClass([
-  property()
-], UUIColorPickerElement.prototype, "name", 2);
-__decorateClass([
-  property()
-], UUIColorPickerElement.prototype, "size", 2);
-__decorateClass([
-  property({ attribute: "no-format-toggle", type: Boolean })
-], UUIColorPickerElement.prototype, "noFormatToggle", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorPickerElement.prototype, "inline", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorPickerElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean })
-], UUIColorPickerElement.prototype, "opacity", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorPickerElement.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean })
-], UUIColorPickerElement.prototype, "uppercase", 2);
-__decorateClass([
-  property({ attribute: false })
-], UUIColorPickerElement.prototype, "swatches", 2);
-export {
-  UUIColorPickerElement
+    `];
+	}
 };
-//# sourceMappingURL=color-picker.element.js.map
+__decorate([query("[part=\"input\"]")], UUIColorPickerElement.prototype, "_input", void 0);
+__decorate([query(".color-picker__preview")], UUIColorPickerElement.prototype, "_previewButton", void 0);
+__decorate([query("#swatches")], UUIColorPickerElement.prototype, "_swatches", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "inputValue", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "hue", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "saturation", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "lightness", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "alpha", void 0);
+__decorate([state()], UUIColorPickerElement.prototype, "_color", void 0);
+__decorate([property()], UUIColorPickerElement.prototype, "value", null);
+__decorate([property()], UUIColorPickerElement.prototype, "format", void 0);
+__decorate([property()], UUIColorPickerElement.prototype, "name", void 0);
+__decorate([property()], UUIColorPickerElement.prototype, "size", void 0);
+__decorate([property({
+	attribute: "no-format-toggle",
+	type: Boolean
+})], UUIColorPickerElement.prototype, "noFormatToggle", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorPickerElement.prototype, "inline", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorPickerElement.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], UUIColorPickerElement.prototype, "opacity", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorPickerElement.prototype, "readonly", void 0);
+__decorate([property({ type: Boolean })], UUIColorPickerElement.prototype, "uppercase", void 0);
+__decorate([property({ attribute: false })], UUIColorPickerElement.prototype, "swatches", void 0);
+//#endregion
+export { UUIColorPickerElement };
+
+//# sourceMappingURL=color-picker.element.js.map