@iamproperty/components 7.1.0--beta1 → 7.1.0--beta3
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.css.map +1 -1
- package/assets/css/components/actionbar.global.css.map +1 -1
- package/assets/css/components/address-lookup.css.map +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/card.component.css +1 -1
- package/assets/css/components/card.component.css.map +1 -1
- package/assets/css/components/card.module.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/carousel.config.css.map +1 -1
- package/assets/css/components/charts.config.css.map +1 -1
- package/assets/css/components/charts.css +1 -1
- package/assets/css/components/charts.css.map +1 -1
- package/assets/css/components/charts.module.css +1 -1
- package/assets/css/components/charts.module.css.map +1 -1
- package/assets/css/components/collapsible-side.css.map +1 -1
- package/assets/css/components/fileupload.css.map +1 -1
- package/assets/css/components/filter-card.component.css.map +1 -1
- package/assets/css/components/header.css.map +1 -1
- package/assets/css/components/inline-edit.css.map +1 -1
- package/assets/css/components/inline-edit.preload.css.map +1 -1
- package/assets/css/components/marketing.css.map +1 -1
- package/assets/css/components/multi-step.component.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.map +1 -1
- package/assets/css/components/nav.css +1 -1
- package/assets/css/components/nav.css.map +1 -1
- package/assets/css/components/nav.docs.css.map +1 -1
- package/assets/css/components/nav.global.css +1 -1
- package/assets/css/components/nav.global.css.map +1 -1
- package/assets/css/components/nav.old.css +1 -1
- package/assets/css/components/nav.old.css.map +1 -1
- package/assets/css/components/nav.preload.css.map +1 -1
- package/assets/css/components/notification.css.map +1 -1
- package/assets/css/components/notification.global.css.map +1 -1
- package/assets/css/components/pagination.css.map +1 -1
- package/assets/css/components/property-searchbar.css +1 -1
- package/assets/css/components/property-searchbar.css.map +1 -1
- package/assets/css/components/record-card.component.css.map +1 -1
- package/assets/css/components/slider.css.map +1 -1
- package/assets/css/components/snapshot.css.map +1 -1
- package/assets/css/components/stepper.css.map +1 -1
- package/assets/css/components/table.css +1 -1
- package/assets/css/components/table.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.css.map +1 -1
- package/assets/css/components/testimonial.css.map +1 -1
- package/assets/css/components/timeline.css +1 -1
- package/assets/css/components/timeline.css.map +1 -1
- package/assets/css/components/video-card.component.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.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/_global.js +8 -8
- package/assets/js/components/accordion/accordion.component.js +13 -10
- package/assets/js/components/accordion/accordion.component.min.js +4 -4
- package/assets/js/components/accordion/accordion.component.min.js.map +1 -1
- package/assets/js/components/actionbar/actionbar.component.js +97 -83
- package/assets/js/components/actionbar/actionbar.component.min.js +5 -5
- package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.js +30 -26
- 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/applied-filters/applied-filters.component.js +10 -6
- package/assets/js/components/applied-filters/applied-filters.component.min.js +3 -3
- package/assets/js/components/applied-filters/applied-filters.component.min.js.map +1 -1
- package/assets/js/components/barchart/barchart.component.js +8 -7
- package/assets/js/components/barchart/barchart.component.min.js +4 -4
- package/assets/js/components/barchart/barchart.component.min.js.map +1 -1
- package/assets/js/components/card/card.component.js +27 -12
- package/assets/js/components/card/card.component.min.js +3 -3
- package/assets/js/components/card/card.component.min.js.map +1 -1
- package/assets/js/components/carousel/carousel.component.js +18 -12
- package/assets/js/components/carousel/carousel.component.min.js +4 -4
- package/assets/js/components/carousel/carousel.component.min.js.map +1 -1
- package/assets/js/components/chart/chart.component.js +9 -8
- package/assets/js/components/collapsible-side/collapsible-side.component.js +20 -8
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map +1 -1
- package/assets/js/components/fileupload/fileupload.component.js +11 -7
- package/assets/js/components/fileupload/fileupload.component.min.js +2 -2
- package/assets/js/components/fileupload/fileupload.component.min.js.map +1 -1
- package/assets/js/components/filter-card/filter-card.component.js +19 -9
- package/assets/js/components/filter-card/filter-card.component.min.js +2 -2
- package/assets/js/components/filter-card/filter-card.component.min.js.map +1 -1
- package/assets/js/components/filterlist/filterlist.component.js +10 -6
- package/assets/js/components/filterlist/filterlist.component.min.js +3 -3
- package/assets/js/components/filterlist/filterlist.component.min.js.map +1 -1
- package/assets/js/components/header/header.component.js +8 -4
- package/assets/js/components/header/header.component.min.js +1 -1
- package/assets/js/components/header/header.component.min.js.map +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.js +43 -23
- package/assets/js/components/inline-edit/inline-edit.component.min.js +4 -4
- package/assets/js/components/inline-edit/inline-edit.component.min.js.map +1 -1
- package/assets/js/components/marketing/marketing.component.js +11 -5
- package/assets/js/components/marketing/marketing.component.min.js +1 -1
- package/assets/js/components/marketing/marketing.component.min.js.map +1 -1
- package/assets/js/components/multi-step/multi-step.component.js +22 -19
- package/assets/js/components/multiselect/multiselect.component.js +65 -47
- package/assets/js/components/multiselect/multiselect.component.min.js +7 -6
- package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
- package/assets/js/components/nav/nav.component.js +57 -38
- package/assets/js/components/nav/nav.component.min.js +5 -5
- package/assets/js/components/nav/nav.component.min.js.map +1 -1
- package/assets/js/components/notification/notification.component.js +9 -5
- package/assets/js/components/notification/notification.component.min.js +5 -5
- package/assets/js/components/notification/notification.component.min.js.map +1 -1
- package/assets/js/components/pagination/pagination.component.js +18 -14
- package/assets/js/components/pagination/pagination.component.min.js +2 -2
- package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
- package/assets/js/components/record-card/record-card.component.js +10 -8
- package/assets/js/components/record-card/record-card.component.min.js +2 -2
- package/assets/js/components/record-card/record-card.component.min.js.map +1 -1
- package/assets/js/components/search/search.component.js +22 -17
- package/assets/js/components/search/search.component.min.js +4 -4
- package/assets/js/components/search/search.component.min.js.map +1 -1
- package/assets/js/components/slider/slider.component.js +25 -21
- package/assets/js/components/slider/slider.component.min.js +3 -3
- package/assets/js/components/slider/slider.component.min.js.map +1 -1
- package/assets/js/components/table/table.component.js +30 -24
- package/assets/js/components/table/table.component.min.js +7 -7
- package/assets/js/components/table/table.component.min.js.map +1 -1
- package/assets/js/components/tabs/tabs.component.js +10 -6
- package/assets/js/components/tabs/tabs.component.min.js +3 -3
- package/assets/js/components/tabs/tabs.component.min.js.map +1 -1
- package/assets/js/components/video-card/video-card.component.js +45 -33
- package/assets/js/components/video-card/video-card.component.min.js +3 -3
- package/assets/js/components/video-card/video-card.component.min.js.map +1 -1
- package/assets/js/components.bundle.js +1 -1
- package/assets/js/components.bundle.js.map +1 -1
- package/assets/js/components.js +35 -8
- package/assets/js/modules/applied-filters.js +20 -20
- package/assets/js/modules/carousel.js +65 -60
- package/assets/js/modules/chart.js +184 -134
- package/assets/js/modules/chart.module.js +74 -63
- package/assets/js/modules/data-layer.js +17 -17
- package/assets/js/modules/dialogs.js +47 -38
- package/assets/js/modules/drawer.js +1 -1
- package/assets/js/modules/dynamicEvents.js +24 -24
- package/assets/js/modules/file-upload.js +8 -9
- package/assets/js/modules/fileupload.js +5 -5
- package/assets/js/modules/filterlist.js +4 -4
- package/assets/js/modules/form.js +22 -18
- package/assets/js/modules/helpers.js +54 -44
- package/assets/js/modules/inputs.js +25 -21
- package/assets/js/modules/nav.js +3 -1
- package/assets/js/modules/notification.js +6 -6
- package/assets/js/modules/orderablelist.js +12 -12
- package/assets/js/modules/pagination.js +5 -5
- package/assets/js/modules/table.js +242 -181
- package/assets/js/modules/tabs.js +35 -32
- package/assets/js/modules/testimonial.js +11 -12
- package/assets/js/scripts.bundle.js +1 -1
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +1 -1
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/js/scripts.js +1 -1
- package/assets/js/tests/chart.spec.js +5 -5
- package/assets/js/tests/filterlist.spec.js +2 -2
- package/assets/js/tests/slider.spec.js +2 -2
- package/assets/js/tests/table.spec.js +2 -2
- package/assets/js/vendor/hibp.js +4 -4
- package/assets/sass/_components.scss +28 -40
- package/assets/sass/_corefiles.scss +22 -29
- package/assets/sass/_elements.scss +19 -19
- package/assets/sass/_fonts.scss +10 -7
- package/assets/sass/_func.scss +14 -14
- package/assets/sass/_functions/functions.scss +115 -90
- package/assets/sass/_functions/mixins.scss +72 -112
- package/assets/sass/_functions/utilities.scss +447 -393
- package/assets/sass/_functions/variables.scss +1357 -1371
- package/assets/sass/_print.scss +18 -16
- package/assets/sass/_tests/colours.spec.scss +15 -14
- package/assets/sass/_tests/func.spec.scss +1 -2
- package/assets/sass/_tests/mixins.spec.scss +9 -14
- package/assets/sass/_tests/typography.spec.scss +1 -2
- package/assets/sass/_utilities.scss +8 -12
- package/assets/sass/components/actionbar.global.scss +45 -64
- package/assets/sass/components/actionbar.scss +58 -84
- package/assets/sass/components/address-lookup.scss +9 -11
- package/assets/sass/components/applied-filters.scss +3 -7
- package/assets/sass/components/barchart.component.scss +68 -99
- package/assets/sass/components/card.component.scss +35 -50
- package/assets/sass/components/card.module.scss +34 -37
- package/assets/sass/components/carousel.component.scss +198 -177
- package/assets/sass/components/carousel.config.scss +13 -19
- package/assets/sass/components/charts.config.scss +16 -23
- package/assets/sass/components/charts.module.scss +139 -178
- package/assets/sass/components/charts.scss +173 -232
- package/assets/sass/components/collapsible-side.scss +65 -98
- package/assets/sass/components/fileupload.scss +17 -23
- package/assets/sass/components/filter-card.component.scss +21 -28
- package/assets/sass/components/header.scss +24 -37
- package/assets/sass/components/inline-edit.preload.scss +24 -45
- package/assets/sass/components/inline-edit.scss +4 -5
- package/assets/sass/components/marketing.scss +19 -14
- package/assets/sass/components/multi-step.component.scss +36 -42
- package/assets/sass/components/multiselect.preload.scss +9 -12
- package/assets/sass/components/multiselect.scss +20 -24
- package/assets/sass/components/nav.docs.scss +7 -15
- package/assets/sass/components/nav.global.scss +123 -177
- package/assets/sass/components/nav.old.scss +64 -135
- package/assets/sass/components/nav.preload.scss +11 -12
- package/assets/sass/components/nav.scss +126 -173
- package/assets/sass/components/notification.global.scss +2 -3
- package/assets/sass/components/notification.scss +17 -32
- package/assets/sass/components/pagination.scss +32 -44
- package/assets/sass/components/property-searchbar.scss +2 -6
- package/assets/sass/components/record-card.component.scss +42 -55
- package/assets/sass/components/slider.scss +38 -35
- package/assets/sass/components/snapshot.scss +4 -10
- package/assets/sass/components/stepper.scss +14 -22
- package/assets/sass/components/table.global.scss +130 -171
- package/assets/sass/components/table.scss +17 -27
- package/assets/sass/components/tabs.scss +23 -32
- package/assets/sass/components/testimonial.scss +6 -14
- package/assets/sass/components/timeline.scss +8 -12
- package/assets/sass/components/video-card.component.scss +9 -14
- package/assets/sass/components.reset.scss +5 -5
- package/assets/sass/core.scss +3 -3
- package/assets/sass/elements/admin-panel.scss +41 -45
- package/assets/sass/elements/badge-tag.scss +16 -26
- package/assets/sass/elements/brand.scss +13 -16
- package/assets/sass/elements/buttons.scss +80 -106
- package/assets/sass/elements/container.scss +24 -133
- package/assets/sass/elements/details.scss +30 -50
- package/assets/sass/elements/dialog.scss +4 -6
- package/assets/sass/elements/forms.scss +421 -437
- package/assets/sass/elements/icons.scss +3 -4
- package/assets/sass/elements/links.scss +17 -25
- package/assets/sass/elements/lists.scss +30 -47
- package/assets/sass/elements/media.scss +1 -4
- package/assets/sass/elements/modal.scss +54 -80
- package/assets/sass/elements/popover.scss +28 -45
- package/assets/sass/elements/progress.scss +30 -40
- package/assets/sass/elements/table.element.scss +10 -15
- package/assets/sass/elements/tooltips.scss +27 -49
- package/assets/sass/elements/type.scss +47 -53
- package/assets/sass/email.scss +7 -9
- package/assets/sass/error.scss +23 -20
- package/assets/sass/foundations/bs_grid.scss +0 -1
- package/assets/sass/foundations/grid.scss +120 -122
- package/assets/sass/foundations/reboot.scss +27 -35
- package/assets/sass/foundations/root.scss +21 -31
- package/assets/sass/helpers/dynamic.scss +5 -5
- package/assets/sass/helpers/line-clamp.scss +1 -2
- package/assets/sass/helpers/max-height.scss +28 -36
- package/assets/sass/helpers/wider-colours.scss +2 -5
- package/assets/sass/main.scss +4 -4
- package/assets/sass/templates/auth.scss +11 -18
- package/assets/sass/templates/form.scss +16 -29
- package/assets/ts/components/_global.ts +14 -17
- package/assets/ts/components/accordion/accordion.component.ts +23 -19
- package/assets/ts/components/actionbar/README.md +8 -7
- package/assets/ts/components/actionbar/actionbar.component.ts +170 -220
- package/assets/ts/components/address-lookup/address-lookup.component.ts +94 -130
- package/assets/ts/components/applied-filters/README.md +1 -1
- package/assets/ts/components/applied-filters/applied-filters.component.ts +16 -15
- package/assets/ts/components/barchart/barchart.component.ts +29 -26
- package/assets/ts/components/card/card.component.ts +56 -57
- package/assets/ts/components/carousel/README.md +8 -9
- package/assets/ts/components/carousel/carousel.component.ts +30 -33
- package/assets/ts/components/chart/README.md +1 -3
- package/assets/ts/components/chart/chart.component.ts +24 -36
- package/assets/ts/components/collapsible-side/README.md +1 -1
- package/assets/ts/components/collapsible-side/collapsible-side.component.ts +44 -57
- package/assets/ts/components/fileupload/README.md +3 -3
- package/assets/ts/components/fileupload/fileupload.component.ts +23 -28
- package/assets/ts/components/filter-card/filter-card.component.ts +32 -33
- package/assets/ts/components/filterlist/README.md +3 -3
- package/assets/ts/components/filterlist/filterlist.component.ts +18 -16
- package/assets/ts/components/header/README.md +8 -9
- package/assets/ts/components/header/header.component.ts +15 -16
- package/assets/ts/components/inline-edit/README.md +1 -0
- package/assets/ts/components/inline-edit/inline-edit.component.ts +71 -71
- package/assets/ts/components/marketing/marketing.component.ts +17 -16
- package/assets/ts/components/multi-step/multi-step.component.ts +114 -156
- package/assets/ts/components/multiselect/README.md +5 -5
- package/assets/ts/components/multiselect/multiselect.component.ts +119 -135
- package/assets/ts/components/nav/README.md +13 -13
- package/assets/ts/components/nav/nav.component.ts +171 -167
- package/assets/ts/components/notification/README.md +9 -9
- package/assets/ts/components/notification/notification.component.ts +33 -32
- package/assets/ts/components/pagination/README.md +12 -12
- package/assets/ts/components/pagination/pagination.component.ts +51 -69
- package/assets/ts/components/record-card/record-card.component.ts +24 -34
- package/assets/ts/components/search/README.md +6 -7
- package/assets/ts/components/search/search.component.ts +75 -91
- package/assets/ts/components/slider/slider.component.ts +62 -77
- package/assets/ts/components/table/README.md +8 -8
- package/assets/ts/components/table/table.component.ts +97 -134
- package/assets/ts/components/tabs/README.md +4 -4
- package/assets/ts/components/tabs/tabs.component.ts +16 -14
- package/assets/ts/components/video-card/video-card.component.ts +89 -93
- package/assets/ts/components.ts +44 -20
- package/assets/ts/html.d.ts +1 -7
- package/assets/ts/modules/applied-filters.ts +104 -135
- package/assets/ts/modules/card.module.ts +13 -18
- package/assets/ts/modules/carousel.ts +194 -195
- package/assets/ts/modules/chart.module.ts +201 -246
- package/assets/ts/modules/chart.ts +454 -472
- package/assets/ts/modules/data-layer.md +35 -31
- package/assets/ts/modules/data-layer.ts +18 -18
- package/assets/ts/modules/dialogs.ts +113 -117
- package/assets/ts/modules/drawer.ts +7 -9
- package/assets/ts/modules/dynamicEvents.ts +67 -100
- package/assets/ts/modules/file-upload.ts +43 -40
- package/assets/ts/modules/fileupload.ts +38 -60
- package/assets/ts/modules/filterlist.ts +14 -20
- package/assets/ts/modules/form.ts +126 -128
- package/assets/ts/modules/helpers.ts +114 -120
- package/assets/ts/modules/inputs.ts +88 -120
- package/assets/ts/modules/nav.ts +19 -18
- package/assets/ts/modules/notification.ts +28 -32
- package/assets/ts/modules/orderablelist.ts +90 -82
- package/assets/ts/modules/pagination.ts +14 -19
- package/assets/ts/modules/table.ts +516 -599
- package/assets/ts/modules/tabs.ts +90 -127
- package/assets/ts/modules/testimonial.ts +59 -64
- package/assets/ts/scripts.ts +7 -9
- package/assets/ts/tests/chart.spec.ts +11 -20
- package/assets/ts/tests/data-layer.spec.js +3 -4
- package/assets/ts/tests/filterlist.spec.ts +3 -6
- package/assets/ts/tests/slider.spec.ts +9 -15
- package/assets/ts/tests/table.spec.ts +7 -24
- package/assets/ts/vendor/hibp.ts +43 -43
- package/dist/components.es.js +280 -270
- package/dist/components.umd.js +66 -66
- package/dist/style.css +1 -1
- package/package.json +14 -4
- package/src/components/Accordion/Accordion.spec.js +25 -31
- package/src/components/Accordion/Accordion.vue +16 -19
- package/src/components/Accordion/AccordionItem.vue +39 -37
- package/src/components/Accordion/README.md +10 -12
- package/src/components/Actionbar/Actionbar.vue +15 -18
- package/src/components/Actionbar/README.md +8 -7
- package/src/components/AddressLookup/AddressLookup.vue +14 -16
- package/src/components/AppliedFilters/AppliedFilters.vue +14 -16
- package/src/components/Banner/Banner.spec.js +13 -15
- package/src/components/Banner/Banner.vue +19 -19
- package/src/components/Banner/README.md +8 -10
- package/src/components/BarChart/BarChart.vue +14 -16
- package/src/components/Card/Card.vue +13 -16
- package/src/components/Card/README.md +8 -8
- package/src/components/Carousel/Carousel.vue +15 -18
- package/src/components/Carousel/README.md +7 -7
- package/src/components/Chart/Chart.spec.js +64 -87
- package/src/components/Chart/Chart.vue +41 -40
- package/src/components/Chart/README.md +8 -9
- package/src/components/CollapsibleSideMenu/CollapsibleSideMenu.vue +8 -10
- package/src/components/CollapsibleSideMenu/README.md +1 -1
- package/src/components/FileUpload/FileUpload.vue +35 -40
- package/src/components/FileUpload/README.md +3 -3
- package/src/components/FilterCard/FilterCard.vue +14 -16
- package/src/components/Filterlist/Filterlist.vue +7 -9
- package/src/components/Filterlist/README.md +3 -3
- package/src/components/Header/Header.vue +23 -26
- package/src/components/Header/README.md +8 -9
- package/src/components/InlineEdit/InlineEdit.vue +26 -32
- package/src/components/Input/Input.vue +323 -233
- package/src/components/Input/README.md +11 -11
- package/src/components/Marketing/Marketing.vue +24 -27
- package/src/components/Marketing/README.md +7 -7
- package/src/components/MultiStep/MultiStep.vue +13 -15
- package/src/components/Multiselect/Multiselect.vue +14 -17
- package/src/components/Nav/Nav.vue +15 -29
- package/src/components/Nav/README.md +12 -12
- package/src/components/Nav-old/Nav.vue +88 -93
- package/src/components/Nav-old/README.md +11 -12
- package/src/components/NoteFeed/NoteFeed.vue +59 -56
- package/src/components/NoteFeed/README.md +6 -6
- package/src/components/Notification/Notification.vue +11 -15
- package/src/components/Notification/README.md +9 -9
- package/src/components/Pagination/Pagination.vue +14 -24
- package/src/components/Pagination/README.md +12 -12
- package/src/components/PropertySearchbar/PropertySearchbar.vue +191 -160
- package/src/components/PropertySearchbar/README.md +14 -15
- package/src/components/RecordCard/RecordCard.vue +14 -16
- package/src/components/Search/README.md +1 -1
- package/src/components/Search/Search.vue +13 -16
- package/src/components/Slider/Slider.vue +13 -16
- package/src/components/Snapshot/README.md +9 -10
- package/src/components/Snapshot/Snapshot.vue +15 -17
- package/src/components/Stepper/README.md +12 -13
- package/src/components/Stepper/Step.vue +22 -18
- package/src/components/Stepper/Stepper.spec.js +41 -46
- package/src/components/Stepper/Stepper.vue +17 -18
- package/src/components/Table/README.md +12 -11
- package/src/components/Table/Table.spec.js +17 -28
- package/src/components/Table/Table.vue +49 -48
- package/src/components/Tabs/README.md +8 -8
- package/src/components/Tabs/Tab.vue +21 -21
- package/src/components/Tabs/Tabs.vue +14 -17
- package/src/components/Testimonial/README.md +11 -12
- package/src/components/Testimonial/Testimonial.spec.js +22 -26
- package/src/components/Testimonial/Testimonial.vue +31 -25
- package/src/components/Timeline/README.md +3 -3
- package/src/components/Timeline/Timeline.spec.js +9 -11
- package/src/components/Timeline/Timeline.vue +10 -10
- package/src/components/VideoCard/VideoCard.vue +14 -16
- package/src/foundations/Logo/Logo.spec.js +30 -30
- package/src/foundations/Logo/Logo.vue +28 -28
- package/src/foundations/Logo/README.md +5 -4
- package/src/helpers/strings.js +11 -8
- package/src/index.js +27 -28
- package/src/vue-shim.d.ts +4 -4
|
@@ -2,15 +2,19 @@
|
|
|
2
2
|
// Data layer Web component created
|
|
3
3
|
window.dataLayer = window.dataLayer || [];
|
|
4
4
|
window.dataLayer.push({
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
event: 'customElementRegistered',
|
|
6
|
+
element: 'inline edit',
|
|
7
7
|
});
|
|
8
8
|
class iamInlineEdit extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super();
|
|
11
11
|
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
12
|
-
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
13
|
-
|
|
12
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
13
|
+
? document.body.getAttribute('data-assets-location')
|
|
14
|
+
: '/assets';
|
|
15
|
+
const coreCSS = document.body.hasAttribute('data-core-css')
|
|
16
|
+
? document.body.getAttribute('data-core-css')
|
|
17
|
+
: `${assetLocation}/css/core.min.css`;
|
|
14
18
|
const loadCSS = `@import "${assetLocation}/css/components/inline-edit.css";`;
|
|
15
19
|
const template = document.createElement('template');
|
|
16
20
|
template.innerHTML = `
|
|
@@ -33,15 +37,15 @@ class iamInlineEdit extends HTMLElement {
|
|
|
33
37
|
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
34
38
|
}
|
|
35
39
|
connectedCallback() {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
const inlineEdit = this;
|
|
41
|
+
const saveButton = this.shadowRoot.querySelector('#save');
|
|
42
|
+
const cancelButton = this.shadowRoot.querySelector('#cancel');
|
|
43
|
+
const label = this.querySelector('label');
|
|
44
|
+
const input = this.querySelector('input, textarea, select');
|
|
45
|
+
const preview = this.querySelector('.preview');
|
|
46
|
+
const statusSaving = this.shadowRoot.querySelector('#saving');
|
|
47
|
+
const statusSaved = this.shadowRoot.querySelector('#saved');
|
|
48
|
+
const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
|
|
45
49
|
// Save the original value for later
|
|
46
50
|
let originalValue = input.value;
|
|
47
51
|
// cancel
|
|
@@ -51,7 +55,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
51
55
|
inlineEdit.blur();
|
|
52
56
|
inlineEdit.classList.remove('was-validated');
|
|
53
57
|
statusNotSaved.classList.add('d-none');
|
|
54
|
-
const cancelEvent = new CustomEvent(
|
|
58
|
+
const cancelEvent = new CustomEvent('inline-edit-cancel', {
|
|
59
|
+
detail: { name: input.getAttribute('name') },
|
|
60
|
+
});
|
|
55
61
|
inlineEdit.dispatchEvent(cancelEvent);
|
|
56
62
|
});
|
|
57
63
|
// Save
|
|
@@ -62,7 +68,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
62
68
|
}
|
|
63
69
|
originalValue = input.value;
|
|
64
70
|
// dispatch save event
|
|
65
|
-
const saveEvent = new CustomEvent(
|
|
71
|
+
const saveEvent = new CustomEvent('inline-edit-save', {
|
|
72
|
+
detail: { name: input.getAttribute('name'), value: input.value },
|
|
73
|
+
});
|
|
66
74
|
inlineEdit.dispatchEvent(saveEvent);
|
|
67
75
|
//inlineEdit.setAttribute('data-saving','true');
|
|
68
76
|
input.disabled = true;
|
|
@@ -77,8 +85,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
77
85
|
// Save
|
|
78
86
|
if (input.tagName === 'INPUT') {
|
|
79
87
|
input.addEventListener('keydown', (event) => {
|
|
80
|
-
switch (event.key
|
|
81
|
-
|
|
88
|
+
switch (event.key // change to event.key to key to use the above variable
|
|
89
|
+
) {
|
|
90
|
+
case 'Enter':
|
|
82
91
|
event.stopPropagation();
|
|
83
92
|
event.preventDefault();
|
|
84
93
|
saveButton.click();
|
|
@@ -91,7 +100,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
91
100
|
setTimeout(() => {
|
|
92
101
|
statusSaving.classList.add('d-none');
|
|
93
102
|
statusSaved.classList.remove('d-none');
|
|
94
|
-
const confirmEvent = new CustomEvent(
|
|
103
|
+
const confirmEvent = new CustomEvent('inline-edit-confirmed', {
|
|
104
|
+
detail: { name: input.getAttribute('name') },
|
|
105
|
+
});
|
|
95
106
|
inlineEdit.dispatchEvent(confirmEvent);
|
|
96
107
|
}, 100);
|
|
97
108
|
// Reset to normal
|
|
@@ -107,7 +118,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
107
118
|
if (input.tagName === 'SELECT') {
|
|
108
119
|
input.addEventListener('change', (event) => {
|
|
109
120
|
originalValue = input.value;
|
|
110
|
-
const saveEvent = new CustomEvent(
|
|
121
|
+
const saveEvent = new CustomEvent('inline-edit-save', {
|
|
122
|
+
detail: { name: input.getAttribute('name'), value: input.value },
|
|
123
|
+
});
|
|
111
124
|
inlineEdit.dispatchEvent(saveEvent);
|
|
112
125
|
inlineEdit.setAttribute('data-saving', 'true');
|
|
113
126
|
input.disabled = true;
|
|
@@ -124,7 +137,9 @@ class iamInlineEdit extends HTMLElement {
|
|
|
124
137
|
if (input.value != originalValue) {
|
|
125
138
|
if (inlineEdit.hasAttribute('data-autosave')) {
|
|
126
139
|
originalValue = input.value;
|
|
127
|
-
const saveEvent = new CustomEvent(
|
|
140
|
+
const saveEvent = new CustomEvent('inline-edit-autosave', {
|
|
141
|
+
detail: { name: input.getAttribute('name'), value: input.value },
|
|
142
|
+
});
|
|
128
143
|
inlineEdit.dispatchEvent(saveEvent);
|
|
129
144
|
statusSaving.classList.remove('d-none');
|
|
130
145
|
if (preview) {
|
|
@@ -139,13 +154,18 @@ class iamInlineEdit extends HTMLElement {
|
|
|
139
154
|
// checkboxes
|
|
140
155
|
inlineEdit.addEventListener('change', (event) => {
|
|
141
156
|
if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
|
|
142
|
-
let saveValue =
|
|
157
|
+
let saveValue = '';
|
|
143
158
|
Array.from(inlineEdit.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
|
|
144
159
|
if (index != 0)
|
|
145
|
-
saveValue +=
|
|
160
|
+
saveValue += ', ';
|
|
146
161
|
saveValue += checkbox.value;
|
|
147
162
|
});
|
|
148
|
-
const saveEvent = new CustomEvent(
|
|
163
|
+
const saveEvent = new CustomEvent('inline-edit-save', {
|
|
164
|
+
detail: {
|
|
165
|
+
name: event.target.closest('input[type="checkbox"]').getAttribute('name'),
|
|
166
|
+
value: saveValue,
|
|
167
|
+
},
|
|
168
|
+
});
|
|
149
169
|
inlineEdit.dispatchEvent(saveEvent);
|
|
150
170
|
}
|
|
151
171
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.1.0--
|
|
2
|
+
* iamKey v7.1.0--beta3
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
|
-
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class b extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",
|
|
4
|
+
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class b extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",c=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
|
|
5
5
|
<style class="styles">
|
|
6
|
-
@import "${
|
|
6
|
+
@import "${c}";
|
|
7
7
|
: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>
|
|
@@ -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(){
|
|
21
|
+
`,t.appendChild(e.content.cloneNode(!0))}connectedCallback(){const t=this,i=this.shadowRoot.querySelector("#save"),c=this.shadowRoot.querySelector("#cancel");this.querySelector("label");const e=this.querySelector("input, textarea, select"),o=this.querySelector(".preview"),l=this.shadowRoot.querySelector("#saving"),r=this.shadowRoot.querySelector("#saved"),d=this.shadowRoot.querySelector("#notsaved");let s=e.value;c.addEventListener("click",a=>{e.value=s,e.blur(),t.blur(),t.classList.remove("was-validated"),d.classList.add("d-none");const n=new CustomEvent("inline-edit-cancel",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)}),i.addEventListener("click",a=>{if(t.querySelector(":invalid"))return t.classList.add("was-validated"),!1;s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),e.disabled=!0,e.blur(),t.blur(),l.classList.remove("d-none"),o&&(console.log(e.value),o.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",a=>{setTimeout(()=>{l.classList.add("d-none"),r.classList.remove("d-none");const n=new CustomEvent("inline-edit-confirmed",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)},100),setTimeout(()=>{e.disabled=!1,t.removeAttribute("data-saving"),l.classList.add("d-none"),r.classList.add("d-none"),d.classList.add("d-none")},1e3)}),e.tagName==="SELECT"&&e.addEventListener("change",a=>{s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),t.setAttribute("data-saving","true"),e.disabled=!0,e.blur()}),e.tagName!="SELECT"&&e.addEventListener("focus",a=>{e.select()}),e.addEventListener("blur",a=>{if(e.value!=s)if(t.hasAttribute("data-autosave")){s=e.value;const n=new CustomEvent("inline-edit-autosave",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),l.classList.remove("d-none"),o&&(o.innerHTML=e.value)}else t.querySelector(".inline-feedback")||d.classList.remove("d-none")}),t.addEventListener("change",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest('input[type="checkbox"]')){let n="";Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((v,m)=>{m!=0&&(n+=", "),n+=v.value});const u=new CustomEvent("inline-edit-save",{detail:{name:a.target.closest('input[type="checkbox"]').getAttribute("name"),value:n}});t.dispatchEvent(u)}})}}export{b 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":["// @ts-nocheck\n// 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') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${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 let inlineEdit = this;\n let saveButton = this.shadowRoot.querySelector('#save');\n let cancelButton = this.shadowRoot.querySelector('#cancel');\n let label = this.querySelector('label');\n let input = this.querySelector('input, textarea, select');\n let preview = this.querySelector('.preview');\n let statusSaving = this.shadowRoot.querySelector('#saving');\n let statusSaved = this.shadowRoot.querySelector('#saved');\n let statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n // Save the original value for later\n let originalValue = input.value;\n // cancel\n cancelButton.addEventListener('click', (event) => {\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\", { detail: { name: input.getAttribute('name') } });\n inlineEdit.dispatchEvent(cancelEvent);\n });\n // Save\n saveButton.addEventListener('click', (event) => {\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\", { detail: { name: input.getAttribute('name'), value: input.value } });\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 case \"Enter\":\n event.stopPropagation();\n event.preventDefault();\n saveButton.click();\n break;\n }\n });\n }\n // Saved\n inlineEdit.addEventListener('inline-edit-saved', (event) => {\n setTimeout(() => {\n statusSaving.classList.add('d-none');\n statusSaved.classList.remove('d-none');\n const confirmEvent = new CustomEvent(\"inline-edit-confirmed\", { detail: { name: input.getAttribute('name') } });\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', (event) => {\n originalValue = input.value;\n const saveEvent = new CustomEvent(\"inline-edit-save\", { detail: { name: input.getAttribute('name'), value: input.value } });\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', (event) => {\n input.select();\n });\n }\n //blur it should autosave\n input.addEventListener('blur', (event) => {\n if (input.value != originalValue) {\n if (inlineEdit.hasAttribute('data-autosave')) {\n originalValue = input.value;\n const saveEvent = new CustomEvent(\"inline-edit-autosave\", { detail: { name: input.getAttribute('name'), value: input.value } });\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\", { detail: { name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'), value: saveValue } });\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","event","cancelEvent","saveEvent","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// @ts-nocheck\n// 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 const inlineEdit = this;\n const saveButton = this.shadowRoot.querySelector('#save');\n const cancelButton = this.shadowRoot.querySelector('#cancel');\n const label = this.querySelector('label');\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', (event) => {\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', (event) => {\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', (event) => {\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', (event) => {\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', (event) => {\n input.select();\n });\n }\n //blur it should autosave\n input.addEventListener('blur', (event) => {\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","event","cancelEvent","saveEvent","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}
|
|
@@ -2,15 +2,19 @@
|
|
|
2
2
|
// Data layer Web component created
|
|
3
3
|
window.dataLayer = window.dataLayer || [];
|
|
4
4
|
window.dataLayer.push({
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
event: 'customElementRegistered',
|
|
6
|
+
element: 'Marketing',
|
|
7
7
|
});
|
|
8
8
|
class iamMarketing extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super();
|
|
11
11
|
this.attachShadow({ mode: 'open' });
|
|
12
|
-
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
13
|
-
|
|
12
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
13
|
+
? document.body.getAttribute('data-assets-location')
|
|
14
|
+
: '/assets';
|
|
15
|
+
const coreCSS = document.body.hasAttribute('data-core-css')
|
|
16
|
+
? document.body.getAttribute('data-core-css')
|
|
17
|
+
: `${assetLocation}/css/core.min.css`;
|
|
14
18
|
const loadCSS = `@import "${assetLocation}/css/components/marketing.css";`;
|
|
15
19
|
const template = document.createElement('template');
|
|
16
20
|
template.innerHTML = `
|
|
@@ -30,7 +34,9 @@ class iamMarketing extends HTMLElement {
|
|
|
30
34
|
connectedCallback() {
|
|
31
35
|
this.classList.add('invert-colours');
|
|
32
36
|
if (this.hasAttribute('data-img')) {
|
|
33
|
-
this.shadowRoot
|
|
37
|
+
this.shadowRoot
|
|
38
|
+
.querySelector('.marketing')
|
|
39
|
+
.insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
|
|
34
40
|
}
|
|
35
41
|
}
|
|
36
42
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.1.0--
|
|
2
|
+
* iamKey v7.1.0--beta3
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
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=`
|
|
5
5
|
<style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n
|
|
1
|
+
{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// @ts-nocheck\n// 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.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":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,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,qBAEHE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUP,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,uBAAuB,CAEtH,CACJ"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
|
-
import { trackComponent, trackComponentRegistered } from
|
|
3
|
-
trackComponentRegistered(
|
|
2
|
+
import { trackComponent, trackComponentRegistered } from '../_global.js';
|
|
3
|
+
trackComponentRegistered('iam-multi-step');
|
|
4
4
|
class iamMultiStep extends HTMLElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super();
|
|
7
7
|
this.attachShadow({ mode: 'open' });
|
|
8
|
-
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
8
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
9
|
+
? document.body.getAttribute('data-assets-location')
|
|
10
|
+
: '/assets';
|
|
9
11
|
const loadCSS = `@import "${assetLocation}/css/components/multi-step.component.css";`;
|
|
10
12
|
const template = document.createElement('template');
|
|
11
13
|
template.innerHTML = `
|
|
@@ -22,12 +24,12 @@ class iamMultiStep extends HTMLElement {
|
|
|
22
24
|
const MultiStepComponent = this;
|
|
23
25
|
const steps = this.shadowRoot.querySelector('.steps');
|
|
24
26
|
const form = this.querySelector('form');
|
|
25
|
-
|
|
27
|
+
const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
|
|
26
28
|
fieldsets.forEach((fieldset, index) => {
|
|
27
|
-
steps.insertAdjacentHTML('beforeend', `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ?
|
|
29
|
+
steps.insertAdjacentHTML('beforeend', `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? 'active' : ''}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
|
|
28
30
|
if (index === 0)
|
|
29
31
|
fieldset.classList.add('active');
|
|
30
|
-
const btnWrapper = document.createElement(
|
|
32
|
+
const btnWrapper = document.createElement('div');
|
|
31
33
|
btnWrapper.classList.add('btn--wrapper');
|
|
32
34
|
fieldset.appendChild(btnWrapper);
|
|
33
35
|
if (index != 0)
|
|
@@ -37,7 +39,7 @@ class iamMultiStep extends HTMLElement {
|
|
|
37
39
|
// Last fieldset
|
|
38
40
|
if (index == fieldsets.length - 1) {
|
|
39
41
|
if (form && form.querySelector(':scope > button[type="submit"]')) {
|
|
40
|
-
|
|
42
|
+
const existingButton = form.querySelector(':scope > button[type="submit"]');
|
|
41
43
|
existingButton.classList.add('mb-0');
|
|
42
44
|
btnWrapper.insertAdjacentElement('beforeend', existingButton);
|
|
43
45
|
}
|
|
@@ -46,10 +48,10 @@ class iamMultiStep extends HTMLElement {
|
|
|
46
48
|
}
|
|
47
49
|
});
|
|
48
50
|
// Open the fieldset with an error inside
|
|
49
|
-
|
|
51
|
+
const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
|
|
50
52
|
for (let i = 0; i < validatedFieldsets.length; i++) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
const fieldset = validatedFieldsets[i];
|
|
54
|
+
const fieldsetID = fieldset.getAttribute('data-title');
|
|
53
55
|
if (fieldset.querySelector('.is-invalid')) {
|
|
54
56
|
Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
|
|
55
57
|
element.classList.add('active');
|
|
@@ -69,7 +71,9 @@ class iamMultiStep extends HTMLElement {
|
|
|
69
71
|
};
|
|
70
72
|
})(), true);
|
|
71
73
|
function validateFieldset(button) {
|
|
72
|
-
const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
|
|
74
|
+
const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
|
|
75
|
+
? MultiStepComponent.querySelector(`fieldset.active`)
|
|
76
|
+
: MultiStepComponent.querySelector(`fieldset[data-title]`);
|
|
73
77
|
const currentFieldsetID = currentFieldset.getAttribute('data-title');
|
|
74
78
|
let isFieldsetValid = true;
|
|
75
79
|
currentFieldset.classList.add('was-validated');
|
|
@@ -107,16 +111,16 @@ class iamMultiStep extends HTMLElement {
|
|
|
107
111
|
step.classList.add('active');
|
|
108
112
|
fieldset.classList.add('active');
|
|
109
113
|
}
|
|
110
|
-
|
|
111
|
-
|
|
114
|
+
const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
|
|
115
|
+
const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
|
|
112
116
|
// update the progress bar
|
|
113
|
-
MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1) * 100
|
|
117
|
+
MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);
|
|
114
118
|
}
|
|
115
119
|
// remove error messages from server
|
|
116
120
|
MultiStepComponent.addEventListener('keydown', (event) => {
|
|
117
121
|
if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
|
|
118
122
|
const button = event.target.closest('button');
|
|
119
|
-
if (event.keyCode == 13 && button.getAttribute('type') !=
|
|
123
|
+
if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {
|
|
120
124
|
event.preventDefault();
|
|
121
125
|
validateFieldset(button);
|
|
122
126
|
}
|
|
@@ -141,17 +145,16 @@ class iamMultiStep extends HTMLElement {
|
|
|
141
145
|
const button = event.target.closest('button[data-title]');
|
|
142
146
|
validateFieldset(button);
|
|
143
147
|
}
|
|
144
|
-
;
|
|
145
148
|
return null;
|
|
146
149
|
});
|
|
147
|
-
trackComponent(MultiStepComponent,
|
|
150
|
+
trackComponent(MultiStepComponent, 'iam-multi-step', []);
|
|
148
151
|
}
|
|
149
152
|
static get observedAttributes() {
|
|
150
|
-
return [
|
|
153
|
+
return ['data-image'];
|
|
151
154
|
}
|
|
152
155
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
|
153
156
|
switch (attrName) {
|
|
154
|
-
case
|
|
157
|
+
case 'data-total': {
|
|
155
158
|
if (this.shadowRoot.querySelector('.card__total'))
|
|
156
159
|
this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
|
|
157
160
|
break;
|