@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.
- package/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/address-lookup.component.css +1 -1
- package/assets/css/components/address-lookup.component.css.map +1 -1
- package/assets/css/components/applied-filters.css +1 -1
- package/assets/css/components/applied-filters.css.map +1 -1
- package/assets/css/components/barchart.component.css +1 -1
- package/assets/css/components/barchart.component.css.map +1 -1
- package/assets/css/components/calendar.component.css +1 -1
- package/assets/css/components/calendar.component.css.map +1 -1
- package/assets/css/components/card.component.css +1 -1
- package/assets/css/components/card.component.css.map +1 -1
- package/assets/css/components/carousel.component.css +1 -1
- package/assets/css/components/carousel.component.css.map +1 -1
- package/assets/css/components/collapsible-side.css +1 -1
- package/assets/css/components/collapsible-side.css.map +1 -1
- package/assets/css/components/content.component.css +1 -1
- package/assets/css/components/content.component.css.map +1 -1
- package/assets/css/components/doughnutchart.component.css +1 -1
- package/assets/css/components/doughnutchart.component.css.map +1 -1
- package/assets/css/components/fileupload.css +1 -1
- package/assets/css/components/fileupload.css.map +1 -1
- package/assets/css/components/header.css +1 -1
- package/assets/css/components/header.css.map +1 -1
- package/assets/css/components/inline-edit.css +1 -1
- package/assets/css/components/inline-edit.css.map +1 -1
- package/assets/css/components/inline-edit.preload.css +1 -1
- package/assets/css/components/inline-edit.preload.css.map +1 -1
- package/assets/css/components/multiselect.css +1 -1
- package/assets/css/components/multiselect.css.map +1 -1
- package/assets/css/components/multiselect.preload.css +1 -1
- package/assets/css/components/multiselect.preload.css.map +1 -1
- package/assets/css/components/nav.component.css +1 -1
- package/assets/css/components/nav.component.css.map +1 -1
- package/assets/css/components/notification.css +1 -1
- package/assets/css/components/notification.css.map +1 -1
- package/assets/css/components/pagination.css +1 -1
- package/assets/css/components/pagination.css.map +1 -1
- package/assets/css/components/rank.component.css +1 -1
- package/assets/css/components/rank.component.css.map +1 -1
- package/assets/css/components/rankings.component.css +1 -1
- package/assets/css/components/rankings.component.css.map +1 -1
- package/assets/css/components/rankings.global.css +1 -1
- package/assets/css/components/rankings.global.css.map +1 -1
- package/assets/css/components/slider.css +1 -1
- package/assets/css/components/slider.css.map +1 -1
- package/assets/css/components/split-button.component.css +1 -1
- package/assets/css/components/split-button.component.css.map +1 -1
- package/assets/css/components/table-basic.global.css +1 -1
- package/assets/css/components/table-basic.global.css.map +1 -1
- package/assets/css/components/table.global.css +1 -1
- package/assets/css/components/table.global.css.map +1 -1
- package/assets/css/components/tabs.component.css +1 -1
- package/assets/css/components/tabs.component.css.map +1 -1
- package/assets/css/components/tabs.config.css +1 -1
- package/assets/css/components/tabs.config.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/mobile-core.min.css +1 -1
- package/assets/css/mobile-core.min.css.map +1 -1
- package/assets/css/mobile.min.css +1 -1
- package/assets/css/mobile.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/components/accordion/accordion.component.js +0 -7
- package/assets/js/components/accordion/accordion.component.min.js +3 -4
- package/assets/js/components/accordion/accordion.component.min.js.map +1 -1
- package/assets/js/components/actionbar/actionbar.component.js +8 -9
- package/assets/js/components/actionbar/actionbar.component.min.js +12 -5
- package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.js +0 -3
- package/assets/js/components/address-lookup/address-lookup.component.min.js +4 -4
- package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
- package/assets/js/components/advanced-select/advanced-select.component.min.js +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.js +2 -5
- package/assets/js/components/applied-filters/applied-filters.component.min.js +7 -7
- package/assets/js/components/applied-filters/applied-filters.component.min.js.map +1 -1
- package/assets/js/components/barchart/barchart.component.min.js +2 -2
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/calendar/calendar.component.min.js +2 -2
- package/assets/js/components/card/card.component.min.js +2 -2
- package/assets/js/components/carousel/carousel.component.min.js +2 -2
- package/assets/js/components/collapsible-side/collapsible-side.component.js +0 -5
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +4 -6
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map +1 -1
- package/assets/js/components/content/content.component.min.js +2 -2
- package/assets/js/components/darkmode/darkmode.component.min.js +1 -1
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +2 -2
- package/assets/js/components/fileupload/fileupload.component.js +1 -5
- package/assets/js/components/fileupload/fileupload.component.min.js +5 -6
- package/assets/js/components/fileupload/fileupload.component.min.js.map +1 -1
- package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/header/header.component.js +0 -5
- package/assets/js/components/header/header.component.min.js +4 -6
- package/assets/js/components/header/header.component.min.js.map +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.js +61 -60
- package/assets/js/components/inline-edit/inline-edit.component.min.js +5 -5
- package/assets/js/components/inline-edit/inline-edit.component.min.js.map +1 -1
- package/assets/js/components/marketing/marketing.component.js +0 -4
- package/assets/js/components/marketing/marketing.component.min.js +3 -4
- package/assets/js/components/marketing/marketing.component.min.js.map +1 -1
- package/assets/js/components/menu/menu.component.min.js +1 -1
- package/assets/js/components/milestone/milestone.component.min.js +1 -1
- package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
- package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
- package/assets/js/components/multiselect/multiselect.component.js +88 -11
- package/assets/js/components/multiselect/multiselect.component.min.js +5 -5
- package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
- package/assets/js/components/nav/nav.component.js +2 -4
- package/assets/js/components/nav/nav.component.min.js +8 -7
- package/assets/js/components/nav/nav.component.min.js.map +1 -1
- package/assets/js/components/notification/notification.component.js +1 -4
- package/assets/js/components/notification/notification.component.min.js +6 -6
- package/assets/js/components/notification/notification.component.min.js.map +1 -1
- package/assets/js/components/pagination/pagination.component.js +3 -8
- package/assets/js/components/pagination/pagination.component.min.js +7 -8
- package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
- package/assets/js/components/password-indicator/password-indicator.component.js +19 -0
- package/assets/js/components/password-indicator/password-indicator.component.min.js +7 -0
- package/assets/js/components/password-indicator/password-indicator.component.min.js.map +1 -0
- package/assets/js/components/rank/rank.component.js +2 -2
- package/assets/js/components/rank/rank.component.min.js +4 -5
- package/assets/js/components/rank/rank.component.min.js.map +1 -1
- package/assets/js/components/rankings/rankings.component.js +3 -0
- package/assets/js/components/rankings/rankings.component.min.js +364 -5
- package/assets/js/components/rankings/rankings.component.min.js.map +1 -1
- package/assets/js/components/record-card/record-card.component.min.js +1 -1
- package/assets/js/components/search/search.component.js +0 -4
- package/assets/js/components/search/search.component.min.js +5 -6
- package/assets/js/components/search/search.component.min.js.map +1 -1
- package/assets/js/components/slider/slider.component.js +0 -4
- package/assets/js/components/slider/slider.component.min.js +4 -5
- package/assets/js/components/slider/slider.component.min.js.map +1 -1
- package/assets/js/components/split-button/split-button.component.min.js +2 -2
- package/assets/js/components/table/table.component.min.js +4 -4
- package/assets/js/components/table/table.component.min.js.map +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.js +11 -9
- package/assets/js/components/table-ajax/table-ajax.component.min.js +4 -4
- package/assets/js/components/table-ajax/table-ajax.component.min.js.map +1 -1
- package/assets/js/components/table-basic/table-basic.component.min.js +4 -4
- package/assets/js/components/table-basic/table-basic.component.min.js.map +1 -1
- package/assets/js/components/table-no-submit/table-no-submit.component.js +15 -30
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +4 -4
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js.map +1 -1
- package/assets/js/components/table-submit/table-submit.component.min.js +4 -4
- package/assets/js/components/table-submit/table-submit.component.min.js.map +1 -1
- package/assets/js/components/tabs/tabs.component.js +1 -4
- package/assets/js/components/tabs/tabs.component.min.js +5 -5
- package/assets/js/components/tabs/tabs.component.min.js.map +1 -1
- package/assets/js/components/video-card/video-card.component.min.js +1 -1
- package/assets/js/components/word-count/word-count.component.min.js +1 -1
- package/assets/js/modules/inputs.js +0 -8
- package/assets/js/modules/password-indicator.js +21 -0
- package/assets/js/modules/table.js +28 -2
- package/assets/js/scripts.bundle.js +3 -3
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/js/scripts.js +1 -0
- package/assets/sass/_components.scss +2 -1
- package/assets/sass/_elements.scss +5 -0
- package/assets/sass/_functions/utility-mixins.scss +21 -0
- package/assets/sass/_functions/variables.scss +14 -0
- package/assets/sass/components/actionbar.component.scss +16 -1
- package/assets/sass/components/applied-filters.scss +1 -0
- package/assets/sass/components/collapsible-side.scss +2 -0
- package/assets/sass/components/fileupload.scss +18 -0
- package/assets/sass/components/header.scss +9 -0
- package/assets/sass/components/inline-edit.preload.scss +68 -2
- package/assets/sass/components/inline-edit.scss +7 -0
- package/assets/sass/components/multiselect.preload.scss +10 -0
- package/assets/sass/components/multiselect.scss +62 -4
- package/assets/sass/components/nav.component.scss +15 -0
- package/assets/sass/components/notification.scss +6 -4
- package/assets/sass/components/pagination.scss +6 -0
- package/assets/sass/components/slider.scss +1 -0
- package/assets/sass/components/table-basic.global.scss +1 -1
- package/assets/sass/components/table.global.scss +9 -4
- package/assets/sass/components/tabs.component.scss +4 -0
- package/assets/sass/components/tabs.config.scss +231 -4
- package/assets/sass/elements/admin-panel.scss +37 -9
- package/assets/sass/elements/buttons--global.scss +3 -3
- package/assets/sass/elements/forms.scss +7 -0
- package/assets/sass/elements/hr.scss +50 -0
- package/assets/sass/elements/icons.scss +5 -0
- package/assets/sass/elements/links.scss +2 -2
- package/assets/sass/elements/modal.scss +1 -5
- package/assets/sass/elements/type.scss +6 -9
- package/assets/sass/foundations/reboot.scss +6 -17
- package/assets/sass/foundations/root.scss +2 -0
- package/assets/sass/templates/form.scss +5 -0
- package/assets/ts/components/accordion/accordion.component.ts +0 -8
- package/assets/ts/components/actionbar/actionbar.component.ts +19 -10
- package/assets/ts/components/address-lookup/address-lookup.component.ts +1 -3
- package/assets/ts/components/applied-filters/applied-filters.component.ts +2 -5
- package/assets/ts/components/collapsible-side/collapsible-side.component.ts +1 -5
- package/assets/ts/components/fileupload/fileupload.component.ts +2 -5
- package/assets/ts/components/header/header.component.ts +1 -5
- package/assets/ts/components/inline-edit/inline-edit.component.ts +74 -75
- package/assets/ts/components/marketing/marketing.component.ts +0 -4
- package/assets/ts/components/multiselect/multiselect.component.ts +97 -12
- package/assets/ts/components/nav/nav.component.ts +2 -4
- package/assets/ts/components/notification/notification.component.ts +2 -4
- package/assets/ts/components/pagination/pagination.component.ts +6 -8
- package/assets/ts/components/password-indicator/password-indicator.component.ts +24 -0
- package/assets/ts/components/rank/rank.component.ts +2 -2
- package/assets/ts/components/rankings/rankings.component.ts +4 -0
- package/assets/ts/components/search/search.component.ts +0 -4
- package/assets/ts/components/slider/slider.component.ts +1 -4
- package/assets/ts/components/table-ajax/table-ajax.component.ts +5 -5
- package/assets/ts/components/table-no-submit/table-no-submit.component.ts +10 -21
- package/assets/ts/components/tabs/tabs.component.ts +2 -4
- package/assets/ts/modules/inputs.ts +1 -7
- package/assets/ts/modules/password-indicator.ts +29 -0
- package/assets/ts/modules/table.ts +41 -3
- package/assets/ts/scripts.ts +2 -0
- package/dist/components.es.js +47 -49
- package/dist/components.umd.js +557 -201
- package/package.json +3 -3
- package/src/components/PasswordIndicator/PasswordIndicator.vue +23 -0
- package/assets/css/components/tabs.css +0 -1
- package/assets/css/components/tabs.css.map +0 -1
- package/assets/sass/components/tabs.scss +0 -254
- package/assets/ts/components/accordion/README.md +0 -31
- 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
|
-
|
|
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
|
|
53
|
-
|
|
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 (
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
if (input) {
|
|
76
|
+
input.disabled = true;
|
|
77
|
+
input.blur();
|
|
78
|
+
if (preview) {
|
|
79
|
+
preview.innerHTML = input.value;
|
|
80
|
+
}
|
|
82
81
|
}
|
|
83
82
|
});
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
input.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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.
|
|
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
|
|
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
|
-
|
|
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
|
-
`,
|
|
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":"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"}
|
|
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.
|
|
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
|
|
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{
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
},
|
|
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
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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
|
-
}
|
|
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;
|