@digital-realty/ix-select 1.1.8 → 1.1.10

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.
@@ -129,6 +129,6 @@ export declare class IxSelect extends LitElement {
129
129
  formStateRestoreCallback(newState: string): void;
130
130
  connectedCallback(): void;
131
131
  disconnectedCallback(): void;
132
- render(): import("lit").TemplateResult<1 | 2>;
132
+ render(): import("lit-html").TemplateResult<1 | 2 | 3>;
133
133
  }
134
134
  export {};
package/dist/ix-select.js CHANGED
@@ -3,16 +3,25 @@ import { IxSelect } from './IxSelect.js';
3
3
  export class IxSelectStyled extends IxSelect {
4
4
  }
5
5
  IxSelectStyled.styles = css `
6
+ :host([disabled]) {
7
+ pointer-events: none;
8
+ }
9
+ :host([error]) {
10
+ --md-outlined-select-text-field-outline-width: 2px;
11
+ }
6
12
  .select {
7
13
  display: block;
8
14
  --md-outlined-field-label-text-color: var(
9
15
  --md-sys-text-color-secondary,
10
- rgba(9, 34, 65, 0.7)
16
+ #092241b3
11
17
  );
12
18
  }
13
19
  ix-icon {
14
- height: 1.5rem;
15
- color: var(--ix-select-leading-icon-color);
20
+ height: var(--ix-select-leading-icon-height, 1.5rem);
21
+ color: var(
22
+ --ix-select-leading-icon-color,
23
+ var(--clr-graphics-fill, #09224199)
24
+ );
16
25
  margin-inline-start: var(--ix-select-leading-icon-inset);
17
26
  }
18
27
  `;
@@ -1 +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;;;;;;;;;;;;;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"]}
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;;;;;;;;;;;;;;;;;;;;;;GAsB3B,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 :host([disabled]) {\n pointer-events: none;\n }\n :host([error]) {\n --md-outlined-select-text-field-outline-width: 2px;\n }\n .select {\n display: block;\n --md-outlined-field-label-text-color: var(\n --md-sys-text-color-secondary,\n #092241b3\n );\n }\n ix-icon {\n height: var(--ix-select-leading-icon-height, 1.5rem);\n color: var(\n --ix-select-leading-icon-color,\n var(--clr-graphics-fill, #09224199)\n );\n margin-inline-start: var(--ix-select-leading-icon-inset);\n }\n `;\n}\n\nwindow.customElements.define('ix-select', IxSelectStyled);\n"]}
@@ -1,4 +1,4 @@
1
- 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();let 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);let VALUE=Symbol("value");class IxSelect extends LitElement{constructor(){super(...arguments),this.minWidth=0,this.wideMenu=!1,this.truncateLabelBy=70,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}truncateLabel(){var e,t=null==(t=this.component.shadowRoot)?void 0:t.getElementById("label");!t||!(e=null==(e=t.parentElement)?void 0:e.getBoundingClientRect().width)||e<2*this.truncateLabelBy||(t.style.setProperty("max-width",e-this.truncateLabelBy+"px"),t.style.setProperty("overflow","hidden"),t.style.setProperty("text-overflow","ellipsis"),t.style.setProperty("white-space","nowrap"))}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity(),this.truncateLabel()}setMenuSize(){var e=null==(e=this.shadowRoot)?void 0:e.querySelector(".select"),e=null==(e=null==(e=null==(e=null==e?void 0:e.shadowRoot)?void 0:e.querySelector("#listbox"))?void 0:e.shadowRoot)?void 0:e.querySelector(".menu");e.style&&(e.style.maxHeight="70vh"),this.wideMenu&&(this.minWidth=this.component.offsetWidth)}async getUpdateComplete(){return await super.getUpdateComplete(),await this.component.updateComplete,this.setMenuSize(),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}
1
+ import{LitElement,html,nothing,css,isServer}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();let 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,css`ix-icon{font-size:1.5rem;display:block}[slot=end]{margin-right:2rem}[slot=start]{margin-right:-.4rem}`],window.customElements.define("ix-select-option",IxSelectOptionStyled);let VALUE=Symbol("value");class IxSelect extends LitElement{constructor(){super(...arguments),this.minWidth=0,this.wideMenu=!1,this.truncateLabelBy=70,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}truncateLabel(){var e,t=null==(t=this.component.shadowRoot)?void 0:t.getElementById("label");!t||!(e=null==(e=t.parentElement)?void 0:e.getBoundingClientRect().width)||e<2*this.truncateLabelBy||(t.style.setProperty("max-width",e-this.truncateLabelBy+"px"),t.style.setProperty("overflow","hidden"),t.style.setProperty("text-overflow","ellipsis"),t.style.setProperty("white-space","nowrap"))}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity(),this.truncateLabel()}setMenuSize(){var e=null==(e=this.shadowRoot)?void 0:e.querySelector(".select"),e=null==(e=null==(e=null==(e=null==e?void 0:e.shadowRoot)?void 0:e.querySelector("#listbox"))?void 0:e.shadowRoot)?void 0:e.querySelector(".menu");e.style&&(e.style.maxHeight="70vh"),this.wideMenu&&(this.minWidth=this.component.offsetWidth)}async getUpdateComplete(){return await super.getUpdateComplete(),await this.component.updateComplete,this.setMenuSize(),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}
2
2
  ?disabled=${this.disabled}
3
3
  ?quick=${this.quick}
4
4
  ?error=${this.hasError}
@@ -28,7 +28,7 @@ import{LitElement,html,nothing,isServer,css}from"lit";import{__decorate}from"tsl
28
28
  >${this.trailingIcon}</ix-icon
