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

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

@@ -1,134 +1,117 @@
-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 "../icon-registry-essential/svgs/iconAdd.js";
-import "../icon-registry-essential/svgs/iconAlert.js";
-import "../icon-registry-essential/svgs/iconAttachment.js";
-import "../icon-registry-essential/svgs/iconCalendar.js";
-import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
-import "../icon-registry-essential/svgs/iconClipboard.js";
-import "../icon-registry-essential/svgs/iconCode.js";
-import "../icon-registry-essential/svgs/iconColorPicker.js";
-import "../icon-registry-essential/svgs/iconCopy.js";
-import "../icon-registry-essential/svgs/iconDelete.js";
-import "../icon-registry-essential/svgs/iconDocument.js";
-import "../icon-registry-essential/svgs/iconDownload.js";
-import "../icon-registry-essential/svgs/iconDrag.js";
-import "../icon-registry-essential/svgs/iconEdit.js";
-import "../icon-registry-essential/svgs/iconFavorite.js";
-import "../icon-registry-essential/svgs/iconFolder.js";
-import "../icon-registry-essential/svgs/iconForbidden.js";
-import "../icon-registry-essential/svgs/iconInfo.js";
-import "../icon-registry-essential/svgs/iconLink.js";
-import "../icon-registry-essential/svgs/iconLock.js";
-import "../icon-registry-essential/svgs/iconPause.js";
-import "../icon-registry-essential/svgs/iconPicture.js";
-import "../icon-registry-essential/svgs/iconPlay.js";
-import "../icon-registry-essential/svgs/iconRemove.js";
-import "../icon-registry-essential/svgs/iconSearch.js";
-import "../icon-registry-essential/svgs/iconSee.js";
-import "../icon-registry-essential/svgs/iconSettings.js";
-import "../icon-registry-essential/svgs/iconSubtract.js";
-import "../icon-registry-essential/svgs/iconSync.js";
-import "../icon-registry-essential/svgs/iconUnlock.js";
-import "../icon-registry-essential/svgs/iconUnsee.js";
-import "../icon-registry-essential/svgs/iconWand.js";
-import "../icon-registry-essential/svgs/iconWrong.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
 import { SelectableMixin } from "../../internal/mixins/SelectableMixin.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`
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ref } from "lit/directives/ref.js";
+//#region src/components/color-swatch/color-swatch.element.ts
+/**
+* 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 color of the swatch.
+* @slot label - Default slot for the label.
+*/
+var UUIColorSwatchElement = class extends LabelMixin("label", SelectableMixin(ActiveMixin(LitElement))) {
+	/**
+	* Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.
+	*/
+	get value() {
+		return this._value ?? "";
+	}
+	set value(newValue) {
+		const oldValue = this._value;
+		this._value = newValue;
+		this.requestUpdate("value", oldValue);
+	}
+	/**
+	* 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() {
+		return this._color;
+	}
+	set color(newValue) {
+		const oldValue = this._color;
+		this._color = newValue;
+		this.requestUpdate("color", oldValue);
+	}
+	constructor() {
+		super();
+		this._contrast = void 0;
+		this.disabled = false;
+		this.readonly = false;
+		this.showLabel = false;
+		this.#rgbToHex = (r, g, b, hash = "") => hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");
+		this.addEventListener("click", this._setAriaAttributes);
+	}
+	_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")) this.#computeContrast();
+	}
+	#computeContrast() {
+		const color = this.color ?? this.value;
+		if (color.startsWith("#")) this._contrast = this.#contrast(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 <= .5) this._contrast = "light";
+			else this._contrast = this.#contrast(this.#rgbToHex(r, g, b)) === "light" ? "light" : "dark";
+		} else this._contrast = void 0;
+	}
+	focus(options) {
+		this.selectableTarget?.focus(options);
+	}
+	#selectButtonChanged(button) {
+		this.selectableTarget = button || this;
+	}
+	#contrast(hex) {
+		const rgb = this.#hexToRgb(hex);
+		return Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3) <= 180 ? "dark" : "light";
+	}
+	#hexToRgb(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);
+		return [
+			bigint >> 16 & 255,
+			bigint >> 8 & 255,
+			bigint & 255
+		];
+	}
+	#rgbToHex;
+	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))}
+        ${ref(this.#selectButtonChanged)}
         aria-label=${this.label}
         ?disabled="${this.disabled}"
         title="${this.label}">
         <div
-          class="color-swatch color-swatch--transparent-bg ${classMap(
-      classes
-    )}">
+          class="color-swatch color-swatch--transparent-bg ${classMap(classes)}">
           <div
             class="color-swatch__color"
             style=${styleMap({ background: colorStr })}></div>
@@ -141,63 +124,29 @@ const _UUIColorSwatchElement = class _UUIColorSwatchElement extends LabelMixin(
         ${this._renderWithLabel()}
       </button>
     `;
-  }
-  _renderWithLabel() {
-    if (!this.showLabel) return nothing;
-    return html`<div class="color-swatch__label">
+	}
+	_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`
+	}
+	static {
+		this.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([show-label]) {
+        width: 120px;
+      }
+
       :host(*),
       * {
         /* TODO: implement globally shared outline style */
@@ -211,18 +160,25 @@ _UUIColorSwatchElement.styles = [
 
       :host(:focus:not([disabled])) #swatch {
         outline-color: var(--uui-color-focus);
-        outline-width: var(--uui-swatch-border-width, 1px);
+        outline-width: 2px;
         outline-style: solid;
         outline-offset: var(--uui-swatch-border-width, 1px);
       }
 
+      :host([selected]:focus:not([disabled])) #swatch {
+        outline-offset: 2px;
+      }
+
       :host([selectable]) #swatch {
         cursor: pointer;
       }
 
