@digital-realty/ix-filter-select 1.2.9 → 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-filter-select.min.js +155 -3
- package/package.json +13 -19
|
@@ -1,5 +1,157 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,nothing,html}from"lit";import{query,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{mixinDelegatesAria}from"@material/web/internal/aria/delegate.js";import{repeat}from"lit/directives/repeat.js";import{ifDefined}from"lit-html/directives/if-defined.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";import"@digital-realty/ix-button";import{mixinOnReportValidity,onReportValidity}from"@material/web/labs/behaviors/on-report-validity.js";import{mixinConstraintValidation,createValidator,getValidityAnchor}from"@material/web/labs/behaviors/constraint-validation.js";import{mixinFormAssociated,getFormValue}from"@material/web/labs/behaviors/form-associated.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import{TextFieldValidator}from"@material/web/labs/behaviors/validators/text-field-validator.js";
|
|
1
|
+
import{__decorate as t}from"tslib";import{css as e,LitElement as i,nothing as o,html as s}from"lit";import{query as r,property as n,state as l}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{mixinDelegatesAria as d}from"@material/web/internal/aria/delegate.js";import{repeat as p}from"lit/directives/repeat.js";import{ifDefined as u}from"lit-html/directives/if-defined.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";import"@digital-realty/ix-button";import{mixinOnReportValidity as h,onReportValidity as c}from"@material/web/labs/behaviors/on-report-validity.js";import{mixinConstraintValidation as m,createValidator as v,getValidityAnchor as f}from"@material/web/labs/behaviors/constraint-validation.js";import{mixinFormAssociated as b,getFormValue as y}from"@material/web/labs/behaviors/form-associated.js";import{mixinElementInternals as x}from"@material/web/labs/behaviors/element-internals.js";import{TextFieldValidator as g}from"@material/web/labs/behaviors/validators/text-field-validator.js";const O=e`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
}
|
|
5
|
+
:host([disabled]) {
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
}
|
|
8
|
+
ix-field {
|
|
9
|
+
display: block;
|
|
10
|
+
}
|
|
11
|
+
ix-field label {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
.flex-fill {
|
|
15
|
+
flex: 1;
|
|
16
|
+
}
|
|
17
|
+
.menu {
|
|
18
|
+
position: relative;
|
|
19
|
+
}
|
|
20
|
+
.menu label,
|
|
21
|
+
.menu input {
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
24
|
+
input {
|
|
25
|
+
border: none;
|
|
26
|
+
background: transparent;
|
|
27
|
+
outline: none;
|
|
28
|
+
min-width: 3rem;
|
|
29
|
+
}
|
|
30
|
+
ix-chip-set {
|
|
31
|
+
min-height: var(--_content-line-height);
|
|
32
|
+
}
|
|
33
|
+
ix-menu {
|
|
34
|
+
--md-menu-container-color: var(--md-sys-color-surface-variant, #fff);
|
|
35
|
+
max-height: var(--ix-filter-select-max-height, 500px);
|
|
36
|
+
}
|
|
37
|
+
ix-menu-item {
|
|
38
|
+
position: relative;
|
|
39
|
+
}
|
|
40
|
+
ix-menu-item label {
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 0;
|
|
45
|
+
left: 0;
|
|
46
|
+
right: 0;
|
|
47
|
+
bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
ix-menu-item label input[type='checkbox'] {
|
|
50
|
+
margin: 0 1rem 2px;
|
|
51
|
+
}
|
|
52
|
+
ix-menu-item.selected {
|
|
53
|
+
background: var(
|
|
54
|
+
--md-menu-item-selected-container-color,
|
|
55
|
+
--md-sys-color-tertiary-container
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
ix-icon-button {
|
|
59
|
+
--md-icon-button-icon-color: var(--md-sys-text-color-secondary);
|
|
60
|
+
--md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);
|
|
61
|
+
--md-icon-button-hover-state-layer-color: var(
|
|
2
62
|
--md-sys-text-color-secondary
|
|
3
|
-
)
|
|
63
|
+
);
|
|
64
|
+
--md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);
|
|
65
|
+
--md-icon-button-pressed-state-layer-color: var(
|
|
4
66
|
--md-sys-text-color-secondary
|
|
5
|
-
)
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
.open-icon {
|
|
70
|
+
margin-right: 0.5rem;
|
|
71
|
+
}
|
|
72
|
+
.filter-select {
|
|
73
|
+
position: relative;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.filter-select-footer-section {
|
|
77
|
+
display: flex;
|
|
78
|
+
justify-content: space-between;
|
|
79
|
+
padding: 0.5rem 1rem;
|
|
80
|
+
}
|
|
81
|
+
`,w=h(m(b(d(x(i)))));class $ extends w{constructor(){super(...arguments),this.options=[],this.value="",this.label="",this.errorText="Invalid error text",this.noFilteredOptions="No options",this.supportingText="",this.error=!1,this.tabIndex=0,this.required=!1,this.isViewMoreButtonVisible=!1,this.isViewMoreButtonLoading=!1,this.viewMoreButtonLabel="View More",this.disableMenu=!1,this.filteredOptions=[],this.selectedItem=void 0,this.filterValue="",this.menuOpen=!1,this.dirty=!1,this.focused=!1,this.nativeError=!1,this.nativeErrorText="",this.menuOpening=!1,this.handleMenuOpening=()=>{this.menuOpening=!0,this.menuOpen=!0},this.menuOpened=()=>{this.menuOpening=!1},this.setMenuStyles=()=>{var t,e;const i=null===(e=null===(t=this.menu)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector(".menu");i&&(i.style.width="100%",i.style.height="auto")},this.showMenu=()=>{this.menu.show(),this.setMenuStyles()},this.handleMenuClosed=()=>{this.menuOpening=!1,this.menuOpen=!1},this.handleInput=t=>{const{value:e}=t.target;this.dirty=!0,this.filterValue=e,this.value=e,this.filterOptions()},this.selectItem=t=>{t&&(this.selectedItem=t,this.value=t.value,this.filterValue=t.label,this.filteredOptions=this.options,(this.menuOpen||this.menuOpening)&&(this.menuOpen=!1),this.dispatchEvent(new CustomEvent("select-filter-select",{detail:{value:t.value,label:t.label},bubbles:!0,composed:!0})))},this.toggleOpen=t=>{t.stopPropagation(),this.menu.open?this.menuOpen=!1:(this.filterOptions(),this.menuOpen=!0)}}static get styles(){return[O]}setMenuOpen(t){this.menuOpen=t}get hasError(){return!this.dirty&&(this.error||this.nativeError)}getErrorText(){return this.error?this.errorText:this.nativeErrorText}getInput(){return this.input||(this.connectedCallback(),this.scheduleUpdate()),this.isUpdatePending&&this.scheduleUpdate(),this.input}firstUpdated(){this.filterOptions()}updated(t){if(t.has("disabled")&&(this.tabIndex=this.disabled?-1:0),t.has("options")&&(this.filteredOptions=this.options,!this.selectedItem)){const t=this.options.find(({value:t})=>t===this.value);this.selectItem(t)}t.has("menuOpen")&&(this.menuOpen?this.disableMenu?this.menuOpen=!1:this.showMenu():this.menu.close())}filterOptions(){const t=this.filterValue.trim().toLowerCase()||this.value.trim().toLocaleLowerCase();if(!t)return void(this.filteredOptions=this.options);const e=this.filterFunctionGenerator?this.filterFunctionGenerator(t):e=>e.label.toLowerCase().includes(t);this.filteredOptions=this.options.filter(e)}clear(){this.value="",this.filterValue="",this.selectedItem=void 0,this.focus(),this.dispatchEvent(new CustomEvent("clear-filter-select",{bubbles:!0,composed:!0}))}formResetCallback(){this.reset()}reset(){this.value="";const t=this.getAttribute("value"),e=this.options.find(({value:e})=>e===t);this.selectItem(e),this.dirty=!1,this.nativeError=!1,this.nativeErrorText=""}attributeChangedCallback(t,e,i){"value"===t&&this.dirty||super.attributeChangedCallback(t,e,i)}[v](){return new g(()=>({state:this,renderedControl:this.input}))}[f](){return this.input}[c](t){null==t||t.preventDefault(),this.nativeError=!!t,this.nativeErrorText=this.validationMessage}[y](){return this.value}formStateRestoreCallback(t){this.value=t}handleFocusChange(){var t,e;this.focused=null!==(e=null===(t=this.input)||void 0===t?void 0:t.matches(":focus"))&&void 0!==e&&e,this.menuOpen||this.menuOpening||this.focused&&(this.menuOpen=!0)}focus(){this.getInput().focus()}renderViewMoreButton(){return this.isViewMoreButtonVisible?s` <div class="filter-select-footer-section">
|
|
82
|
+
<ix-button
|
|
83
|
+
type="button"
|
|
84
|
+
appearance="text"
|
|
85
|
+
?disabled=${this.isViewMoreButtonLoading}
|
|
86
|
+
.submitting=${this.isViewMoreButtonLoading}
|
|
87
|
+
@click=${()=>this.onViewMoreButtonClick()}
|
|
88
|
+
>
|
|
89
|
+
<span class="button-label">${this.viewMoreButtonLabel}</span>
|
|
90
|
+
</ix-button>
|
|
91
|
+
</div>`:o}render(){var t;const e={disabled:this.disabled,error:!this.disabled&&this.hasError};return s`
|
|
92
|
+
<div class="filter-select">
|
|
93
|
+
<ix-field
|
|
94
|
+
class="${a(e)}"
|
|
95
|
+
id="anchor"
|
|
96
|
+
?focused=${this.focused}
|
|
97
|
+
?disabled=${this.disabled}
|
|
98
|
+
?required=${this.required}
|
|
99
|
+
?error=${this.hasError}
|
|
100
|
+
error-text=${this.menuOpen||this.menuOpening?o:this.getErrorText()}
|
|
101
|
+
label=${this.label}
|
|
102
|
+
@click=${()=>this.disabled?null:this.input.focus()}
|
|
103
|
+
supporting-text=${this.supportingText}
|
|
104
|
+
?populated=${this.filterValue.length||this.value.length}
|
|
105
|
+
>
|
|
106
|
+
<input
|
|
107
|
+
id="filter"
|
|
108
|
+
aria-invalid=${this.hasError}
|
|
109
|
+
@input=${this.handleInput}
|
|
110
|
+
.value=${this.filterValue}
|
|
111
|
+
class="flex-fill input"
|
|
112
|
+
type="text"
|
|
113
|
+
?disabled=${this.disabled}
|
|
114
|
+
?required=${this.required}
|
|
115
|
+
@focus=${this.handleFocusChange}
|
|
116
|
+
@blur=${this.handleFocusChange}
|
|
117
|
+
autocomplete="off"
|
|
118
|
+
placeholder=${u(this.placeholder)}
|
|
119
|
+
/>
|
|
120
|
+
<slot name="end" slot="end">
|
|
121
|
+
${this.value.length?s`<ix-icon-button
|
|
122
|
+
@click=${this.clear}
|
|
123
|
+
icon="close"
|
|
124
|
+
aria-label="clear"
|
|
125
|
+
></ix-icon-button>`:o}
|
|
126
|
+
<ix-icon-button
|
|
127
|
+
@click=${this.toggleOpen}
|
|
128
|
+
class="open-icon"
|
|
129
|
+
icon=${"arrow_drop_"+(this.menuOpen?"up":"down")}
|
|
130
|
+
aria-label="options"
|
|
131
|
+
></ix-icon-button>
|
|
132
|
+
</slot>
|
|
133
|
+
</ix-field>
|
|
134
|
+
<div class="menu">
|
|
135
|
+
<ix-menu
|
|
136
|
+
anchor="anchor"
|
|
137
|
+
@opening=${this.handleMenuOpening}
|
|
138
|
+
@opened=${this.menuOpened}
|
|
139
|
+
@closed=${this.handleMenuClosed}
|
|
140
|
+
default-focus="none"
|
|
141
|
+
skip-restore-focus
|
|
142
|
+
anchor-corner="start-start"
|
|
143
|
+
surface-corner="start-start"
|
|
144
|
+
y-offset=${this.supportingText?-parseFloat(getComputedStyle(document.documentElement).fontSize):0}
|
|
145
|
+
>
|
|
146
|
+
${(null===(t=this.filteredOptions)||void 0===t?void 0:t.length)?p(this.filteredOptions,(t,e)=>`${t.value}-${e}`,t=>s`<ix-menu-item
|
|
147
|
+
@click=${()=>{this.selectItem(t)}}
|
|
148
|
+
@keydown=${e=>{["Space","Enter"].includes(e.key)&&this.selectItem(t)}}
|
|
149
|
+
class=${this.value===t.value?"selected":""}
|
|
150
|
+
>
|
|
151
|
+
<div slot="headline">${t.label}</div>
|
|
152
|
+
</ix-menu-item>`):s`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}
|
|
153
|
+
${this.renderViewMoreButton()}
|
|
154
|
+
</ix-menu>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
`}}$.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},t([r("ix-menu")],$.prototype,"menu",void 0),t([r("input")],$.prototype,"input",void 0),t([r(".field")],$.prototype,"field",void 0),t([n({type:Array})],$.prototype,"options",void 0),t([n({type:String})],$.prototype,"value",void 0),t([n({type:String})],$.prototype,"label",void 0),t([n({type:String,attribute:"error-text"})],$.prototype,"errorText",void 0),t([n({type:String,attribute:"no-options-text"})],$.prototype,"noFilteredOptions",void 0),t([n({attribute:"supporting-text"})],$.prototype,"supportingText",void 0),t([n({type:Boolean,reflect:!0})],$.prototype,"error",void 0),t([n({type:Number,reflect:!0})],$.prototype,"tabIndex",void 0),t([n({type:Boolean,reflect:!0})],$.prototype,"required",void 0),t([n({type:Function})],$.prototype,"onViewMoreButtonClick",void 0),t([n({type:Boolean})],$.prototype,"isViewMoreButtonVisible",void 0),t([n({type:Boolean})],$.prototype,"isViewMoreButtonLoading",void 0),t([n({type:String})],$.prototype,"viewMoreButtonLabel",void 0),t([n({type:String})],$.prototype,"placeholder",void 0),t([n({type:Boolean})],$.prototype,"disableMenu",void 0),t([n()],$.prototype,"filterFunctionGenerator",void 0),t([l()],$.prototype,"filteredOptions",void 0),t([l()],$.prototype,"selectedItem",void 0),t([l()],$.prototype,"filterValue",void 0),t([l()],$.prototype,"menuOpen",void 0),t([l()],$.prototype,"dirty",void 0),t([l()],$.prototype,"focused",void 0),t([l()],$.prototype,"nativeError",void 0),t([l()],$.prototype,"nativeErrorText",void 0),t([l()],$.prototype,"menuOpening",void 0),window.customElements.define("ix-filter-select",$);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-filter-select following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -20,48 +20,42 @@
|
|
|
20
20
|
"start": "npm run build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
21
21
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
22
22
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
23
|
-
"lint": "eslint --ext .ts,.html .
|
|
24
|
-
"format": "eslint --ext .ts,.html . --fix
|
|
23
|
+
"lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
24
|
+
"format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
25
25
|
"test": "tsc && wtr --coverage",
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-button": "^3.
|
|
30
|
-
"@digital-realty/ix-field": "^1.
|
|
31
|
-
"@digital-realty/ix-icon-button": "^1.
|
|
32
|
-
"@digital-realty/ix-menu": "^1.
|
|
29
|
+
"@digital-realty/ix-button": "^3.5.1",
|
|
30
|
+
"@digital-realty/ix-field": "^1.3.1",
|
|
31
|
+
"@digital-realty/ix-icon-button": "^1.3.1",
|
|
32
|
+
"@digital-realty/ix-menu": "^1.3.1",
|
|
33
33
|
"@material/web": "2.4.0",
|
|
34
34
|
"lit": "^3.2.1",
|
|
35
35
|
"lit-html": "^3.3.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
39
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
40
39
|
"@open-wc/testing": "^3.1.6",
|
|
41
|
-
"@
|
|
42
|
-
"@typescript-eslint/
|
|
40
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
41
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
42
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
43
43
|
"@web/dev-server": "^0.4.6",
|
|
44
44
|
"@web/test-runner": "^0.20.2",
|
|
45
|
-
"concurrently": "^9.1
|
|
46
|
-
"eslint": "^
|
|
45
|
+
"concurrently": "^9.2.1",
|
|
46
|
+
"eslint": "^9.39.4",
|
|
47
47
|
"eslint-config-prettier": "^8.3.0",
|
|
48
48
|
"husky": "^4.3.8",
|
|
49
49
|
"lint-staged": "^10.5.4",
|
|
50
50
|
"prettier": "^2.4.1",
|
|
51
51
|
"rollup": "^4.29.1",
|
|
52
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
53
52
|
"rollup-plugin-summary": "^2.0.0",
|
|
54
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
55
53
|
"tslib": "^2.3.1",
|
|
56
54
|
"typescript": "^4.5.2"
|
|
57
55
|
},
|
|
58
56
|
"customElements": "custom-elements.json",
|
|
59
57
|
"eslintConfig": {
|
|
60
58
|
"parser": "@typescript-eslint/parser",
|
|
61
|
-
"extends": [
|
|
62
|
-
"@open-wc",
|
|
63
|
-
"prettier"
|
|
64
|
-
],
|
|
65
59
|
"plugins": [
|
|
66
60
|
"@typescript-eslint"
|
|
67
61
|
],
|
|
@@ -102,5 +96,5 @@
|
|
|
102
96
|
"README.md",
|
|
103
97
|
"LICENSE"
|
|
104
98
|
],
|
|
105
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
106
100
|
}
|