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

package/custom-elements.json

@@ -0,0 +1,172 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-combobox",
+      "path": "./lib/uui-combobox.element.ts",
+      "attributes": [
+        {
+          "name": "search",
+          "description": "The search input.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "open",
+          "description": "Specifies if the popover should be open.",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "search",
+          "attribute": "search",
+          "description": "The search input.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "open",
+          "attribute": "open",
+          "description": "Specifies if the popover should be open.",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "formAssociated",
+          "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "requiredMessage",
+          "attribute": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "errorMessage",
+          "attribute": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validity",
+          "type": "ValidityState"
+        },
+        {
+          "name": "validationMessage"
+        }
+      ],
+      "events": [
+        {
+          "name": "input",
+          "description": "fires when search input is changed"
+        },
+        {
+          "name": "change",
+          "description": "fires when selection is changed"
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "description": "for uui-combobox-list-options"
+        },
+        {
+          "name": "input-prepend",
+          "description": "prepend for the uui-input"
+        },
+        {
+          "name": "input-append",
+          "description": "append for the uui-input"
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIComboboxEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIComboboxElement } from './uui-combobox.element';
+export declare class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {
+    static readonly SEARCH: string;
+    static readonly CHANGE: string;
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './uui-combobox.element';
+export * from './UUIComboboxEvent';

package/lib/index.js

@@ -0,0 +1,278 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { LitElement, html, css } from 'lit';
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIComboboxListEvent } from '@umbraco-ui/uui-combobox-list/lib';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+
+class UUIComboboxEvent extends UUIEvent {
+}
+UUIComboboxEvent.SEARCH = "search";
+UUIComboboxEvent.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 UUIComboboxElement = class extends FormControlMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this._displayValue = "";
+    this._search = "";
+    this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
+    this._onBlur = () => requestAnimationFrame(() => {
+      if (document.activeElement !== this) {
+        this._close();
+      }
+    });
+    this._onInput = (e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.search = e.target.value;
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+      this._open();
+    };
+    this._onChange = (e) => {
+      var _a, _b;
+      e.stopImmediatePropagation();
+      this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
+      this._displayValue = ((_b = this._comboboxList) == null ? void 0 : _b.displayValue) || "";
+      this.search = this.value ? this.search : "";
+      this._close();
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+    };
+    this._open = () => {
+      if (this.open)
+        return;
+      this.open = true;
+    };
+    this._close = () => {
+      var _a;
+      if (!this.open)
+        return;
+      this.open = false;
+      this._displayValue = ((_a = this._comboboxList) == null ? void 0 : _a.displayValue) || "";
+      this._input.value = this._displayValue;
+      this.search = "";
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
+    };
+    this._onKeyDown = (e) => {
+      if (this.open === false && e.key === "Enter") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        this._open();
+      }
+      if (e.key === "Escape" || e.key === "Enter") {
+        this._close();
+      }
+    };
+    this._clear = (e) => {
+      if (e.key && e.key !== "Enter")
+        return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this._displayValue = "";
+      this._input.value = this._displayValue;
+      this.search = "";
+      this.value = "";
+      this._comboboxList.value = this.value;
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
+    };
+    this._renderInput = () => {
+      return html` <uui-input
+      slot="trigger"
+      id="combobox-input"
+      label="combobox-input"
+      type="text"
+      .value=${this._displayValue}
+      .placeholder=${this._displayValue}
+      autocomplete="off"
+      @click=${this._open}
+      @input=${this._onInput}
+      @keydown=${this._onKeyDown}>
+      <slot name="input-prepend" slot="prepend"></slot>
+      ${this._renderClearButton()} ${this._renderCaret()}
+      <slot name="input-append" slot="append"></slot>
+    </uui-input>`;
+    };
+    this._renderCaret = () => {
+      return html`<svg id="caret" slot="append" viewBox="0 0 512 512">
+      <path d="M 255.125 400.35 L 88.193 188.765 H 422.055 Z"></path>
+    </svg>`;
+    };
+    this._renderClearButton = () => {
+      return html`<uui-button
+      id="clear-button"
+      class=${this.value || this.search ? "--show" : ""}
+      @click=${this._clear}
+      @keydown=${this._clear}
+      label="clear"
+      slot="append"
+      compact
+      style="height: 100%; --uui-button-padding-top-factor:0; --uui-button-padding-bottom-factor:0;">
+      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+    </uui-button>`;
+    };
+    this._renderDropdown = () => {
+      return html`<div id="dropdown" slot="popover">
+      <uui-scroll-container id="scroll-container">
+        <slot></slot>
+      </uui-scroll-container>
+    </div>`;
+    };
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    super.value = newValue;
+    if (typeof newValue === "string") {
+      this._updateValue(newValue);
+    }
+  }
+  get search() {
+    return this._search;
+  }
+  set search(newValue) {
+    if (this.search === newValue)
+      return;
+    const oldValue = this._search;
+    this._search = newValue;
+    this.requestUpdate("search", oldValue);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("blur", this._onBlur);
+    this.addEventListener("mousedown", this._onMouseDown);
+    demandCustomElement(this, "uui-icon");
+    demandCustomElement(this, "uui-input");
+    demandCustomElement(this, "uui-button");
+    demandCustomElement(this, "uui-combobox-list");
+    demandCustomElement(this, "uui-scroll-container");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("blur", this._onBlur);
+    this.removeEventListener("mousedown", this._onMouseDown);
+  }
+  async firstUpdated() {
+    var _a;
+    const list = (_a = this._comboboxListElements) == null ? void 0 : _a[0];
+    if (list) {
+      this._comboboxList = list;
+      this._comboboxList.for = this;
+      this._comboboxList.addEventListener(UUIComboboxListEvent.CHANGE, this._onChange);
+      if (typeof this.value === "string") {
+        await this.updateComplete;
+        this._updateValue(this.value);
+      }
+    }
+  }
+  _updateValue(value) {
+    var _a;
+    if (this._comboboxList) {
+      this._comboboxList.value = value;
+      this._displayValue = ((_a = this._comboboxList) == null ? void 0 : _a.displayValue) || "";
+    }
+  }
+  getFormElement() {
+    return this._input;
+  }
+  render() {
+    return html`
+      <uui-popover
+        .open=${this.open}
+        .margin=${-1}
+        @close=${() => this._close()}>
+        ${this._renderInput()} ${this._renderDropdown()}
+      </uui-popover>
+    `;
+  }
+};
+UUIComboboxElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      #combobox-input {
+        width: 100%;
+        border-radius: var(--uui-size-1,3px);
+      }
+
+      #scroll-container {
+        max-height: var(--uui-combobox-popover-max-height, 500px);
+        overflow-y: auto;
+      }
+
+      #dropdown {
+        overflow: hidden;
+        z-index: -1;
+        background-color: var(--uui-combobox-popover-background-color, white);
+        border: 1px solid var(--uui-interface-border,#c4c4c4);
+        border-radius: var(--uui-border-radius,3px);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));
+      }
+
+      #clear-button {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+
+      #clear-button.--show {
+        pointer-events: auto;
+        opacity: 1;
+      }
+
+      #caret {
+        margin-right: var(--uui-size-3, 9px);
+        display: flex;
+        width: 1.15em;
+        flex-shrink: 0;
+        margin-top: -1px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUIComboboxElement.prototype, "search", 1);
+__decorateClass([
+  property({ type: Boolean })
+], UUIComboboxElement.prototype, "open", 2);
+__decorateClass([
+  query("#combobox-input")
+], UUIComboboxElement.prototype, "_input", 2);
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: "uui-combobox-list"
+  })
+], UUIComboboxElement.prototype, "_comboboxListElements", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_displayValue", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_search", 2);
+UUIComboboxElement = __decorateClass([
+  defineElement("uui-combobox")
+], UUIComboboxElement);
+
+export { UUIComboboxElement, UUIComboboxEvent };

