@iamproperty/components 7.5.0 → 7.5.1--beta1

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 (226) hide show
  1. package/assets/css/components/actionbar.component.css +1 -1
  2. package/assets/css/components/actionbar.component.css.map +1 -1
  3. package/assets/css/components/address-lookup.component.css +1 -1
  4. package/assets/css/components/address-lookup.component.css.map +1 -1
  5. package/assets/css/components/applied-filters.css +1 -1
  6. package/assets/css/components/applied-filters.css.map +1 -1
  7. package/assets/css/components/barchart.component.css +1 -1
  8. package/assets/css/components/barchart.component.css.map +1 -1
  9. package/assets/css/components/calendar.component.css +1 -1
  10. package/assets/css/components/calendar.component.css.map +1 -1
  11. package/assets/css/components/card.component.css +1 -1
  12. package/assets/css/components/card.component.css.map +1 -1
  13. package/assets/css/components/carousel.component.css +1 -1
  14. package/assets/css/components/carousel.component.css.map +1 -1
  15. package/assets/css/components/collapsible-side.css +1 -1
  16. package/assets/css/components/collapsible-side.css.map +1 -1
  17. package/assets/css/components/content.component.css +1 -1
  18. package/assets/css/components/content.component.css.map +1 -1
  19. package/assets/css/components/doughnutchart.component.css +1 -1
  20. package/assets/css/components/doughnutchart.component.css.map +1 -1
  21. package/assets/css/components/fileupload.css +1 -1
  22. package/assets/css/components/fileupload.css.map +1 -1
  23. package/assets/css/components/header.css +1 -1
  24. package/assets/css/components/header.css.map +1 -1
  25. package/assets/css/components/inline-edit.css +1 -1
  26. package/assets/css/components/inline-edit.css.map +1 -1
  27. package/assets/css/components/inline-edit.preload.css +1 -1
  28. package/assets/css/components/inline-edit.preload.css.map +1 -1
  29. package/assets/css/components/multiselect.css +1 -1
  30. package/assets/css/components/multiselect.css.map +1 -1
  31. package/assets/css/components/multiselect.preload.css +1 -1
  32. package/assets/css/components/multiselect.preload.css.map +1 -1
  33. package/assets/css/components/nav.component.css +1 -1
  34. package/assets/css/components/nav.component.css.map +1 -1
  35. package/assets/css/components/notification.css +1 -1
  36. package/assets/css/components/notification.css.map +1 -1
  37. package/assets/css/components/pagination.css +1 -1
  38. package/assets/css/components/pagination.css.map +1 -1
  39. package/assets/css/components/rank.component.css +1 -1
  40. package/assets/css/components/rank.component.css.map +1 -1
  41. package/assets/css/components/rankings.component.css +1 -1
  42. package/assets/css/components/rankings.component.css.map +1 -1
  43. package/assets/css/components/rankings.global.css +1 -1
  44. package/assets/css/components/rankings.global.css.map +1 -1
  45. package/assets/css/components/slider.css +1 -1
  46. package/assets/css/components/slider.css.map +1 -1
  47. package/assets/css/components/split-button.component.css +1 -1
  48. package/assets/css/components/split-button.component.css.map +1 -1
  49. package/assets/css/components/table-basic.global.css +1 -1
  50. package/assets/css/components/table-basic.global.css.map +1 -1
  51. package/assets/css/components/table.global.css +1 -1
  52. package/assets/css/components/table.global.css.map +1 -1
  53. package/assets/css/components/tabs.component.css +1 -1
  54. package/assets/css/components/tabs.component.css.map +1 -1
  55. package/assets/css/components/tabs.config.css +1 -1
  56. package/assets/css/components/tabs.config.css.map +1 -1
  57. package/assets/css/core.min.css +1 -1
  58. package/assets/css/core.min.css.map +1 -1
  59. package/assets/css/mobile-core.min.css +1 -1
  60. package/assets/css/mobile-core.min.css.map +1 -1
  61. package/assets/css/mobile.min.css +1 -1
  62. package/assets/css/mobile.min.css.map +1 -1
  63. package/assets/css/style.min.css +1 -1
  64. package/assets/css/style.min.css.map +1 -1
  65. package/assets/js/components/accordion/accordion.component.js +0 -7
  66. package/assets/js/components/accordion/accordion.component.min.js +3 -4
  67. package/assets/js/components/accordion/accordion.component.min.js.map +1 -1
  68. package/assets/js/components/actionbar/actionbar.component.js +8 -9
  69. package/assets/js/components/actionbar/actionbar.component.min.js +12 -5
  70. package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
  71. package/assets/js/components/address-lookup/address-lookup.component.js +0 -3
  72. package/assets/js/components/address-lookup/address-lookup.component.min.js +4 -4
  73. package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
  74. package/assets/js/components/advanced-select/advanced-select.component.min.js +1 -1
  75. package/assets/js/components/applied-filters/applied-filters.component.js +2 -5
  76. package/assets/js/components/applied-filters/applied-filters.component.min.js +7 -7
  77. package/assets/js/components/applied-filters/applied-filters.component.min.js.map +1 -1
  78. package/assets/js/components/barchart/barchart.component.min.js +2 -2
  79. package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
  80. package/assets/js/components/calendar/calendar.component.min.js +2 -2
  81. package/assets/js/components/card/card.component.min.js +2 -2
  82. package/assets/js/components/carousel/carousel.component.min.js +2 -2
  83. package/assets/js/components/collapsible-side/collapsible-side.component.js +0 -5
  84. package/assets/js/components/collapsible-side/collapsible-side.component.min.js +4 -6
  85. package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map +1 -1
  86. package/assets/js/components/content/content.component.min.js +2 -2
  87. package/assets/js/components/darkmode/darkmode.component.min.js +1 -1
  88. package/assets/js/components/doughnutchart/doughnutchart.component.min.js +2 -2
  89. package/assets/js/components/fileupload/fileupload.component.js +1 -5
  90. package/assets/js/components/fileupload/fileupload.component.min.js +5 -6
  91. package/assets/js/components/fileupload/fileupload.component.min.js.map +1 -1
  92. package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
  93. package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
  94. package/assets/js/components/header/header.component.js +0 -5
  95. package/assets/js/components/header/header.component.min.js +4 -6
  96. package/assets/js/components/header/header.component.min.js.map +1 -1
  97. package/assets/js/components/inline-edit/inline-edit.component.js +61 -60
  98. package/assets/js/components/inline-edit/inline-edit.component.min.js +5 -5
  99. package/assets/js/components/inline-edit/inline-edit.component.min.js.map +1 -1
  100. package/assets/js/components/marketing/marketing.component.js +0 -4
  101. package/assets/js/components/marketing/marketing.component.min.js +3 -4
  102. package/assets/js/components/marketing/marketing.component.min.js.map +1 -1
  103. package/assets/js/components/menu/menu.component.min.js +1 -1
  104. package/assets/js/components/milestone/milestone.component.min.js +1 -1
  105. package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
  106. package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
  107. package/assets/js/components/multiselect/multiselect.component.js +88 -11
  108. package/assets/js/components/multiselect/multiselect.component.min.js +5 -5
  109. package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
  110. package/assets/js/components/nav/nav.component.js +2 -4
  111. package/assets/js/components/nav/nav.component.min.js +8 -7
  112. package/assets/js/components/nav/nav.component.min.js.map +1 -1
  113. package/assets/js/components/notification/notification.component.js +1 -4
  114. package/assets/js/components/notification/notification.component.min.js +6 -6
  115. package/assets/js/components/notification/notification.component.min.js.map +1 -1
  116. package/assets/js/components/pagination/pagination.component.js +3 -8
  117. package/assets/js/components/pagination/pagination.component.min.js +7 -8
  118. package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
  119. package/assets/js/components/password-indicator/password-indicator.component.js +19 -0
  120. package/assets/js/components/password-indicator/password-indicator.component.min.js +7 -0
  121. package/assets/js/components/password-indicator/password-indicator.component.min.js.map +1 -0
  122. package/assets/js/components/rank/rank.component.js +2 -2
  123. package/assets/js/components/rank/rank.component.min.js +4 -5
  124. package/assets/js/components/rank/rank.component.min.js.map +1 -1
  125. package/assets/js/components/rankings/rankings.component.js +3 -0
  126. package/assets/js/components/rankings/rankings.component.min.js +364 -5
  127. package/assets/js/components/rankings/rankings.component.min.js.map +1 -1
  128. package/assets/js/components/record-card/record-card.component.min.js +1 -1
  129. package/assets/js/components/search/search.component.js +0 -4
  130. package/assets/js/components/search/search.component.min.js +5 -6
  131. package/assets/js/components/search/search.component.min.js.map +1 -1
  132. package/assets/js/components/slider/slider.component.js +0 -4
  133. package/assets/js/components/slider/slider.component.min.js +4 -5
  134. package/assets/js/components/slider/slider.component.min.js.map +1 -1
  135. package/assets/js/components/split-button/split-button.component.min.js +2 -2
  136. package/assets/js/components/table/table.component.min.js +4 -4
  137. package/assets/js/components/table/table.component.min.js.map +1 -1
  138. package/assets/js/components/table-ajax/table-ajax.component.js +11 -9
  139. package/assets/js/components/table-ajax/table-ajax.component.min.js +4 -4
  140. package/assets/js/components/table-ajax/table-ajax.component.min.js.map +1 -1
  141. package/assets/js/components/table-basic/table-basic.component.min.js +4 -4
  142. package/assets/js/components/table-basic/table-basic.component.min.js.map +1 -1
  143. package/assets/js/components/table-no-submit/table-no-submit.component.js +15 -30
  144. package/assets/js/components/table-no-submit/table-no-submit.component.min.js +4 -4
  145. package/assets/js/components/table-no-submit/table-no-submit.component.min.js.map +1 -1
  146. package/assets/js/components/table-submit/table-submit.component.min.js +4 -4
  147. package/assets/js/components/table-submit/table-submit.component.min.js.map +1 -1
  148. package/assets/js/components/tabs/tabs.component.js +1 -4
  149. package/assets/js/components/tabs/tabs.component.min.js +5 -5
  150. package/assets/js/components/tabs/tabs.component.min.js.map +1 -1
  151. package/assets/js/components/video-card/video-card.component.min.js +1 -1
  152. package/assets/js/components/word-count/word-count.component.min.js +1 -1
  153. package/assets/js/modules/inputs.js +0 -8
  154. package/assets/js/modules/password-indicator.js +21 -0
  155. package/assets/js/modules/table.js +28 -2
  156. package/assets/js/scripts.bundle.js +3 -3
  157. package/assets/js/scripts.bundle.js.map +1 -1
  158. package/assets/js/scripts.bundle.min.js +2 -2
  159. package/assets/js/scripts.bundle.min.js.map +1 -1
  160. package/assets/js/scripts.js +1 -0
  161. package/assets/sass/_components.scss +2 -1
  162. package/assets/sass/_elements.scss +5 -0
  163. package/assets/sass/_functions/utility-mixins.scss +21 -0
  164. package/assets/sass/_functions/variables.scss +14 -0
  165. package/assets/sass/components/actionbar.component.scss +16 -1
  166. package/assets/sass/components/applied-filters.scss +1 -0
  167. package/assets/sass/components/collapsible-side.scss +2 -0
  168. package/assets/sass/components/fileupload.scss +18 -0
  169. package/assets/sass/components/header.scss +9 -0
  170. package/assets/sass/components/inline-edit.preload.scss +68 -2
  171. package/assets/sass/components/inline-edit.scss +7 -0
  172. package/assets/sass/components/multiselect.preload.scss +10 -0
  173. package/assets/sass/components/multiselect.scss +62 -4
  174. package/assets/sass/components/nav.component.scss +15 -0
  175. package/assets/sass/components/notification.scss +6 -4
  176. package/assets/sass/components/pagination.scss +6 -0
  177. package/assets/sass/components/slider.scss +1 -0
  178. package/assets/sass/components/table-basic.global.scss +1 -1
  179. package/assets/sass/components/table.global.scss +9 -4
  180. package/assets/sass/components/tabs.component.scss +4 -0
  181. package/assets/sass/components/tabs.config.scss +231 -4
  182. package/assets/sass/elements/admin-panel.scss +37 -9
  183. package/assets/sass/elements/buttons--global.scss +3 -3
  184. package/assets/sass/elements/forms.scss +7 -0
  185. package/assets/sass/elements/hr.scss +50 -0
  186. package/assets/sass/elements/icons.scss +5 -0
  187. package/assets/sass/elements/links.scss +2 -2
  188. package/assets/sass/elements/modal.scss +1 -5
  189. package/assets/sass/elements/type.scss +6 -9
  190. package/assets/sass/foundations/reboot.scss +6 -17
  191. package/assets/sass/foundations/root.scss +2 -0
  192. package/assets/sass/templates/form.scss +5 -0
  193. package/assets/ts/components/accordion/accordion.component.ts +0 -8
  194. package/assets/ts/components/actionbar/actionbar.component.ts +19 -10
  195. package/assets/ts/components/address-lookup/address-lookup.component.ts +1 -3
  196. package/assets/ts/components/applied-filters/applied-filters.component.ts +2 -5
  197. package/assets/ts/components/collapsible-side/collapsible-side.component.ts +1 -5
  198. package/assets/ts/components/fileupload/fileupload.component.ts +2 -5
  199. package/assets/ts/components/header/header.component.ts +1 -5
  200. package/assets/ts/components/inline-edit/inline-edit.component.ts +74 -75
  201. package/assets/ts/components/marketing/marketing.component.ts +0 -4
  202. package/assets/ts/components/multiselect/multiselect.component.ts +97 -12
  203. package/assets/ts/components/nav/nav.component.ts +2 -4
  204. package/assets/ts/components/notification/notification.component.ts +2 -4
  205. package/assets/ts/components/pagination/pagination.component.ts +6 -8
  206. package/assets/ts/components/password-indicator/password-indicator.component.ts +24 -0
  207. package/assets/ts/components/rank/rank.component.ts +2 -2
  208. package/assets/ts/components/rankings/rankings.component.ts +4 -0
  209. package/assets/ts/components/search/search.component.ts +0 -4
  210. package/assets/ts/components/slider/slider.component.ts +1 -4
  211. package/assets/ts/components/table-ajax/table-ajax.component.ts +5 -5
  212. package/assets/ts/components/table-no-submit/table-no-submit.component.ts +10 -21
  213. package/assets/ts/components/tabs/tabs.component.ts +2 -4
  214. package/assets/ts/modules/inputs.ts +1 -7
  215. package/assets/ts/modules/password-indicator.ts +29 -0
  216. package/assets/ts/modules/table.ts +41 -3
  217. package/assets/ts/scripts.ts +2 -0
  218. package/dist/components.es.js +47 -49
  219. package/dist/components.umd.js +557 -201
  220. package/package.json +3 -3
  221. package/src/components/PasswordIndicator/PasswordIndicator.vue +23 -0
  222. package/assets/css/components/tabs.css +0 -1
  223. package/assets/css/components/tabs.css.map +0 -1
  224. package/assets/sass/components/tabs.scss +0 -254
  225. package/assets/ts/components/accordion/README.md +0 -31
  226. package/assets/ts/components/fileupload/README.md +0 -28
