@iamproperty/components 7.3.0 → 7.5.0
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/README.md +1 -1
- package/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/actionbar.global.css +1 -1
- package/assets/css/components/actionbar.global.css.map +1 -1
- package/assets/css/components/address-lookup.component.css +1 -0
- package/assets/css/components/address-lookup.component.css.map +1 -0
- 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 -0
- package/assets/css/components/calendar.component.css.map +1 -0
- package/assets/css/components/calendar.config.css +1 -0
- package/assets/css/components/calendar.config.css.map +1 -0
- 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/charts.css +1 -1
- package/assets/css/components/charts.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 -0
- package/assets/css/components/content.component.css.map +1 -0
- package/assets/css/components/darkmode.component.css +1 -0
- package/assets/css/components/darkmode.component.css.map +1 -0
- 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.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/marketing.component.css +1 -0
- package/assets/css/components/marketing.component.css.map +1 -0
- package/assets/css/components/menu.component.css.map +1 -1
- package/assets/css/components/{menu.css → menu.global.css} +1 -1
- package/assets/css/components/menu.global.css.map +1 -0
- package/assets/css/components/milestone.css +1 -0
- package/assets/css/components/milestone.css.map +1 -0
- package/assets/css/components/multi-step.component.css +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 +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/nav.global.css +1 -1
- package/assets/css/components/nav.global.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.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/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.map +1 -1
- package/assets/css/components/split-button.component.css +1 -0
- package/assets/css/components/split-button.component.css.map +1 -0
- package/assets/css/components/word-count.component.css +1 -0
- package/assets/css/components/word-count.component.css.map +1 -0
- 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 +40 -19
- package/assets/js/components/accordion/accordion.component.min.js +15 -15
- package/assets/js/components/accordion/accordion.component.min.js.map +1 -1
- package/assets/js/components/actionbar/actionbar.component.js +59 -31
- package/assets/js/components/actionbar/actionbar.component.min.js +18 -17
- package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.js +6 -8
- package/assets/js/components/address-lookup/address-lookup.component.min.js +10 -12
- package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
- package/assets/js/components/advanced-select/advanced-select.component.js +63 -0
- package/assets/js/components/advanced-select/advanced-select.component.min.js +23 -0
- package/assets/js/components/advanced-select/advanced-select.component.min.js.map +1 -0
- package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
- 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/barchart/barchart.component.min.js.map +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js.map +1 -1
- package/assets/js/components/calendar/calendar.component.js +1100 -0
- package/assets/js/components/calendar/calendar.component.min.js +170 -0
- package/assets/js/components/calendar/calendar.component.min.js.map +1 -0
- package/assets/js/components/card/card.component.js +14 -8
- package/assets/js/components/card/card.component.min.js +16 -10
- package/assets/js/components/card/card.component.min.js.map +1 -1
- package/assets/js/components/carousel/carousel.component.js +17 -19
- package/assets/js/components/carousel/carousel.component.min.js +17 -19
- package/assets/js/components/carousel/carousel.component.min.js.map +1 -1
- package/assets/js/components/collapsible-side/collapsible-side.component.js +47 -12
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +6 -5
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map +1 -1
- package/assets/js/components/content/content.component.js +66 -0
- package/assets/js/components/content/content.component.min.js +15 -0
- package/assets/js/components/content/content.component.min.js.map +1 -0
- package/assets/js/components/darkmode/darkmode.component.js +70 -0
- package/assets/js/components/darkmode/darkmode.component.min.js +10 -0
- package/assets/js/components/darkmode/darkmode.component.min.js.map +1 -0
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +2 -2
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js.map +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js +1 -1
- 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/filter-card/filter-card.component.min.js.map +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js.map +1 -1
- 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.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 +1 -1
- package/assets/js/components/marketing/marketing.component.min.js +2 -2
- package/assets/js/components/marketing/marketing.component.min.js.map +1 -1
- package/assets/js/components/menu/menu.component.js +12 -4
- package/assets/js/components/menu/menu.component.min.js +4 -5
- package/assets/js/components/menu/menu.component.min.js.map +1 -1
- package/assets/js/components/milestone/milestone.component.js +36 -0
- package/assets/js/components/milestone/milestone.component.min.js +15 -0
- package/assets/js/components/milestone/milestone.component.min.js.map +1 -0
- package/assets/js/components/milestone-group/milestone-group.component.js +33 -0
- package/assets/js/components/milestone-group/milestone-group.component.min.js +13 -0
- package/assets/js/components/milestone-group/milestone-group.component.min.js.map +1 -0
- package/assets/js/components/multi-step/multi-step.component.min.js +3 -3
- package/assets/js/components/multi-step/multi-step.component.min.js.map +1 -1
- package/assets/js/components/multiselect/multiselect.component.js +54 -2
- 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 +18 -0
- package/assets/js/components/nav/nav.component.min.js +6 -6
- package/assets/js/components/nav/nav.component.min.js.map +1 -1
- package/assets/js/components/notification/notification.component.js +15 -11
- package/assets/js/components/notification/notification.component.min.js +4 -4
- package/assets/js/components/notification/notification.component.min.js.map +1 -1
- package/assets/js/components/pagination/pagination.component.min.js +1 -1
- package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
- package/assets/js/components/rank/rank.component.js +346 -210
- package/assets/js/components/rank/rank.component.min.js +346 -211
- package/assets/js/components/rank/rank.component.min.js.map +1 -1
- package/assets/js/components/rankings/rankings.component.js +17 -8
- package/assets/js/components/rankings/rankings.component.min.js +14 -8
- 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/record-card/record-card.component.min.js.map +1 -1
- package/assets/js/components/search/search.component.js +5 -3
- package/assets/js/components/search/search.component.min.js +6 -6
- package/assets/js/components/search/search.component.min.js.map +1 -1
- package/assets/js/components/slider/slider.component.min.js +1 -1
- package/assets/js/components/slider/slider.component.min.js.map +1 -1
- package/assets/js/components/split-button/split-button.component.js +58 -0
- package/assets/js/components/split-button/split-button.component.min.js +31 -0
- package/assets/js/components/split-button/split-button.component.min.js.map +1 -0
- package/assets/js/components/table/table.component.js +12 -0
- package/assets/js/components/table/table.component.min.js +3 -3
- package/assets/js/components/table/table.component.min.js.map +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.js +12 -0
- package/assets/js/components/table-ajax/table-ajax.component.min.js +3 -3
- 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 +1 -1
- 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 +12 -0
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +3 -3
- 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.js +12 -0
- package/assets/js/components/table-submit/table-submit.component.min.js +3 -3
- package/assets/js/components/table-submit/table-submit.component.min.js.map +1 -1
- package/assets/js/components/tabs/tabs.component.min.js +1 -1
- 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/video-card/video-card.component.min.js.map +1 -1
- package/assets/js/components/word-count/word-count.component.js +81 -0
- package/assets/js/components/word-count/word-count.component.min.js +12 -0
- package/assets/js/components/word-count/word-count.component.min.js.map +1 -0
- package/assets/js/components.js +59 -0
- package/assets/js/modules/advanced-select.js +106 -0
- package/assets/js/modules/dialogs.js +53 -51
- package/assets/js/modules/dynamicEvents.js +7 -0
- package/assets/js/modules/inputs.js +0 -18
- package/assets/js/modules/milestone-group.js +30 -0
- package/assets/js/modules/milestone.js +89 -0
- package/assets/js/modules/table.js +11 -1
- package/assets/js/modules/videos.js +1 -1
- 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 +5 -0
- package/assets/sass/_components.scss +15 -4
- package/assets/sass/_example.scss +1 -1
- package/assets/sass/_functions/utility-mixins.scss +40 -0
- package/assets/sass/_functions/variables.scss +11 -5
- package/assets/sass/components/actionbar.component.scss +23 -1
- package/assets/sass/components/actionbar.global.scss +5 -5
- package/assets/sass/components/{address-lookup.scss → address-lookup.component.scss} +10 -0
- package/assets/sass/components/calendar.component.scss +1272 -0
- package/assets/sass/components/calendar.config.scss +423 -0
- package/assets/sass/components/card.component.scss +4 -34
- package/assets/sass/components/carousel.component.scss +5 -0
- package/assets/sass/components/collapsible-side.scss +91 -95
- package/assets/sass/components/content.component.scss +18 -0
- package/assets/sass/components/darkmode.component.scss +22 -0
- package/assets/sass/components/inline-edit.scss +2 -0
- package/assets/sass/components/{marketing.scss → marketing.component.scss} +2 -6
- package/assets/sass/components/menu.component.scss +3 -8
- package/assets/sass/components/milestone.scss +216 -0
- package/assets/sass/components/multi-step.component.scss +1 -1
- package/assets/sass/components/multiselect.preload.scss +1 -1
- package/assets/sass/components/multiselect.scss +2 -0
- package/assets/sass/components/nav.component.scss +17 -6
- package/assets/sass/components/nav.global.scss +29 -3
- package/assets/sass/components/notification.scss +32 -13
- package/assets/sass/components/rank.component.scss +197 -24
- package/assets/sass/components/rankings.component.scss +38 -28
- package/assets/sass/components/rankings.global.scss +64 -2
- package/assets/sass/components/split-button.component.scss +79 -0
- package/assets/sass/components/table-basic.global.scss +32 -32
- package/assets/sass/components/word-count.component.scss +26 -0
- package/assets/sass/elements/admin-panel.scss +1 -1
- package/assets/sass/elements/badge-tag.scss +5 -1
- package/assets/sass/elements/buttons--compact.scss +4 -0
- package/assets/sass/elements/details.scss +33 -7
- package/assets/sass/elements/forms.scss +135 -28
- package/assets/sass/elements/links.scss +132 -4
- package/assets/sass/elements/lists.scss +62 -1
- package/assets/sass/elements/popover.scss +64 -10
- package/assets/sass/elements/toggle-button.scss +8 -8
- package/assets/sass/elements/type.scss +7 -10
- package/assets/sass/foundations/colours.scss +0 -0
- package/assets/sass/foundations/reboot.scss +8 -1
- package/assets/sass/foundations/root.scss +41 -51
- package/assets/sass/templates/form.scss +0 -2
- package/assets/ts/components/accordion/accordion.component.ts +47 -26
- package/assets/ts/components/actionbar/actionbar.component.ts +58 -22
- package/assets/ts/components/address-lookup/address-lookup.component.ts +6 -8
- package/assets/ts/components/advanced-select/advanced-select.component.ts +74 -0
- package/assets/ts/components/calendar/calendar.component.ts +1330 -0
- package/assets/ts/components/card/card.component.ts +15 -14
- package/assets/ts/components/carousel/carousel.component.ts +17 -19
- package/assets/ts/components/collapsible-side/collapsible-side.component.ts +53 -12
- package/assets/ts/components/content/content.component.ts +78 -0
- package/assets/ts/components/darkmode/darkmode.component.ts +85 -0
- package/assets/ts/components/marketing/marketing.component.ts +1 -1
- package/assets/ts/components/menu/menu.component.ts +18 -10
- package/assets/ts/components/milestone/milestone.component.ts +43 -0
- package/assets/ts/components/milestone-group/milestone-group.component.ts +39 -0
- package/assets/ts/components/multiselect/multiselect.component.ts +60 -3
- package/assets/ts/components/nav/nav.component.ts +18 -0
- package/assets/ts/components/notification/notification.component.ts +30 -11
- package/assets/ts/components/rank/rank.component.ts +345 -209
- package/assets/ts/components/rankings/rankings.component.ts +27 -8
- package/assets/ts/components/search/search.component.ts +6 -4
- package/assets/ts/components/split-button/split-button.component.ts +67 -0
- package/assets/ts/components/table/table.component.ts +14 -0
- package/assets/ts/components/table-ajax/table-ajax.component.ts +14 -0
- package/assets/ts/components/table-no-submit/table-no-submit.component.ts +14 -0
- package/assets/ts/components/table-submit/table-submit.component.ts +14 -0
- package/assets/ts/components/video-card/video-card.component.ts +2 -3
- package/assets/ts/components/word-count/word-count.component.ts +91 -0
- package/assets/ts/components.ts +64 -0
- package/assets/ts/modules/advanced-select.ts +120 -0
- package/assets/ts/modules/data-layer.md +0 -5
- package/assets/ts/modules/dialogs.ts +64 -61
- package/assets/ts/modules/dynamicEvents.ts +10 -0
- package/assets/ts/modules/inputs.ts +0 -25
- package/assets/ts/modules/milestone-group.ts +39 -0
- package/assets/ts/modules/milestone.ts +119 -0
- package/assets/ts/modules/table.ts +15 -1
- package/assets/ts/modules/videos.ts +19 -37
- package/assets/ts/scripts.ts +6 -3
- package/dist/components.es.js +849 -1079
- package/dist/components.umd.js +1052 -220
- package/package.json +6 -6
- package/src/components/Accordion/Accordion.vue +14 -23
- package/src/components/Accordion/AccordionItem.vue +27 -43
- package/src/components/Actionbar/Actionbar.vue +17 -19
- package/src/components/AddressLookup/AddressLookup.vue +17 -18
- package/src/components/AdvancedSelect/AdvancedSelect.vue +22 -0
- package/src/components/AppliedFilters/AppliedFilters.vue +16 -18
- package/src/components/Banner/Banner.vue +18 -21
- package/src/components/BarChart/BarChart.vue +17 -18
- package/src/components/Calendar/Calendar.vue +20 -0
- package/src/components/Card/Card.vue +17 -17
- package/src/components/Carousel/Carousel.vue +17 -20
- package/src/components/CollapsibleSideMenu/CollapsibleSideMenu.vue +7 -13
- package/src/components/Content/Content.vue +22 -0
- package/src/components/DarkMode/DarkMode.vue +19 -0
- package/src/components/DoughnutChart/DoughnutChart.vue +17 -18
- package/src/components/FileUpload/FileUpload.vue +22 -28
- package/src/components/FilterCard/FilterCard.vue +17 -18
- package/src/components/Filterlist/Filterlist.vue +17 -0
- package/src/components/Header/Header.vue +28 -29
- package/src/components/InlineEdit/InlineEdit.vue +11 -19
- package/src/components/Menu/Menu.vue +17 -17
- package/src/components/Milestones/Milestone.vue +22 -0
- package/src/components/Milestones/MilestoneGroup.vue +24 -0
- package/src/components/Multiselect/Multiselect.vue +17 -18
- package/src/components/Nav/Nav.vue +17 -19
- package/src/components/Notification/Notification.vue +17 -15
- package/src/components/Pagination/Pagination.vue +16 -16
- package/src/components/Rank/Rank.vue +17 -18
- package/src/components/Rankings/Rankings.vue +17 -27
- package/src/components/RecordCard/RecordCard.vue +17 -18
- package/src/components/Search/Search.vue +17 -17
- package/src/components/Slider/Slider.vue +17 -17
- package/src/components/SplitButton/README.md +19 -0
- package/src/components/SplitButton/SplitButton.vue +23 -0
- package/src/components/Tabs/Tabs.vue +17 -17
- package/src/components/VideoCard/VideoCard.vue +17 -18
- package/src/components/WordCount/WordCount.vue +22 -0
- package/src/index.js +2 -0
- package/assets/css/components/address-lookup.css +0 -1
- package/assets/css/components/address-lookup.css.map +0 -1
- package/assets/css/components/marketing.css +0 -1
- package/assets/css/components/marketing.css.map +0 -1
- package/assets/css/components/menu.css.map +0 -1
- package/assets/css/components/nav.old.css +0 -1
- package/assets/css/components/nav.old.css.map +0 -1
- package/assets/sass/components/nav.old.scss +0 -891
- /package/assets/sass/components/{menu.scss → menu.global.scss} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/const w=(t,i,o,a)=>{const s=Math.tan(.375*Math.PI),r=window.innerWidth||document.body.clientWidth,n=Math.max(1,Math.floor(.01*r)),c=o-t,e=a-i,d=Math.abs(c/e),l=Math.abs(e/c);if(Math.abs(c)>n||Math.abs(e)>n){if(l<=s)return c<0?"left":"right";if(d<=s)return e<0?"top":"bottom"}else return"tap"},g=function(t){const i=t.querySelectorAll(":scope > details, :scope > a");let o=t.querySelector(":scope > .tabs__links"),a=t.querySelector(":scope .tabs__dropdown");if(t.shadowRoot&&t.shadowRoot.querySelector(".tabs__links")&&(o=t.shadowRoot.querySelector(".tabs__links")),!o){o=document.createElement("div"),o.classList.add("tabs__links");const r=document.createElement("div");r.classList.add("tabs__links__wrapper"),r.prepend(o),t.prepend(r)}a||(a=document.createElement("select"),a.classList.add("tabs__dropdown"),t.prepend(a));let s=0;i.forEach(r=>{let n=document.createElement("button");const c=document.createElement("option");if(r.matches("details")){const e=r.querySelector(":scope > summary"),d=e.classList.contains("disabled");e.classList.add("visually-hidden"),r.hasAttribute("id")&&n.setAttribute("data-id",`${r.getAttribute("id")}`),r.hasAttribute("open")&&n.setAttribute("aria-pressed",!0),n.innerHTML=`${e.innerText}`,n.classList.add("link"),n.setAttribute("data-index",s),n.setAttribute("part","tab-link"),c.innerHTML=`${e.innerText}`,c.value=e.innerText.replace(/\s+/g,"-").toLowerCase(),c.setAttribute("data-index",s),r.setAttribute("tabindex","-1"),d&&n.classList.add("disabled"),s++}else r.matches("a")&&(n=r);n.classList.add("link"),o.appendChild(n),a.appendChild(c)})},y=function(t){const i=t.querySelectorAll(":scope > details"),o=t.querySelectorAll(":scope > details > summary");let a=t.querySelector(":scope .tabs__links"),s=t.querySelectorAll(":scope .tabs__links > button");const r=t.querySelector(":scope .tabs__dropdown");let n=t.querySelector(":scope .tabs__next"),c;if(window.isClicked=!1,window.isScrolling=!1,t.shadowRoot&&(s=t.shadowRoot.querySelectorAll(".tabs__links > button"),a=t.shadowRoot.querySelector(".tabs__links"),n=t.shadowRoot.querySelector(".tabs__next")),s.forEach(e=>{e.addEventListener("click",d=>{if(d.preventDefault(),window.isClicked=!0,e.classList.contains("disabled"))return!1;s.forEach(l=>{const b=l==e;l.setAttribute("aria-pressed",b)}),a.scroll({top:0,left:e.offsetLeft,behavior:"smooth"}),k(i,e),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openTab",tabTitle:e.textContent}),e.matches(":last-child")?n?.setAttribute("disabled","disabled"):n?.removeAttribute("disabled")}),v(i,r)}),a.addEventListener("scrollend",()=>{clearTimeout(c),c=setTimeout(function(){let e=s[0],d=Math.abs(e.getBoundingClientRect().left);if(s.forEach(l=>{Math.abs(l.getBoundingClientRect().left)<d&&(d=Math.abs(l.getBoundingClientRect().left),e=l)}),window.isClicked)return window.isClicked=!1,!1;e.click(),e.focus()},500)}),o.forEach((e,d)=>{e.addEventListener("click",l=>{l.preventDefault(),s[d].click()})}),n?.addEventListener("click",e=>{e.preventDefault();const l=a.querySelector('[aria-pressed="true"]').nextSibling;l&&l.click()}),t.classList.contains("tabs--guided")){let e=0,d=0,l=0,b=0;i.forEach(u=>{u.addEventListener("touchstart",p=>{p.stopPropagation(),e=p.changedTouches[0].screenX,d=p.changedTouches[0].screenY}),u.addEventListener("touchend",p=>{p.stopPropagation(),l=p.changedTouches[0].screenX,b=p.changedTouches[0].screenY;const f=w(e,d,l,b),_=a.querySelector('[aria-pressed="true"]'),h=_.nextSibling,m=_.previousSibling;switch(f){case"left":h&&h.click();break;case"right":m&&m.click();break}})})}},k=function(t,i){t.forEach((o,a)=>{const s=i.getAttribute("data-index")==a;s?o.setAttribute("open",s):o.removeAttribute("open")})},v=function(t,i){i.addEventListener("change",o=>{o.preventDefault();const a=i.options[i.selectedIndex];k(t,a),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openTab",tabTitle:a.innerText})})},x=function(t){if(!t.querySelector(":scope > details"))return!1;const i=t.querySelectorAll(":scope > details"),o=t.shadowRoot.querySelectorAll(".tabs__links > button");location.hash&&t.shadowRoot.querySelector(`.tabs__links [data-id="${location.hash.replace("#","")}"]`)?(t.shadowRoot.querySelector(`[data-id="${location.hash.replace("#","")}"]`).setAttribute("aria-pressed",!0),t.querySelector(`details[id="${location.hash.replace("#","")}"]`).setAttribute("open",!0)):t.querySelector("details[open]")||(i[0].setAttribute("open",!0),o[0].setAttribute("aria-pressed",!0))},L=function(t){g(t),y(t),x(t)};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"tabs"});class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.component.min.js","sources":["../../modules/helpers.js","../../modules/tabs.js","tabs.component.js"],"sourcesContent":["/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n body.classList.add('js-enabled');\n if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n body.classList.add('ie');\n }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n const checkElements = function (hash) {\n const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n const summary = document.querySelector(hash + ' summary');\n const dialog = document.querySelector(`dialog${hash}`);\n const detail = document.querySelector(`detail${hash}`);\n if (label instanceof HTMLElement)\n label.click();\n else if (summary instanceof HTMLElement)\n summary.click();\n else if (dialog instanceof HTMLElement)\n dialog.showModal();\n else if (detail instanceof HTMLElement)\n detail.addAttribute('open');\n };\n if (location.hash)\n checkElements(location.hash);\n window.addEventListener('hashchange', function () {\n checkElements(location.hash);\n }, false);\n addEventListener('popstate', (event) => {\n if (event && event.state && event.state.type && event.state.type == 'pagination') {\n const form = document.querySelector(`#${event.state.form}`);\n const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n if (pageInput)\n pageInput.value = event.state.page;\n else\n form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n form.dispatchEvent(new Event('submit'));\n }\n });\n document.addEventListener('submit', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.matches('form')) {\n const form = event.target;\n // Reset password types\n Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n input.setAttribute('type', 'password');\n });\n if (form.querySelector(':invalid') ||\n form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n }\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n });\n Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n const label = progress.closest('label');\n label.setAttribute('data-percent', progress.getAttribute('value'));\n });\n};\nexport const isNumeric = function (str) {\n if (typeof str != 'string')\n return false; // we only process strings!\n return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n .split(' ')\n .map((s) => ucfirst(s))\n .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n str = str.toLowerCase();\n str = snake(str);\n str = str.replace(/\\W/g, '');\n return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n const convertStart = startDateString.split('/');\n const convertEnd = endDateString.split('/');\n const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n if (dateStart == 'Invalid Date')\n throw 'Start date is not a valid date';\n if (dateEnd == 'Invalid Date')\n throw 'End date is not a valid date';\n // To calculate the time difference of two dates\n const diffTime = dateEnd.getTime() - dateStart.getTime();\n const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n if (numberOfDays < 0)\n throw 'The start date should be before the end date';\n return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n // eslint-disable-next-line no-useless-escape\n .split(/[\\.\\[\\]\\'\\\"]/)\n .filter((p) => p)\n .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n const pageWidth = window.innerWidth || document.body.clientWidth;\n const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n const x = touchendX - touchstartX;\n const y = touchendY - touchstartY;\n const xy = Math.abs(x / y);\n const yx = Math.abs(y / x);\n if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n if (yx <= limit) {\n if (x < 0) {\n return 'left';\n }\n else {\n return 'right';\n }\n }\n if (xy <= limit) {\n if (y < 0) {\n return 'top';\n }\n else {\n return 'bottom';\n }\n }\n }\n else {\n return 'tap';\n }\n};\nexport const uniqueID = (index = 1) => {\n const ID = Math.floor(Math.random() * Date.now() * (index + 1));\n return ID;\n};\n","import { getSwipeDirection } from './helpers.js';\nexport const createTabsLinks = function (tabsElement) {\n const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');\n let tabLinks = tabsElement.querySelector(':scope > .tabs__links');\n let tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');\n if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))\n tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');\n if (!tabLinks) {\n tabLinks = document.createElement('div');\n tabLinks.classList.add('tabs__links');\n const tabLinksWrapper = document.createElement('div');\n tabLinksWrapper.classList.add('tabs__links__wrapper');\n tabLinksWrapper.prepend(tabLinks);\n tabsElement.prepend(tabLinksWrapper);\n }\n if (!tabDropdown) {\n tabDropdown = document.createElement('select');\n tabDropdown.classList.add('tabs__dropdown');\n tabsElement.prepend(tabDropdown);\n }\n // Create the tab buttons from the summary titles\n let tabindex = 0;\n detailsORLinks.forEach((element) => {\n let button = document.createElement('button');\n const dropdownOpt = document.createElement('option');\n if (element.matches('details')) {\n const summary = element.querySelector(':scope > summary');\n const isDisabled = summary.classList.contains('disabled');\n summary.classList.add('visually-hidden');\n if (element.hasAttribute('id'))\n button.setAttribute('data-id', `${element.getAttribute('id')}`);\n if (element.hasAttribute('open')) {\n button.setAttribute('aria-pressed', true);\n }\n button.innerHTML = `${summary.innerText}`;\n button.classList.add('link');\n button.setAttribute('data-index', tabindex);\n button.setAttribute('part', 'tab-link');\n dropdownOpt.innerHTML = `${summary.innerText}`;\n dropdownOpt.value = summary.innerText.replace(/\\s+/g, '-').toLowerCase();\n dropdownOpt.setAttribute('data-index', tabindex);\n element.setAttribute('tabindex', '-1');\n if (isDisabled) {\n button.classList.add('disabled');\n }\n tabindex++;\n }\n else if (element.matches('a')) {\n button = element;\n }\n button.classList.add('link');\n tabLinks.appendChild(button);\n tabDropdown.appendChild(dropdownOpt);\n });\n};\nexport const setTabsEventHandlers = function (tabsElement) {\n const details = tabsElement.querySelectorAll(':scope > details');\n const summaries = tabsElement.querySelectorAll(':scope > details > summary');\n let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');\n let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');\n const tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');\n let nextButton = tabsElement.querySelector(':scope .tabs__next');\n let scrollTimeout;\n window.isClicked = false;\n window.isScrolling = false;\n if (tabsElement.shadowRoot) {\n buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');\n buttonWrapper = tabsElement.shadowRoot.querySelector('.tabs__links');\n nextButton = tabsElement.shadowRoot.querySelector('.tabs__next');\n }\n // Set the on click for the tab buttons, these will open the details box it matches too\n buttons.forEach((button) => {\n button.addEventListener('click', (e) => {\n e.preventDefault();\n window.isClicked = true;\n if (button.classList.contains('disabled'))\n return false;\n buttons.forEach((buttonLoopItem) => {\n const buttonPressed = buttonLoopItem == button ? true : false;\n buttonLoopItem.setAttribute('aria-pressed', buttonPressed);\n });\n buttonWrapper.scroll({\n top: 0,\n left: button.offsetLeft,\n behavior: 'smooth',\n });\n //Handles showing correct content\n toggleTab(details, button);\n // Data layer Open Event\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openTab',\n tabTitle: button.textContent,\n });\n if (button.matches(':last-child')) {\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.setAttribute('disabled', 'disabled');\n }\n else {\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.removeAttribute('disabled');\n }\n });\n dropdownTabSelector(details, tabDropdown);\n });\n buttonWrapper.addEventListener('scrollend', () => {\n clearTimeout(scrollTimeout);\n scrollTimeout = setTimeout(function () {\n let buttonToClick = buttons[0];\n let closestOffset = Math.abs(buttonToClick.getBoundingClientRect().left);\n buttons.forEach((button) => {\n if (Math.abs(button.getBoundingClientRect().left) < closestOffset) {\n closestOffset = Math.abs(button.getBoundingClientRect().left);\n buttonToClick = button;\n }\n });\n if (window.isClicked) {\n window.isClicked = false;\n return false;\n }\n else {\n buttonToClick.click();\n }\n buttonToClick.focus();\n }, 500);\n });\n // Make sure we dont loose existing summary functionality\n summaries.forEach((summary, index) => {\n summary.addEventListener('click', (e) => {\n e.preventDefault();\n buttons[index].click();\n });\n });\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', (e) => {\n e.preventDefault();\n const currentTab = buttonWrapper.querySelector('[aria-pressed=\"true\"]');\n const nextTab = currentTab.nextSibling;\n if (nextTab)\n nextTab.click();\n });\n if (tabsElement.classList.contains('tabs--guided')) {\n let touchstartX = 0;\n let touchstartY = 0;\n let touchendX = 0;\n let touchendY = 0;\n details.forEach((detail) => {\n detail.addEventListener('touchstart', (event) => {\n event.stopPropagation();\n touchstartX = event.changedTouches[0].screenX;\n touchstartY = event.changedTouches[0].screenY;\n });\n detail.addEventListener('touchend', (event) => {\n event.stopPropagation();\n touchendX = event.changedTouches[0].screenX;\n touchendY = event.changedTouches[0].screenY;\n const direction = getSwipeDirection(touchstartX, touchstartY, touchendX, touchendY);\n const currentTab = buttonWrapper.querySelector('[aria-pressed=\"true\"]');\n const nextTab = currentTab.nextSibling;\n const prevTab = currentTab.previousSibling;\n switch (direction) {\n case 'left':\n if (nextTab)\n nextTab.click();\n break;\n case 'right':\n if (prevTab)\n prevTab.click();\n break;\n }\n });\n });\n }\n};\nexport const toggleTab = function (details, button) {\n details.forEach((detail, detailsIndex) => {\n const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;\n if (detailsOpen)\n detail.setAttribute('open', detailsOpen);\n else\n detail.removeAttribute('open');\n });\n};\nexport const dropdownTabSelector = function (details, dropdown) {\n dropdown.addEventListener('change', (e) => {\n e.preventDefault();\n const selected = dropdown.options[dropdown.selectedIndex];\n toggleTab(details, selected);\n // Data layer Open Event\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openTab',\n tabTitle: selected.innerText,\n });\n });\n};\nexport const openFirstTab = function (tabsElement) {\n if (!tabsElement.querySelector(':scope > details'))\n return false;\n const details = tabsElement.querySelectorAll(':scope > details');\n const buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');\n if (location.hash &&\n tabsElement.shadowRoot.querySelector(`.tabs__links [data-id=\"${location.hash.replace('#', '')}\"]`)) {\n tabsElement.shadowRoot\n .querySelector(`[data-id=\"${location.hash.replace('#', '')}\"]`)\n .setAttribute('aria-pressed', true);\n tabsElement.querySelector(`details[id=\"${location.hash.replace('#', '')}\"]`).setAttribute('open', true);\n }\n else if (!tabsElement.querySelector(`details[open]`)) {\n details[0].setAttribute('open', true);\n buttons[0].setAttribute('aria-pressed', true);\n }\n};\nconst tabs = function (tabsElement) {\n createTabsLinks(tabsElement);\n setTabsEventHandlers(tabsElement);\n openFirstTab(tabsElement);\n};\nexport default tabs;\n","import tabs from '../../modules/tabs.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'tabs',\n});\nclass iamTabs 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/tabs.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n\n :host(.admin-panel){\n display: contents!important;\n }\n \n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"tabs\" part=\"tabs\">\n <div class=\"tabs__dropdown\" part=\"tab-dropdown\"></div>\n\n <div class=\"tabs__links__wrapper\" part=\"wrapper\">\n <div class=\"tabs__links\" part=\"tab-links\"></div>\n </div>\n <slot></slot>\n <button part=\"next-button\" class=\"btn btn-secondary btn-sm btn-compact fa-regular fa-chevron-right tabs__next\">Next</button>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const classList = this.classList.toString().replace('container', '');\n this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);\n tabs(this);\n }\n}\nexport default iamTabs;\n"],"names":["getSwipeDirection","touchstartX","touchstartY","touchendX","touchendY","limit","pageWidth","treshold","x","y","xy","yx","createTabsLinks","tabsElement","detailsORLinks","tabLinks","tabDropdown","tabLinksWrapper","tabindex","element","button","dropdownOpt","summary","isDisabled","setTabsEventHandlers","details","summaries","buttonWrapper","buttons","nextButton","scrollTimeout","e","buttonLoopItem","buttonPressed","toggleTab","dropdownTabSelector","buttonToClick","closestOffset","index","nextTab","detail","event","direction","currentTab","prevTab","detailsIndex","detailsOpen","dropdown","selected","openFirstTab","tabs","iamTabs","assetLocation","coreCSS","template","classList"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.component.min.js","sources":["../../modules/helpers.js","../../modules/tabs.js","tabs.component.js"],"sourcesContent":["/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n body.classList.add('js-enabled');\n if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n body.classList.add('ie');\n }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n const checkElements = function (hash) {\n const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n const summary = document.querySelector(hash + ' summary');\n const dialog = document.querySelector(`dialog${hash}`);\n const detail = document.querySelector(`detail${hash}`);\n if (label instanceof HTMLElement)\n label.click();\n else if (summary instanceof HTMLElement)\n summary.click();\n else if (dialog instanceof HTMLElement)\n dialog.showModal();\n else if (detail instanceof HTMLElement)\n detail.addAttribute('open');\n };\n if (location.hash)\n checkElements(location.hash);\n window.addEventListener('hashchange', function () {\n checkElements(location.hash);\n }, false);\n addEventListener('popstate', (event) => {\n if (event && event.state && event.state.type && event.state.type == 'pagination') {\n const form = document.querySelector(`#${event.state.form}`);\n const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n if (pageInput)\n pageInput.value = event.state.page;\n else\n form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n form.dispatchEvent(new Event('submit'));\n }\n });\n document.addEventListener('submit', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.matches('form')) {\n const form = event.target;\n // Reset password types\n Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n input.setAttribute('type', 'password');\n });\n if (form.querySelector(':invalid') ||\n form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n }\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n });\n Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n const label = progress.closest('label');\n label.setAttribute('data-percent', progress.getAttribute('value'));\n });\n};\nexport const isNumeric = function (str) {\n if (typeof str != 'string')\n return false; // we only process strings!\n return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n .split(' ')\n .map((s) => ucfirst(s))\n .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n str = str.toLowerCase();\n str = snake(str);\n str = str.replace(/\\W/g, '');\n return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n const convertStart = startDateString.split('/');\n const convertEnd = endDateString.split('/');\n const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n if (dateStart == 'Invalid Date')\n throw 'Start date is not a valid date';\n if (dateEnd == 'Invalid Date')\n throw 'End date is not a valid date';\n // To calculate the time difference of two dates\n const diffTime = dateEnd.getTime() - dateStart.getTime();\n const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n if (numberOfDays < 0)\n throw 'The start date should be before the end date';\n return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n // eslint-disable-next-line no-useless-escape\n .split(/[\\.\\[\\]\\'\\\"]/)\n .filter((p) => p)\n .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n const pageWidth = window.innerWidth || document.body.clientWidth;\n const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n const x = touchendX - touchstartX;\n const y = touchendY - touchstartY;\n const xy = Math.abs(x / y);\n const yx = Math.abs(y / x);\n if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n if (yx <= limit) {\n if (x < 0) {\n return 'left';\n }\n else {\n return 'right';\n }\n }\n if (xy <= limit) {\n if (y < 0) {\n return 'top';\n }\n else {\n return 'bottom';\n }\n }\n }\n else {\n return 'tap';\n }\n};\nexport const uniqueID = (index = 1) => {\n const ID = Math.floor(Math.random() * Date.now() * (index + 1));\n return ID;\n};\n","import { getSwipeDirection } from './helpers.js';\nexport const createTabsLinks = function (tabsElement) {\n const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');\n let tabLinks = tabsElement.querySelector(':scope > .tabs__links');\n let tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');\n if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))\n tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');\n if (!tabLinks) {\n tabLinks = document.createElement('div');\n tabLinks.classList.add('tabs__links');\n const tabLinksWrapper = document.createElement('div');\n tabLinksWrapper.classList.add('tabs__links__wrapper');\n tabLinksWrapper.prepend(tabLinks);\n tabsElement.prepend(tabLinksWrapper);\n }\n if (!tabDropdown) {\n tabDropdown = document.createElement('select');\n tabDropdown.classList.add('tabs__dropdown');\n tabsElement.prepend(tabDropdown);\n }\n // Create the tab buttons from the summary titles\n let tabindex = 0;\n detailsORLinks.forEach((element) => {\n let button = document.createElement('button');\n const dropdownOpt = document.createElement('option');\n if (element.matches('details')) {\n const summary = element.querySelector(':scope > summary');\n const isDisabled = summary.classList.contains('disabled');\n summary.classList.add('visually-hidden');\n if (element.hasAttribute('id'))\n button.setAttribute('data-id', `${element.getAttribute('id')}`);\n if (element.hasAttribute('open')) {\n button.setAttribute('aria-pressed', true);\n }\n button.innerHTML = `${summary.innerText}`;\n button.classList.add('link');\n button.setAttribute('data-index', tabindex);\n button.setAttribute('part', 'tab-link');\n dropdownOpt.innerHTML = `${summary.innerText}`;\n dropdownOpt.value = summary.innerText.replace(/\\s+/g, '-').toLowerCase();\n dropdownOpt.setAttribute('data-index', tabindex);\n element.setAttribute('tabindex', '-1');\n if (isDisabled) {\n button.classList.add('disabled');\n }\n tabindex++;\n }\n else if (element.matches('a')) {\n button = element;\n }\n button.classList.add('link');\n tabLinks.appendChild(button);\n tabDropdown.appendChild(dropdownOpt);\n });\n};\nexport const setTabsEventHandlers = function (tabsElement) {\n const details = tabsElement.querySelectorAll(':scope > details');\n const summaries = tabsElement.querySelectorAll(':scope > details > summary');\n let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');\n let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');\n const tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');\n let nextButton = tabsElement.querySelector(':scope .tabs__next');\n let scrollTimeout;\n window.isClicked = false;\n window.isScrolling = false;\n if (tabsElement.shadowRoot) {\n buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');\n buttonWrapper = tabsElement.shadowRoot.querySelector('.tabs__links');\n nextButton = tabsElement.shadowRoot.querySelector('.tabs__next');\n }\n // Set the on click for the tab buttons, these will open the details box it matches too\n buttons.forEach((button) => {\n button.addEventListener('click', (e) => {\n e.preventDefault();\n window.isClicked = true;\n if (button.classList.contains('disabled'))\n return false;\n buttons.forEach((buttonLoopItem) => {\n const buttonPressed = buttonLoopItem == button ? true : false;\n buttonLoopItem.setAttribute('aria-pressed', buttonPressed);\n });\n buttonWrapper.scroll({\n top: 0,\n left: button.offsetLeft,\n behavior: 'smooth',\n });\n //Handles showing correct content\n toggleTab(details, button);\n // Data layer Open Event\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openTab',\n tabTitle: button.textContent,\n });\n if (button.matches(':last-child')) {\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.setAttribute('disabled', 'disabled');\n }\n else {\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.removeAttribute('disabled');\n }\n });\n dropdownTabSelector(details, tabDropdown);\n });\n buttonWrapper.addEventListener('scrollend', () => {\n clearTimeout(scrollTimeout);\n scrollTimeout = setTimeout(function () {\n let buttonToClick = buttons[0];\n let closestOffset = Math.abs(buttonToClick.getBoundingClientRect().left);\n buttons.forEach((button) => {\n if (Math.abs(button.getBoundingClientRect().left) < closestOffset) {\n closestOffset = Math.abs(button.getBoundingClientRect().left);\n buttonToClick = button;\n }\n });\n if (window.isClicked) {\n window.isClicked = false;\n return false;\n }\n else {\n buttonToClick.click();\n }\n buttonToClick.focus();\n }, 500);\n });\n // Make sure we dont loose existing summary functionality\n summaries.forEach((summary, index) => {\n summary.addEventListener('click', (e) => {\n e.preventDefault();\n buttons[index].click();\n });\n });\n nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', (e) => {\n e.preventDefault();\n const currentTab = buttonWrapper.querySelector('[aria-pressed=\"true\"]');\n const nextTab = currentTab.nextSibling;\n if (nextTab)\n nextTab.click();\n });\n if (tabsElement.classList.contains('tabs--guided')) {\n let touchstartX = 0;\n let touchstartY = 0;\n let touchendX = 0;\n let touchendY = 0;\n details.forEach((detail) => {\n detail.addEventListener('touchstart', (event) => {\n event.stopPropagation();\n touchstartX = event.changedTouches[0].screenX;\n touchstartY = event.changedTouches[0].screenY;\n });\n detail.addEventListener('touchend', (event) => {\n event.stopPropagation();\n touchendX = event.changedTouches[0].screenX;\n touchendY = event.changedTouches[0].screenY;\n const direction = getSwipeDirection(touchstartX, touchstartY, touchendX, touchendY);\n const currentTab = buttonWrapper.querySelector('[aria-pressed=\"true\"]');\n const nextTab = currentTab.nextSibling;\n const prevTab = currentTab.previousSibling;\n switch (direction) {\n case 'left':\n if (nextTab)\n nextTab.click();\n break;\n case 'right':\n if (prevTab)\n prevTab.click();\n break;\n }\n });\n });\n }\n};\nexport const toggleTab = function (details, button) {\n details.forEach((detail, detailsIndex) => {\n const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;\n if (detailsOpen)\n detail.setAttribute('open', detailsOpen);\n else\n detail.removeAttribute('open');\n });\n};\nexport const dropdownTabSelector = function (details, dropdown) {\n dropdown.addEventListener('change', (e) => {\n e.preventDefault();\n const selected = dropdown.options[dropdown.selectedIndex];\n toggleTab(details, selected);\n // Data layer Open Event\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openTab',\n tabTitle: selected.innerText,\n });\n });\n};\nexport const openFirstTab = function (tabsElement) {\n if (!tabsElement.querySelector(':scope > details'))\n return false;\n const details = tabsElement.querySelectorAll(':scope > details');\n const buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');\n if (location.hash &&\n tabsElement.shadowRoot.querySelector(`.tabs__links [data-id=\"${location.hash.replace('#', '')}\"]`)) {\n tabsElement.shadowRoot\n .querySelector(`[data-id=\"${location.hash.replace('#', '')}\"]`)\n .setAttribute('aria-pressed', true);\n tabsElement.querySelector(`details[id=\"${location.hash.replace('#', '')}\"]`).setAttribute('open', true);\n }\n else if (!tabsElement.querySelector(`details[open]`)) {\n details[0].setAttribute('open', true);\n buttons[0].setAttribute('aria-pressed', true);\n }\n};\nconst tabs = function (tabsElement) {\n createTabsLinks(tabsElement);\n setTabsEventHandlers(tabsElement);\n openFirstTab(tabsElement);\n};\nexport default tabs;\n","import tabs from '../../modules/tabs.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'tabs',\n});\nclass iamTabs 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/tabs.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n\n :host(.admin-panel){\n display: contents!important;\n }\n \n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"tabs\" part=\"tabs\">\n <div class=\"tabs__dropdown\" part=\"tab-dropdown\"></div>\n\n <div class=\"tabs__links__wrapper\" part=\"wrapper\">\n <div class=\"tabs__links\" part=\"tab-links\"></div>\n </div>\n <slot></slot>\n <button part=\"next-button\" class=\"btn btn-secondary btn-sm btn-compact fa-regular fa-chevron-right tabs__next\">Next</button>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const classList = this.classList.toString().replace('container', '');\n this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);\n tabs(this);\n }\n}\nexport default iamTabs;\n"],"names":["getSwipeDirection","touchstartX","touchstartY","touchendX","touchendY","limit","pageWidth","treshold","x","y","xy","yx","createTabsLinks","tabsElement","detailsORLinks","tabLinks","tabDropdown","tabLinksWrapper","tabindex","element","button","dropdownOpt","summary","isDisabled","setTabsEventHandlers","details","summaries","buttonWrapper","buttons","nextButton","scrollTimeout","e","buttonLoopItem","buttonPressed","toggleTab","dropdownTabSelector","buttonToClick","closestOffset","index","nextTab","detail","event","direction","currentTab","prevTab","detailsIndex","detailsOpen","dropdown","selected","openFirstTab","tabs","iamTabs","assetLocation","coreCSS","template","classList"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/const p=o=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:o})},h=(o,t,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),e.forEach(r=>{o.addEventListener(r,function(i){const d={event:r,element:t,target:i.target};Object.keys(i.detail).forEach(a=>{const n=i.detail[a];d[a]=n}),window.dataLayer.push(d)})}),!0),b=`<div class="card__head" part="head">
|
|
5
5
|
<slot name="head"></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n }\n else {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n }), \"2000\");\n body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n let target = event.target.closest('.youtube-link[data-youtube]');\n if (!target) {\n target = event.target.closest('.vimeo-link[data-vimeo]');\n }\n if (target && target.hasAttribute('data-youtube')) {\n event.preventDefault();\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n const link_id = 'youtube-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n dialog.showModal();\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n else if (target && target.hasAttribute('data-vimeo')) {\n event.preventDefault();\n const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const videoId = target.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n }));\n});\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = function () {\n // This code loads the IFrame Player API code asynchronously.\n const tag = document.createElement('script');\n tag.src = 'https://www.youtube.com/iframe_api';\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n document.body.classList.add('youtubeLoaded');\n resolve(true);\n };\n image.onerror = function () {\n reject(false);\n };\n image.src = 'https://youtube.com/favicon.ico';\n });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n if (typeof window.player == 'undefined') {\n window.player = [];\n }\n const link_id = target.getAttribute('id');\n if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n window.player[link_id].playVideo();\n return false;\n }\n // This function creates an <iframe> (and YouTube player) after the API code downloads.\n //function onYouTubeIframeAPIReady() {\n window.player[link_id] = new YT.Player(link_id, {\n height: '100%',\n width: '100%',\n videoId: video_id,\n playerVars: {\n modestbranding: 1,\n playsinline: 1,\n rel: 0,\n showinfo: 0,\n },\n events: {\n onReady: onPlayerReady,\n onStateChange: onPlayerStateChange,\n },\n });\n //}\n //onYouTubeIframeAPIReady();\n // The API will call this function when the video player is ready.\n function onPlayerReady(event) {\n // Play the video straight away\n event.target.playVideo();\n }\n // The API calls this function when the player's state changes.\n // The function indicates that when playing a video (state=1)\n let done = false;\n function onPlayerStateChange(event) {\n if (event.data == YT.PlayerState.PLAYING && !done) {\n const link = document.getElementById(link_id);\n link.classList.add('player-ready');\n done = true;\n }\n }\n});\nexport default videoSupport;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\nimport { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard 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/video-card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n ${cardHTML}\n <dialog>\n <div class=\"embed\"></div>\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n const link_id = randLetter + Date.now();\n let dialog;\n let embed;\n setupCard(cardComponent);\n // Check if youtube or vimeo video link is present\n if (cardComponent.querySelector('[data-youtube]'))\n cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n if (cardComponent.querySelector('[data-vimeo]'))\n cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n // General dialog stuff\n if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n cardHead.setAttribute('tabindex', '0');\n // Add dialog to page\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n dialog = document.getElementById(`${link_id}-dialog`);\n embed = document.getElementById(link_id);\n }\n // Youtube\n if (cardComponent.hasAttribute('data-youtube')) {\n // Load the scripts only once\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n cardHead.addEventListener('click', function () {\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n });\n cardComponent.dispatchEvent(customEvent);\n createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));\n dialog.showModal();\n });\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n else if (cardComponent.hasAttribute('data-vimeo')) {\n // Vimeo\n cardHead.addEventListener('click', function () {\n const videoId = cardComponent.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n cardComponent.dispatchEvent(customEvent);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n });\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","link_id","onPlayerReady","onPlayerStateChange","done","iamVideoCard","template","dialog","embed","customEvent","videoId","attrName","oldVal","newVal","cardHeadImg"],"mappings":";;;IAAO,MAAMA,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAE,EACzC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,EACaC,EAAiB,CAACC,EAAWF,EAAeG,KAErD,OAAO,UAAY,OAAO,WAAa,CAAE,EACzC,OAAO,UAAU,KAAK,CAClB,MAAO,qBACP,QAASH,CACjB,CAAK,EACDG,EAAY,QAASC,GAAc,CAC/BF,EAAU,iBAAiBE,EAAW,SAAUC,EAAO,CACnD,MAAMC,EAAe,CACjB,MAAOF,EACP,QAASJ,EACT,OAAQK,EAAM,MACjB,EACD,OAAO,KAAKA,EAAM,MAAM,EAAE,QAASE,GAAa,CAC5C,MAAMC,EAAcH,EAAM,OAAOE,CAAQ,EACzCD,EAAaC,CAAQ,EAAIC,CACzC,CAAa,EACD,OAAO,UAAU,KAAKF,CAAY,CAC9C,CAAS,CACT,CAAK,EACM,IC7BEG,EAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAeXC,EAAaC,GAAkB,CACxCA,EAAc,UAAU,IAAI,MAAM,EAClC,MAAMC,EAAWD,EAAc,WAAW,cAAc,aAAa,EAC/DE,EAAWF,EAAc,WAAW,cAAc,aAAa,EACjEA,EAAc,aAAa,YAAY,IACvCC,EAAS,WAAa,aAAaD,EAAc,aAAa,YAAY,CAAC,2CAG3EA,EAAc,aAAa,YAAY,EACvCE,EAAS,mBAAmB,YAAa,4BAA4BF,EAAc,aAAa,YAAY,CAAC,QAAQ,EAEhHA,EAAc,cAAc,qBAAqB,GACtDE,EAAS,mBAAmB,YAAa,gEAAgE,EAExGF,EAAc,cAAc,iBAAiB,EAI9CA,EAAc,WAAW,cAAc,eAAe,EAAE,UAAU,OAAO,OAAO,EAHhFA,EAAc,WAAW,cAAc,eAAe,EAAE,UAAU,IAAI,OAAO,CAKrF,ECnCA,IAAIG,EAAwC,SAAUC,EAASC,EAAYC,EAAGC,EAAW,CACrF,SAASC,EAAMC,EAAO,CAAE,OAAOA,aAAiBH,EAAIG,EAAQ,IAAIH,EAAE,SAAUI,EAAS,CAAEA,EAAQD,CAAK,CAAI,CAAA,CAAE,CAC1G,OAAO,IAAKH,IAAMA,EAAI,UAAU,SAAUI,EAASC,EAAQ,CACvD,SAASC,EAAUH,EAAO,CAAE,GAAI,CAAEI,EAAKN,EAAU,KAAKE,CAAK,CAAC,CAAI,OAAQK,EAAG,CAAEH,EAAOG,CAAC,CAAI,CAAA,CACzF,SAASC,EAASN,EAAO,CAAE,GAAI,CAAEI,EAAKN,EAAU,MAASE,CAAK,CAAC,CAAI,OAAQK,EAAG,CAAEH,EAAOG,CAAC,CAAI,CAAA,CAC5F,SAASD,EAAKG,EAAQ,CAAEA,EAAO,KAAON,EAAQM,EAAO,KAAK,EAAIR,EAAMQ,EAAO,KAAK,EAAE,KAAKJ,EAAWG,CAAQ,CAAE,CAC5GF,GAAMN,EAAYA,EAAU,MAAMH,EAASC,GAAc,CAAA,CAAE,GAAG,MAAM,CAC5E,CAAK,CACL,EA4EO,MAAMY,EAAqB,IAAMd,EAAU,OAAQ,OAAQ,OAAQ,WAAa,CACnF,OAAO,IAAI,QAAQ,CAACO,EAASC,IAAW,CACpC,MAAMO,EAAQ,IAAI,MAClBA,EAAM,OAAS,UAAY,CAEvB,MAAMC,EAAM,SAAS,cAAc,QAAQ,EAC3CA,EAAI,IAAM,qCACV,MAAMC,EAAiB,SAAS,qBAAqB,QAAQ,EAAE,CAAC,EAChEA,EAAe,WAAW,aAAaD,EAAKC,CAAc,EAC1D,SAAS,KAAK,UAAU,IAAI,eAAe,EAC3CV,EAAQ,EAAI,CACf,EACDQ,EAAM,QAAU,UAAY,CACxBP,EAAO,EAAK,CACf,EACDO,EAAM,IAAM,iCACpB,CAAK,CACL,CAAC,EACYG,EAAsB,CAACC,EAAQC,IAAapB,EAAU,OAAQ,OAAQ,OAAQ,WAAa,CAChG,OAAO,OAAO,OAAU,MACxB,OAAO,OAAS,CAAE,GAEtB,MAAMqB,EAAUF,EAAO,aAAa,IAAI,EACxC,GAAI,OAAO,OAAO,OAAOE,CAAO,EAAK,KAAe,OAAO,OAAO,OAAOA,CAAO,EAAE,YAAc,WAC5F,cAAO,OAAOA,CAAO,EAAE,UAAW,EAC3B,GAIX,OAAO,OAAOA,CAAO,EAAI,IAAI,GAAG,OAAOA,EAAS,CAC5C,OAAQ,OACR,MAAO,OACP,QAASD,EACT,WAAY,CACR,eAAgB,EAChB,YAAa,EACb,IAAK,EACL,SAAU,CACb,EACD,OAAQ,CACJ,QAASE,EACT,cAAeC,CAClB,CACT,CAAK,EAID,SAASD,EAAc/B,EAAO,CAE1BA,EAAM,OAAO,UAAW,CAChC,CAGI,IAAIiC,EAAO,GACX,SAASD,EAAoBhC,EAAO,CAC5BA,EAAM,MAAQ,GAAG,YAAY,SAAW,CAACiC,IAC5B,SAAS,eAAeH,CAAO,EACvC,UAAU,IAAI,cAAc,EACjCG,EAAO,GAEnB,CACA,CAAC,ECjJD,IAAIxB,EAAwC,SAAUC,EAASC,EAAYC,EAAGC,EAAW,CACrF,SAASC,EAAMC,EAAO,CAAE,OAAOA,aAAiBH,EAAIG,EAAQ,IAAIH,EAAE,SAAUI,EAAS,CAAEA,EAAQD,CAAK,CAAI,CAAA,CAAE,CAC1G,OAAO,IAAKH,IAAMA,EAAI,UAAU,SAAUI,EAASC,EAAQ,CACvD,SAASC,EAAUH,EAAO,CAAE,GAAI,CAAEI,EAAKN,EAAU,KAAKE,CAAK,CAAC,CAAI,OAAQK,EAAG,CAAEH,EAAOG,CAAC,CAAI,CAAA,CACzF,SAASC,EAASN,EAAO,CAAE,GAAI,CAAEI,EAAKN,EAAU,MAASE,CAAK,CAAC,CAAI,OAAQK,EAAG,CAAEH,EAAOG,CAAC,CAAI,CAAA,CAC5F,SAASD,EAAKG,EAAQ,CAAEA,EAAO,KAAON,EAAQM,EAAO,KAAK,EAAIR,EAAMQ,EAAO,KAAK,EAAE,KAAKJ,EAAWG,CAAQ,CAAE,CAC5GF,GAAMN,EAAYA,EAAU,MAAMH,EAASC,GAAc,CAAA,CAAE,GAAG,MAAM,CAC5E,CAAK,CACL,EAIAjB,EAAyB,gBAAgB,EACzC,MAAMwC,UAAqB,WAAY,CACnC,aAAc,CACV,MAAO,EACP,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,MAEvB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAIxE/B,CAAQ;AAAA;AAAA;AAAA;AAAA,MAKN,KAAK,WAAW,YAAY+B,EAAS,QAAQ,UAAU,EAAI,CAAC,CACpE,CACI,mBAAoB,CAChB,OAAO1B,EAAU,KAAM,OAAQ,OAAQ,WAAa,CAEhD,MAAMH,EAAgB,KAChBC,EAAWD,EAAc,WAAW,cAAc,aAAa,EAE/DwB,EADa,OAAO,aAAa,GAAK,KAAK,MAAM,KAAK,SAAW,EAAE,CAAC,EAC7C,KAAK,IAAK,EACvC,IAAIM,EACAC,EACJhC,EAAUC,CAAa,EAEnBA,EAAc,cAAc,gBAAgB,GAC5CA,EAAc,aAAa,eAAgBA,EAAc,cAAc,gBAAgB,EAAE,aAAa,cAAc,CAAC,EACrHA,EAAc,cAAc,cAAc,GAC1CA,EAAc,aAAa,aAAcA,EAAc,cAAc,cAAc,EAAE,aAAa,YAAY,CAAC,GAE/GA,EAAc,aAAa,cAAc,GAAKA,EAAc,aAAa,YAAY,KACrFC,EAAS,aAAa,WAAY,GAAG,EAEhC,SAAS,eAAe,GAAGuB,CAAO,SAAS,GAC5C,SAAS,KAAK,mBAAmB,YAAa,eAAeA,CAAO,mCAAmCA,CAAO,mBAAmB,EAErIM,EAAS,SAAS,eAAe,GAAGN,CAAO,SAAS,EACpDO,EAAQ,SAAS,eAAeP,CAAO,GAGvCxB,EAAc,aAAa,cAAc,GAEpC,SAAS,KAAK,UAAU,SAAS,eAAe,IAElC,MAAMiB,EAAkB,GAE3ChB,EAAS,iBAAiB,QAAS,UAAY,CAC3C,MAAM+B,EAAc,IAAI,YAAY,aAAc,CAC9C,OAAQ,CAAE,aAAc,WAAY,GAAIhC,EAAc,aAAa,cAAc,CAAG,CAC5G,CAAqB,EACDA,EAAc,cAAcgC,CAAW,EACvCX,EAAoBU,EAAO,KAAK,aAAa,gBAAgB,CAAC,EAC9DD,EAAO,UAAW,CACtC,CAAiB,EACDA,EAAO,iBAAiB,QAAS,IAAM,CAC/B,OAAO,OAAOC,EAAM,aAAa,IAAI,CAAC,GACtC,OAAO,OAAO,OAAOA,EAAM,aAAa,IAAI,CAAC,EAAE,YAAc,YAC7D,OAAO,OAAOA,EAAM,aAAa,IAAI,CAAC,EAAE,WAAY,EAExD,MAAMC,EAAc,IAAI,YAAY,cAAe,CAC/C,OAAQ,CAAE,aAAc,WAAY,GAAIhC,EAAc,aAAa,cAAc,CAAG,CAC5G,CAAqB,EACDA,EAAc,cAAcgC,CAAW,CAC3D,CAAiB,GAEIhC,EAAc,aAAa,YAAY,IAE5CC,EAAS,iBAAiB,QAAS,UAAY,CAC3C,MAAMgC,EAAUjC,EAAc,aAAa,YAAY,EACjDgC,EAAc,IAAI,YAAY,aAAc,CAC9C,OAAQ,CAAE,aAAc,QAAS,GAAIC,CAAS,CACtE,CAAqB,EACDjC,EAAc,cAAcgC,CAAW,EAClCD,EAAM,cAAc,QAAQ,IAC7BA,EAAM,UAAY,+CAA+CE,CAAO,gKAC5EH,EAAO,UAAW,CACtC,CAAiB,EACDA,EAAO,iBAAiB,QAAS,IAAM,CACnCC,EAAM,UAAY,GAClB,MAAMC,EAAc,IAAI,YAAY,cAAe,CAC/C,OAAQ,CAAE,aAAc,QAAS,GAAIhC,EAAc,aAAa,YAAY,CAAG,CACvG,CAAqB,EACDA,EAAc,cAAcgC,CAAW,CAC3D,CAAiB,GAEL1C,EAAeU,EAAe,iBAAkB,CAAC,aAAc,aAAa,CAAC,CACzF,CAAS,CACT,CACI,WAAW,oBAAqB,CAC5B,MAAO,CAAC,YAAY,CAC5B,CACI,yBAAyBkC,EAAUC,EAAQC,EAAQ,CAC/C,OAAQF,EAAQ,CACZ,IAAK,aAAc,CACf,GAAIC,GAAUC,EAAQ,CAClB,MAAMC,EAAc,KAAK,WAAW,cAAc,iBAAiB,EAC/DA,GACAA,EAAY,aAAa,MAAOD,CAAM,CAC9D,CACgB,KAChB,CACA,CACA,CACA"}
|
|
1
|
+
{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n }\n else {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n }), '2000');\n body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n let target = event.target.closest('.youtube-link[data-youtube]');\n if (!target) {\n target = event.target.closest('.vimeo-link[data-vimeo]');\n }\n if (target && target.hasAttribute('data-youtube')) {\n event.preventDefault();\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n const link_id = 'youtube-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n dialog.showModal();\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n else if (target && target.hasAttribute('data-vimeo')) {\n event.preventDefault();\n const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const videoId = target.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n }));\n});\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = function () {\n // This code loads the IFrame Player API code asynchronously.\n const tag = document.createElement('script');\n tag.src = 'https://www.youtube.com/iframe_api';\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n document.body.classList.add('youtubeLoaded');\n resolve(true);\n };\n image.onerror = function () {\n reject(false);\n };\n image.src = 'https://youtube.com/favicon.ico';\n });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n if (typeof window.player == 'undefined') {\n window.player = [];\n }\n const link_id = target.getAttribute('id');\n if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n window.player[link_id].playVideo();\n return false;\n }\n // This function creates an <iframe> (and YouTube player) after the API code downloads.\n //function onYouTubeIframeAPIReady() {\n window.player[link_id] = new YT.Player(link_id, {\n height: '100%',\n width: '100%',\n videoId: video_id,\n playerVars: {\n modestbranding: 1,\n playsinline: 1,\n rel: 0,\n showinfo: 0,\n },\n events: {\n onReady: onPlayerReady,\n onStateChange: onPlayerStateChange,\n },\n });\n //}\n //onYouTubeIframeAPIReady();\n // The API will call this function when the video player is ready.\n function onPlayerReady(event) {\n // Play the video straight away\n event.target.playVideo();\n }\n // The API calls this function when the player's state changes.\n // The function indicates that when playing a video (state=1)\n let done = false;\n function onPlayerStateChange(event) {\n if (event.data == YT.PlayerState.PLAYING && !done) {\n const link = document.getElementById(link_id);\n link.classList.add('player-ready');\n done = true;\n }\n }\n});\nexport default videoSupport;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\nimport { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard 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/video-card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n ${cardHTML}\n <dialog>\n <div class=\"embed\"></div>\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n const link_id = randLetter + Date.now();\n let dialog;\n let embed;\n setupCard(cardComponent);\n // Check if youtube or vimeo video link is present\n if (cardComponent.querySelector('[data-youtube]'))\n cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n if (cardComponent.querySelector('[data-vimeo]'))\n cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n // General dialog stuff\n if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n cardHead.setAttribute('tabindex', '0');\n // Add dialog to page\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n dialog = document.getElementById(`${link_id}-dialog`);\n embed = document.getElementById(link_id);\n }\n // Youtube\n if (cardComponent.hasAttribute('data-youtube')) {\n // Load the scripts only once\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n cardHead.addEventListener('click', function () {\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n });\n cardComponent.dispatchEvent(customEvent);\n createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));\n dialog.showModal();\n });\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n else if (cardComponent.hasAttribute('data-vimeo')) {\n // Vimeo\n cardHead.addEventListener('click', function () {\n const videoId = cardComponent.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n cardComponent.dispatchEvent(customEvent);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n });\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","link_id","onPlayerReady","onPlayerStateChange","done","iamVideoCard","template","dialog","embed","customEvent","videoId","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { trackComponentRegistered } from '../_global.js';
|
|
2
|
+
trackComponentRegistered('iam-word-count');
|
|
3
|
+
class iamCard extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super();
|
|
6
|
+
this.attachShadow({ mode: 'open' });
|
|
7
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
8
|
+
? document.body.getAttribute('data-assets-location')
|
|
9
|
+
: '/assets';
|
|
10
|
+
const loadCSS = `@import "${assetLocation}/css/components/word-count.component.css";`;
|
|
11
|
+
const template = document.createElement('template');
|
|
12
|
+
template.innerHTML = `
|
|
13
|
+
<style>
|
|
14
|
+
|
|
15
|
+
${loadCSS}
|
|
16
|
+
</style>
|
|
17
|
+
<slot></slot>
|
|
18
|
+
`;
|
|
19
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
const input = this.querySelector('input,textarea,select');
|
|
23
|
+
let span = this.querySelector('[data-count]');
|
|
24
|
+
if (!span) {
|
|
25
|
+
span = document.createElement('span');
|
|
26
|
+
this.append(span);
|
|
27
|
+
}
|
|
28
|
+
console.log(input.value.split(' ').length);
|
|
29
|
+
if (this.hasAttribute('data-character'))
|
|
30
|
+
span.setAttribute('data-count', input.value ? input.value.length : '0');
|
|
31
|
+
else
|
|
32
|
+
span.setAttribute('data-count', input.value ? input.value.split(' ').length : '0');
|
|
33
|
+
const maxlength = this.getAttribute('data-max');
|
|
34
|
+
this.style.setProperty('--maxlength', maxlength);
|
|
35
|
+
span.setAttribute('data-max', this.getAttribute('data-max'));
|
|
36
|
+
input.addEventListener('input', (event) => {
|
|
37
|
+
if (this.hasAttribute('data-max') && span && this.hasAttribute('data-character')) {
|
|
38
|
+
input === null || input === void 0 ? void 0 : input.setAttribute('maxlength', this.getAttribute('data-max'));
|
|
39
|
+
span.setAttribute('data-count', input === null || input === void 0 ? void 0 : input.value.length);
|
|
40
|
+
}
|
|
41
|
+
else if (this.hasAttribute('data-max') && span) {
|
|
42
|
+
if ((input === null || input === void 0 ? void 0 : input.value.split(' ').length) >= this.getAttribute('data-max')) {
|
|
43
|
+
event === null || event === void 0 ? void 0 : event.preventDefault();
|
|
44
|
+
input === null || input === void 0 ? void 0 : input.setAttribute('maxlength', input === null || input === void 0 ? void 0 : input.value.length);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
input === null || input === void 0 ? void 0 : input.removeAttribute('maxlength');
|
|
48
|
+
}
|
|
49
|
+
span.setAttribute('data-count', input === null || input === void 0 ? void 0 : input.value.split(' ').length);
|
|
50
|
+
span.setAttribute('data-max', this.getAttribute('data-max'));
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
/*
|
|
54
|
+
|
|
55
|
+
// maxlength counter init
|
|
56
|
+
Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
|
|
57
|
+
const wrapper = input.parentElement;
|
|
58
|
+
setMaxlengthVars(input, wrapper);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
const wrapper = input.parentElement;
|
|
64
|
+
const maxlength = input.getAttribute('maxlength');
|
|
65
|
+
|
|
66
|
+
wrapper.style.setProperty('--maxlength', maxlength);
|
|
67
|
+
|
|
68
|
+
let span = input.nextElementSibling;
|
|
69
|
+
|
|
70
|
+
if (!span || (span && span.classList.contains('invalid-feedback'))) {
|
|
71
|
+
span = document.createElement('span');
|
|
72
|
+
wrapper.insertBefore(span, input.nextSibling);
|
|
73
|
+
}
|
|
74
|
+
v
|
|
75
|
+
span.setAttribute('data-count', input.value.length);
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
*/
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
export default iamCard;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* iamKey v7.5.0
|
|
3
|
+
* Copyright 2022-2025 iamproperty
|
|
4
|
+
*/const o=i=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:i})};o("iam-word-count");class n 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
|
+
<style>
|
|
6
|
+
|
|
7
|
+
:host{display:block;max-width:var(--input-max-width, 50rem)}::slotted(span){position:relative;display:block}::slotted(span)::before{display:inline-block;content:attr(data-count) " / " attr(data-max);float:right;margin:0 0 1em 1em}/*# sourceMappingURL=assets/css/components/word-count.component.css.map */
|
|
8
|
+
|
|
9
|
+
</style>
|
|
10
|
+
<slot></slot>
|
|
11
|
+
`,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){const t=this.querySelector("input,textarea,select");let e=this.querySelector("[data-count]");e||(e=document.createElement("span"),this.append(e)),console.log(t.value.split(" ").length),this.hasAttribute("data-character")?e.setAttribute("data-count",t.value?t.value.length:"0"):e.setAttribute("data-count",t.value?t.value.split(" ").length:"0");const s=this.getAttribute("data-max");this.style.setProperty("--maxlength",s),e.setAttribute("data-max",this.getAttribute("data-max")),t.addEventListener("input",a=>{this.hasAttribute("data-max")&&e&&this.hasAttribute("data-character")?(t?.setAttribute("maxlength",this.getAttribute("data-max")),e.setAttribute("data-count",t?.value.length)):this.hasAttribute("data-max")&&e&&(t?.value.split(" ").length>=this.getAttribute("data-max")?(a?.preventDefault(),t?.setAttribute("maxlength",t?.value.length)):t?.removeAttribute("maxlength"),e.setAttribute("data-count",t?.value.split(" ").length),e.setAttribute("data-max",this.getAttribute("data-max")))})}}export{n as default};
|
|
12
|
+
//# sourceMappingURL=word-count.component.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"word-count.component.min.js","sources":["../_global.js","word-count.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","import { trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-word-count');\nclass iamCard 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/word-count.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n\n ${loadCSS}\n </style>\n <slot></slot>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const input = this.querySelector('input,textarea,select');\n let span = this.querySelector('[data-count]');\n if (!span) {\n span = document.createElement('span');\n this.append(span);\n }\n console.log(input.value.split(' ').length);\n if (this.hasAttribute('data-character'))\n span.setAttribute('data-count', input.value ? input.value.length : '0');\n else\n span.setAttribute('data-count', input.value ? input.value.split(' ').length : '0');\n const maxlength = this.getAttribute('data-max');\n this.style.setProperty('--maxlength', maxlength);\n span.setAttribute('data-max', this.getAttribute('data-max'));\n input.addEventListener('input', (event) => {\n if (this.hasAttribute('data-max') && span && this.hasAttribute('data-character')) {\n input === null || input === void 0 ? void 0 : input.setAttribute('maxlength', this.getAttribute('data-max'));\n span.setAttribute('data-count', input === null || input === void 0 ? void 0 : input.value.length);\n }\n else if (this.hasAttribute('data-max') && span) {\n if ((input === null || input === void 0 ? void 0 : input.value.split(' ').length) >= this.getAttribute('data-max')) {\n event === null || event === void 0 ? void 0 : event.preventDefault();\n input === null || input === void 0 ? void 0 : input.setAttribute('maxlength', input === null || input === void 0 ? void 0 : input.value.length);\n }\n else {\n input === null || input === void 0 ? void 0 : input.removeAttribute('maxlength');\n }\n span.setAttribute('data-count', input === null || input === void 0 ? void 0 : input.value.split(' ').length);\n span.setAttribute('data-max', this.getAttribute('data-max'));\n }\n });\n /*\n \n // maxlength counter init\n Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {\n const wrapper = input.parentElement;\n setMaxlengthVars(input, wrapper);\n });\n \n \n \n const wrapper = input.parentElement;\n const maxlength = input.getAttribute('maxlength');\n \n wrapper.style.setProperty('--maxlength', maxlength);\n \n let span = input.nextElementSibling;\n \n if (!span || (span && span.classList.contains('invalid-feedback'))) {\n span = document.createElement('span');\n wrapper.insertBefore(span, input.nextSibling);\n }\n v\n span.setAttribute('data-count', input.value.length);\n \n \n */\n }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","iamCard","template","input","span","maxlength","event"],"mappings":";;;IAAO,MAAMA,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,ECNAD,EAAyB,gBAAgB,EACzC,MAAME,UAAgB,WAAY,CAC9B,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,MAOrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,MAAMC,EAAQ,KAAK,cAAc,uBAAuB,EACxD,IAAIC,EAAO,KAAK,cAAc,cAAc,EACvCA,IACDA,EAAO,SAAS,cAAc,MAAM,EACpC,KAAK,OAAOA,CAAI,GAEpB,QAAQ,IAAID,EAAM,MAAM,MAAM,GAAG,EAAE,MAAM,EACrC,KAAK,aAAa,gBAAgB,EAClCC,EAAK,aAAa,aAAcD,EAAM,MAAQA,EAAM,MAAM,OAAS,GAAG,EAEtEC,EAAK,aAAa,aAAcD,EAAM,MAAQA,EAAM,MAAM,MAAM,GAAG,EAAE,OAAS,GAAG,EACrF,MAAME,EAAY,KAAK,aAAa,UAAU,EAC9C,KAAK,MAAM,YAAY,cAAeA,CAAS,EAC/CD,EAAK,aAAa,WAAY,KAAK,aAAa,UAAU,CAAC,EAC3DD,EAAM,iBAAiB,QAAUG,GAAU,CACnC,KAAK,aAAa,UAAU,GAAKF,GAAQ,KAAK,aAAa,gBAAgB,GAC7BD,GAAM,aAAa,YAAa,KAAK,aAAa,UAAU,CAAC,EAC3GC,EAAK,aAAa,aAA4DD,GAAM,MAAM,MAAM,GAE3F,KAAK,aAAa,UAAU,GAAKC,IACaD,GAAM,MAAM,MAAM,GAAG,EAAE,QAAW,KAAK,aAAa,UAAU,GAC/DG,GAAM,eAAc,EACpBH,GAAM,aAAa,YAA2DA,GAAM,MAAM,MAAM,GAGhGA,GAAM,gBAAgB,WAAW,EAEnFC,EAAK,aAAa,aAA4DD,GAAM,MAAM,MAAM,GAAG,EAAE,MAAM,EAC3GC,EAAK,aAAa,WAAY,KAAK,aAAa,UAAU,CAAC,EAEnE,CAAC,CA2BL,CACJ"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
const components = [
|
|
3
|
+
'accordion',
|
|
4
|
+
'header',
|
|
5
|
+
'table',
|
|
6
|
+
'tabs',
|
|
7
|
+
'card',
|
|
8
|
+
'filter-card',
|
|
9
|
+
'video-card',
|
|
10
|
+
'record-card',
|
|
11
|
+
'filterlist',
|
|
12
|
+
'applied-filters',
|
|
13
|
+
'pagination',
|
|
14
|
+
'notification',
|
|
15
|
+
'actionbar',
|
|
16
|
+
'nav',
|
|
17
|
+
'collapsible-side',
|
|
18
|
+
'address-lookup',
|
|
19
|
+
'fileupload',
|
|
20
|
+
'search',
|
|
21
|
+
'inline-edit',
|
|
22
|
+
'multiselect',
|
|
23
|
+
'multi-step',
|
|
24
|
+
'slider',
|
|
25
|
+
'carousel',
|
|
26
|
+
'marketing',
|
|
27
|
+
'barchart',
|
|
28
|
+
'splitbutton',
|
|
29
|
+
'word-count',
|
|
30
|
+
];
|
|
31
|
+
const prefix = 'iam';
|
|
32
|
+
const options = {
|
|
33
|
+
rootMargin: '50px',
|
|
34
|
+
threshold: 0.1,
|
|
35
|
+
};
|
|
36
|
+
const componentExt = '.component.min.js';
|
|
37
|
+
// Load components - Each component will load once the first of its type has been loaded
|
|
38
|
+
components.forEach((component) => {
|
|
39
|
+
if (document.getElementsByTagName(`${prefix}-${component}`).length === 0)
|
|
40
|
+
return;
|
|
41
|
+
const callback = (entries) => {
|
|
42
|
+
entries.forEach((entry) => {
|
|
43
|
+
if (entry.intersectionRatio > 0) {
|
|
44
|
+
console.log(component);
|
|
45
|
+
import(`./components/${component}/${component}${componentExt}`)
|
|
46
|
+
.then((module) => {
|
|
47
|
+
if (!window.customElements.get(`${prefix}-${component}`))
|
|
48
|
+
window.customElements.define(`${prefix}-${component}`, module.default);
|
|
49
|
+
})
|
|
50
|
+
.catch((err) => {
|
|
51
|
+
console.log(err.message);
|
|
52
|
+
});
|
|
53
|
+
intObserver.unobserve(entry.target);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
const intObserver = new IntersectionObserver(callback, options);
|
|
58
|
+
intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
|
|
59
|
+
});
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
function advancedSelect(advancedSelect, displayInputField, datalist, isSearch = false) {
|
|
2
|
+
let currentFocus = -1;
|
|
3
|
+
if (!isSearch) {
|
|
4
|
+
displayInputField.addEventListener('focus', function () {
|
|
5
|
+
displayInputField.setAttribute('placeholder', displayInputField.value);
|
|
6
|
+
displayInputField.setAttribute('data-value', displayInputField.value);
|
|
7
|
+
displayInputField.value = '';
|
|
8
|
+
displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
|
|
9
|
+
displayInputField.setAttribute('list', '');
|
|
10
|
+
datalist.style.display = 'block';
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
displayInputField.addEventListener('focus', function () {
|
|
15
|
+
displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
|
|
16
|
+
displayInputField.setAttribute('list', '');
|
|
17
|
+
datalist.style.display = 'block';
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
displayInputField.addEventListener('blur', function () {
|
|
21
|
+
if (displayInputField.hasAttribute('data-value')) {
|
|
22
|
+
displayInputField.value = displayInputField.getAttribute('data-value');
|
|
23
|
+
}
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
datalist.style.display = 'none';
|
|
26
|
+
}, 500);
|
|
27
|
+
});
|
|
28
|
+
for (const option of datalist.options) {
|
|
29
|
+
if (option.innerHTML == '')
|
|
30
|
+
option.innerHTML = option.value;
|
|
31
|
+
}
|
|
32
|
+
advancedSelect.addEventListener('click', function () {
|
|
33
|
+
if (event && event.target instanceof HTMLElement && event.target.closest('datalist option')) {
|
|
34
|
+
const option = event.target.closest('datalist option');
|
|
35
|
+
displayInputField.value = option.value;
|
|
36
|
+
if (typeof window.triggerDynamicEvent == 'function')
|
|
37
|
+
window.triggerDynamicEvent(displayInputField);
|
|
38
|
+
datalist.style.display = 'none';
|
|
39
|
+
for (const optionInner of datalist.options) {
|
|
40
|
+
optionInner.classList.remove('active');
|
|
41
|
+
}
|
|
42
|
+
option.classList.add('active');
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
displayInputField.addEventListener('input', function () {
|
|
46
|
+
displayInputField.removeAttribute('data-value');
|
|
47
|
+
currentFocus = -1;
|
|
48
|
+
const text = displayInputField.value.toUpperCase();
|
|
49
|
+
for (const option of datalist.options) {
|
|
50
|
+
if (option.value.toUpperCase().indexOf(text) > -1) {
|
|
51
|
+
option.style.display = 'block';
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
option.style.display = 'none';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
displayInputField.addEventListener('keydown', function (e) {
|
|
59
|
+
if (e.keyCode == 40) {
|
|
60
|
+
currentFocus++;
|
|
61
|
+
addActive(datalist.options);
|
|
62
|
+
}
|
|
63
|
+
else if (e.keyCode == 38) {
|
|
64
|
+
currentFocus--;
|
|
65
|
+
addActive(datalist.options);
|
|
66
|
+
}
|
|
67
|
+
else if (e.keyCode == 13) {
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
if (currentFocus > -1) {
|
|
70
|
+
/*and simulate a click on the "active" item:*/
|
|
71
|
+
if (datalist.options)
|
|
72
|
+
datalist.options[currentFocus].click();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
function addActive(x) {
|
|
77
|
+
if (!x)
|
|
78
|
+
return false;
|
|
79
|
+
removeActive(x);
|
|
80
|
+
if (currentFocus >= x.length)
|
|
81
|
+
currentFocus = 0;
|
|
82
|
+
if (currentFocus < 0)
|
|
83
|
+
currentFocus = x.length - 1;
|
|
84
|
+
x[currentFocus].classList.add('active');
|
|
85
|
+
}
|
|
86
|
+
function removeActive(x) {
|
|
87
|
+
for (let i = 0; i < x.length; i++) {
|
|
88
|
+
x[i].classList.remove('active');
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
// Add the empty button
|
|
92
|
+
displayInputField
|
|
93
|
+
.closest('label')
|
|
94
|
+
.insertAdjacentHTML('beforeend', '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>');
|
|
95
|
+
const closeBtn = advancedSelect.querySelector('.empty');
|
|
96
|
+
closeBtn.addEventListener('click', function (e) {
|
|
97
|
+
displayInputField.removeAttribute('placeholder');
|
|
98
|
+
displayInputField.removeAttribute('data-value');
|
|
99
|
+
displayInputField.value = '';
|
|
100
|
+
for (const optionInner of datalist.options) {
|
|
101
|
+
optionInner.classList.remove('active');
|
|
102
|
+
optionInner.removeAttribute('style');
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
export default advancedSelect;
|