+      :host(:not([selectable]):not([readonly]):not([disabled])) #swatch {
+        cursor: pointer;
+      }
+
       :host([disabled]) {
         cursor: not-allowed;
-        opacity: 0.5;
       }
 
       :host([readonly]) {
@@ -237,13 +193,26 @@ _UUIColorSwatchElement.styles = [
         padding: 0;
         margin: 0;
         text-align: left;
-        border: 1px solid #ccc;
-        border-radius: var(--uui-size-4);
+        border-radius: var(--uui-border-radius-2);
+        overflow: hidden;
+        width: 100%;
+      }
+      :host(:not([show-label])) #swatch {
+        border-radius: var(--uui-size-5);
+        border: 1px solid var(--uui-color-border);
       }
 
       :host(:not([selectable])) #swatch:focus {
         outline: none;
       }
+      :host(:not([selectable]):not([readonly]):not([disabled])) #swatch:hover {
+        border-color: var(--uui-color-border-standalone);
+      }
+
+      :host([readonly]) #swatch,
+      :host([disabled]) #swatch {
+        background-color: var(--uui-color-disabled-standalone);
+      }
 
       :host([selectable]) #swatch::after {
         content: '';
@@ -256,11 +225,14 @@ _UUIColorSwatchElement.styles = [
         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)
+          var(--uui-size-5) + var(--uui-swatch-border-width, 1px)
         );
         transition: opacity 100ms ease-out;
         opacity: 0;
       }
+      :host([selectable][show-label]) #swatch::after {
+        border-radius: var(--uui-border-radius-2);
+      }
       :host([selectable]:not([disabled]):hover) #swatch::after {
         opacity: 0.33;
       }