@@ -11,14 +11,11 @@ class iamInlineEdit extends HTMLElement {
11
11
  const assetLocation = document.body.hasAttribute('data-assets-location')
12
12
  ? document.body.getAttribute('data-assets-location')
13
13
  : '/assets';
14
- const coreCSS = document.body.hasAttribute('data-core-css')
15
- ? document.body.getAttribute('data-core-css')
16
- : `${assetLocation}/css/core.min.css`;
17
14
  const loadCSS = `@import "${assetLocation}/css/components/inline-edit.css";`;
18
15
  const template = document.createElement('template');
19
16
  template.innerHTML = `
20
17
  <style class="styles">
21
- @import "${coreCSS}";
18
+
22
19
  ${loadCSS}
23
20
  </style>
24
21
  <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
@@ -46,11 +43,13 @@ class iamInlineEdit extends HTMLElement {
46
43
  const statusSaved = this.shadowRoot.querySelector('#saved');
47
44
  const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
48
45
  // Save the original value for later
49
- let originalValue = input.value;
46
+ let originalValue = input ? input.value : '';
50
47
  // cancel
51
48
  cancelButton.addEventListener('click', () => {
52
- input.value = originalValue;
53
- input.blur();
49
+ if (input) {
50
+ input.value = originalValue;
51
+ input.blur();
52
+ }
54
53
  inlineEdit.blur();
55
54
  inlineEdit.classList.remove('was-validated');
56
55
  statusNotSaved.classList.add('d-none');
@@ -71,26 +70,65 @@ class iamInlineEdit extends HTMLElement {
71
70
  detail: { name: input.getAttribute('name'), value: input.value },
72
71
  });
73
72
  inlineEdit.dispatchEvent(saveEvent);
74
- //inlineEdit.setAttribute('data-saving','true');
75
- input.disabled = true;
76
- input.blur();
77
73
  inlineEdit.blur();
78
74
  statusSaving.classList.remove('d-none');
79
- if (preview) {
80
- console.log(input.value);
81
- preview.innerHTML = input.value;
75
+ if (input) {
76
+ input.disabled = true;
77
+ input.blur();
78
+ if (preview) {
79
+ preview.innerHTML = input.value;
80
+ }
82
81
  }
83
82
  });
84
- // Save
85
- if (input.tagName === 'INPUT') {
86
- input.addEventListener('keydown', (event) => {
87
- switch (event.key // change to event.key to key to use the above variable
88
- ) {
89
- case 'Enter':
90
- event.stopPropagation();
91
- event.preventDefault();
92
- saveButton.click();
93
- break;
83
+ if (input) {
84
+ // Save
85
+ if (input.tagName === 'INPUT') {
86
+ input.addEventListener('keydown', (event) => {
87
+ switch (event.key // change to event.key to key to use the above variable
88
+ ) {
89
+ case 'Enter':
90
+ event.stopPropagation();
91
+ event.preventDefault();
92
+ saveButton.click();
93
+ break;
94
+ }
95
+ });
96
+ }
97
+ // enter key saves
98
+ if (input.tagName === 'SELECT') {
99
+ input.addEventListener('change', () => {
100
+ originalValue = input.value;
101
+ const saveEvent = new CustomEvent('inline-edit-save', {
102
+ detail: { name: input.getAttribute('name'), value: input.value },
103
+ });
104
+ inlineEdit.dispatchEvent(saveEvent);
105
+ inlineEdit.setAttribute('data-saving', 'true');
106
+ input.disabled = true;
107
+ input.blur();
108
+ });
109
+ }
110
+ if (input.tagName != 'SELECT') {
111
+ input.addEventListener('focus', () => {
112
+ input.select();
113
+ });
114
+ }
115
+ //blur it should autosave
116
+ input.addEventListener('blur', () => {
117
+ if (input.value != originalValue) {
118
+ if (inlineEdit.hasAttribute('data-autosave')) {
119
+ originalValue = input.value;
120
+ const saveEvent = new CustomEvent('inline-edit-autosave', {
121
+ detail: { name: input.getAttribute('name'), value: input.value },
122
+ });
123
+ inlineEdit.dispatchEvent(saveEvent);
124
+ statusSaving.classList.remove('d-none');
125
+ if (preview) {
126
+ preview.innerHTML = input.value;
127
+ }
128
+ }
129
+ else if (!inlineEdit.querySelector('.inline-feedback')) {
130
+ statusNotSaved.classList.remove('d-none');
131
+ }
94
132
  }
95
133
  });
96
134
  }
@@ -113,43 +151,6 @@ class iamInlineEdit extends HTMLElement {
113
151
  statusNotSaved.classList.add('d-none');
114
152
  }, 1000);
115
153
  });
116
- // enter key saves
117
- if (input.tagName === 'SELECT') {
118
- input.addEventListener('change', () => {
119
- originalValue = input.value;
120
- const saveEvent = new CustomEvent('inline-edit-save', {
121
- detail: { name: input.getAttribute('name'), value: input.value },
122
- });
123
- inlineEdit.dispatchEvent(saveEvent);
124
- inlineEdit.setAttribute('data-saving', 'true');
125
- input.disabled = true;
126
- input.blur();
127
- });
128
- }
129
- if (input.tagName != 'SELECT') {
130
- input.addEventListener('focus', () => {
131
- input.select();
132
- });
133
- }
134
- //blur it should autosave
135
- input.addEventListener('blur', () => {
136
- if (input.value != originalValue) {
137
- if (inlineEdit.hasAttribute('data-autosave')) {
138
- originalValue = input.value;
139
- const saveEvent = new CustomEvent('inline-edit-autosave', {
140
- detail: { name: input.getAttribute('name'), value: input.value },
141
- });
142
- inlineEdit.dispatchEvent(saveEvent);
143
- statusSaving.classList.remove('d-none');
144
- if (preview) {
145
- preview.innerHTML = input.value;
146
- }
147
- }
148
- else if (!inlineEdit.querySelector('.inline-feedback')) {
149
- statusNotSaved.classList.remove('d-none');
150
- }
151
- }
152
- });
153
154
  // checkboxes
154
155
  inlineEdit.addEventListener('change', (event) => {
155
156
  if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
- */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class u extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",d=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
4
+ */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class v extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const n=document.createElement("template");n.innerHTML=`
5
5
  <style class="styles">
6
- @import "${d}";
7
- .d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}@media screen and (min-width: 36em){.d-sm-inline{display:inline !important}.d-sm-inline-block{display:inline-block !important}.d-sm-block{display:block !important}.d-sm-grid{display:grid !important}.d-sm-table{display:table !important}.d-sm-table-row{display:table-row !important}.d-sm-table-cell{display:table-cell !important}.d-sm-flex{display:flex !important}.d-sm-inline-flex{display:inline-flex !important}.d-sm-none{display:none !important}}@media screen and (min-width: 62em){.d-md-inline{display:inline !important}.d-md-inline-block{display:inline-block !important}.d-md-block{display:block !important}.d-md-grid{display:grid !important}.d-md-table{display:table !important}.d-md-table-row{display:table-row !important}.d-md-table-cell{display:table-cell !important}.d-md-flex{display:flex !important}.d-md-inline-flex{display:inline-flex !important}.d-md-none{display:none !important}}:host{max-width:var(--input-max-width, 50rem);display:block;font-weight:normal;margin-bottom:2rem;position:relative}.btns,.status{justify-content:flex-end;gap:.5rem;position:absolute;top:calc(100% + .5rem);right:0}.btns{display:var(--display-btns, flex);justify-content:flex-end}.status{display:var(--display-status, flex)}.btn-action{margin:0}/*# sourceMappingURL=assets/css/components/inline-edit.css.map */
6
+
7
+ @layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}@media screen and (min-width: 36em){.d-sm-inline{display:inline !important}.d-sm-inline-block{display:inline-block !important}.d-sm-block{display:block !important}.d-sm-grid{display:grid !important}.d-sm-table{display:table !important}.d-sm-table-row{display:table-row !important}.d-sm-table-cell{display:table-cell !important}.d-sm-flex{display:flex !important}.d-sm-inline-flex{display:inline-flex !important}.d-sm-none{display:none !important}}@media screen and (min-width: 62em){.d-md-inline{display:inline !important}.d-md-inline-block{display:inline-block !important}.d-md-block{display:block !important}.d-md-grid{display:grid !important}.d-md-table{display:table !important}.d-md-table-row{display:table-row !important}.d-md-table-cell{display:table-cell !important}.d-md-flex{display:flex !important}.d-md-inline-flex{display:inline-flex !important}.d-md-none{display:none !important}}*,*::before,*::after{box-sizing:border-box}:host{max-width:var(--input-max-width, 50rem);display:block;font-weight:normal;margin-bottom:2rem;position:relative}.btns,.status{justify-content:flex-end;gap:.5rem;position:absolute;top:calc(100% + .5rem);right:0}.btns{display:var(--display-btns, flex);justify-content:flex-end}.status{display:var(--display-status, flex)}.btn-action{margin:0}/*# sourceMappingURL=assets/css/components/inline-edit.css.map */
8
8
 
