@umbraco-ui/uui-combobox 1.2.0 → 1.3.0-rc.0

package/custom-elements.json

@@ -23,6 +23,12 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "description": "Disables the uui-combobox.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -93,6 +99,13 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the uui-combobox.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "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/",
@@ -168,7 +181,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         },
         {

package/lib/UUIComboboxEvent.d.ts

@@ -3,4 +3,5 @@ import { UUIComboboxElement } from './uui-combobox.element';
 export declare class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {
     static readonly SEARCH: string;
     static readonly CHANGE: string;
+    constructor(evName: string, eventInit?: any | null);
 }

package/lib/index.js

@@ -7,7 +7,26 @@ import { LitElement, html, css } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class UUIComboboxEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+  }
 }
 UUIComboboxEvent.SEARCH = "search";
 UUIComboboxEvent.CHANGE = "change";
@@ -28,6 +47,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     super(...arguments);
     this.open = false;
     this.closeLabel = "Close";
+    this.disabled = false;
     this._displayValue = "";
     this._search = "";
     this._isPhone = false;
@@ -54,9 +74,8 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         this._updateValue(this.value);
       }
     };
-    this._onChange = (e) => {
+    this._onChange = () => {
       var _a;
-      e.stopImmediatePropagation();
       this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
       this.search = this.value ? this.search : "";
       this._onClose();
@@ -107,11 +126,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       type="text"
       .value=${this._displayValue}
       autocomplete="off"
+      .disabled=${this.disabled}
       @click=${this._open}
       @input=${this._onInput}
       @keydown=${this._onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this._renderClearButton()} ${this._renderCaret()}
+      ${this.disabled ? "" : this._renderClearButton()} ${this._renderCaret()}
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
     };
@@ -190,7 +210,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         this._onChange
       );
       this._comboboxList.addEventListener(
-        UUIComboboxListEvent.SLOT_CHANGE,
+        UUIComboboxListEvent.INNER_SLOT_CHANGE,
         this._onSlotChange
       );
       await this.updateComplete;
@@ -253,7 +273,7 @@ UUIComboboxElement.styles = [
           var(--uui-color-surface,#fff)
         );
         border: 1px solid var(--uui-color-border,#d8d7d9);
-        border-radius: var(--uui-border-radius,3px);
+        border-radius: var(--uui-border-radius,var(--uui-size-1));
         width: 100%;
         height: 100%;
         box-sizing: border-box;
@@ -268,6 +288,10 @@ UUIComboboxElement.styles = [
         margin-top: -1px;
       }
 
+      :host([disabled]) #caret {
+        fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
+      }
+
       #phone-wrapper {
         position: fixed;
         inset: 0;
@@ -307,6 +331,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIComboboxElement.prototype, "closeLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIComboboxElement.prototype, "disabled", 2);
 __decorateClass([
   query("#combobox-input")
 ], UUIComboboxElement.prototype, "_input", 2);

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

@@ -4,7 +4,7 @@ declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco
  * @element uui-combobox
  * @fires {UUIComboboxEvent} input - fires when search input is changed
  * @fires {UUIComboboxEvent} change - fires when selection is changed
- * @slot default - for uui-combobox-list-options
+ * @slot - for uui-combobox-list-options
  * @slot input-prepend - prepend for the uui-input
  * @slot input-append - append for the uui-input
  * @description - Filterable combobox
@@ -35,6 +35,13 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default "Close"
      */
     closeLabel: string;
+    /**
+     * Disables the uui-combobox.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
     private _input;
     private _comboboxListElements?;
     private _comboboxList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.2.0",
+  "version": "1.3.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,20 +30,20 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@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"
+    "@umbraco-ui/uui-base": "1.3.0-rc.0",
+    "@umbraco-ui/uui-button": "1.3.0-rc.0",
+    "@umbraco-ui/uui-combobox-list": "1.3.0-rc.0",
+    "@umbraco-ui/uui-icon": "1.3.0-rc.0",
+    "@umbraco-ui/uui-scroll-container": "1.3.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "5159a81e353c893c30073cdbf2fdd94306477d6e"
+  "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
 }