@umbraco-ui/uui-combobox 1.0.0 → 1.1.1

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

@@ -1,11 +1,11 @@
+import { FormControlMixin } 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 { 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';
+import { LitElement, html, css } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 class UUIComboboxEvent extends UUIEvent {
 }
@@ -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;
@@ -152,16 +157,21 @@ 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");
     demandCustomElement(this, "uui-combobox-list");
     demandCustomElement(this, "uui-scroll-container");
+    demandCustomElement(this, "uui-popover");
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("blur", this._onBlur);
     this.removeEventListener("mousedown", this._onMouseDown);
+    this.phoneMediaQuery.removeEventListener("change", this._onPhoneChange);
   }
   async firstUpdated() {
     var _a;
@@ -190,20 +200,28 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     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;
       }
 
@@ -213,8 +231,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 {
@@ -239,6 +258,32 @@ 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([
@@ -247,6 +292,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], UUIComboboxElement.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], UUIComboboxElement.prototype, "closeLabel", 2);
 __decorateClass([
   query("#combobox-input")
 ], UUIComboboxElement.prototype, "_input", 2);
@@ -262,6 +310,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], UUIComboboxElement.prototype, "_search", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_isPhone", 2);
 UUIComboboxElement = __decorateClass([
   defineElement("uui-combobox")
 ], UUIComboboxElement);

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

@@ -28,14 +28,24 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "ffb9cef00262b9f36177adcca9675b4893c0045e"
+  "gitHead": "be41090c074658278069302f78f668ad362521fe"
 }