@@ -284,8 +256,9 @@ _UUIColorSwatchElement.styles = [
       }
 
       :host([show-label]) .color-swatch {
-        width: 120px;
+        width: 100%;
         height: 50px;
+        margin: 0;
       }
 
       .color-swatch.color-swatch--transparent-bg {
@@ -304,13 +277,41 @@ _UUIColorSwatchElement.styles = [
       .color-swatch__color {
         width: 100%;
         height: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: inherit;
+      }
+      .color-swatch__color::after {
+        content: '';
+        position: absolute;
+        inset: 0;
         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;
+        border-radius: var(--uui-border-radius-2) var(--uui-border-radius-2) 0 0;
+      }
+      :host([show-label][selectable][selected]:not([disabled]):not([readonly]))
+        .color-swatch__color::after {
+        border-top: 2px solid rgba(255, 255, 255, 0.25);
+        border-left: 2px solid rgba(255, 255, 255, 0.25);
+        border-right: 2px solid rgba(255, 255, 255, 0.25);
+      }
+      :host([show-label][readonly]:not([disabled]))
+        .color-swatch__color::after {
+        border: 2px solid var(--uui-color-border-standalone);
+      }
+
+      :host([readonly]:not([disabled])) .color-swatch__color {
+        border-color: transparent;
+      }
+      :host([disabled]) .color-swatch__color {
+        opacity: 0.6;
+      }
+      :host([disabled]) .color-swatch.color-swatch--transparent-bg {
+        background-image: none;
+        background-color: var(--uui-color-border-standalone);
       }
 
       .color-swatch__check {
@@ -339,13 +340,17 @@ _UUIColorSwatchElement.styles = [
         opacity: 1;
       }
 
+      .color-swatch__check > svg {
+        stroke-width: 2.5;
+      }
+
       slot[name='label']::slotted(*),
       .label {
         font-size: var(--uui-size-4);
       }
 
       .color-swatch__label {
-        max-width: 120px;
+        width: 100%;
         box-sizing: border-box;
         padding: var(--uui-size-space-1) var(--uui-size-space-2);
         line-height: 1.5;
@@ -353,38 +358,47 @@ _UUIColorSwatchElement.styles = [
         flex-direction: column;
         background: white;
         border: 1px solid var(--uui-color-border);
-        border-radius: 0 0 3px 3px;
+        border-top: none;
+        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
         font-size: var(--uui-size-4, 12px);
       }
 
+      :host(:not([selectable]):not([readonly]):not([disabled]))
+        .color-swatch__label {
+        color: var(--uui-color-interactive);
+      }
+      :host(:not([selectable]):not([readonly]):not([disabled]):hover)
+        .color-swatch__label {
+        color: var(--uui-color-interactive-emphasis);
+        border-color: var(--uui-color-border-standalone);
+      }
+
       .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
+__decorate([state()], UUIColorSwatchElement.prototype, "_contrast", void 0);
+__decorate([property()], UUIColorSwatchElement.prototype, "value", null);
+__decorate([property()], UUIColorSwatchElement.prototype, "color", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSwatchElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSwatchElement.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-label",
+	reflect: true
+})], UUIColorSwatchElement.prototype, "showLabel", void 0);
+//#endregion
+export { UUIColorSwatchElement };
+
+//# sourceMappingURL=color-swatch.element.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"color-swatch.element.js","names":["#computeContrast","#contrast","#rgbToHex","#hexToRgb","#selectButtonChanged"],"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 {\n  ActiveMixin,\n  LabelMixin,\n  SelectableMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck } from '../icon-registry-essential/svgs/iconCheck.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 color of the swatch.\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        flex-direction: column;\n      }\n\n      :host([show-label]) {\n        width: 120px;\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: 2px;\n        outline-style: solid;\n        outline-offset: var(--uui-swatch-border-width, 1px);\n      }\n\n      :host([selected]:focus:not([disabled])) #swatch {\n        outline-offset: 2px;\n      }\n\n      :host([selectable]) #swatch {\n        cursor: pointer;\n      }\n\n      :host(:not([selectable]):not([readonly]):not([disabled])) #swatch {\n        cursor: pointer;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\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-radius: var(--uui-border-radius-2);\n        overflow: hidden;\n        width: 100%;\n      }\n      :host(:not([show-label])) #swatch {\n        border-radius: var(--uui-size-5);\n        border: 1px solid var(--uui-color-border);\n      }\n\n      :host(:not([selectable])) #swatch:focus {\n        outline: none;\n      }\n      :host(:not([selectable]):not([readonly]):not([disabled])) #swatch:hover {\n        border-color: var(--uui-color-border-standalone);\n      }\n\n      :host([readonly]) #swatch,\n      :host([disabled]) #swatch {\n        background-color: var(--uui-color-disabled-standalone);\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-size-5) + var(--uui-swatch-border-width, 1px)\n        );\n        transition: opacity 100ms ease-out;\n        opacity: 0;\n      }\n      :host([selectable][show-label]) #swatch::after {\n        border-radius: var(--uui-border-radius-2);\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: 100%;\n        height: 50px;\n        margin: 0;\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        position: relative;\n        overflow: hidden;\n        border-radius: inherit;\n      }\n      .color-swatch__color::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: 1px solid rgba(0, 0, 0, 0.125);\n        border-radius: inherit;\n      }\n\n      :host([show-label]) .color-swatch__color {\n        border-radius: var(--uui-border-radius-2) var(--uui-border-radius-2) 0 0;\n      }\n      :host([show-label][selectable][selected]:not([disabled]):not([readonly]))\n        .color-swatch__color::after {\n        border-top: 2px solid rgba(255, 255, 255, 0.25);\n        border-left: 2px solid rgba(255, 255, 255, 0.25);\n        border-right: 2px solid rgba(255, 255, 255, 0.25);\n      }\n      :host([show-label][readonly]:not([disabled]))\n        .color-swatch__color::after {\n        border: 2px solid var(--uui-color-border-standalone);\n      }\n\n      :host([readonly]:not([disabled])) .color-swatch__color {\n        border-color: transparent;\n      }\n      :host([disabled]) .color-swatch__color {\n        opacity: 0.6;\n      }\n      :host([disabled]) .color-swatch.color-swatch--transparent-bg {\n        background-image: none;\n        background-color: var(--uui-color-border-standalone);\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      .color-swatch__check > svg {\n        stroke-width: 2.5;\n      }\n\n      slot[name='label']::slotted(*),\n      .label {\n        font-size: var(--uui-size-4);\n      }\n\n      .color-swatch__label {\n        width: 100%;\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-top: none;\n        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);\n        font-size: var(--uui-size-4, 12px);\n      }\n\n      :host(:not([selectable]):not([readonly]):not([disabled]))\n        .color-swatch__label {\n        color: var(--uui-color-interactive);\n      }\n      :host(:not([selectable]):not([readonly]):not([disabled]):hover)\n        .color-swatch__label {\n        color: var(--uui-color-interactive-emphasis);\n        border-color: var(--uui-color-border-standalone);\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"],"mappings":"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"}

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

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

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

@@ -1 +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;"}
+{"version":3,"file":"color-swatch.js","names":[],"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';\n"],"mappings":";;;AAGA,cAAc,oBAAoB,qBAAqB"}