9
9
  </style>
10
10
  <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
@@ -18,5 +18,5 @@
18
18
  <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
19
19
  <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>
20
20
  </div>
21
- `,t.appendChild(e.content.cloneNode(!0))}connectedCallback(){const t=this,i=this.shadowRoot.querySelector("#save"),d=this.shadowRoot.querySelector("#cancel"),e=this.querySelector("input, textarea, select"),s=this.querySelector(".preview"),l=this.shadowRoot.querySelector("#saving"),c=this.shadowRoot.querySelector("#saved"),o=this.shadowRoot.querySelector("#notsaved");let n=e.value;d.addEventListener("click",()=>{e.value=n,e.blur(),t.blur(),t.classList.remove("was-validated"),o.classList.add("d-none");const a=new CustomEvent("inline-edit-cancel",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(a)}),i.addEventListener("click",()=>{if(t.querySelector(":invalid"))return t.classList.add("was-validated"),!1;n=e.value;const a=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(a),e.disabled=!0,e.blur(),t.blur(),l.classList.remove("d-none"),s&&(console.log(e.value),s.innerHTML=e.value)}),e.tagName==="INPUT"&&e.addEventListener("keydown",a=>{switch(a.key){case"Enter":a.stopPropagation(),a.preventDefault(),i.click();break}}),t.addEventListener("inline-edit-saved",()=>{setTimeout(()=>{l.classList.add("d-none"),c.classList.remove("d-none");const a=new CustomEvent("inline-edit-confirmed",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(a)},100),setTimeout(()=>{e.disabled=!1,t.removeAttribute("data-saving"),l.classList.add("d-none"),c.classList.add("d-none"),o.classList.add("d-none")},1e3)}),e.tagName==="SELECT"&&e.addEventListener("change",()=>{n=e.value;const a=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(a),t.setAttribute("data-saving","true"),e.disabled=!0,e.blur()}),e.tagName!="SELECT"&&e.addEventListener("focus",()=>{e.select()}),e.addEventListener("blur",()=>{if(e.value!=n)if(t.hasAttribute("data-autosave")){n=e.value;const a=new CustomEvent("inline-edit-autosave",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(a),l.classList.remove("d-none"),s&&(s.innerHTML=e.value)}else t.querySelector(".inline-feedback")||o.classList.remove("d-none")}),t.addEventListener("change",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest('input[type="checkbox"]')){let r="";Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((m,b)=>{b!=0&&(r+=", "),r+=m.value});const p=new CustomEvent("inline-edit-save",{detail:{name:a.target.closest('input[type="checkbox"]').getAttribute("name"),value:r}});t.dispatchEvent(p)}})}}export{u as default};
21
+ `,e.appendChild(n.content.cloneNode(!0))}connectedCallback(){const e=this,n=this.shadowRoot.querySelector("#save"),c=this.shadowRoot.querySelector("#cancel"),t=this.querySelector("input, textarea, select"),s=this.querySelector(".preview"),o=this.shadowRoot.querySelector("#saving"),d=this.shadowRoot.querySelector("#saved"),l=this.shadowRoot.querySelector("#notsaved");let i=t?t.value:"";c.addEventListener("click",()=>{t&&(t.value=i,t.blur()),e.blur(),e.classList.remove("was-validated"),l.classList.add("d-none");const a=new CustomEvent("inline-edit-cancel",{detail:{name:t.getAttribute("name")}});e.dispatchEvent(a)}),n.addEventListener("click",()=>{if(e.querySelector(":invalid"))return e.classList.add("was-validated"),!1;i=t.value;const a=new CustomEvent("inline-edit-save",{detail:{name:t.getAttribute("name"),value:t.value}});e.dispatchEvent(a),e.blur(),o.classList.remove("d-none"),t&&(t.disabled=!0,t.blur(),s&&(s.innerHTML=t.value))}),t&&(t.tagName==="INPUT"&&t.addEventListener("keydown",a=>{switch(a.key){case"Enter":a.stopPropagation(),a.preventDefault(),n.click();break}}),t.tagName==="SELECT"&&t.addEventListener("change",()=>{i=t.value;const a=new CustomEvent("inline-edit-save",{detail:{name:t.getAttribute("name"),value:t.value}});e.dispatchEvent(a),e.setAttribute("data-saving","true"),t.disabled=!0,t.blur()}),t.tagName!="SELECT"&&t.addEventListener("focus",()=>{t.select()}),t.addEventListener("blur",()=>{if(t.value!=i)if(e.hasAttribute("data-autosave")){i=t.value;const a=new CustomEvent("inline-edit-autosave",{detail:{name:t.getAttribute("name"),value:t.value}});e.dispatchEvent(a),o.classList.remove("d-none"),s&&(s.innerHTML=t.value)}else e.querySelector(".inline-feedback")||l.classList.remove("d-none")})),e.addEventListener("inline-edit-saved",()=>{setTimeout(()=>{o.classList.add("d-none"),d.classList.remove("d-none");const a=new CustomEvent("inline-edit-confirmed",{detail:{name:t.getAttribute("name")}});e.dispatchEvent(a)},100),setTimeout(()=>{t.disabled=!1,e.removeAttribute("data-saving"),o.classList.add("d-none"),d.classList.add("d-none"),l.classList.add("d-none")},1e3)}),e.addEventListener("change",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest('input[type="checkbox"]')){let r="";Array.from(e.querySelectorAll('label input[type="checkbox"]:checked')).forEach((p,m)=>{m!=0&&(r+=", "),r+=p.value});const b=new CustomEvent("inline-edit-save",{detail:{name:a.target.closest('input[type="checkbox"]').getAttribute("name"),value:r}});e.dispatchEvent(b)}})}}export{v as default};
22
22
  //# sourceMappingURL=inline-edit.component.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'inline edit',\n});\nclass iamInlineEdit extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css')\n ? document.body.getAttribute('data-core-css')\n : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/inline-edit.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n \n <slot></slot>\n <div class=\"btns\" part=\"btns\">\n <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\n </div>\n <div class=\"status pe-none\" part=\"status\">\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\n </div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const inlineEdit = this;\n const saveButton = this.shadowRoot.querySelector('#save');\n const cancelButton = this.shadowRoot.querySelector('#cancel');\n const input = this.querySelector('input, textarea, select');\n const preview = this.querySelector('.preview');\n const statusSaving = this.shadowRoot.querySelector('#saving');\n const statusSaved = this.shadowRoot.querySelector('#saved');\n const statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n // Save the original value for later\n let originalValue = input.value;\n // cancel\n cancelButton.addEventListener('click', () => {\n input.value = originalValue;\n input.blur();\n inlineEdit.blur();\n inlineEdit.classList.remove('was-validated');\n statusNotSaved.classList.add('d-none');\n const cancelEvent = new CustomEvent('inline-edit-cancel', {\n detail: { name: input.getAttribute('name') },\n });\n inlineEdit.dispatchEvent(cancelEvent);\n });\n // Save\n saveButton.addEventListener('click', () => {\n if (inlineEdit.querySelector(':invalid')) {\n inlineEdit.classList.add('was-validated');\n return false;\n }\n originalValue = input.value;\n // dispatch save event\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n //inlineEdit.setAttribute('data-saving','true');\n input.disabled = true;\n input.blur();\n inlineEdit.blur();\n statusSaving.classList.remove('d-none');\n if (preview) {\n console.log(input.value);\n preview.innerHTML = input.value;\n }\n });\n // Save\n if (input.tagName === 'INPUT') {\n input.addEventListener('keydown', (event) => {\n switch (event.key // change to event.key to key to use the above variable\n ) {\n case 'Enter':\n event.stopPropagation();\n event.preventDefault();\n saveButton.click();\n break;\n }\n });\n }\n // Saved\n inlineEdit.addEventListener('inline-edit-saved', () => {\n setTimeout(() => {\n statusSaving.classList.add('d-none');\n statusSaved.classList.remove('d-none');\n const confirmEvent = new CustomEvent('inline-edit-confirmed', {\n detail: { name: input.getAttribute('name') },\n });\n inlineEdit.dispatchEvent(confirmEvent);\n }, 100);\n // Reset to normal\n setTimeout(() => {\n input.disabled = false;\n inlineEdit.removeAttribute('data-saving');\n statusSaving.classList.add('d-none');\n statusSaved.classList.add('d-none');\n statusNotSaved.classList.add('d-none');\n }, 1000);\n });\n // enter key saves\n if (input.tagName === 'SELECT') {\n input.addEventListener('change', () => {\n originalValue = input.value;\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n inlineEdit.setAttribute('data-saving', 'true');\n input.disabled = true;\n input.blur();\n });\n }\n if (input.tagName != 'SELECT') {\n input.addEventListener('focus', () => {\n input.select();\n });\n }\n //blur it should autosave\n input.addEventListener('blur', () => {\n if (input.value != originalValue) {\n if (inlineEdit.hasAttribute('data-autosave')) {\n originalValue = input.value;\n const saveEvent = new CustomEvent('inline-edit-autosave', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n statusSaving.classList.remove('d-none');\n if (preview) {\n preview.innerHTML = input.value;\n }\n }\n else if (!inlineEdit.querySelector('.inline-feedback')) {\n statusNotSaved.classList.remove('d-none');\n }\n }\n });\n // checkboxes\n inlineEdit.addEventListener('change', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n let saveValue = '';\n Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n if (index != 0)\n saveValue += ', ';\n saveValue += checkbox.value;\n });\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: {\n name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'),\n value: saveValue,\n },\n });\n inlineEdit.dispatchEvent(saveEvent);\n }\n });\n }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","assetLocation","coreCSS","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","cancelEvent","saveEvent","event","confirmEvent","saveValue","checkbox","index"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,aACb,CAAC,EACD,MAAMA,UAAsB,WAAY,CACpC,aAAc,CACV,MAAK,EACL,MAAMC,EAAa,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAC/CC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,CAAa,oBAEhBE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAedF,EAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC3D,CACA,mBAAoB,CAEhB,MAAMC,EAAa,KACbC,EAAa,KAAK,WAAW,cAAc,OAAO,EAClDC,EAAe,KAAK,WAAW,cAAc,SAAS,EACtDC,EAAQ,KAAK,cAAc,yBAAyB,EACpDC,EAAU,KAAK,cAAc,UAAU,EACvCC,EAAe,KAAK,WAAW,cAAc,SAAS,EACtDC,EAAc,KAAK,WAAW,cAAc,QAAQ,EACpDC,EAAiB,KAAK,WAAW,cAAc,WAAW,EAEhE,IAAIC,EAAgBL,EAAM,MAE1BD,EAAa,iBAAiB,QAAS,IAAM,CACzCC,EAAM,MAAQK,EACdL,EAAM,KAAI,EACVH,EAAW,KAAI,EACfA,EAAW,UAAU,OAAO,eAAe,EAC3CO,EAAe,UAAU,IAAI,QAAQ,EACrC,MAAME,EAAc,IAAI,YAAY,qBAAsB,CACtD,OAAQ,CAAE,KAAMN,EAAM,aAAa,MAAM,CAAC,CAC1D,CAAa,EACDH,EAAW,cAAcS,CAAW,CACxC,CAAC,EAEDR,EAAW,iBAAiB,QAAS,IAAM,CACvC,GAAID,EAAW,cAAc,UAAU,EACnC,OAAAA,EAAW,UAAU,IAAI,eAAe,EACjC,GAEXQ,EAAgBL,EAAM,MAEtB,MAAMO,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CAC9E,CAAa,EACDH,EAAW,cAAcU,CAAS,EAElCP,EAAM,SAAW,GACjBA,EAAM,KAAI,EACVH,EAAW,KAAI,EACfK,EAAa,UAAU,OAAO,QAAQ,EAClCD,IACA,QAAQ,IAAID,EAAM,KAAK,EACvBC,EAAQ,UAAYD,EAAM,MAElC,CAAC,EAEGA,EAAM,UAAY,SAClBA,EAAM,iBAAiB,UAAYQ,GAAU,CACzC,OAAQA,EAAM,IAC9B,CACoB,IAAK,QACDA,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpBV,EAAW,MAAK,EAChB,KACxB,CACY,CAAC,EAGLD,EAAW,iBAAiB,oBAAqB,IAAM,CACnD,WAAW,IAAM,CACbK,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,OAAO,QAAQ,EACrC,MAAMM,EAAe,IAAI,YAAY,wBAAyB,CAC1D,OAAQ,CAAE,KAAMT,EAAM,aAAa,MAAM,CAAC,CAC9D,CAAiB,EACDH,EAAW,cAAcY,CAAY,CACzC,EAAG,GAAG,EAEN,WAAW,IAAM,CACbT,EAAM,SAAW,GACjBH,EAAW,gBAAgB,aAAa,EACxCK,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,IAAI,QAAQ,EAClCC,EAAe,UAAU,IAAI,QAAQ,CACzC,EAAG,GAAI,CACX,CAAC,EAEGJ,EAAM,UAAY,UAClBA,EAAM,iBAAiB,SAAU,IAAM,CACnCK,EAAgBL,EAAM,MACtB,MAAMO,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CAClF,CAAiB,EACDH,EAAW,cAAcU,CAAS,EAClCV,EAAW,aAAa,cAAe,MAAM,EAC7CG,EAAM,SAAW,GACjBA,EAAM,KAAI,CACd,CAAC,EAEDA,EAAM,SAAW,UACjBA,EAAM,iBAAiB,QAAS,IAAM,CAClCA,EAAM,OAAM,CAChB,CAAC,EAGLA,EAAM,iBAAiB,OAAQ,IAAM,CACjC,GAAIA,EAAM,OAASK,EACf,GAAIR,EAAW,aAAa,eAAe,EAAG,CAC1CQ,EAAgBL,EAAM,MACtB,MAAMO,EAAY,IAAI,YAAY,uBAAwB,CACtD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CACtF,CAAqB,EACDH,EAAW,cAAcU,CAAS,EAClCL,EAAa,UAAU,OAAO,QAAQ,EAClCD,IACAA,EAAQ,UAAYD,EAAM,MAElC,MACUH,EAAW,cAAc,kBAAkB,GACjDO,EAAe,UAAU,OAAO,QAAQ,CAGpD,CAAC,EAEDP,EAAW,iBAAiB,SAAWW,GAAU,CAC7C,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,wBAAwB,EAAG,CAChG,IAAIE,EAAY,GAChB,MAAM,KAAKb,EAAW,iBAAiB,sCAAsC,CAAC,EAAE,QAAQ,CAACc,EAAUC,IAAU,CACrGA,GAAS,IACTF,GAAa,MACjBA,GAAaC,EAAS,KAC1B,CAAC,EACD,MAAMJ,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CACJ,KAAMC,EAAM,OAAO,QAAQ,wBAAwB,EAAE,aAAa,MAAM,EACxE,MAAOE,CAC/B,CACA,CAAiB,EACDb,EAAW,cAAcU,CAAS,CACtC,CACJ,CAAC,CACL,CACJ"}
