@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,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
|
-
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class
|
|
4
|
+
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class c extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
|
|
5
5
|
<style class="styles">
|
|
6
|
-
@import "${
|
|
7
|
-
:host{--colour-border: #e9e9e9;--side-link-hover: var(--colour-canvas-2);grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (prefers-color-scheme: light){:host{--side-link-hover: #eeeeee}}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.side-menu{position:absolute;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:
|
|
6
|
+
@import "${e}";
|
|
7
|
+
:host{--colour-border: #e9e9e9;--side-link-hover: var(--colour-canvas-2);grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (prefers-color-scheme: light){:host{--side-link-hover: #eeeeee}}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.container.inline .side-menu{position:absolute;top:0}.side-menu{position:absolute;z-index:20;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:4.375rem;height:calc(100% - var(--nav-height));padding:0 2.5rem 0 0;transition:width 1s}.side-menu:before{content:"";position:absolute;z-index:1;top:0;right:2.5rem;height:100%;border-right:2px solid var(--colour-border)}@media screen and (min-width: 36em){.side-menu{left:0;width:5rem}}@media screen and (min-width: 62em){.side-menu{left:5.25rem;margin-left:-5.25rem;position:fixed;top:var(--nav-height)}.side-menu:not(.open).hover{width:21.5rem}.side-menu:not(.open).hover .btn[class*=fa-]:before{content:"\uF023" !important;transform:rotate(0)}}.side-menu .btn{display:var(--btn-display, block);position:absolute;top:2rem;right:2.5rem;margin-bottom:0;margin-right:-1.25rem;background-color:var(--colour-canvas-2);border:2px solid var(--colour-border);z-index:99;color:var(--colour-primary-theme);transition:opacity .2s}.side-menu .btn[aria-expanded][class*=fa-]:before{content:"\uF053" !important}@media screen and (min-width: 62em){.side-menu .btn[aria-expanded]{opacity:0}}.side-menu:is(:hover,:focus-within,:active) .btn{border:2px solid var(--colour-border);color:var(--colour-primary)}@media screen and (min-width: 62em){.side-menu:is(:hover,:focus-within,:active) .btn{opacity:1}}.side-menu:is(.open){width:calc(100% - var(--container-padding-x) + 2.5rem)}@media screen and (min-width: 36em){.side-menu:is(.open){width:26.375rem}}@media screen and (min-width: 62em){.side-menu:is(.open){width:21.5rem}}.side-menu .side-menu-content{position:absolute;top:0;right:2.5rem;padding:2rem 2.5rem 2.5rem 0;width:21.9375rem;background-color:var(--colour-canvas);opacity:0;transition:opacity 1s;min-height:100%;overflow:auto;max-height:100%;scrollbar-width:thin}.side-menu .side-menu-content .h3{padding-left:1.5rem}@media screen and (min-width: 36em){.side-menu .side-menu-content .h3{padding-left:2.5rem}.side-menu .side-menu-content{width:23.875rem}}@media screen and (min-width: 62em){.side-menu .side-menu-content{width:19rem}.side-menu .side-menu-content .h3{padding-left:var(--container-padding-x-md)}}.side-menu:not(.hover):not(.open) .side-menu-content.closed{display:none}.side-menu.open .side-menu-content{opacity:1}@media screen and (min-width: 62em){.side-menu.hover .side-menu-content{opacity:1}}.main-content{position:relative;z-index:10;padding-top:1.5rem;padding-left:3.75rem}@media screen and (min-width: 36em){.main-content{padding-left:5rem}}@media screen and (min-width: 62em){.main-content{padding-top:2.5rem !important;padding-left:0}}.main-content>span.h3{padding-top:.75rem;border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important}@media screen and (min-width: 62em){.main-content>span.h3{display:none}}::slotted(.main-content__title){border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important;max-width:100% !important;display:block}@media screen and (min-width: 62em){::slotted(.main-content__title){display:none}}@media screen and (min-width: 62em){.container:has(.side-menu.open){padding-left:2rem !important;margin-left:max(19rem,50% - var(--container-max-width)/2);margin-right:0;max-width:min(var(--container-max-width),100% - 19rem)}}@media screen and (min-width: 62em){:host([open-always]){--btn-display: none}}:host([inline]){width:100%;max-width:100%}@media screen and (min-width: 62em){:host([inline]){max-width:min(var(--container-max-width),100% - 19rem)}}:host([menu-right]) .container{padding-right:0 !important}@media screen and (min-width: 62em){:host([menu-right]) .container{padding-right:5.25rem !important}}@media screen and (min-width: 62em){:host([menu-right]) .container:has(.side-menu.open){margin-right:max(19rem,50% - var(--container-max-width)/2);margin-left:0}}:host([menu-right]) .side-menu{left:auto;right:-2.5rem;padding:0 0 0 2.5rem}@media screen and (min-width: 62em){:host([menu-right]) .side-menu{right:0}}:host([menu-right]) .side-menu::before{right:100%}:host([menu-right]) .side-menu .btn{right:100%}:host([menu-right]) .side-menu .btn:before{transform:rotate(180deg)}:host([menu-right]) .main-content{padding-left:var(--container-padding-x);padding-right:3.75rem}@media screen and (min-width: 36em){:host([menu-right]) .main-content{padding-right:5rem}}@media screen and (min-width: 62em){:host([menu-right]) .main-content{padding-right:0}}/*# sourceMappingURL=assets/css/components/collapsible-side.css.map */
|
|
8
8
|
|
|
9
9
|
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
10
10
|
</style>
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
<div class="side-menu" part="side-menu">
|
|
15
15
|
<button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
|
|
16
|
+
|
|
16
17
|
<div class="side-menu-content closed" part="side-menu-content">
|
|
17
18
|
<slot name="menu"></slot>
|
|
18
19
|
</div>
|
|
@@ -23,5 +24,5 @@
|
|
|
23
24
|
</div>
|
|
24
25
|
|
|
25
26
|
</div>
|
|
26
|
-
`,this.shadowRoot.appendChild(
|
|
27
|
+
`,this.shadowRoot&&this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){if(!this.shadowRoot)return;const o=this.shadowRoot.querySelector(".container"),e=this.shadowRoot.querySelector(".side-menu"),t=this.shadowRoot.querySelector(".side-menu-content"),d=this.shadowRoot.querySelector(".main-content"),i=this.shadowRoot.querySelector(".side-menu > .btn");if(!e||!t||!d||!i)return;if(this.hasAttribute("data-css")){const n=this.shadowRoot.querySelector(".styles");n&&n.insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`)}this.hasAttribute("data-title")||this.setAttribute("data-title","configuration"),t.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),d.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`);const r=this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)");r&&r.classList.add("h4","main-content__title"),this.hasAttribute("open")&&window.innerWidth>992&&(e.classList.add("open"),i.setAttribute("aria-expanded","true")),this.hasAttribute("inline")&&o.classList.add("inline"),this.hasAttribute("menu-right")&&e.classList.add("menu-right"),i.addEventListener("click",()=>{e.classList.contains("open")?(e.classList.remove("open"),i.removeAttribute("aria-expanded"),setTimeout(function(){t.classList.add("closed")},1e3),e.classList.add("pe-none"),setTimeout(function(){e.classList.remove("pe-none")},1e3)):(t.classList.remove("closed"),setTimeout(function(){e.classList.add("open"),i.setAttribute("aria-expanded","true")},100))}),e.addEventListener("mouseenter",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"),e.classList.add("hover"))}),e.addEventListener("mousemove",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"))}),e.addEventListener("mouseleave",()=>{window.innerWidth>992&&(e.classList.remove("hover"),e.classList.contains("open")||setTimeout(function(){t.classList.add("closed")},1e3))});const s=this.querySelectorAll(".parent"),a=this.querySelectorAll(".parent > li:first-of-type");a?.forEach(n=>{n.addEventListener("click",()=>{if(!n||!n.parentElement)return!1;n.parentElement.classList.contains("reveal")?n.parentElement.classList.remove("reveal"):(s?.forEach(m=>{m.classList.remove("reveal")}),n.parentElement.classList.add("reveal"))})})}}export{c as default};
|
|
27
28
|
//# sourceMappingURL=collapsible-side.component.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu 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/collapsible-side.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\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=\"container\" part=\"container\">\n\n <div class=\"side-menu\" part=\"side-menu\">\n <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n <slot name=\"menu\"></slot>\n </div>\n </div>\n\n <div class=\"main-content\" part=\"main-content\">\n <slot></slot>\n </div>\n\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const sideMenu = this.shadowRoot.querySelector('.side-menu');\n const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n const mainContent = this.shadowRoot.querySelector('.main-content');\n const button = this.shadowRoot.querySelector('.side-menu > .btn');\n // Load external CSS if needed\n if (this.hasAttribute('data-css'))\n this.shadowRoot
|
|
1
|
+
{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu 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/collapsible-side.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\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=\"container\" part=\"container\">\n\n <div class=\"side-menu\" part=\"side-menu\">\n <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n \n <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n <slot name=\"menu\"></slot>\n </div>\n </div>\n\n <div class=\"main-content\" part=\"main-content\">\n <slot></slot>\n </div>\n\n </div>\n `;\n if (this.shadowRoot) {\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n }\n connectedCallback() {\n if (!this.shadowRoot)\n return;\n const container = this.shadowRoot.querySelector('.container');\n const sideMenu = this.shadowRoot.querySelector('.side-menu');\n const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n const mainContent = this.shadowRoot.querySelector('.main-content');\n const button = this.shadowRoot.querySelector('.side-menu > .btn');\n if (!sideMenu || !sideMenuContent || !mainContent || !button)\n return;\n // Load external CSS if needed\n if (this.hasAttribute('data-css')) {\n const styles = this.shadowRoot.querySelector('.styles');\n if (styles) {\n styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n }\n }\n // Set side nav title\n if (!this.hasAttribute('data-title')) {\n this.setAttribute('data-title', 'configuration');\n }\n sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n if (titleElement) {\n titleElement.classList.add('h4', 'main-content__title');\n }\n if (this.hasAttribute('open') && window.innerWidth > 992) {\n sideMenu.classList.add('open');\n button.setAttribute('aria-expanded', 'true');\n }\n if (this.hasAttribute('inline')) {\n container.classList.add('inline');\n }\n if (this.hasAttribute('menu-right')) {\n sideMenu.classList.add('menu-right');\n }\n // Open the menu\n button.addEventListener('click', () => {\n if (!sideMenu.classList.contains('open')) {\n sideMenuContent.classList.remove('closed');\n setTimeout(function () {\n sideMenu.classList.add('open');\n button.setAttribute('aria-expanded', 'true');\n }, 100);\n }\n else {\n sideMenu.classList.remove('open');\n button.removeAttribute('aria-expanded');\n setTimeout(function () {\n sideMenuContent.classList.add('closed');\n }, 1000); // Delay until its close so the animation is broken\n // While the menu is closing dont allow the hover to re-open it until its fully closed.\n sideMenu.classList.add('pe-none');\n setTimeout(function () {\n sideMenu.classList.remove('pe-none');\n }, 1000);\n }\n });\n // Mimic hover event on desktop so that we can control when classes are set and which order\n sideMenu.addEventListener('mouseenter', () => {\n if (window.innerWidth > 992) {\n if (!sideMenu.classList.contains('open'))\n sideMenuContent.classList.remove('closed');\n sideMenu.classList.add('hover');\n }\n });\n sideMenu.addEventListener('mousemove', () => {\n if (window.innerWidth > 992) {\n if (!sideMenu.classList.contains('open'))\n sideMenuContent.classList.remove('closed');\n }\n });\n sideMenu.addEventListener('mouseleave', () => {\n if (window.innerWidth > 992) {\n sideMenu.classList.remove('hover');\n if (!sideMenu.classList.contains('open'))\n setTimeout(function () {\n sideMenuContent.classList.add('closed');\n }, 1000); // Delay until its close so the animation is broken\n }\n });\n const sideMenuParentGroups = this.querySelectorAll('.parent');\n const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n parentLink.addEventListener('click', () => {\n if (!parentLink || !parentLink.parentElement)\n return false; // make sure elements exist\n if (parentLink.parentElement.classList.contains('reveal')) {\n parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n }\n else {\n // remove other reveals and add reveal to this one\n sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n parentGroup.classList.remove('reveal');\n });\n parentLink.parentElement.classList.add('reveal');\n }\n });\n });\n }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","assetLocation","coreCSS","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,uBACb,CAAC,EACD,MAAMA,UAA+B,WAAY,CAC7C,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,CAAa,oBAEhBE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD,CAAO;AAAA;AAAA;AAAA,MAEhB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmBlE,KAAK,YACL,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAEpE,CACA,mBAAoB,CAChB,GAAI,CAAC,KAAK,WACN,OACJ,MAAMC,EAAY,KAAK,WAAW,cAAc,YAAY,EACtDC,EAAW,KAAK,WAAW,cAAc,YAAY,EACrDC,EAAkB,KAAK,WAAW,cAAc,oBAAoB,EACpEC,EAAc,KAAK,WAAW,cAAc,eAAe,EAC3DC,EAAS,KAAK,WAAW,cAAc,mBAAmB,EAChE,GAAI,CAACH,GAAY,CAACC,GAAmB,CAACC,GAAe,CAACC,EAClD,OAEJ,GAAI,KAAK,aAAa,UAAU,EAAG,CAC/B,MAAMC,EAAS,KAAK,WAAW,cAAc,SAAS,EAClDA,GACAA,EAAO,mBAAmB,YAAa,YAAY,KAAK,aAAa,UAAU,CAAC,IAAI,CAE5F,CAEK,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,eAAe,EAEnDH,EAAgB,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EAC7GC,EAAY,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EACzG,MAAMG,EAAe,KAAK,cAAc,iCAAiC,EACrEA,GACAA,EAAa,UAAU,IAAI,KAAM,qBAAqB,EAEtD,KAAK,aAAa,MAAM,GAAK,OAAO,WAAa,MACjDL,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,MAAM,GAE3C,KAAK,aAAa,QAAQ,GAC1BJ,EAAU,UAAU,IAAI,QAAQ,EAEhC,KAAK,aAAa,YAAY,GAC9BC,EAAS,UAAU,IAAI,YAAY,EAGvCG,EAAO,iBAAiB,QAAS,IAAM,CAC9BH,EAAS,UAAU,SAAS,MAAM,GAQnCA,EAAS,UAAU,OAAO,MAAM,EAChCG,EAAO,gBAAgB,eAAe,EACtC,WAAW,UAAY,CACnBF,EAAgB,UAAU,IAAI,QAAQ,CAC1C,EAAG,GAAI,EAEPD,EAAS,UAAU,IAAI,SAAS,EAChC,WAAW,UAAY,CACnBA,EAAS,UAAU,OAAO,SAAS,CACvC,EAAG,GAAI,IAhBPC,EAAgB,UAAU,OAAO,QAAQ,EACzC,WAAW,UAAY,CACnBD,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,MAAM,CAC/C,EAAG,GAAG,EAcd,CAAC,EAEDH,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAC7CD,EAAS,UAAU,IAAI,OAAO,EAEtC,CAAC,EACDA,EAAS,iBAAiB,YAAa,IAAM,CACrC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAErD,CAAC,EACDD,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACpBA,EAAS,UAAU,OAAO,OAAO,EAC5BA,EAAS,UAAU,SAAS,MAAM,GACnC,WAAW,UAAY,CACnBC,EAAgB,UAAU,IAAI,QAAQ,CAC1C,EAAG,GAAI,EAEnB,CAAC,EACD,MAAMK,EAAuB,KAAK,iBAAiB,SAAS,EACtDC,EAA+B,KAAK,iBAAiB,4BAA4B,EACKA,GAA6B,QAASC,GAAe,CAC7IA,EAAW,iBAAiB,QAAS,IAAM,CACvC,GAAI,CAACA,GAAc,CAACA,EAAW,cAC3B,MAAO,GACPA,EAAW,cAAc,UAAU,SAAS,QAAQ,EACpDA,EAAW,cAAc,UAAU,OAAO,QAAQ,GAI0BF,GAAqB,QAASG,GAAgB,CACtHA,EAAY,UAAU,OAAO,QAAQ,CACzC,CAAC,EACDD,EAAW,cAAc,UAAU,IAAI,QAAQ,EAEvD,CAAC,CACL,CAAC,CACL,CACJ"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
class iamContent extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super();
|
|
4
|
+
this.attachShadow({ mode: 'open' });
|
|
5
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
6
|
+
? document.body.getAttribute('data-assets-location')
|
|
7
|
+
: '/assets';
|
|
8
|
+
const loadCSS = `@import "${assetLocation}/css/components/content.component.css";`;
|
|
9
|
+
const template = document.createElement('template');
|
|
10
|
+
template.innerHTML = `
|
|
11
|
+
<style>
|
|
12
|
+
${loadCSS}
|
|
13
|
+
|
|
14
|
+
${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
|
|
15
|
+
</style>
|
|
16
|
+
<div class="content__container">
|
|
17
|
+
<slot></slot>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
21
|
+
}
|
|
22
|
+
connectedCallback() {
|
|
23
|
+
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
24
|
+
const component = this;
|
|
25
|
+
const url = this.getAttribute('data-url');
|
|
26
|
+
const registerComponents = (contentComponent) => {
|
|
27
|
+
const components = ['card', 'marketing', 'notification'];
|
|
28
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
29
|
+
? document.body.getAttribute('data-assets-location')
|
|
30
|
+
: '/assets';
|
|
31
|
+
// Load components - Each component will load once the first of its type has been loaded
|
|
32
|
+
components.forEach((component) => {
|
|
33
|
+
if (component == 'notification') {
|
|
34
|
+
document.querySelectorAll('[data-notification]').forEach((element) => {
|
|
35
|
+
element.outerHTML = element.outerHTML
|
|
36
|
+
.replace(/<div/g, '<iam-notification')
|
|
37
|
+
.replace(/<\/div>/g, '</iam-notification>');
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0)
|
|
41
|
+
return;
|
|
42
|
+
import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
|
|
43
|
+
.then((module) => {
|
|
44
|
+
if (!window.customElements.get(`iam-${component}`))
|
|
45
|
+
window.customElements.define(`iam-${component}`, module.default);
|
|
46
|
+
})
|
|
47
|
+
.catch((err) => {
|
|
48
|
+
console.log(err.message);
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
if (url) {
|
|
53
|
+
const newXHRRequest = new XMLHttpRequest();
|
|
54
|
+
newXHRRequest.open('GET', url, true);
|
|
55
|
+
newXHRRequest.onload = function () {
|
|
56
|
+
if (this.status === 200) {
|
|
57
|
+
const response = JSON.parse(this.responseText);
|
|
58
|
+
component.innerHTML = `${response.content.rendered}`;
|
|
59
|
+
registerComponents(component);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
newXHRRequest.send();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
export default iamContent;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* iamKey v7.5.0
|
|
3
|
+
* Copyright 2022-2025 iamproperty
|
|
4
|
+
*/class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
|
|
5
|
+
<style>
|
|
6
|
+
@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact{text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@container style(--theme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::before,*::after{box-sizing:border-box}:host{display:contents}::slotted(iam-marketing:first-child:last-child){margin-bottom:0;min-height:100%;min-width:100%}/*# sourceMappingURL=assets/css/components/content.component.css.map */
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
10
|
+
</style>
|
|
11
|
+
<div class="content__container">
|
|
12
|
+
<slot></slot>
|
|
13
|
+
</div>
|
|
14
|
+
`,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const e=this,a=this.getAttribute("data-url"),i=n=>{const r=["card","marketing","notification"],c=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets";r.forEach(t=>{t=="notification"&&document.querySelectorAll("[data-notification]").forEach(o=>{o.outerHTML=o.outerHTML.replace(/<div/g,"<iam-notification").replace(/<\/div>/g,"</iam-notification>")}),n.getElementsByTagName(`iam-${t}`).length!==0&&import(`${c}/js/components/${t}/${t}.component.js`).then(o=>{window.customElements.get(`iam-${t}`)||window.customElements.define(`iam-${t}`,o.default)}).catch(o=>{console.log(o.message)})})};if(a){const n=new XMLHttpRequest;n.open("GET",a,!0),n.onload=function(){if(this.status===200){const r=JSON.parse(this.responseText);e.innerHTML=`${r.content.rendered}`,i(e)}},n.send()}}}export{s as default};
|
|
15
|
+
//# sourceMappingURL=content.component.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content.component.min.js","sources":["content.component.js"],"sourcesContent":["class iamContent 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/content.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${loadCSS}\n\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <div class=\"content__container\">\n <slot></slot>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const component = this;\n const url = this.getAttribute('data-url');\n const registerComponents = (contentComponent) => {\n const components = ['card', 'marketing', 'notification'];\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n // Load components - Each component will load once the first of its type has been loaded\n components.forEach((component) => {\n if (component == 'notification') {\n document.querySelectorAll('[data-notification]').forEach((element) => {\n element.outerHTML = element.outerHTML\n .replace(/<div/g, '<iam-notification')\n .replace(/<\\/div>/g, '</iam-notification>');\n });\n }\n if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0)\n return;\n import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)\n .then((module) => {\n if (!window.customElements.get(`iam-${component}`))\n window.customElements.define(`iam-${component}`, module.default);\n })\n .catch((err) => {\n console.log(err.message);\n });\n });\n };\n if (url) {\n const newXHRRequest = new XMLHttpRequest();\n newXHRRequest.open('GET', url, true);\n newXHRRequest.onload = function () {\n if (this.status === 200) {\n const response = JSON.parse(this.responseText);\n component.innerHTML = `${response.content.rendered}`;\n registerComponents(component);\n }\n };\n newXHRRequest.send();\n }\n }\n}\nexport default iamContent;\n"],"names":["iamContent","template","component","url","registerComponents","contentComponent","components","assetLocation","element","module","err","newXHRRequest","response"],"mappings":";;;IAAA,MAAMA,UAAmB,WAAY,CACjC,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,MAIvB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAMtE,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAEhB,MAAMC,EAAY,KACZC,EAAM,KAAK,aAAa,UAAU,EAClCC,EAAsBC,GAAqB,CAC7C,MAAMC,EAAa,CAAC,OAAQ,YAAa,cAAc,EACjDC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UAEND,EAAW,QAASJ,GAAc,CAC1BA,GAAa,gBACb,SAAS,iBAAiB,qBAAqB,EAAE,QAASM,GAAY,CAClEA,EAAQ,UAAYA,EAAQ,UACvB,QAAQ,QAAS,mBAAmB,EACpC,QAAQ,WAAY,qBAAqB,CAClD,CAAC,EAEDH,EAAiB,qBAAqB,OAAOH,CAAS,EAAE,EAAE,SAAW,GAEzE,OAA0B,GAAGK,CAAa,kBAAkBL,CAAS,IAAIA,CAAS,iBAC7E,KAAMO,GAAW,CACb,OAAO,eAAe,IAAI,OAAOP,CAAS,EAAE,GAC7C,OAAO,eAAe,OAAO,OAAOA,CAAS,GAAIO,EAAO,OAAO,CACvE,CAAC,EACI,MAAOC,GAAQ,CAChB,QAAQ,IAAIA,EAAI,OAAO,CAC3B,CAAC,CACL,CAAC,CACL,EACA,GAAIP,EAAK,CACL,MAAMQ,EAAgB,IAAI,eAC1BA,EAAc,KAAK,MAAOR,EAAK,EAAI,EACnCQ,EAAc,OAAS,UAAY,CAC/B,GAAI,KAAK,SAAW,IAAK,CACrB,MAAMC,EAAW,KAAK,MAAM,KAAK,YAAY,EAC7CV,EAAU,UAAY,GAAGU,EAAS,QAAQ,QAAQ,GAClDR,EAAmBF,CAAS,CAChC,CACJ,EACAS,EAAc,KAAI,CACtB,CACJ,CACJ"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
window.dataLayer = window.dataLayer || [];
|
|
2
|
+
window.dataLayer.push({
|
|
3
|
+
event: 'customElementRegistered',
|
|
4
|
+
element: 'Dark mode button',
|
|
5
|
+
});
|
|
6
|
+
class iamDarkMode extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
var _a;
|
|
9
|
+
super();
|
|
10
|
+
this.attachShadow({ mode: 'open' });
|
|
11
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
12
|
+
? document.body.getAttribute('data-assets-location')
|
|
13
|
+
: '/assets';
|
|
14
|
+
const loadCSS = `@import "${assetLocation}/css/components/darkmode.component.css";`;
|
|
15
|
+
const template = document.createElement('template');
|
|
16
|
+
template.innerHTML = `
|
|
17
|
+
<style>${loadCSS}
|
|
18
|
+
</style>
|
|
19
|
+
<slot></slot>
|
|
20
|
+
`;
|
|
21
|
+
(_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));
|
|
22
|
+
}
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
const label = this.querySelector('label');
|
|
25
|
+
const storedTheme = localStorage.getItem('user-theme');
|
|
26
|
+
// Work from local storage first then look at the media preferences
|
|
27
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
|
|
28
|
+
if (storedTheme == 'dark-theme') {
|
|
29
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
|
|
30
|
+
label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');
|
|
31
|
+
}
|
|
32
|
+
else if (storedTheme == 'light-theme') {
|
|
33
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
|
|
34
|
+
label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');
|
|
35
|
+
}
|
|
36
|
+
const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
37
|
+
if (hasDarkPreference) {
|
|
38
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
|
|
39
|
+
label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');
|
|
40
|
+
}
|
|
41
|
+
this.addEventListener('click', (event) => {
|
|
42
|
+
console.log(label === null || label === void 0 ? void 0 : label.querySelector('input:checked'));
|
|
43
|
+
if (label === null || label === void 0 ? void 0 : label.querySelector('input:checked')) {
|
|
44
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
|
|
45
|
+
localStorage.setItem('user-theme', 'dark-theme');
|
|
46
|
+
document.documentElement.className = 'dark-theme';
|
|
47
|
+
label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
|
|
51
|
+
localStorage.setItem('user-theme', 'light-theme');
|
|
52
|
+
document.documentElement.className = 'light-theme';
|
|
53
|
+
label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
|
|
57
|
+
if (matches) {
|
|
58
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
|
|
59
|
+
label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ({ matches }) => {
|
|
63
|
+
if (matches) {
|
|
64
|
+
label === null || label === void 0 ? void 0 : label.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
|
|
65
|
+
label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
export default iamDarkMode;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* iamKey v7.5.0
|
|
3
|
+
* Copyright 2022-2025 iamproperty
|
|
4
|
+
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Dark mode button"});class a extends HTMLElement{constructor(){var e;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>::slotted(.toggle):after{--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3c!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/%3e%3c/svg%3e");background:var(--colour-primary-theme);mask-image:var(--icon);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}::slotted(.toggle.dark-theme):after{--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3c!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/%3e%3c/svg%3e")}/*# sourceMappingURL=assets/css/components/darkmode.component.css.map */
|
|
6
|
+
|
|
7
|
+
</style>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
`,(e=this.shadowRoot)===null||e===void 0||e.appendChild(t.content.cloneNode(!0))}connectedCallback(){const e=this.querySelector("label"),t=localStorage.getItem("user-theme");e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" /> Light mode'),t=="dark-theme"?(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode'),e?.classList.add("dark-theme")):t=="light-theme"&&(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" /> Light mode'),e?.classList.remove("dark-theme")),window.matchMedia("(prefers-color-scheme: dark)").matches&&(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode'),e?.classList.remove("dark-theme")),this.addEventListener("click",o=>{console.log(e?.querySelector("input:checked")),e?.querySelector("input:checked")?(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode'),localStorage.setItem("user-theme","dark-theme"),document.documentElement.className="dark-theme",e?.classList.add("dark-theme")):(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" /> Light mode'),localStorage.setItem("user-theme","light-theme"),document.documentElement.className="light-theme",e?.classList.remove("dark-theme"))}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:o})=>{o&&(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode'),e?.classList.add("dark-theme"))}),window.matchMedia("(prefers-color-scheme: light)").addEventListener("change",({matches:o})=>{o&&(e==null||(e.innerHTML='<input type="checkbox" name="dark-mode" /> Light mode'),e?.classList.remove("dark-theme"))})}}export{a as default};
|
|
10
|
+
//# sourceMappingURL=darkmode.component.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"darkmode.component.min.js","sources":["darkmode.component.js"],"sourcesContent":["window.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Dark mode button',\n});\nclass iamDarkMode extends HTMLElement {\n constructor() {\n var _a;\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/darkmode.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>${loadCSS}\n </style>\n <slot></slot>\n `;\n (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const label = this.querySelector('label');\n const storedTheme = localStorage.getItem('user-theme');\n // Work from local storage first then look at the media preferences\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" /> Light mode`;\n if (storedTheme == 'dark-theme') {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" checked=\"checked\" /> Dark mode`;\n label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');\n }\n else if (storedTheme == 'light-theme') {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" /> Light mode`;\n label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');\n }\n const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;\n if (hasDarkPreference) {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" checked=\"checked\" /> Dark mode`;\n label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');\n }\n this.addEventListener('click', (event) => {\n console.log(label === null || label === void 0 ? void 0 : label.querySelector('input:checked'));\n if (label === null || label === void 0 ? void 0 : label.querySelector('input:checked')) {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" checked=\"checked\" /> Dark mode`;\n localStorage.setItem('user-theme', 'dark-theme');\n document.documentElement.className = 'dark-theme';\n label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');\n }\n else {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" /> Light mode`;\n localStorage.setItem('user-theme', 'light-theme');\n document.documentElement.className = 'light-theme';\n label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');\n }\n });\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {\n if (matches) {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" checked=\"checked\" /> Dark mode`;\n label === null || label === void 0 ? void 0 : label.classList.add('dark-theme');\n }\n });\n window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ({ matches }) => {\n if (matches) {\n label === null || label === void 0 ? void 0 : label.innerHTML = `<input type=\"checkbox\" name=\"dark-mode\" /> Light mode`;\n label === null || label === void 0 ? void 0 : label.classList.remove('dark-theme');\n }\n });\n }\n}\nexport default iamDarkMode;\n"],"names":["iamDarkMode","_a","template","label","storedTheme","event","matches"],"mappings":";;;IAAA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,kBACb,CAAC,EACD,MAAMA,UAAoB,WAAY,CAClC,aAAc,CACV,IAAIC,EACJ,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,OAKpBD,EAAK,KAAK,cAAgB,MAAQA,IAAO,QAAkBA,EAAG,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/G,CACA,mBAAoB,CAChB,MAAMC,EAAQ,KAAK,cAAc,OAAO,EAClCC,EAAc,aAAa,QAAQ,YAAY,EAErDD,GAAU,OAAoCA,EAAM,UAAY,0DAC5DC,GAAe,cACfD,GAAU,OAAoCA,EAAM,UAAY,0EAClBA,GAAM,UAAU,IAAI,YAAY,GAEzEC,GAAe,gBACpBD,GAAU,OAAoCA,EAAM,UAAY,0DAClBA,GAAM,UAAU,OAAO,YAAY,GAE3D,OAAO,WAAW,8BAA8B,EAAE,UAExEA,GAAU,OAAoCA,EAAM,UAAY,0EAClBA,GAAM,UAAU,OAAO,YAAY,GAErF,KAAK,iBAAiB,QAAUE,GAAU,CACtC,QAAQ,IAAkDF,GAAM,cAAc,eAAe,CAAC,EAC5CA,GAAM,cAAc,eAAe,GACjFA,GAAU,OAAoCA,EAAM,UAAY,0EAChE,aAAa,QAAQ,aAAc,YAAY,EAC/C,SAAS,gBAAgB,UAAY,aACSA,GAAM,UAAU,IAAI,YAAY,IAG9EA,GAAU,OAAoCA,EAAM,UAAY,yDAChE,aAAa,QAAQ,aAAc,aAAa,EAChD,SAAS,gBAAgB,UAAY,cACSA,GAAM,UAAU,OAAO,YAAY,EAEzF,CAAC,EACD,OAAO,WAAW,8BAA8B,EAAE,iBAAiB,SAAU,CAAC,CAAE,QAAAG,KAAc,CACtFA,IACAH,GAAU,OAAoCA,EAAM,UAAY,0EAClBA,GAAM,UAAU,IAAI,YAAY,EAEtF,CAAC,EACD,OAAO,WAAW,+BAA+B,EAAE,iBAAiB,SAAU,CAAC,CAAE,QAAAG,KAAc,CACvFA,IACAH,GAAU,OAAoCA,EAAM,UAAY,0DAClBA,GAAM,UAAU,OAAO,YAAY,EAEzF,CAAC,CACL,CACJ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/const M=t=>t.charAt(0).toUpperCase()+t.slice(1),L=t=>t.replace(/_/g," "),E=(t,r)=>{for(let a=1;a<=10;a++){if(t.hasAttribute(`data-colour-${a}`)){const i=t.getAttribute(`data-colour-${a}`);t.style.setProperty(`--chart-colour-${a}`,`var(--chart-colour-${i})`),t.style.setProperty(`--chart-colour-${a}-hover`,`var(--chart-colour-${i}-hover)`)}Array.from(r.querySelectorAll(`[data-colour-${a}]`)).forEach(i=>{const o=i.getAttribute(`data-colour-${a}`);i.style.setProperty(`--chart-colour-${a}-set`,`var(--chart-colour-${o})`),i.style.setProperty(`--chart-colour-${a}-hover`,`var(--chart-colour-${o}-hover)`)})}return!0},w=(t,r,a)=>{if(t.tagName=="IAM-DOUGHNUTCHART")return P(t,r,a),!0;const i=r.querySelector(".chart__key");i.innerHTML="";const o=r.querySelector(".chart__guidelines");o.innerHTML="";const n=r.querySelector(".chart__yaxis");n.innerHTML="",Array.from(r.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map(c=>{c.remove()});const{xaxis:e}=m(t);return A(t,a),T(r,a,i),j(t,o),I(t,n),e&&X(r),!0},P=(t,r,a)=>{const i=r.querySelector(".chart__key");return i.innerHTML="",Array.from(r.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map(o=>{o.remove()}),A(t,a),T(r,a,i),F(r),!0},R=function(t,r){const a=r.querySelector(".chart");a.addEventListener("mousemove",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("td:not(:first-child")){const l=e.target.closest("td:not(:first-child").getBoundingClientRect(),s=e.clientX-l.left,h=e.clientY-l.top;a.setAttribute("style",`--cursor-x: ${s}px; --cursor-y: ${h}px;`)}});const i=r.querySelectorAll("label");Array.from(i).forEach(e=>{r.querySelector(`input#${e.getAttribute("for")}`).checked?e.setAttribute("part","key-checked"):e.setAttribute("part","key-unchecked")});const o=t.querySelector("table"),n=r.querySelector("table");r.addEventListener("change",function(e){const c=e.target,l=new CustomEvent("view-change",{detail:{"data-dataset":c.getAttribute("data-dataset"),label:c.getAttribute("data-label"),checked:c.checked}});t.dispatchEvent(l),Array.from(i).forEach(s=>{var h;!((h=r.querySelector(`input#${s.getAttribute("for")}`))===null||h===void 0)&&h.checked?s.setAttribute("part","key-checked"):s.setAttribute("part","key-unchecked")}),n.innerHTML=o.innerHTML,A(t,n),t.tagName=="IAM-DOUGHNUTCHART"&&F(r)})},N=function(t,r){const a=t.querySelector("table"),i=r.querySelector("table"),o=(l,s)=>{s.disconnect(),c.disconnect();for(const h of l)(h.attributeName=="class"||h.type==="attributes"||h.type==="attributes")&&(i.innerHTML=a.innerHTML,w(t,r,i));s.observe(a,{characterData:!0,subtree:!0}),c.observe(t,{attributes:!0})},n=(l,s)=>{s.disconnect(),c.disconnect();for(const h of l)(h.type=="characterData"||h.type=="childList"&&h.addedNodes.length)&&(i.innerHTML=a.innerHTML,w(t,r,i));s.observe(a,{characterData:!0,subtree:!0}),c.observe(t,{attributes:!0})},e=new MutationObserver(n),c=new MutationObserver(o);return e.observe(a,{characterData:!0,subtree:!0}),c.observe(t,{attributes:!0}),!0};function q(t,r){r>1&&(t=t-.25);const a=Math.cos(2*Math.PI*t),i=Math.sin(2*Math.PI*t);return[a*100,i*100]}const m=function(t){const r=t.shadowRoot.querySelector(".chart__wrapper table"),a=t.hasAttribute("data-min")?t.getAttribute("data-min"):0,i=t.hasAttribute("data-max")?t.getAttribute("data-max"):U(t,r),o=t.hasAttribute("data-yaxis")?t.getAttribute("data-yaxis").split(","):[],n=t.hasAttribute("data-guidelines")?t.getAttribute("data-guidelines").split(","):[],e=t.hasAttribute("data-xaxis")?t.getAttribute("data-xaxis").split(","):null;return{min:a,max:i,yaxis:o,xaxis:e,guidelines:n}};function U(t,r){const a=t.classList.contains("chart--stacked")?"tbody tr":"tbody td:not(:first-child)",i=Array.from(r.querySelectorAll(a)).map(n=>n.getAttribute("data-numeric")),o=Math.max(...i);return Math.ceil(o)}const x=function(t,r,a,i){let o=String(t);o=o.replace("\xA3",""),o=o.replace("%",""),o=o.replace(",",""),o=Number.parseFloat(o);let n=(o-r)/(a-r)*100,e=n,c=0;return i&&i!=0&&(c=(i-r)/(a-r)*100),r<0&&(c=Math.abs(r/(a-r)*100),o<0?(n=c-n,c=c-n,e=c):(n=n-c,e=n+c)),{percent:n,axis:e,bottom:c}},A=function(t,r){Array.from(r.querySelectorAll("tbody tr")).forEach(o=>{let n=0;Array.from(o.querySelectorAll("td:not(:first-child)")).forEach(e=>{const c=e.cloneNode(!0);Array.from(c.querySelectorAll("*")).forEach(h=>{h.remove()});const l=parseFloat(c.textContent.replace("\xA3","").replace("%","").replace(",",""));e.setAttribute("data-numeric",l),e.setAttribute("data-value",c.textContent),getComputedStyle(e).display!="none"&&(n+=l),Array.from(e.querySelectorAll("a, button")).forEach((h,b)=>{b==0&&h.insertAdjacentHTML("beforeBegin","<hr/>"),h.classList.add("btn"),h.classList.add("btn-tertiary")})}),o.setAttribute("data-numeric",n)});const{min:a,max:i}=m(t);Array.from(r.querySelectorAll("tbody tr")).forEach((o,n)=>{const e=o.querySelector("td:first-child, th:first-child")?o.querySelector("td:first-child, th:first-child").textContent:"";o.setAttribute("part","group");const c=(o.getAttribute("data-numeric")-a)/(i-a)*100;o.style.setProperty("--percent",`${c}%`),Array.from(o.querySelectorAll("td:not([data-label])")).forEach((h,b)=>{b==0?h.setAttribute("part","xaxis-label"):h.setAttribute("part","value"),o.querySelectorAll("td").length>2&&h.setAttribute("data-label",r.querySelectorAll("thead th")[b].textContent)});const l=o.hasAttribute("data-min")?o.getAttribute("data-min"):a,s=o.hasAttribute("data-max")?o.getAttribute("data-max"):i;if(l<0){const h=Math.abs(l/(s-l)*100);t.setAttribute("style",`--min-bottom: ${h}%;`)}o.style.setProperty("--row-index",n+1),Array.from(o.querySelectorAll('td[data-numeric]:not([data-label="Min"]):not([data-label="Max"]):not(:first-child)')).forEach(h=>{if(getComputedStyle(h).display=="none")return;const g=h.innerHTML,_=Number.parseFloat(h.getAttribute("data-numeric")),d=Number.parseFloat(h.getAttribute("data-start"));if(h.querySelector("span[data-group]")||(h.innerHTML=`<span data-group="${e}" ${h.hasAttribute("data-label")?`data-label="${h.getAttribute("data-label")}"`:""} part="popover">${g}</span>`),!h.hasAttribute("style")){const{percent:v,bottom:y,axis:p}=x(_,l,s,d);h.setAttribute("data-percent",v),h.setAttribute("style",`--bottom:${y}%;--percent:${v}%;--axis:${p}%;`)}})})},T=function(t,r,a){const i=`chart-${Date.now()+(Math.floor(Math.random()*100)+1)}`;let o;const n=Array.from(r.querySelectorAll("thead th"));return n.forEach((e,c)=>{c!=0&&(o=V(i,c,e.textContent,a,t,o)),c==50&&(n.length=c+1)}),!0};function V(t,r,a,i,o,n){var e;const c=document.createElement("input");c.setAttribute("name",`${t}-dataset-${r}`),c.setAttribute("id",`${t}-dataset-${r}`),c.setAttribute("data-dataset",`${r}`),c.setAttribute("data-label",`${a}`),c.checked=!0,c.setAttribute("type","checkbox"),r==1?o.prepend(c):o.insertBefore(c,n.nextSibling),n=c;const l=document.createElement("label");l.setAttribute("class","key btn btn-action"),l.setAttribute("for",`${t}-dataset-${r}`),l.setAttribute("data-label",`${a}`),l.setAttribute("part","key");const s=(e=o.querySelector(`tbody tr td:nth-child(${r+1})`))===null||e===void 0?void 0:e.getAttribute("data-numeric");return l.setAttribute("data-numeric",s),l.innerHTML=`${a}`,i.append(l),n}const j=function(t,r){const{min:a,max:i,yaxis:o}=m(t);let{guidelines:n}=m(t);n.length||(n=o),r.innerHTML="";for(let e=0;e<n.length;e++){const c=parseFloat(n[e].replace("\xA3","").replace("%","").replace(",","")),{axis:l}=x(c,a,i);r.innerHTML+=`<div class="guideline" style="--percent:${l}%;">${o.indexOf(n[e])!=-1?`<span>${n[e]}</span>`:""}</div>`}},I=function(t,r){const{min:a,max:i,yaxis:o}=m(t);r.innerHTML="";for(let n=0;n<o.length;n++){const e=parseFloat(o[n].replace("\xA3","").replace("%","")),{axis:c}=x(e,a,i);r.innerHTML+=`<div class="axis__point" style="--percent:${c}%;"><span>${o[n]}</span></div>`}},X=function(t){const r=t.querySelector(".chart");let a=t.querySelector(".chart__xaxis");a||(a=document.createElement("div"),a.setAttribute("class","chart__xaxis")),r.prepend(a)},F=function(t){let r="";const a=t.querySelector(".chart");let i=t.querySelector(".doughnuts");i||(i=document.createElement("div"),i.setAttribute("class","doughnuts"),a.append(i)),Array.from(a.querySelectorAll("tbody tr")).forEach((o,n)=>{let e="",c="",l=0,s=0;const b=o.querySelectorAll("td")[0].innerHTML;let g=0;const _=o.getAttribute("data-numeric");Array.from(o.querySelectorAll("td")).forEach((d,v)=>{const y=getComputedStyle(d).display;if(v!=0&&y!="none"){let p=d.getAttribute("data-numeric");p=p.replace("\xA3",""),p=p.replace("%",""),p=p.replace(",",""),p=Number.parseInt(p),s+=p,g++}}),Array.from(o.querySelectorAll("td")).forEach((d,v)=>{var y,p;const f=getComputedStyle(d).display;if(v!=0&&g==1&&f!="none")e+=`<path d="M 0 0 L 100 0 A 100 100 0 1 1 100 -0.01 L 0 0" style="${d.getAttribute("style")} --path-index: ${v};"></path>`,c+=`<span class="h5 mb-0" part="popover">${M(L(d.getAttribute("data-label"))).trim()}<br/>${d.hasAttribute("data-second")?`${d.getAttribute("data-second-label")}: ${d.getAttribute("data-second")}<br/>`:""}${(y=d.querySelector('[part="popover"]'))===null||y===void 0?void 0:y.innerHTML}</span>`;else if(v!=0){let u=d.getAttribute("data-numeric");const H=f=="none"?"display: none;":"";u=u.replace("\xA3",""),u=u.replace("%",""),u=u.replace(",",""),u=Number.parseInt(u);const k=u/s,[$,z]=q(l,g),[C,S]=q(l+k,g),D=k>.5?1:0,B=["M 0 0",`L ${$?$.toFixed(0):0} ${z?z.toFixed(0):0}`,`A 100 100 0 ${D} 1 ${C?C.toFixed(0):0} ${S?S.toFixed(0):0}`,"L 0 0"].join(" ");e+=`<path d="${B}" style="${d.getAttribute("style")} --path-index: ${v};${H}"></path>`,c+=`<span class="h5 mb-0" part="popover">${M(L(d.getAttribute("data-label"))).trim()}<br/>${d.hasAttribute("data-second")?`${d.getAttribute("data-second-label")}: ${d.getAttribute("data-second")}<br/>`:""}${(p=d.querySelector('[part="popover"]'))===null||p===void 0?void 0:p.innerHTML}</span>`,f!="none"&&(l+=k)}}),r+=`<div class="doughnut">
|
|
5
5
|
<svg viewBox="-105 -105 210 210" preserveAspectRatio="none" style="--row-index: ${n+1};">${e}</svg>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<style>
|
|
10
10
|
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
11
11
|
|
|
12
|
-
:host{--chart-colour-1-set: var(--chart-colour-1, #BEE8F8);--chart-colour-2-set: var(--chart-colour-2, #A6DCC7);--chart-colour-3-set: var(--chart-colour-3, #FAD0DA);--chart-colour-4-set: var(--chart-colour-4, #AFCCF2);--chart-colour-5-set: var(--chart-colour-5, #FFD2B4);--chart-colour-6-set: var(--chart-colour-6, #CDF0F2);--chart-colour-7-set: var(--chart-colour-7, #FFABC2);--chart-colour-8-set: var(--chart-colour-8, #DCEAF2);--chart-colour-9-set: var(--chart-colour-9, #EEBCB3);--chart-colour-10-set: var(--chart-colour-10, #F0BDFF);--chart-colour-1-hover: var(--chart-colour-1, #B6DEED);--chart-colour-2-hover: var(--chart-colour-2, #98CBB7);--chart-colour-3-hover: var(--chart-colour-3, #EFC8D1);--chart-colour-4-hover: var(--chart-colour-4, #A6C1E5);--chart-colour-5-hover: var(--chart-colour-5, #F4CAAF);--chart-colour-6-hover: var(--chart-colour-6, #C2E3E5);--chart-colour-7-hover: var(--chart-colour-7, #F5A2B9);--chart-colour-8-hover: var(--chart-colour-8, #CFDCE3);--chart-colour-9-hover: var(--chart-colour-9, #E3B2A9);--chart-colour-10-hover: var(--chart-colour-10, #E3B2F2);--chart-colour-success: #d2f0c9 !important;--chart-colour-success-hover: #8ad873 !important;--chart-colour-danger: #f5c2c7 !important;--chart-colour-danger-hover: #f5c2e7 !important;--chart-colour-warning: #ffd280 !important;--chart-colour-warning-hover: #ffb020 !important}.chart__key .key:nth-child(11n-10),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-9){--chart-colour: var(--chart-colour-1-set);--chart-colour-hover: var(--chart-colour-1-hover)}.chart__outer table tbody tr:nth-child(1):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-1-set);--chart-colour-hover: var(--chart-colour-1-hover)}.chart__key .key:nth-child(11n-9),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-8){--chart-colour: var(--chart-colour-2-set);--chart-colour-hover: var(--chart-colour-2-hover)}.chart__outer table tbody tr:nth-child(2):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-2-set);--chart-colour-hover: var(--chart-colour-2-hover)}.chart__key .key:nth-child(11n-8),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-7){--chart-colour: var(--chart-colour-3-set);--chart-colour-hover: var(--chart-colour-3-hover)}.chart__outer table tbody tr:nth-child(3):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-3-set);--chart-colour-hover: var(--chart-colour-3-hover)}.chart__key .key:nth-child(11n-7),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-6){--chart-colour: var(--chart-colour-4-set);--chart-colour-hover: var(--chart-colour-4-hover)}.chart__outer table tbody tr:nth-child(4):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-4-set);--chart-colour-hover: var(--chart-colour-4-hover)}.chart__key .key:nth-child(11n-6),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-5){--chart-colour: var(--chart-colour-5-set);--chart-colour-hover: var(--chart-colour-5-hover)}.chart__outer table tbody tr:nth-child(5):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-5-set);--chart-colour-hover: var(--chart-colour-5-hover)}.chart__key .key:nth-child(11n-5),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-4){--chart-colour: var(--chart-colour-6-set);--chart-colour-hover: var(--chart-colour-6-hover)}.chart__outer table tbody tr:nth-child(6):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-6-set);--chart-colour-hover: var(--chart-colour-6-hover)}.chart__key .key:nth-child(11n-4),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-3){--chart-colour: var(--chart-colour-7-set);--chart-colour-hover: var(--chart-colour-7-hover)}.chart__outer table tbody tr:nth-child(7):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-7-set);--chart-colour-hover: var(--chart-colour-7-hover)}.chart__key .key:nth-child(11n-3),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-2){--chart-colour: var(--chart-colour-8-set);--chart-colour-hover: var(--chart-colour-8-hover)}.chart__outer table tbody tr:nth-child(8):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-8-set);--chart-colour-hover: var(--chart-colour-8-hover)}.chart__key .key:nth-child(11n-2),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-1){--chart-colour: var(--chart-colour-9-set);--chart-colour-hover: var(--chart-colour-9-hover)}.chart__outer table tbody tr:nth-child(9):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-9-set);--chart-colour-hover: var(--chart-colour-9-hover)}.chart__key .key:nth-child(11n-1),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-0){--chart-colour: var(--chart-colour-10-set);--chart-colour-hover: var(--chart-colour-10-hover)}.chart__outer table tbody tr:nth-child(10):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-10-set);--chart-colour-hover: var(--chart-colour-10-hover)}::slotted(table){display:none !important}:host{container-type:inline-size;margin-bottom:2rem;display:block}.chart__outer{display:flex;flex-direction:column;position:relative;font-weight:var(--chart-font-weight, bold);color:var(--chart-text-color, black);--body-colour-set: var(--body-colour, Canvas);--text-colour-set: var(--text-colour, black);--chart-height-set: var(--chart-height, 7.5rem);--chart-height-lg-set: var(--chart-height-lg, 12.5rem);--chart-height-resp: var(--chart-height-set);--index-below: -1;--index-base: 0;--index-focus: 2;--index-above: 10;--index-floating: 100;--index-menu: 200;--index-overlay: 1000;--key-label-width: 100%;--label-size: 0.75rem;--line-thickness: 1px;--yaxis-width: auto;--yaxis-point-display: block;--yaxis-last-point-transform: translate(0, -50%);--bar-gap: min(10%, 0.75rem)}.chart__outer>*{display:block;order:2}.chart__outer tbody{--chart-direction: 360deg;--chart-day-bg-pos: 100% calc(var(--single-day) * 7)}@container (min-width: 23.4375em){.chart__outer :has(tr:nth-child(5) td:nth-child(4)),.chart__outer :has(tr:nth-child(10)){--yaxis-width: 0;--yaxis-point-display: none;--yaxis-last-point-transform: translate(0, -100%);--bar-gap: 0}.chart__outer .chart__wrapper{--chart-height-resp: var(--chart-height-lg-set);--line-thickness: 0.8px;--yaxis-width: auto;--yaxis-point-display: block;--yaxis-last-point-transform: translate(0, -50%)}}@container (min-width: 48em){.chart__outer :has(tr:nth-child(10)){--bar-gap: 0}.chart__outer .chart__wrapper{--label-size: 0.875rem;--line-thickness: 0.5px}}.chart__outer .chart__spacer span{opacity:0}.chart__outer>input[type=checkbox]{opacity:0;position:absolute;pointer-events:none;bottom:50%;left:50%}.chart__key{padding:0 0 0 0;margin-bottom:1.5rem;display:flex;overflow:auto;scroll-snap-type:x mandatory;scroll-padding:.75rem;gap:.5rem}.chart__key:has(label:first-child:last-child){display:var(--single-key-display, none)}.chart__key .key{margin:0 !important}.chart__key .key:before{content:"";height:.8em;width:.8em;margin-right:.3em !important;background-color:var(--chart-colour);display:inline-block;border-radius:var(--key-border-radius, 4px)}.chart__key .key[data-label=Min],.chart__key .key[data-label=Max]{display:none}.chart__key .key .chart__total{display:none}.chart__outer input[type=checkbox]:focus:nth-child(1)~.chart__key .key:nth-child(1){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(2)~.chart__key .key:nth-child(2){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(3)~.chart__key .key:nth-child(3){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(4)~.chart__key .key:nth-child(4){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(5)~.chart__key .key:nth-child(5){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(6)~.chart__key .key:nth-child(6){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(7)~.chart__key .key:nth-child(7){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(8)~.chart__key .key:nth-child(8){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(9)~.chart__key .key:nth-child(9){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer>input[type=checkbox]:nth-of-type(1):not(:checked)~.chart__key .key:nth-of-type(1){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(2):not(:checked)~.chart__key .key:nth-of-type(2){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(3):not(:checked)~.chart__key .key:nth-of-type(3){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(4):not(:checked)~.chart__key .key:nth-of-type(4){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(5):not(:checked)~.chart__key .key:nth-of-type(5){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(6):not(:checked)~.chart__key .key:nth-of-type(6){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(7):not(:checked)~.chart__key .key:nth-of-type(7){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(8):not(:checked)~.chart__key .key:nth-of-type(8){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(9):not(:checked)~.chart__key .key:nth-of-type(9){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(10):not(:checked)~.chart__key .key:nth-of-type(10){opacity:.25}:host([data-yaxis]){--yaxis-display: flex}.chart__yaxis{display:var(--yaxis-display, none);flex-direction:column-reverse;width:var(--yaxis-width)}.chart__yaxis .axis__point{bottom:var(--percent);position:relative;height:0;white-space:nowrap}.chart__yaxis .axis__point:not(:last-child){display:var(--yaxis-point-display)}.chart__yaxis .axis__point span{display:block;transform:translate(0, -50%);padding-right:.25rem;text-align:right;font-weight:var(--chart-yaxis-fw, normal);font-size:var(--chart-yaxis-fs, 0.75rem);color:var(--colour-body)}.chart__yaxis .axis__point:last-child span{transform:var(--yaxis-last-point-transform)}.chart__xaxis{margin-bottom:1rem;display:flex;flex-direction:column-reverse;width:100%;position:absolute;left:0;bottom:-1rem}.chart__xaxis .axis__point{left:var(--percent);width:1px;position:absolute;height:0;white-space:nowrap}.chart__xaxis .axis__point span{display:block;transform:translate(-50%, 0%);text-align:center;font-size:var(--label-size);position:absolute;left:50%}.chart__guidelines{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column-reverse;pointer-events:none}.chart__guidelines .guideline{bottom:var(--percent);position:absolute;right:0;width:100%;height:0px;margin-bottom:-1px;border-bottom:1px dashed #eee;pointer-events:none;z-index:var(--index-below)}.chart__guidelines .guideline:not(.guideline--target) span{display:none}.chart__guidelines .guideline--target{border-bottom:1px dashed #000;z-index:var(--index-above);text-shadow:1px solid #fff;overflow:visible}.chart__guidelines .guideline--target span{position:absolute;bottom:0;font-size:var(--label-size);text-shadow:1px 1px 2px #fff;background:hsla(0,0%,100%,.6)}.chart__guidelines [data-value="0"]{border-bottom:1px solid var(--colour-primary)}.chart__guidelines [data-value="0"]:not(:first-child){border-bottom:1px dashed var(--colour-primary)}[part=popover]{position:absolute;top:var(--cursor-y, 50%);left:var(--cursor-x, 50%);font-size:var(--label-size);line-height:1.2;background:var(--chart-details-bg, var(--colour-canvas-2, Canvas));opacity:0;pointer-events:none;padding:.5rem;border-radius:.5rem;margin-bottom:.25rem;display:block;white-space:pre;text-align:left;box-shadow:var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));transform:translate(-50%, -100%)}[part=popover]::before{content:attr(data-group) "\\a"}[part=popover][data-label]::before{content:attr(data-group) "\\a" attr(data-label) "\\a"}[part=popover]:has(:is(a,button)){top:0;left:50%;transform:translate(-50%, -100%);font-size:.9rem}[part=popover] hr{margin:0;opacity:0}[part=popover] :is(a,button){display:inline-block !important;clear:both !important;float:left !important;margin-top:1rem !important;margin-right:1rem !important;margin-bottom:.25em !important;font-size:1em !important}[part=popover] :is(a,button)+:is(a,button){margin-top:0 !important}.chart__wrapper{display:block;display:flex;flex-direction:row;position:relative}.chart__wrapper .chart{position:relative;flex-grow:1}.chart__wrapper table{display:block;width:100% !important;padding-top:var(--chart-height-resp);position:relative;margin-bottom:0;overflow:visible}.chart__wrapper table thead{display:none}.chart__wrapper table tbody{display:flex;position:absolute;width:100%;height:100%;top:0;left:0;flex-direction:row;border:none}.chart__wrapper table tbody tr{display:flex;flex-direction:row;justify-content:var(--chart-bar-alignment, left);align-items:flex-end;border:none;width:100%;height:100%;position:relative;padding:0 2px;gap:var(--bar-gap)}.chart__wrapper table tbody tr td{font-weight:inherit}.chart__wrapper table tbody tr td:first-child{position:absolute;top:100%;left:0%;width:fit-content;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--label-size);text-align:center}@container (min-width: 48em){.chart__wrapper table tbody tr td:first-child{display:block}}.chart__wrapper table tbody tr td:first-child button{all:unset;cursor:pointer}.chart__wrapper table tbody tr td[data-label=Min],.chart__wrapper table tbody tr td[data-label=Max]{display:none}.chart__wrapper table tbody tr:first-child td:first-child,.chart__wrapper table tbody tr:last-child td:first-child{display:block}.chart__wrapper table tbody tr td:not(:first-child){height:100%;height:var(--percent, 0%);bottom:var(--bottom, 0%);width:100%;max-width:7.5rem;position:relative;padding:0;background:var(--chart-colour);border-top-right-radius:4px;border-top-left-radius:4px}@media screen and (prefers-color-scheme: dark){.chart__wrapper table tbody tr td:not(:first-child){background:color-mix(in oklab, var(--chart-colour), black 20%)}}.chart__wrapper table tbody tr td:not(:first-child):hover{background:var(--chart-colour-hover)}.chart__wrapper table tbody tr td:not(:first-child):has(span:empty),.chart__wrapper table tbody tr td:not(:first-child):empty{display:none}.chart__wrapper table tbody tr td:not(:first-child)[data-label]:before{display:none}.chart__wrapper table tbody tr td:not(:first-child):hover [part=popover]{opacity:1;z-index:var(--index-above);pointer-events:all}.chart__wrapper table tbody tr td:first-child[data-label]:before{display:none}@container (min-width: 48em){.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr td:first-child{display:none}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:first-child td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:first-child td:first-child{left:0%;transform:translate(0, 0);display:block;text-align:left}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:last-child td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:last-child td:first-child{left:100%;transform:translate(-100%, 0);display:block;text-align:right}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:first-child td:not(:first-child) span,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:first-child td:not(:first-child) span{left:-20%;transform:translate(0%, 0);text-align:left}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:last-child td:not(:first-child) span,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:last-child td:not(:first-child) span{left:120%;transform:translate(-100%, 0);text-align:right}}@container (min-width: 23.4375em){.chart__wrapper table tbody:has(tr:nth-child(25)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(25)) tr:is(:first-child,:nth-child(2n+1)) td:first-child{display:block !important}.chart__wrapper table tbody:has(tr:nth-child(50)) tr:is(:first-child,:nth-child(2n+1)) td:first-child,.chart__wrapper table tbody:has(tr:nth-child(50)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(50)) tr:is(:first-child,:nth-child(10n+1)) td:first-child{display:block !important}.chart__wrapper table tbody:has(tr:nth-child(100)) tr:is(:first-child,:nth-child(10n+1)) td:first-child,.chart__wrapper table tbody:has(tr:nth-child(100)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(100)) tr:is(:first-child,:nth-child(20n+1)) td:first-child{display:block !important}}:host(.chart-colour--success) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--success,.chart-colour--success td{--chart-colour: var(--chart-colour-success) !important}:host(.chart-colour--success) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--success:hover,.chart-colour--success td:hover{--chart-colour-hover: var(--chart-colour-success-hover) !important}:host(.chart-colour--danger) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--danger,.chart-colour--danger,.chart-colour--danger td{--chart-colour: var(--chart-colour-danger) !important}:host(.chart-colour--danger) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--danger:hover,.chart-colour--danger:hover,.chart-colour--danger td:hover{--chart-colour-hover: var(--chart-colour-danger-hover) !important}:host(.chart-colour--warning) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--warning,.chart-colour--warning,.chart-colour--warning td{--chart-colour: var(--chart-colour-warning) !important}:host(.chart-colour--warning) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--warning:hover,.chart-colour--warning:hover,.chart-colour--warning td:hover{--chart-colour-hover: var(--chart-colour-warning-hover) !important}.chart__outer>input[type=checkbox]:nth-of-type(1):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(2){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(2):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(3){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(3):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(4){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(4):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(5){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(5):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(6){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(6):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(7){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(7):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(8){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(8):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(9){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(9):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(10){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(10):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(11){display:none;opacity:0}@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}.d-block{display:block}.chart__wrapper .doughnut path:nth-child(11n-10){fill:var(--chart-colour-1-set)}.chart__wrapper .doughnut path:nth-child(11n-9){fill:var(--chart-colour-2-set)}.chart__wrapper .doughnut path:nth-child(11n-8){fill:var(--chart-colour-3-set)}.chart__wrapper .doughnut path:nth-child(11n-7){fill:var(--chart-colour-4-set)}.chart__wrapper .doughnut path:nth-child(11n-6){fill:var(--chart-colour-5-set)}.chart__wrapper .doughnut path:nth-child(11n-5){fill:var(--chart-colour-6-set)}.chart__wrapper .doughnut path:nth-child(11n-4){fill:var(--chart-colour-7-set)}.chart__wrapper .doughnut path:nth-child(11n-3){fill:var(--chart-colour-8-set)}.chart__wrapper .doughnut path:nth-child(11n-2){fill:var(--chart-colour-9-set)}.chart__wrapper .doughnut path:nth-child(11n-1){fill:var(--chart-colour-10-set)}.chart__wrapper{order:1}.chart__key{--key-border-radius: 50%;order:2;margin-bottom:0}.chart__key .btn-action{font-size:0.75rem;margin-right:-0.375rem !important;border-color:rgba(0,0,0,0) !important}.chart__key .btn-action:not(:hover):not(:focus){border-color:rgba(0,0,0,0) !important;background:rgba(0,0,0,0) !important}:host(.chart--horizontal) .chart__outer{flex-direction:row}:host(.chart--horizontal) .chart__outer .chart__key{flex-direction:column;justify-content:center;overflow:visible}:host(.chart--horizontal) .chart__outer .chart__key .btn-action{margin-right:0rem !important;margin-bottom:-0.75rem !important}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action{min-width:100%;display:flex;align-items:center;min-width:100%}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action[data-numeric]:before{flex-shrink:0}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action[data-numeric]:after{content:attr(data-numeric);display:inline-block;flex-grow:1;flex-shrink:0;min-width:6ch;text-align:right}:host(.chart--lg){--doughnut-size: 17.875rem}:host{--doughnut-size: 14.75rem}:host(.chart--sm){--doughnut-size: 11.875rem}.chart__outer .chart__yaxis,.chart__outer .line{display:none}.chart__outer table{display:none}.chart__outer .chart{display:flex;align-items:center}.chart__outer .doughnuts{display:flex;flex-direction:row;flex-wrap:wrap}.chart__outer .doughnut{position:relative;aspect-ratio:1/1;min-width:11.875rem;flex:1 1 auto;display:inline-block;max-width:var(--doughnut-size)}@container (min-width: 23.4375em){.chart__outer .doughnut{width:var(--doughnut-size)}}.chart__outer .doughnut:first-child{margin-left:0}.chart__outer .doughnut:last-child{margin-right:0}.chart__outer .doughnut svg{width:100%;height:100%}.chart__outer .doughnut>.doughnut__title{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:all;background:var(--bg-colour, var(--colour-canvas));border-radius:50%;z-index:var(--index-focus);padding:1rem;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;flex-direction:column;height:67%}.chart__outer .doughnut>.doughnut__title:before{content:attr(data-numeric);display:block;text-align:center;color:var(--colour-heading);font-size:3rem}.chart__outer .doughnut>.doughnut__title span{text-align:center;display:block}.chart__outer .doughnut svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1),.chart__outer .doughnut svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2),.chart__outer .doughnut svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3),.chart__outer .doughnut svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4),.chart__outer .doughnut svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5),.chart__outer .doughnut svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6),.chart__outer .doughnut svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7),.chart__outer .doughnut svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8),.chart__outer .doughnut svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9),.chart__outer .doughnut svg:has(path:nth-child(10):hover)~.tooltips>[part=popover]:nth-child(10),.chart__outer [part=popover]:hover{opacity:1;z-index:var(--index-above);pointer-events:all;z-index:99}.chart__outer .doughnut svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1):before,.chart__outer .doughnut svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2):before,.chart__outer .doughnut svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3):before,.chart__outer .doughnut svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4):before,.chart__outer .doughnut svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5):before,.chart__outer .doughnut svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6):before,.chart__outer .doughnut svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7):before,.chart__outer .doughnut svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8):before,.chart__outer .doughnut svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9):before,.chart__outer .doughnut svg:has(path:nth-child(10):hover)~.tooltips>[part=popover]:nth-child(10):before,.chart__outer [part=popover]:hover:before{display:none}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(1):hover{top:var(--middle-1-y, 50%);left:var(--middle-1-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(2):hover{top:var(--middle-2-y, 50%);left:var(--middle-2-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(3):hover{top:var(--middle-3-y, 50%);left:var(--middle-3-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(4):hover{top:var(--middle-4-y, 50%);left:var(--middle-4-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(5):hover{top:var(--middle-5-y, 50%);left:var(--middle-5-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(6):hover{top:var(--middle-6-y, 50%);left:var(--middle-6-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(7):hover{top:var(--middle-7-y, 50%);left:var(--middle-7-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(8):hover{top:var(--middle-8-y, 50%);left:var(--middle-8-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(9):hover{top:var(--middle-9-y, 50%);left:var(--middle-9-x, 50%);transform:translate(-50%, -50%)}/*# sourceMappingURL=assets/css/components/doughnutchart.component.css.map */
|
|
12
|
+
:host{--chart-colour-1-set: var(--chart-colour-1, #BEE8F8);--chart-colour-2-set: var(--chart-colour-2, #A6DCC7);--chart-colour-3-set: var(--chart-colour-3, #FAD0DA);--chart-colour-4-set: var(--chart-colour-4, #AFCCF2);--chart-colour-5-set: var(--chart-colour-5, #FFD2B4);--chart-colour-6-set: var(--chart-colour-6, #CDF0F2);--chart-colour-7-set: var(--chart-colour-7, #FFABC2);--chart-colour-8-set: var(--chart-colour-8, #DCEAF2);--chart-colour-9-set: var(--chart-colour-9, #EEBCB3);--chart-colour-10-set: var(--chart-colour-10, #F0BDFF);--chart-colour-1-hover: var(--chart-colour-1, #B6DEED);--chart-colour-2-hover: var(--chart-colour-2, #98CBB7);--chart-colour-3-hover: var(--chart-colour-3, #EFC8D1);--chart-colour-4-hover: var(--chart-colour-4, #A6C1E5);--chart-colour-5-hover: var(--chart-colour-5, #F4CAAF);--chart-colour-6-hover: var(--chart-colour-6, #C2E3E5);--chart-colour-7-hover: var(--chart-colour-7, #F5A2B9);--chart-colour-8-hover: var(--chart-colour-8, #CFDCE3);--chart-colour-9-hover: var(--chart-colour-9, #E3B2A9);--chart-colour-10-hover: var(--chart-colour-10, #E3B2F2);--chart-colour-success: #d2f0c9 !important;--chart-colour-success-hover: #8ad873 !important;--chart-colour-danger: #f5c2c7 !important;--chart-colour-danger-hover: #f5c2e7 !important;--chart-colour-warning: #ffd280 !important;--chart-colour-warning-hover: #ffb020 !important}.chart__key .key:nth-child(11n-10),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-9){--chart-colour: var(--chart-colour-1-set);--chart-colour-hover: var(--chart-colour-1-hover)}.chart__outer table tbody tr:nth-child(1):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-1-set);--chart-colour-hover: var(--chart-colour-1-hover)}.chart__key .key:nth-child(11n-9),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-8){--chart-colour: var(--chart-colour-2-set);--chart-colour-hover: var(--chart-colour-2-hover)}.chart__outer table tbody tr:nth-child(2):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-2-set);--chart-colour-hover: var(--chart-colour-2-hover)}.chart__key .key:nth-child(11n-8),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-7){--chart-colour: var(--chart-colour-3-set);--chart-colour-hover: var(--chart-colour-3-hover)}.chart__outer table tbody tr:nth-child(3):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-3-set);--chart-colour-hover: var(--chart-colour-3-hover)}.chart__key .key:nth-child(11n-7),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-6){--chart-colour: var(--chart-colour-4-set);--chart-colour-hover: var(--chart-colour-4-hover)}.chart__outer table tbody tr:nth-child(4):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-4-set);--chart-colour-hover: var(--chart-colour-4-hover)}.chart__key .key:nth-child(11n-6),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-5){--chart-colour: var(--chart-colour-5-set);--chart-colour-hover: var(--chart-colour-5-hover)}.chart__outer table tbody tr:nth-child(5):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-5-set);--chart-colour-hover: var(--chart-colour-5-hover)}.chart__key .key:nth-child(11n-5),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-4){--chart-colour: var(--chart-colour-6-set);--chart-colour-hover: var(--chart-colour-6-hover)}.chart__outer table tbody tr:nth-child(6):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-6-set);--chart-colour-hover: var(--chart-colour-6-hover)}.chart__key .key:nth-child(11n-4),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-3){--chart-colour: var(--chart-colour-7-set);--chart-colour-hover: var(--chart-colour-7-hover)}.chart__outer table tbody tr:nth-child(7):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-7-set);--chart-colour-hover: var(--chart-colour-7-hover)}.chart__key .key:nth-child(11n-3),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-2){--chart-colour: var(--chart-colour-8-set);--chart-colour-hover: var(--chart-colour-8-hover)}.chart__outer table tbody tr:nth-child(8):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-8-set);--chart-colour-hover: var(--chart-colour-8-hover)}.chart__key .key:nth-child(11n-2),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-1){--chart-colour: var(--chart-colour-9-set);--chart-colour-hover: var(--chart-colour-9-hover)}.chart__outer table tbody tr:nth-child(9):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-9-set);--chart-colour-hover: var(--chart-colour-9-hover)}.chart__key .key:nth-child(11n-1),.chart__outer table tbody tr td:not(:first-child):nth-child(11n-0){--chart-colour: var(--chart-colour-10-set);--chart-colour-hover: var(--chart-colour-10-hover)}.chart__outer table tbody tr:nth-child(10):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1]) td:nth-child(2){--chart-colour: var(--chart-colour-10-set);--chart-colour-hover: var(--chart-colour-10-hover)}::slotted(table){display:none !important}:host{container-type:inline-size;margin-bottom:2rem;display:block}.chart__outer{display:flex;flex-direction:column;position:relative;font-weight:var(--chart-font-weight, bold);color:var(--chart-text-color, black);--body-colour-set: var(--body-colour, Canvas);--text-colour-set: var(--text-colour, black);--chart-height-set: var(--chart-height, 7.5rem);--chart-height-lg-set: var(--chart-height-lg, 12.5rem);--chart-height-resp: var(--chart-height-set);--index-below: -1;--index-base: 0;--index-focus: 2;--index-above: 10;--index-floating: 100;--index-menu: 200;--index-overlay: 1000;--key-label-width: 100%;--label-size: 0.75rem;--line-thickness: 1px;--yaxis-width: auto;--yaxis-point-display: block;--yaxis-last-point-transform: translate(0, -50%);--bar-gap: min(10%, 0.75rem)}.chart__outer>*{display:block;order:2}.chart__outer tbody{--chart-direction: 360deg;--chart-day-bg-pos: 100% calc(var(--single-day) * 7)}@container (min-width: 23.4375em){.chart__outer :has(tr:nth-child(5) td:nth-child(4)),.chart__outer :has(tr:nth-child(10)){--yaxis-width: 0;--yaxis-point-display: none;--yaxis-last-point-transform: translate(0, -100%);--bar-gap: 0}.chart__outer .chart__wrapper{--chart-height-resp: var(--chart-height-lg-set);--line-thickness: 0.8px;--yaxis-width: auto;--yaxis-point-display: block;--yaxis-last-point-transform: translate(0, -50%)}}@container (min-width: 48em){.chart__outer :has(tr:nth-child(10)){--bar-gap: 0}.chart__outer .chart__wrapper{--label-size: 0.875rem;--line-thickness: 0.5px}}.chart__outer .chart__spacer span{opacity:0}.chart__outer>input[type=checkbox]{opacity:0;position:absolute;pointer-events:none;bottom:50%;left:50%}.chart__key{padding:0 0 0 0;margin-bottom:1.5rem;display:flex;overflow:auto;scroll-snap-type:x mandatory;scroll-padding:.75rem;gap:.5rem}.chart__key:has(label:first-child:last-child){display:var(--single-key-display, none)}.chart__key .key{margin:0 !important}.chart__key .key:before{content:"";height:.8em;width:.8em;margin-right:.3em !important;background-color:var(--chart-colour);display:inline-block;border-radius:var(--key-border-radius, 4px)}.chart__key .key[data-label=Min],.chart__key .key[data-label=Max]{display:none}.chart__key .key .chart__total{display:none}.chart__outer input[type=checkbox]:focus:nth-child(1)~.chart__key .key:nth-child(1){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(2)~.chart__key .key:nth-child(2){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(3)~.chart__key .key:nth-child(3){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(4)~.chart__key .key:nth-child(4){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(5)~.chart__key .key:nth-child(5){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(6)~.chart__key .key:nth-child(6){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(7)~.chart__key .key:nth-child(7){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(8)~.chart__key .key:nth-child(8){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer input[type=checkbox]:focus:nth-child(9)~.chart__key .key:nth-child(9){background:var(--colour-btn-action-hover-bg) !important;border:var(--btn-border-width) solid var(--colour-muted) !important}.chart__outer>input[type=checkbox]:nth-of-type(1):not(:checked)~.chart__key .key:nth-of-type(1){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(2):not(:checked)~.chart__key .key:nth-of-type(2){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(3):not(:checked)~.chart__key .key:nth-of-type(3){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(4):not(:checked)~.chart__key .key:nth-of-type(4){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(5):not(:checked)~.chart__key .key:nth-of-type(5){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(6):not(:checked)~.chart__key .key:nth-of-type(6){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(7):not(:checked)~.chart__key .key:nth-of-type(7){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(8):not(:checked)~.chart__key .key:nth-of-type(8){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(9):not(:checked)~.chart__key .key:nth-of-type(9){opacity:.25}.chart__outer>input[type=checkbox]:nth-of-type(10):not(:checked)~.chart__key .key:nth-of-type(10){opacity:.25}:host([data-yaxis]){--yaxis-display: flex}.chart__yaxis{display:var(--yaxis-display, none);flex-direction:column-reverse;width:var(--yaxis-width)}.chart__yaxis .axis__point{bottom:var(--percent);position:relative;height:0;white-space:nowrap}.chart__yaxis .axis__point:not(:last-child){display:var(--yaxis-point-display)}.chart__yaxis .axis__point span{display:block;transform:translate(0, -50%);padding-right:.25rem;text-align:right;font-weight:var(--chart-yaxis-fw, normal);font-size:var(--chart-yaxis-fs, 0.75rem);color:var(--colour-body)}.chart__yaxis .axis__point:last-child span{transform:var(--yaxis-last-point-transform)}.chart__xaxis{margin-bottom:1rem;display:flex;flex-direction:column-reverse;width:100%;position:absolute;left:0;bottom:-1rem}.chart__xaxis .axis__point{left:var(--percent);width:1px;position:absolute;height:0;white-space:nowrap}.chart__xaxis .axis__point span{display:block;transform:translate(-50%, 0%);text-align:center;font-size:var(--label-size);position:absolute;left:50%}.chart__guidelines{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column-reverse;pointer-events:none}.chart__guidelines .guideline{bottom:var(--percent);position:absolute;right:0;width:100%;height:0px;margin-bottom:-1px;border-bottom:1px dashed #eee;pointer-events:none;z-index:var(--index-below)}.chart__guidelines .guideline:not(.guideline--target) span{display:none}.chart__guidelines .guideline--target{border-bottom:1px dashed #000;z-index:var(--index-above);text-shadow:1px solid #fff;overflow:visible}.chart__guidelines .guideline--target span{position:absolute;bottom:0;font-size:var(--label-size);text-shadow:1px 1px 2px #fff;background:hsla(0,0%,100%,.6)}.chart__guidelines [data-value="0"]{border-bottom:1px solid var(--colour-primary)}.chart__guidelines [data-value="0"]:not(:first-child){border-bottom:1px dashed var(--colour-primary)}[part=popover]{position:absolute;top:var(--cursor-y, 50%);left:var(--cursor-x, 50%);font-size:var(--label-size);line-height:1.2;background:var(--chart-details-bg, var(--colour-canvas-2, Canvas));opacity:0;pointer-events:none;padding:.5rem;border-radius:.5rem;margin-bottom:.25rem;display:block;white-space:pre;text-align:left;box-shadow:var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));transform:translate(-50%, -100%)}[part=popover]::before{content:attr(data-group) "\\a"}[part=popover][data-label]::before{content:attr(data-group) "\\a" attr(data-label) "\\a"}[part=popover]:has(:is(a,button)){top:0;left:50%;transform:translate(-50%, -100%);font-size:.9rem}[part=popover] hr{margin:0;opacity:0}[part=popover] :is(a,button){display:inline-block !important;clear:both !important;float:left !important;margin-top:1rem !important;margin-right:1rem !important;margin-bottom:.25em !important;font-size:1em !important}[part=popover] :is(a,button)+:is(a,button){margin-top:0 !important}.chart__wrapper{display:block;display:flex;flex-direction:row;position:relative}.chart__wrapper .chart{position:relative;flex-grow:1}.chart__wrapper table{display:block;width:100% !important;padding-top:var(--chart-height-resp);position:relative;margin-bottom:0;overflow:visible}.chart__wrapper table thead{display:none}.chart__wrapper table tbody{display:flex;position:absolute;width:100%;height:100%;top:0;left:0;flex-direction:row;border:none}.chart__wrapper table tbody tr{display:flex;flex-direction:row;justify-content:var(--chart-bar-alignment, left);align-items:flex-end;border:none;width:100%;height:100%;position:relative;padding:0 2px;gap:var(--bar-gap)}.chart__wrapper table tbody tr td{font-weight:inherit}.chart__wrapper table tbody tr td:first-child{position:absolute;top:100%;left:0%;width:fit-content;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--label-size);text-align:center}@container (min-width: 48em){.chart__wrapper table tbody tr td:first-child{display:block}}.chart__wrapper table tbody tr td:first-child button{all:unset;cursor:pointer}.chart__wrapper table tbody tr td[data-label=Min],.chart__wrapper table tbody tr td[data-label=Max]{display:none}.chart__wrapper table tbody tr:first-child td:first-child,.chart__wrapper table tbody tr:last-child td:first-child{display:block}.chart__wrapper table tbody tr td:not(:first-child){height:100%;height:var(--percent, 0%);bottom:var(--bottom, 0%);width:100%;max-width:7.5rem;position:relative;padding:0;background:var(--chart-colour);border-top-right-radius:4px;border-top-left-radius:4px}@media screen and (prefers-color-scheme: dark){.chart__wrapper table tbody tr td:not(:first-child){background:color-mix(in oklab, var(--chart-colour), black 20%)}}.chart__wrapper table tbody tr td:not(:first-child):hover{background:var(--chart-colour-hover)}.chart__wrapper table tbody tr td:not(:first-child):has(span:empty),.chart__wrapper table tbody tr td:not(:first-child):empty{display:none}.chart__wrapper table tbody tr td:not(:first-child)[data-label]:before{display:none}.chart__wrapper table tbody tr td:not(:first-child):hover [part=popover]{opacity:1;z-index:var(--index-above);pointer-events:all}.chart__wrapper table tbody tr td:first-child[data-label]:before{display:none}@container (min-width: 48em){.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr td:first-child{display:none}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:first-child td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:first-child td:first-child{left:0%;transform:translate(0, 0);display:block;text-align:left}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:last-child td:first-child,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:last-child td:first-child{left:100%;transform:translate(-100%, 0);display:block;text-align:right}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:first-child td:not(:first-child) span,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:first-child td:not(:first-child) span{left:-20%;transform:translate(0%, 0);text-align:left}.chart__wrapper table tbody:has(tr:nth-child(5) td:nth-child(4)) tr:last-child td:not(:first-child) span,.chart__wrapper table tbody:has(tr:nth-child(10)) tr:last-child td:not(:first-child) span{left:120%;transform:translate(-100%, 0);text-align:right}}@container (min-width: 23.4375em){.chart__wrapper table tbody:has(tr:nth-child(25)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(25)) tr:is(:first-child,:nth-child(2n+1)) td:first-child{display:block !important}.chart__wrapper table tbody:has(tr:nth-child(50)) tr:is(:first-child,:nth-child(2n+1)) td:first-child,.chart__wrapper table tbody:has(tr:nth-child(50)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(50)) tr:is(:first-child,:nth-child(10n+1)) td:first-child{display:block !important}.chart__wrapper table tbody:has(tr:nth-child(100)) tr:is(:first-child,:nth-child(10n+1)) td:first-child,.chart__wrapper table tbody:has(tr:nth-child(100)) tr td:first-child{display:none !important}.chart__wrapper table tbody:has(tr:nth-child(100)) tr:is(:first-child,:nth-child(20n+1)) td:first-child{display:block !important}}:host(.chart-colour--success) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--success,.chart-colour--success td{--chart-colour: var(--chart-colour-success) !important}:host(.chart-colour--success) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--success:hover,.chart-colour--success td:hover{--chart-colour-hover: var(--chart-colour-success-hover) !important}:host(.chart-colour--danger) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--danger,.chart-colour--danger,.chart-colour--danger td{--chart-colour: var(--chart-colour-danger) !important}:host(.chart-colour--danger) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--danger:hover,.chart-colour--danger:hover,.chart-colour--danger td:hover{--chart-colour-hover: var(--chart-colour-danger-hover) !important}:host(.chart-colour--warning) td,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--warning,.chart-colour--warning,.chart-colour--warning td{--chart-colour: var(--chart-colour-warning) !important}:host(.chart-colour--warning) td:hover,:host(:is(.chart-colour--success,.chart-colour--danger,.chart-colour--wraning)) td.chart-colour--warning:hover,.chart-colour--warning:hover,.chart-colour--warning td:hover{--chart-colour-hover: var(--chart-colour-warning-hover) !important}.chart__outer>input[type=checkbox]:nth-of-type(1):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(2){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(2):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(3){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(3):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(4){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(4):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(5){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(5):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(6){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(6):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(7){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(7):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(8){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(8):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(9){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(9):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(10){display:none;opacity:0}.chart__outer>input[type=checkbox]:nth-of-type(10):not(:checked)~.chart__wrapper table tbody tr td:not(:first-child):nth-child(11){display:none;opacity:0}@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact{text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@container style(--theme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}.d-block{display:block}.chart__wrapper .doughnut path:nth-child(11n-10){fill:var(--chart-colour-1-set)}.chart__wrapper .doughnut path:nth-child(11n-9){fill:var(--chart-colour-2-set)}.chart__wrapper .doughnut path:nth-child(11n-8){fill:var(--chart-colour-3-set)}.chart__wrapper .doughnut path:nth-child(11n-7){fill:var(--chart-colour-4-set)}.chart__wrapper .doughnut path:nth-child(11n-6){fill:var(--chart-colour-5-set)}.chart__wrapper .doughnut path:nth-child(11n-5){fill:var(--chart-colour-6-set)}.chart__wrapper .doughnut path:nth-child(11n-4){fill:var(--chart-colour-7-set)}.chart__wrapper .doughnut path:nth-child(11n-3){fill:var(--chart-colour-8-set)}.chart__wrapper .doughnut path:nth-child(11n-2){fill:var(--chart-colour-9-set)}.chart__wrapper .doughnut path:nth-child(11n-1){fill:var(--chart-colour-10-set)}.chart__wrapper{order:1}.chart__key{--key-border-radius: 50%;order:2;margin-bottom:0}.chart__key .btn-action{font-size:0.75rem;margin-right:-0.375rem !important;border-color:rgba(0,0,0,0) !important}.chart__key .btn-action:not(:hover):not(:focus){border-color:rgba(0,0,0,0) !important;background:rgba(0,0,0,0) !important}:host(.chart--horizontal) .chart__outer{flex-direction:row}:host(.chart--horizontal) .chart__outer .chart__key{flex-direction:column;justify-content:center;overflow:visible}:host(.chart--horizontal) .chart__outer .chart__key .btn-action{margin-right:0rem !important;margin-bottom:-0.75rem !important}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action{min-width:100%;display:flex;align-items:center;min-width:100%}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action[data-numeric]:before{flex-shrink:0}:host(.chart--horizontal.chart--show-totals) .chart__outer .chart__key .btn-action[data-numeric]:after{content:attr(data-numeric);display:inline-block;flex-grow:1;flex-shrink:0;min-width:6ch;text-align:right}:host(.chart--lg){--doughnut-size: 17.875rem}:host{--doughnut-size: 14.75rem}:host(.chart--sm){--doughnut-size: 11.875rem}.chart__outer .chart__yaxis,.chart__outer .line{display:none}.chart__outer table{display:none}.chart__outer .chart{display:flex;align-items:center}.chart__outer .doughnuts{display:flex;flex-direction:row;flex-wrap:wrap}.chart__outer .doughnut{position:relative;aspect-ratio:1/1;min-width:11.875rem;flex:1 1 auto;display:inline-block;max-width:var(--doughnut-size)}@container (min-width: 23.4375em){.chart__outer .doughnut{width:var(--doughnut-size)}}.chart__outer .doughnut:first-child{margin-left:0}.chart__outer .doughnut:last-child{margin-right:0}.chart__outer .doughnut svg{width:100%;height:100%}.chart__outer .doughnut>.doughnut__title:before{content:attr(data-numeric);display:block;text-align:center;color:var(--colour-heading);font-size:3rem}.chart__outer .doughnut>.doughnut__title{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:all;background:var(--bg-colour, var(--colour-canvas));border-radius:50%;z-index:var(--index-focus);padding:1rem;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;flex-direction:column;height:67%}.chart__outer .doughnut>.doughnut__title span{text-align:center;display:block}.chart__outer .doughnut svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1),.chart__outer .doughnut svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2),.chart__outer .doughnut svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3),.chart__outer .doughnut svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4),.chart__outer .doughnut svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5),.chart__outer .doughnut svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6),.chart__outer .doughnut svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7),.chart__outer .doughnut svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8),.chart__outer .doughnut svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9),.chart__outer .doughnut svg:has(path:nth-child(10):hover)~.tooltips>[part=popover]:nth-child(10),.chart__outer [part=popover]:hover{opacity:1;z-index:var(--index-above);pointer-events:all;z-index:99}.chart__outer .doughnut svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1):before,.chart__outer .doughnut svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2):before,.chart__outer .doughnut svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3):before,.chart__outer .doughnut svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4):before,.chart__outer .doughnut svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5):before,.chart__outer .doughnut svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6):before,.chart__outer .doughnut svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7):before,.chart__outer .doughnut svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8):before,.chart__outer .doughnut svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9):before,.chart__outer .doughnut svg:has(path:nth-child(10):hover)~.tooltips>[part=popover]:nth-child(10):before,.chart__outer [part=popover]:hover:before{display:none}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(1):hover)~.tooltips>[part=popover]:nth-child(1),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(1):hover{top:var(--middle-1-y, 50%);left:var(--middle-1-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(2):hover)~.tooltips>[part=popover]:nth-child(2),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(2):hover{top:var(--middle-2-y, 50%);left:var(--middle-2-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(3):hover)~.tooltips>[part=popover]:nth-child(3),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(3):hover{top:var(--middle-3-y, 50%);left:var(--middle-3-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(4):hover)~.tooltips>[part=popover]:nth-child(4),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(4):hover{top:var(--middle-4-y, 50%);left:var(--middle-4-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(5):hover)~.tooltips>[part=popover]:nth-child(5),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(5):hover{top:var(--middle-5-y, 50%);left:var(--middle-5-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(6):hover)~.tooltips>[part=popover]:nth-child(6),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(6):hover{top:var(--middle-6-y, 50%);left:var(--middle-6-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(7):hover)~.tooltips>[part=popover]:nth-child(7),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(7):hover{top:var(--middle-7-y, 50%);left:var(--middle-7-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(8):hover)~.tooltips>[part=popover]:nth-child(8),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(8):hover{top:var(--middle-8-y, 50%);left:var(--middle-8-x, 50%);transform:translate(-50%, -50%)}.chart__outer .doughnut:has([part=popover]>:is(button,a)) svg:has(path:nth-child(9):hover)~.tooltips>[part=popover]:nth-child(9),.chart__outer .doughnut:has([part=popover]>:is(button,a)) [part=popover]:nth-child(9):hover{top:var(--middle-9-y, 50%);left:var(--middle-9-x, 50%);transform:translate(-50%, -50%)}/*# sourceMappingURL=assets/css/components/doughnutchart.component.css.map */
|
|
13
13
|
|
|
14
14
|
</style>
|
|
15
15
|
<div class="chart__outer" part="outer">
|