@umbraco-ui/uui-combobox 1.1.0 → 1.2.0

package/custom-elements.json

@@ -17,6 +17,12 @@
           "type": " boolean ",
           "default": "\"false\""
         },
+        {
+          "name": "closeLabel",
+          "description": "Specifies the button label for the close button in mobile mode",
+          "type": " string ",
+          "default": "\"\\\"Close\\\"\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -80,6 +86,13 @@
           "type": " boolean ",
           "default": "\"false\""
         },
+        {
+          "name": "closeLabel",
+          "attribute": "closeLabel",
+          "description": "Specifies the button label for the close button in mobile mode",
+          "type": " string ",
+          "default": "\"\\\"Close\\\"\""
+        },
         {
           "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/",

package/lib/index.js

@@ -27,8 +27,13 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
   constructor() {
     super(...arguments);
     this.open = false;
+    this.closeLabel = "Close";
     this._displayValue = "";
     this._search = "";
+    this._isPhone = false;
+    this._onPhoneChange = () => {
+      this._isPhone = this.phoneMediaQuery.matches;
+    };
     this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
     this._onBlur = () => requestAnimationFrame(() => {
       var _a;
@@ -43,6 +48,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();
@@ -152,6 +163,9 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     super.connectedCallback();
     this.addEventListener("blur", this._onBlur);
     this.addEventListener("mousedown", this._onMouseDown);
+    this.phoneMediaQuery = window.matchMedia("(max-width: 600px)");
+    this._onPhoneChange();
+    this.phoneMediaQuery.addEventListener("change", this._onPhoneChange);
     demandCustomElement(this, "uui-icon");
     demandCustomElement(this, "uui-input");
     demandCustomElement(this, "uui-button");
@@ -163,6 +177,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     super.disconnectedCallback();
     this.removeEventListener("blur", this._onBlur);
     this.removeEventListener("mousedown", this._onMouseDown);
+    this.phoneMediaQuery.removeEventListener("change", this._onPhoneChange);
   }
   async firstUpdated() {
     var _a;
@@ -174,37 +189,48 @@ 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() {
     return this._input;
   }
   render() {
-    return html`
-      <uui-popover
-        .open=${this.open}
-        .margin=${-1}
-        @close=${() => this._onClose()}>
+    if (this._isPhone && this.open) {
+      return html` <div id="phone-wrapper">
+        <uui-button label="close" look="primary" @click=${this._onClose}>
+          ${this.closeLabel}
+        </uui-button>
         ${this._renderInput()} ${this._renderDropdown()}
-      </uui-popover>
-    `;
+      </div>`;
+    } else {
+      return html`
+        <uui-popover
+          .open=${this.open}
+          .margin=${-1}
+          @close=${() => this._onClose()}>
+          ${this._renderInput()} ${this._renderDropdown()}
+        </uui-popover>
+      `;
+    }
   }
 };
 UUIComboboxElement.styles = [
   css`
       :host {
-        position: relative;
         display: inline-block;
       }
 
@@ -214,8 +240,9 @@ UUIComboboxElement.styles = [
       }
 
       #scroll-container {
-        max-height: var(--uui-combobox-popover-max-height, 500px);
         overflow-y: auto;
+        width: 100%;
+        max-height: var(--uui-combobox-popover-max-height, 500px);
       }
 
       #dropdown {
@@ -240,14 +267,46 @@ UUIComboboxElement.styles = [
         flex-shrink: 0;
         margin-top: -1px;
       }
+
+      #phone-wrapper {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        z-index: 1;
+        font-size: 1.1em;
+      }
+
+      #phone-wrapper #dropdown {
+        display: flex;
+      }
+
+      #phone-wrapper #combobox-input {
+        height: var(--uui-size-16,48px);
+      }
+
+      #phone-wrapper > uui-button {
+        height: var(--uui-size-14,42px);
+        width: 100%;
+      }
+
+      #phone-wrapper #scroll-container {
+        max-height: unset;
+      }
     `
 ];
+__decorateClass([
+  property({ attribute: "value", reflect: true })
+], UUIComboboxElement.prototype, "value", 1);
 __decorateClass([
   property({ type: String })
 ], UUIComboboxElement.prototype, "search", 1);
 __decorateClass([
   property({ type: Boolean })
 ], UUIComboboxElement.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], UUIComboboxElement.prototype, "closeLabel", 2);
 __decorateClass([
   query("#combobox-input")
 ], UUIComboboxElement.prototype, "_input", 2);
@@ -263,6 +322,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], UUIComboboxElement.prototype, "_search", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_isPhone", 2);
 UUIComboboxElement = __decorateClass([
   defineElement("uui-combobox")
 ], UUIComboboxElement);

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

@@ -28,19 +28,30 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     open: boolean;
+    /**
+     * Specifies the button label for the close button in mobile mode
+     * @type { string }
+     * @attr
+     * @default "Close"
+     */
+    closeLabel: string;
     private _input;
     private _comboboxListElements?;
     private _comboboxList;
+    private phoneMediaQuery;
     private _displayValue;
     private _search;
+    private _isPhone;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): Promise<void>;
+    private _onPhoneChange;
     private _updateValue;
     protected getFormElement(): HTMLElement | undefined;
     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.0",
+  "version": "1.2.0",
   "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.1.0",
+    "@umbraco-ui/uui-button": "1.1.0",
+    "@umbraco-ui/uui-combobox-list": "1.1.0",
+    "@umbraco-ui/uui-icon": "1.1.0",
+    "@umbraco-ui/uui-scroll-container": "1.1.0"
   },
   "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": "6bd054ecff37c2b7ddfe2beed0f83bf29c58501d"
+  "gitHead": "5159a81e353c893c30073cdbf2fdd94306477d6e"
 }