1
+ {"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'inline edit',\n});\nclass iamInlineEdit extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/inline-edit.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n \n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n \n <slot></slot>\n <div class=\"btns\" part=\"btns\">\n <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\n </div>\n <div class=\"status pe-none\" part=\"status\">\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\n <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\n </div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const inlineEdit = this;\n const saveButton = this.shadowRoot.querySelector('#save');\n const cancelButton = this.shadowRoot.querySelector('#cancel');\n const input = this.querySelector('input, textarea, select');\n const preview = this.querySelector('.preview');\n const statusSaving = this.shadowRoot.querySelector('#saving');\n const statusSaved = this.shadowRoot.querySelector('#saved');\n const statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n // Save the original value for later\n let originalValue = input ? input.value : '';\n // cancel\n cancelButton.addEventListener('click', () => {\n if (input) {\n input.value = originalValue;\n input.blur();\n }\n inlineEdit.blur();\n inlineEdit.classList.remove('was-validated');\n statusNotSaved.classList.add('d-none');\n const cancelEvent = new CustomEvent('inline-edit-cancel', {\n detail: { name: input.getAttribute('name') },\n });\n inlineEdit.dispatchEvent(cancelEvent);\n });\n // Save\n saveButton.addEventListener('click', () => {\n if (inlineEdit.querySelector(':invalid')) {\n inlineEdit.classList.add('was-validated');\n return false;\n }\n originalValue = input.value;\n // dispatch save event\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n inlineEdit.blur();\n statusSaving.classList.remove('d-none');\n if (input) {\n input.disabled = true;\n input.blur();\n if (preview) {\n preview.innerHTML = input.value;\n }\n }\n });\n if (input) {\n // Save\n if (input.tagName === 'INPUT') {\n input.addEventListener('keydown', (event) => {\n switch (event.key // change to event.key to key to use the above variable\n ) {\n case 'Enter':\n event.stopPropagation();\n event.preventDefault();\n saveButton.click();\n break;\n }\n });\n }\n // enter key saves\n if (input.tagName === 'SELECT') {\n input.addEventListener('change', () => {\n originalValue = input.value;\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n inlineEdit.setAttribute('data-saving', 'true');\n input.disabled = true;\n input.blur();\n });\n }\n if (input.tagName != 'SELECT') {\n input.addEventListener('focus', () => {\n input.select();\n });\n }\n //blur it should autosave\n input.addEventListener('blur', () => {\n if (input.value != originalValue) {\n if (inlineEdit.hasAttribute('data-autosave')) {\n originalValue = input.value;\n const saveEvent = new CustomEvent('inline-edit-autosave', {\n detail: { name: input.getAttribute('name'), value: input.value },\n });\n inlineEdit.dispatchEvent(saveEvent);\n statusSaving.classList.remove('d-none');\n if (preview) {\n preview.innerHTML = input.value;\n }\n }\n else if (!inlineEdit.querySelector('.inline-feedback')) {\n statusNotSaved.classList.remove('d-none');\n }\n }\n });\n }\n // Saved\n inlineEdit.addEventListener('inline-edit-saved', () => {\n setTimeout(() => {\n statusSaving.classList.add('d-none');\n statusSaved.classList.remove('d-none');\n const confirmEvent = new CustomEvent('inline-edit-confirmed', {\n detail: { name: input.getAttribute('name') },\n });\n inlineEdit.dispatchEvent(confirmEvent);\n }, 100);\n // Reset to normal\n setTimeout(() => {\n input.disabled = false;\n inlineEdit.removeAttribute('data-saving');\n statusSaving.classList.add('d-none');\n statusSaved.classList.add('d-none');\n statusNotSaved.classList.add('d-none');\n }, 1000);\n });\n // checkboxes\n inlineEdit.addEventListener('change', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n let saveValue = '';\n Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n if (index != 0)\n saveValue += ', ';\n saveValue += checkbox.value;\n });\n const saveEvent = new CustomEvent('inline-edit-save', {\n detail: {\n name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'),\n value: saveValue,\n },\n });\n inlineEdit.dispatchEvent(saveEvent);\n }\n });\n }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","cancelEvent","saveEvent","event","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}
@@ -11,14 +11,10 @@ class iamMarketing extends HTMLElement {
11
11
  const assetLocation = document.body.hasAttribute('data-assets-location')
12
12
  ? document.body.getAttribute('data-assets-location')
13
13
  : '/assets';
14
- const coreCSS = document.body.hasAttribute('data-core-css')
15
- ? document.body.getAttribute('data-core-css')
16
- : `${assetLocation}/css/core.min.css`;
17
14
  const loadCSS = `@import "${assetLocation}/css/components/marketing.component.css";`;
18
15
  const template = document.createElement('template');
19
16
  template.innerHTML = `
20
17
  <style>
21
- @import "${coreCSS}";
22
18
  ${loadCSS}
23
19
 
24
20
  </style>
@@ -1,9 +1,8 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
- */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
4
+ */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
5
5
  <style>
6
- @import "${i}";
7
6
  :host{display:flex;position:relative;overflow:hidden;position:relative;overflow:hidden;margin-bottom:2rem;min-width:100%;padding:2rem;border-radius:.5rem;text-align:center;align-items:flex-end;padding-top:33%}figure{position:absolute;height:100%;width:100%;top:0;left:0;margin:0}figure:after{content:"";inset:0;height:100%;width:100%;position:absolute;background-image:linear-gradient(15deg, #00313c 0%, #03404f 28.7%, #03404f 31.5%, #044353 60.1%, #1bb1dc 83.2%, rgba(28, 182, 226, 0.486) 100%);opacity:.85;z-index:1}img{pointer-events:none;position:absolute;inset:0;width:100%;max-height:auto;z-index:2;-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));mix-blend-mode:multiply}::slotted(*){position:relative;z-index:2;text-align:center}/*# sourceMappingURL=assets/css/components/marketing.component.css.map */
8
7
 
9
8
 
@@ -13,5 +12,5 @@
13
12
 
14
13
  <slot></slot>
15
14
  </div>
16
- `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){this.classList.add("invert-colours"),this.hasAttribute("data-img")&&this.shadowRoot.querySelector(".marketing").insertAdjacentHTML("afterbegin",`<figure><img src="${this.getAttribute("data-img")}" alt="" /></figure>`)}}export{o as default};
15
+ `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){this.classList.add("invert-colours"),this.hasAttribute("data-img")&&this.shadowRoot.querySelector(".marketing").insertAdjacentHTML("afterbegin",`<figure><img src="${this.getAttribute("data-img")}" alt="" /></figure>`)}}export{e as default};
17
16
  //# sourceMappingURL=marketing.component.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Marketing',\n});\nclass iamMarketing extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css')\n ? document.body.getAttribute('data-core-css')\n : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/marketing.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n \n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <div class=\"marketing\">\n \n <slot></slot>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n this.classList.add('invert-colours');\n if (this.hasAttribute('data-img')) {\n this.shadowRoot\n .querySelector('.marketing')\n .insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n }\n }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","assetLocation","coreCSS","template"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,CAAa,oBAEhBE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUd,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,YAAY,EAC1B,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,CAAC,sBAAsB,CAEtH,CACJ"}
1
+ {"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Marketing',\n});\nclass iamMarketing extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/marketing.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${loadCSS}\n \n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <div class=\"marketing\">\n \n <slot></slot>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n this.classList.add('invert-colours');\n if (this.hasAttribute('data-img')) {\n this.shadowRoot\n .querySelector('.marketing')\n .insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n }\n }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","template"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,YAAY,EAC1B,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,CAAC,sBAAsB,CAEtH,CACJ"}
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
4
  */class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const r=`@import "${document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets"}/css/components/menu.component.css";`,s=document.createElement("template");s.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
