@digital-realty/ix-select 1.2.16 → 1.3.1
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.
- package/dist/ix-select.min.js +93 -10
- package/package.json +12 -21
package/dist/ix-select.min.js
CHANGED
|
@@ -1,16 +1,81 @@
|
|
|
1
|
-
import{LitElement,html,nothing,css,isServer}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.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
|
|
1
|
+
import{LitElement as e,html as t,nothing as i,css as s,isServer as o}from"lit";import{__decorate as l}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{mixinElementInternals as n}from"@material/web/labs/behaviors/element-internals.js";import{DEFAULT_TYPEAHEAD_BUFFER_TIME as r}from"@material/web/menu/internal/menu.js";import"@material/web/select/filled-select.js";import"@material/web/select/outlined-select.js";import{property as a,query as d,queryAssignedElements as h,queryAssignedNodes as p,state as c}from"lit/decorators.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{literal as m,html as y}from"lit/static-html.js";import{styles as g}from"@material/web/menu/internal/menuitem/menu-item-styles.js";import"@material/web/ripple/ripple.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/labs/item/item.js";import{classMap as v}from"lit/directives/class-map.js";import{mixinDelegatesAria as b}from"@material/web/internal/aria/delegate.js";import{MenuItemController as x}from"@material/web/menu/internal/controllers/menuItemController.js";import{AriaForwardMixin as f}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as w}from"@open-wc/lit-helpers";
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2023 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
6
|
+
*/class E{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;const e=this.getHeadlineElements(),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 x(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(new Event("request-selection",{bubbles:!0,composed:!0})):this.host.dispatchEvent(new Event("request-deselection",{bubbles:!0,composed:!0}))),this.lastSelected=this.host.selected,this.firstUpdate=!1}}
|
|
7
|
+
/**
|
|
8
|
+
* @license
|
|
9
|
+
* Copyright 2023 Google LLC
|
|
10
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
11
|
+
*/const $=b(e);class T extends ${constructor(){super(...arguments),this.disabled=!1,this.isMenuItem=!0,this.selected=!1,this.value="",this.type="option",this.selectOptionController=new E(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(t`
|
|
12
|
+
<md-item>
|
|
13
|
+
<div slot="container">
|
|
14
|
+
${this.renderRipple()} ${this.renderFocusRing()}
|
|
15
|
+
</div>
|
|
16
|
+
<slot name="start" slot="start"></slot>
|
|
17
|
+
<slot name="end" slot="end"></slot>
|
|
18
|
+
${this.renderBody()}
|
|
19
|
+
</md-item>
|
|
20
|
+
`)}renderListItem(e){return t`
|
|
21
|
+
<li
|
|
22
|
+
id="item"
|
|
23
|
+
tabindex=${this.disabled?-1:0}
|
|
24
|
+
role=${this.selectOptionController.role}
|
|
25
|
+
aria-label=${this.ariaLabel||i}
|
|
26
|
+
aria-selected=${this.ariaSelected||i}
|
|
27
|
+
aria-checked=${this.ariaChecked||i}
|
|
28
|
+
aria-expanded=${this.ariaExpanded||i}
|
|
29
|
+
aria-haspopup=${this.ariaHasPopup||i}
|
|
30
|
+
class="list-item ${v(this.getRenderClasses())}"
|
|
31
|
+
@click=${this.selectOptionController.onClick}
|
|
32
|
+
@keydown=${this.selectOptionController.onKeydown}
|
|
33
|
+
>
|
|
34
|
+
${e}
|
|
35
|
+
</li>
|
|
36
|
+
`}renderRipple(){return t` <md-ripple
|
|
37
|
+
part="ripple"
|
|
38
|
+
for="item"
|
|
39
|
+
?disabled=${this.disabled}
|
|
40
|
+
></md-ripple>`}renderFocusRing(){return t` <md-focus-ring
|
|
41
|
+
part="focus-ring"
|
|
42
|
+
for="item"
|
|
43
|
+
inward
|
|
44
|
+
></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return t`
|
|
45
|
+
<slot></slot>
|
|
46
|
+
<slot name="overline" slot="overline"></slot>
|
|
47
|
+
<slot name="headline" slot="headline"></slot>
|
|
48
|
+
<slot name="supporting-text" slot="supporting-text"></slot>
|
|
49
|
+
<slot
|
|
50
|
+
name="trailing-supporting-text"
|
|
51
|
+
slot="trailing-supporting-text"
|
|
52
|
+
></slot>
|
|
53
|
+
`}focus(){var e;null===(e=this.listItemRoot)||void 0===e||e.focus()}}T.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},l([a({type:Boolean,reflect:!0})],T.prototype,"disabled",void 0),l([a({type:Boolean,attribute:"md-menu-item",reflect:!0})],T.prototype,"isMenuItem",void 0),l([a({type:Boolean})],T.prototype,"selected",void 0),l([a()],T.prototype,"value",void 0),l([d(".list-item")],T.prototype,"listItemRoot",void 0),l([h({slot:"headline"})],T.prototype,"headlineElements",void 0),l([h({slot:"supporting-text"})],T.prototype,"supportingTextElements",void 0),l([p({slot:""})],T.prototype,"defaultElements",void 0),l([a({attribute:"typeahead-text"})],T.prototype,"typeaheadText",null),l([a({attribute:"display-text"})],T.prototype,"displayText",null);class C extends T{}var I;C.styles=[g,s`
|
|
54
|
+
ix-icon {
|
|
55
|
+
font-size: 1.5rem;
|
|
56
|
+
display: block;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[slot='end'] {
|
|
60
|
+
margin-right: 2rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[slot='start'] {
|
|
64
|
+
margin-right: -0.4rem;
|
|
65
|
+
}
|
|
66
|
+
`],window.customElements.define("ix-select-option",C);const R=Symbol("value"),B=f(n(e));class k extends B{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.menuBelow=!1,this.displayText="",this.leadingIcon="",this.trailingIcon="",this.menuPositioning="absolute",this.typeaheadDelay=r,this.selectedIndex=-1,this.nativeError=!1,this.nativeErrorText="",this.internals=this.attachInternals(),this.customValidationMessage="",this[I]="",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"))&&void 0!==e?e:""}set name(e){this.setAttribute("name",e)}get validity(){return this.syncValidity(),this.internals.validity}get value(){return this[R]=this.component.value,this[R]}set value(e){o||(this.component.value=e)}get validationMessage(){return this.syncValidity(),this.internals.validationMessage}truncateLabel(){var e,t;const i=null===(e=this.component.shadowRoot)||void 0===e?void 0:e.getElementById("label");if(!i)return;const s=null===(t=i.parentElement)||void 0===t?void 0:t.getBoundingClientRect().width;s&&(s<2*this.truncateLabelBy||(i.style.setProperty("max-width",s-this.truncateLabelBy+"px"),i.style.setProperty("overflow","hidden"),i.style.setProperty("text-overflow","ellipsis"),i.style.setProperty("white-space","nowrap")))}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity(),this.truncateLabel()}setMenuSize(){var e,t,i,s;const o=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".select"),l=null===(s=null===(i=null===(t=null==o?void 0:o.shadowRoot)||void 0===t?void 0:t.querySelector("#listbox"))||void 0===i?void 0:i.shadowRoot)||void 0===s?void 0:s.querySelector(".menu");if(l.style)if(l.style.zIndex="102",this.menuBelow){const e=null==o?void 0:o.getBoundingClientRect(),t=window.innerHeight-(e.top+e.height);l.style.maxHeight=.8*t+"px",l.style.insetBlockEnd="initial",l.style.maxWidth=`${this.component.offsetWidth}px`}else l.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(){const 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(){const 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,t;null===(t=null===(e=this.component.shadowRoot)||void 0===e?void 0:e.querySelector(".field"))||void 0===t||t.focus()}onBlur(e){const 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(),!o&&this.wideMenu&&window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),!o&&this.wideMenu&&window.removeEventListener("resize",this.handleResize)}render(){const e=this.filled?m`md-filled-select`:m`md-outlined-select`,s=this.label||this.ariaLabel;return y`<${e}
|
|
2
67
|
?disabled=${this.disabled}
|
|
3
68
|
?quick=${this.quick}
|
|
4
69
|
?error=${this.hasError}
|
|
5
70
|
?required=${this.required}
|
|
6
|
-
?has-leading-icon=${
|
|
7
|
-
aria-label=${
|
|
8
|
-
tabindex=${
|
|
71
|
+
?has-leading-icon=${this.leadingIcon.length>0}
|
|
72
|
+
aria-label=${s||i}
|
|
73
|
+
tabindex=${u(this.disabled?void 0:"0")}
|
|
9
74
|
menu-positioning=${this.menuPositioning}
|
|
10
75
|
typeahead-delay=${this.typeaheadDelay}
|
|
11
76
|
supporting-text=${this.supportingText}
|
|
12
77
|
error-text=${this.getErrorText()}
|
|
13
|
-
selected-index=${
|
|
78
|
+
selected-index=${u(-1===this.selectedIndex?void 0:this.selectedIndex)}
|
|
14
79
|
display-text=${this.displayText}
|
|
15
80
|
label=${this.label}
|
|
16
81
|
name=${this.name}
|
|
@@ -21,12 +86,30 @@ import{LitElement,html,nothing,css,isServer}from"lit";import{__decorate}from"tsl
|
|
|
21
86
|
style="min-width:${this.minWidth}px"
|
|
22
87
|
@focus=${this.focus}
|
|
23
88
|
@blur=${this.onBlur}
|
|
24
|
-
${
|
|
89
|
+
${w(this.ariaAttributes)}
|
|
25
90
|
>
|
|
26
91
|
<slot></slot>
|
|
27
|
-
${this.leadingIcon?
|
|
28
|
-
${this.trailingIcon?
|
|
92
|
+
${this.leadingIcon?t`<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`:i}
|
|
93
|
+
${this.trailingIcon?t`<ix-icon slot="trailing-icon"
|
|
29
94
|
>${this.trailingIcon}</ix-icon
|
|
30
|
-
>`:
|
|
95
|
+
>`:i}
|
|
31
96
|
<slot slot="aria-describedby" name="aria-describedby"></slot>
|
|
32
|
-
</${e}>`}}
|
|
97
|
+
</${e}>`}}I=R,k.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},k.formAssociated=!0,l([d(".select")],k.prototype,"component",void 0),l([a({type:Number})],k.prototype,"minWidth",void 0),l([a({type:Boolean,reflect:!0,attribute:"wide-menu"})],k.prototype,"wideMenu",void 0),l([a({type:Number})],k.prototype,"truncateLabelBy",void 0),l([a({type:Boolean,reflect:!0})],k.prototype,"filled",void 0),l([a()],k.prototype,"label",void 0),l([a({type:Boolean})],k.prototype,"quick",void 0),l([a({type:Boolean})],k.prototype,"required",void 0),l([a({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),l([a({type:String,attribute:"error-text"})],k.prototype,"errorText",void 0),l([a({type:String,attribute:"supporting-text"})],k.prototype,"supportingText",void 0),l([a({type:Boolean,reflect:!0})],k.prototype,"error",void 0),l([a({type:Boolean,attribute:"menu-below"})],k.prototype,"menuBelow",void 0),l([a({type:String,attribute:"display-text"})],k.prototype,"displayText",void 0),l([a({attribute:"leading-icon",reflect:!0})],k.prototype,"leadingIcon",void 0),l([a({attribute:"trailing-icon",reflect:!0})],k.prototype,"trailingIcon",void 0),l([a({attribute:"menu-positioning"})],k.prototype,"menuPositioning",void 0),l([a({type:Number,attribute:"typeahead-delay"})],k.prototype,"typeaheadDelay",void 0),l([a({type:Number,attribute:"selected-index"})],k.prototype,"selectedIndex",void 0),l([c()],k.prototype,"nativeError",void 0),l([c()],k.prototype,"nativeErrorText",void 0);class M extends k{}M.styles=s`
|
|
98
|
+
:host([disabled]) {
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
}
|
|
101
|
+
:host([error]) {
|
|
102
|
+
--md-outlined-select-text-field-outline-width: 2px;
|
|
103
|
+
}
|
|
104
|
+
.select {
|
|
105
|
+
display: block;
|
|
106
|
+
}
|
|
107
|
+
ix-icon {
|
|
108
|
+
height: var(--ix-select-leading-icon-height, 1.5rem);
|
|
109
|
+
color: var(
|
|
110
|
+
--ix-select-leading-icon-color,
|
|
111
|
+
var(--clr-graphics-fill, #09224199)
|
|
112
|
+
);
|
|
113
|
+
margin-inline-start: var(--ix-select-leading-icon-inset);
|
|
114
|
+
}
|
|
115
|
+
`,window.customElements.define("ix-select",M);export{M as IxSelectStyled};
|
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.
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,16 +27,14 @@
|
|
|
27
27
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
28
28
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
29
29
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
30
|
-
"lint": "eslint --ext .ts,.html .
|
|
31
|
-
"format": "eslint --ext .ts,.html . --fix
|
|
30
|
+
"lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
31
|
+
"format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
32
32
|
"test": "tsc && wtr --coverage",
|
|
33
|
-
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
34
|
-
"storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
|
|
35
|
-
"storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
|
|
33
|
+
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
36
34
|
},
|
|
37
35
|
"dependencies": {
|
|
38
|
-
"@digital-realty/ix-icon": "^1.
|
|
39
|
-
"@digital-realty/ix-shared-fns": "^1.
|
|
36
|
+
"@digital-realty/ix-icon": "^1.3.1",
|
|
37
|
+
"@digital-realty/ix-shared-fns": "^1.1.1",
|
|
40
38
|
"@lit/react": "^1.0.2",
|
|
41
39
|
"@material/web": "2.4.0",
|
|
42
40
|
"@open-wc/lit-helpers": "^0.7.0",
|
|
@@ -45,33 +43,26 @@
|
|
|
45
43
|
},
|
|
46
44
|
"devDependencies": {
|
|
47
45
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
48
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
49
46
|
"@open-wc/testing": "^3.1.6",
|
|
50
|
-
"@
|
|
51
|
-
"@typescript-eslint/
|
|
47
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
48
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
49
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
52
50
|
"@web/dev-server": "^0.4.6",
|
|
53
|
-
"@web/dev-server-storybook": "^2.0.3",
|
|
54
51
|
"@web/test-runner": "^0.20.2",
|
|
55
|
-
"concurrently": "^9.1
|
|
56
|
-
"eslint": "^
|
|
52
|
+
"concurrently": "^9.2.1",
|
|
53
|
+
"eslint": "^9.39.4",
|
|
57
54
|
"eslint-config-prettier": "^8.3.0",
|
|
58
55
|
"husky": "^4.3.8",
|
|
59
56
|
"lint-staged": "^10.5.4",
|
|
60
57
|
"prettier": "^2.4.1",
|
|
61
58
|
"rollup": "^4.29.1",
|
|
62
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
63
59
|
"rollup-plugin-summary": "^2.0.0",
|
|
64
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
65
60
|
"tslib": "^2.3.1",
|
|
66
61
|
"typescript": "^4.5.2"
|
|
67
62
|
},
|
|
68
63
|
"customElements": "custom-elements.json",
|
|
69
64
|
"eslintConfig": {
|
|
70
65
|
"parser": "@typescript-eslint/parser",
|
|
71
|
-
"extends": [
|
|
72
|
-
"@open-wc",
|
|
73
|
-
"prettier"
|
|
74
|
-
],
|
|
75
66
|
"plugins": [
|
|
76
67
|
"@typescript-eslint"
|
|
77
68
|
],
|
|
@@ -115,5 +106,5 @@
|
|
|
115
106
|
"README.md",
|
|
116
107
|
"LICENSE"
|
|
117
108
|
],
|
|
118
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
119
110
|
}
|