@digital-realty/ix-select 1.0.35 → 1.0.37

package/dist/IxSelect.d.ts

@@ -127,6 +127,6 @@ export declare class IxSelect extends LitElement {
     formStateRestoreCallback(newState: string): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1 | 2>;
+    render(): import("lit-html").TemplateResult<1 | 2>;
 }
 export {};

package/dist/ix-select.js

@@ -5,6 +5,10 @@ export class IxSelectStyled extends IxSelect {
 IxSelectStyled.styles = css `
     .select {
       display: block;
+      --md-outlined-field-label-text-color: var(
+        --md-sys-text-color-secondary,
+        rgba(9, 34, 65, 0.7)
+      );
     }
     ix-icon {
       height: 1.5rem;

package/dist/ix-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-select.js","sourceRoot":"","sources":["../src/ix-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,OAAO,cAAe,SAAQ,QAAQ;;AAC1B,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;GAS3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxSelect } from './IxSelect.js';\n\nexport class IxSelectStyled extends IxSelect {\n  static override styles = css`\n    .select {\n      display: block;\n    }\n    ix-icon {\n      height: 1.5rem;\n      color: var(--ix-select-leading-icon-color);\n      margin-inline-start: var(--ix-select-leading-icon-inset);\n    }\n  `;\n}\n\nwindow.customElements.define('ix-select', IxSelectStyled);\n"]}
+{"version":3,"file":"ix-select.js","sourceRoot":"","sources":["../src/ix-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,OAAO,cAAe,SAAQ,QAAQ;;AAC1B,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;GAa3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxSelect } from './IxSelect.js';\n\nexport class IxSelectStyled extends IxSelect {\n  static override styles = css`\n    .select {\n      display: block;\n      --md-outlined-field-label-text-color: var(\n        --md-sys-text-color-secondary,\n        rgba(9, 34, 65, 0.7)\n      );\n    }\n    ix-icon {\n      height: 1.5rem;\n      color: var(--ix-select-leading-icon-color);\n      margin-inline-start: var(--ix-select-leading-icon-inset);\n    }\n  `;\n}\n\nwindow.customElements.define('ix-select', IxSelectStyled);\n"]}

package/dist/ix-select.min.js

@@ -0,0 +1,33 @@
+import{LitElement,html,nothing,isServer,css}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{DEFAULT_TYPEAHEAD_BUFFER_TIME}from"@material/web/menu/internal/menu.js";import"@material/web/select/filled-select.js";import"@material/web/select/outlined-select.js";import{property,query,queryAssignedElements,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{literal,html as html$1}from"lit/static-html.js";import{styles}from"@material/web/menu/internal/menuitem/menu-item-styles.css.js";import"@material/web/ripple/ripple.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/labs/item/item.js";import{classMap}from"lit/directives/class-map.js";import{MenuItemController}from"@material/web/menu/internal/controllers/menuItemController.js";function createRequestSelectionEvent(){return new Event("request-selection",{bubbles:!0,composed:!0})}function createRequestDeselectionEvent(){return new Event("request-deselection",{bubbles:!0,composed:!0})}class SelectOptionController{get role(){return this.menuItemController.role}get typeaheadText(){return this.menuItemController.typeaheadText}setTypeaheadText(e){this.menuItemController.setTypeaheadText(e)}get displayText(){if(null!==this.internalDisplayText)return this.internalDisplayText;var e=this.getHeadlineElements();const t=[];return e.forEach(e=>{e.textContent&&e.textContent.trim()&&t.push(e.textContent.trim())}),t.join(" ")}setDisplayText(e){this.internalDisplayText=e}constructor(e,t){this.host=e,this.internalDisplayText=null,this.lastSelected=this.host.selected,this.firstUpdate=!0,this.onClick=()=>{this.menuItemController.onClick()},this.onKeydown=e=>{this.menuItemController.onKeydown(e)},this.menuItemController=new MenuItemController(e,t),this.getHeadlineElements=t.getHeadlineElements,e.addController(this)}hostUpdate(){this.lastSelected!==this.host.selected&&(this.host.ariaSelected=this.host.selected?"true":"false")}hostUpdated(){this.lastSelected===this.host.selected||this.firstUpdate||(this.host.selected?this.host.dispatchEvent(createRequestSelectionEvent()):this.host.dispatchEvent(createRequestDeselectionEvent())),this.lastSelected=this.host.selected,this.firstUpdate=!1}}class IxSelectOption extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.isMenuItem=!0,this.selected=!1,this.value="",this.type="option",this.selectOptionController=new SelectOptionController(this,{getHeadlineElements:()=>this.headlineElements,getSupportingTextElements:()=>this.supportingTextElements,getDefaultElements:()=>this.defaultElements,getInteractiveElement:()=>this.listItemRoot})}get typeaheadText(){return this.selectOptionController.typeaheadText}set typeaheadText(e){this.selectOptionController.setTypeaheadText(e)}get displayText(){return this.selectOptionController.displayText}set displayText(e){this.selectOptionController.setDisplayText(e)}render(){return this.renderListItem(html`<md-item><div slot="container">${this.renderRipple()} ${this.renderFocusRing()}</div><slot name="start" slot="start"></slot><slot name="end" slot="end"></slot>${this.renderBody()}</md-item>`)}renderListItem(e){return html`<li id="item" tabindex="${this.disabled?-1:0}" role="${this.selectOptionController.role}" aria-label="${this.ariaLabel||nothing}" aria-selected="${this.ariaSelected||nothing}" aria-checked="${this.ariaChecked||nothing}" aria-expanded="${this.ariaExpanded||nothing}" aria-haspopup="${this.ariaHasPopup||nothing}" class="list-item ${classMap(this.getRenderClasses())}" @click="${this.selectOptionController.onClick}" @keydown="${this.selectOptionController.onKeydown}">${e}</li>`}renderRipple(){return html`<md-ripple part="ripple" for="item" ?disabled="${this.disabled}"></md-ripple>`}renderFocusRing(){return html`<md-focus-ring part="focus-ring" for="item" inward></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return html`<slot></slot><slot name="overline" slot="overline"></slot><slot name="headline" slot="headline"></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`}focus(){var e;null!=(e=this.listItemRoot)&&e.focus()}}requestUpdateOnAriaChange(IxSelectOption),IxSelectOption.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([property({type:Boolean,reflect:!0})],IxSelectOption.prototype,"disabled",void 0),__decorate([property({type:Boolean,attribute:"md-menu-item",reflect:!0})],IxSelectOption.prototype,"isMenuItem",void 0),__decorate([property({type:Boolean})],IxSelectOption.prototype,"selected",void 0),__decorate([property()],IxSelectOption.prototype,"value",void 0),__decorate([query(".list-item")],IxSelectOption.prototype,"listItemRoot",void 0),__decorate([queryAssignedElements({slot:"headline"})],IxSelectOption.prototype,"headlineElements",void 0),__decorate([queryAssignedElements({slot:"supporting-text"})],IxSelectOption.prototype,"supportingTextElements",void 0),__decorate([queryAssignedNodes({slot:""})],IxSelectOption.prototype,"defaultElements",void 0),__decorate([property({attribute:"typeahead-text"})],IxSelectOption.prototype,"typeaheadText",null),__decorate([property({attribute:"display-text"})],IxSelectOption.prototype,"displayText",null);class IxSelectOptionStyled extends IxSelectOption{}var _a;IxSelectOptionStyled.styles=[styles],window.customElements.define("ix-select-option",IxSelectOptionStyled);const VALUE=Symbol("value");class IxSelect extends LitElement{constructor(){super(...arguments),this.minWidth=0,this.wideMenu=!1,this.filled=!1,this.label="",this.quick=!1,this.required=!1,this.disabled=!1,this.errorText="",this.supportingText="",this.error=!1,this.displayText="",this.leadingIcon="",this.trailingIcon="",this.menuPositioning="absolute",this.typeaheadDelay=DEFAULT_TYPEAHEAD_BUFFER_TIME,this.selectedIndex=-1,this.nativeError=!1,this.nativeErrorText="",this.internals=this.attachInternals(),this.customValidationMessage="",this[_a]="",this.handleResize=()=>{this.minWidth=0}}get hasError(){return this.error||this.nativeError}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}set name(e){this.setAttribute("name",e)}get validity(){return this.syncValidity(),this.internals.validity}get value(){return this[VALUE]=this.component.value,this[VALUE]}set value(e){isServer||(this.component.value=e)}get validationMessage(){return this.syncValidity(),this.internals.validationMessage}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity()}setMenuWidth(){this.wideMenu&&(this.minWidth=this.component.offsetWidth)}async getUpdateComplete(){return await super.getUpdateComplete(),await this.component.updateComplete,this.setMenuWidth(),this.internals.setFormValue(this.component.value),!0}async updated(e){e.has("required")&&this.syncValidity(),await this.getUpdateComplete()}getErrorText(){return this.error?this.errorText:this.nativeErrorText}async syncValidity(){var e=this.required&&!this.component.value,t=!!this.customValidationMessage,i=this.customValidationMessage||e&&this.getRequiredValidationMessage()||"";this.internals.setValidity({valueMissing:e,customError:t},i,this.component)}getRequiredValidationMessage(){var e=document.createElement("select");return e.required=!0,e.validationMessage}checkValidity(){return this.syncValidity(),this.internals.checkValidity()}reportValidity(){return this.component.reportValidity()}setCustomValidity(e){this.customValidationMessage=e,this.syncValidity()}focus(){var e;null!=(e=null==(e=this.component.shadowRoot)?void 0:e.querySelector(".field"))&&e.focus()}onBlur(e){var t=e.relatedTarget;"IX-SELECT-OPTION"===(null==t?void 0:t.tagName)&&e.stopPropagation()}reset(){this.component.reset(),this.internals.setFormValue(this.component.value)}formResetCallback(){this.reset()}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),!isServer&&this.wideMenu&&window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),!isServer&&this.wideMenu&&window.removeEventListener("resize",this.handleResize)}render(){var e=this.filled?literal`md-filled-select`:literal`md-outlined-select`,t=this.label||this.ariaLabel;return html$1`<${e}
+        ?disabled=${this.disabled}
+        ?quick=${this.quick}
+        ?error=${this.hasError}
+        ?required=${this.required}
+        ?has-leading-icon=${0<this.leadingIcon.length}
+        aria-label=${t||nothing}
+        tabindex=${ifDefined(this.disabled?void 0:"0")}
+        menu-positioning=${this.menuPositioning}
+        typeahead-delay=${this.typeaheadDelay}
+        supporting-text=${this.supportingText}
+        error-text=${this.getErrorText()}
+        selected-index=${ifDefined(-1===this.selectedIndex?void 0:this.selectedIndex)}
+        display-text=${this.displayText}
+        label=${this.label}
+        name=${this.name}
+        @request-selection=${this.handleSelection}
+        @opening=${this.setMenuWidth}
+        class="select"
+        style="min-width:${this.minWidth}px"
+        @focus=${this.focus}
+        @blur=${this.onBlur}
+      >
+        <slot></slot>
+          ${this.leadingIcon?html`<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`:nothing}
+          ${this.trailingIcon?html`<ix-icon slot="trailing-icon"
+                  >${this.trailingIcon}</ix-icon
+                >`:nothing}
+         <slot slot="aria-describedby" name="aria-describedby"></slot>
+      </${e}>`}}_a=VALUE,requestUpdateOnAriaChange(IxSelect),IxSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxSelect.formAssociated=!0,__decorate([query(".select")],IxSelect.prototype,"component",void 0),__decorate([property({type:Number})],IxSelect.prototype,"minWidth",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"wide-menu"})],IxSelect.prototype,"wideMenu",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"filled",void 0),__decorate([property()],IxSelect.prototype,"label",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"quick",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"disabled",void 0),__decorate([property({type:String,attribute:"error-text"})],IxSelect.prototype,"errorText",void 0),__decorate([property({type:String,attribute:"supporting-text"})],IxSelect.prototype,"supportingText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"error",void 0),__decorate([property({type:String,attribute:"display-text"})],IxSelect.prototype,"displayText",void 0),__decorate([property({attribute:"leading-icon",reflect:!0})],IxSelect.prototype,"leadingIcon",void 0),__decorate([property({attribute:"trailing-icon",reflect:!0})],IxSelect.prototype,"trailingIcon",void 0),__decorate([property({attribute:"menu-positioning"})],IxSelect.prototype,"menuPositioning",void 0),__decorate([property({type:Number,attribute:"typeahead-delay"})],IxSelect.prototype,"typeaheadDelay",void 0),__decorate([property({type:Number,attribute:"selected-index"})],IxSelect.prototype,"selectedIndex",void 0),__decorate([state()],IxSelect.prototype,"nativeError",void 0),__decorate([state()],IxSelect.prototype,"nativeErrorText",void 0);class IxSelectStyled extends IxSelect{}IxSelectStyled.styles=css`.select{display:block;--md-outlined-field-label-text-color:var(
+        --md-sys-text-color-secondary,
+        rgba(9, 34, 65, 0.7)
+      )}ix-icon{height:1.5rem;color:var(--ix-select-leading-icon-color);margin-inline-start:var(--ix-select-leading-icon-inset)}`,window.customElements.define("ix-select",IxSelectStyled);export{IxSelectStyled};

package/dist/selectoption/IxSelectOption.d.ts

@@ -59,21 +59,21 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
     get displayText(): string;
     set displayText(text: string);
     private readonly selectOptionController;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     /**
      * Renders the root list item.
      *
      * @param content the child content of the list item.
      */
-    protected renderListItem(content: unknown): import("lit").TemplateResult<1>;
+    protected renderListItem(content: unknown): import("lit-html").TemplateResult<1>;
     /**
      * Handles rendering of the ripple element.
      */
-    protected renderRipple(): import("lit").TemplateResult<1>;
+    protected renderRipple(): import("lit-html").TemplateResult<1>;
     /**
      * Handles rendering of the focus ring.
      */
-    protected renderFocusRing(): import("lit").TemplateResult<1>;
+    protected renderFocusRing(): import("lit-html").TemplateResult<1>;
     /**
      * Classes applied to the list item root.
      */
@@ -81,6 +81,6 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
     /**
      * Handles rendering the headline and supporting text.
      */
-    protected renderBody(): import("lit").TemplateResult<1>;
+    protected renderBody(): import("lit-html").TemplateResult<1>;
     focus(): void;
 }

package/package.json

@@ -3,13 +3,14 @@
   "description": "Webcomponent ix-select following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./ix-select.js": "./dist/ix-select.js",
+    "./ix-select.min.js": "./dist/ix-select.min.js",
     "./ix-select-option.js": "./dist/selectoption/ix-select-option.js",
     "./IxSelect": "./dist/react/IxSelect.js",
     "./IxSelectOption": "./dist/react/IxSelectOption.js"
@@ -20,7 +21,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",
@@ -30,7 +31,7 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@digital-realty/ix-icon": "^1.0.35",
+    "@digital-realty/ix-icon": "^1.0.36",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "lit": "^2.0.2",
@@ -51,6 +52,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"
   },
@@ -104,5 +108,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
+  "gitHead": "cd091e62ba14576aaeef360449550aa45986c32d"
 }