4
  */const l=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},m=(t,n,a)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:n}),a.forEach(e=>{t.addEventListener(e,function(s){const d={event:e,element:n,target:s.target};Object.keys(s.detail).forEach(o=>{const i=s.detail[o];d[o]=i}),window.dataLayer.push(d)})}),!0),p=function(t){const n=t.dataset.status;if(!n)return;const a=t.shadowRoot.querySelector(".milestone-wrap"),e=document.createElement("span");e.setAttribute("part","status"),e.classList.add("milestone-status"),e.innerHTML=`${n} Step`,n==="Current"&&t.classList.add("current"),a.insertAdjacentElement("afterbegin",e)},u=function(t){const n=t.shadowRoot.querySelector(".task-wrap"),a=t.dataset.items?JSON.parse(t.dataset.items):[];a.length&&(a.forEach(e=>{const s=document.createElement("details"),d=document.createElement("summary"),o=document.createElement("div"),i=document.createElement("p");o.classList.add("task-details"),d.innerHTML=e.name,e.date_completed&&d.classList.add("complete"),s.appendChild(d),e.description&&(i.innerHTML=e.description,o.appendChild(i)),e.actions.length&&o.appendChild(h(e.actions,d)),s.appendChild(o),n.insertAdjacentElement("beforeend",s),s.addEventListener("click",()=>{s?.hasAttribute("open")?r("milestone-item-closed",e.name,t):r("milestone-item-opened",e.name,t)})}),t.appendChild(n))},r=function(t,n,a){const e=new CustomEvent(t,{detail:{title:n}});a.dispatchEvent(e)},h=function(t,n){const a=document.createElement("ul"),e=t.length,d=t.filter(o=>o.date_completed).length||0;if(!(e<1))return n.innerHTML+=` (${d}/${e})`,t.forEach(o=>{const i=document.createElement("li"),c=document.createElement("span");o.date_completed&&(i.classList.add("complete"),c.classList.add("action-date"),c.innerHTML=o.date_completed),i.innerHTML=o.action,i.appendChild(c),a.appendChild(i)}),a},w=function(t){p(t),u(t)};l("iam-milestone");class L extends HTMLElement{constructor(){var n;super(),this.attachShadow({mode:"open"});const a=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${a}/css/core.min.css`,s=document.createElement("template");s.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
4
  */const r=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},l=(t,s,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:s}),e.forEach(n=>{t.addEventListener(n,function(o){const a={event:n,element:s,target:o.target};Object.keys(o.detail).forEach(i=>{const d=o.detail[i];a[i]=d}),window.dataLayer.push(a)})}),!0),u=function(t){if(!t.dataset.showAllToggle)return;const e=document.createElement("button");e.innerHTML="Show next steps",e.classList.add("btn","btn-tertiary","show-all-toggle"),t.appendChild(e),e.addEventListener("click",()=>{t.classList.contains("show-all")?(e.innerHTML="Show next steps",t.classList.remove("show-all"),c("hide-future-items",t)):(e.innerHTML="Hide next steps",t.classList.add("show-all"),c("show-future-items",t))})},c=function(t,s){const e=new CustomEvent(t,{});s.dispatchEvent(e)},h=function(t){u(t)};r("iam-milestone-group");class m extends HTMLElement{constructor(){var s;super();const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",n=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v7.5.0
2
+ * iamKey v7.5.1--beta1
3
3
  * Copyright 2022-2025 iamproperty
4
4
  */const g=c=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:c})},y=(c,e,u)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:e}),u.forEach(l=>{c.addEventListener(l,function(i){const n={event:l,element:e,target:i.target};Object.keys(i.detail).forEach(d=>{const t=i.detail[d];n[d]=t}),window.dataLayer.push(n)})}),!0);g("iam-multi-step");class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
5
5
  <style>
@@ -1,3 +1,13 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import Cookies from 'js-cookie';
1
11
  // Data layer Web component created
2
12
  window.dataLayer = window.dataLayer || [];
3
13
  window.dataLayer.push({
@@ -11,14 +21,11 @@ class iamMultiselect extends HTMLElement {
11
21
  const assetLocation = document.body.hasAttribute('data-assets-location')
12
22
  ? document.body.getAttribute('data-assets-location')
13
23
  : '/assets';
14
- const coreCSS = document.body.hasAttribute('data-core-css')
15
- ? document.body.getAttribute('data-core-css')
16
- : `${assetLocation}/css/core.min.css`;
17
24
  const loadCSS = `@import "${assetLocation}/css/components/multiselect.css";`;
18
25
  const template = document.createElement('template');
19
26
  template.innerHTML = `
20
27
  <style>
21
- @import "${coreCSS}";
28
+
22
29
  ${loadCSS}
23
30
  ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
24
31
  </style>
@@ -48,6 +55,7 @@ class iamMultiselect extends HTMLElement {
48
55
  const button = multiselect.shadowRoot.querySelector('#clear');
49
56
  let order = 0;
50
57
  const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');
58
+ const ajaxURL = this.getAttribute('data-url');
51
59
  innerLabel.innerHTML = multiselect.getAttribute('data-label');
52
60
  if (multiselect.hasAttribute('placeholder')) {
53
61
  search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
@@ -89,6 +97,9 @@ class iamMultiselect extends HTMLElement {
89
97
  inputToSet.closest('label').setAttribute('slot', 'checked');
90
98
  inputToSet.closest('label').setAttribute('style', `--order:${order};`);
91
99
  inputToSet.closest('label').setAttribute('data-order', order);
100
+ if (inputToSet.closest('[data-value]')) {
101
+ inputToSet.closest('[data-value]').setAttribute('data-value', inputToSet.closest('label').textContent);
102
+ }
92
103
  }
93
104
  // check for errors
94
105
  if (multiselect.querySelector('label[slot="checked"]')) {
@@ -109,7 +120,7 @@ class iamMultiselect extends HTMLElement {
109
120
  setItem(checkbox);
110
121
  });
111
122
  // Filter list
112
- search.addEventListener('input', () => {
123
+ const filterList = () => {
113
124
  Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
114
125
  const checkbox = label.querySelector('input');
115
126
  const searchValue = checkbox.value;
@@ -122,6 +133,16 @@ class iamMultiselect extends HTMLElement {
122
133
  label.setAttribute('slot', 'notmatched');
123
134
  }
124
135
  });
136
+ };
137
+ search.addEventListener('input', () => {
138
+ if (multiselect.hasAttribute('data-url')) {
139
+ if (search.value.length == 3) {
140
+ searchAjax(search.value);
141
+ }
142
+ }
143
+ else {
144
+ filterList();
145
+ }
125
146
  });
126
147
  // Add a delayed hover effect for non hover devices
127
148
  let hoverTimeout;
@@ -142,24 +163,42 @@ class iamMultiselect extends HTMLElement {
142
163
  setItem(checkbox);
143
164
  });
144
165
  }
166
+ if (multiselect.hasAttribute('data-url')) {
167
+ Array.from(multiselect.querySelectorAll(`label:has(input[type="checkbox"]:not(:checked))`)).forEach((checkbox) => {
168
+ checkbox.remove();
169
+ });
170
+ }
145
171
  }, 200);
