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

package/custom-elements.json

@@ -29,6 +29,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -101,6 +107,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -3,7 +3,7 @@ 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';
 import { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
@@ -20,46 +20,32 @@ UUIComboboxEvent.CHANGE = "change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 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);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-var _comboboxList, _phoneMediaQuery, _onPhoneChange, _updateValue, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _renderInput, _renderClearButton, _renderDropdown;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _comboboxList, _phoneMediaQuery, _onPhoneChange, _UUIComboboxElement_instances, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _renderInput, _renderClearButton, _renderDropdown;
 let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _updateValue);
+    __privateAdd(this, _UUIComboboxElement_instances);
     this.closeLabel = "Close";
     this.disabled = false;
-    __privateAdd(this, _comboboxList, void 0);
-    __privateAdd(this, _phoneMediaQuery, void 0);
+    this.readonly = false;
+    __privateAdd(this, _comboboxList);
+    __privateAdd(this, _phoneMediaQuery);
     this._displayValue = "";
     this._search = "";
     this._isPhone = false;
@@ -82,7 +68,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
     });
     __privateAdd(this, _onSlotChange, () => {
       if (this.value && this.value !== __privateGet(this, _comboboxList)?.value) {
-        __privateMethod(this, _updateValue, updateValue_fn).call(this, this.value);
+        __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this, this.value);
       }
     });
     __privateAdd(this, _onChange, () => {
@@ -92,16 +78,16 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     });
     __privateAdd(this, _onToggle, () => {
+      if (this.readonly) return;
       this.open = !this.open;
     });
     __privateAdd(this, _onOpen, () => {
-      if (this.open)
-        return;
+      if (this.open) return;
+      if (this.readonly) return;
       this.open = true;
     });
     __privateAdd(this, _onClose, () => {
-      if (!this.open)
-        return;
+      if (!this.open) return;
       this.open = false;
       this.search = "";
       this._input.value = this._displayValue;
@@ -120,8 +106,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
       }
     });
     __privateAdd(this, _onClear, (e) => {
-      if (e.key && e.key !== "Enter")
-        return;
+      if (e.key && e.key !== "Enter") return;
       e.preventDefault();
       e.stopImmediatePropagation();
       this.value = "";
@@ -140,12 +125,13 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
       .value=${this._displayValue}
       autocomplete="off"
       .disabled=${this.disabled}
+      .readonly=${this.readonly}
       popovertarget="combobox-popover"
       @click=${__privateGet(this, _onToggle)}
       @input=${__privateGet(this, _onInput)}
       @keydown=${__privateGet(this, _onKeyDown)}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this.disabled ? "" : __privateGet(this, _renderClearButton).call(this)}
+      ${__privateGet(this, _renderClearButton).call(this)}
       <div id="expand-symbol-wrapper" slot="append">
         <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
       </div>
@@ -153,6 +139,8 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
     </uui-input>`;
     });
     __privateAdd(this, _renderClearButton, () => {
+      if (this.disabled) return nothing;
+      if (this.readonly) return nothing;
       return this.value || this.search ? html`<uui-button
           id="clear-button"
           @click=${__privateGet(this, _onClear)}
@@ -177,7 +165,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
   }
   set value(newValue) {
     if (typeof newValue === "string") {
-      __privateMethod(this, _updateValue, updateValue_fn).call(this, newValue);
+      __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this, newValue);
     }
     super.value = newValue;
   }
@@ -185,8 +173,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
     return this._search;
   }
   set search(newValue) {
-    if (this.search === newValue)
-      return;
+    if (this.search === newValue) return;
     const oldValue = this._search;
     this._search = newValue;
     this.requestUpdate("search", oldValue);
@@ -244,7 +231,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
         __privateGet(this, _onSlotChange)
       );
       await this.updateComplete;
-      __privateMethod(this, _updateValue, updateValue_fn).call(this, this.value);
+      __privateMethod(this, _UUIComboboxElement_instances, updateValue_fn).call(this, this.value);
     }
   }
   getFormElement() {
@@ -286,7 +273,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
 _comboboxList = new WeakMap();
 _phoneMediaQuery = new WeakMap();
 _onPhoneChange = new WeakMap();
-_updateValue = new WeakSet();
+_UUIComboboxElement_instances = new WeakSet();
 updateValue_fn = function(value) {
   if (__privateGet(this, _comboboxList)) {
     __privateGet(this, _comboboxList).value = value;
@@ -396,6 +383,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIComboboxElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "readonly", 2);
 __decorateClass([
   query("#combobox-input")
 ], UUIComboboxElement.prototype, "_input", 2);

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

@@ -44,6 +44,13 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
     private _input;
     private _comboboxPopoverElement?;
     private _comboboxListElements?;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,13 +30,13 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.8.0",
-    "@umbraco-ui/uui-button": "1.8.0",
-    "@umbraco-ui/uui-combobox-list": "1.8.0",
-    "@umbraco-ui/uui-icon": "1.8.0",
-    "@umbraco-ui/uui-popover-container": "1.8.0",
-    "@umbraco-ui/uui-scroll-container": "1.8.0",
-    "@umbraco-ui/uui-symbol-expand": "1.8.0"
+    "@umbraco-ui/uui-base": "1.9.0-rc.0",
+    "@umbraco-ui/uui-button": "1.9.0-rc.0",
+    "@umbraco-ui/uui-combobox-list": "1.9.0-rc.0",
+    "@umbraco-ui/uui-icon": "1.9.0-rc.0",
+    "@umbraco-ui/uui-popover-container": "1.9.0-rc.0",
+    "@umbraco-ui/uui-scroll-container": "1.9.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.9.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": "53021762a52dc54a46f0c5ef829c1cbaabde1160"
+  "gitHead": "e3e398e07b6ff9874aa0656cb7767df42f58a4ce"
 }