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

package/dist/ix-multi-select.min.js

@@ -0,0 +1,5 @@
+import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import"@digital-realty/ix-chip/ix-chip-set.js";import"@digital-realty/ix-chip/ix-chip.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";const IxMultiSelectStyles=css`:host{display:block}:host([disabled]){pointer-events:none}ix-field{display:block}ix-field label{display:none}.field-content{display:flex;flex-wrap:wrap;min-height:var(--ix-custom-field-min-height,24px)}.menu{position:relative}.menu input,.menu label{cursor:pointer}input{border:none;background:0 0;outline:0;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:.5rem}ix-menu{--md-menu-container-color:#fff;max-height:500px}ix-menu-item{position:relative;min-height:var(--ix-menu-item-height,2.5rem)}ix-menu-item label{display:flex;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0}ix-menu-item label input[type=checkbox]{margin:0 1rem 2px}ix-menu-item.selected{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);--md-icon-button-hover-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-hover-state-layer-color:var(
+      --md-sys-text-color-secondary
+    );--md-icon-button-pressed-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
+      --md-sys-text-color-secondary
+    )}.open-icon{margin-right:.5rem}.multi-select{position:relative}`;class IxMultiSelect extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.items=[],this.label="",this.errorText="Invalid error text",this.disabled=!1,this.tabIndex=0,this.error=!1,this.required=!1,this._items=[],this.filterValue="",this.menuOpen=!1,this.menuOpening=!1,this.focused=!1,this.noFilteredOptions="No options",this.optionSelect=(e,i)=>{let s;s=e instanceof KeyboardEvent?(e.preventDefault(),!this._items[i].selected):e.target.checked,this._items=this._items.map((e,t)=>i===t?{...e,selected:s,filtered:!1}:{...e,filtered:!1}),this.dispatchEvent(new CustomEvent("toggle-multi-select-item",{detail:{label:this._items[i].label,selected:s},bubbles:!0,composed:!0})),this.filterValue=""},this.chipRemove=i=>{this._items=this._items.map((e,t)=>i===t?{...e,selected:!1}:{...e}),this.dispatchEvent(new CustomEvent("remove-multi-select-item",{detail:this._items[i].label,bubbles:!0,composed:!0}))},this.filterOptions=e=>{const i=e.target.value.toLocaleLowerCase();this.filterValue=i,this._items=this._items.map(e=>{var t=-1===e.label.toLowerCase().indexOf(i);return{...e,filtered:t}})},this.focusin=()=>{this.focused=!0,this.menu.show(),this.setMenuPosition(),this.internals.setFormValue(this.value)},this.handleFocusin=e=>{"filter"!==e.target.id||this.disabled||this.menuOpen||this.menuOpening||this.focusin()},this.handleFocusout=()=>{this.focused=!1},this.handleMenuOpening=()=>{this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition(),this.internals.setFormValue(this.value)},this.menuOpened=()=>{this.setMenuPosition(),this.menuOpening=!1,this.focused=!0},this.setMenuPosition=()=>{var e=null==(e=null==(e=this.menu)?void 0:e.shadowRoot)?void 0:e.querySelector(".menu");e&&(e.style.width="100%",e.style.insetBlockStart="0")},this.handleMenuClosed=()=>{this.menuOpen=!1,this.menuOpening=!1},this.toggleOpen=e=>{e.stopPropagation(),this.menu.open?this.menuOpening||this.menu.close():(this.menu.show(),this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition())},this.clear=e=>{e.stopPropagation(),this._items=this._items.map(e=>({...e,selected:!1})),this.filterValue="",this.focused=!1,this.menuOpen=!1,this.menuOpening=!1,this.menu.close(),this.dispatchEvent(new CustomEvent("clear-multi-select",{bubbles:!0,composed:!0}))}}static get styles(){return[IxMultiSelectStyles]}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}get value(){return this._items.filter(e=>e.selected).map(e=>e.label).join(", ")}set value(e){const t=e.split(",").map(e=>e.trim());this._items=this._items.map(e=>({...e,selected:t.includes(e.label)}))}connectedCallback(){super.connectedCallback(),this._items=[...this.items],this.internals.setFormValue(this.value)}updated(e){e.has("disabled")&&(this.tabIndex=this.disabled?-1:0),this.setMenuPosition(),this.internals.setFormValue(this.value)}formResetCallback(){this.reset()}reset(){this._items=this._items.map(e=>({...e,selected:!1}))}render(){var e={disabled:this.disabled,error:!this.disabled&&this.error};return html`<div class="multi-select"><ix-field class="${classMap(e)}" id="anchor" ?focused="${this.focused}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.error}" error-text="${this.menuOpen||this.menuOpening?nothing:this.errorText}" label="${this.label}" @click="${this.handleFocusin}" @focusin="${this.handleFocusin}" @focusout="${this.handleFocusout}" ?populated="${this._items.find(e=>e.selected)||this.filterValue.length||this.menuOpen}"><div class="field-content">${this._items.filter(e=>e.selected).length?html`<ix-chip-set>${this._items.map((e,t)=>e.selected?html`<span><ix-chip @remove="${()=>this.chipRemove(t)}" label="${e.label}" appearance="input" removable remove-only></ix-chip></span>`:nothing)}</ix-chip-set>`:nothing} <input id="filter" @input="${this.filterOptions}" .value="${this.filterValue}" type="text" autocomplete="off"></div><slot name="end" slot="end">${this.value.length?html`<ix-icon-button @click="${this.clear}" icon="close" aria-label="clear"></ix-icon-button>`:nothing}<ix-icon-button @click="${this.toggleOpen}" class="open-icon" icon="${"arrow_drop_"+(this.menuOpen?"up":"down")}" aria-label="options"></ix-icon-button></slot></ix-field><div class="menu"><ix-menu anchor="anchor" quick @closed="${this.handleMenuClosed}" @opened="${this.menuOpened}" @opening="${this.handleMenuOpening}">${this._items.filter(e=>!e.filtered).length?this._items.map((e,t)=>html`${e.filtered?nothing:html`<ix-menu-item keep-open class="${e.selected?"selected":""}" @keydown="${e=>{[" ","Enter"].includes(e.key)&&this.optionSelect(e,t)}}"><div slot="headline"><label><input type="checkbox" @change="${e=>this.optionSelect(e,t)}" .checked="${e.selected}"> ${e.label}</label></div></ix-menu-item>`}`):html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}</ix-menu></div></div>`}}requestUpdateOnAriaChange(IxMultiSelect),IxMultiSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxMultiSelect.formAssociated=!0,__decorate([query("ix-menu")],IxMultiSelect.prototype,"menu",void 0),__decorate([query("ix-chip-set")],IxMultiSelect.prototype,"chips",void 0),__decorate([query("#filter")],IxMultiSelect.prototype,"inputFilter",void 0),__decorate([property({type:Array})],IxMultiSelect.prototype,"items",void 0),__decorate([property({type:String})],IxMultiSelect.prototype,"label",void 0),__decorate([property({type:String,attribute:"error-text"})],IxMultiSelect.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"disabled",void 0),__decorate([property({type:Number,reflect:!0})],IxMultiSelect.prototype,"tabIndex",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"error",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"required",void 0),__decorate([state()],IxMultiSelect.prototype,"_items",void 0),__decorate([state()],IxMultiSelect.prototype,"filterValue",void 0),__decorate([state()],IxMultiSelect.prototype,"menuOpen",void 0),__decorate([state()],IxMultiSelect.prototype,"menuOpening",void 0),__decorate([state()],IxMultiSelect.prototype,"focused",void 0),window.customElements.define("ix-multi-select",IxMultiSelect);

