@designsystem-se/af 37.0.1 → 37.0.2
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/components/digi-code-example.js +1 -1
- package/components/digi-form-checkbox.js +1 -1
- package/components/digi-form-filter.js +1 -1
- package/components/digi-form-radiobutton.js +1 -1
- package/components/digi-form-radiogroup.js +1 -1
- package/components/p-8bdc6d6b.js +157 -0
- package/components/p-9dd1da8c.js +177 -0
- package/dist/cjs/button-size.enum-1fd86b9e.js +7 -0
- package/dist/cjs/button-type.enum-406723db.js +8 -0
- package/dist/cjs/{code-example-variation.enum-1611825e.js → code-example-variation.enum-c6557727.js} +0 -6
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-button_2.cjs.entry.js +262 -0
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +6 -3
- package/dist/cjs/digi-code-block_3.cjs.entry.js +22 -7
- package/dist/cjs/digi-code-example.cjs.entry.js +4 -3
- package/dist/cjs/digi-dialog.cjs.entry.js +7 -4
- package/dist/cjs/digi-footer.cjs.entry.js +6 -3
- package/dist/cjs/digi-form-error-list.cjs.entry.js +6 -3
- package/dist/cjs/digi-form-input-search.cjs.entry.js +3 -2
- package/dist/cjs/digi-form-radiogroup.cjs.entry.js +1 -1
- package/dist/cjs/digi-form-receipt.cjs.entry.js +6 -3
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +6 -3
- package/dist/cjs/{digi-form-checkbox.cjs.entry.js → digi-header-avatar.cjs.entry.js} +92 -105
- package/dist/cjs/digi-header-navigation-item.cjs.entry.js +27 -0
- package/dist/cjs/digi-header-navigation.cjs.entry.js +232 -0
- package/dist/cjs/digi-header-notification.cjs.entry.js +23 -0
- package/dist/cjs/digi-header.cjs.entry.js +148 -0
- package/dist/cjs/digi-icon-bars.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-bell-filled.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-x.cjs.entry.js +30 -0
- package/dist/cjs/digi-layout-block_2.cjs.entry.js +92 -0
- package/dist/cjs/digi-media-image_2.cjs.entry.js +167 -0
- package/dist/cjs/digi-navigation-pagination.cjs.entry.js +6 -3
- package/dist/cjs/digi-navigation-sidebar-button.cjs.entry.js +30 -0
- package/dist/cjs/digi-notification-alert.cjs.entry.js +6 -3
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +6 -3
- package/dist/cjs/digi-title-logo.cjs.entry.js +135 -0
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +8 -5
- package/dist/cjs/digi-util-breakpoint-observer.cjs.entry.js +48 -0
- package/dist/cjs/digi-util-keydown-handler.cjs.entry.js +83 -0
- package/dist/cjs/{form-input-search-variation.enum-e0e025b1.js → form-input-search-variation.enum-c50239bc.js} +0 -7
- package/dist/cjs/index-7a477838.js +58 -6
- package/dist/cjs/index.cjs.js +45 -42
- package/dist/cjs/layout-container-max-width.enum-7e637f44.js +21 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{typography-variation.enum-118ff8e5.js → typography-variation.enum-50512a4e.js} +0 -20
- package/dist/collection/components/_form/form-checkbox/form-checkbox.css +8 -8
- package/dist/collection/components/_form/form-checkbox/form-checkbox.js +23 -3
- package/dist/collection/components/_form/form-radiobutton/form-radiobutton.css +7 -2
- package/dist/collection/components/_form/form-radiobutton/form-radiobutton.js +23 -3
- package/dist/collection/components/_form/form-radiogroup/form-radiogroup.css +4 -0
- package/dist/collection/styles/src/tokens-documentation/web-AF25.json +866 -666
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-00219e81.entry.js +1 -0
- package/{components/p-ff4f4fb8.js → dist/digi-arbetsformedlingen/p-19c30198.entry.js} +1 -163
- package/dist/digi-arbetsformedlingen/p-237cad1c.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-260620fe.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-2698dd2a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-2a86cc73.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-2b7b69cd.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-300aa9ef.js +1 -0
- package/dist/digi-arbetsformedlingen/p-38627816.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-55f525dd.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-5a602122.js +1 -0
- package/dist/digi-arbetsformedlingen/p-73a6be41.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-75309c9a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-826ad49e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-84719680.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-89b457e8.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-95330112.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-9e56568b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ac87daf1.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-b328f60b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-bc3d2778.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c24aab43.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-cd50f570.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-cdf86efc.js +1 -0
- package/dist/digi-arbetsformedlingen/p-d4145a3e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-dc9b6144.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e2c92528.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e6b65415.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e7e39ee7.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e844d4cc.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ee4cb21a.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ee9589e6.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f8391f37.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-fdecd798.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-fe409f14.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/styles/src/tokens-documentation/web-AF25.json +866 -666
- package/dist/esm/button-size.enum-d5ff6ff3.js +7 -0
- package/dist/esm/button-type.enum-5250ae0b.js +8 -0
- package/dist/esm/{code-example-variation.enum-e656d235.js → code-example-variation.enum-e9f9fced.js} +1 -7
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-button_2.entry.js +257 -0
- package/dist/esm/digi-calendar-datepicker.entry.js +6 -3
- package/dist/esm/digi-code-block_3.entry.js +21 -6
- package/dist/esm/digi-code-example.entry.js +2 -1
- package/dist/esm/digi-dialog.entry.js +6 -3
- package/dist/esm/digi-footer.entry.js +6 -3
- package/dist/esm/digi-form-error-list.entry.js +6 -3
- package/dist/esm/digi-form-input-search.entry.js +2 -1
- package/dist/esm/digi-form-radiogroup.entry.js +1 -1
- package/dist/esm/digi-form-receipt.entry.js +6 -3
- package/dist/esm/digi-form-select-filter.entry.js +6 -3
- package/dist/esm/{digi-form-checkbox.entry.js → digi-header-avatar.entry.js} +93 -106
- package/dist/esm/digi-header-navigation-item.entry.js +23 -0
- package/dist/esm/digi-header-navigation.entry.js +228 -0
- package/dist/esm/digi-header-notification.entry.js +19 -0
- package/dist/esm/digi-header.entry.js +144 -0
- package/dist/esm/digi-icon-bars.entry.js +26 -0
- package/dist/esm/digi-icon-bell-filled.entry.js +26 -0
- package/dist/esm/digi-icon-x.entry.js +26 -0
- package/dist/esm/digi-layout-block_2.entry.js +87 -0
- package/dist/esm/digi-media-image_2.entry.js +162 -0
- package/dist/esm/digi-navigation-pagination.entry.js +6 -3
- package/dist/esm/digi-navigation-sidebar-button.entry.js +26 -0
- package/dist/esm/digi-notification-alert.entry.js +6 -3
- package/dist/esm/digi-notification-error-page.entry.js +6 -3
- package/dist/esm/digi-title-logo.entry.js +131 -0
- package/dist/esm/digi-tools-feedback.entry.js +6 -3
- package/dist/esm/digi-util-breakpoint-observer.entry.js +44 -0
- package/dist/esm/digi-util-keydown-handler.entry.js +79 -0
- package/dist/esm/{form-input-search-variation.enum-6d8dc10a.js → form-input-search-variation.enum-f9d669f2.js} +1 -8
- package/dist/esm/index-148a7577.js +58 -6
- package/dist/esm/index.js +6 -3
- package/dist/esm/layout-container-max-width.enum-c40018ac.js +21 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{typography-variation.enum-23eeecd2.js → typography-variation.enum-8c3ff25c.js} +1 -21
- package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts +8 -0
- package/dist/types/components/_form/form-radiobutton/form-radiobutton.d.ts +8 -0
- package/hydrate/index.js +37 -9
- package/hydrate/index.mjs +37 -9
- package/package.json +1 -1
- package/components/p-5fd00d55.js +0 -143
- package/dist/cjs/digi-button_17.cjs.entry.js +0 -1120
- package/dist/digi-arbetsformedlingen/p-029c4d40.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-0c77050e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-2c698144.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4841b4e1.js +0 -1
- package/dist/digi-arbetsformedlingen/p-51bfa2a9.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-53d9556b.js +0 -1
- package/dist/digi-arbetsformedlingen/p-583d40dc.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7238fdb8.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7327f45d.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-750ff498.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7e125c6e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-9be9a291.js +0 -1
- package/dist/digi-arbetsformedlingen/p-a2561b9e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-bd55807c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-c68bf2b3.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ccd617cc.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-edcb61eb.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-eeca26b2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-f94db846.entry.js +0 -1
- package/dist/esm/digi-button_17.entry.js +0 -1100
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
require('./badge-notification-shape.enum-ff802554.js');
|
|
7
|
+
const typographyVariation_enum = require('./typography-variation.enum-50512a4e.js');
|
|
8
|
+
require('./badge-status-variation.enum-0a5adc21.js');
|
|
9
|
+
require('./button-size.enum-1fd86b9e.js');
|
|
10
|
+
require('./button-type.enum-406723db.js');
|
|
11
|
+
require('./button-variation.enum-bc521499.js');
|
|
12
|
+
require('./calendar-week-view-heading-level.enum-fd0c841b.js');
|
|
13
|
+
require('./bar-chart-variation.enum-a4e866b6.js');
|
|
14
|
+
require('./code-example-variation.enum-c6557727.js');
|
|
15
|
+
require('./code-variation.enum-c4a4e6fd.js');
|
|
16
|
+
require('./expandable-accordion-header-level.enum-45483252.js');
|
|
17
|
+
require('./expandable-faq-item-variation.enum-89427195.js');
|
|
18
|
+
require('./expandable-faq-variation.enum-af923f49.js');
|
|
19
|
+
require('./footer-card-variation.enum-99555edc.js');
|
|
20
|
+
require('./form-checkbox-variation.enum-d2ca879e.js');
|
|
21
|
+
require('./form-file-upload-variation.enum-634cfae8.js');
|
|
22
|
+
require('./form-input-search-variation.enum-c50239bc.js');
|
|
23
|
+
require('./form-input-type.enum-9c8ee12a.js');
|
|
24
|
+
require('./form-input-variation.enum-c750520c.js');
|
|
25
|
+
require('./form-radiogroup-validation.enum-03a17d4d.js');
|
|
26
|
+
require('./form-select-variation.enum-528c1bf0.js');
|
|
27
|
+
require('./form-textarea-variation.enum-9c90d40f.js');
|
|
28
|
+
require('./form-validation-message-variation.enum-855ae0be.js');
|
|
29
|
+
require('./info-card-multi-type.enum-14746572.js');
|
|
30
|
+
require('./info-card-variation.enum-64cef637.js');
|
|
31
|
+
require('./layout-container-max-width.enum-7e637f44.js');
|
|
32
|
+
require('./layout-block-variation.enum-f6102119.js');
|
|
33
|
+
require('./layout-columns-variation.enum-65675649.js');
|
|
34
|
+
require('./link-button-variation.enum-137785e3.js');
|
|
35
|
+
require('./list-type.enum-aea4d012.js');
|
|
36
|
+
require('./loader-skeleton-variation.enum-d52ba55e.js');
|
|
37
|
+
require('./loader-spinner-size.enum-db2973f0.js');
|
|
38
|
+
require('./logo-variation.enum-607fadb4.js');
|
|
39
|
+
require('./media-figure-alignment.enum-3885aba5.js');
|
|
40
|
+
require('./navigation-sidebar-variation.enum-1c0c3064.js');
|
|
41
|
+
require('./navigation-vertical-menu-variation.enum-c237edd3.js');
|
|
42
|
+
require('./progress-indicator-variation.enum-7cf8e0e4.js');
|
|
43
|
+
require('./progress-list-item-variation.enum-90e4c874.js');
|
|
44
|
+
require('./progress-list-variation.enum-06d5ce27.js');
|
|
45
|
+
require('./progressbar-variation.enum-aff9fa80.js');
|
|
46
|
+
require('./quote-image-inner-position.enum-e64e7a6d.js');
|
|
47
|
+
require('./table-variation.enum-25df2ad7.js');
|
|
48
|
+
require('./tag-media-icon.enum-372563c5.js');
|
|
49
|
+
require('./tag-size.enum-387c516c.js');
|
|
50
|
+
require('./tools-feedback-banner-type.enum-de373ba0.js');
|
|
51
|
+
require('./tools-feedback-rating-variation.enum-2f71e84d.js');
|
|
52
|
+
require('./tools-theme-provider.brand.enum-bc855272.js');
|
|
53
|
+
require('./typography-heading-jumbo-variation.enum-8677e099.js');
|
|
54
|
+
require('./typography-meta-variation.enum-13ac3538.js');
|
|
55
|
+
require('./typography-time-variation.enum-bce1d87e.js');
|
|
56
|
+
const utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
|
|
57
|
+
|
|
58
|
+
const headerNavigationCss = ".sc-digi-header-navigation-h{--digi--header--border-color:var(--digi--color--divider--secondary);--digi--header--close-button--padding:var(--digi--padding--smaller);display:block}.sc-digi-header-navigation-h .digi-header-navigation.sc-digi-header-navigation{z-index:99}.sc-digi-header-navigation-h .digi-header-navigation__backdrop.sc-digi-header-navigation{background:rgba(0, 0, 0, 0.7);width:100%;height:100%;position:fixed;top:0;left:0}.sc-digi-header-navigation-h .digi-header-navigation__wrapper.sc-digi-header-navigation{display:none;grid-area:nav;background-color:var(--digi--color--background--secondary-muted);border-bottom:var(--digi--header--border-width) solid var(--digi--header--border-color)}.sc-digi-header-navigation-h .digi-header-navigation--visible.sc-digi-header-navigation .digi-header-navigation__wrapper.sc-digi-header-navigation{display:block}.sc-digi-header-navigation-h .digi-header-navigation__close-button.sc-digi-header-navigation{display:flex;flex-wrap:wrap;align-items:center;padding:var(--digi--header--close-button--padding) 0}.sc-digi-header-navigation-h .digi-header-navigation--centered.sc-digi-header-navigation .digi-header-navigation__wrapper.sc-digi-header-navigation{padding-left:0;padding-right:0}.sc-digi-header-navigation-h .digi-header-navigation--centered.sc-digi-header-navigation .digi-header-navigation__inner.sc-digi-header-navigation{margin-left:calc(var(--digi--global--spacing--base) * -1);margin-right:calc(var(--digi--global--spacing--base) * -1)}.sc-digi-header-navigation-h .digi-header-navigation--mobile.sc-digi-header-navigation{width:0;position:fixed;height:100%;right:0;top:0;visibility:hidden;--digi--header-navigation--horizontal-padding:0}.sc-digi-header-navigation-h .digi-header-navigation--mobile.sc-digi-header-navigation .digi-header-navigation__wrapper.sc-digi-header-navigation{position:absolute;top:0;right:0;height:100%;transform:translateX(100%);width:90vw;transition:ease var(--digi--animation--duration--base) all;overflow-y:auto}.sc-digi-header-navigation-h .digi-header-navigation--mobile.sc-digi-header-navigation .digi-header-navigation__inner.sc-digi-header-navigation{margin:0;padding:0;display:block}.sc-digi-header-navigation-h .digi-header-navigation--mobile .digi-header-navigation__inner.sc-digi-header-navigation-s>digi-header-navigation-item:first-child,.sc-digi-header-navigation-h .digi-header-navigation--mobile .digi-header-navigation__inner.sc-digi-header-navigation-s>digi-header-navigation-item,.sc-digi-header-navigation-h .digi-header-navigation--mobile .digi-header-navigation__inner .sc-digi-header-navigation-s>digi-header-navigation-item:first-child{border-top:1px solid var(--digi--header--border-color)}.sc-digi-header-navigation-h .digi-header-navigation--mobile .digi-header-navigation__inner.sc-digi-header-navigation-s>digi-header-navigation-item,.sc-digi-header-navigation-h .digi-header-navigation--mobile .digi-header-navigation__inner .sc-digi-header-navigation-s>digi-header-navigation-item{border-bottom:1px solid var(--digi--header--border-color)}.sc-digi-header-navigation-h .digi-header-navigation--open.sc-digi-header-navigation{visibility:visible}.sc-digi-header-navigation-h .digi-header-navigation--open.sc-digi-header-navigation .digi-header-navigation__wrapper.sc-digi-header-navigation{transform:translateX(0)}.sc-digi-header-navigation-h .digi-header-navigation--open.sc-digi-header-navigation .digi-header-navigation__backdrop.sc-digi-header-navigation{display:block}.sc-digi-header-navigation-h .digi-header-navigation__inner.sc-digi-header-navigation{list-style:none;margin:0;display:flex}.sc-digi-header-navigation-h .digi-header-navigation__navigation-link.sc-digi-header-navigation{display:block;text-decoration:none;color:inherit;padding:var(--digi--padding--medium)}.sc-digi-header-navigation-h .digi-header-navigation__navigation-link.sc-digi-header-navigation:hover{background-color:var(--digi--color--background--interactive--hover--quarternary)}";
|
|
59
|
+
const DigiHeaderNavigationStyle0 = headerNavigationCss;
|
|
60
|
+
|
|
61
|
+
const HeaderNavigation = class {
|
|
62
|
+
constructor(hostRef) {
|
|
63
|
+
index.registerInstance(this, hostRef);
|
|
64
|
+
this.afOnClose = index.createEvent(this, "afOnClose", 7);
|
|
65
|
+
this.afOnEsc = index.createEvent(this, "afOnEsc", 7);
|
|
66
|
+
this.afOnBackdropClick = index.createEvent(this, "afOnBackdropClick", 7);
|
|
67
|
+
this.afOnToggle = index.createEvent(this, "afOnToggle", 7);
|
|
68
|
+
this._focusableElementsSelectors = 'a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]';
|
|
69
|
+
this.focusableElements = [];
|
|
70
|
+
this.isMobile = undefined;
|
|
71
|
+
this.isVisible = undefined;
|
|
72
|
+
this.afCloseButtonText = undefined;
|
|
73
|
+
this.afNavAriaLabel = undefined;
|
|
74
|
+
this.afCloseButtonAriaLabel = undefined;
|
|
75
|
+
this.afFocusableElement = undefined;
|
|
76
|
+
this.afCloseFocusableElement = undefined;
|
|
77
|
+
this.afActive = false;
|
|
78
|
+
this.afBackdrop = true;
|
|
79
|
+
this.afCentered = typographyVariation_enum.HeaderCenterContentWidth.DEFAULT;
|
|
80
|
+
}
|
|
81
|
+
//private _observer: any;
|
|
82
|
+
enablePageScroll() {
|
|
83
|
+
document.body.style.height = '';
|
|
84
|
+
document.body.style.overflowY = '';
|
|
85
|
+
document.body.style.paddingRight = '';
|
|
86
|
+
}
|
|
87
|
+
disablePageScroll() {
|
|
88
|
+
document.body.style.height = '100vh';
|
|
89
|
+
document.body.style.overflowY = 'hidden';
|
|
90
|
+
}
|
|
91
|
+
toggleHandler(e) {
|
|
92
|
+
const element = e.target;
|
|
93
|
+
this._closeFocusableElement = element.querySelector('.digi-navigation-sidebar-button button');
|
|
94
|
+
if (element.matches('digi-navigation-sidebar-button')) {
|
|
95
|
+
this.afActive = true;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
get shouldUseFocusTrap() {
|
|
99
|
+
return this.isMobile && this.focusableElements.length > 0;
|
|
100
|
+
}
|
|
101
|
+
closeHandler(e) {
|
|
102
|
+
this.afActive = false;
|
|
103
|
+
this.afOnClose.emit(e);
|
|
104
|
+
}
|
|
105
|
+
escHandler(e) {
|
|
106
|
+
if (this.isMobile) {
|
|
107
|
+
this.afActive = false;
|
|
108
|
+
this.afOnClose.emit(e);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
tabHandler(e) {
|
|
112
|
+
if (this.shouldUseFocusTrap) {
|
|
113
|
+
if (document.activeElement === this.lastFocusableEl) {
|
|
114
|
+
e.detail.preventDefault();
|
|
115
|
+
this.firstFocusableEl.focus();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
backdropClickHandler(e) {
|
|
120
|
+
this.afActive = false;
|
|
121
|
+
this.afOnClose.emit(e);
|
|
122
|
+
}
|
|
123
|
+
shiftHandler(e) {
|
|
124
|
+
if (this.shouldUseFocusTrap) {
|
|
125
|
+
if (document.activeElement === this.firstFocusableEl) {
|
|
126
|
+
e.detail.preventDefault();
|
|
127
|
+
this.lastFocusableEl.focus();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
clickHandler(e) {
|
|
132
|
+
// If clicking on toggle button, refresh the focusable items list
|
|
133
|
+
// with the new sub level of items
|
|
134
|
+
if (this.shouldUseFocusTrap) {
|
|
135
|
+
const el = e.detail.target;
|
|
136
|
+
if (el.tagName.toLowerCase() === 'button') {
|
|
137
|
+
setTimeout(() => {
|
|
138
|
+
this.getFocusableItems();
|
|
139
|
+
}, 100);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
setMobileView(isMobile) {
|
|
144
|
+
isMobile && this.afActive
|
|
145
|
+
? (this.disablePageScroll(), this.getFocusableItems())
|
|
146
|
+
: this.enablePageScroll();
|
|
147
|
+
}
|
|
148
|
+
breakpointChange(e) {
|
|
149
|
+
this.isVisible = false;
|
|
150
|
+
const element = e.target;
|
|
151
|
+
const type = element.nodeName;
|
|
152
|
+
if (type.toLowerCase() === 'digi-util-breakpoint-observer') {
|
|
153
|
+
this.isMobile =
|
|
154
|
+
e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL;
|
|
155
|
+
}
|
|
156
|
+
if (this.isMobile) {
|
|
157
|
+
setTimeout(() => {
|
|
158
|
+
this.isVisible = true;
|
|
159
|
+
}, 100);
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
this.isVisible = true;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
componentDidLoad() {
|
|
166
|
+
const transition = this._wrapper;
|
|
167
|
+
transition.addEventListener('transitionend', () => {
|
|
168
|
+
this.getFocusableItems();
|
|
169
|
+
this.setFocus();
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
getFocusableItems() {
|
|
173
|
+
const allElements = this._wrapper.querySelectorAll(this._focusableElementsSelectors);
|
|
174
|
+
// Filters out visible items
|
|
175
|
+
this.focusableElements = Array.prototype.slice
|
|
176
|
+
.call(allElements)
|
|
177
|
+
.filter(function (item) {
|
|
178
|
+
return item.offsetParent !== null;
|
|
179
|
+
});
|
|
180
|
+
// Sets first and last focusable element
|
|
181
|
+
if (this.focusableElements.length > 0) {
|
|
182
|
+
this.firstFocusableEl = this.focusableElements[0];
|
|
183
|
+
this.lastFocusableEl = this.focusableElements[this.focusableElements.length - 1];
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
setFocus() {
|
|
187
|
+
if (this.afActive) {
|
|
188
|
+
let el;
|
|
189
|
+
const firstNavLink = this.firstFocusableEl;
|
|
190
|
+
if (this.afFocusableElement) {
|
|
191
|
+
el = this.hostElement.querySelector(`${this.afFocusableElement}`);
|
|
192
|
+
}
|
|
193
|
+
else {
|
|
194
|
+
el = firstNavLink;
|
|
195
|
+
}
|
|
196
|
+
if (el) {
|
|
197
|
+
el.focus();
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
else {
|
|
201
|
+
if (this.afCloseFocusableElement) {
|
|
202
|
+
const el = document.querySelector(`${this.afCloseFocusableElement}`);
|
|
203
|
+
el.focus();
|
|
204
|
+
}
|
|
205
|
+
else if (this._closeFocusableElement) {
|
|
206
|
+
const el = this._closeFocusableElement;
|
|
207
|
+
el.focus();
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
get cssModifiers() {
|
|
212
|
+
return {
|
|
213
|
+
'digi-header-navigation--open': this.afActive,
|
|
214
|
+
'digi-header-navigation--mobile': this.isMobile,
|
|
215
|
+
'digi-header-navigation--visible': this.isVisible,
|
|
216
|
+
'digi-header-navigation--centered': this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT
|
|
217
|
+
};
|
|
218
|
+
}
|
|
219
|
+
render() {
|
|
220
|
+
return (index.h("div", { key: '232da78b522dab6286cdc603c1188f60ecde9eda', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: '57e376eb12e89cf02e0e6c178a547628d1231206', onAfOnChange: (e) => (this.isMobile =
|
|
221
|
+
e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) }, index.h("digi-util-keydown-handler", { key: '76d56d7404b689ffad5a75f911acb7721f60c701', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, index.h("div", { key: 'dfdb35c4fd1b3d374fb535037b9a6b3cfc82989e' }, this.isMobile && (index.h("div", { key: '29661a0ce9b746c0411649d4782c3a129e770494', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), index.h("nav", { key: '2ffbe7d9b7035f35de0f0c72a2cdfcadd28dd27e', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
|
|
222
|
+
this._wrapper = el;
|
|
223
|
+
} }, this.isMobile && (index.h("digi-button", { key: '6899ce6771c7e4611c6ae3383c7ef9ea9478ed49', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, index.h("digi-icon-x", { key: '750d10eb9a2d58c4d6d9f2bc4c697445af1f84fd', slot: "icon-secondary" }))), this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))) : (index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))))))));
|
|
224
|
+
}
|
|
225
|
+
get hostElement() { return index.getElement(this); }
|
|
226
|
+
static get watchers() { return {
|
|
227
|
+
"isMobile": ["setMobileView"]
|
|
228
|
+
}; }
|
|
229
|
+
};
|
|
230
|
+
HeaderNavigation.style = DigiHeaderNavigationStyle0;
|
|
231
|
+
|
|
232
|
+
exports.digi_header_navigation = HeaderNavigation;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
|
|
7
|
+
const headerNotificationCss = ".sc-digi-header-notification-h .digi-header-notification.sc-digi-header-notification{--digi--header-notification--font-family:var(--digi--global--typography--font-family--default);--digi--header-notification--font-size:var(--digi--typography--body--font-size--desktop);--digi--header-notification--color:var(--digi--color--text--primary);--digi--header-notification--color-hover:var(--digi--color--text--interactive--primary);--digi--header-notification--color-active:var(--digi--color--text--interactive--primary);display:flex;position:relative;align-items:center;font-family:\"Open Sans\"}.sc-digi-header-notification-h .digi-header-notification__number.sc-digi-header-notification{background-color:var(--digi--color--background--notification);color:var(--digi--color--text--secondary--light);padding:2px;z-index:5;font-size:12px;line-height:normal;font-weight:600;border-radius:10px;padding:1px 6px;position:absolute;top:-12px;left:20px;letter-spacing:0.5px}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h .sc-digi-header-notification-s>a{display:flex;position:relative;align-items:center;margin-right:8px;text-decoration:none;color:var(--digi--header-notification--color);font-family:var(--digi--header-notification--font-family);font-size:var(--digi--header-notification--font-size)}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h.sc-digi-header-notification-s>a [class*=digi-icon]:not(svg),.sc-digi-header-notification-h .sc-digi-header-notification-s>a [class*=digi-icon]:not(svg){height:2rem;width:2rem;display:flex;align-items:center;flex-grow:1;background:var(--digi--color--background--interactive--default--tertiary);justify-content:center;border-radius:100%;margin-right:8px}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h.sc-digi-header-notification-s>a svg,.sc-digi-header-notification-h .sc-digi-header-notification-s>a svg{--digi--icon--width:1rem;--digi--icon--height:1rem}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:hover,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:hover,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:active,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:active,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:focus-visible,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:focus-visible{color:var(--digi--header-notification--color-hover);text-decoration:underline}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:hover,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:hover svg,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:hover svg,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:active,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:active svg,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:active svg{color:var(--digi--color--text--primary)}.sc-digi-header-notification-h.sc-digi-header-notification-s>a,.sc-digi-header-notification-h.sc-digi-header-notification-s>a:focus-visible,.sc-digi-header-notification-h .sc-digi-header-notification-s>a:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}";
|
|
8
|
+
const DigiHeaderNotificationStyle0 = headerNotificationCss;
|
|
9
|
+
|
|
10
|
+
const HeaderNotification = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.afNotificationAmount = undefined;
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return (index.h("div", { key: 'f01b621d614be19dd4d4edcfb7d284740a367390', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (index.h("span", { key: '2847fce889488028a3cebb85b6661f676affd4bb', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
|
|
17
|
+
? this.afNotificationAmount
|
|
18
|
+
: '+99')), index.h("slot", { key: 'b042e9e98856ec5dd8e33f5e8d424509807435a6' })));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
HeaderNotification.style = DigiHeaderNotificationStyle0;
|
|
22
|
+
|
|
23
|
+
exports.digi_header_notification = HeaderNotification;
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
require('./badge-notification-shape.enum-ff802554.js');
|
|
7
|
+
const typographyVariation_enum = require('./typography-variation.enum-50512a4e.js');
|
|
8
|
+
require('./badge-status-variation.enum-0a5adc21.js');
|
|
9
|
+
require('./button-size.enum-1fd86b9e.js');
|
|
10
|
+
require('./button-type.enum-406723db.js');
|
|
11
|
+
require('./button-variation.enum-bc521499.js');
|
|
12
|
+
require('./calendar-week-view-heading-level.enum-fd0c841b.js');
|
|
13
|
+
require('./bar-chart-variation.enum-a4e866b6.js');
|
|
14
|
+
require('./code-example-variation.enum-c6557727.js');
|
|
15
|
+
require('./code-variation.enum-c4a4e6fd.js');
|
|
16
|
+
require('./expandable-accordion-header-level.enum-45483252.js');
|
|
17
|
+
require('./expandable-faq-item-variation.enum-89427195.js');
|
|
18
|
+
require('./expandable-faq-variation.enum-af923f49.js');
|
|
19
|
+
require('./footer-card-variation.enum-99555edc.js');
|
|
20
|
+
require('./form-checkbox-variation.enum-d2ca879e.js');
|
|
21
|
+
require('./form-file-upload-variation.enum-634cfae8.js');
|
|
22
|
+
require('./form-input-search-variation.enum-c50239bc.js');
|
|
23
|
+
require('./form-input-type.enum-9c8ee12a.js');
|
|
24
|
+
require('./form-input-variation.enum-c750520c.js');
|
|
25
|
+
require('./form-radiogroup-validation.enum-03a17d4d.js');
|
|
26
|
+
require('./form-select-variation.enum-528c1bf0.js');
|
|
27
|
+
require('./form-textarea-variation.enum-9c90d40f.js');
|
|
28
|
+
require('./form-validation-message-variation.enum-855ae0be.js');
|
|
29
|
+
require('./info-card-multi-type.enum-14746572.js');
|
|
30
|
+
require('./info-card-variation.enum-64cef637.js');
|
|
31
|
+
const layoutContainerMaxWidth_enum = require('./layout-container-max-width.enum-7e637f44.js');
|
|
32
|
+
require('./layout-block-variation.enum-f6102119.js');
|
|
33
|
+
require('./layout-columns-variation.enum-65675649.js');
|
|
34
|
+
require('./link-button-variation.enum-137785e3.js');
|
|
35
|
+
require('./list-type.enum-aea4d012.js');
|
|
36
|
+
require('./loader-skeleton-variation.enum-d52ba55e.js');
|
|
37
|
+
require('./loader-spinner-size.enum-db2973f0.js');
|
|
38
|
+
require('./logo-variation.enum-607fadb4.js');
|
|
39
|
+
require('./media-figure-alignment.enum-3885aba5.js');
|
|
40
|
+
require('./navigation-sidebar-variation.enum-1c0c3064.js');
|
|
41
|
+
require('./navigation-vertical-menu-variation.enum-c237edd3.js');
|
|
42
|
+
require('./progress-indicator-variation.enum-7cf8e0e4.js');
|
|
43
|
+
require('./progress-list-item-variation.enum-90e4c874.js');
|
|
44
|
+
require('./progress-list-variation.enum-06d5ce27.js');
|
|
45
|
+
require('./progressbar-variation.enum-aff9fa80.js');
|
|
46
|
+
require('./quote-image-inner-position.enum-e64e7a6d.js');
|
|
47
|
+
require('./table-variation.enum-25df2ad7.js');
|
|
48
|
+
require('./tag-media-icon.enum-372563c5.js');
|
|
49
|
+
require('./tag-size.enum-387c516c.js');
|
|
50
|
+
require('./tools-feedback-banner-type.enum-de373ba0.js');
|
|
51
|
+
require('./tools-feedback-rating-variation.enum-2f71e84d.js');
|
|
52
|
+
require('./tools-theme-provider.brand.enum-bc855272.js');
|
|
53
|
+
require('./typography-heading-jumbo-variation.enum-8677e099.js');
|
|
54
|
+
require('./typography-meta-variation.enum-13ac3538.js');
|
|
55
|
+
require('./typography-time-variation.enum-bce1d87e.js');
|
|
56
|
+
const utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
|
|
57
|
+
|
|
58
|
+
const headerCss = ".sc-digi-header-h{display:block;--digi--header--logo--padding-right:var(--digi--padding--large);--digi--header--border-width:var(--digi--border-width--primary);--digi--header--border-color:var(--digi--color--divider--primary);--digi--header--padding-left:var(--digi--padding--medium);--digi--header--padding-right:var(--digi--padding--medium);--digi--header--content--gap:1rem}.sc-digi-header-h .digi-header__wrapper.sc-digi-header{display:flex;align-items:center;padding-left:var(--digi--header--padding-left);padding-right:var(--digi--header--padding-right)}@media (max-width: 47.9375rem){.sc-digi-header-h .digi-header--has-navigation.sc-digi-header .digi-header__wrapper.sc-digi-header{--digi--header--padding-right:0}}.sc-digi-header-h .digi-header__border.sc-digi-header{border-bottom:var(--digi--header--border-width) solid var(--digi--header--border-color)}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo]{margin-left:-0.125rem;text-decoration:none;padding-right:var(--digi--header--logo--padding-right)}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo,.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo] .digi-logo{--digi--logo--img--max-width:23rem}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo,.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo__img,.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo] .digi-logo__img{flex-shrink:0}.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content],.sc-digi-header-h .digi-header .sc-digi-header-s>div[slot=header-content]{display:flex;align-items:center;flex:1;justify-content:flex-end;flex-wrap:wrap;gap:var(--digi--header--content--gap)}.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content],.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content] .digi-header-notification a,.sc-digi-header-h .digi-header .sc-digi-header-s>div[slot=header-content] .digi-header-notification a{margin:0}.sc-digi-header-h .digi-header--af-centered.sc-digi-header .digi-header__wrapper.sc-digi-header{--digi--header--padding-right:0;--digi--header--padding-left:0}";
|
|
59
|
+
const DigiHeaderStyle0 = headerCss;
|
|
60
|
+
|
|
61
|
+
const Header = class {
|
|
62
|
+
constructor(hostRef) {
|
|
63
|
+
index.registerInstance(this, hostRef);
|
|
64
|
+
this.afActive = undefined;
|
|
65
|
+
this.isMobile = undefined;
|
|
66
|
+
this.hasNavigation = undefined;
|
|
67
|
+
this.afSystemName = undefined;
|
|
68
|
+
this.afMenuButtonText = undefined;
|
|
69
|
+
this.afAriaLabel = undefined;
|
|
70
|
+
this.afHideSystemName = undefined;
|
|
71
|
+
this.afCentered = typographyVariation_enum.HeaderCenterContentWidth.DEFAULT;
|
|
72
|
+
}
|
|
73
|
+
toggleHandler(e) {
|
|
74
|
+
const element = e.target;
|
|
75
|
+
if (element.matches('digi-navigation-sidebar-button')) {
|
|
76
|
+
this.afActive = true;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
closeHandler() {
|
|
80
|
+
this.afActive = false;
|
|
81
|
+
}
|
|
82
|
+
get cssModifiers() {
|
|
83
|
+
return {
|
|
84
|
+
'digi-header--af-centered': this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT,
|
|
85
|
+
'digi-header--has-navigation': this.hasNavigation
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
handleBreakpointObserver(e) {
|
|
89
|
+
this.isMobile = e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL;
|
|
90
|
+
}
|
|
91
|
+
get ariaLabel() {
|
|
92
|
+
return this.afAriaLabel || this.afSystemName;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Ta reda på om vi har en populerad navigations-slot. Om inte så renderar vi ingen menyknapp
|
|
96
|
+
* @en Find out if we have a populated navigation slot. If, we don't, let's not bother rendering the navigation toggle button
|
|
97
|
+
*/
|
|
98
|
+
checkNavigation() {
|
|
99
|
+
this.hasNavigation = !!this.hostElement.querySelector('[slot="header-navigation"]');
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Om vi inte har vare sig digi-title-logo eller digi-logo, men vi har ett af-system-name så renderar vi en digi-title-logo som fallback
|
|
103
|
+
* @en If we have neither a digi-title-logo or a digi-logo,but we do have an af-system name, we render a digi-title-logo as a fallback.
|
|
104
|
+
*
|
|
105
|
+
* This will be removed when we finally deprecate af-syetem-name.
|
|
106
|
+
*/
|
|
107
|
+
createLegacyLogoIfNeeded() {
|
|
108
|
+
const logoSlot = this.hostElement.querySelector('[slot="header-logo"]');
|
|
109
|
+
const useFallbackTitleLogo = !!logoSlot
|
|
110
|
+
&& !this.hostElement.querySelector('digi-title-logo')
|
|
111
|
+
&& !this.hostElement.querySelector('digi-logo')
|
|
112
|
+
&& !!this.afSystemName;
|
|
113
|
+
if (useFallbackTitleLogo) {
|
|
114
|
+
logoSlot.innerHTML = this.afHideSystemName
|
|
115
|
+
? `<digi-logo af-only-symbol="true"></digi-logo>`
|
|
116
|
+
: `<digi-title-logo af-aria-label=${this.afSystemName}>
|
|
117
|
+
<div slot="logo-one-row">
|
|
118
|
+
${this.afSystemName}
|
|
119
|
+
</div>
|
|
120
|
+
</digi-title-logo>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
componentWillLoad() {
|
|
125
|
+
this.checkNavigation();
|
|
126
|
+
this.createLegacyLogoIfNeeded();
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* If we have a <digi-logo> in the logo slot, make sure its afOnlySymbol prop
|
|
130
|
+
* is true when we're in mobile
|
|
131
|
+
*/
|
|
132
|
+
componentWillRender() {
|
|
133
|
+
const afLogo = this.hostElement.querySelector('digi-logo');
|
|
134
|
+
if (afLogo) {
|
|
135
|
+
afLogo.afOnlySymbol = this.isMobile || afLogo.afOnlySymbol;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
renderContent() {
|
|
139
|
+
return (index.h("div", { class: "digi-header__wrapper" }, index.h("slot", { name: "header-logo" }), index.h("slot", { name: "header-content" }), this.hasNavigation && this.isMobile && (index.h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
|
|
140
|
+
}
|
|
141
|
+
render() {
|
|
142
|
+
return (index.h("header", { key: '73e95103c9377a0a880757124540cefe8395c70c', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'b43a331345bcb463c9cb7ae26032a6c5bcec05ce', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("digi-layout-block", { key: 'f9e92080a234f619650f0bcdbff2ee3a471f63b9', afContainer: layoutContainerMaxWidth_enum.LayoutBlockContainer.NONE }, this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), index.h("div", { key: '0e080daf5eaa59f83cee7585a6d0f70c44e96892', class: "digi-header__border" }), index.h("slot", { key: '2339203a0d17c1263e7ad61d344d3c966bcd9d8c', name: "header-navigation" }))));
|
|
143
|
+
}
|
|
144
|
+
get hostElement() { return index.getElement(this); }
|
|
145
|
+
};
|
|
146
|
+
Header.style = DigiHeaderStyle0;
|
|
147
|
+
|
|
148
|
+
exports.digi_header = Header;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
+
|
|
8
|
+
const iconBarsCss = ".sc-digi-icon-bars-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-bars-h svg.sc-digi-icon-bars{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
|
|
9
|
+
const DigiIconBarsStyle0 = iconBarsCss;
|
|
10
|
+
|
|
11
|
+
const IconBars = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.afTitle = undefined;
|
|
15
|
+
this.afDesc = undefined;
|
|
16
|
+
this.afSvgAriaHidden = true;
|
|
17
|
+
this.afSvgAriaLabelledby = undefined;
|
|
18
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
return (index.h("svg", { key: 'f774ba801087630bd519e05fefbdf3c8e0846130', class: "digi-icon-bars", width: "22", height: "26", viewBox: "0 0 22 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
22
|
+
? this.afSvgAriaLabelledby
|
|
23
|
+
: this.afTitle
|
|
24
|
+
? this.titleId
|
|
25
|
+
: undefined }, this.afTitle && index.h("title", { key: '9c1a4e088a79e58731a2537c27c1a74d678f3afc', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '327c359daaadbd34c1d7a91c62022d9fe4131ab2' }, this.afDesc), index.h("path", { key: 'd898a573584a53c916ac9ee979df711eca646340', class: "digi-icon-bars__shape", d: "M0.8,6.9h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,3.4,0,3.7,0,4.2v2C0,6.6,0.4,6.9,0.8,6.9z M0.8,14.8 h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,11.2,0,11.6,0,12v2C0,14.4,0.4,14.8,0.8,14.8z M0.8,22.6h20.4 c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8c-0.4,0-0.8,0.4-0.8,0.8v2C0,22.3,0.4,22.6,0.8,22.6z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
IconBars.style = DigiIconBarsStyle0;
|
|
29
|
+
|
|
30
|
+
exports.digi_icon_bars = IconBars;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
+
|
|
8
|
+
const iconBellFilledCss = ".sc-digi-icon-bell-filled-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-bell-filled-h svg.sc-digi-icon-bell-filled{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
|
|
9
|
+
const DigiIconBellFilledStyle0 = iconBellFilledCss;
|
|
10
|
+
|
|
11
|
+
const IconBellFilled = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.afTitle = undefined;
|
|
15
|
+
this.afDesc = undefined;
|
|
16
|
+
this.afSvgAriaHidden = true;
|
|
17
|
+
this.afSvgAriaLabelledby = undefined;
|
|
18
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
return (index.h("svg", { key: '43c56a218ba3d4642096386d0f80c00eb4fa9acc', class: "digi-icon-bell-filled", width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
22
|
+
? this.afSvgAriaLabelledby
|
|
23
|
+
: this.afTitle
|
|
24
|
+
? this.titleId
|
|
25
|
+
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '353bc9296b893300882f4cf1c0e8844f70096dd0', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'c3e9c1ba95f9abf4c92464151bb04c187df62e95' }, this.afDesc), index.h("path", { key: 'ddc6a853b89167084c58ad65f8bb4b1be5b9724a', class: "digi-icon-bell-filled__shape", d: "M23.555833,48 C26.8859842,48 29.5872534,45.3140625 29.5872534,42 L17.5244126,42 C17.5244126,45.3140625 20.2256818,48 23.555833,48 Z M43.8639093,33.9646875 C42.0423204,32.0184375 38.6339126,29.090625 38.6339126,19.5 C38.6339126,12.215625 33.4972582,6.384375 26.5710718,4.95375 L26.5710718,3 C26.5710718,1.3434375 25.2209086,0 23.555833,0 C21.8907574,0 20.5405942,1.3434375 20.5405942,3 L20.5405942,4.95375 C13.6144078,6.384375 8.47775338,12.215625 8.47775338,19.5 C8.47775338,29.090625 5.06934557,32.0184375 3.24775666,33.9646875 C2.68204582,34.569375 2.43124734,35.2921875 2.43589641,36 C2.44633297,37.5375 3.65978272,39 5.4625146,39 L41.6491514,39 C43.4518833,39 44.6662759,37.5375 44.6757696,36 C44.6804187,35.2921875 44.4296202,34.5684375 43.8639093,33.9646875 L43.8639093,33.9646875 Z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
IconBellFilled.style = DigiIconBellFilledStyle0;
|
|
29
|
+
|
|
30
|
+
exports.digi_icon_bell_filled = IconBellFilled;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
+
|
|
8
|
+
const iconXCss = ".sc-digi-icon-x-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-x-h svg.sc-digi-icon-x{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
|
|
9
|
+
const DigiIconXStyle0 = iconXCss;
|
|
10
|
+
|
|
11
|
+
const IconX = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.afTitle = undefined;
|
|
15
|
+
this.afDesc = undefined;
|
|
16
|
+
this.afSvgAriaHidden = true;
|
|
17
|
+
this.afSvgAriaLabelledby = undefined;
|
|
18
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
return (index.h("svg", { key: '08f03b205fb0bb4baa9a17a35165c62ab515ac6a', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
22
|
+
? this.afSvgAriaLabelledby
|
|
23
|
+
: this.afTitle
|
|
24
|
+
? this.titleId
|
|
25
|
+
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '2809b1473fb842f1843fe76566e2e11c64b47274', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '3966f720e79b23d789432dc5c1de498d7817c2b6' }, this.afDesc), index.h("g", { key: '4bd65b97e3311e140c1bfacd068aee84c18c97e4', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, index.h("path", { key: '924bba4b9e83da3466364294378fbc550d3eb404', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
IconX.style = DigiIconXStyle0;
|
|
29
|
+
|
|
30
|
+
exports.digi_icon_x = IconX;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-7a477838.js');
|
|
6
|
+
const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
|
|
7
|
+
const layoutContainerMaxWidth_enum = require('./layout-container-max-width.enum-7e637f44.js');
|
|
8
|
+
|
|
9
|
+
const layoutBlockCss = ".sc-digi-layout-block-h{--digi--layout-block--background--primary:var(--digi--color--background--primary);--digi--layout-block--background--secondary:var(--digi--color--background--secondary);--digi--layout-block--background--tertiary:var(--digi--color--background--sentiment--neutral--primary);--digi--layout-block--background--symbol:var(--digi--color--background--pop-out);--digi--layout-block--background--profile:var(--digi--color--background--brand-primary);display:block}.sc-digi-layout-block-h .digi-layout-block.sc-digi-layout-block{background:var(--BACKGROUND)}.sc-digi-layout-block-h .digi-layout-block--transparent.sc-digi-layout-block{--BACKGROUND:transparent}.sc-digi-layout-block-h .digi-layout-block--primary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--primary)}.sc-digi-layout-block-h .digi-layout-block--secondary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--secondary)}.sc-digi-layout-block-h .digi-layout-block--tertiary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--tertiary)}.sc-digi-layout-block-h .digi-layout-block--symbol.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--symbol)}.sc-digi-layout-block-h .digi-layout-block--profile.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--profile)}";
|
|
10
|
+
const DigiLayoutBlockStyle0 = layoutBlockCss;
|
|
11
|
+
|
|
12
|
+
const LayoutBlock = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this._container = layoutContainerMaxWidth_enum.LayoutBlockContainer.STATIC;
|
|
16
|
+
this.afVariation = layoutBlockVariation_enum.LayoutBlockVariation.PRIMARY;
|
|
17
|
+
this.afContainer = layoutContainerMaxWidth_enum.LayoutBlockContainer.STATIC;
|
|
18
|
+
this.afVerticalPadding = undefined;
|
|
19
|
+
this.afMarginTop = undefined;
|
|
20
|
+
this.afMarginBottom = undefined;
|
|
21
|
+
}
|
|
22
|
+
containerChangeHandler() {
|
|
23
|
+
this._container = this.afContainer;
|
|
24
|
+
}
|
|
25
|
+
componentWillLoad() {
|
|
26
|
+
this.containerChangeHandler();
|
|
27
|
+
}
|
|
28
|
+
get cssModifiers() {
|
|
29
|
+
return {
|
|
30
|
+
'digi-layout-block--transparent': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT,
|
|
31
|
+
'digi-layout-block--primary': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.PRIMARY,
|
|
32
|
+
'digi-layout-block--secondary': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.SECONDARY,
|
|
33
|
+
'digi-layout-block--tertiary': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.TERTIARY,
|
|
34
|
+
'digi-layout-block--symbol': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.SYMBOL,
|
|
35
|
+
'digi-layout-block--profile': this.afVariation === layoutBlockVariation_enum.LayoutBlockVariation.PROFILE
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
return (index.h("div", { key: 'e2feec87a90de06812ec1e0903e731035ab0b90b', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === layoutContainerMaxWidth_enum.LayoutBlockContainer.NONE ? (index.h(index.Fragment, null, index.h("slot", null))) : (index.h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, index.h("slot", null)))));
|
|
40
|
+
}
|
|
41
|
+
static get watchers() { return {
|
|
42
|
+
"afContainer": ["containerChangeHandler"]
|
|
43
|
+
}; }
|
|
44
|
+
};
|
|
45
|
+
LayoutBlock.style = DigiLayoutBlockStyle0;
|
|
46
|
+
|
|
47
|
+
const layoutContainerCss = ".sc-digi-layout-container-h{--digi--layout-container--width:var(--digi--container-width--smaller);--digi--layout-container--gutter:var(--digi--container-gutter--base);--digi--layout-container--vertical-padding:0;--digi--layout-container--margin-top:0;--digi--layout-container--margin-bottom:0}.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{box-sizing:border-box;width:100%;max-width:var(--digi--layout-container--width);padding:var(--digi--layout-container--vertical-padding) var(--digi--layout-container--gutter);margin-left:auto;margin-right:auto;margin-top:var(--digi--layout-container--margin-top);margin-bottom:var(--digi--layout-container--margin-bottom);box-sizing:border-box}@media (min-width: 47.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--small);--digi--layout-container--gutter:var(--digi--container-gutter--small)}}@media (min-width: 48rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--medium);--digi--layout-container--gutter:var(--digi--container-gutter--medium)}}@media (min-width: 61.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--large);--digi--layout-container--gutter:var(--digi--container-gutter--large)}}@media (min-width: 75rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--larger);--digi--layout-container--gutter:var(--digi--container-gutter--larger)}}@media (min-width: 87.5rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--largest);--digi--layout-container--gutter:var(--digi--container-gutter--largest)}.sc-digi-layout-container-h .digi-layout-container--max-width-1200.sc-digi-layout-container{--digi--layout-container--width:var(--digi--global--size--larger)}}.sc-digi-layout-container-h .digi-layout-container--fluid.sc-digi-layout-container{--digi--layout-container--width:none !important}.sc-digi-layout-container-h .digi-layout-container--no-gutter.sc-digi-layout-container{--digi--layout-container--gutter:0}.sc-digi-layout-container-h .digi-layout-container--vertical-padding.sc-digi-layout-container{--digi--layout-container--vertical-padding:var(--digi--padding--large)}.sc-digi-layout-container-h .digi-layout-container--margin-top.sc-digi-layout-container{--digi--layout-container--margin-top:var(--digi--margin--large)}.sc-digi-layout-container-h .digi-layout-container--margin-bottom.sc-digi-layout-container{--digi--layout-container--margin-bottom:var(--digi--margin--large)}";
|
|
48
|
+
const DigiLayoutContainerStyle0 = layoutContainerCss;
|
|
49
|
+
|
|
50
|
+
const LayoutContainer = class {
|
|
51
|
+
constructor(hostRef) {
|
|
52
|
+
index.registerInstance(this, hostRef);
|
|
53
|
+
this._variation = layoutContainerMaxWidth_enum.LayoutContainerVariation.STATIC;
|
|
54
|
+
this.afVariation = layoutContainerMaxWidth_enum.LayoutContainerVariation.STATIC;
|
|
55
|
+
this.afMaxWidth = layoutContainerMaxWidth_enum.LayoutContainerMaxWidth.WIDTH_1400;
|
|
56
|
+
this.afNoGutter = undefined;
|
|
57
|
+
this.afVerticalPadding = undefined;
|
|
58
|
+
this.afMarginTop = undefined;
|
|
59
|
+
this.afMarginBottom = undefined;
|
|
60
|
+
}
|
|
61
|
+
variationChangeHandler() {
|
|
62
|
+
this._variation = this.afVariation;
|
|
63
|
+
}
|
|
64
|
+
componentWillLoad() {
|
|
65
|
+
this.variationChangeHandler();
|
|
66
|
+
}
|
|
67
|
+
get cssModifiers() {
|
|
68
|
+
if (this._variation === layoutContainerMaxWidth_enum.LayoutContainerVariation.NONE) {
|
|
69
|
+
return {};
|
|
70
|
+
}
|
|
71
|
+
return {
|
|
72
|
+
'digi-layout-container': true,
|
|
73
|
+
'digi-layout-container--static': this._variation === layoutContainerMaxWidth_enum.LayoutContainerVariation.STATIC,
|
|
74
|
+
'digi-layout-container--fluid': this._variation === layoutContainerMaxWidth_enum.LayoutContainerVariation.FLUID,
|
|
75
|
+
'digi-layout-container--max-width-1200': this.afMaxWidth === layoutContainerMaxWidth_enum.LayoutContainerMaxWidth.WIDTH_1200,
|
|
76
|
+
'digi-layout-container--no-gutter': this.afNoGutter,
|
|
77
|
+
'digi-layout-container--vertical-padding': this.afVerticalPadding,
|
|
78
|
+
'digi-layout-container--margin-top': this.afMarginTop,
|
|
79
|
+
'digi-layout-container--margin-bottom': this.afMarginBottom
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
render() {
|
|
83
|
+
return (index.h("div", { key: '725053a8cc39249a0415ba129daf1fc150139a9f', class: Object.assign({}, this.cssModifiers) }, index.h("slot", { key: 'c3caff08c7d1df60901d81abc5bbfb7bf9005ef7' })));
|
|
84
|
+
}
|
|
85
|
+
static get watchers() { return {
|
|
86
|
+
"afVariation": ["variationChangeHandler"]
|
|
87
|
+
}; }
|
|
88
|
+
};
|
|
89
|
+
LayoutContainer.style = DigiLayoutContainerStyle0;
|
|
90
|
+
|
|
91
|
+
exports.digi_layout_block = LayoutBlock;
|
|
92
|
+
exports.digi_layout_container = LayoutContainer;
|