@umbraco-ui/uui-color-swatches 1.2.0-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-color-swatches
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatches?logoColor=%231B264F)
+
+Umbraco style color-swatches component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-color-swatches
+```
+
+Import the registration of `<uui-color-swatches>` via:
+
+```javascript
+import '@umbraco-ui/uui-color-swatches';
+```
+
+When looking to leverage the `UUIColorSwatchesElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIColorSwatchesElement } from '@umbraco-ui/uui-color-swatches';
+```
+
+## Usage
+
+```html
+<uui-color-swatches></uui-color-swatches>
+```

package/custom-elements.json

@@ -0,0 +1,59 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-color-swatches",
+      "path": "./lib/uui-color-swatches.element.ts",
+      "description": "Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Value of selected option.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of selected option.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "swatches",
+          "type": "UUIColorSwatchElement[]"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fires when a color swatch is selected."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default slot for content."
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIColorSwatchesEvents.d.ts

@@ -0,0 +1,5 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib/uui-color-swatch.element';
+export declare class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {
+    static readonly CHANGE = "change";
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './uui-color-swatches.element';
+export * from './UUIColorSwatchesEvents';

package/lib/index.js

@@ -0,0 +1,132 @@
+import { UUIEvent, UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { LitElement, html, css } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+
+class UUIColorSwatchesEvent extends UUIEvent {
+}
+UUIColorSwatchesEvent.CHANGE = "change";
+
+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;
+};
+let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
+  constructor() {
+    super();
+    this.value = "";
+    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._onUnselected = (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.UNSELECTED, this._onUnselected);
+  }
+  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) => {
+      var _a;
+      swatch.setAttribute("selectable", "selectable");
+      swatch.setAttribute("aria-checked", "false");
+      swatch.setAttribute("role", "radio");
+      if (this.value !== "" && ((_a = swatch.color) == null ? void 0 : _a.isEqual(this.value))) {
+        swatch.selected = true;
+        swatch.setAttribute("aria-checked", "true");
+        this._selectedElement = swatch;
+        this._activeElement = this._selectedElement;
+      }
+    });
+  }
+  resetSelection() {
+    this.swatches.forEach((swatch) => {
+      swatch.selected = false;
+      swatch.active = false;
+      swatch.selectable = true;
+    });
+    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;
+        padding: 0.75rem;
+      }
+    `
+];
+__decorateClass([
+  property()
+], UUIColorSwatchesElement.prototype, "value", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "uui-color-swatch" })
+], UUIColorSwatchesElement.prototype, "swatches", 2);
+UUIColorSwatchesElement = __decorateClass([
+  defineElement("uui-color-swatches")
+], UUIColorSwatchesElement);
+
+export { UUIColorSwatchesElement, UUIColorSwatchesEvent };

package/lib/uui-color-swatches.element.d.ts

@@ -0,0 +1,43 @@
+import type { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib';
+import { LitElement, PropertyValueMap } from 'lit';
+declare const UUIColorSwatchesElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
+/**
+ *  Put uui-stacked-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 {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Value of selected option.
+     * @type { string }
+     * @attr
+     * @default ""
+     */
+    value: string;
+    swatches: Array<UUIColorSwatchElement>;
+    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 _onSelected;
+    private _onUnselected;
+    /**
+     * Deselects all swatches.
+     *
+     * @memberof UUIColorSwatchesElement
+     */
+    resetSelection(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-color-swatches': UUIColorSwatchesElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@umbraco-ui/uui-color-swatches",
+  "version": "1.2.0-rc.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Color Swatches"
+  ],
+  "description": "Umbraco UI color-swatches component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-color-swatches"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.2.0-rc.0",
+    "@umbraco-ui/uui-color-swatch": "1.2.0-rc.0"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatches",
+  "gitHead": "43f1b9a8bd1721af30ba7c145517ee665d874df3"
+}