package/lib/uui-combobox-async-example.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class UUIComboboxAsyncExampleElement extends LitElement {
+    static styles: import("lit").CSSResult[];
+    _options: any[];
+    _loading: boolean;
+    _filterValue: string;
+    private _fetchData;
+    private _handleSearch;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/lib/uui-combobox.element.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
+/**
+ * @element uui-combobox
+ * @fires {UUIComboboxEvent} input - fires when search input is changed
+ * @fires {UUIComboboxEvent} change - fires when selection is changed
+ * @slot default - for uui-combobox-list-options
+ * @slot input-prepend - prepend for the uui-input
+ * @slot input-append - append for the uui-input
+ * @description - Filterable combobox
+ */
+export declare class UUIComboboxElement extends UUIComboboxElement_base {
+    static styles: import("lit").CSSResult[];
+    get value(): FormDataEntryValue | FormData;
+    set value(newValue: FormDataEntryValue | FormData);
+    /**
+     * The search input.
+     * @type { string }
+     * @attr
+     * @default ""
+     */
+    get search(): string;
+    set search(newValue: string);
+    /**
+     * Specifies if the popover should be open.
+     * @type { boolean }
+     * @attr
+     * @default false
+     */
+    open: boolean;
+    private _input;
+    private _comboboxListElements?;
+    private _comboboxList;
+    private _displayValue;
+    private _search;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): Promise<void>;
+    private _updateValue;
+    protected getFormElement(): HTMLElement | undefined;
+    private _onMouseDown;
+    private _onBlur;
+    private _onInput;
+    private _onChange;
+    private _open;
+    private _close;
+    private _onKeyDown;
+    private _clear;
+    private _renderInput;
+    private _renderCaret;
+    private _renderClearButton;
+    private _renderDropdown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-combobox': UUIComboboxElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@umbraco-ui/uui-combobox",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Combo box"
+  ],
+  "description": "Umbraco UI combo-box component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-combobox"
+  },
+  "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": "0.2.0",
+    "@umbraco-ui/uui-button": "0.3.0",
+    "@umbraco-ui/uui-combobox-list": "0.1.0",
+    "@umbraco-ui/uui-icon": "0.2.0",
+    "@umbraco-ui/uui-scroll-container": "0.2.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-combobox",
+  "gitHead": "5494b55e03c9fb3ba8f160e693d3ce59c02d21cd"
+}