146
172
  clearTimeout(hoverTimeout);
147
173
  hoverTimeout = setTimeout(function () {
148
174
  multiselect.classList.remove('hover');
149
- }, 1000);
175
+ }, 500);
150
176
  });
151
177
  // Set items
152
178
  multiselect.addEventListener('change', (event) => {
153
179
  if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
154
180
  const checkbox = event.target.closest('input[type="checkbox"]');
181
+ if (multiselect.hasAttribute('data-single')) {
182
+ Array.from(multiselect.querySelectorAll(`label[slot="checked"] input`)).forEach((inputToCancel) => {
183
+ inputToCancel.checked = false;
184
+ inputToCancel.closest('label').removeAttribute('slot');
185
+ inputToCancel.closest('label').removeAttribute('style');
186
+ inputToCancel.closest('label').removeAttribute('data-order');
187
+ });
188
+ }
155
189
  setItem(checkbox);
156
190
  search.value = '';
157
- search.focus();
158
- clearTimeout(hoverTimeout);
159
- multiselect.classList.add('hover');
160
- hoverTimeout = setTimeout(function () {
191
+ if (!multiselect.hasAttribute('data-single')) {
192
+ search.focus();
193
+ clearTimeout(hoverTimeout);
194
+ multiselect.classList.add('hover');
195
+ hoverTimeout = setTimeout(function () {
196
+ multiselect.classList.remove('hover');
197
+ }, 5000);
198
+ }
199
+ else {
161
200
  multiselect.classList.remove('hover');
162
- }, 5000);
201
+ }
163
202
  }
164
203
  });
