npm - @digital-realty/ix-multi-select - Versions diffs - 1.0.11 → 1.0.23 - Mend

@digital-realty/ix-multi-select 1.0.11 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/IxMultiSelect.d.ts +4 -2
package/dist/IxMultiSelect.js +53 -48
package/dist/IxMultiSelect.js.map +1 -1
package/dist/ix-multi-select-styles.js +19 -5
package/dist/ix-multi-select-styles.js.map +1 -1
package/package.json +5 -5

package/dist/IxMultiSelect.d.ts CHANGED Viewed

@@ -66,6 +66,7 @@ export declare class IxMultiSelect extends LitElement {
     label: string;
     errorText: string;
     disabled: boolean;
+    tabIndex: number;
     /**
      * Gets or sets whether or not the text field is in a visually invalid state.
      *
@@ -83,16 +84,17 @@ export declare class IxMultiSelect extends LitElement {
     get value(): string;
     set value(selected: string);
     connectedCallback(): void;
-    updated(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     private optionSelect;
     private chipRemove;
     private filterOptions;
     focusin: () => void;
     handleFocusin: (e: Event) => void;
     handleFocusout: () => void;
+    handleMenuOpening: () => void;
     menuOpened: () => void;
     setMenuPosition: () => void;
-    handleMenuClose: () => void;
+    handleMenuClosed: () => void;
     toggleOpen: (e: Event) => void;
     clear: (e: Event) => void;
     /** @private */

package/dist/IxMultiSelect.js CHANGED Viewed

@@ -19,6 +19,7 @@ export class IxMultiSelect extends LitElement {
         this.label = '';
         this.errorText = 'Invalid error text';
         this.disabled = false;
+        this.tabIndex = 0;
         /**
          * Gets or sets whether or not the text field is in a visually invalid state.
          *
@@ -69,31 +70,32 @@ export class IxMultiSelect extends LitElement {
             });
         };
         this.focusin = () => {
-            this.menu.show();
             this.focused = true;
-            this.menuOpening = true;
+            this.menu.show();
             this.setMenuPosition();
             this.internals.setFormValue(this.value);
         };
         this.handleFocusin = (e) => {
             const target = e.target;
-            if (target.tagName === 'MD-ICON-BUTTON' || this.disabled)
+            if (target.id !== 'filter' || this.disabled)
+                return;
+            if (this.menuOpen || this.menuOpening)
                 return;
             this.focusin();
         };
         this.handleFocusout = () => {
-            if (this.value.length || this.menuOpening || this.menuOpen) {
-                this.focused = true;
-            }
-            else {
-                this.focused = false;
-            }
+            this.focused = false;
         };
-        this.menuOpened = () => {
+        this.handleMenuOpening = () => {
+            this.menuOpening = true;
+            this.menuOpen = true;
             this.setMenuPosition();
             this.internals.setFormValue(this.value);
-            this.inputFilter.focus();
+        };
+        this.menuOpened = () => {
+            this.setMenuPosition();
             this.menuOpening = false;
+            this.focused = true;
         };
         this.setMenuPosition = () => {
             var _a, _b;
@@ -103,11 +105,9 @@ export class IxMultiSelect extends LitElement {
                 innerMenu.style.insetBlockStart = '0';
             }
         };
-        this.handleMenuClose = () => {
-            if (this.value.length === 0 && this.filterValue.length === 0) {
-                this.focused = false;
-            }
+        this.handleMenuClosed = () => {
             this.menuOpen = false;
+            this.menuOpening = false;
         };
         this.toggleOpen = (e) => {
             e.stopPropagation();
@@ -118,13 +118,18 @@ export class IxMultiSelect extends LitElement {
                 this.setMenuPosition();
             }
             else {
+                if (this.menuOpening)
+                    return;
                 this.menu.close();
             }
         };
         this.clear = (e) => {
             e.stopPropagation();
             this._items = this._items.map(item => ({ ...item, selected: false }));
+            this.filterValue = '';
             this.focused = false;
+            this.menuOpen = false;
+            this.menuOpening = false;
             this.menu.close();
             this.dispatchEvent(new CustomEvent('clear-multi-select', {
                 bubbles: true,
@@ -202,24 +207,14 @@ export class IxMultiSelect extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this._items = [...this.items];
-        if (this._items.find(item => item.selected)) {
-            this.focused = true;
-        }
         this.internals.setFormValue(this.value);
     }
     updated(changedProperties) {
-        if (changedProperties.has('_items') || changedProperties.has('disabled')) {
-            this.internals.setFormValue(this.value);
-            if (this._items.find(item => item.selected) ||
-                this.filterValue.length ||
-                this.menuOpen) {
-                this.focused = true;
-            }
-            else {
-                this.focused = false;
-            }
+        if (changedProperties.has('disabled')) {
+            this.tabIndex = this.disabled ? -1 : 0;
         }
         this.setMenuPosition();
+        this.internals.setFormValue(this.value);
     }
     /** @private */
     formResetCallback() {
@@ -245,34 +240,41 @@ export class IxMultiSelect extends LitElement {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?error=${this.error}
-          error-text=${this.errorText}
+          error-text=${!this.menuOpen && !this.menuOpening
+            ? this.errorText
+            : nothing}
           label=${this.label}
-          @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}
+          @click=${this.handleFocusin}
           @focusin=${this.handleFocusin}
           @focusout=${this.handleFocusout}
-          ?populated=${this._items.find(item => item.selected)}
+          ?populated=${this._items.find(item => item.selected) ||
+            this.filterValue.length ||
+            this.menuOpen}
         >
-          <ix-chip-set>
-            ${this._items.map((item, id) => item.selected
-            ? html `<span
-                    ><ix-chip
-                      @remove=${() => this.chipRemove(id)}
-                      label=${item.label}
-                      appearance="input"
-                      removable
-                      remove-only
-                    ></ix-chip
-                  ></span>`
-            : nothing)}
+          <div class="field-content">
+            ${this._items.filter(item => item.selected).length
+            ? html `<ix-chip-set>
+                  ${this._items.map((item, id) => item.selected
+                ? html `<span
+                          ><ix-chip
+                            @remove=${() => this.chipRemove(id)}
+                            label=${item.label}
+                            appearance="input"
+                            removable
+                            remove-only
+                          ></ix-chip
+                        ></span>`
+                : nothing)}
+                </ix-chip-set>`
+            : nothing}
             <input
               id="filter"
               @input=${this.filterOptions}
-              @focus=${this.focusin}
               .value=${this.filterValue}
-              class="flex-fill"
               type="text"
+              autocomplete="off"
             />
-          </ix-chip-set>
+          </div>
           <slot name="end" slot="end">
             ${this.value.length
             ? html `<ix-icon-button
@@ -292,10 +294,10 @@ export class IxMultiSelect extends LitElement {
         <div class="menu">
           <ix-menu
             anchor="anchor"
-            skip-restore-focus
             quick
-            @closing=${this.handleMenuClose}
+            @closed=${this.handleMenuClosed}
             @opened=${this.menuOpened}
+            @opening=${this.handleMenuOpening}
           >
             ${this._items.filter(item => !item.filtered).length
             ? this._items.map((item, id) => html `${!item.filtered
@@ -359,6 +361,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IxMultiSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], IxMultiSelect.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IxMultiSelect.prototype, "error", void 0);

package/dist/IxMultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,kDAAkD,CAAC;AAG1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAQlE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAkBmB,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAkEM,UAAK,GAAsB,EAAE,CAAC;QAE7B,UAAK,GAAG,EAAE,CAAC;QAEc,cAAS,GAC5D,oBAAoB,CAAC;QAEqB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;;WAKG;QACyC,UAAK,GAAG,KAAK,CAAC;QAEd,aAAQ,GAAG,KAAK,CAAC;QAE5C,WAAM,GAAsB,EAAE,CAAC;QAE/B,gBAAW,GAAG,EAAE,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,gBAAW,GAAG,KAAK,CAAC;QAEpB,YAAO,GAAG,KAAK,CAAC;QAEzB,sBAAiB,GAAG,YAAY,CAAC;QA0CjC,iBAAY,GAAG,CAAC,CAA6B,EAAE,EAAU,EAAE,EAAE;YACnE,IAAI,SAAkB,CAAC;YACvB,IAAI,CAAC,YAAY,aAAa,EAAE;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC;aACvC;iBAAM;gBACL,SAAS,GAAsB,CAAC,CAAC,MAAO,CAAC,OAAO,CAAC;aAClD;YACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAS,EAAE,EAAE,CAChD,EAAE,KAAK,CAAC;gBACN,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACnD,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CACjC,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;gBAC1C,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE;gBAC7D,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;YACF,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,EAAU,EAAE,EAAE;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAS,EAAE,EAAE,CAChD,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CACtD,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;gBAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,MAAM,WAAW,GAAsB,CAAC,CAAC,MAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC3E,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;gBACtE,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC/B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;YACvC,IAAI,MAAM,CAAC,OAAO,KAAK,gBAAgB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACjE,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;;YACrB,MAAM,SAAS,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CACpD,OAAO,CACO,CAAC;YACjB,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC/B,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC;aACvC;QACH,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;YACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,CAAQ,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;iBAAM;gBACL,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;QAEF,UAAK,GAAG,CAAC,CAAQ,EAAE,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IAqHJ,CAAC;IAlYC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;IAkBD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAuCD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM;aACf,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;aACvB,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,KAAK,CAAC,QAAgB;QACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACrC,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;SACpC,CAAC,CAAC,CAAC;IACN,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC3C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO,CAAC,iBAAiC;QACvC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACxE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IACE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACvC,IAAI,CAAC,WAAW,CAAC,MAAM;gBACvB,IAAI,CAAC,QAAQ,EACb;gBACA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;SACF;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAsHD,eAAe;IACf,iBAAiB;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;;;mBAGI,QAAQ,CAAC,OAAO,CAAC;;qBAEf,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;uBACN,IAAI,CAAC,SAAS;kBACnB,IAAI,CAAC,KAAK;mBACT,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;qBACtD,IAAI,CAAC,aAAa;sBACjB,IAAI,CAAC,cAAc;uBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;;;cAGhD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAU,EAAE,EAAE,CACrC,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;;gCAEU,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;8BAC3B,IAAI,CAAC,KAAK;;;;;2BAKb;YACX,CAAC,CAAC,OAAO,CACZ;;;uBAGU,IAAI,CAAC,aAAa;uBAClB,IAAI,CAAC,OAAO;uBACZ,IAAI,CAAC,WAAW;;;;;;cAMzB,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;2BACO,IAAI,CAAC,KAAK;;;mCAGF;YACrB,CAAC,CAAC,OAAO;;uBAEA,IAAI,CAAC,UAAU;;qBAEjB,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE;;;;;;;;;;uBAU3C,IAAI,CAAC,eAAe;sBACrB,IAAI,CAAC,UAAU;;cAEvB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;YACjD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CACb,CAAC,IAAI,EAAE,EAAU,EAAE,EAAE,CACnB,IAAI,CAAA,GAAG,CAAC,IAAI,CAAC,QAAQ;gBACnB,CAAC,CAAC,IAAI,CAAA;;kCAEM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;qCAC5B,CAAC,CAAgB,EAAE,EAAE;oBAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;oBACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;wBACjC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;qBAC1B;gBACH,CAAC;;;;;;0CAMe,CAAC,CAAa,EAAE,EAAE,CAC1B,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC;2CACf,IAAI,CAAC,QAAQ;;gCAExB,IAAI,CAAC,KAAK;;;wCAGF;gBAClB,CAAC,CAAC,OAAO,EAAE,CAChB;YACH,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,iBAAiB,iBAAiB;;;;KAIvE,CAAC;IACJ,CAAC;;AA7XD;IACE,yBAAyB,CAAC,aAAa,CAAC,CAAC;AAC3C,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,+BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,mBAAmB;AACH,4BAAc,GAAG,IAAI,CAAC;AA+DpB;IAAjB,KAAK,CAAC,SAAS,CAAC;2CAAe;AAEV;IAArB,KAAK,CAAC,aAAa,CAAC;4CAAmB;AAEtB;IAAjB,KAAK,CAAC,SAAS,CAAC;kDAAgC;AAEtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA+B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AAEc;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gDAC7B;AAEqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAQjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAEpD;IAAR,KAAK,EAAE;6CAAwC;AAEvC;IAAR,KAAK,EAAE;kDAA0B;AAEzB;IAAR,KAAK,EAAE;+CAA0B;AAEzB;IAAR,KAAK,EAAE;kDAA6B;AAE5B;IAAR,KAAK,EAAE;8CAAyB","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nexport class IxMultiSelect extends LitElement {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxMultiSelect);\n }\n\n /** @nocollapse /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n /\n The associated form element with which this element's value will submit.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n The labels this element is associated with.\n /\n get labels() {\n return this.internals.labels;\n }\n\n /\n The HTML name to use in form submission.\n /\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /\n Returns the text field's validation error message.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Returns a `ValidityState` object that represents the validity states of the\n * text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n Gets or sets whether or not the text field is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private menuOpening = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._items = [...this.items];\n if (this._items.find(item => item.selected)) {\n this.focused = true;\n }\n this.internals.setFormValue(this.value);\n }\n\n updated(changedProperties: PropertyValues) {\n if (changedProperties.has('_items') \|\| changedProperties.has('disabled')) {\n this.internals.setFormValue(this.value);\n if (\n this._items.find(item => item.selected) \|\|\n this.filterValue.length \|\|\n this.menuOpen\n ) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n }\n this.setMenuPosition();\n }\n\n private optionSelect = (e: InputEvent \| KeyboardEvent, id: number) => {\n let ischecked: boolean;\n if (e instanceof KeyboardEvent) {\n e.preventDefault();\n ischecked = !this._items[id].selected;\n } else {\n ischecked = (<HTMLInputElement>e.target).checked;\n }\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.menu.show();\n this.focused = true;\n this.menuOpening = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.tagName === 'MD-ICON-BUTTON' \|\| this.disabled) return;\n this.focusin();\n };\n\n handleFocusout = () => {\n if (this.value.length \|\| this.menuOpening \|\| this.menuOpen) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n this.inputFilter.focus();\n this.menuOpening = false;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n innerMenu.style.width = '100%';\n innerMenu.style.insetBlockStart = '0';\n }\n };\n\n handleMenuClose = () => {\n if (this.value.length === 0 && this.filterValue.length === 0) {\n this.focused = false;\n }\n this.menuOpen = false;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.focused = false;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('clear-multi-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /\n Reset the text field to its default value.\n */\n reset() {\n this._items = this._items.map(item => ({ ...item, selected: false }));\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"multi-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${this.errorText}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected)}\n >\n <ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n : nothing\n )}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n @focus=${this.focusin}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n </ix-chip-set>\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n skip-restore-focus\n quick\n @closing=${this.handleMenuClose}\n @opened=${this.menuOpened}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.optionSelect(e, id);\n }\n }}\n >\n <div slot=\"headline\">\n <label>\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nexport class IxMultiSelect extends LitElement {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxMultiSelect);\n }\n\n /** @nocollapse /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n /\n The associated form element with which this element's value will submit.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n The labels this element is associated with.\n /\n get labels() {\n return this.internals.labels;\n }\n\n /\n The HTML name to use in form submission.\n /\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /\n Returns the text field's validation error message.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Returns a `ValidityState` object that represents the validity states of the\n * text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n /\n Gets or sets whether or not the text field is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private menuOpening = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._items = [...this.items];\n this.internals.setFormValue(this.value);\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n }\n\n private optionSelect = (e: InputEvent \| KeyboardEvent, id: number) => {\n let ischecked: boolean;\n if (e instanceof KeyboardEvent) {\n e.preventDefault();\n ischecked = !this._items[id].selected;\n } else {\n ischecked = (<HTMLInputElement>e.target).checked;\n }\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.focused = true;\n this.menu.show();\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.id !== 'filter' \|\| this.disabled) return;\n if (this.menuOpen \|\| this.menuOpening) return;\n this.focusin();\n };\n\n handleFocusout = () => {\n this.focused = false;\n };\n\n handleMenuOpening = () => {\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n this.focused = true;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n innerMenu.style.width = '100%';\n innerMenu.style.insetBlockStart = '0';\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpen = false;\n this.menuOpening = false;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n } else {\n if (this.menuOpening) return;\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.filterValue = '';\n this.focused = false;\n this.menuOpen = false;\n this.menuOpening = false;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('clear-multi-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /\n Reset the text field to its default value.\n */\n reset() {\n this._items = this._items.map(item => ({ ...item, selected: false }));\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"multi-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.errorText\n : nothing}\n label=${this.label}\n @click=${this.handleFocusin}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected) \|\|\n this.filterValue.length \|\|\n this.menuOpen}\n >\n <div class=\"field-content\">\n ${this._items.filter(item => item.selected).length\n ? html`<ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n : nothing\n )}\n </ix-chip-set>`\n : nothing}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n .value=${this.filterValue}\n type=\"text\"\n autocomplete=\"off\"\n />\n </div>\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n quick\n @closed=${this.handleMenuClosed}\n @opened=${this.menuOpened}\n @opening=${this.handleMenuOpening}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.optionSelect(e, id);\n }\n }}\n >\n <div slot=\"headline\">\n <label>\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}

