sf-multiselect-search 1.0.5 → 1.0.7
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.
|
@@ -36,7 +36,7 @@ export declare class SfMultiselectSearch extends LitElement {
|
|
|
36
36
|
dispatchValueChanged: () => void;
|
|
37
37
|
initListeners: () => void;
|
|
38
38
|
populateSelectedList: () => void;
|
|
39
|
-
populateList: () => void;
|
|
39
|
+
populateList: (applyFlag?: boolean) => void;
|
|
40
40
|
loadMode: () => Promise<void>;
|
|
41
41
|
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
|
|
42
42
|
connectedCallback(): void;
|
|
@@ -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,0BAiHpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAGb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;IAGjD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAE9C,cAAc;;MASb;IACD,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aAuCZ;IAED,oBAAoB,aA0CnB;IAED,YAAY,
|
|
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,0BAiHpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAGb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;IAGjD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAE9C,cAAc;;MASb;IACD,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aAuCZ;IAED,oBAAoB,aA0CnB;IAED,YAAY,eAAe,OAAO,UA2EjC;IAED,QAAQ,sBAIP;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"}
|
|
@@ -152,7 +152,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
};
|
|
155
|
-
this.populateList = () => {
|
|
155
|
+
this.populateList = (applyFlag = true) => {
|
|
156
156
|
let searchInput = this.shadowRoot?.getElementById("search-input");
|
|
157
157
|
let filterText = (searchInput?.value ?? "").toLowerCase();
|
|
158
158
|
console.log("populateList", this.listelements, filterText, this.listselection);
|
|
@@ -161,14 +161,16 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
161
161
|
if (Array.isArray(this.listelements)) {
|
|
162
162
|
if (this.listelements.length > 0) {
|
|
163
163
|
let flagListSelection = false;
|
|
164
|
-
|
|
165
|
-
if (this.listselection[
|
|
164
|
+
this.listelements.map((item) => {
|
|
165
|
+
if (this.listselection[item.id] == true) {
|
|
166
166
|
flagListSelection = true;
|
|
167
|
-
break;
|
|
168
167
|
}
|
|
169
|
-
}
|
|
168
|
+
});
|
|
170
169
|
innerHTML += `
|
|
171
|
-
|
|
170
|
+
<div part="multiselect-item-select-all" class="d-flex">
|
|
171
|
+
<input part="multiselect-checkbox" type="checkbox" id="select-all-checkbox" name="Select All" ${flagListSelection ? "checked" : ""} ${this.readonly ? "disabled" : ""}/>
|
|
172
|
+
<label part="multiselect-checkbox-select-all-label" for="select-all-checkbox">Select All</label>
|
|
173
|
+
</div>
|
|
172
174
|
`;
|
|
173
175
|
}
|
|
174
176
|
this.listelements.map((item) => {
|
|
@@ -187,9 +189,9 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
187
189
|
if (multiselectList != null) {
|
|
188
190
|
multiselectList.innerHTML = innerHTML;
|
|
189
191
|
}
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
if (
|
|
192
|
+
const selectAllCheckbox = this.shadowRoot?.getElementById(`select-all-checkbox`);
|
|
193
|
+
selectAllCheckbox?.addEventListener('change', () => {
|
|
194
|
+
if (selectAllCheckbox.checked) {
|
|
193
195
|
for (const item of this.listelements) {
|
|
194
196
|
this.listselection[item.id] = true;
|
|
195
197
|
}
|
|
@@ -200,15 +202,15 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
200
202
|
}
|
|
201
203
|
}
|
|
202
204
|
console.log('listselection', this.listselection);
|
|
203
|
-
this.populateList();
|
|
204
|
-
if (Object.keys(this.listselection).length > 0) {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
205
|
+
this.populateList(false);
|
|
206
|
+
// if (Object.keys(this.listselection).length > 0) {
|
|
207
|
+
// let dropDownButton = this.shadowRoot?.getElementById("dropdown-button") as HTMLButtonElement;
|
|
208
|
+
// if (dropDownButton.innerHTML != "keyboard_arrow_down") {
|
|
209
|
+
// multiselectList.classList.add("hide");
|
|
210
|
+
// dropDownButton.innerHTML = "keyboard_arrow_down"
|
|
211
|
+
// }
|
|
212
|
+
// this.dispatchValueChanged();
|
|
213
|
+
// }
|
|
212
214
|
});
|
|
213
215
|
for (const item of this.listelements) {
|
|
214
216
|
const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? "").replace(/ /g, '-')}`);
|
|
@@ -222,7 +224,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
222
224
|
});
|
|
223
225
|
}
|
|
224
226
|
}
|
|
225
|
-
if (Object.keys(this.listselection).length > 0) {
|
|
227
|
+
if (Object.keys(this.listselection).length > 0 && applyFlag) {
|
|
226
228
|
this.dispatchValueChanged();
|
|
227
229
|
}
|
|
228
230
|
};
|
|
@@ -245,8 +247,8 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
|
|
|
245
247
|
<div part="multiselect-container" class="d-flex flex-col align-stretch">
|
|
246
248
|
${this.listname != "" ? `<h2 part="multiselect-title">${this.listname}</h2>` : ''}
|
|
247
249
|
<div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
|
|
248
|
-
<input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
|
|
249
|
-
<button id="dropdown-button" part="button-icon" class="material-icons">keyboard_arrow_down</button>
|
|
250
|
+
<input part="input" type="text" id="search-input" name="search-input" class="flex-grow mr-5" value="" placeholder="Search"/>
|
|
251
|
+
<button id="dropdown-button" part="button-icon-light" class="material-icons mr-5">keyboard_arrow_down</button>
|
|
250
252
|
<button id="apply-button" part="button-icon" class="material-icons">done</button>
|
|
251
253
|
</div>
|
|
252
254
|
<div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></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 .align-self-start {\r\n align-self: flex-start;\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: { name: string, id: string }[] = []\r\n\r\n @property({ type: Object })\r\n listselection: { [key: string]: boolean } = {}\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.populateList();\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, this.listselection);\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n if (this.listelements.length > 0) {\r\n let flagListSelection = false\r\n for (let objKey of Object.keys(this.listselection)) {\r\n if (this.listselection[objKey] == true) {\r\n flagListSelection = true\r\n break;\r\n }\r\n }\r\n innerHTML += `\r\n <button id=\"select-all-button\" part=\"button-icon\" class=\"align-self-start material-symbols-outlined\">${flagListSelection ? 'deselect' : 'select_all'}</button>\r\n `\r\n }\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 const selectAllButton = this.shadowRoot?.getElementById(`select-all-button`) as HTMLButtonElement;\r\n selectAllButton?.addEventListener('click', () => {\r\n if (selectAllButton.innerHTML == \"select_all\") {\r\n for (const item of this.listelements) {\r\n this.listselection[item.id] = true;\r\n }\r\n } else {\r\n for (const item of this.listelements) {\r\n delete this.listselection[item.id];\r\n }\r\n }\r\n console.log('listselection', this.listselection)\r\n this.populateList();\r\n if (Object.keys(this.listselection).length > 0) {\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 // this.dispatchValueChanged();\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 });\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.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"]}
|
|
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 .align-self-start {\r\n align-self: flex-start;\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: { name: string, id: string }[] = []\r\n\r\n @property({ type: Object })\r\n listselection: { [key: string]: boolean } = {}\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.populateList();\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 = (applyFlag: boolean = true) => {\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, this.listselection);\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n if (this.listelements.length > 0) {\r\n let flagListSelection = false\r\n this.listelements.map((item) => {\r\n if (this.listselection[item.id] == true) {\r\n flagListSelection = true\r\n }\r\n })\r\n innerHTML += `\r\n <div part=\"multiselect-item-select-all\" class=\"d-flex\">\r\n <input part=\"multiselect-checkbox\" type=\"checkbox\" id=\"select-all-checkbox\" name=\"Select All\" ${flagListSelection ? \"checked\" : \"\"} ${this.readonly ? \"disabled\" : \"\"}/>\r\n <label part=\"multiselect-checkbox-select-all-label\" for=\"select-all-checkbox\">Select All</label>\r\n </div>\r\n `\r\n }\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 const selectAllCheckbox = this.shadowRoot?.getElementById(`select-all-checkbox`) as HTMLInputElement;\r\n selectAllCheckbox?.addEventListener('change', () => {\r\n if (selectAllCheckbox.checked) {\r\n for (const item of this.listelements) {\r\n this.listselection[item.id] = true;\r\n }\r\n } else {\r\n for (const item of this.listelements) {\r\n delete this.listselection[item.id];\r\n }\r\n }\r\n console.log('listselection', this.listselection)\r\n this.populateList(false);\r\n // if (Object.keys(this.listselection).length > 0) {\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 // this.dispatchValueChanged();\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 });\r\n }\r\n }\r\n\r\n if (Object.keys(this.listselection).length > 0 && applyFlag) {\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.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 mr-5\" value=\"\" placeholder=\"Search\"/>\r\n <button id=\"dropdown-button\" part=\"button-icon-light\" class=\"material-icons mr-5\">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"]}
|