sf-multiselect-search 1.0.3 → 1.0.4
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sf-multiselect-search.d.ts","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAa,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAU9D;;;;;;;;;;GAUG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BA8GpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAIb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"sf-multiselect-search.d.ts","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAa,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAU9D;;;;;;;;;;GAUG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BA8GpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAIb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;IA0BjD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAgB9C,cAAc;;MASb;IACD,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aAsCZ;IAED,oBAAoB,aA0CnB;IAED,YAAY,aA8CX;IAED,QAAQ,sBAQP;cAEkB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAMnG,iBAAiB;IAGjB,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;KAC9B;CACF"}
|
|
@@ -37,20 +37,21 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
37
37
|
// readonly = true
|
|
38
38
|
this.listname = "";
|
|
39
39
|
// listelements: string[] = []
|
|
40
|
-
this.listelements = [
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
this.listelements = [];
|
|
41
|
+
// listelements: { name: string, id: string }[] = [
|
|
42
|
+
// {
|
|
43
|
+
// "name": "Contract term 1",
|
|
44
|
+
// "id": "ct1"
|
|
45
|
+
// },
|
|
46
|
+
// {
|
|
47
|
+
// "name": "contract term 2",
|
|
48
|
+
// "id": "ct2"
|
|
49
|
+
// },
|
|
50
|
+
// {
|
|
51
|
+
// "name": "contract term 3",
|
|
52
|
+
// "id": "ct3"
|
|
53
|
+
// }
|
|
54
|
+
// ]
|
|
54
55
|
// listelements: { name: string }[] = [{"name": "Terms1"},{"name": "Terms2"}]
|
|
55
56
|
// listelements: { name: string }[] = [
|
|
56
57
|
// {
|
|
@@ -132,6 +133,16 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
132
133
|
dropdownButton.innerHTML = "keyboard_arrow_up";
|
|
133
134
|
}
|
|
134
135
|
});
|
|
136
|
+
let applyButton = this.shadowRoot?.getElementById("apply-button");
|
|
137
|
+
applyButton?.addEventListener('click', () => {
|
|
138
|
+
this.dispatchValueChanged();
|
|
139
|
+
let multiselectList = this.shadowRoot?.getElementById("select-list");
|
|
140
|
+
let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
|
|
141
|
+
if (dropDownButton.innerHTML != "keyboard_arrow_down") {
|
|
142
|
+
multiselectList.classList.add("hide");
|
|
143
|
+
dropDownButton.innerHTML = "keyboard_arrow_down";
|
|
144
|
+
}
|
|
145
|
+
});
|
|
135
146
|
};
|
|
136
147
|
this.populateSelectedList = () => {
|
|
137
148
|
let searchInput = this.shadowRoot?.getElementById("search-input");
|
|
@@ -153,6 +164,9 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
153
164
|
`;
|
|
154
165
|
});
|
|
155
166
|
}
|
|
167
|
+
if (selectedList == null) {
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
156
170
|
selectedList.innerHTML = innerHTML;
|
|
157
171
|
for (const item of this.listelements) {
|
|
158
172
|
const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? "").replace(/ /g, '-')}`);
|
|
@@ -160,6 +174,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
160
174
|
deleteSpan.addEventListener('click', () => {
|
|
161
175
|
const id = item.id ?? "";
|
|
162
176
|
delete this.listselection[id];
|
|
177
|
+
this.populateList();
|
|
163
178
|
this.dispatchValueChanged();
|
|
164
179
|
});
|
|
165
180
|
}
|
|
@@ -168,6 +183,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
168
183
|
selectedLabel.addEventListener('click', () => {
|
|
169
184
|
const id = item.id ?? "";
|
|
170
185
|
delete this.listselection[id];
|
|
186
|
+
this.populateList();
|
|
171
187
|
this.dispatchValueChanged();
|
|
172
188
|
});
|
|
173
189
|
}
|
|
@@ -205,15 +221,18 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
205
221
|
...this.listselection,
|
|
206
222
|
[id]: checkbox.checked
|
|
207
223
|
};
|
|
208
|
-
console.log('multiselect selected', this.listselection, typeof (this.listselection));
|
|
209
|
-
this.dispatchValueChanged()
|
|
210
|
-
let multiselectList = this.shadowRoot?.getElementById("select-list");
|
|
211
|
-
multiselectList.classList.add("hide");
|
|
212
|
-
let dropdownButton = this.shadowRoot?.getElementById("dropdown-button");
|
|
213
|
-
dropdownButton.innerHTML = "keyboard_arrow_down"
|
|
224
|
+
// console.log('multiselect selected', this.listselection, typeof (this.listselection));
|
|
225
|
+
// this.dispatchValueChanged()
|
|
226
|
+
// let multiselectList = this.shadowRoot?.getElementById("select-list") as HTMLDivElement;
|
|
227
|
+
// multiselectList.classList.add("hide");
|
|
228
|
+
// let dropdownButton = this.shadowRoot?.getElementById("dropdown-button") as HTMLButtonElement;
|
|
229
|
+
// dropdownButton.innerHTML = "keyboard_arrow_down"
|
|
214
230
|
});
|
|
215
231
|
}
|
|
216
232
|
}
|
|
233
|
+
if (Object.keys(this.listselection).length > 0) {
|
|
234
|
+
this.dispatchValueChanged();
|
|
235
|
+
}
|
|
217
236
|
};
|
|
218
237
|
this.loadMode = async () => {
|
|
219
238
|
console.log("loadMode", this.mode, this.listelements, this.listselection);
|
|
@@ -239,6 +258,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
239
258
|
<div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
|
|
240
259
|
<input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
|
|
241
260
|
<button id="dropdown-button" part="button-icon" class="material-icons">keyboard_arrow_down</button>
|
|
261
|
+
<button id="apply-button" part="button-icon" class="material-icons">done</button>
|
|
242
262
|
</div>
|
|
243
263
|
<div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></div>
|
|
244
264
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sf-multiselect-search.js","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * @license\r\n * Copyright 2022 Superflow.dev\r\n * SPDX-License-Identifier: MIT\r\n */\r\n\r\nimport { LitElement, html, css, PropertyValueMap } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\n/*\r\n\r\nModes: multiselect, select\r\nFlows: view,edit\r\n\r\n*/\r\n\r\n/**\r\n * SfMultiselectSearch element.\r\n * @fires renderComplete - When the list is populated\r\n * @fires valueChanged - When the value is changed\r\n * @property apiId - backend api id\r\n * @property label - input label\r\n * @property name - name of the input\r\n * @property mode - mode of operation\r\n * @property selectedId - id to preselect\r\n * @property selectedValue - callback function\r\n */\r\n@customElement('sf-multiselect-search')\r\nexport class SfMultiselectSearch extends LitElement {\r\n static override styles = css`\r\n :root {\r\n --color: #fcc419;\r\n --shadow: #f08c00;\r\n --glare: hsl(0 0% 100% / 0.75);\r\n --font-size: clamp(.75rem, 2vw, 1rem);\r\n --transition: 0.2s;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .d-flex {\r\n display: flex;\r\n }\r\n\r\n .flex-col {\r\n flex-direction: column;\r\n }\r\n\r\n .flex-wrap {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .justify-center {\r\n justify-content: center;\r\n }\r\n\r\n .justify-between {\r\n justify-content: space-between;\r\n }\r\n\r\n .justify-end {\r\n justify-content: flex-end;\r\n }\r\n\r\n .w-100-m-0 {\r\n width: 100%;\r\n }\r\n \r\n .mb-20 {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .mt-20 {\r\n margin-top: 20px;\r\n }\r\n .mr-10 {\r\n margin-right: 10px;\r\n }\r\n .mr-5 {\r\n margin-right: 5px;\r\n }\r\n .m-0 {\r\n margin: 0px;\r\n }\r\n\r\n .m-20 {\r\n margin: 20px;\r\n }\r\n .md-20-ml-10 {\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n .mrl-5 {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n }\r\n .mrl-10 {\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n .mt-10{\r\n margin-top: 10px\r\n }\r\n .ml-10{\r\n margin-left: 10px\r\n }\r\n .mr-20{\r\n margin-right: 20px\r\n }\r\n .flex-grow {\r\n flex-grow: 1;\r\n }\r\n .align-start {\r\n align-items: flex-start;\r\n }\r\n\r\n .align-end {\r\n align-items: flex-end;\r\n }\r\n\r\n .align-center {\r\n align-items: center;\r\n }\r\n .align-stretch {\r\n align-items: stretch;\r\n }\r\n body {\r\n display: grid;\r\n place-items: center;\r\n min-height: 100vh;\r\n font-family: 'Google Sans', sans-serif, system-ui;\r\n }\r\n .hide {\r\n display: none;\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n // mode = \"\"\r\n mode = \"admin\"\r\n\r\n @property({ type: Boolean })\r\n readonly = false\r\n // readonly = true\r\n @property()\r\n listname = \"\"\r\n\r\n @property({ type: Array })\r\n // listelements: string[] = []\r\n listelements: { name: string, id: string }[] = [\r\n {\r\n \"name\": \"Contract term 1\",\r\n \"id\": \"ct1\"\r\n },\r\n {\r\n \"name\": \"contract term 2\",\r\n \"id\": \"ct2\"\r\n },\r\n {\r\n \"name\": \"contract term 3\",\r\n \"id\": \"ct3\"\r\n }\r\n ]\r\n // listelements: { name: string }[] = [{\"name\": \"Terms1\"},{\"name\": \"Terms2\"}]\r\n // listelements: { name: string }[] = [\r\n // {\r\n // \"name\": \"item 1\"\r\n // },\r\n // {\r\n // \"name\": \"item 2\"\r\n // }\r\n // ]\r\n\r\n @property({ type: Object })\r\n listselection: { [key: string]: boolean } = {}\r\n // listselection: { [key: string]: boolean } = {\r\n // \"Contract term 1\": true,\r\n // \"contract term 2\": true,\r\n // \"contract term 3\": true\r\n // }\r\n // listselection: any = {\r\n // \"First term\": true,\r\n // \"Second term\": true\r\n // }\r\n // listselection: any = {\r\n // \"Check 1\": true,\r\n // \"Check 2\": false,\r\n // \"Check 3\": true\r\n // }\r\n\r\n selectedValues = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: boolean } = {}\r\n for (let key of this.listelements) {\r\n if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {\r\n retObj[key.id] = this.listselection[key.id]\r\n }\r\n }\r\n return retObj\r\n }\r\n selectedValuesNames = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: any } = {}\r\n for (let key of this.listelements) {\r\n if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {\r\n retObj[key.id] = { name: key.name, id: key.id }\r\n }\r\n }\r\n return retObj\r\n }\r\n dispatchValueChanged = () => {\r\n console.log(\"dispatchValueChanged\");\r\n this.populateSelectedList();\r\n let customEvent = new CustomEvent('valueChanged', {\r\n detail: { source: 'InnerElement', id: this.id },\r\n bubbles: true,\r\n composed: true\r\n });\r\n this.dispatchEvent(customEvent);\r\n console.log(\"dispatched valueChanged event\", this.selectedValues());\r\n }\r\n\r\n initListeners = () => {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropDownButton?.addEventListener('click', (e) => {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let button = e.target as HTMLButtonElement;\r\n if (button.innerHTML === \"keyboard_arrow_down\") {\r\n multiselectList.classList.remove(\"hide\");\r\n button.innerHTML = \"keyboard_arrow_up\"\r\n } else {\r\n multiselectList.classList.add(\"hide\");\r\n button.innerHTML = \"keyboard_arrow_down\"\r\n }\r\n\r\n })\r\n\r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n searchInput?.addEventListener('input', (e) => {\r\n this.populateList();\r\n let searchInput = e.target as HTMLInputElement;\r\n let filterText = searchInput.value.toLowerCase();\r\n if (filterText !== \"\") {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n multiselectList.classList.remove(\"hide\");\r\n let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropdownButton.innerHTML = \"keyboard_arrow_up\"\r\n }\r\n })\r\n }\r\n\r\n populateSelectedList = () => {\r\n \r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n let filterText = (searchInput?.value ?? \"\").toLowerCase();\r\n console.log(\"populateSelectedList\", this.listelements, filterText);\r\n let selectedList = this.shadowRoot?.getElementById(\"selected-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n this.listelements.map((item) => {\r\n console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n if (this.listselection[(item.id ?? \"\")] !== true) {\r\n return;\r\n }\r\n innerHTML += `\r\n <div part=\"selected-item\" class=\"d-flex align-center mr-10\">\r\n <span id=\"selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}\" class=\"material-icons\" part=\"selected-unselect\">cancel</span>\r\n <label part=\"selected-label\" id=\"selected-label-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n </div>\r\n `});\r\n }\r\n selectedList.innerHTML = innerHTML;\r\n for (const item of this.listelements) {\r\n const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLSpanElement;\r\n if (deleteSpan != null) {\r\n deleteSpan.addEventListener('click', () => {\r\n const id = item.id ?? \"\";\r\n delete this.listselection[id];\r\n this.dispatchValueChanged()\r\n });\r\n }\r\n const selectedLabel = this.shadowRoot?.getElementById(`selected-label-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLLabelElement;\r\n if (selectedLabel != null) {\r\n selectedLabel.addEventListener('click', () => {\r\n const id = item.id ?? \"\";\r\n delete this.listselection[id];\r\n this.dispatchValueChanged();\r\n });\r\n }\r\n }\r\n }\r\n\r\n populateList = () => {\r\n \r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n let filterText = (searchInput?.value ?? \"\").toLowerCase();\r\n console.log(\"populateList\", this.listelements, filterText);\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n this.listelements.map((item) => {\r\n console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n if (filterText !== \"\" && !(item.name ?? \"\").toLowerCase().includes(filterText)) {\r\n return;\r\n }\r\n innerHTML += `\r\n <div part=\"multiselect-item\" class=\"d-flex\">\r\n <input part=\"multiselect-checkbox\" type=\"checkbox\" id=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\" name=\"${(item.name ?? \"\")}\" value=\"${(item.id ?? \"\")}\" ${(this.listselection[(item.id ?? \"\")] ?? false) ? \"checked\" : \"\"} ${this.readonly ? \"disabled\" : \"\"}/>\r\n <label part=\"multiselect-checkbox-label\" for=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n </div>\r\n `});\r\n }\r\n if(multiselectList != null){\r\n multiselectList.innerHTML = innerHTML;\r\n }\r\n\r\n for (const item of this.listelements) {\r\n const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLInputElement;\r\n if (checkbox) {\r\n checkbox.addEventListener('change', () => {\r\n const id = item.id ?? \"\";\r\n this.listselection = {\r\n ...this.listselection,\r\n [id]: checkbox.checked\r\n };\r\n console.log('multiselect selected', this.listselection, typeof (this.listselection));\r\n this.dispatchValueChanged()\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n multiselectList.classList.add(\"hide\");\r\n let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropdownButton.innerHTML = \"keyboard_arrow_down\"\r\n });\r\n }\r\n }\r\n\r\n\r\n }\r\n\r\n loadMode = async () => {\r\n console.log(\"loadMode\", this.mode, this.listelements, this.listselection);\r\n // this.listelements = Object.keys(this.listselection)\r\n\r\n // this.populateList()\r\n // this.dispatchValueChanged();\r\n this.initListeners()\r\n this.populateList()\r\n }\r\n\r\n protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\r\n\r\n this.loadMode();\r\n\r\n }\r\n\r\n override connectedCallback() {\r\n super.connectedCallback()\r\n }\r\n override render() {\r\n return html`\r\n <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\" />\r\n <div part=\"multiselect-container\" class=\"d-flex flex-col align-stretch\"> \r\n ${this.listname != \"\" ? `<h2 part=\"multiselect-title\">${this.listname}</h2>` : ''}\r\n <div id=\"multiselect-input-container\" part=\"multiselect-input-container\" class=\"d-flex\">\r\n <input part=\"input\" type=\"text\" id=\"search-input\" name=\"search-input\" class=\"flex-grow\" value=\"\" placeholder=\"Search\"/>\r\n <button id=\"dropdown-button\" part=\"button-icon\" class=\"material-icons\">keyboard_arrow_down</button>\r\n </div>\r\n <div id=\"select-list\" part=\"select-list\" class=\"hide d-flex flex-col flex-wrap justify-center\"></div>\r\n </div>\r\n <div id=\"selected-list\" part=\"selected-list\" class=\"d-flex flex-wrap\"></div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"sf-multiselect-search.js","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * @license\r\n * Copyright 2022 Superflow.dev\r\n * SPDX-License-Identifier: MIT\r\n */\r\n\r\nimport { LitElement, html, css, PropertyValueMap } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\n/*\r\n\r\nModes: multiselect, select\r\nFlows: view,edit\r\n\r\n*/\r\n\r\n/**\r\n * SfMultiselectSearch element.\r\n * @fires renderComplete - When the list is populated\r\n * @fires valueChanged - When the value is changed\r\n * @property apiId - backend api id\r\n * @property label - input label\r\n * @property name - name of the input\r\n * @property mode - mode of operation\r\n * @property selectedId - id to preselect\r\n * @property selectedValue - callback function\r\n */\r\n@customElement('sf-multiselect-search')\r\nexport class SfMultiselectSearch extends LitElement {\r\n static override styles = css`\r\n :root {\r\n --color: #fcc419;\r\n --shadow: #f08c00;\r\n --glare: hsl(0 0% 100% / 0.75);\r\n --font-size: clamp(.75rem, 2vw, 1rem);\r\n --transition: 0.2s;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .d-flex {\r\n display: flex;\r\n }\r\n\r\n .flex-col {\r\n flex-direction: column;\r\n }\r\n\r\n .flex-wrap {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .justify-center {\r\n justify-content: center;\r\n }\r\n\r\n .justify-between {\r\n justify-content: space-between;\r\n }\r\n\r\n .justify-end {\r\n justify-content: flex-end;\r\n }\r\n\r\n .w-100-m-0 {\r\n width: 100%;\r\n }\r\n \r\n .mb-20 {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .mt-20 {\r\n margin-top: 20px;\r\n }\r\n .mr-10 {\r\n margin-right: 10px;\r\n }\r\n .mr-5 {\r\n margin-right: 5px;\r\n }\r\n .m-0 {\r\n margin: 0px;\r\n }\r\n\r\n .m-20 {\r\n margin: 20px;\r\n }\r\n .md-20-ml-10 {\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n .mrl-5 {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n }\r\n .mrl-10 {\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n .mt-10{\r\n margin-top: 10px\r\n }\r\n .ml-10{\r\n margin-left: 10px\r\n }\r\n .mr-20{\r\n margin-right: 20px\r\n }\r\n .flex-grow {\r\n flex-grow: 1;\r\n }\r\n .align-start {\r\n align-items: flex-start;\r\n }\r\n\r\n .align-end {\r\n align-items: flex-end;\r\n }\r\n\r\n .align-center {\r\n align-items: center;\r\n }\r\n .align-stretch {\r\n align-items: stretch;\r\n }\r\n body {\r\n display: grid;\r\n place-items: center;\r\n min-height: 100vh;\r\n font-family: 'Google Sans', sans-serif, system-ui;\r\n }\r\n .hide {\r\n display: none;\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n // mode = \"\"\r\n mode = \"admin\"\r\n\r\n @property({ type: Boolean })\r\n readonly = false\r\n // readonly = true\r\n @property()\r\n listname = \"\"\r\n\r\n @property({ type: Array })\r\n // listelements: string[] = []\r\n listelements: { name: string, id: string }[] = []\r\n // listelements: { name: string, id: string }[] = [\r\n // {\r\n // \"name\": \"Contract term 1\",\r\n // \"id\": \"ct1\"\r\n // },\r\n // {\r\n // \"name\": \"contract term 2\",\r\n // \"id\": \"ct2\"\r\n // },\r\n // {\r\n // \"name\": \"contract term 3\",\r\n // \"id\": \"ct3\"\r\n // }\r\n // ]\r\n // listelements: { name: string }[] = [{\"name\": \"Terms1\"},{\"name\": \"Terms2\"}]\r\n // listelements: { name: string }[] = [\r\n // {\r\n // \"name\": \"item 1\"\r\n // },\r\n // {\r\n // \"name\": \"item 2\"\r\n // }\r\n // ]\r\n\r\n @property({ type: Object })\r\n listselection: { [key: string]: boolean } = {}\r\n // listselection: { [key: string]: boolean } = {\r\n // \"Contract term 1\": true,\r\n // \"contract term 2\": true,\r\n // \"contract term 3\": true\r\n // }\r\n // listselection: any = {\r\n // \"First term\": true,\r\n // \"Second term\": true\r\n // }\r\n // listselection: any = {\r\n // \"Check 1\": true,\r\n // \"Check 2\": false,\r\n // \"Check 3\": true\r\n // }\r\n\r\n selectedValues = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: boolean } = {}\r\n for (let key of this.listelements) {\r\n if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {\r\n retObj[key.id] = this.listselection[key.id]\r\n }\r\n }\r\n return retObj\r\n }\r\n selectedValuesNames = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: any } = {}\r\n for (let key of this.listelements) {\r\n if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {\r\n retObj[key.id] = { name: key.name, id: key.id }\r\n }\r\n }\r\n return retObj\r\n }\r\n dispatchValueChanged = () => {\r\n console.log(\"dispatchValueChanged\");\r\n this.populateSelectedList();\r\n let customEvent = new CustomEvent('valueChanged', {\r\n detail: { source: 'InnerElement', id: this.id },\r\n bubbles: true,\r\n composed: true\r\n });\r\n this.dispatchEvent(customEvent);\r\n console.log(\"dispatched valueChanged event\", this.selectedValues());\r\n }\r\n\r\n initListeners = () => {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropDownButton?.addEventListener('click', (e) => {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let button = e.target as HTMLButtonElement;\r\n if (button.innerHTML === \"keyboard_arrow_down\") {\r\n multiselectList.classList.remove(\"hide\");\r\n button.innerHTML = \"keyboard_arrow_up\"\r\n } else {\r\n multiselectList.classList.add(\"hide\");\r\n button.innerHTML = \"keyboard_arrow_down\"\r\n }\r\n\r\n })\r\n\r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n searchInput?.addEventListener('input', (e) => {\r\n this.populateList();\r\n let searchInput = e.target as HTMLInputElement;\r\n let filterText = searchInput.value.toLowerCase();\r\n if (filterText !== \"\") {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n multiselectList.classList.remove(\"hide\");\r\n let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropdownButton.innerHTML = \"keyboard_arrow_up\"\r\n }\r\n })\r\n\r\n let applyButton = this.shadowRoot?.getElementById(\"apply-button\") as HTMLButtonElement;\r\n applyButton?.addEventListener('click', () => {\r\n this.dispatchValueChanged();\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n if (dropDownButton.innerHTML != \"keyboard_arrow_down\") {\r\n multiselectList.classList.add(\"hide\");\r\n dropDownButton.innerHTML = \"keyboard_arrow_down\"\r\n }\r\n })\r\n }\r\n\r\n populateSelectedList = () => {\r\n\r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n let filterText = (searchInput?.value ?? \"\").toLowerCase();\r\n console.log(\"populateSelectedList\", this.listelements, filterText);\r\n let selectedList = this.shadowRoot?.getElementById(\"selected-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n this.listelements.map((item) => {\r\n console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n if (this.listselection[(item.id ?? \"\")] !== true) {\r\n return;\r\n }\r\n innerHTML += `\r\n <div part=\"selected-item\" class=\"d-flex align-center mr-10\">\r\n <span id=\"selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}\" class=\"material-icons\" part=\"selected-unselect\">cancel</span>\r\n <label part=\"selected-label\" id=\"selected-label-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n </div>\r\n `});\r\n }\r\n if (selectedList == null) { return; }\r\n selectedList.innerHTML = innerHTML;\r\n for (const item of this.listelements) {\r\n const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLSpanElement;\r\n if (deleteSpan != null) {\r\n deleteSpan.addEventListener('click', () => {\r\n const id = item.id ?? \"\";\r\n delete this.listselection[id];\r\n this.populateList();\r\n this.dispatchValueChanged();\r\n });\r\n }\r\n const selectedLabel = this.shadowRoot?.getElementById(`selected-label-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLLabelElement;\r\n if (selectedLabel != null) {\r\n selectedLabel.addEventListener('click', () => {\r\n const id = item.id ?? \"\";\r\n delete this.listselection[id];\r\n this.populateList();\r\n this.dispatchValueChanged();\r\n });\r\n }\r\n }\r\n }\r\n\r\n populateList = () => {\r\n\r\n let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n let filterText = (searchInput?.value ?? \"\").toLowerCase();\r\n console.log(\"populateList\", this.listelements, filterText);\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n this.listelements.map((item) => {\r\n console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n if (filterText !== \"\" && !(item.name ?? \"\").toLowerCase().includes(filterText)) {\r\n return;\r\n }\r\n innerHTML += `\r\n <div part=\"multiselect-item\" class=\"d-flex\">\r\n <input part=\"multiselect-checkbox\" type=\"checkbox\" id=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\" name=\"${(item.name ?? \"\")}\" value=\"${(item.id ?? \"\")}\" ${(this.listselection[(item.id ?? \"\")] ?? false) ? \"checked\" : \"\"} ${this.readonly ? \"disabled\" : \"\"}/>\r\n <label part=\"multiselect-checkbox-label\" for=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n </div>\r\n `});\r\n }\r\n if (multiselectList != null) {\r\n multiselectList.innerHTML = innerHTML;\r\n }\r\n\r\n for (const item of this.listelements) {\r\n const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLInputElement;\r\n if (checkbox) {\r\n checkbox.addEventListener('change', () => {\r\n const id = item.id ?? \"\";\r\n this.listselection = {\r\n ...this.listselection,\r\n [id]: checkbox.checked\r\n };\r\n // console.log('multiselect selected', this.listselection, typeof (this.listselection));\r\n // this.dispatchValueChanged()\r\n // let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n // multiselectList.classList.add(\"hide\");\r\n // let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n // dropdownButton.innerHTML = \"keyboard_arrow_down\"\r\n });\r\n }\r\n }\r\n\r\n if (Object.keys(this.listselection).length > 0) {\r\n this.dispatchValueChanged()\r\n }\r\n }\r\n\r\n loadMode = async () => {\r\n console.log(\"loadMode\", this.mode, this.listelements, this.listselection);\r\n // this.listelements = Object.keys(this.listselection)\r\n\r\n // this.populateList()\r\n // this.dispatchValueChanged();\r\n this.initListeners()\r\n this.populateList()\r\n }\r\n\r\n protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\r\n\r\n this.loadMode();\r\n\r\n }\r\n\r\n override connectedCallback() {\r\n super.connectedCallback()\r\n }\r\n override render() {\r\n return html`\r\n <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\" />\r\n <div part=\"multiselect-container\" class=\"d-flex flex-col align-stretch\"> \r\n ${this.listname != \"\" ? `<h2 part=\"multiselect-title\">${this.listname}</h2>` : ''}\r\n <div id=\"multiselect-input-container\" part=\"multiselect-input-container\" class=\"d-flex\">\r\n <input part=\"input\" type=\"text\" id=\"search-input\" name=\"search-input\" class=\"flex-grow\" value=\"\" placeholder=\"Search\"/>\r\n <button id=\"dropdown-button\" part=\"button-icon\" class=\"material-icons\">keyboard_arrow_down</button>\r\n <button id=\"apply-button\" part=\"button-icon\" class=\"material-icons\">done</button>\r\n </div>\r\n <div id=\"select-list\" part=\"select-list\" class=\"hide d-flex flex-col flex-wrap justify-center\"></div>\r\n </div>\r\n <div id=\"selected-list\" part=\"selected-list\" class=\"d-flex flex-wrap\"></div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n }\r\n}\r\n"]}
|