@umbraco-ui/uui-combobox 1.1.1 → 1.2.0-rc.1

package/custom-elements.json

@@ -23,6 +23,12 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "description": "Disables the uui-combobox.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -93,6 +99,13 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the uui-combobox.",
+          "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/",
@@ -168,7 +181,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         },
         {

package/lib/index.js

@@ -28,6 +28,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     super(...arguments);
     this.open = false;
     this.closeLabel = "Close";
+    this.disabled = false;
     this._displayValue = "";
     this._search = "";
     this._isPhone = false;
@@ -48,6 +49,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this._open();
     };
+    this._onSlotChange = () => {
+      var _a;
+      if (this.value && this.value !== ((_a = this._comboboxList) == null ? void 0 : _a.value)) {
+        this._updateValue(this.value);
+      }
+    };
     this._onChange = (e) => {
       var _a;
       e.stopImmediatePropagation();
@@ -101,11 +108,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       type="text"
       .value=${this._displayValue}
       autocomplete="off"
+      .disabled=${this.disabled}
       @click=${this._open}
       @input=${this._onInput}
       @keydown=${this._onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this._renderClearButton()} ${this._renderCaret()}
+      ${this.disabled ? "" : this._renderClearButton()} ${this._renderCaret()}
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
     };
@@ -183,17 +191,20 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         UUIComboboxListEvent.CHANGE,
         this._onChange
       );
-      if (typeof this.value === "string") {
-        await this.updateComplete;
-        this._updateValue(this.value);
-      }
+      this._comboboxList.addEventListener(
+        UUIComboboxListEvent.SLOT_CHANGE,
+        this._onSlotChange
+      );
+      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) || "";
+      requestAnimationFrame(
+        () => this._displayValue = this._comboboxList.displayValue || ""
+      );
     }
   }
   getFormElement() {
@@ -259,6 +270,10 @@ UUIComboboxElement.styles = [
         margin-top: -1px;
       }
 
+      :host([disabled]) #caret {
+        fill: var(--uui-color-disabled-contrast,#c4c4c4);
+      }
+
       #phone-wrapper {
         position: fixed;
         inset: 0;
@@ -286,6 +301,9 @@ UUIComboboxElement.styles = [
       }
     `
 ];
+__decorateClass([
+  property({ attribute: "value", reflect: true })
+], UUIComboboxElement.prototype, "value", 1);
 __decorateClass([
   property({ type: String })
 ], UUIComboboxElement.prototype, "search", 1);
@@ -295,6 +313,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIComboboxElement.prototype, "closeLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "disabled", 2);
 __decorateClass([
   query("#combobox-input")
 ], UUIComboboxElement.prototype, "_input", 2);

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

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class UUIComboboxAsyncOptionsExampleElement extends LitElement {
+    _options: any[];
+    connectedCallback(): void;
+    private _fetchData;
+    preselected: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -4,7 +4,7 @@ declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco
  * @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 - for uui-combobox-list-options
  * @slot input-prepend - prepend for the uui-input
  * @slot input-append - append for the uui-input
  * @description - Filterable combobox
@@ -35,6 +35,13 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default "Close"
      */
     closeLabel: string;
+    /**
+     * Disables the uui-combobox.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
     private _input;
     private _comboboxListElements?;
     private _comboboxList;
@@ -51,6 +58,7 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
     private _onMouseDown;
     private _onBlur;
     private _onInput;
+    private _onSlotChange;
     private _onChange;
     private _open;
     private _onClose;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.1.1",
+  "version": "1.2.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0",
-    "@umbraco-ui/uui-button": "1.0.0",
-    "@umbraco-ui/uui-combobox-list": "1.0.0",
-    "@umbraco-ui/uui-icon": "1.0.0",
-    "@umbraco-ui/uui-scroll-container": "1.0.0"
+    "@umbraco-ui/uui-base": "1.2.0-rc.1",
+    "@umbraco-ui/uui-button": "1.2.0-rc.1",
+    "@umbraco-ui/uui-combobox-list": "1.2.0-rc.1",
+    "@umbraco-ui/uui-icon": "1.2.0-rc.1",
+    "@umbraco-ui/uui-scroll-container": "1.2.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "be41090c074658278069302f78f668ad362521fe"
+  "gitHead": "c85fbce0370213590f8b60119ac39f0473ffa0fb"
 }