sf-multiselect-search 1.0.1 → 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.
Files changed (5) hide show
  1. package/dist/sf-multiselect-search.d.ts +3 -0
  2. package/dist/sf-multiselect-search.d.ts.map +1 -1
  3. package/dist/sf-multiselect-search.js +65 -33
  4. package/dist/sf-multiselect-search.js.map +1 -1
  5. package/package.json +1 -1
package/dist/sf-multiselect-search.d.ts CHANGED
@@ -30,6 +30,9 @@ export declare class SfMultiselectSearch extends LitElement {
30
30
  selectedValues: () => {
31
31
  [key: string]: boolean;
32
32
  };
33
+ selectedValuesNames: () => {
34
+ [key: string]: any;
35
+ };
33
36
  dispatchValueChanged: () => void;
34
37
  initListeners: () => void;
35
38
  populateSelectedList: () => void;
package/dist/sf-multiselect-search.d.ts.map CHANGED
@@ -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,CAa3C;IAYD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAgB9C,cAAc;;MASb;IACD,oBAAoB,aAUnB;IAED,aAAa,aA6BZ;IAED,oBAAoB,aAsCnB;IAED,YAAY,aAyCX;IAED,QAAQ,sBAOP;cAEkB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAMnG,iBAAiB;IAGjB,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;KAC9B;CACF"}
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"}
package/dist/sf-multiselect-search.js CHANGED
@@ -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
- "name": "Contract term 1",
43
- "id": "ct1"
44
- },
45
- {
46
- "name": "contract term 2",
47
- "id": "ct2"
48
- },
49
- {
50
- "name": "contract term 3",
51
- "id": "ct3"
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
  // {
@@ -79,12 +80,22 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
79
80
  console.log('multiselect selectedvalues', JSON.stringify(this.listselection));
80
81
  let retObj = {};
81
82
  for (let key of this.listelements) {
82
- if (this.listselection[key.id] == null && this.listselection[key.id] !== false) {
83
+ if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {
83
84
  retObj[key.id] = this.listselection[key.id];
84
85
  }
85
86
  }
86
87
  return retObj;
87
88
  };
89
+ this.selectedValuesNames = () => {
90
+ console.log('multiselect selectedvalues', JSON.stringify(this.listselection));
91
+ let retObj = {};
92
+ for (let key of this.listelements) {
93
+ if (this.listselection[key.id] != null && this.listselection[key.id] !== false) {
94
+ retObj[key.id] = { name: key.name, id: key.id };
95
+ }
96
+ }
97
+ return retObj;
98
+ };
88
99
  this.dispatchValueChanged = () => {
89
100
  console.log("dispatchValueChanged");
90
101
  this.populateSelectedList();
@@ -94,13 +105,12 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
94
105
  composed: true
95
106
  });
96
107
  this.dispatchEvent(customEvent);
108
+ console.log("dispatched valueChanged event", this.selectedValues());
97
109
  };
98
110
  this.initListeners = () => {
99
111
  let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
100
- console.log("dropdownButton", dropDownButton.innerHTML);
101
- dropDownButton.addEventListener('click', (e) => {
112
+ dropDownButton?.addEventListener('click', (e) => {
102
113
  let multiselectList = this.shadowRoot?.getElementById("select-list");
103
- console.log("checklistList", multiselectList.classList);
104
114
  let button = e.target;
105
115
  if (button.innerHTML === "keyboard_arrow_down") {
106
116
  multiselectList.classList.remove("hide");
@@ -112,7 +122,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
112
122
  }
113
123
  });
114
124
  let searchInput = this.shadowRoot?.getElementById("search-input");
115
- searchInput.addEventListener('input', (e) => {
125
+ searchInput?.addEventListener('input', (e) => {
116
126
  this.populateList();
117
127
  let searchInput = e.target;
118
128
  let filterText = searchInput.value.toLowerCase();
@@ -123,10 +133,20 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
123
133
  dropdownButton.innerHTML = "keyboard_arrow_up";
124
134
  }
125
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
+ });
126
146
  };
127
147
  this.populateSelectedList = () => {
128
148
  let searchInput = this.shadowRoot?.getElementById("search-input");
129
- let filterText = searchInput.value.toLowerCase();
149
+ let filterText = (searchInput?.value ?? "").toLowerCase();
130
150
  console.log("populateSelectedList", this.listelements, filterText);
131
151
  let selectedList = this.shadowRoot?.getElementById("selected-list");
132
152
  let innerHTML = '';
@@ -144,6 +164,9 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
144
164
  `;
145
165
  });
146
166
  }
167
+ if (selectedList == null) {
168
+ return;
169
+ }
147
170
  selectedList.innerHTML = innerHTML;
148
171
  for (const item of this.listelements) {
149
172
  const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? "").replace(/ /g, '-')}`);
@@ -151,7 +174,8 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
151
174
  deleteSpan.addEventListener('click', () => {
152
175
  const id = item.id ?? "";
153
176
  delete this.listselection[id];
154
- this.populateSelectedList();
177
+ this.populateList();
178
+ this.dispatchValueChanged();
155
179
  });
156
180
  }
157
181
  const selectedLabel = this.shadowRoot?.getElementById(`selected-label-${(item.id ?? "").replace(/ /g, '-')}`);
@@ -159,16 +183,17 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
159
183
  selectedLabel.addEventListener('click', () => {
160
184
  const id = item.id ?? "";
161
185
  delete this.listselection[id];
162
- this.populateSelectedList();
186
+ this.populateList();
187
+ this.dispatchValueChanged();
163
188
  });
164
189
  }
165
190
  }