165
204
  // Clear all
@@ -292,6 +331,44 @@ class iamMultiselect extends HTMLElement {
292
331
  multiselect.addEventListener('mouseup', () => {
293
332
  wrapper.removeAttribute('data-mousedown');
294
333
  });
334
+ const searchAjax = (searchterm) => __awaiter(this, void 0, void 0, function* () {
335
+ const searchAjaxURL = `${ajaxURL}${encodeURI(searchterm)}`;
336
+ // Setup controller vars if not already set
337
+ if (!window.controller)
338
+ window.controller = [];
339
+ // Abort if controller already present for this url
340
+ if (window.controller[searchAjaxURL])
341
+ window.controller[searchAjaxURL].abort();
342
+ // Create a new controller so it can be aborted if new fetch made
343
+ window.controller[searchAjaxURL] = new AbortController();
344
+ const { signal } = controller[searchAjaxURL];
345
+ try {
346
+ yield fetch(searchAjaxURL, {
347
+ signal: signal,
348
+ method: 'get',
349
+ credentials: 'same-origin',
350
+ headers: new Headers({
351
+ 'Content-Type': 'application/json',
352
+ Accept: 'application/json',
353
+ 'X-Requested-With': 'XMLHttpRequest',
354
+ 'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
355
+ }),
356
+ })
357
+ .then((response) => response.json())
358
+ .then((response) => {
359
+ let items = '';
360
+ for (let i = 0; i < response['data'].length; i++) {
361
+ items += `<label class="tag"><input type="checkbox" name="${multiselect.hasAttribute('data-name') ? multiselect.getAttribute('data-name') : 'tags'}" value="${response['data'][i].value}"/>${response['data'][i].title}</label>`;
362
+ }
363
+ multiselect.insertAdjacentHTML('beforeend', `${items}`);
364
+ filterList();
365
+ return response;
366
+ });
367
+ }
368
+ catch (error) {
369
+ console.log(error);
370
+ }
371
+ });
295
372
  }
296
373
  }
297
374
  export default iamMultiselect;