@umbraco-ui/uui-combobox 1.14.0-rc.4 → 1.14.1

package/custom-elements.json

@@ -18,7 +18,7 @@
           "default": "\"false\""
         },
         {
-          "name": "closeLabel",
+          "name": "close-label",
           "description": "Specifies the button label for the close button in mobile mode",
           "type": "string",
           "default": "\"\\\"Close\\\"\""
@@ -29,12 +29,24 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "hide-expand-symbol",
+          "description": "Removes the expand symbol.",
+          "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": "placeholder",
+          "description": "Defines the input placeholder.",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -95,7 +107,7 @@
         },
         {
           "name": "closeLabel",
-          "attribute": "closeLabel",
+          "attribute": "close-label",
           "description": "Specifies the button label for the close button in mobile mode",
           "type": "string",
           "default": "\"\\\"Close\\\"\""
@@ -107,6 +119,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "hideExpandSymbol",
+          "attribute": "hide-expand-symbol",
+          "description": "Removes the expand symbol.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "readonly",
           "attribute": "readonly",
@@ -114,6 +133,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Defines the input placeholder.",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -43,7 +43,9 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
     __privateAdd(this, _UUIComboboxElement_instances);
     this.closeLabel = "Close";
     this.disabled = false;
+    this.hideExpandSymbol = false;
     this.readonly = false;
+    this.placeholder = "";
     __privateAdd(this, _comboboxList);
     __privateAdd(this, _phoneMediaQuery);
     this._displayValue = "";
@@ -123,6 +125,7 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
       label="combobox-input"
       type="text"
       .value=${this._displayValue}
+      .placeholder=${this.placeholder}
       autocomplete="off"
       .disabled=${this.disabled}
       .readonly=${this.readonly}
@@ -132,25 +135,27 @@ let UUIComboboxElement = class extends UUIFormControlMixin(LitElement, "") {
       @keydown=${__privateGet(this, _onKeyDown)}>
       <slot name="input-prepend" slot="prepend"></slot>
       ${__privateGet(this, _renderClearButton).call(this)}
-      <div id="expand-symbol-wrapper" slot="append">
-        <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-      </div>
+      ${this.hideExpandSymbol ? nothing : html`<div id="expand-symbol-wrapper" slot="append">
+            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+          </div>`}
       <slot name="input-append" slot="append"></slot>
     </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)}
-          @keydown=${__privateGet(this, _onClear)}
-          label="clear"
-          slot="append"
-          compact
-          style="height: 100%;">
-          <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
-        </uui-button>` : "";
+      return html`<uui-button
+      id="clear-button"
+      @click=${__privateGet(this, _onClear)}
+      @keydown=${__privateGet(this, _onClear)}
+      label="clear"
+      slot="append"
+      compact
+      style="height: 100%;"
+      tabindex=${this.value || this.search ? "" : "-1"}
+      class=${this.value || this.search ? "visible" : ""}>
+      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+    </uui-button>`;
     });
     __privateAdd(this, _renderDropdown, () => {
       return html`<div id="dropdown">
@@ -333,6 +338,17 @@ UUIComboboxElement.styles = [
         justify-content: center;
       }
 
+      #clear-button {
+        opacity: 0;
+        transition: opacity 80ms;
+      }
+
+      :host(:not([disabled]):not([readonly]):focus-within)
+        #clear-button.visible,
+      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {
+        opacity: 1;
+      }
+
       #dropdown {
         overflow: hidden;
         z-index: -1;
@@ -388,14 +404,20 @@ __decorateClass([
   property({ type: Boolean })
 ], UUIComboboxElement.prototype, "open", 1);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "close-label" })
 ], UUIComboboxElement.prototype, "closeLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIComboboxElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: false, attribute: "hide-expand-symbol" })
+], UUIComboboxElement.prototype, "hideExpandSymbol", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIComboboxElement.prototype, "readonly", 2);
+__decorateClass([
+  property()
+], UUIComboboxElement.prototype, "placeholder", 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;
+    /**
+     * Removes the expand symbol.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    hideExpandSymbol: boolean;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}
@@ -51,6 +58,13 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     readonly: boolean;
+    /**
+     * Defines the input placeholder.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    placeholder: string;
     private _input;
     private _comboboxPopoverElement?;
     private _comboboxListElements?;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.14.0-rc.4",
+  "version": "1.14.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,13 +30,13 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.14.0-rc.4",
-    "@umbraco-ui/uui-button": "1.14.0-rc.4",
-    "@umbraco-ui/uui-combobox-list": "1.14.0-rc.4",
-    "@umbraco-ui/uui-icon": "1.14.0-rc.4",
-    "@umbraco-ui/uui-popover-container": "1.14.0-rc.4",
-    "@umbraco-ui/uui-scroll-container": "1.14.0-rc.4",
-    "@umbraco-ui/uui-symbol-expand": "1.14.0-rc.4"
+    "@umbraco-ui/uui-base": "1.14.1",
+    "@umbraco-ui/uui-button": "1.14.1",
+    "@umbraco-ui/uui-combobox-list": "1.14.1",
+    "@umbraco-ui/uui-icon": "1.14.1",
+    "@umbraco-ui/uui-popover-container": "1.14.1",
+    "@umbraco-ui/uui-scroll-container": "1.14.1",
+    "@umbraco-ui/uui-symbol-expand": "1.14.1"
   },
   "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": "8f89db559dfdb60e8afd8a0dc297e2f248f2fb9d"
+  "gitHead": "1dc16cf95e7f45ee85c8000c4932e827466e5229"
 }