@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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'nav',\n});\nclass iamNav extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css')\n ? document.body.getAttribute('data-core-css')\n : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/nav.component.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/nav.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\n </style>\n <style class=\"doc-styles\">\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"container\">\n <slot name=\"logo\"></slot>\n <div class=\"buttons-holder\"></div>\n <button class=\"btn-menu\" part=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\n\n <div class=\"menu__outer\">\n <div class=\"menu closed\">\n \n <div class=\"menu__primary\">\n <slot></slot>\n <slot name=\"dual\"></slot>\n </div>\n <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\n <slot name=\"actions\"></slot>\n <div class=\"menu__secondary\">\n <div class=\"container\">\n <slot name=\"secondary\"></slot>\n </div>\n </div>\n </div>\n <slot name=\"menus\"></slot>\n </div> \n </div>\n <div class=\"backdrop\" part=\"backdrop\"></div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('navGlobal'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"navGlobal\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n // Load external CSS if needed\n if (this.hasAttribute('data-css'))\n this.shadowRoot\n .querySelector('.doc-styles')\n .insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n const menuButton = this.shadowRoot.querySelector('.btn-menu');\n const menu = this.shadowRoot.querySelector('.menu');\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const iamNav = this;\n const backdrop = this.shadowRoot.querySelector('.backdrop');\n const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n // Check the content\n this.querySelectorAll(':scope > *').forEach(function (element) {\n const tagname = element.tagName;\n switch (tagname) {\n case 'BUTTON':\n if (!element.hasAttribute('slot')) {\n element.setAttribute('slot', 'actions');\n menu.classList.add('has-actions');\n }\n break;\n }\n // Create menu button\n if (element.classList.contains('nav--menu') &&\n element.hasAttribute('data-title') &&\n element.hasAttribute('data-icon')) {\n const title = element.getAttribute('data-title');\n const iconClass = element.getAttribute('data-icon');\n // Create the menu button that sits seperately to the menu\n const button = document.createElement('button');\n button.setAttribute('slot', title);\n button.classList.add('btn-menu');\n button.setAttribute('part', 'btn-menu');\n button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n buttonsHolder.insertAdjacentElement('beforeend', button);\n const mdButton = button.querySelector('.btn-primary');\n // Make sure the menu is added to the right part of the component\n element.setAttribute('slot', 'menus');\n // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n if (element.classList.contains('open')) {\n button.setAttribute('aria-expanded', true);\n mdButton.classList.toggle('active');\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n }\n else {\n element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n }\n // Click event\n button.addEventListener('click', function (e) {\n e.preventDefault();\n button.toggleAttribute('aria-expanded');\n element.classList.toggle('open');\n mdButton.classList.toggle('active');\n // Close desktop menus\n const openMenu = iamNav.querySelector(':scope > details[open]');\n if (openMenu)\n openMenu.removeAttribute('open');\n // Close the main menu and fix states on the button, iamNav component and backdrop\n if (element.classList.contains('open')) {\n menu.classList.remove('open');\n menuButton.removeAttribute('aria-expanded');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000); // Delay until its close so the animation is broken\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n element.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n backdrop.classList.remove('show');\n setTimeout(function () {\n element.classList.add('closed');\n }, 1000);\n }\n // Close any open menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n if (openmenu != element) {\n openmenu.classList.remove('open');\n }\n });\n iamNav.shadowRoot\n .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')\n .forEach(function (selectedButton) {\n if (selectedButton != button) {\n selectedButton.removeAttribute('aria-expanded');\n const innerBtn = selectedButton.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n }\n });\n }, false);\n }\n });\n this.querySelectorAll('details').forEach(function (element) {\n element.classList.add('details--revert');\n });\n // Has secondary link\n if (this.querySelector('a[slot=\"secondary\"]')) {\n menu.classList.add('has-secondary');\n }\n // Create a scroll width variable to help with the sizing of the menu with in the CSS\n document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.offsetWidth + 'px');\n // Open and close the menu\n menuButton.addEventListener('click', function (e) {\n e.preventDefault();\n menuButton.toggleAttribute('aria-expanded');\n menu.classList.toggle('open');\n // Close any other menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () {\n element.classList.add('closed');\n }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n if (menu.classList.contains('open')) {\n iamNav.classList.add('open');\n menu.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000);\n }\n }, false);\n // Allow outside JS to close the menu\n this.addEventListener('request-close', () => {\n menuButton.removeAttribute('aria-expanded');\n menu.classList.remove('open');\n iamNav.classList.remove('open');\n });\n // Close the menu on the click of the backdrop on desktop\n backdrop.addEventListener('click', () => {\n const openMenu = this.querySelector('details[open] summary');\n if (openMenu)\n openMenu.click();\n iamNav.classList.toggle('open');\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n backdrop.classList.remove('show');\n });\n // On desktop close other menu's (details) when one is clicked\n this.addEventListener('click', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {\n const summary = event.target.closest('summary');\n const details = summary.closest('details');\n const wrapper = details.parentNode;\n if (details.hasAttribute('open'))\n details.removeAttribute('open');\n else\n details.setAttribute('open', 'true');\n // Close any bespoke menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n // Close any other dropdowns on the same level\n Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {\n if (detailsArrayElement != details)\n detailsArrayElement.removeAttribute('open');\n });\n if (this.querySelectorAll(':scope > details[open]').length) {\n backdrop.classList.add('show');\n iamNav.classList.add('open');\n }\n else {\n backdrop.classList.remove('show');\n iamNav.classList.remove('open');\n }\n event.preventDefault();\n }\n }\n });\n // Mega menu title\n this.querySelectorAll('details').forEach((detailsElement) => {\n const summary = detailsElement.querySelector('summary');\n const containerDiv = detailsElement.querySelector(':Scope > div');\n containerDiv.setAttribute('data-title', summary.textContent);\n });\n // Search\n if (this.querySelector('[slot=\"search\"]')) {\n menu.classList.add('has-search');\n const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n searchWrapper.classList.remove('d-none');\n searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\n <dialog id=\"search-dialog\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col mb-0 ms-auto col-md-7\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"col d-none d-md-block mw-fit-content ms-3\">\n <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\n </div>\n </div>\n </div>\n </dialog>`);\n const searchButton = this.shadowRoot.querySelector('#search-button');\n const searchClose = this.shadowRoot.querySelector('#search-close');\n const searchDialog = this.shadowRoot.querySelector('#search-dialog');\n if (this.hasAttribute('data-search-open')) {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n }\n searchButton.addEventListener('click', () => {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n });\n searchClose.addEventListener('click', () => {\n searchDialog.removeAttribute('open');\n this.classList.remove('search-open');\n searchButton.removeAttribute('aria-expanded');\n });\n }\n }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","assetLocation","coreCSS","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'nav',\n});\nclass iamNav extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css')\n ? document.body.getAttribute('data-core-css')\n : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/nav.component.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/nav.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\n </style>\n <style class=\"doc-styles\">\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"container\">\n <slot name=\"logo\"></slot>\n <div class=\"buttons-holder\"></div>\n <button class=\"btn-menu\" part=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\n\n <div class=\"menu__outer\">\n <div class=\"menu closed\">\n \n <div class=\"menu__primary\">\n <slot></slot>\n <slot name=\"dual\"></slot>\n </div>\n <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\n <slot name=\"actions\"></slot>\n <div class=\"menu__secondary\">\n <div class=\"container\">\n <slot name=\"secondary\"></slot>\n </div>\n </div>\n </div>\n <slot name=\"menus\"></slot>\n </div> \n </div>\n <div class=\"backdrop\" part=\"backdrop\"></div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('navGlobal'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"navGlobal\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n // Load external CSS if needed\n if (this.hasAttribute('data-css'))\n this.shadowRoot\n .querySelector('.doc-styles')\n .insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n const menuButton = this.shadowRoot.querySelector('.btn-menu');\n const menu = this.shadowRoot.querySelector('.menu');\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const iamNav = this;\n const backdrop = this.shadowRoot.querySelector('.backdrop');\n const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n // Check the content\n this.querySelectorAll(':scope > *').forEach(function (element) {\n const tagname = element.tagName;\n switch (tagname) {\n case 'BUTTON':\n if (!element.hasAttribute('slot')) {\n element.setAttribute('slot', 'actions');\n menu.classList.add('has-actions');\n }\n break;\n }\n // Create menu button\n if (element.classList.contains('nav--menu') &&\n element.hasAttribute('data-title') &&\n element.hasAttribute('data-icon')) {\n const title = element.getAttribute('data-title');\n const iconClass = element.getAttribute('data-icon');\n // Create the menu button that sits seperately to the menu\n const button = document.createElement('button');\n button.setAttribute('slot', title);\n button.classList.add('btn-menu');\n button.setAttribute('part', 'btn-menu');\n button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n buttonsHolder.insertAdjacentElement('beforeend', button);\n const mdButton = button.querySelector('.btn-primary');\n // Make sure the menu is added to the right part of the component\n element.setAttribute('slot', 'menus');\n // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n if (element.classList.contains('open')) {\n button.setAttribute('aria-expanded', true);\n mdButton.classList.toggle('active');\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n }\n else {\n element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n }\n // Click event\n button.addEventListener('click', function (e) {\n e.preventDefault();\n button.toggleAttribute('aria-expanded');\n element.classList.toggle('open');\n mdButton.classList.toggle('active');\n // Close desktop menus\n const openMenu = iamNav.querySelector(':scope > details[open]');\n if (openMenu)\n openMenu.removeAttribute('open');\n // Close the main menu and fix states on the button, iamNav component and backdrop\n if (element.classList.contains('open')) {\n menu.classList.remove('open');\n menuButton.removeAttribute('aria-expanded');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000); // Delay until its close so the animation is broken\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n element.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n backdrop.classList.remove('show');\n setTimeout(function () {\n element.classList.add('closed');\n }, 1000);\n }\n // Close any open menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n if (openmenu != element) {\n openmenu.classList.remove('open');\n }\n });\n iamNav.shadowRoot\n .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')\n .forEach(function (selectedButton) {\n if (selectedButton != button) {\n selectedButton.removeAttribute('aria-expanded');\n const innerBtn = selectedButton.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n }\n });\n }, false);\n }\n });\n this.querySelectorAll('details').forEach(function (element) {\n element.classList.add('details--revert');\n });\n // Has secondary link\n if (this.querySelector('a[slot=\"secondary\"]')) {\n menu.classList.add('has-secondary');\n }\n // Create a scroll width variable to help with the sizing of the menu with in the CSS\n document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.offsetWidth + 'px');\n // Open and close the menu\n menuButton.addEventListener('click', function (e) {\n e.preventDefault();\n menuButton.toggleAttribute('aria-expanded');\n menu.classList.toggle('open');\n // Close any other menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () {\n element.classList.add('closed');\n }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n if (menu.classList.contains('open')) {\n iamNav.classList.add('open');\n menu.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000);\n }\n }, false);\n // Allow outside JS to close the menu\n this.addEventListener('request-close', () => {\n menuButton.removeAttribute('aria-expanded');\n menu.classList.remove('open');\n iamNav.classList.remove('open');\n });\n // Close the menu on the click of the backdrop on desktop\n backdrop.addEventListener('click', () => {\n const openMenu = this.querySelector('details[open] summary');\n if (openMenu)\n openMenu.click();\n iamNav.classList.toggle('open');\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n backdrop.classList.remove('show');\n });\n // On desktop close other menu's (details) when one is clicked\n this.addEventListener('click', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {\n const summary = event.target.closest('summary');\n const details = summary.closest('details');\n const wrapper = details.parentNode;\n if (details.hasAttribute('open'))\n details.removeAttribute('open');\n else\n details.setAttribute('open', 'true');\n // Close any bespoke menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () {\n menu.classList.add('closed');\n }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n const innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n // Close any other dropdowns on the same level\n Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {\n if (detailsArrayElement != details)\n detailsArrayElement.removeAttribute('open');\n });\n if (this.querySelectorAll(':scope > details[open]').length) {\n backdrop.classList.add('show');\n iamNav.classList.add('open');\n }\n else {\n backdrop.classList.remove('show');\n iamNav.classList.remove('open');\n }\n event.preventDefault();\n }\n }\n });\n // Mega menu title\n this.querySelectorAll('details').forEach((detailsElement) => {\n const summary = detailsElement.querySelector('summary');\n const containerDiv = detailsElement.querySelector(':Scope > div');\n containerDiv.setAttribute('data-title', summary.textContent);\n });\n // Search\n if (this.querySelector('[slot=\"search\"]')) {\n menu.classList.add('has-search');\n const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n searchWrapper.classList.remove('d-none');\n searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\n <dialog id=\"search-dialog\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col mb-0 ms-auto col-md-7\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"col d-none d-md-block mw-fit-content ms-3\">\n <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\n </div>\n </div>\n </div>\n </dialog>`);\n const searchButton = this.shadowRoot.querySelector('#search-button');\n const searchClose = this.shadowRoot.querySelector('#search-close');\n const searchDialog = this.shadowRoot.querySelector('#search-dialog');\n if (this.hasAttribute('data-search-open')) {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n }\n searchButton.addEventListener('click', () => {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n });\n searchClose.addEventListener('click', () => {\n searchDialog.removeAttribute('open');\n this.classList.remove('search-open');\n searchButton.removeAttribute('aria-expanded');\n });\n }\n if (this.classList.contains('nav--sticky')) {\n let oldScrollY = window.scrollY;\n window.onscroll = function (e) {\n if (oldScrollY < window.scrollY) {\n document.body.setAttribute('data-direction', 'down');\n }\n else {\n document.body.setAttribute('data-direction', 'up');\n }\n if (window.scrollY > 100) {\n document.body.classList.add('past100');\n }\n else {\n document.body.classList.remove('past100');\n }\n oldScrollY = window.scrollY;\n };\n }\n }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","assetLocation","coreCSS","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog","oldScrollY"],"mappings":"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"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import setupNotification, { closeNotification } from '../../modules/notification.js';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
window.dataLayer.push({
|
|
5
|
-
event: 'customElementRegistered',
|
|
6
|
-
element: 'Notification',
|
|
7
|
-
});
|
|
2
|
+
import { trackComponent, trackComponentRegistered } from '../_global.js';
|
|
3
|
+
trackComponentRegistered('iam-notification');
|
|
8
4
|
class iamNotification extends HTMLElement {
|
|
9
5
|
constructor() {
|
|
10
6
|
super();
|
|
@@ -40,7 +36,8 @@ class iamNotification extends HTMLElement {
|
|
|
40
36
|
var _a, _b, _c, _d, _e;
|
|
41
37
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
42
38
|
const wrapper = this;
|
|
43
|
-
const
|
|
39
|
+
const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';
|
|
40
|
+
const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;
|
|
44
41
|
if (this.hasAttribute('data-type'))
|
|
45
42
|
this.classList.add(`bg-${statusBG}`);
|
|
46
43
|
else {
|
|
@@ -49,16 +46,16 @@ class iamNotification extends HTMLElement {
|
|
|
49
46
|
if (!this.querySelector('i')) {
|
|
50
47
|
switch (statusBG) {
|
|
51
48
|
case 'danger':
|
|
52
|
-
this.
|
|
49
|
+
this.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>');
|
|
53
50
|
break;
|
|
54
51
|
case 'warning':
|
|
55
|
-
this.
|
|
52
|
+
this.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>');
|
|
56
53
|
break;
|
|
57
54
|
case 'success':
|
|
58
|
-
this.
|
|
55
|
+
this.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>');
|
|
59
56
|
break;
|
|
60
57
|
default:
|
|
61
|
-
this.
|
|
58
|
+
this.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>');
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
const buttons = this.querySelectorAll('a,button');
|
|
@@ -80,9 +77,16 @@ class iamNotification extends HTMLElement {
|
|
|
80
77
|
`<button data-dismiss-button part="dismiss-btn">Dismiss</button>`;
|
|
81
78
|
this.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener('click', function () {
|
|
82
79
|
closeNotification(wrapper);
|
|
80
|
+
const customEvent = new CustomEvent('dismiss', {
|
|
81
|
+
detail: {
|
|
82
|
+
class: this.classList,
|
|
83
|
+
},
|
|
84
|
+
});
|
|
85
|
+
this.dispatchEvent(customEvent);
|
|
83
86
|
}, false);
|
|
84
87
|
}
|
|
85
88
|
setupNotification(this);
|
|
89
|
+
trackComponent(this, 'iam-notification', ['dismiss']);
|
|
86
90
|
}
|
|
87
91
|
}
|
|
88
92
|
export default iamNotification;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
|
-
*/function
|
|
4
|
+
*/function m(t){if(t.hasAttribute("data-type")&&t.getAttribute("data-type")=="toast"){let i=document.querySelector(".notification__holder");i||(i=document.createElement("div"),i.classList.add("notification__holder"),i.classList.add("container"),document.querySelector("body").appendChild(i)),t.closest(".notification__holder")||i.appendChild(t)}if(t.setAttribute("role","alert"),t.addEventListener("click",function(i){event&&event.target instanceof HTMLElement&&(event.target.closest("[data-dismiss-button]")||event.target.matches("[data-dismiss-button]"))&&(i.preventDefault(),f(t))},!1),t.hasAttribute("data-timeout")){const i=t.getAttribute("data-timeout"),o=new u(function(){f(t)},i);t.addEventListener("mouseenter",()=>{o.pause()}),t.addEventListener("mouseleave",()=>{o.resume()})}}function u(t,i){let o,n,e=i;this.pause=function(){window.clearTimeout(o),e-=new Date-n},this.resume=function(){n=new Date,window.clearTimeout(o),o=window.setTimeout(t,e)},this.resume()}const f=function(t){t.classList.add("d-none")},h=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},b=(t,i,o)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:i}),o.forEach(n=>{t.addEventListener(n,function(e){const a={event:n,element:i,target:e.target};Object.keys(e.detail).forEach(s=>{const c=e.detail[s];a[s]=c}),window.dataLayer.push(a)})}),!0);h("iam-notification");class p 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`,n=document.createElement("template");n.innerHTML=`
|
|
5
5
|
<style>
|
|
6
6
|
@import "${o}";
|
|
7
|
-
:host,.iam-notification{display:block;padding:1.375rem 1.5rem 1.375rem 1rem !important;border-radius:0.5rem;box-shadow:2px 6px 12px rgba(0,0,0,.2);margin-bottom:1rem;font-size:0.9375rem;border:0.125rem solid var(--colour, var(--colour-info));outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}@
|
|
7
|
+
:host,.iam-notification{display:block;padding:1.375rem 1.5rem 1.375rem 1rem !important;border-radius:0.5rem;box-shadow:2px 6px 12px rgba(0,0,0,.2);margin-bottom:1rem;font-size:0.9375rem;border:0.125rem solid var(--colour, var(--colour-info));outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}@container style(--body-theme: light){:host,.iam-notification{background:#e9f9fd}}@container style(--body-theme: dark){:host,.iam-notification{background:var(--colour-canvas-2)}}:host::slotted(strong),.iam-notification::slotted(strong){color:green}:host::slotted(i),:host i,.iam-notification::slotted(i),.iam-notification i{color:var(--colour, currentColor)}:host([data-type]),.iam-notification[data-type]{border:0.125rem solid rgba(0,0,0,0)}@container style(--body-theme: light){:host(.colour-warning),.iam-notification.colour-warning{background:#fff6e6}}@container style(--body-theme: dark){:host(.colour-warning),.iam-notification.colour-warning{background:var(--colour-canvas-2)}}@container style(--body-theme: light){:host(.colour-danger),.iam-notification.colour-danger{background:#fcebec}}@container style(--body-theme: dark){:host(.colour-danger),.iam-notification.colour-danger{background:var(--colour-canvas-2)}}@container style(--body-theme: light){:host(.colour-success),.iam-notification.colour-success{background:#f8fdf6}}@container style(--body-theme: dark){:host(.colour-success),.iam-notification.colour-success{background:var(--colour-canvas-2)}}:host(.bg-white),.iam-notification.bg-white{border:none;border-left:0.5rem solid var(--colour-info)}:host(.bg-white) ::slotted(i),:host(.bg-white) i,.iam-notification.bg-white ::slotted(i),.iam-notification.bg-white i{color:var(--colour-info)}:host([data-type=alert]),.iam-notification[data-type=alert]{border-radius:0;position:fixed;top:var(--nav-height);left:0;right:0;z-index:calc(var(--index-menu) - 1);margin-bottom:0}:host([data-type=toast]),.iam-notification[data-type=toast]{margin:auto;display:block;width:100%;max-width:22.5rem}:host([data-type=toast].notification--dismissable){max-width:28.375rem}.notification{container-type:inline-size;max-width:69.5rem;margin-inline:auto;display:flex;flex-wrap:nowrap}@media screen and (prefers-color-scheme: light){.notification{color:var(--colour-heading)}}.notification .notification__icon{margin-inline-end:1rem;flex-grow:0}.notification .notification__icon ::slotted(i){font-size:1.125rem}.notification .notification__inner{display:flex;flex-wrap:wrap;flex-grow:1}@container (width > 23.4375em){.notification .notification__inner{flex-wrap:nowrap}}.notification .notification__text{flex-grow:1;flex-shrink:1;width:100%}.notification .notification__btns.empty{display:none}.notification .notification__btns{flex-grow:0;flex-shrink:0;--colour-underline: currentColor}.notification .notification__btns ::slotted(a),.notification .notification__btns ::slotted(button),.notification .notification__btns>*{margin:1rem 1rem 0 0 !important}@container (width > 23.4375em){.notification .notification__btns{display:flex;align-items:center;border-left:1px solid currentColor;margin-left:2rem}.notification .notification__btns ::slotted(a),.notification .notification__btns ::slotted(button),.notification .notification__btns>*{margin:0 0 0 2rem !important}}.notification .notification__dismiss:empty{display:none}.notification .notification__dismiss{flex-grow:0;padding-left:1rem}.notification .notification__dismiss button{text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0);display:inline-block;position:relative;color:inherit}.notification .notification__dismiss button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}@container (width > 23.4375em){.notification .notification__dismiss{padding-left:2rem;display:flex;align-items:center}}/*# sourceMappingURL=assets/css/components/notification.css.map */
|
|
8
8
|
|
|
9
9
|
${this.hasAttribute("data-css")?`${this.getAttribute("data-css")}`:""}
|
|
10
10
|
</style>
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
<div class="notification__dismiss"></div>
|
|
16
16
|
</div>
|
|
17
17
|
`,this.shadowRoot.appendChild(n.content.cloneNode(!0)),document.getElementById("notificationHolder")||document.head.insertAdjacentHTML("beforeend",`<style id="notificationHolder">.container.notification__holder{position:fixed;top:var(--nav-height);left:50%;transform:translate(-50%, 0);bottom:0;z-index:999999;pointer-events:none;padding-top:1rem;padding-bottom:1rem;display:flex;margin:0;width:100%;flex-wrap:wrap;align-content:flex-start;flex-direction:column;align-content:flex-end;align-items:flex-end}.container.notification__holder :is(.iam-notification,iam-notification){pointer-events:all;margin:.5rem 0 .5rem 0}.container.notification__holder.bottom{flex-direction:column-reverse}.container.notification__holder.left{align-content:flex-start;align-items:flex-start}.container.notification__holder.middle{align-content:space-around;align-items:center}/*# sourceMappingURL=assets/css/components/notification.global.css.map */
|
|
18
|
-
</style>`)}connectedCallback(){var
|
|
18
|
+
</style>`)}connectedCallback(){var i,o,n,e,a;const s=this,c=this.hasAttribute("data-type")?"white":"info",d=this.hasAttribute("data-status")?this.getAttribute("data-status"):c;if(this.hasAttribute("data-type")?this.classList.add(`bg-${d}`):this.classList.add(`colour-${d}`),!this.querySelector("i"))switch(d){case"danger":this.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>');break;case"warning":this.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>');break;case"success":this.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>');break;default:this.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>')}const l=this.querySelectorAll("a,button");Array.from(l).forEach(r=>{r.setAttribute("slot","btns"),r.classList.add("link")}),(l.length||this.hasAttribute("data-dismiss"))&&this.classList.add("notification--dismissable"),l.length?(e=(n=this.shadowRoot)===null||n===void 0?void 0:n.querySelector(".notification__btns"))===null||e===void 0||e.classList.remove("empty"):(o=(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector(".notification__btns"))===null||o===void 0||o.classList.add("empty"),this.hasAttribute("data-dismiss")&&((a=this.shadowRoot.querySelector(".notification__dismiss"))===null||a===void 0||(a.innerHTML='<button data-dismiss-button part="dismiss-btn">Dismiss</button>'),this.shadowRoot.querySelector(".notification__dismiss [data-dismiss-button]").addEventListener("click",function(){f(s);const r=new CustomEvent("dismiss",{detail:{class:this.classList}});this.dispatchEvent(r)},!1)),m(this),b(this,"iam-notification",["dismiss"])}}export{p as default};
|
|
19
19
|
//# sourceMappingURL=notification.component.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","notification.component.js"],"sourcesContent":["function setupNotification(element) {\n // Add toast to notification holder\n if (element.hasAttribute('data-type') && element.getAttribute('data-type') == 'toast') {\n let holder = document.querySelector('.notification__holder');\n if (!holder) {\n holder = document.createElement('div');\n holder.classList.add('notification__holder');\n holder.classList.add('container');\n document.querySelector('body').appendChild(holder);\n }\n if (!element.closest('.notification__holder'))\n holder.appendChild(element);\n }\n element.setAttribute('role', 'alert');\n // Create a dissmissable button\n element.addEventListener('click', function (e) {\n if (event &&\n event.target instanceof HTMLElement &&\n (event.target.closest('[data-dismiss-button]') || event.target.matches('[data-dismiss-button]'))) {\n e.preventDefault();\n closeNotification(element);\n }\n }, false);\n // Self disappearing alert\n if (element.hasAttribute('data-timeout')) {\n const timeOut = element.getAttribute('data-timeout');\n const timer = new Timer(function () {\n closeNotification(element);\n }, timeOut);\n element.addEventListener('mouseenter', () => {\n timer.pause();\n });\n element.addEventListener('mouseleave', () => {\n timer.resume();\n });\n }\n}\nfunction Timer(callback, delay) {\n let timerId, start, remaining = delay;\n this.pause = function () {\n window.clearTimeout(timerId);\n remaining -= new Date() - start;\n };\n this.resume = function () {\n start = new Date();\n window.clearTimeout(timerId);\n timerId = window.setTimeout(callback, remaining);\n };\n this.resume();\n}\nexport const closeNotification = function (element) {\n element.classList.add('d-none');\n};\nexport default setupNotification;\n","import setupNotification, { closeNotification } from '../../modules/notification.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Notification',\n});\nclass iamNotification 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/notification.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/notification.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\n </style>\n\n <div class=\"notification\">\n <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\n <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div><div class=\"notification__btns\"><slot name=\"btns\"></slot></div></div>\n <div class=\"notification__dismiss\"></div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('notificationHolder'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"notificationHolder\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const wrapper = this;\n const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';\n if (this.hasAttribute('data-type'))\n this.classList.add(`bg-${statusBG}`);\n else {\n this.classList.add(`colour-${statusBG}`);\n }\n if (!this.querySelector('i')) {\n switch (statusBG) {\n case 'danger':\n this.innerHTML += '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'warning':\n this.innerHTML += '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'success':\n this.innerHTML += '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n default:\n this.innerHTML += '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>';\n }\n }\n const buttons = this.querySelectorAll('a,button');\n Array.from(buttons).forEach((button) => {\n button.setAttribute('slot', 'btns');\n button.classList.add('link');\n });\n if (buttons.length || this.hasAttribute('data-dismiss')) {\n this.classList.add('notification--dismissable');\n }\n if (!buttons.length) {\n (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.notification__btns')) === null || _b === void 0 ? void 0 : _b.classList.add('empty');\n }\n else {\n (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.notification__btns')) === null || _d === void 0 ? void 0 : _d.classList.remove('empty');\n }\n if (this.hasAttribute('data-dismiss')) {\n (_e = this.shadowRoot.querySelector('.notification__dismiss')) === null || _e === void 0 ? void 0 : _e.innerHTML =\n `<button data-dismiss-button part=\"dismiss-btn\">Dismiss</button>`;\n this.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener('click', function () {\n closeNotification(wrapper);\n }, false);\n }\n setupNotification(this);\n }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","callback","delay","timerId","start","remaining","iamNotification","assetLocation","coreCSS","template","_a","_b","_c","_d","_e","wrapper","statusBG","buttons","button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","../_global.js","notification.component.js"],"sourcesContent":["function setupNotification(element) {\n // Add toast to notification holder\n if (element.hasAttribute('data-type') && element.getAttribute('data-type') == 'toast') {\n let holder = document.querySelector('.notification__holder');\n if (!holder) {\n holder = document.createElement('div');\n holder.classList.add('notification__holder');\n holder.classList.add('container');\n document.querySelector('body').appendChild(holder);\n }\n if (!element.closest('.notification__holder'))\n holder.appendChild(element);\n }\n element.setAttribute('role', 'alert');\n // Create a dissmissable button\n element.addEventListener('click', function (e) {\n if (event &&\n event.target instanceof HTMLElement &&\n (event.target.closest('[data-dismiss-button]') || event.target.matches('[data-dismiss-button]'))) {\n e.preventDefault();\n closeNotification(element);\n }\n }, false);\n // Self disappearing alert\n if (element.hasAttribute('data-timeout')) {\n const timeOut = element.getAttribute('data-timeout');\n const timer = new Timer(function () {\n closeNotification(element);\n }, timeOut);\n element.addEventListener('mouseenter', () => {\n timer.pause();\n });\n element.addEventListener('mouseleave', () => {\n timer.resume();\n });\n }\n}\nfunction Timer(callback, delay) {\n let timerId, start, remaining = delay;\n this.pause = function () {\n window.clearTimeout(timerId);\n remaining -= new Date() - start;\n };\n this.resume = function () {\n start = new Date();\n window.clearTimeout(timerId);\n timerId = window.setTimeout(callback, remaining);\n };\n this.resume();\n}\nexport const closeNotification = function (element) {\n element.classList.add('d-none');\n};\nexport default setupNotification;\n","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 setupNotification, { closeNotification } from '../../modules/notification.js';\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-notification');\nclass iamNotification 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/notification.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/notification.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\n </style>\n\n <div class=\"notification\">\n <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\n <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div><div class=\"notification__btns\"><slot name=\"btns\"></slot></div></div>\n <div class=\"notification__dismiss\"></div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('notificationHolder'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"notificationHolder\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const wrapper = this;\n const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';\n const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;\n if (this.hasAttribute('data-type'))\n this.classList.add(`bg-${statusBG}`);\n else {\n this.classList.add(`colour-${statusBG}`);\n }\n if (!this.querySelector('i')) {\n switch (statusBG) {\n case 'danger':\n this.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n break;\n case 'warning':\n this.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n break;\n case 'success':\n this.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>');\n break;\n default:\n this.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>');\n }\n }\n const buttons = this.querySelectorAll('a,button');\n Array.from(buttons).forEach((button) => {\n button.setAttribute('slot', 'btns');\n button.classList.add('link');\n });\n if (buttons.length || this.hasAttribute('data-dismiss')) {\n this.classList.add('notification--dismissable');\n }\n if (!buttons.length) {\n (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.notification__btns')) === null || _b === void 0 ? void 0 : _b.classList.add('empty');\n }\n else {\n (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.notification__btns')) === null || _d === void 0 ? void 0 : _d.classList.remove('empty');\n }\n if (this.hasAttribute('data-dismiss')) {\n (_e = this.shadowRoot.querySelector('.notification__dismiss')) === null || _e === void 0 ? void 0 : _e.innerHTML =\n `<button data-dismiss-button part=\"dismiss-btn\">Dismiss</button>`;\n this.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener('click', function () {\n closeNotification(wrapper);\n const customEvent = new CustomEvent('dismiss', {\n detail: {\n class: this.classList,\n },\n });\n this.dispatchEvent(customEvent);\n }, false);\n }\n setupNotification(this);\n trackComponent(this, 'iam-notification', ['dismiss']);\n }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","callback","delay","timerId","start","remaining","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamNotification","assetLocation","coreCSS","template","_a","_b","_c","_d","_e","wrapper","defaultStatusBG","statusBG","buttons","button","customEvent"],"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
|
*/class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.component.min.js","sources":["pagination.component.js"],"sourcesContent":["class iamPagination 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/pagination.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\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=\"pagination d-none\">\n \n <div class=\"minimal\" part=\"minimal\">\n <div class=\"page-jump\">\n <div><select class=\"select--minimal\"></select></div>\n <span class=\"total-pages\"></span>\n </div>\n \n <button class=\"prev\" disabled>Prev</button>\n <button class=\"next\" disabled>Next</button>\n </div>\n\n <div class=\"item-count\" part=\"item-count\"></div>\n <div class=\"per-page\" part=\"per-page\">\n <div>\n <select class=\"select--minimal\">\n <option value=\"15\">15</option>\n <option value=\"25\">25</option>\n <option value=\"40\">40</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <span> / page</span>\n </div>\n <div class=\"mobile-controls m-auto text-center\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <button class=\"load-more btn btn-primary m-auto\">Load more</a>\n </div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // Set default attributes\n const params = new URLSearchParams(window.location.search);\n if (!this.hasAttribute('data-total'))\n this.setAttribute('data-total', 15);\n if (!this.hasAttribute('data-page'))\n this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);\n if (!this.hasAttribute('data-show'))\n this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);\n if (!this.hasAttribute('data-increment'))\n this.setAttribute('data-increment', this.getAttribute('data-show'));\n // Elements\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const loadMore = this.shadowRoot.querySelector('.load-more');\n // Add the select inputs, enable or disable buttons, update the helper text\n this.setup();\n // Select on change will update the data-page attr which will dispatch an event\n select.addEventListener('change', (event) => {\n this.setAttribute('data-show', this.getAttribute('data-increment'));\n this.setAttribute('data-page', event.target.value);\n });\n // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event\n next.addEventListener('click', () => {\n select.value = parseInt(select.value) + 1;\n select.dispatchEvent(new Event('change'));\n });\n prev.addEventListener('click', () => {\n select.value = parseInt(select.value) - 1;\n select.dispatchEvent(new Event('change'));\n });\n // Update how many is shown\n perPage.addEventListener('change', (event) => {\n this.setAttribute('data-increment', event.target.value);\n });\n // Load more button\n const increment = parseInt(this.getAttribute('data-increment'));\n const show = parseInt(this.getAttribute('data-show'));\n if (show >= parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n loadMore.addEventListener('click', () => {\n const newValue = show + increment;\n this.setAttribute('data-show', newValue);\n if (newValue > parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n });\n }\n setup() {\n // Elements\n const wrapper = this.shadowRoot.querySelector('.pagination');\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const itemCount = this.shadowRoot.querySelector('.item-count');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const totalPages = this.shadowRoot.querySelector('.total-pages');\n // Values\n const currentPage = parseInt(this.getAttribute('data-page'));\n const total = parseInt(this.getAttribute('data-total'));\n const show = parseInt(this.getAttribute('data-show'));\n const increment = parseInt(this.getAttribute('data-increment'));\n const numberPages = Math.ceil(total / increment);\n if (total > show)\n wrapper.classList.remove('d-none');\n // Populate the select input with the number of pages\n let strOptions = '';\n for (let i = 1; i <= numberPages; i++) {\n strOptions += `<option value=\"${i}\" ${i == currentPage ? 'selected' : ''}>${i}</option>`;\n }\n select.innerHTML = strOptions;\n totalPages.innerHTML = `of ${numberPages}`;\n // Next button\n if (currentPage == numberPages)\n next.setAttribute('disabled', 'disabled');\n else\n next.removeAttribute('disabled');\n if (currentPage == 1)\n prev.setAttribute('disabled', 'disabled');\n else\n prev.removeAttribute('disabled');\n // Update the item count text\n const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;\n const endPoint = currentPage == 1 ? show : currentPage * show;\n itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;\n const defaultValues = [15, 25, 40, 50];\n // Update the per page options if needed\n if (increment && perPage.value != increment && !defaultValues.includes(increment)) {\n perPage.innerHTML = `<option value=\"${increment}\">${increment}</option>\n <option value=\"${increment * 2}\">${increment * 2}</option>\n <option value=\"${increment * 3}\">${increment * 3}</option>\n <option value=\"${increment * 4}\">${increment * 4}</option>`;\n }\n perPage.value = increment;\n }\n static get observedAttributes() {\n return ['data-total', 'data-increment', 'data-page', 'data-show'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n }\n break;\n }\n case 'data-show': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-increment': {\n if (oldVal != newVal) {\n this.setAttribute('data-show', newVal);\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-page': {\n if (oldVal && oldVal != newVal) {\n this.setup();\n console.log(newVal);\n // Dispact the event for other components to use as triggers\n this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));\n }\n break;\n }\n }\n }\n}\nexport default iamPagination;\n"],"names":["iamPagination","assetLocation","coreCSS","template","params","select","prev","next","perPage","loadMore","event","increment","show","newValue","wrapper","itemCount","totalPages","currentPage","total","numberPages","strOptions","i","startPoint","endPoint","defaultValues","attrName","oldVal","newVal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination.component.min.js","sources":["pagination.component.js"],"sourcesContent":["class iamPagination 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/pagination.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\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=\"pagination d-none\">\n \n <div class=\"minimal\" part=\"minimal\">\n <div class=\"page-jump\">\n <div><select class=\"select--minimal\"></select></div>\n <span class=\"total-pages\"></span>\n </div>\n \n <button class=\"prev\" disabled>Prev</button>\n <button class=\"next\" disabled>Next</button>\n </div>\n\n <div class=\"item-count\" part=\"item-count\"></div>\n <div class=\"per-page\" part=\"per-page\">\n <div>\n <select class=\"select--minimal\">\n <option value=\"15\">15</option>\n <option value=\"25\">25</option>\n <option value=\"40\">40</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <span> / page</span>\n </div>\n <div class=\"mobile-controls m-auto text-center\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <button class=\"load-more btn btn-primary m-auto\">Load more</a>\n </div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // Set default attributes\n const params = new URLSearchParams(window.location.search);\n if (!this.hasAttribute('data-total'))\n this.setAttribute('data-total', 15);\n if (!this.hasAttribute('data-page'))\n this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);\n if (!this.hasAttribute('data-show'))\n this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);\n if (!this.hasAttribute('data-increment'))\n this.setAttribute('data-increment', this.getAttribute('data-show'));\n // Elements\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const loadMore = this.shadowRoot.querySelector('.load-more');\n // Add the select inputs, enable or disable buttons, update the helper text\n this.setup();\n // Select on change will update the data-page attr which will dispatch an event\n select.addEventListener('change', (event) => {\n this.setAttribute('data-show', this.getAttribute('data-increment'));\n this.setAttribute('data-page', event.target.value);\n });\n // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event\n next.addEventListener('click', () => {\n select.value = parseInt(select.value) + 1;\n select.dispatchEvent(new Event('change'));\n });\n prev.addEventListener('click', () => {\n select.value = parseInt(select.value) - 1;\n select.dispatchEvent(new Event('change'));\n });\n // Update how many is shown\n perPage.addEventListener('change', (event) => {\n this.setAttribute('data-increment', event.target.value);\n });\n // Load more button\n const increment = parseInt(this.getAttribute('data-increment'));\n const show = parseInt(this.getAttribute('data-show'));\n if (show >= parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n loadMore.addEventListener('click', () => {\n const newValue = show + increment;\n this.setAttribute('data-show', newValue);\n if (newValue > parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n });\n }\n setup() {\n // Elements\n const wrapper = this.shadowRoot.querySelector('.pagination');\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const itemCount = this.shadowRoot.querySelector('.item-count');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const totalPages = this.shadowRoot.querySelector('.total-pages');\n // Values\n const currentPage = parseInt(this.getAttribute('data-page'));\n const total = parseInt(this.getAttribute('data-total'));\n const show = parseInt(this.getAttribute('data-show'));\n const increment = parseInt(this.getAttribute('data-increment'));\n const numberPages = Math.ceil(total / increment);\n if (total > show)\n wrapper.classList.remove('d-none');\n // Populate the select input with the number of pages\n let strOptions = '';\n for (let i = 1; i <= numberPages; i++) {\n strOptions += `<option value=\"${i}\" ${i == currentPage ? 'selected' : ''}>${i}</option>`;\n }\n select.innerHTML = strOptions;\n totalPages.innerHTML = `of ${numberPages}`;\n // Next button\n if (currentPage == numberPages)\n next.setAttribute('disabled', 'disabled');\n else\n next.removeAttribute('disabled');\n if (currentPage == 1)\n prev.setAttribute('disabled', 'disabled');\n else\n prev.removeAttribute('disabled');\n // Update the item count text\n const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;\n const endPoint = currentPage == 1 ? show : currentPage * show;\n itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;\n const defaultValues = [15, 25, 40, 50];\n // Update the per page options if needed\n if (increment && perPage.value != increment && !defaultValues.includes(increment)) {\n perPage.innerHTML = `<option value=\"${increment}\">${increment}</option>\n <option value=\"${increment * 2}\">${increment * 2}</option>\n <option value=\"${increment * 3}\">${increment * 3}</option>\n <option value=\"${increment * 4}\">${increment * 4}</option>`;\n }\n perPage.value = increment;\n }\n static get observedAttributes() {\n return ['data-total', 'data-increment', 'data-page', 'data-show'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n }\n break;\n }\n case 'data-show': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-increment': {\n if (oldVal != newVal) {\n this.setAttribute('data-show', newVal);\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-page': {\n if (oldVal && oldVal != newVal) {\n this.setup();\n console.log(newVal);\n // Dispact the event for other components to use as triggers\n this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));\n }\n break;\n }\n }\n }\n}\nexport default iamPagination;\n"],"names":["iamPagination","assetLocation","coreCSS","template","params","select","prev","next","perPage","loadMore","event","increment","show","newValue","wrapper","itemCount","totalPages","currentPage","total","numberPages","strOptions","i","startPoint","endPoint","defaultValues","attrName","oldVal","newVal"],"mappings":"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"}
|