@umbraco-ui/uui-combobox 1.7.1 → 1.8.0-rc.0

package/custom-elements.json

@@ -37,7 +37,7 @@
         },
         {
           "name": "value",
-          "description": "Value of this form control.",
+          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
           "type": "string",
           "default": "\"''\""
         },
@@ -122,7 +122,7 @@
         {
           "name": "value",
           "attribute": "value",
-          "description": "Value of this form control.",
+          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
           "type": "string",
           "default": "\"''\""
         },
@@ -166,7 +166,8 @@
           "type": "ValidityState"
         },
         {
-          "name": "validationMessage"
+          "name": "validationMessage",
+          "type": "string"
         }
       ],
       "events": [

package/lib/index.js

@@ -1,4 +1,4 @@
-import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUIFormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUIComboboxListEvent } from '@umbraco-ui/uui-combobox-list/lib';
@@ -52,7 +52,7 @@ var __privateMethod = (obj, member, method) => {
   return method;
 };
 var _comboboxList, _phoneMediaQuery, _onPhoneChange, _updateValue, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _renderInput, _renderClearButton, _renderDropdown;
-let UUIComboboxElement = class extends FormControlMixin(LitElement) {
+let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
   constructor() {
     super(...arguments);
     __privateAdd(this, _updateValue);
@@ -67,7 +67,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     __privateAdd(this, _onPhoneChange, () => {
       this._isPhone = __privateGet(this, _phoneMediaQuery).matches;
     });
-    __privateAdd(this, _onMouseDown, () => requestAnimationFrame(() => this._inputElement.focus()));
+    __privateAdd(this, _onMouseDown, () => requestAnimationFrame(() => this._input.focus()));
     __privateAdd(this, _onBlur, () => requestAnimationFrame(() => {
       if (!this.shadowRoot?.activeElement) {
         __privateGet(this, _onClose).call(this);
@@ -104,7 +104,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         return;
       this.open = false;
       this.search = "";
-      this._inputElement.value = this._displayValue;
+      this._input.value = this._displayValue;
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
     });
     __privateAdd(this, _onKeyDown, (e) => {
@@ -126,8 +126,8 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       e.stopImmediatePropagation();
       this.value = "";
       this.search = "";
-      this._inputElement.value = this._displayValue;
-      this._inputElement.focus();
+      this._input.value = this._displayValue;
+      this._input.focus();
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     });
@@ -173,7 +173,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     });
   }
   get value() {
-    return this._value;
+    return super.value;
   }
   set value(newValue) {
     if (typeof newValue === "string") {
@@ -200,7 +200,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     const popover = this._comboboxPopoverElement;
     if (popover) {
       if (newValue) {
-        const width = this._inputElement.offsetWidth;
+        const width = this._input.offsetWidth;
         popover.style.setProperty("--popover-width", `${width}px`);
         popover.showPopover();
       } else {
@@ -248,7 +248,19 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     }
   }
   getFormElement() {
-    return this._inputElement;
+    return this._input;
+  }
+  async focus() {
+    await this.updateComplete;
+    this._input.focus();
+  }
+  async blur() {
+    await this.updateComplete;
+    this._input.blur();
+  }
+  async click() {
+    await this.updateComplete;
+    this._input.click();
   }
   render() {
     if (this._isPhone && this.open) {
@@ -386,7 +398,7 @@ __decorateClass([
 ], UUIComboboxElement.prototype, "disabled", 2);
 __decorateClass([
   query("#combobox-input")
-], UUIComboboxElement.prototype, "_inputElement", 2);
+], UUIComboboxElement.prototype, "_input", 2);
 __decorateClass([
   query("#combobox-popover")
 ], UUIComboboxElement.prototype, "_comboboxPopoverElement", 2);

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
+declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof LitElement;
 /**
  * @element uui-combobox
  * @fires {UUIComboboxEvent} input - fires when search input is changed
@@ -44,7 +44,7 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     disabled: boolean;
-    private _inputElement;
+    private _input;
     private _comboboxPopoverElement?;
     private _comboboxListElements?;
     private _displayValue;
@@ -55,6 +55,9 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
     disconnectedCallback(): void;
     protected firstUpdated(): Promise<void>;
     protected getFormElement(): HTMLElement | undefined;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    click(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.7.1",
+  "version": "1.8.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,13 +30,13 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.7.0",
-    "@umbraco-ui/uui-button": "1.7.1",
-    "@umbraco-ui/uui-combobox-list": "1.7.0",
-    "@umbraco-ui/uui-icon": "1.7.0",
-    "@umbraco-ui/uui-popover-container": "1.7.0",
-    "@umbraco-ui/uui-scroll-container": "1.7.0",
-    "@umbraco-ui/uui-symbol-expand": "1.7.0"
+    "@umbraco-ui/uui-base": "1.8.0-rc.0",
+    "@umbraco-ui/uui-button": "1.8.0-rc.0",
+    "@umbraco-ui/uui-combobox-list": "1.8.0-rc.0",
+    "@umbraco-ui/uui-icon": "1.8.0-rc.0",
+    "@umbraco-ui/uui-popover-container": "1.8.0-rc.0",
+    "@umbraco-ui/uui-scroll-container": "1.8.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.8.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "48b40b1f5a550f89e731051c78f2c5aea9412c47"
+  "gitHead": "46d444c66217c9a3c74518d8ce4badc7f121bfdf"
 }