@digital-realty/ix-filter-select 1.0.25 → 1.0.27

package/dist/ix-filter-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-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 IxFilterSelectStyles=css`:host{display:block}:host([disabled]){pointer-events:none}ix-field{display:block}ix-field label{display:none}.flex-fill{flex:1}.menu{position:relative}.menu input,.menu label{cursor:pointer}input{border:none;background:0 0;outline:0;min-width:3rem}ix-chip-set{min-height:var(--_content-line-height)}ix-menu{--md-menu-container-color:#fff;max-height:500px}ix-menu-item{position:relative}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}.filter-select{position:relative}`;class IxFilterSelect extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.options=[],this.value="",this.label="",this.errorText="Invalid error text",this.noFilteredOptions="No options",this.disabled=!1,this.error=!1,this.tabIndex=0,this.required=!1,this.filteredOptions=[],this.filterValue="",this.menuOpen=!1,this.focused=!1,this.menuOpening=!1,this.handleFocusin=e=>{"filter"!==e.target.id||this.disabled||this.menuOpen||this.menuOpening||(this.focused=!0,this.menu.show(),this.menuOpening=!0,this.setMenuPosition(),this.internals.setFormValue(this.value))},this.handleFocusout=()=>{this.focused=!1},this.handleMenuOpening=()=>{this.focused=!0,this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition(),this.internals.setFormValue(this.value)},this.menuOpened=()=>{this.setMenuPosition(),this.menuOpening=!1},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.filterInput=e=>{this.filterValue=e.target.value;let i="";this.filteredOptions=this.options.filter(e=>{var t=this.filterValue.trim().toLowerCase();return e.toLowerCase()===t&&(i=e),e.toLowerCase().includes(t)}),i!==this.value&&(this.value=i);e=null==(e=this.menu.shadowRoot)?void 0:e.querySelector(".menu");e&&(e.style.height="auto")},this.selectItem=e=>{this.value=e,this.filterValue=e,this.filteredOptions=this.options,this.menu.close(),this.dispatchEvent(new CustomEvent("select-filter-select",{detail:{value:e},bubbles:!0,composed:!0}))},this.toggleOpen=e=>{e.stopPropagation(),this.menu.open?this.menu.close():(this.menu.show(),this.focused=!0,this.menuOpening=!0,this.setMenuPosition())},this.clear=e=>{e.stopPropagation(),this.value="",this.filterValue="",this.focused=!1,this.dispatchEvent(new CustomEvent("clear-filter-select",{bubbles:!0,composed:!0}))}}static get styles(){return[IxFilterSelectStyles]}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()}firstUpdated(){this.filteredOptions=this.options,this.internals.setFormValue(this.value),this.filterValue=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.value=""}render(){var e={disabled:this.disabled,error:!this.disabled&&this.error};return html`<div class="filter-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.disabled?null:this.inputFilter.focus()}" @focusin="${this.handleFocusin}" @focusout="${this.handleFocusout}" ?populated="${this.filterValue.length||this.value.length}"><input id="filter" @input="${this.filterInput}" .value="${this.filterValue}" class="flex-fill" type="text"><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" @opening="${this.handleMenuOpening}" @opened="${this.menuOpened}" @closed="${this.handleMenuClosed}">${null!=(e=this.filteredOptions)&&e.length?this.filteredOptions.map((t,e)=>html`<ix-menu-item id="${e}" @click="${()=>{this.selectItem(t)}}" @keydown="${e=>{[" ","Tab","Enter"].includes(e.key)&&this.selectItem(t)}}" class="${this.value===t?"selected":""}"><div slot="headline">${t}</div></ix-menu-item>`):html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}</ix-menu></div></div>`}}requestUpdateOnAriaChange(IxFilterSelect),IxFilterSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxFilterSelect.formAssociated=!0,__decorate([query("ix-menu")],IxFilterSelect.prototype,"menu",void 0),__decorate([query("#filter")],IxFilterSelect.prototype,"inputFilter",void 0),__decorate([property({type:Array})],IxFilterSelect.prototype,"options",void 0),__decorate([property({type:String})],IxFilterSelect.prototype,"value",void 0),__decorate([property({type:String})],IxFilterSelect.prototype,"label",void 0),__decorate([property({type:String,attribute:"error-text"})],IxFilterSelect.prototype,"errorText",void 0),__decorate([property({type:String,attribute:"no-options-text"})],IxFilterSelect.prototype,"noFilteredOptions",void 0),__decorate([property({type:Boolean,reflect:!0})],IxFilterSelect.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],IxFilterSelect.prototype,"error",void 0),__decorate([property({type:Number,reflect:!0})],IxFilterSelect.prototype,"tabIndex",void 0),__decorate([property({type:Boolean,reflect:!0})],IxFilterSelect.prototype,"required",void 0),__decorate([state()],IxFilterSelect.prototype,"filteredOptions",void 0),__decorate([state()],IxFilterSelect.prototype,"filterValue",void 0),__decorate([state()],IxFilterSelect.prototype,"menuOpen",void 0),__decorate([state()],IxFilterSelect.prototype,"focused",void 0),__decorate([state()],IxFilterSelect.prototype,"menuOpening",void 0),window.customElements.define("ix-filter-select",IxFilterSelect);

package/package.json

@@ -3,13 +3,14 @@
   "description": "Webcomponent ix-filter-select following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
-    "./ix-filter-select.js": "./dist/ix-filter-select.js"
+    "./ix-filter-select.js": "./dist/ix-filter-select.js",
+    "./ix-filter-select.min.js": "./dist/ix-filter-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,15 +26,15 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-field": "^1.0.4",
-    "@digital-realty/ix-icon-button": "^1.0.36",
-    "@digital-realty/ix-menu": "^1.0.3",
+    "@digital-realty/ix-field": "^1.0.5",
+    "@digital-realty/ix-icon-button": "^1.0.38",
+    "@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.27",
+    "@digital-realty/theme": "^1.0.28",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -46,6 +47,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"
   },
@@ -96,5 +100,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "b84d73018ee0d33b5f018c6953c2dcae0931c11e"
+  "gitHead": "49305f98dab34c5ad8c217083bdb88752039800c"
 }