package/dist/ix-multi-select-styles.js CHANGED Viewed

@@ -3,16 +3,19 @@ export const IxMultiSelectStyles = css `
   :host {
     display: block;
   }
+  :host([disabled]) {
+    pointer-events: none;
+  }
   ix-field {
     display: block;
-    --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);
-    --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);
   }
   ix-field label {
     display: none;
   }
-  .flex-fill {
-    flex: 1;
+  .field-content {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: var(--ix-custom-field-min-height, 24px);
   }
   .menu {
     position: relative;
@@ -26,10 +29,17 @@ export const IxMultiSelectStyles = css `
     background: transparent;
     outline: none;
     min-width: 3rem;
+    line-height: var(--_content-line-height);
+  }
+  #filter {
+    min-width: 30%;
+    line-height: var(--_content-line-height);
+    flex-grow: 1;
   }
   ix-chip-set {
     min-height: var(--_content-line-height);
     display: flex;
+    padding-right: 0.5rem;
   }
   ix-menu {
     --md-menu-container-color: #fff;
@@ -37,6 +47,7 @@ export const IxMultiSelectStyles = css `
   }
   ix-menu-item {
     position: relative;
+    min-height: var(--ix-menu-item-height, 2.5rem);
   }
   ix-menu-item label {
     display: flex;
@@ -51,7 +62,10 @@ export const IxMultiSelectStyles = css `
     margin: 0 1rem 2px;
   }
   ix-menu-item.selected {
-    background: var(--md-sys-color-tertiary-container);
+    background: var(
+      --md-menu-item-selected-container-color,
+      --md-sys-color-tertiary-container
+    );
   }
   ix-icon-button {
     --md-icon-button-icon-color: var(--md-sys-text-color-secondary);

package/dist/ix-multi-select-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-multi-select-styles.js","sourceRoot":"","sources":["../src/ix-multi-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuErC~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxMultiSelectStyles = css`\n :host {\n display: block;\n }\n ~~ix-field~~ {\n ~~display~~: ~~block~~;\n ~~--md~~-~~outlined-~~field~~-label-text-color:~~ ~~var(--md-sys-text-color-primary);\~~n ~~--md-outlined-field-outline-color~~: ~~var(--md-outlined-field-outline-color)~~;\n }\n ix-field label {\n display: none;\n }\n .~~flex~~-~~fill~~ {\n flex: 1;\n }\n .menu {\n position: relative;\n }\n .menu label,\n .menu input {\n cursor: pointer;\n }\n input {\n border: none;\n background: transparent;\n outline: none;\n min-width: 3rem;\n }\n ix-chip-set {\n min-height: var(--_content-line-height);\n display: flex;\n }\n ix-menu {\n --md-menu-container-color: #fff;\n max-height: 500px;\n }\n ix-menu-item {\n position: relative;\n }\n ix-menu-item label {\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n ix-menu-item label input[type='checkbox'] {\n margin: 0 1rem 2px;\n }\n ix-menu-item.selected {\n background: var(--md-sys-color-tertiary-container);\n }\n ix-icon-button {\n --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-pressed-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n }\n .open-icon {\n margin-right: 0.5rem;\n }\n .multi-select {\n position: relative;\n }\n`;\n"]}
1	+ {"version":3,"file":"ix-multi-select-styles.js","sourceRoot":"","sources":["../src/ix-multi-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFrC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxMultiSelectStyles = css`\n :host {\n display: block;\n }\n :host([disabled]) {\n pointer-events: none;\n }\n ix-field {\n display: block;\n }\n ix-field label {\n display: none;\n }\n .field-content {\n display: flex;\n flex-wrap: wrap;\n min-height: var(--ix-custom-field-min-height, 24px);\n }\n .menu {\n position: relative;\n }\n .menu label,\n .menu input {\n cursor: pointer;\n }\n input {\n border: none;\n background: transparent;\n outline: none;\n min-width: 3rem;\n line-height: var(--_content-line-height);\n }\n #filter {\n min-width: 30%;\n line-height: var(--_content-line-height);\n flex-grow: 1;\n }\n ix-chip-set {\n min-height: var(--_content-line-height);\n display: flex;\n padding-right: 0.5rem;\n }\n ix-menu {\n --md-menu-container-color: #fff;\n max-height: 500px;\n }\n ix-menu-item {\n position: relative;\n min-height: var(--ix-menu-item-height, 2.5rem);\n }\n ix-menu-item label {\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n ix-menu-item label input[type='checkbox'] {\n margin: 0 1rem 2px;\n }\n ix-menu-item.selected {\n background: var(\n --md-menu-item-selected-container-color,\n --md-sys-color-tertiary-container\n );\n }\n ix-icon-button {\n --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-pressed-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n }\n .open-icon {\n margin-right: 0.5rem;\n }\n .multi-select {\n position: relative;\n }\n`;\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-multi-select following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.11",
+  "version": "1.0.23",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,16 +25,16 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-chip": "^1.0.8",
+    "@digital-realty/ix-chip": "^1.0.22",
     "@digital-realty/ix-field": "^1.0.4",
-    "@digital-realty/ix-icon-button": "^1.0.23",
+    "@digital-realty/ix-icon-button": "^1.0.35",
     "@digital-realty/ix-menu": "^1.0.3",
     "@material/web": "1.2.0",
     "lit": "^2.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@digital-realty/theme": "^1.0.12",
+    "@digital-realty/theme": "^1.0.26",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -97,5 +97,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "da586fb3d29c5d12fc0e3cd279cc0feb3adcb879"
+  "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
 }