166
191
  };
167
192
  this.populateList = () => {
168
193
  let searchInput = this.shadowRoot?.getElementById("search-input");
169
- let filterText = searchInput.value.toLowerCase();
194
+ let filterText = (searchInput?.value ?? "").toLowerCase();
170
195
  console.log("populateList", this.listelements, filterText);
171
- let miltiselectList = this.shadowRoot?.getElementById("select-list");
196
+ let multiselectList = this.shadowRoot?.getElementById("select-list");
172
197
  let innerHTML = '';
173
198
  if (Array.isArray(this.listelements)) {
174
199
  this.listelements.map((item) => {
@@ -184,7 +209,9 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
184
209
  `;
185
210
  });
186
211
  }
187
- miltiselectList.innerHTML = innerHTML;
212
+ if (multiselectList != null) {
213
+ multiselectList.innerHTML = innerHTML;
214
+ }
188
215
  for (const item of this.listelements) {
189
216
  const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? "").replace(/ /g, '-')}`);
190
217
  if (checkbox) {
@@ -194,22 +221,26 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
194
221
  ...this.listselection,
195
222
  [id]: checkbox.checked
196
223
  };
197
- console.log('checklist selected', this.listselection, typeof (this.listselection));
198
- this.dispatchValueChanged();
199
- let multiselectList = this.shadowRoot?.getElementById("select-list");
200
- multiselectList.classList.add("hide");
201
- let dropdownButton = this.shadowRoot?.getElementById("dropdown-button");
202
- 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"
203
230
  });
204
231
  }
205
232
  }
233
+ if (Object.keys(this.listselection).length > 0) {
234
+ this.dispatchValueChanged();
235
+ }
206
236
  };
207
237
  this.loadMode = async () => {
208
238
  console.log("loadMode", this.mode, this.listelements, this.listselection);
209
239
  // this.listelements = Object.keys(this.listselection)
210
- this.populateList();
211
- this.dispatchValueChanged();
240
+ // this.populateList()
241
+ // this.dispatchValueChanged();
212
242
  this.initListeners();
243
+ this.populateList();
213
244
  };
214
245
  }
215
246
  firstUpdated(_changedProperties) {
@@ -227,6 +258,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
227
258
  <div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
228
259
  <input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
229
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>
230
262
  </div>
231
263
  <div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></div>
232
264
  </div>
package/dist/sf-multiselect-search.js.map CHANGED
@@ -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 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\r\n }\r\n\r\n initListeners = () => {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n console.log(\"dropdownButton\", dropDownButton.innerHTML);\r\n dropDownButton.addEventListener('click', (e) => {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n console.log(\"checklistList\", multiselectList.classList);\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 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.populateSelectedList();\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.populateSelectedList();\r\n });\r\n }\r\n }\r\n }\r\n\r\n populateList = () => {\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 miltiselectList = 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 miltiselectList.innerHTML = innerHTML;\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('checklist 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 }\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"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sf-multiselect-search",
3
3
  "private": false,
4
- "version": "1.0.1",
4
+ "version": "1.0.4",
5
5
  "description": "Superflows Multiselect Component",
6
6
  "module": "dist/sf-multiselect-search.js",
7
7
  "outDir": "dist",