@itcenteratunihelsinki/huds-lib 0.5.43 → 0.5.46
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/dist/cjs/color-box_8.cjs.entry.js +210 -0
- package/dist/cjs/{globalScript-0c66cb96.js → globalScript-6b592153.js} +1 -1
- package/dist/cjs/huds-lib.cjs.js +4 -4
- package/dist/cjs/hy-accordion-container_91.cjs.entry.js +8147 -0
- package/dist/cjs/{index-dd5e5023.js → index-dfc917d9.js} +80 -64
- package/dist/cjs/loader.cjs.js +4 -4
- package/dist/collection/collection-manifest.json +97 -12
- package/dist/collection/components/button/button.js +7 -2
- package/dist/collection/components/heading/heading.js +4 -4
- package/dist/collection/components/hy-opening-hours/hy-opening-hours.css +8 -0
- package/dist/collection/components/hy-opening-hours/hy-opening-hours.js +24 -3
- package/dist/collection/components/hy-opening-hours-content/hy-opening-hours-content.css +9 -1
- package/dist/collection/components/hy-opening-hours-content/hy-opening-hours-content.js +4 -2
- package/dist/collection/components/hy-search-field/hy-search-field.js +55 -5
- package/dist/collection/components/navigation/menu/menu.js +46 -34
- package/dist/collection/components/navigation/menu-sidebar/menu-sidebar.js +14 -6
- package/dist/collection/components/person-profile/person-profile.js +8 -1
- package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.js +27 -19
- package/dist/collection/components/site-header/site-header.js +44 -6
- package/dist/collection/components/site-header/site-search/site-search.js +93 -22
- package/dist/esm/color-box_8.entry.js +199 -0
- package/dist/esm/{globalScript-92c6b812.js → globalScript-9d045b36.js} +1 -1
- package/dist/esm/huds-lib.js +4 -4
- package/dist/esm/hy-accordion-container_91.entry.js +8053 -0
- package/dist/esm/{index-083c8c8a.js → index-daaf0985.js} +80 -64
- package/dist/esm/loader.js +4 -4
- package/dist/esm/{utils-708bbefe.js → utils-966ffdb5.js} +1 -1
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/{p-fd1edbd5.js → p-04dcccdc.js} +1 -1
- package/dist/huds-lib/p-77f7df4b.entry.js +86 -0
- package/dist/huds-lib/{p-8ab550d6.js → p-cd2316f0.js} +1 -1
- package/dist/huds-lib/p-d3ced29c.entry.js +1 -0
- package/dist/huds-lib/{p-bb24c6b5.js → p-f8697bf9.js} +1 -1
- package/dist/types/components/button/button.d.ts +1 -1
- package/dist/types/components/hy-opening-hours/hy-opening-hours.d.ts +1 -0
- package/dist/types/components/hy-search-field/hy-search-field.d.ts +2 -0
- package/dist/types/components/navigation/menu/menu.d.ts +1 -0
- package/dist/types/components/person-profile/person-profile.d.ts +1 -0
- package/dist/types/components/site-header/site-header.d.ts +1 -0
- package/dist/types/components/site-header/site-search/site-search.d.ts +3 -0
- package/dist/types/components.d.ts +15 -1
- package/dist/types/stencil-public-runtime.d.ts +7 -4
- package/loader/index.d.ts +13 -4
- package/loader/{index.es2017.mjs → index.es2017.js} +1 -2
- package/loader/index.js +13 -0
- package/loader/package.json +5 -7
- package/package.json +2 -2
- package/dist/cjs/color-box.cjs.entry.js +0 -19
- package/dist/cjs/emotion.esm-563b6504.js +0 -1397
- package/dist/cjs/hy-accordion-container_5.cjs.entry.js +0 -578
- package/dist/cjs/hy-adjacent-image-text.cjs.entry.js +0 -51
- package/dist/cjs/hy-anchor-link-list.cjs.entry.js +0 -45
- package/dist/cjs/hy-badge.cjs.entry.js +0 -21
- package/dist/cjs/hy-banner.cjs.entry.js +0 -45
- package/dist/cjs/hy-baseline.cjs.entry.js +0 -32
- package/dist/cjs/hy-box-container.cjs.entry.js +0 -33
- package/dist/cjs/hy-box.cjs.entry.js +0 -165
- package/dist/cjs/hy-breadcrumbs.cjs.entry.js +0 -231
- package/dist/cjs/hy-button.cjs.entry.js +0 -100
- package/dist/cjs/hy-checkbox.cjs.entry.js +0 -33
- package/dist/cjs/hy-collaboration.cjs.entry.js +0 -19
- package/dist/cjs/hy-content-list-item.cjs.entry.js +0 -70
- package/dist/cjs/hy-content-list.cjs.entry.js +0 -112
- package/dist/cjs/hy-crisis-banner.cjs.entry.js +0 -19
- package/dist/cjs/hy-cta-button.cjs.entry.js +0 -30
- package/dist/cjs/hy-cta-link.cjs.entry.js +0 -26
- package/dist/cjs/hy-desktop-menu-links.cjs.entry.js +0 -328
- package/dist/cjs/hy-docs-container.cjs.entry.js +0 -19
- package/dist/cjs/hy-dropdown-panel_2.cjs.entry.js +0 -27
- package/dist/cjs/hy-dropdown.cjs.entry.js +0 -113
- package/dist/cjs/hy-filter-group-item.cjs.entry.js +0 -17
- package/dist/cjs/hy-filter-group.cjs.entry.js +0 -37
- package/dist/cjs/hy-filter-list-type.cjs.entry.js +0 -28
- package/dist/cjs/hy-filter-visibility-tool-reset_2.cjs.entry.js +0 -26
- package/dist/cjs/hy-filter-visibility-tool.cjs.entry.js +0 -24
- package/dist/cjs/hy-footer_5.cjs.entry.js +0 -201
- package/dist/cjs/hy-general-list_2.cjs.entry.js +0 -94
- package/dist/cjs/hy-grid-container.cjs.entry.js +0 -20
- package/dist/cjs/hy-grid-item.cjs.entry.js +0 -31
- package/dist/cjs/hy-grid-row.cjs.entry.js +0 -20
- package/dist/cjs/hy-heading.cjs.entry.js +0 -67
- package/dist/cjs/hy-hero.cjs.entry.js +0 -101
- package/dist/cjs/hy-icon.cjs.entry.js +0 -364
- package/dist/cjs/hy-image.cjs.entry.js +0 -50
- package/dist/cjs/hy-ingress.cjs.entry.js +0 -30
- package/dist/cjs/hy-introduction.cjs.entry.js +0 -55
- package/dist/cjs/hy-key-figure-group.cjs.entry.js +0 -77
- package/dist/cjs/hy-key-figure.cjs.entry.js +0 -22
- package/dist/cjs/hy-key-highlight-group.cjs.entry.js +0 -44
- package/dist/cjs/hy-key-highlight.cjs.entry.js +0 -22
- package/dist/cjs/hy-large-process-flow-phase.cjs.entry.js +0 -37
- package/dist/cjs/hy-large-process-flow.cjs.entry.js +0 -44
- package/dist/cjs/hy-link-box-list.cjs.entry.js +0 -54
- package/dist/cjs/hy-link-box.cjs.entry.js +0 -79
- package/dist/cjs/hy-link-list.cjs.entry.js +0 -44
- package/dist/cjs/hy-link.cjs.entry.js +0 -25
- package/dist/cjs/hy-list-item.cjs.entry.js +0 -239
- package/dist/cjs/hy-logo-grid-item.cjs.entry.js +0 -30
- package/dist/cjs/hy-logo-grid.cjs.entry.js +0 -20
- package/dist/cjs/hy-main-content-wrapper.cjs.entry.js +0 -20
- package/dist/cjs/hy-main.cjs.entry.js +0 -25
- package/dist/cjs/hy-menu-item-sidebar.cjs.entry.js +0 -159
- package/dist/cjs/hy-menu-item.cjs.entry.js +0 -147
- package/dist/cjs/hy-menu-language-item.cjs.entry.js +0 -25
- package/dist/cjs/hy-menu-language.cjs.entry.js +0 -91
- package/dist/cjs/hy-menu-level-container.cjs.entry.js +0 -137
- package/dist/cjs/hy-menu-main-group.cjs.entry.js +0 -151
- package/dist/cjs/hy-menu-mobile-breadcrumb.cjs.entry.js +0 -25
- package/dist/cjs/hy-menu-sidebar.cjs.entry.js +0 -290
- package/dist/cjs/hy-menu.cjs.entry.js +0 -111
- package/dist/cjs/hy-mobile-menu-shortcuts.cjs.entry.js +0 -26
- package/dist/cjs/hy-opening-hours-content.cjs.entry.js +0 -41
- package/dist/cjs/hy-opening-hours.cjs.entry.js +0 -32
- package/dist/cjs/hy-pager-item.cjs.entry.js +0 -45
- package/dist/cjs/hy-pager.cjs.entry.js +0 -20
- package/dist/cjs/hy-paragraph-text.cjs.entry.js +0 -45
- package/dist/cjs/hy-person-card.cjs.entry.js +0 -84
- package/dist/cjs/hy-person-profile.cjs.entry.js +0 -61
- package/dist/cjs/hy-process-flow-box.cjs.entry.js +0 -28
- package/dist/cjs/hy-process.cjs.entry.js +0 -57
- package/dist/cjs/hy-prominent-image.cjs.entry.js +0 -36
- package/dist/cjs/hy-quote.cjs.entry.js +0 -30
- package/dist/cjs/hy-row.cjs.entry.js +0 -42
- package/dist/cjs/hy-search-field.cjs.entry.js +0 -40
- package/dist/cjs/hy-section-container.cjs.entry.js +0 -19
- package/dist/cjs/hy-shortcuts.cjs.entry.js +0 -60
- package/dist/cjs/hy-site-header_3.cjs.entry.js +0 -418
- package/dist/cjs/hy-table-container.cjs.entry.js +0 -20
- package/dist/cjs/hy-tag.cjs.entry.js +0 -20
- package/dist/cjs/hy-tiny-text.cjs.entry.js +0 -20
- package/dist/cjs/hy-twitter-feed.cjs.entry.js +0 -27
- package/dist/cjs/hy-two-columns.cjs.entry.js +0 -21
- package/dist/cjs/hy-user-login-form.cjs.entry.js +0 -23
- package/dist/cjs/hy-video.cjs.entry.js +0 -67
- package/dist/cjs/index-314ad166.js +0 -967
- package/dist/esm/color-box.entry.js +0 -15
- package/dist/esm/emotion.esm-87895ee1.js +0 -1395
- package/dist/esm/hy-accordion-container_5.entry.js +0 -570
- package/dist/esm/hy-adjacent-image-text.entry.js +0 -47
- package/dist/esm/hy-anchor-link-list.entry.js +0 -41
- package/dist/esm/hy-badge.entry.js +0 -17
- package/dist/esm/hy-banner.entry.js +0 -41
- package/dist/esm/hy-baseline.entry.js +0 -28
- package/dist/esm/hy-box-container.entry.js +0 -29
- package/dist/esm/hy-box.entry.js +0 -161
- package/dist/esm/hy-breadcrumbs.entry.js +0 -227
- package/dist/esm/hy-button.entry.js +0 -96
- package/dist/esm/hy-checkbox.entry.js +0 -29
- package/dist/esm/hy-collaboration.entry.js +0 -15
- package/dist/esm/hy-content-list-item.entry.js +0 -66
- package/dist/esm/hy-content-list.entry.js +0 -108
- package/dist/esm/hy-crisis-banner.entry.js +0 -15
- package/dist/esm/hy-cta-button.entry.js +0 -26
- package/dist/esm/hy-cta-link.entry.js +0 -22
- package/dist/esm/hy-desktop-menu-links.entry.js +0 -324
- package/dist/esm/hy-docs-container.entry.js +0 -15
- package/dist/esm/hy-dropdown-panel_2.entry.js +0 -22
- package/dist/esm/hy-dropdown.entry.js +0 -109
- package/dist/esm/hy-filter-group-item.entry.js +0 -13
- package/dist/esm/hy-filter-group.entry.js +0 -33
- package/dist/esm/hy-filter-list-type.entry.js +0 -24
- package/dist/esm/hy-filter-visibility-tool-reset_2.entry.js +0 -21
- package/dist/esm/hy-filter-visibility-tool.entry.js +0 -20
- package/dist/esm/hy-footer_5.entry.js +0 -193
- package/dist/esm/hy-general-list_2.entry.js +0 -89
- package/dist/esm/hy-grid-container.entry.js +0 -16
- package/dist/esm/hy-grid-item.entry.js +0 -27
- package/dist/esm/hy-grid-row.entry.js +0 -16
- package/dist/esm/hy-heading.entry.js +0 -63
- package/dist/esm/hy-hero.entry.js +0 -97
- package/dist/esm/hy-icon.entry.js +0 -360
- package/dist/esm/hy-image.entry.js +0 -46
- package/dist/esm/hy-ingress.entry.js +0 -26
- package/dist/esm/hy-introduction.entry.js +0 -51
- package/dist/esm/hy-key-figure-group.entry.js +0 -73
- package/dist/esm/hy-key-figure.entry.js +0 -18
- package/dist/esm/hy-key-highlight-group.entry.js +0 -40
- package/dist/esm/hy-key-highlight.entry.js +0 -18
- package/dist/esm/hy-large-process-flow-phase.entry.js +0 -33
- package/dist/esm/hy-large-process-flow.entry.js +0 -40
- package/dist/esm/hy-link-box-list.entry.js +0 -50
- package/dist/esm/hy-link-box.entry.js +0 -75
- package/dist/esm/hy-link-list.entry.js +0 -40
- package/dist/esm/hy-link.entry.js +0 -21
- package/dist/esm/hy-list-item.entry.js +0 -235
- package/dist/esm/hy-logo-grid-item.entry.js +0 -26
- package/dist/esm/hy-logo-grid.entry.js +0 -16
- package/dist/esm/hy-main-content-wrapper.entry.js +0 -16
- package/dist/esm/hy-main.entry.js +0 -21
- package/dist/esm/hy-menu-item-sidebar.entry.js +0 -155
- package/dist/esm/hy-menu-item.entry.js +0 -143
- package/dist/esm/hy-menu-language-item.entry.js +0 -21
- package/dist/esm/hy-menu-language.entry.js +0 -87
- package/dist/esm/hy-menu-level-container.entry.js +0 -133
- package/dist/esm/hy-menu-main-group.entry.js +0 -147
- package/dist/esm/hy-menu-mobile-breadcrumb.entry.js +0 -21
- package/dist/esm/hy-menu-sidebar.entry.js +0 -286
- package/dist/esm/hy-menu.entry.js +0 -107
- package/dist/esm/hy-mobile-menu-shortcuts.entry.js +0 -22
- package/dist/esm/hy-opening-hours-content.entry.js +0 -37
- package/dist/esm/hy-opening-hours.entry.js +0 -28
- package/dist/esm/hy-pager-item.entry.js +0 -41
- package/dist/esm/hy-pager.entry.js +0 -16
- package/dist/esm/hy-paragraph-text.entry.js +0 -41
- package/dist/esm/hy-person-card.entry.js +0 -80
- package/dist/esm/hy-person-profile.entry.js +0 -57
- package/dist/esm/hy-process-flow-box.entry.js +0 -24
- package/dist/esm/hy-process.entry.js +0 -53
- package/dist/esm/hy-prominent-image.entry.js +0 -32
- package/dist/esm/hy-quote.entry.js +0 -26
- package/dist/esm/hy-row.entry.js +0 -38
- package/dist/esm/hy-search-field.entry.js +0 -36
- package/dist/esm/hy-section-container.entry.js +0 -15
- package/dist/esm/hy-shortcuts.entry.js +0 -56
- package/dist/esm/hy-site-header_3.entry.js +0 -412
- package/dist/esm/hy-table-container.entry.js +0 -16
- package/dist/esm/hy-tag.entry.js +0 -16
- package/dist/esm/hy-tiny-text.entry.js +0 -16
- package/dist/esm/hy-twitter-feed.entry.js +0 -23
- package/dist/esm/hy-two-columns.entry.js +0 -17
- package/dist/esm/hy-user-login-form.entry.js +0 -19
- package/dist/esm/hy-video.entry.js +0 -63
- package/dist/esm/index-41a1e449.js +0 -965
- package/dist/huds-lib/p-003597de.entry.js +0 -1
- package/dist/huds-lib/p-00a1f0c4.entry.js +0 -1
- package/dist/huds-lib/p-03ada2ef.entry.js +0 -1
- package/dist/huds-lib/p-045ec3b7.entry.js +0 -6
- package/dist/huds-lib/p-065ae4a9.entry.js +0 -1
- package/dist/huds-lib/p-095afc4e.entry.js +0 -1
- package/dist/huds-lib/p-0a37696c.entry.js +0 -1
- package/dist/huds-lib/p-0b2e3057.entry.js +0 -1
- package/dist/huds-lib/p-0ba24d1d.entry.js +0 -1
- package/dist/huds-lib/p-0d751fcd.entry.js +0 -1
- package/dist/huds-lib/p-0f9c4661.entry.js +0 -8
- package/dist/huds-lib/p-114f1281.entry.js +0 -1
- package/dist/huds-lib/p-14a7e308.entry.js +0 -1
- package/dist/huds-lib/p-179221b4.entry.js +0 -1
- package/dist/huds-lib/p-1ed13a8e.entry.js +0 -1
- package/dist/huds-lib/p-1f5cb6ed.entry.js +0 -1
- package/dist/huds-lib/p-24c25896.entry.js +0 -1
- package/dist/huds-lib/p-27a613af.entry.js +0 -1
- package/dist/huds-lib/p-29a5f847.entry.js +0 -1
- package/dist/huds-lib/p-2c83cfcf.entry.js +0 -1
- package/dist/huds-lib/p-309dde97.entry.js +0 -1
- package/dist/huds-lib/p-31d9c326.entry.js +0 -1
- package/dist/huds-lib/p-349817f6.entry.js +0 -1
- package/dist/huds-lib/p-3641da70.entry.js +0 -1
- package/dist/huds-lib/p-3bf480d9.entry.js +0 -1
- package/dist/huds-lib/p-3d35d226.entry.js +0 -1
- package/dist/huds-lib/p-3f050660.entry.js +0 -1
- package/dist/huds-lib/p-40ab2704.entry.js +0 -6
- package/dist/huds-lib/p-4252e76e.entry.js +0 -1
- package/dist/huds-lib/p-47d919f5.entry.js +0 -1
- package/dist/huds-lib/p-488053bf.entry.js +0 -1
- package/dist/huds-lib/p-497703c3.entry.js +0 -1
- package/dist/huds-lib/p-4c59a5f1.entry.js +0 -1
- package/dist/huds-lib/p-4d4869f9.entry.js +0 -1
- package/dist/huds-lib/p-518b6042.entry.js +0 -1
- package/dist/huds-lib/p-51dd0bf2.entry.js +0 -1
- package/dist/huds-lib/p-521557a1.entry.js +0 -1
- package/dist/huds-lib/p-570b0c50.entry.js +0 -1
- package/dist/huds-lib/p-604e4a62.entry.js +0 -1
- package/dist/huds-lib/p-608090da.entry.js +0 -1
- package/dist/huds-lib/p-67b6fddc.entry.js +0 -1
- package/dist/huds-lib/p-69559eff.entry.js +0 -1
- package/dist/huds-lib/p-69849560.entry.js +0 -1
- package/dist/huds-lib/p-6c54b7bc.entry.js +0 -1
- package/dist/huds-lib/p-6c56dcbb.entry.js +0 -1
- package/dist/huds-lib/p-7225fde6.entry.js +0 -1
- package/dist/huds-lib/p-734da8db.entry.js +0 -1
- package/dist/huds-lib/p-75f84185.entry.js +0 -1
- package/dist/huds-lib/p-795c4838.entry.js +0 -1
- package/dist/huds-lib/p-7ca87180.entry.js +0 -1
- package/dist/huds-lib/p-7dd26e2a.entry.js +0 -1
- package/dist/huds-lib/p-830cfabf.entry.js +0 -69
- package/dist/huds-lib/p-8a7b55ed.entry.js +0 -1
- package/dist/huds-lib/p-8f314f7f.entry.js +0 -1
- package/dist/huds-lib/p-90a2d5bd.entry.js +0 -1
- package/dist/huds-lib/p-98487b2c.entry.js +0 -1
- package/dist/huds-lib/p-9a45dd9a.entry.js +0 -1
- package/dist/huds-lib/p-9b5113e0.entry.js +0 -1
- package/dist/huds-lib/p-a0a1ead3.entry.js +0 -1
- package/dist/huds-lib/p-a4745be5.entry.js +0 -1
- package/dist/huds-lib/p-a54ddb3e.entry.js +0 -1
- package/dist/huds-lib/p-a7922d26.entry.js +0 -1
- package/dist/huds-lib/p-a82d4779.js +0 -1
- package/dist/huds-lib/p-aca0eb7d.entry.js +0 -1
- package/dist/huds-lib/p-afe191fd.entry.js +0 -1
- package/dist/huds-lib/p-b7268181.entry.js +0 -1
- package/dist/huds-lib/p-baada6d9.entry.js +0 -1
- package/dist/huds-lib/p-bd31e4b5.entry.js +0 -1
- package/dist/huds-lib/p-bd56a257.entry.js +0 -1
- package/dist/huds-lib/p-c2b771ef.entry.js +0 -1
- package/dist/huds-lib/p-c87b7917.entry.js +0 -1
- package/dist/huds-lib/p-ca66cf04.js +0 -1
- package/dist/huds-lib/p-cc3a6a5b.entry.js +0 -1
- package/dist/huds-lib/p-d56f5a7a.entry.js +0 -1
- package/dist/huds-lib/p-d5a6bba6.entry.js +0 -1
- package/dist/huds-lib/p-db4dc333.entry.js +0 -1
- package/dist/huds-lib/p-dc6a653f.entry.js +0 -1
- package/dist/huds-lib/p-dd2d9165.entry.js +0 -1
- package/dist/huds-lib/p-de9a3ec8.entry.js +0 -1
- package/dist/huds-lib/p-e24fb999.entry.js +0 -1
- package/dist/huds-lib/p-e430c2a0.entry.js +0 -1
- package/dist/huds-lib/p-e7abd29a.entry.js +0 -1
- package/dist/huds-lib/p-e834c239.entry.js +0 -1
- package/dist/huds-lib/p-efc359e3.entry.js +0 -1
- package/dist/huds-lib/p-f0d518a5.entry.js +0 -1
- package/dist/huds-lib/p-fbf11f85.entry.js +0 -1
- package/dist/huds-lib/p-fcf2d27d.entry.js +0 -1
- package/dist/huds-lib/p-ff62346a.entry.js +0 -1
- package/dist/loader/cdn.js +0 -3
- package/dist/loader/index.cjs.js +0 -3
- package/dist/loader/index.d.ts +0 -13
- package/dist/loader/index.es2017.js +0 -3
- package/dist/loader/index.js +0 -4
- package/dist/loader/package.json +0 -10
- package/loader/index.mjs +0 -22
- package/loader/node-main.js +0 -3
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const globalScript = require('./globalScript-0c66cb96.js');
|
|
7
|
-
|
|
8
|
-
const hyAnchorLinkListCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}:host(.hy-anchor-link-list){border:1px solid var(--brand-main);width:100%}@media (min-width: 30rem){:host(.hy-anchor-link-list){margin-bottom:1.75rem}}@media (min-width: 48rem){:host(.hy-anchor-link-list){margin-bottom:1.75rem}}@media (min-width: 60rem){:host(.hy-anchor-link-list){margin-bottom:2rem}}@media (min-width: 1601px){:host(.hy-anchor-link-list){margin-bottom:2.5rem}}:host(.hy-anchor-link-list).is-open{border:1px solid var(--grayscale-dark)}.hy-anchor-link-list__button{border:none;background:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px 20px;width:100%}@media (min-width: 48rem){.hy-anchor-link-list__button{padding:18px 20px}}.hy-anchor-link-list__button:hover{cursor:pointer}.hy-anchor-link-list__button.is-open .label-close-icon svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-anchor-link-list__button--title{font-size:1.0625rem;line-height:20px;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);font-family:var(--main-font-family);letter-spacing:-0.32px}.hy-anchor-link-list__button--title svg{margin-right:12px}.hy-anchor-link-list__button--label{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);letter-spacing:-0.3px;text-align:right}.hy-anchor-link-list__button--label svg{margin-left:7px}.hy-anchor-link-list__container{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:18px 0;margin:0 20px}.hy-anchor-link-list__container.is-open{display:-webkit-box;display:-ms-flexbox;display:flex;border-top:1px solid var(--grayscale-dark)}.hy-anchor-link-list__item{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.5px;line-height:20px;margin-bottom:16px;text-decoration:none}.hy-anchor-link-list__item:hover{cursor:pointer;text-decoration:underline}.hy-anchor-link-list__item svg{margin-right:12px}";
|
|
9
|
-
|
|
10
|
-
const HyAnchorLinkList = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.isOpen = false;
|
|
14
|
-
}
|
|
15
|
-
async componentWillLoad() {
|
|
16
|
-
this._anchorItems = await globalScript.jsonParserWorker(this.anchorItems);
|
|
17
|
-
}
|
|
18
|
-
handleLinkClick(e) {
|
|
19
|
-
const targetId = e.target.getAttribute('href');
|
|
20
|
-
if (targetId) {
|
|
21
|
-
const targetElement = document.getElementById(targetId.substring(1));
|
|
22
|
-
const targetRect = targetElement.getBoundingClientRect();
|
|
23
|
-
window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: 'smooth' });
|
|
24
|
-
}
|
|
25
|
-
e.preventDefault();
|
|
26
|
-
e.stopPropagation();
|
|
27
|
-
}
|
|
28
|
-
render() {
|
|
29
|
-
const classAttributes = ['hy-anchor-link-list'].join(' ');
|
|
30
|
-
const buttonClasses = {
|
|
31
|
-
'hy-anchor-link-list__button': true,
|
|
32
|
-
'is-open': this.isOpen,
|
|
33
|
-
};
|
|
34
|
-
const containerClasses = {
|
|
35
|
-
'hy-anchor-link-list__container': true,
|
|
36
|
-
'is-open': this.isOpen,
|
|
37
|
-
};
|
|
38
|
-
const items = this._anchorItems;
|
|
39
|
-
return (index.h(index.Host, { class: classAttributes }, index.h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, index.h("span", { class: "hy-anchor-link-list__button--title" }, index.h("hy-icon", { icon: 'hy-icon-bullet-list', size: 18, fill: 'var(--brand-main)' }), this.listTitle), index.h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, index.h("hy-icon", { class: "label-close-icon", icon: 'hy-icon-caret-down', size: 16, fill: 'var(--brand-main)' }))), index.h("div", { "aria-hidden": this.isOpen ? 'false' : 'true', class: containerClasses }, items &&
|
|
40
|
-
items.map((item) => (index.h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, index.h("hy-icon", { icon: 'hy-icon-arrow-down', size: 12, fill: 'var(--brand-main)' }), item.title))))));
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
HyAnchorLinkList.style = hyAnchorLinkListCss;
|
|
44
|
-
|
|
45
|
-
exports.hy_anchor_link_list = HyAnchorLinkList;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
|
|
7
|
-
const hyBadgeCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}span.hy-badge{border-radius:15px;padding:0.25rem 1rem;text-align:center;color:black;font-weight:bold;font-family:var(--main-font-family);font-size:0.6rem}span.hy-badge.primary{background-color:var(--brand-main-light);color:white}span.hy-badge.warn{background-color:var(--additional-red-dark);color:white}span.hy-badge.success{background-color:var(--additional-green-dark);color:white}span.hy-badge.disabled{background-color:var(--grayscale-medium-dark);color:black}";
|
|
8
|
-
|
|
9
|
-
const HyBadge = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.variant = 'primary';
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
const classAttributes = ['hy-badge', this.variant];
|
|
16
|
-
return (index.h(index.Host, null, index.h("span", { class: classAttributes.join(' ') }, index.h("slot", null))));
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
HyBadge.style = hyBadgeCss;
|
|
20
|
-
|
|
21
|
-
exports.hy_badge = HyBadge;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const utils = require('./utils-eeb7b089.js');
|
|
7
|
-
|
|
8
|
-
const hyBannerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-banner{background-color:var(--brand-main-light);padding:28px 0 24px 0}@media (min-width: 30rem){.hy-banner{padding:40px 0 32px 0}}@media (min-width: 60rem){.hy-banner{padding:48px 0 40px 0;margin-left:8px;margin-right:8px}}@media (min-width: 75.0625rem){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 1601px){.hy-banner{padding:64px 32px 48px 32px;margin-left:-20px;margin-right:-20px}}@media (min-width: 1664px){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 75.0625rem){.hy-banner__large{padding:64px 0 48px 0;margin-left:-20px;margin-right:-20px}}@media (min-width: 1344px){.hy-banner__large{margin-left:0;margin-right:0}}@media (min-width: 60rem){.hy-banner__info-container{margin-left:-8px;margin-right:-8px}}@media (min-width: 1601px){.hy-banner__info-container{margin-left:0;margin-right:0}}.hy-banner__info-container__title{font-size:1.5rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.8px;margin-bottom:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 1601px){.hy-banner__info-container__title{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title__large{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__title__large{font-size:2.5rem;line-height:40px;letter-spacing:-1.33px;margin-bottom:32px}}.hy-banner__info-container__description{color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:500;font-size:14px;letter-spacing:-0.7px;line-height:20px;margin-bottom:24px}@media (min-width: 30rem){.hy-banner__info-container__description{font-size:1rem;line-height:24px;letter-spacing:-0.08px;margin-bottom:28px;max-width:92%}}@media (min-width: 60rem){.hy-banner__info-container__description{margin-bottom:32px}}@media (min-width: 1601px){.hy-banner__info-container__description{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__description__large{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__description__large{margin-bottom:44px}}";
|
|
9
|
-
|
|
10
|
-
const HyBanner = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.textDescription = null;
|
|
14
|
-
this.headerstyle = 'common';
|
|
15
|
-
this.isExternal = false;
|
|
16
|
-
}
|
|
17
|
-
componentDidLoad() {
|
|
18
|
-
let hyMainDiv = this.el.closest('.hy-main');
|
|
19
|
-
if (hyMainDiv) {
|
|
20
|
-
if (!hyMainDiv.classList.contains('with-sidebar')) {
|
|
21
|
-
this.headerstyle = 'large';
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
const hyBannerClass = ['hy-banner', `hy-banner__${this.headerstyle}`, this.headerstyle].join(' ');
|
|
27
|
-
const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
|
|
28
|
-
const hyBannerTitle = [
|
|
29
|
-
'hy-banner__info-container__title',
|
|
30
|
-
`hy-banner__info-container__title__${this.headerstyle}`,
|
|
31
|
-
this.headerstyle,
|
|
32
|
-
].join(' ');
|
|
33
|
-
const hyBannerDescription = [
|
|
34
|
-
'hy-banner__info-container__description',
|
|
35
|
-
`hy-banner__info-container__description__${this.headerstyle}`,
|
|
36
|
-
this.headerstyle,
|
|
37
|
-
].join(' ');
|
|
38
|
-
const variant = utils.CtaLinkButtonVariants.onBlueBkgd;
|
|
39
|
-
return (index.h(index.Host, null, index.h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), index.h("div", { class: hyBannerClass }, index.h("hy-main-content-wrapper", null, index.h("div", { class: hyBannerWrapperClass }, index.h("div", { class: hyBannerTitle }, this.textTitle), index.h("div", { class: hyBannerDescription }, this.textDescription), this.url && (index.h("div", { class: "hy-banner__info-container__link" }, index.h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))), index.h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
|
|
40
|
-
}
|
|
41
|
-
get el() { return index.getElement(this); }
|
|
42
|
-
};
|
|
43
|
-
HyBanner.style = hyBannerCss;
|
|
44
|
-
|
|
45
|
-
exports.hy_banner = HyBanner;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const emotion_esm = require('./emotion.esm-563b6504.js');
|
|
7
|
-
|
|
8
|
-
const baselineCss = "div.hy-baseline{display:block}";
|
|
9
|
-
|
|
10
|
-
const createCss = (value) => {
|
|
11
|
-
return emotion_esm.css `
|
|
12
|
-
> * + * {
|
|
13
|
-
margin-top: ${value}rem;
|
|
14
|
-
display: block;
|
|
15
|
-
}
|
|
16
|
-
`;
|
|
17
|
-
};
|
|
18
|
-
const Baseline = class {
|
|
19
|
-
constructor(hostRef) {
|
|
20
|
-
index.registerInstance(this, hostRef);
|
|
21
|
-
/**
|
|
22
|
-
* Top margin to be added to all but first element. Amount of rem:s
|
|
23
|
-
*/
|
|
24
|
-
this.margin = 1;
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
return (index.h("div", { class: createCss(this.margin) }, index.h("slot", null)));
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
Baseline.style = baselineCss;
|
|
31
|
-
|
|
32
|
-
exports.hy_baseline = Baseline;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const emotion_esm = require('./emotion.esm-563b6504.js');
|
|
7
|
-
|
|
8
|
-
const hyBoxContainerCss = ":host{display:block}";
|
|
9
|
-
|
|
10
|
-
const HyBoxContainer = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
/**
|
|
14
|
-
* Should the items wrap to new rows.
|
|
15
|
-
*/
|
|
16
|
-
this.wrap = true;
|
|
17
|
-
/**
|
|
18
|
-
* Should the container have a max width of 90rems
|
|
19
|
-
*/
|
|
20
|
-
this.maxWidth = true;
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
return (index.h(index.Host, { style: { width: '100%', display: 'flex', flex: '1', justifyContent: 'center' } }, index.h("div", { class: emotion_esm.css `
|
|
24
|
-
display: flex;
|
|
25
|
-
width: 100%;
|
|
26
|
-
flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};
|
|
27
|
-
max-width: ${this.maxWidth ? '90rem' : '100%'};
|
|
28
|
-
` }, index.h("slot", null))));
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
HyBoxContainer.style = hyBoxContainerCss;
|
|
32
|
-
|
|
33
|
-
exports.hy_box_container = HyBoxContainer;
|
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const emotion_esm = require('./emotion.esm-563b6504.js');
|
|
7
|
-
|
|
8
|
-
const hyBoxCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}";
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
Example of using hy-box:
|
|
12
|
-
<hy-box mb="1.75, 1.75, 2, 2.5" />
|
|
13
|
-
Where mb = margin-bottom,
|
|
14
|
-
mobile up to 30rem: 1.75rem (mb[0])
|
|
15
|
-
tablet, 30rem - 60rem: 1.75rem (mb[1])
|
|
16
|
-
wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
|
|
17
|
-
xlarge, > 100.0625: 2.5rem (mb[3])
|
|
18
|
-
* */
|
|
19
|
-
const toRemValue = (val) => {
|
|
20
|
-
return typeof val === 'number' ? `${val}rem` : undefined;
|
|
21
|
-
};
|
|
22
|
-
const breakpoints = ['30rem', '60rem', '75.0625rem', '100.0625rem'];
|
|
23
|
-
/*
|
|
24
|
-
Default - mobile
|
|
25
|
-
mq[0] - tablet
|
|
26
|
-
mq[1] - wide, >960px
|
|
27
|
-
mq[2] - extrawide, > 1200px
|
|
28
|
-
mq[3] - xlarge, >1600px
|
|
29
|
-
* */
|
|
30
|
-
const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
|
|
31
|
-
const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align }) => {
|
|
32
|
-
const last = width[width.length - 1];
|
|
33
|
-
return emotion_esm.css `
|
|
34
|
-
padding-top: ${toRemValue(pt[0])};
|
|
35
|
-
padding-right: ${toRemValue(pr[0])};
|
|
36
|
-
padding-bottom: ${toRemValue(pb[0])};
|
|
37
|
-
padding-left: ${toRemValue(pl[0])};
|
|
38
|
-
margin-top: ${toRemValue(mt[0])};
|
|
39
|
-
margin-right: ${toRemValue(mr[0])};
|
|
40
|
-
margin-bottom: ${toRemValue(mb[0])};
|
|
41
|
-
margin-left: ${toRemValue(ml[0])};
|
|
42
|
-
height: ${toRemValue(h)};
|
|
43
|
-
background-color: ${!!bg ? `var(--${bg})` : 'transparent'};
|
|
44
|
-
width: ${width[0]};
|
|
45
|
-
display: flex;
|
|
46
|
-
justify-content: ${justify || 'flex-start'};
|
|
47
|
-
align-items: ${align || 'flex-start'};
|
|
48
|
-
|
|
49
|
-
${mq[0]} {
|
|
50
|
-
width: ${width[1]};
|
|
51
|
-
|
|
52
|
-
padding-top: ${toRemValue(pt[1])};
|
|
53
|
-
padding-right: ${toRemValue(pr[1])};
|
|
54
|
-
padding-bottom: ${toRemValue(pb[1])};
|
|
55
|
-
padding-left: ${toRemValue(pl[1])};
|
|
56
|
-
|
|
57
|
-
margin-top: ${toRemValue(mt[1])};
|
|
58
|
-
margin-right: ${toRemValue(mr[1])};
|
|
59
|
-
margin-bottom: ${toRemValue(mb[1])};
|
|
60
|
-
margin-left: ${toRemValue(ml[1])};
|
|
61
|
-
}
|
|
62
|
-
${mq[1]} {
|
|
63
|
-
width: ${width[2] || last};
|
|
64
|
-
|
|
65
|
-
padding-top: ${toRemValue(pt[2])};
|
|
66
|
-
padding-right: ${toRemValue(pr[2])};
|
|
67
|
-
padding-bottom: ${toRemValue(pb[2])};
|
|
68
|
-
padding-left: ${toRemValue(pl[2])};
|
|
69
|
-
|
|
70
|
-
margin-top: ${toRemValue(mt[2])};
|
|
71
|
-
margin-right: ${toRemValue(mr[2])};
|
|
72
|
-
margin-bottom: ${toRemValue(mb[2])};
|
|
73
|
-
margin-left: ${toRemValue(ml[2])};
|
|
74
|
-
}
|
|
75
|
-
${mq[2]} {
|
|
76
|
-
width: ${width[3] || last};
|
|
77
|
-
|
|
78
|
-
padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};
|
|
79
|
-
padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};
|
|
80
|
-
padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};
|
|
81
|
-
padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};
|
|
82
|
-
|
|
83
|
-
margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};
|
|
84
|
-
margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};
|
|
85
|
-
margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};
|
|
86
|
-
margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};
|
|
87
|
-
}
|
|
88
|
-
${mq[3]} {
|
|
89
|
-
width: ${width[4] || last};
|
|
90
|
-
|
|
91
|
-
padding-top: ${toRemValue(pt[3])};
|
|
92
|
-
padding-right: ${toRemValue(pr[3])};
|
|
93
|
-
padding-bottom: ${toRemValue(pb[3])};
|
|
94
|
-
padding-left: ${toRemValue(pl[3])};
|
|
95
|
-
|
|
96
|
-
margin-top: ${toRemValue(mt[3])};
|
|
97
|
-
margin-right: ${toRemValue(mr[3])};
|
|
98
|
-
margin-bottom: ${toRemValue(mb[3])};
|
|
99
|
-
margin-left: ${toRemValue(ml[3])};
|
|
100
|
-
}
|
|
101
|
-
`;
|
|
102
|
-
};
|
|
103
|
-
const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(',').map((v) => `${v.trim()}`).map((v) => parseFloat(v));
|
|
104
|
-
const HyBox = class {
|
|
105
|
-
constructor(hostRef) {
|
|
106
|
-
index.registerInstance(this, hostRef);
|
|
107
|
-
this.headerstyle = 'common';
|
|
108
|
-
/**
|
|
109
|
-
* Value for horisontal alignment (justify-content)
|
|
110
|
-
*/
|
|
111
|
-
this.justify = 'flex-start';
|
|
112
|
-
/**
|
|
113
|
-
* value for vertical alignment (align-items)
|
|
114
|
-
*/
|
|
115
|
-
this.align = 'baseline';
|
|
116
|
-
/**
|
|
117
|
-
* background color. Must use one of css variable names from color tokens
|
|
118
|
-
*/
|
|
119
|
-
this.bg = 'transparent';
|
|
120
|
-
/**
|
|
121
|
-
* Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.
|
|
122
|
-
*/
|
|
123
|
-
this.width = '100';
|
|
124
|
-
}
|
|
125
|
-
componentWillLoad() {
|
|
126
|
-
let hyMainDiv = this.el.closest('.hy-main');
|
|
127
|
-
if (hyMainDiv) {
|
|
128
|
-
if (!hyMainDiv.classList.contains('with-sidebar')) {
|
|
129
|
-
this.headerstyle = 'large';
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
render() {
|
|
134
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
135
|
-
const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
|
|
136
|
-
const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
|
|
137
|
-
const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
|
|
138
|
-
const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
|
|
139
|
-
const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
|
|
140
|
-
const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
|
|
141
|
-
const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
|
|
142
|
-
const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
|
|
143
|
-
const hasSidebar = this.headerstyle == 'common';
|
|
144
|
-
return (index.h(index.Host, { class: createCssClass({
|
|
145
|
-
hasSidebar,
|
|
146
|
-
pt,
|
|
147
|
-
pl,
|
|
148
|
-
pr,
|
|
149
|
-
pb,
|
|
150
|
-
mt,
|
|
151
|
-
ml,
|
|
152
|
-
mr,
|
|
153
|
-
mb,
|
|
154
|
-
h: this.h,
|
|
155
|
-
bg: this.bg,
|
|
156
|
-
width: this.width.split(',').map((v) => `${v.trim()}%`),
|
|
157
|
-
justify: this.justify,
|
|
158
|
-
align: this.align,
|
|
159
|
-
}) }, index.h("slot", null)));
|
|
160
|
-
}
|
|
161
|
-
get el() { return index.getElement(this); }
|
|
162
|
-
};
|
|
163
|
-
HyBox.style = hyBoxCss;
|
|
164
|
-
|
|
165
|
-
exports.hy_box = HyBox;
|
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-dd5e5023.js');
|
|
6
|
-
const utils = require('./utils-eeb7b089.js');
|
|
7
|
-
const globalScript = require('./globalScript-0c66cb96.js');
|
|
8
|
-
|
|
9
|
-
const hyBreadcrumbsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-breadcrumbs{display:inline-block;position:relative;width:auto}.hy-breadcrumbs.is-condensed{width:100%}.hy-breadcrumbs ol{margin:0;padding:0}.hy-breadcrumbs .breadcrumb-container{color:var(--grayscale-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:var(--main-font-family);list-style-type:none;margin:0;padding:20px 0 16px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-container{padding:24px 0 20px}}@media (min-width: 75.0625rem){.hy-breadcrumbs .breadcrumb-container{padding:32px 0 24px}}.hy-breadcrumbs .breadcrumb-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.hy-breadcrumbs .breadcrumb-item a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;height:44px;padding-left:6px;padding-right:6px;position:relative;text-decoration:none}.hy-breadcrumbs .breadcrumb-item a.default{font-size:0.875rem;line-height:18px;font-weight:600;letter-spacing:-0.5px}@media (min-width: 75.0625rem){.hy-breadcrumbs .breadcrumb-item a.default{font-size:1rem;line-height:20px}}.hy-breadcrumbs .breadcrumb-item:hover a{color:var(--brand-main);text-decoration:underline}.hy-breadcrumbs .breadcrumb-item:focus{outline:auto}.hy-breadcrumbs .breadcrumb-item.hidden{display:none}.hy-breadcrumbs .breadcrumb-item.home hy-icon.default{margin-bottom:4px}.hy-breadcrumbs .breadcrumb-item.home hy-icon.default svg{fill:var(--brand-main-light);stroke:var(--brand-main-light)}.hy-breadcrumbs .breadcrumb-item.home:hover svg{fill:var(--brand-main) !important;stroke:var(--brand-main) !important}.hy-breadcrumbs .breadcrumb-item.main{min-width:0}.hy-breadcrumbs .breadcrumb-item.main a{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .breadcrumb-item__more{display:none;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-breadcrumbs .breadcrumb-item__more.visible{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .breadcrumb-item__more .breadcrumb-item-caret:hover{cursor:default}.hy-breadcrumbs .breadcrumb-item-caret svg{fill:var(--grayscale-dark)}.hy-breadcrumbs .breadcrumb-item-dropdown-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;margin:0;padding-left:6px;padding-right:6px;cursor:pointer}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:3px;border:2px solid var(--brand-main-light);color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;height:20px;padding:0 6px;pointer-events:none}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content>span{position:relative;width:20px;height:10px}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content>span:after{background-color:var(--grayscale-black);border-radius:50%;-webkit-box-shadow:0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black), 6px 0 0 1px var(--grayscale-black);box-shadow:0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black), 6px 0 0 1px var(--grayscale-black);content:\"\";height:2px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:2px}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content hy-icon svg{fill:var(--brand-main-light);margin-left:3px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open .breadcrumb-item-dropdown-button__content{background-color:var(--brand-main-light);color:var(--grayscale-white)}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open .breadcrumb-item-dropdown-button__content>span:after{background-color:var(--grayscale-white);-webkit-box-shadow:0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white), 6px 0 0 1px var(--grayscale-white);box-shadow:0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white), 6px 0 0 1px var(--grayscale-white);width:2px}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open hy-icon svg{fill:var(--grayscale-white);-webkit-transform:rotate(270deg);transform:rotate(270deg)}.hy-breadcrumbs .breadcrumb-hidden-items{display:none;list-style:none;visibility:hidden}.hy-breadcrumbs .breadcrumb-hidden-items__is-open{background:var(--grayscale-white);-webkit-box-shadow:0 0 10px 0 rgba(14, 104, 139, 0.2);box-shadow:0 0 10px 0 rgba(14, 104, 139, 0.2);display:block;left:0;padding:16px 0 20px;position:absolute;right:0;top:calc(100% - 11px);visibility:visible;z-index:5}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-hidden-items__is-open{left:12px;right:auto}}.hy-breadcrumbs .breadcrumb-hidden-items__is-open a.default{display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;margin:0;width:100%;padding:0 16px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-hidden-items__is-open a.default{padding:0 64px 0 32px}}.hy-breadcrumbs .breadcrumb-item__current{-webkit-box-flex:0;-ms-flex:0 2 auto;flex:0 2 auto;min-width:0}.hy-breadcrumbs .breadcrumb-item__current:hover a{cursor:default;color:var(--grayscale-dark) !important;text-decoration:none !important}.hy-breadcrumbs .breadcrumb-item__current a{color:var(--grayscale-dark);font-family:var(--main-font-family);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;min-height:auto}.hy-breadcrumbs .intermediate{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .intermediate.hidden{display:none;visibility:hidden}.hy-breadcrumbs .breadcrumb-item.breadcrumb-item__current a{min-height:0}.hy-breadcrumbs #more,.hy-breadcrumbs .more{display:none;visibility:hidden}.hy-breadcrumbs #more.visible,.hy-breadcrumbs .more.visible{display:-webkit-box;display:-ms-flexbox;display:flex;visibility:visible}.hy-breadcrumbs.large.with-sidebar{display:block;visibility:visible}.hy-breadcrumbs.large.with-sidebar a.large{font-size:1.25rem;line-height:26px;color:var(--grayscale-black);font-weight:700;letter-spacing:-0.6px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar a.large{font-size:1.625rem;line-height:26px;letter-spacing:-0.8px;font-weight:700}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-item__divider{font-size:1.25rem;line-height:26px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-item__divider{font-size:1.625rem;line-height:26px}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-item-caret svg{fill:var(--grayscale-black)}.hy-breadcrumbs.large.with-sidebar .breadcrumb-container{color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:var(--main-font-family);list-style-type:none;margin:0;min-height:64px;overflow:hidden;padding:0}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-container{min-height:84px}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-container .breadcrumb-item.home svg{fill:var(--grayscale-black);height:18px;margin-bottom:4px;stroke:var(--grayscale-black);width:18px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-container .breadcrumb-item.home svg{height:24px;margin-bottom:2px;width:24px}}@media (min-width: 75.0625rem){.hy-breadcrumbs.large.with-sidebar{display:none;visibility:hidden}}";
|
|
10
|
-
|
|
11
|
-
let breadcrumbsWidth = null;
|
|
12
|
-
const HyBreadcrumbs = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
this.variant = utils.BreadcrumbVariants.default;
|
|
16
|
-
this.headerstyle = 'with-sidebar';
|
|
17
|
-
this.menuOpen = false;
|
|
18
|
-
}
|
|
19
|
-
async componentWillLoad() {
|
|
20
|
-
this._dataItems = await globalScript.jsonParserWorker(this.dataItems);
|
|
21
|
-
}
|
|
22
|
-
componentDidLoad() {
|
|
23
|
-
let hyMainDiv = this.el.closest('.hy-main');
|
|
24
|
-
if (hyMainDiv) {
|
|
25
|
-
if (!hyMainDiv.classList.contains('with-sidebar')) {
|
|
26
|
-
this.headerstyle = 'without-sidebar';
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
// Set breadcumbs width + paddings.
|
|
30
|
-
breadcrumbsWidth = this.el.offsetWidth + 64;
|
|
31
|
-
const layoutContentElement = document.getElementsByClassName('layout-content')[0];
|
|
32
|
-
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
|
|
33
|
-
if (layoutContentElement) {
|
|
34
|
-
if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
|
|
35
|
-
moreButton.setAttribute('aria-hidden', 'false');
|
|
36
|
-
this.adjustBreadcrumbsMenuVisibility();
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
adjustBreadcrumbsMenuVisibility(showMenu = true) {
|
|
41
|
-
// Show ... and Hide intermediate links
|
|
42
|
-
if (!showMenu) {
|
|
43
|
-
this.closeMoreMenu();
|
|
44
|
-
}
|
|
45
|
-
const crumbContainer = document.querySelectorAll('.hy-breadcrumbs')[0];
|
|
46
|
-
const moreDotsItem = document.querySelectorAll('#more')[0];
|
|
47
|
-
const moreDotsItemWrapper = document.querySelectorAll('.breadcrumb-item__more')[0];
|
|
48
|
-
if (moreDotsItem) {
|
|
49
|
-
if (showMenu) {
|
|
50
|
-
crumbContainer.classList.add('is-condensed');
|
|
51
|
-
moreDotsItem.classList.add('visible');
|
|
52
|
-
moreDotsItemWrapper.classList.add('visible');
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
crumbContainer.classList.remove('is-condensed');
|
|
56
|
-
moreDotsItem.classList.remove('visible');
|
|
57
|
-
moreDotsItemWrapper.classList.remove('visible');
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
const intermediateItems = document.querySelectorAll('.intermediate');
|
|
61
|
-
if (intermediateItems) {
|
|
62
|
-
for (let i = 0; i < intermediateItems.length; i++) {
|
|
63
|
-
if (showMenu) {
|
|
64
|
-
intermediateItems[i].classList.add('hidden');
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
intermediateItems[i].classList.remove('hidden');
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
HomeItem(url) {
|
|
73
|
-
const homeItemClass = ['hy-icon-wrapper', this.variant].join(' ');
|
|
74
|
-
return (index.h("li", { class: "breadcrumb-item home" }, index.h("a", { href: url, class: homeItemClass }, index.h("hy-icon", { icon: 'hy-icon-home', class: `${this.variant}`, size: 16 })), index.h("span", { class: "breadcrumb-item__divider" }, "/")));
|
|
75
|
-
}
|
|
76
|
-
BreadcrumbItem(label, url, className = '', withCaret = true) {
|
|
77
|
-
const breadcrumbClass = ['breadcrumb-item', className].join(' ');
|
|
78
|
-
if (url) {
|
|
79
|
-
if (withCaret) {
|
|
80
|
-
return (index.h("li", { class: breadcrumbClass }, index.h("a", { href: url, class: `${this.variant}` }, label), index.h("span", { class: "breadcrumb-item__divider" }, "/")));
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
return (index.h("li", { class: breadcrumbClass }, index.h("a", { href: url, class: `${this.variant}` }, label)));
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
return (index.h("li", { class: `${breadcrumbClass} breadcrumb-item__current` }, index.h("a", { "aria-current": "page", href: url, class: `${this.variant}` }, label.length > 20 ? `${label.substring(0, 19)}...` : label)));
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
BreadcrumbTextItem(label, className = '') {
|
|
91
|
-
const breadcrumbClass = ['breadcrumb-item', className].join(' ');
|
|
92
|
-
return index.h("li", { class: breadcrumbClass }, label);
|
|
93
|
-
}
|
|
94
|
-
DropdownMenuItem(items) {
|
|
95
|
-
return (index.h("li", { class: "breadcrumb-item__more" }, index.h("button", { type: "button", "aria-hidden": "true", "aria-expanded": "false", id: "more", key: "more", class: "breadcrumb-item-dropdown-button", "aria-label": "Open breadcrumb navigation" }, index.h("span", { class: "breadcrumb-item-dropdown-button__content" }, index.h("span", null), index.h("hy-icon", { icon: 'hy-icon-caret-right', class: 'breadcrumb-item-caret__drop breadcrumb-item__more__icon', size: 10 }))), index.h("ol", { class: "breadcrumb-hidden-items", "aria-hidden": "true" }, items), index.h("span", { class: "breadcrumb-item__divider" }, "/")));
|
|
96
|
-
}
|
|
97
|
-
adjustHiddenMenuWidth() {
|
|
98
|
-
// set width to the menu area equal to the widest link + paddings
|
|
99
|
-
const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
|
|
100
|
-
if (moreMenu) {
|
|
101
|
-
if (document.body.scrollWidth < 480) {
|
|
102
|
-
moreMenu.style.width = '100%';
|
|
103
|
-
}
|
|
104
|
-
else {
|
|
105
|
-
//maxIntermediateLinkWidth
|
|
106
|
-
var maxIntermediateLinkWidth = 0;
|
|
107
|
-
const moreMenuLinks = document.querySelectorAll('.breadcrumb-hidden-items .breadcrumb-item a');
|
|
108
|
-
if (moreMenuLinks) {
|
|
109
|
-
for (let i = 0; i < moreMenuLinks.length; i++) {
|
|
110
|
-
if (maxIntermediateLinkWidth < moreMenuLinks[i].offsetWidth) {
|
|
111
|
-
maxIntermediateLinkWidth = moreMenuLinks[i].offsetWidth;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
maxIntermediateLinkWidth = maxIntermediateLinkWidth + 32 + 64;
|
|
115
|
-
}
|
|
116
|
-
moreMenu.style.width = maxIntermediateLinkWidth.toString().concat('px');
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
closeMoreMenu() {
|
|
121
|
-
const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
|
|
122
|
-
if (moreMenu) {
|
|
123
|
-
moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
|
|
124
|
-
this.menuOpen = false;
|
|
125
|
-
}
|
|
126
|
-
const moreBreadcrumb = document.querySelectorAll('#more')[0];
|
|
127
|
-
if (moreBreadcrumb) {
|
|
128
|
-
moreBreadcrumb.classList.remove('is-open');
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
// When a ... is clicked, show/hide the Menu with hidden breadcrumbs
|
|
132
|
-
clickEventListener(event) {
|
|
133
|
-
if (!event)
|
|
134
|
-
return;
|
|
135
|
-
const target = event.target;
|
|
136
|
-
const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
|
|
137
|
-
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
|
|
138
|
-
// Trigger if target is button or svg icon
|
|
139
|
-
// TODO: Make this if prettier
|
|
140
|
-
if (target &&
|
|
141
|
-
(target.id === 'more' ||
|
|
142
|
-
((target.tagName == 'svg' || 'path') &&
|
|
143
|
-
target.closest('hy-icon').classList.contains('breadcrumb-item__more__icon')))) {
|
|
144
|
-
//@todo Show the menu on the right place of the screen
|
|
145
|
-
if (moreMenu) {
|
|
146
|
-
if (this.menuOpen) {
|
|
147
|
-
moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
|
|
148
|
-
moreMenu.setAttribute('aria-hidden', 'true');
|
|
149
|
-
moreButton.classList.remove('is-open');
|
|
150
|
-
moreButton.setAttribute('aria-expanded', 'false');
|
|
151
|
-
}
|
|
152
|
-
else {
|
|
153
|
-
moreMenu.classList.add('breadcrumb-hidden-items__is-open');
|
|
154
|
-
moreButton.classList.add('is-open');
|
|
155
|
-
moreMenu.setAttribute('aria-hidden', 'false');
|
|
156
|
-
moreButton.setAttribute('aria-expanded', 'true');
|
|
157
|
-
}
|
|
158
|
-
this.menuOpen = !this.menuOpen;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
this.closeMoreMenu();
|
|
163
|
-
}
|
|
164
|
-
event.stopPropagation();
|
|
165
|
-
event.stopImmediatePropagation();
|
|
166
|
-
}
|
|
167
|
-
resizeEventListener(event) {
|
|
168
|
-
if (!event)
|
|
169
|
-
return;
|
|
170
|
-
const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
|
|
171
|
-
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
|
|
172
|
-
if (breadcrumbsElement) {
|
|
173
|
-
if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
|
|
174
|
-
moreButton.setAttribute('aria-hidden', 'false');
|
|
175
|
-
this.adjustBreadcrumbsMenuVisibility();
|
|
176
|
-
}
|
|
177
|
-
else {
|
|
178
|
-
moreButton.setAttribute('aria-hidden', 'true');
|
|
179
|
-
this.adjustBreadcrumbsMenuVisibility(false);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
render() {
|
|
184
|
-
//@todo Accesibility
|
|
185
|
-
const TOTAL_ITEMS = this._dataItems.length;
|
|
186
|
-
const MAX_ITEMS_TO_SHOW = 3;
|
|
187
|
-
let isMenuNeeded = TOTAL_ITEMS > MAX_ITEMS_TO_SHOW;
|
|
188
|
-
let itemsBreadcrumbs = [];
|
|
189
|
-
let itemsToShowInMenu = [];
|
|
190
|
-
if (this.variant == utils.BreadcrumbVariants.landingLarge) {
|
|
191
|
-
// Landing pages, Large variant
|
|
192
|
-
this._dataItems.map((x, index) => {
|
|
193
|
-
if (index < 2) {
|
|
194
|
-
if (index == 0) {
|
|
195
|
-
itemsBreadcrumbs.push(this.HomeItem(x.url));
|
|
196
|
-
}
|
|
197
|
-
else {
|
|
198
|
-
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main'));
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
}
|
|
203
|
-
else {
|
|
204
|
-
// Landing and Content pages, Standard variant
|
|
205
|
-
this._dataItems.map((x, index$1) => {
|
|
206
|
-
let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false);
|
|
207
|
-
if (isMenuNeeded && index$1 > 0 && index$1 < TOTAL_ITEMS - 1) {
|
|
208
|
-
itemsToShowInMenu.push(index.h("li", null, breadcrumbEl));
|
|
209
|
-
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate'));
|
|
210
|
-
return;
|
|
211
|
-
}
|
|
212
|
-
else {
|
|
213
|
-
if (index$1 == 0) {
|
|
214
|
-
itemsBreadcrumbs.push(this.HomeItem(x.url));
|
|
215
|
-
}
|
|
216
|
-
else {
|
|
217
|
-
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'main'));
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
}
|
|
222
|
-
// Add items to show in breadcrumb popup in correct DOM position.
|
|
223
|
-
itemsBreadcrumbs.splice(1, 0, this.DropdownMenuItem(itemsToShowInMenu));
|
|
224
|
-
const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
|
|
225
|
-
return (index.h("nav", { "aria-label": "Breadcrumb", role: "navigation", "aria-labelledby": "system-breadcrumb", class: breadcrumbsClass }, index.h("ol", { class: "breadcrumb-container" }, itemsBreadcrumbs)));
|
|
226
|
-
}
|
|
227
|
-
get el() { return index.getElement(this); }
|
|
228
|
-
};
|
|
229
|
-
HyBreadcrumbs.style = hyBreadcrumbsCss;
|
|
230
|
-
|
|
231
|
-
exports.hy_breadcrumbs = HyBreadcrumbs;
|