package/package.json

@@ -3,13 +3,14 @@
   "description": "Webcomponent ix-multi-select following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
-    "./ix-multi-select.js": "./dist/ix-multi-select.js"
+    "./ix-multi-select.js": "./dist/ix-multi-select.js",
+    "./ix-multi-select.min.js": "./dist/ix-multi-select.min.js"
   },
   "publishConfig": {
     "access": "public"
@@ -17,7 +18,7 @@
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "tsc && npm run analyze -- --exclude dist",
+    "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
@@ -25,16 +26,16 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-chip": "^1.0.22",
-    "@digital-realty/ix-field": "^1.0.4",
-    "@digital-realty/ix-icon-button": "^1.0.35",
-    "@digital-realty/ix-menu": "^1.0.3",
+    "@digital-realty/ix-chip": "^1.0.23",
+    "@digital-realty/ix-field": "^1.0.5",
+    "@digital-realty/ix-icon-button": "^1.0.37",
+    "@digital-realty/ix-menu": "^1.0.4",
     "@material/web": "1.2.0",
     "lit": "^2.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@digital-realty/theme": "^1.0.26",
+    "@digital-realty/theme": "^1.0.27",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -47,6 +48,9 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
@@ -97,5 +101,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
+  "gitHead": "c7668fda980293ca038c0dd061ebe350fa88ee60"
 }