@prioticket/design-system-web 1.5.1 → 1.6.0
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": {
|
|
3
3
|
"name": "@prioticket/design-system-web",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.6.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"installation": "npm install @prioticket/design-system-web"
|
|
7
7
|
},
|
|
8
|
-
"generatedAt": "2026-02-
|
|
8
|
+
"generatedAt": "2026-02-16T14:17:46.720Z",
|
|
9
9
|
"components": {
|
|
10
10
|
"pd-box": {
|
|
11
11
|
"tagName": "pd-box",
|
package/custom-elements.json
CHANGED
|
@@ -5221,6 +5221,16 @@
|
|
|
5221
5221
|
"privacy": "private",
|
|
5222
5222
|
"default": "null"
|
|
5223
5223
|
},
|
|
5224
|
+
{
|
|
5225
|
+
"kind": "field",
|
|
5226
|
+
"name": "useCustomDropdown",
|
|
5227
|
+
"type": {
|
|
5228
|
+
"text": "boolean"
|
|
5229
|
+
},
|
|
5230
|
+
"privacy": "private",
|
|
5231
|
+
"description": "Whether to use the custom dropdown (overlay) instead of the native MD select",
|
|
5232
|
+
"readonly": true
|
|
5233
|
+
},
|
|
5224
5234
|
{
|
|
5225
5235
|
"kind": "method",
|
|
5226
5236
|
"name": "getOptionLabel",
|
|
@@ -5335,7 +5345,7 @@
|
|
|
5335
5345
|
},
|
|
5336
5346
|
{
|
|
5337
5347
|
"kind": "method",
|
|
5338
|
-
"name": "
|
|
5348
|
+
"name": "renderCustomSelect",
|
|
5339
5349
|
"privacy": "private"
|
|
5340
5350
|
},
|
|
5341
5351
|
{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
<div class="dropdown" role="listbox" aria-multiselectable
|
|
3
|
-
${this.searchable?
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("lit/decorators.js");require("@material/web/select/filled-select.js");require("@material/web/select/outlined-select.js");require("@material/web/select/select-option.js");require("@material/web/icon/icon.js");require("@material/web/checkbox/checkbox.js");require("./pd-chip.cjs.js");var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,o=(a,e,t,i)=>{for(var l=i>1?void 0:i?p(e,t):e,n=a.length-1,d;n>=0;n--)(d=a[n])&&(l=(i?d(e,t,l):d(l))||l);return i&&l&&c(e,t,l),l};exports.PdSelect=class extends s.LitElement{constructor(){super(...arguments),this.variant="outlined",this.label="",this.value="",this.disabled=!1,this.required=!1,this.errorText="",this.error=!1,this.supportingText="",this.options=[],this.leadingIcon="",this.multiple=!1,this.showChips=!0,this.chipVariant="input",this.placeholder="",this.searchable=!1,this.isOpen=!1,this.searchQuery="",this.selectedValues=[],this.overlayEl=null,this.updateOverlayPosition=()=>{if(!this.overlayEl||!this.trigger)return;const e=this.trigger.getBoundingClientRect();this.overlayEl.style.left=`${e.left}px`,this.overlayEl.style.top=`${e.bottom+4}px`,this.overlayEl.style.width=`${e.width}px`},this.handleTriggerClick=e=>{this.disabled||(e.stopPropagation(),this.searchQuery="",this.isOpen=!this.isOpen)},this.handleClickOutside=e=>{if(!this.isOpen)return;const t=e.composedPath();t.includes(this)||this.overlayEl&&t.includes(this.overlayEl)||(this.isOpen=!1)},this.handleKeyDown=e=>{e.key==="Escape"&&(this.isOpen=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside),document.addEventListener("keydown",this.handleKeyDown),window.addEventListener("scroll",this.updateOverlayPosition,!0),window.addEventListener("resize",this.updateOverlayPosition)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleKeyDown),window.removeEventListener("scroll",this.updateOverlayPosition,!0),window.removeEventListener("resize",this.updateOverlayPosition),this.closeOverlay()}get useCustomDropdown(){return this.multiple||this.searchable}willUpdate(e){e.has("value")&&this.useCustomDropdown&&(this.selectedValues=Array.isArray(this.value)?[...this.value]:this.value?[this.value]:[]),e.has("isOpen")&&(this.isOpen?this.openOverlay():this.closeOverlay()),this.overlayEl&&(e.has("searchQuery")||e.has("selectedValues"))&&(s.render(this.renderDropdown(),this.overlayEl),e.has("selectedValues")&&this.updateComplete.then(()=>{requestAnimationFrame(()=>this.updateOverlayPosition())}))}getOptionLabel(e){return this.options.find(t=>t.value===e)?.label??e}get filteredOptions(){const e=this.searchQuery.trim().toLowerCase();return e?this.options.filter(t=>t.label.toLowerCase().includes(e)):this.options}openOverlay(){if(this.overlayEl||!this.trigger)return;const e=this.trigger.getBoundingClientRect(),t=document.createElement("div");t.style.position="fixed",t.style.left=`${e.left}px`,t.style.top=`${e.bottom+4}px`,t.style.width=`${e.width}px`,t.style.zIndex="10000";const i=document.createElement("style");i.textContent=exports.PdSelect.overlayStyles,t.appendChild(i),document.body.appendChild(t),this.overlayEl=t,s.render(this.renderDropdown(),t)}closeOverlay(){this.overlayEl&&(s.render(s.nothing,this.overlayEl),this.overlayEl.remove(),this.overlayEl=null)}handleOptionClick(e,t){if(t.stopPropagation(),this.multiple){if(this.selectedValues.includes(e))this.selectedValues=this.selectedValues.filter(i=>i!==e);else{if(this.maxSelections&&this.selectedValues.length>=this.maxSelections)return;this.selectedValues=[...this.selectedValues,e]}this.value=[...this.selectedValues]}else this.selectedValues=[e],this.value=e,this.isOpen=!1;this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleChipRemove(e,t){t.stopPropagation(),this.selectedValues=this.selectedValues.filter(i=>i!==e),this.value=[...this.selectedValues]}renderDropdown(){return s.html`
|
|
2
|
+
<div class="dropdown" role="listbox" aria-multiselectable=${this.multiple?"true":"false"}>
|
|
3
|
+
${this.searchable?s.html`
|
|
4
4
|
<div class="search">
|
|
5
5
|
<md-icon class="pd-icon">search</md-icon>
|
|
6
6
|
<input
|
|
@@ -9,30 +9,30 @@
|
|
|
9
9
|
@input=${e=>this.searchQuery=e.target.value}
|
|
10
10
|
/>
|
|
11
11
|
</div>
|
|
12
|
-
`:
|
|
12
|
+
`:s.nothing}
|
|
13
13
|
|
|
14
14
|
<div class="options">
|
|
15
|
-
${this.filteredOptions.map(e=>{const t=this.selectedValues.includes(e.value),i=e.disabled??!1;return
|
|
15
|
+
${this.filteredOptions.map(e=>{const t=this.selectedValues.includes(e.value),i=e.disabled??!1;return s.html`
|
|
16
16
|
<div
|
|
17
17
|
class="option"
|
|
18
18
|
data-selected=${t}
|
|
19
19
|
data-disabled=${i}
|
|
20
20
|
@click=${l=>!i&&this.handleOptionClick(e.value,l)}
|
|
21
21
|
>
|
|
22
|
-
|
|
22
|
+
${this.multiple?s.html`<md-checkbox ?checked=${t} ?disabled=${i}></md-checkbox>`:s.nothing}
|
|
23
23
|
<span>${e.label}</span>
|
|
24
24
|
</div>
|
|
25
25
|
`})}
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
|
-
`}
|
|
28
|
+
`}renderCustomSelect(){const e=this.selectedValues.length>0,t=e||this.isOpen;return s.html`
|
|
29
29
|
<div class="container">
|
|
30
30
|
<div class="wrap">
|
|
31
|
-
${this.label?
|
|
31
|
+
${this.label?s.html`
|
|
32
32
|
<label class="label" data-float=${t}>
|
|
33
|
-
${this.label}${this.required?
|
|
33
|
+
${this.label}${this.required?s.html`<span class="required">*</span>`:s.nothing}
|
|
34
34
|
</label>
|
|
35
|
-
`:
|
|
35
|
+
`:s.nothing}
|
|
36
36
|
|
|
37
37
|
<div
|
|
38
38
|
class="field"
|
|
@@ -41,19 +41,19 @@
|
|
|
41
41
|
role="combobox"
|
|
42
42
|
@click=${this.handleTriggerClick}
|
|
43
43
|
>
|
|
44
|
-
${this.leadingIcon?
|
|
44
|
+
${this.leadingIcon?s.html`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>`:s.nothing}
|
|
45
45
|
|
|
46
46
|
<div class="content">
|
|
47
|
-
${e?
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
47
|
+
${e?this.multiple?s.html`
|
|
48
|
+
<div class="chips">
|
|
49
|
+
${this.selectedValues.map(i=>s.html`
|
|
50
|
+
<pd-chip
|
|
51
|
+
label=${this.getOptionLabel(i)}
|
|
52
|
+
@chip-remove=${l=>this.handleChipRemove(i,l)}
|
|
53
|
+
></pd-chip>
|
|
54
|
+
`)}
|
|
55
|
+
</div>
|
|
56
|
+
`:s.html`<span class="summary">${this.getOptionLabel(this.selectedValues[0])}</span>`:s.html`<span class="placeholder">${this.placeholder}</span>`}
|
|
57
57
|
</div>
|
|
58
58
|
|
|
59
59
|
<md-icon class="pd-icon pd-icon--trailing" data-rotated=${this.isOpen}>
|
|
@@ -62,17 +62,17 @@
|
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
64
64
|
|
|
65
|
-
${this.supportingText?
|
|
65
|
+
${this.supportingText?s.html`<div class="supporting">${this.supportingText}</div>`:s.nothing}
|
|
66
66
|
</div>
|
|
67
|
-
`}handleSingleSelectChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleSingleSelectOpen(){this.trailingIcon?.classList.add("rotated")}handleSingleSelectClose(){this.trailingIcon?.classList.remove("rotated")}renderSingleSelect(){const e=
|
|
68
|
-
${this.leadingIcon?
|
|
67
|
+
`}handleSingleSelectChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleSingleSelectOpen(){this.trailingIcon?.classList.add("rotated")}handleSingleSelectClose(){this.trailingIcon?.classList.remove("rotated")}renderSingleSelect(){const e=s.html`
|
|
68
|
+
${this.leadingIcon?s.html`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>`:s.nothing}
|
|
69
69
|
<md-icon slot="trailing-icon" class="pd-icon">keyboard_arrow_down</md-icon>
|
|
70
|
-
${this.options.map(t=>
|
|
70
|
+
${this.options.map(t=>s.html`
|
|
71
71
|
<md-select-option .value=${t.value} ?disabled=${t.disabled}>
|
|
72
72
|
<div slot="headline">${t.label}</div>
|
|
73
73
|
</md-select-option>
|
|
74
74
|
`)}
|
|
75
|
-
`;return this.variant==="filled"?
|
|
75
|
+
`;return this.variant==="filled"?s.html`
|
|
76
76
|
<md-filled-select
|
|
77
77
|
.label=${this.label}
|
|
78
78
|
.value=${this.value}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
@opening=${this.handleSingleSelectOpen}
|
|
86
86
|
@closed=${this.handleSingleSelectClose}
|
|
87
87
|
>${e}</md-filled-select>
|
|
88
|
-
`:
|
|
88
|
+
`:s.html`
|
|
89
89
|
<md-outlined-select
|
|
90
90
|
.label=${this.label}
|
|
91
91
|
.value=${this.value}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
@opening=${this.handleSingleSelectOpen}
|
|
99
99
|
@closed=${this.handleSingleSelectClose}
|
|
100
100
|
>${e}</md-outlined-select>
|
|
101
|
-
`}render(){return this.
|
|
101
|
+
`}render(){return this.useCustomDropdown?this.renderCustomSelect():this.renderSingleSelect()}};exports.PdSelect.overlayStyles=`
|
|
102
102
|
.dropdown {
|
|
103
103
|
background: var(--md-sys-color-surface-container, #f3edf7);
|
|
104
104
|
border-radius: var(--md-sys-shape-corner-medium, 12px);
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
font-size: 24px;
|
|
174
174
|
color: var(--md-sys-color-on-surface-variant, #49454f);
|
|
175
175
|
}
|
|
176
|
-
`;exports.PdSelect.styles=
|
|
176
|
+
`;exports.PdSelect.styles=s.css`
|
|
177
177
|
:host {
|
|
178
178
|
display: inline-block;
|
|
179
179
|
width: 100%;
|
|
@@ -423,4 +423,4 @@
|
|
|
423
423
|
color: var(--md-sys-color-error);
|
|
424
424
|
margin-left: 2px;
|
|
425
425
|
}
|
|
426
|
-
`;o([
|
|
426
|
+
`;o([r.query("md-filled-select, md-outlined-select")],exports.PdSelect.prototype,"select",2);o([r.query('[slot="trailing-icon"]')],exports.PdSelect.prototype,"trailingIcon",2);o([r.query(".field")],exports.PdSelect.prototype,"trigger",2);o([r.property({type:String,reflect:!0})],exports.PdSelect.prototype,"variant",2);o([r.property({type:String})],exports.PdSelect.prototype,"label",2);o([r.property({type:String,reflect:!0})],exports.PdSelect.prototype,"value",2);o([r.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"disabled",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"required",2);o([r.property({type:String,attribute:"error-text"})],exports.PdSelect.prototype,"errorText",2);o([r.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"error",2);o([r.property({type:String,attribute:"supporting-text"})],exports.PdSelect.prototype,"supportingText",2);o([r.property({type:Array})],exports.PdSelect.prototype,"options",2);o([r.property({type:String,attribute:"leading-icon"})],exports.PdSelect.prototype,"leadingIcon",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"multiple",2);o([r.property({type:Number,attribute:"max-selections"})],exports.PdSelect.prototype,"maxSelections",2);o([r.property({type:Boolean,attribute:"show-chips"})],exports.PdSelect.prototype,"showChips",2);o([r.property({type:String,attribute:"chip-variant"})],exports.PdSelect.prototype,"chipVariant",2);o([r.property({type:String})],exports.PdSelect.prototype,"placeholder",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"searchable",2);o([r.state()],exports.PdSelect.prototype,"isOpen",2);o([r.state()],exports.PdSelect.prototype,"searchQuery",2);o([r.state()],exports.PdSelect.prototype,"selectedValues",2);exports.PdSelect=o([r.customElement("pd-select")],exports.PdSelect);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as y, LitElement as v, render as h, nothing as
|
|
1
|
+
import { css as y, LitElement as v, render as h, nothing as n, html as r } from "lit";
|
|
2
2
|
import { query as u, property as a, state as m, customElement as f } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/select/filled-select.js";
|
|
4
4
|
import "@material/web/select/outlined-select.js";
|
|
@@ -6,10 +6,10 @@ import "@material/web/select/select-option.js";
|
|
|
6
6
|
import "@material/web/icon/icon.js";
|
|
7
7
|
import "@material/web/checkbox/checkbox.js";
|
|
8
8
|
import "./pd-chip.es.js";
|
|
9
|
-
var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t,
|
|
10
|
-
for (var
|
|
11
|
-
(p = e[c]) && (
|
|
12
|
-
return l &&
|
|
9
|
+
var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, i, l) => {
|
|
10
|
+
for (var d = l > 1 ? void 0 : l ? b(t, i) : t, c = e.length - 1, p; c >= 0; c--)
|
|
11
|
+
(p = e[c]) && (d = (l ? p(t, i, d) : p(d)) || d);
|
|
12
|
+
return l && d && g(t, i, d), d;
|
|
13
13
|
};
|
|
14
14
|
let s = class extends v {
|
|
15
15
|
constructor() {
|
|
@@ -33,8 +33,12 @@ let s = class extends v {
|
|
|
33
33
|
disconnectedCallback() {
|
|
34
34
|
super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("scroll", this.updateOverlayPosition, !0), window.removeEventListener("resize", this.updateOverlayPosition), this.closeOverlay();
|
|
35
35
|
}
|
|
36
|
+
/** Whether to use the custom dropdown (overlay) instead of the native MD select */
|
|
37
|
+
get useCustomDropdown() {
|
|
38
|
+
return this.multiple || this.searchable;
|
|
39
|
+
}
|
|
36
40
|
willUpdate(e) {
|
|
37
|
-
e.has("value") && this.
|
|
41
|
+
e.has("value") && this.useCustomDropdown && (this.selectedValues = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : []), e.has("isOpen") && (this.isOpen ? this.openOverlay() : this.closeOverlay()), this.overlayEl && (e.has("searchQuery") || e.has("selectedValues")) && (h(this.renderDropdown(), this.overlayEl), e.has("selectedValues") && this.updateComplete.then(() => {
|
|
38
42
|
requestAnimationFrame(() => this.updateOverlayPosition());
|
|
39
43
|
}));
|
|
40
44
|
}
|
|
@@ -49,33 +53,37 @@ let s = class extends v {
|
|
|
49
53
|
if (this.overlayEl || !this.trigger) return;
|
|
50
54
|
const e = this.trigger.getBoundingClientRect(), t = document.createElement("div");
|
|
51
55
|
t.style.position = "fixed", t.style.left = `${e.left}px`, t.style.top = `${e.bottom + 4}px`, t.style.width = `${e.width}px`, t.style.zIndex = "10000";
|
|
52
|
-
const
|
|
53
|
-
|
|
56
|
+
const i = document.createElement("style");
|
|
57
|
+
i.textContent = s.overlayStyles, t.appendChild(i), document.body.appendChild(t), this.overlayEl = t, h(this.renderDropdown(), t);
|
|
54
58
|
}
|
|
55
59
|
closeOverlay() {
|
|
56
|
-
this.overlayEl && (h(
|
|
60
|
+
this.overlayEl && (h(n, this.overlayEl), this.overlayEl.remove(), this.overlayEl = null);
|
|
57
61
|
}
|
|
58
62
|
handleOptionClick(e, t) {
|
|
59
|
-
if (t.stopPropagation(), this.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
if (t.stopPropagation(), this.multiple) {
|
|
64
|
+
if (this.selectedValues.includes(e))
|
|
65
|
+
this.selectedValues = this.selectedValues.filter((i) => i !== e);
|
|
66
|
+
else {
|
|
67
|
+
if (this.maxSelections && this.selectedValues.length >= this.maxSelections) return;
|
|
68
|
+
this.selectedValues = [...this.selectedValues, e];
|
|
69
|
+
}
|
|
70
|
+
this.value = [...this.selectedValues];
|
|
71
|
+
} else
|
|
72
|
+
this.selectedValues = [e], this.value = e, this.isOpen = !1;
|
|
73
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
66
74
|
bubbles: !0,
|
|
67
75
|
composed: !0,
|
|
68
76
|
detail: { value: this.value }
|
|
69
77
|
}));
|
|
70
78
|
}
|
|
71
79
|
handleChipRemove(e, t) {
|
|
72
|
-
t.stopPropagation(), this.selectedValues = this.selectedValues.filter((
|
|
80
|
+
t.stopPropagation(), this.selectedValues = this.selectedValues.filter((i) => i !== e), this.value = [...this.selectedValues];
|
|
73
81
|
}
|
|
74
82
|
/* -------------------- Rendering -------------------- */
|
|
75
83
|
renderDropdown() {
|
|
76
|
-
return
|
|
77
|
-
<div class="dropdown" role="listbox" aria-multiselectable
|
|
78
|
-
${this.searchable ?
|
|
84
|
+
return r`
|
|
85
|
+
<div class="dropdown" role="listbox" aria-multiselectable=${this.multiple ? "true" : "false"}>
|
|
86
|
+
${this.searchable ? r`
|
|
79
87
|
<div class="search">
|
|
80
88
|
<md-icon class="pd-icon">search</md-icon>
|
|
81
89
|
<input
|
|
@@ -84,19 +92,19 @@ let s = class extends v {
|
|
|
84
92
|
@input=${(e) => this.searchQuery = e.target.value}
|
|
85
93
|
/>
|
|
86
94
|
</div>
|
|
87
|
-
` :
|
|
95
|
+
` : n}
|
|
88
96
|
|
|
89
97
|
<div class="options">
|
|
90
98
|
${this.filteredOptions.map((e) => {
|
|
91
|
-
const t = this.selectedValues.includes(e.value),
|
|
92
|
-
return
|
|
99
|
+
const t = this.selectedValues.includes(e.value), i = e.disabled ?? !1;
|
|
100
|
+
return r`
|
|
93
101
|
<div
|
|
94
102
|
class="option"
|
|
95
103
|
data-selected=${t}
|
|
96
|
-
data-disabled=${
|
|
97
|
-
@click=${(l) => !
|
|
104
|
+
data-disabled=${i}
|
|
105
|
+
@click=${(l) => !i && this.handleOptionClick(e.value, l)}
|
|
98
106
|
>
|
|
99
|
-
|
|
107
|
+
${this.multiple ? r`<md-checkbox ?checked=${t} ?disabled=${i}></md-checkbox>` : n}
|
|
100
108
|
<span>${e.label}</span>
|
|
101
109
|
</div>
|
|
102
110
|
`;
|
|
@@ -105,16 +113,16 @@ let s = class extends v {
|
|
|
105
113
|
</div>
|
|
106
114
|
`;
|
|
107
115
|
}
|
|
108
|
-
|
|
116
|
+
renderCustomSelect() {
|
|
109
117
|
const e = this.selectedValues.length > 0, t = e || this.isOpen;
|
|
110
|
-
return
|
|
118
|
+
return r`
|
|
111
119
|
<div class="container">
|
|
112
120
|
<div class="wrap">
|
|
113
|
-
${this.label ?
|
|
121
|
+
${this.label ? r`
|
|
114
122
|
<label class="label" data-float=${t}>
|
|
115
|
-
${this.label}${this.required ?
|
|
123
|
+
${this.label}${this.required ? r`<span class="required">*</span>` : n}
|
|
116
124
|
</label>
|
|
117
|
-
` :
|
|
125
|
+
` : n}
|
|
118
126
|
|
|
119
127
|
<div
|
|
120
128
|
class="field"
|
|
@@ -123,19 +131,19 @@ let s = class extends v {
|
|
|
123
131
|
role="combobox"
|
|
124
132
|
@click=${this.handleTriggerClick}
|
|
125
133
|
>
|
|
126
|
-
${this.leadingIcon ?
|
|
134
|
+
${this.leadingIcon ? r`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>` : n}
|
|
127
135
|
|
|
128
136
|
<div class="content">
|
|
129
|
-
${e ?
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
${e ? this.multiple ? r`
|
|
138
|
+
<div class="chips">
|
|
139
|
+
${this.selectedValues.map((i) => r`
|
|
140
|
+
<pd-chip
|
|
141
|
+
label=${this.getOptionLabel(i)}
|
|
142
|
+
@chip-remove=${(l) => this.handleChipRemove(i, l)}
|
|
143
|
+
></pd-chip>
|
|
144
|
+
`)}
|
|
145
|
+
</div>
|
|
146
|
+
` : r`<span class="summary">${this.getOptionLabel(this.selectedValues[0])}</span>` : r`<span class="placeholder">${this.placeholder}</span>`}
|
|
139
147
|
</div>
|
|
140
148
|
|
|
141
149
|
<md-icon class="pd-icon pd-icon--trailing" data-rotated=${this.isOpen}>
|
|
@@ -144,7 +152,7 @@ let s = class extends v {
|
|
|
144
152
|
</div>
|
|
145
153
|
</div>
|
|
146
154
|
|
|
147
|
-
${this.supportingText ?
|
|
155
|
+
${this.supportingText ? r`<div class="supporting">${this.supportingText}</div>` : n}
|
|
148
156
|
</div>
|
|
149
157
|
`;
|
|
150
158
|
}
|
|
@@ -163,16 +171,16 @@ let s = class extends v {
|
|
|
163
171
|
this.trailingIcon?.classList.remove("rotated");
|
|
164
172
|
}
|
|
165
173
|
renderSingleSelect() {
|
|
166
|
-
const e =
|
|
167
|
-
${this.leadingIcon ?
|
|
174
|
+
const e = r`
|
|
175
|
+
${this.leadingIcon ? r`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>` : n}
|
|
168
176
|
<md-icon slot="trailing-icon" class="pd-icon">keyboard_arrow_down</md-icon>
|
|
169
|
-
${this.options.map((t) =>
|
|
177
|
+
${this.options.map((t) => r`
|
|
170
178
|
<md-select-option .value=${t.value} ?disabled=${t.disabled}>
|
|
171
179
|
<div slot="headline">${t.label}</div>
|
|
172
180
|
</md-select-option>
|
|
173
181
|
`)}
|
|
174
182
|
`;
|
|
175
|
-
return this.variant === "filled" ?
|
|
183
|
+
return this.variant === "filled" ? r`
|
|
176
184
|
<md-filled-select
|
|
177
185
|
.label=${this.label}
|
|
178
186
|
.value=${this.value}
|
|
@@ -185,7 +193,7 @@ let s = class extends v {
|
|
|
185
193
|
@opening=${this.handleSingleSelectOpen}
|
|
186
194
|
@closed=${this.handleSingleSelectClose}
|
|
187
195
|
>${e}</md-filled-select>
|
|
188
|
-
` :
|
|
196
|
+
` : r`
|
|
189
197
|
<md-outlined-select
|
|
190
198
|
.label=${this.label}
|
|
191
199
|
.value=${this.value}
|
|
@@ -201,7 +209,7 @@ let s = class extends v {
|
|
|
201
209
|
`;
|
|
202
210
|
}
|
|
203
211
|
render() {
|
|
204
|
-
return this.
|
|
212
|
+
return this.useCustomDropdown ? this.renderCustomSelect() : this.renderSingleSelect();
|
|
205
213
|
}
|
|
206
214
|
};
|
|
207
215
|
s.overlayStyles = `
|
|
@@ -37,6 +37,8 @@ export declare class PdSelect extends LitElement {
|
|
|
37
37
|
private overlayEl;
|
|
38
38
|
connectedCallback(): void;
|
|
39
39
|
disconnectedCallback(): void;
|
|
40
|
+
/** Whether to use the custom dropdown (overlay) instead of the native MD select */
|
|
41
|
+
private get useCustomDropdown();
|
|
40
42
|
willUpdate(changed: PropertyValues): void;
|
|
41
43
|
private getOptionLabel;
|
|
42
44
|
private get filteredOptions();
|
|
@@ -50,7 +52,7 @@ export declare class PdSelect extends LitElement {
|
|
|
50
52
|
private handleOptionClick;
|
|
51
53
|
private handleChipRemove;
|
|
52
54
|
private renderDropdown;
|
|
53
|
-
private
|
|
55
|
+
private renderCustomSelect;
|
|
54
56
|
private handleSingleSelectChange;
|
|
55
57
|
private handleSingleSelectOpen;
|
|
56
58
|
private handleSingleSelectClose;
|