29
29
  >`:nothing}
30
30
  <slot slot="aria-describedby" name="aria-describedby"></slot>
31
- </${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:Number})],IxSelect.prototype,"truncateLabelBy",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(
31
+ </${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:Number})],IxSelect.prototype,"truncateLabelBy",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`:host([disabled]){pointer-events:none}:host([error]){--md-outlined-select-text-field-outline-width:2px}.select{display:block;--md-outlined-field-label-text-color:var(
32
32
  --md-sys-text-color-secondary,
33
- rgba(9, 34, 65, 0.7)
34
- )}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};
33
+ #092241b3
34
+ )}ix-icon{height:var(--ix-select-leading-icon-height,1.5rem);color:var(--ix-select-leading-icon-color,var(--clr-graphics-fill,#09224199));margin-inline-start:var(--ix-select-leading-icon-inset)}`,window.customElements.define("ix-select",IxSelectStyled);export{IxSelectStyled};
@@ -59,21 +59,21 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
59
59
  get displayText(): string;
60
60
  set displayText(text: string);
61
61
  private readonly selectOptionController;
62
- protected render(): import("lit").TemplateResult<1>;
62
+ protected render(): import("lit-html").TemplateResult<1>;
63
63
  /**
64
64
  * Renders the root list item.
65
65
  *
66
66
  * @param content the child content of the list item.
67
67
  */
68
- protected renderListItem(content: unknown): import("lit").TemplateResult<1>;
68
+ protected renderListItem(content: unknown): import("lit-html").TemplateResult<1>;
69
69
  /**
70
70
  * Handles rendering of the ripple element.
71
71
  */
72
- protected renderRipple(): import("lit").TemplateResult<1>;
72
+ protected renderRipple(): import("lit-html").TemplateResult<1>;
73
73
  /**
74
74
  * Handles rendering of the focus ring.
75
75
  */
76
- protected renderFocusRing(): import("lit").TemplateResult<1>;
76
+ protected renderFocusRing(): import("lit-html").TemplateResult<1>;
77
77
  /**
78
78
  * Classes applied to the list item root.
79
79
  */
@@ -81,6 +81,6 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
81
81
  /**
82
82
  * Handles rendering the headline and supporting text.
83
83
  */
84
- protected renderBody(): import("lit").TemplateResult<1>;
84
+ protected renderBody(): import("lit-html").TemplateResult<1>;
85
85
  focus(): void;
86
86
  }
@@ -1,7 +1,24 @@
1
+ import { css } from 'lit';
1
2
  import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';
2
3
  import { IxSelectOption } from './IxSelectOption.js';
3
4
  export class IxSelectOptionStyled extends IxSelectOption {
4
5
  }
5
- IxSelectOptionStyled.styles = [styles];
6
+ IxSelectOptionStyled.styles = [
7
+ styles,
8
+ css `
9
+ ix-icon {
10
+ font-size: 1.5rem;
11
+ display: block;
12
+ }
13
+
14
+ [slot='end'] {
15
+ margin-right: 2rem;
16
+ }
17
+
18
+ [slot='start'] {
19
+ margin-right: -0.4rem;
20
+ }
21
+ `,
22
+ ];
6
23
  window.customElements.define('ix-select-option', IxSelectOptionStyled);
7
24
  //# sourceMappingURL=ix-select-option.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,8DAA8D,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,OAAO,oBAAqB,SAAQ,cAAc;;AACtC,2BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGpC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';\nimport { IxSelectOption } from './IxSelectOption.js';\n\nexport class IxSelectOptionStyled extends IxSelectOption {\n static override styles = [styles];\n}\n\nwindow.customElements.define('ix-select-option', IxSelectOptionStyled);\n"]}
1
+ {"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,8DAA8D,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,OAAO,oBAAqB,SAAQ,cAAc;;AACtC,2BAAM,GAAG;IACvB,MAAM;IACN,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';\nimport { IxSelectOption } from './IxSelectOption.js';\n\nexport class IxSelectOptionStyled extends IxSelectOption {\n static override styles = [\n styles,\n css`\n ix-icon {\n font-size: 1.5rem;\n display: block;\n }\n\n [slot='end'] {\n margin-right: 2rem;\n }\n\n [slot='start'] {\n margin-right: -0.4rem;\n }\n `,\n ];\n}\n\nwindow.customElements.define('ix-select-option', IxSelectOptionStyled);\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-select following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "interxion",
6
- "version": "1.1.8",
6
+ "version": "1.1.10",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -31,10 +31,10 @@
31
31
  "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
32
32
  },
33
33
  "dependencies": {
34
- "@digital-realty/ix-icon": "^1.1.4",
34
+ "@digital-realty/ix-icon": "^1.1.6",
35
35
  "@lit/react": "^1.0.2",
36
36
  "@material/web": "1.2.0",
37
- "lit": "^2.8.0 || ^3.0.0",
37
+ "lit": "^3.2.1",
38
38
  "react": "^18.2.0"
39
39
  },
40
40
  "devDependencies": {
@@ -52,6 +52,7 @@
52
52
  "husky": "^4.3.8",
53
53
  "lint-staged": "^10.5.4",
54
54
  "prettier": "^2.4.1",
55
+ "rollup": "^4.29.1",
55
56
  "rollup-plugin-minify-html-literals": "^1.2.6",
56
57
  "rollup-plugin-summary": "^2.0.0",
57
58
  "rollup-plugin-uglify": "^6.0.4",
@@ -108,5 +109,5 @@
108
109
  "README.md",
109
110
  "LICENSE"
110
111
  ],
111
- "gitHead": "cb4798e2a22a7e6b2eed58b8fc2d9fdddc875911"
112
+ "gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
112
113
  }