@designsystem-se/af 39.2.2 → 39.2.3
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-expandable-accordion.js +18 -11
- package/components/digi-expandable-faq-item.js +21 -14
- package/components/digi-info-card.js +3 -3
- package/custom-elements.json +1 -1
- package/dist/cjs/badge-notification-shape.enum-CEyEo2G5.js +8 -0
- package/dist/cjs/button-size.enum-DgyvMkwE.js +7 -0
- package/dist/cjs/{button-variation.enum-ngMqFLdW.js → button-variation.enum-DkUalo9f.js} +0 -6
- package/dist/cjs/{calendar-week-view-heading-level.enum-BI2f9bbk.js → calendar-week-view-heading-level.enum-NEkm5SUq.js} +0 -7
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-badge-notification.cjs.entry.js +65 -0
- package/dist/cjs/digi-button.cjs.entry.js +131 -0
- package/dist/cjs/{digi-badge-notification_8.cjs.entry.js → digi-calendar-week-view.cjs.entry.js} +72 -645
- package/dist/cjs/{digi-calendar-datepicker.cjs.entry.js → digi-calendar_19.cjs.entry.js} +1613 -56
- package/dist/cjs/digi-code-block_3.cjs.entry.js +8 -13
- package/dist/cjs/digi-code-example.cjs.entry.js +4 -3
- package/dist/cjs/digi-dialog.cjs.entry.js +8 -13
- package/dist/cjs/digi-footer.cjs.entry.js +7 -12
- package/dist/cjs/digi-form-error-list.cjs.entry.js +7 -12
- package/dist/cjs/digi-form-file-upload.cjs.entry.js +9 -10
- package/dist/cjs/digi-form-input-search.cjs.entry.js +5 -6
- package/dist/cjs/digi-form-receipt.cjs.entry.js +7 -12
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +8 -13
- package/dist/cjs/digi-header-navigation.cjs.entry.js +7 -12
- package/dist/cjs/digi-header.cjs.entry.js +7 -12
- package/dist/cjs/digi-info-card.cjs.entry.js +3 -3
- package/dist/cjs/digi-navigation-pagination.cjs.entry.js +7 -12
- package/dist/cjs/digi-notification-alert.cjs.entry.js +7 -12
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +7 -12
- package/dist/cjs/digi-tablist-panel.cjs.entry.js +20 -0
- package/dist/cjs/digi-tablist.cjs.entry.js +312 -0
- package/dist/cjs/digi-title-logo.cjs.entry.js +7 -12
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +9 -14
- package/dist/cjs/{form-input-type.enum-DvF_MTHK.js → form-input-type.enum-CCCcY8gv.js} +7 -0
- package/dist/cjs/{form-file-upload-variation.enum-xcEOoggr.js → form-validation-message-variation.enum-DgkifAnP.js} +7 -0
- package/dist/cjs/index-Cn1hHaSy.js +16 -40
- package/dist/cjs/{index-Bdlw-Iuy.js → index-DUQtADgG.js} +189 -19
- package/dist/cjs/index.cjs.js +64 -69
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{typography-variation.enum-BDSt7CVI.js → typography-variation.enum-CVUvogxJ.js} +86 -0
- package/dist/collection/components/_expandable/expandable-accordion/expandable-accordion.js +18 -11
- package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.js +21 -14
- package/dist/collection/components/_info-card/info-card/info-card.js +5 -5
- package/dist/collection/design-tokens/components/_logo.variables.scss +0 -2
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-0230ec9b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-0394e694.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-04bbbd14.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-0cf25433.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-17824a0b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-25815f15.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-3d4ac22e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-4aefce1e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-5ee5766d.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-870a00f8.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-88dc2ed4.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-9n7Okhf1.js +1 -0
- package/dist/digi-arbetsformedlingen/p-C6S1HfeA.js +1 -0
- package/dist/digi-arbetsformedlingen/p-C7xgnp99.js +1 -0
- package/dist/digi-arbetsformedlingen/p-CKoZU0-H.js +1 -0
- package/dist/digi-arbetsformedlingen/p-Cnyfh_8_.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-DwNlf6Sh.js → p-DH_-wpLB.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-Zivp2NJB.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a29b6fff.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-375ea6f8.entry.js → p-ace2e5fd.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-b411a549.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-b7712996.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-bfccf413.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-cdd65abb.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-d4406627.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-dd95c75e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e5396b1e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e7c10f6a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f91295ac.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ffb4fac6.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-y5Nm4oWF.js +1 -0
- package/dist/esm/badge-notification-shape.enum-CKoZU0-H.js +8 -0
- package/dist/esm/button-size.enum-C7xgnp99.js +7 -0
- package/dist/esm/{button-variation.enum-BMQm4N5I.js → button-variation.enum-y5Nm4oWF.js} +1 -7
- package/dist/esm/{calendar-week-view-heading-level.enum-BBOpiDGx.js → calendar-week-view-heading-level.enum-DH_-wpLB.js} +1 -8
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-badge-notification.entry.js +63 -0
- package/dist/esm/digi-button.entry.js +129 -0
- package/dist/esm/{digi-badge-notification_8.entry.js → digi-calendar-week-view.entry.js} +6 -572
- package/dist/esm/{digi-calendar-datepicker.entry.js → digi-calendar_19.entry.js} +1557 -18
- package/dist/esm/digi-code-block_3.entry.js +7 -12
- package/dist/esm/digi-code-example.entry.js +2 -1
- package/dist/esm/digi-dialog.entry.js +7 -12
- package/dist/esm/digi-footer.entry.js +7 -12
- package/dist/esm/digi-form-error-list.entry.js +7 -12
- package/dist/esm/digi-form-file-upload.entry.js +1 -2
- package/dist/esm/digi-form-input-search.entry.js +1 -2
- package/dist/esm/digi-form-receipt.entry.js +7 -12
- package/dist/esm/digi-form-select-filter.entry.js +7 -12
- package/dist/esm/digi-header-navigation.entry.js +7 -12
- package/dist/esm/digi-header.entry.js +7 -12
- package/dist/esm/digi-info-card.entry.js +3 -3
- package/dist/esm/digi-navigation-pagination.entry.js +7 -12
- package/dist/esm/digi-notification-alert.entry.js +7 -12
- package/dist/esm/digi-notification-error-page.entry.js +7 -12
- package/dist/esm/digi-tablist-panel.entry.js +18 -0
- package/dist/esm/digi-tablist.entry.js +310 -0
- package/dist/esm/digi-title-logo.entry.js +7 -12
- package/dist/esm/digi-tools-feedback.entry.js +7 -12
- package/dist/esm/{form-input-type.enum-BSJH8Lpg.js → form-input-type.enum-C6S1HfeA.js} +8 -1
- package/dist/esm/{form-file-upload-variation.enum-BfyJgcLA.js → form-validation-message-variation.enum-9n7Okhf1.js} +8 -1
- package/dist/esm/index-BnKuq1L7.js +16 -40
- package/dist/esm/{index-B1Je6g2n.js → index-Cnyfh_8_.js} +170 -3
- package/dist/esm/index.js +7 -12
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{typography-variation.enum-4smNltRI.js → typography-variation.enum-Zivp2NJB.js} +87 -1
- package/dist/types/components/_info-card/info-card/info-card.d.ts +2 -2
- package/dist/types/components.d.ts +4 -4
- package/hydrate/index.js +42 -28
- package/hydrate/index.mjs +42 -28
- package/package.json +1 -1
- package/dist/cjs/digi-calendar_2.cjs.entry.js +0 -490
- package/dist/cjs/digi-expandable-accordion.cjs.entry.js +0 -121
- package/dist/cjs/digi-expandable-faq-item.cjs.entry.js +0 -119
- package/dist/cjs/digi-form-input.cjs.entry.js +0 -205
- package/dist/cjs/digi-form-label_3.cjs.entry.js +0 -147
- package/dist/cjs/digi-form-select_2.cjs.entry.js +0 -201
- package/dist/cjs/digi-icon-chevron-down.cjs.entry.js +0 -28
- package/dist/cjs/digi-icon-validation-error_2.cjs.entry.js +0 -51
- package/dist/cjs/digi-typography-heading-jumbo.cjs.entry.js +0 -46
- package/dist/cjs/digi-util-keydown-handler.cjs.entry.js +0 -81
- package/dist/cjs/expandable-accordion-header-level.enum-CjL9V3Kt.js +0 -11
- package/dist/cjs/expandable-faq-item-variation.enum-aKkYAQgd.js +0 -18
- package/dist/cjs/form-input-search-variation.enum-VVfvlVeM.js +0 -8
- package/dist/cjs/form-input-variation.enum-kpoXNUuI.js +0 -29
- package/dist/cjs/form-select-variation.enum-e6wjWyaS.js +0 -16
- package/dist/cjs/form-validation-message-variation.enum-BA5nmCiw.js +0 -8
- package/dist/cjs/index-Snltmefx.js +0 -174
- package/dist/cjs/index-r0sb9TCr.js +0 -66
- package/dist/cjs/typography-heading-jumbo-variation.enum-Di1Jeh0G.js +0 -17
- package/dist/digi-arbetsformedlingen/p-037a35bd.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-0f7e995a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-26f6a310.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-3239fb1a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-3b42582a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-3c1f9629.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4384644b.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4ddcae7b.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4smNltRI.js +0 -1
- package/dist/digi-arbetsformedlingen/p-569c628c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-668d38d9.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-66f34ca5.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-6931825c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-6cb1c6ea.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-71a8478d.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7688502e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-91265ee0.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-9a4eecde.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-9df345c4.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-B8hpiXmh.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BBOpiDGx.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BMQm4N5I.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BSJH8Lpg.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BfyJgcLA.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BixPaBHw.js +0 -1
- package/dist/digi-arbetsformedlingen/p-BvWKyXb_.js +0 -1
- package/dist/digi-arbetsformedlingen/p-C6B2KRZo.js +0 -1
- package/dist/digi-arbetsformedlingen/p-CgSR-RTl.js +0 -1
- package/dist/digi-arbetsformedlingen/p-DCS1KcvC.js +0 -1
- package/dist/digi-arbetsformedlingen/p-DNjGvZvz.js +0 -1
- package/dist/digi-arbetsformedlingen/p-DfWZa2Wv.js +0 -1
- package/dist/digi-arbetsformedlingen/p-a9a1bf57.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-beebbc90.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-c7ade486.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d065e751.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d07a1377.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d0b3c35b.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d150094c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-df8efa59.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-e2b0b070.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-e7b311da.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-xwICssEK.js +0 -1
- package/dist/esm/digi-calendar_2.entry.js +0 -487
- package/dist/esm/digi-expandable-accordion.entry.js +0 -119
- package/dist/esm/digi-expandable-faq-item.entry.js +0 -117
- package/dist/esm/digi-form-input.entry.js +0 -203
- package/dist/esm/digi-form-label_3.entry.js +0 -143
- package/dist/esm/digi-form-select_2.entry.js +0 -198
- package/dist/esm/digi-icon-chevron-down.entry.js +0 -26
- package/dist/esm/digi-icon-validation-error_2.entry.js +0 -48
- package/dist/esm/digi-typography-heading-jumbo.entry.js +0 -44
- package/dist/esm/digi-util-keydown-handler.entry.js +0 -79
- package/dist/esm/expandable-accordion-header-level.enum-DwNlf6Sh.js +0 -11
- package/dist/esm/expandable-faq-item-variation.enum-C6B2KRZo.js +0 -18
- package/dist/esm/form-input-search-variation.enum-BvWKyXb_.js +0 -8
- package/dist/esm/form-input-variation.enum-DfWZa2Wv.js +0 -29
- package/dist/esm/form-select-variation.enum-DCS1KcvC.js +0 -16
- package/dist/esm/form-validation-message-variation.enum-B8hpiXmh.js +0 -8
- package/dist/esm/index-BixPaBHw.js +0 -170
- package/dist/esm/index-BsIL3T_0.js +0 -63
- package/dist/esm/typography-heading-jumbo-variation.enum-DNjGvZvz.js +0 -17
package/dist/cjs/{digi-badge-notification_8.cjs.entry.js → digi-calendar-week-view.cjs.entry.js}
RENAMED
|
@@ -1,196 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-Cn1hHaSy.js');
|
|
4
|
-
var calendarWeekViewHeadingLevel_enum = require('./calendar-week-view-heading-level.enum-BI2f9bbk.js');
|
|
5
|
-
var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
|
|
6
|
-
var buttonVariation_enum = require('./button-variation.enum-ngMqFLdW.js');
|
|
7
|
-
var buttonType_enum = require('./button-type.enum-2UH0KkO-.js');
|
|
3
|
+
var index$1 = require('./index-Cn1hHaSy.js');
|
|
8
4
|
var text = require('./text-Cu3CaHGj.js');
|
|
9
|
-
var index
|
|
5
|
+
var index = require('./index-DUQtADgG.js');
|
|
6
|
+
var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
|
|
10
7
|
var logger_util = require('./logger.util-DUhrcCTY.js');
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
const badgeNotificationCss = () => `.sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}`;
|
|
15
|
-
|
|
16
|
-
const BadgeNotification = class {
|
|
17
|
-
constructor(hostRef) {
|
|
18
|
-
index.registerInstance(this, hostRef);
|
|
19
|
-
this.afShape = calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.PILL;
|
|
20
|
-
/**
|
|
21
|
-
* Värdet som ska skrivas ut i notifieringen.
|
|
22
|
-
* @en The value to be displayed in the badge.
|
|
23
|
-
*/
|
|
24
|
-
this.afValue = '';
|
|
25
|
-
}
|
|
26
|
-
afValueChangeHandler() {
|
|
27
|
-
this.checkProps();
|
|
28
|
-
}
|
|
29
|
-
get cssModifiers() {
|
|
30
|
-
return {
|
|
31
|
-
'digi-badge-notification--circle': this.afShape === calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.CIRCLE,
|
|
32
|
-
'digi-badge-notification--oval': this.afShape === calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.OVAL,
|
|
33
|
-
'digi-badge-notification--pill': this.afShape === calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.PILL
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
componentWillLoad() {
|
|
37
|
-
this.checkProps();
|
|
38
|
-
}
|
|
39
|
-
checkProps() {
|
|
40
|
-
let valueAsNumber;
|
|
41
|
-
if (this.afValue !== null &&
|
|
42
|
-
this.afValue !== undefined &&
|
|
43
|
-
this.afValue !== '') {
|
|
44
|
-
valueAsNumber = Number(this.afValue);
|
|
45
|
-
}
|
|
46
|
-
if (!isNaN(valueAsNumber)) {
|
|
47
|
-
if (valueAsNumber >= 100) {
|
|
48
|
-
this.afValue = '+99';
|
|
49
|
-
this.afShape = calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.PILL;
|
|
50
|
-
}
|
|
51
|
-
else if (valueAsNumber < 100 && valueAsNumber >= 10) {
|
|
52
|
-
this.afShape = calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.OVAL;
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
this.afShape = calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.CIRCLE;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
this.afShape = calendarWeekViewHeadingLevel_enum.BadgeNotificationShape.PILL;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
render() {
|
|
63
|
-
return (index.h(index.Host, { key: '2a3f82fe0bf3d3b43ee858a0184fb7d0045656f7' }, index.h("div", { key: 'f652cc5b76bdc72b4778fd16a1a9d270fe2400ea', class: Object.assign({ 'digi-badge-notification': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, index.h("div", { key: 'ece907bc0004e24eafd221ead41300f7acd803ea', class: `${this.afShape}` }, index.h("span", { key: 'c83210ebbbcad768073095e52b601adc80a0645d' }, this.afValue)))));
|
|
64
|
-
}
|
|
65
|
-
static get watchers() { return {
|
|
66
|
-
"afValue": [{
|
|
67
|
-
"afValueChangeHandler": 0
|
|
68
|
-
}]
|
|
69
|
-
}; }
|
|
70
|
-
};
|
|
71
|
-
BadgeNotification.style = badgeNotificationCss();
|
|
72
|
-
|
|
73
|
-
const buttonCss = () => `@charset "UTF-8";.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--padding--large:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--box-shadow:none;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-large.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--large);--PADDING:var(--digi--button--padding--large);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);box-shadow:var(--digi--button--box-shadow);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}`;
|
|
74
|
-
|
|
75
|
-
const Button = class {
|
|
76
|
-
constructor(hostRef) {
|
|
77
|
-
index.registerInstance(this, hostRef);
|
|
78
|
-
this.afOnClick = index.createEvent(this, "afOnClick", 7);
|
|
79
|
-
this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
|
|
80
|
-
this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
|
|
81
|
-
this.afOnReady = index.createEvent(this, "afOnReady", 3);
|
|
82
|
-
/**
|
|
83
|
-
* Sätter knappens storlek. 'medium' är förvalt.
|
|
84
|
-
* @en Set button size. Defaults to medium size.
|
|
85
|
-
*/
|
|
86
|
-
this.afSize = buttonVariation_enum.ButtonSize.MEDIUM;
|
|
87
|
-
/**
|
|
88
|
-
* Sätt variant. Om varianten är 'tertiary' så krävs även en ikon.
|
|
89
|
-
* @en Set button variation. If set to FUNCTION, the button also needs an icon.
|
|
90
|
-
*/
|
|
91
|
-
this.afVariation = buttonVariation_enum.ButtonVariation.PRIMARY;
|
|
92
|
-
/**
|
|
93
|
-
* Sätt attributet 'type'.
|
|
94
|
-
* @en Set button `type` attribute.
|
|
95
|
-
*/
|
|
96
|
-
this.afType = buttonType_enum.ButtonType.BUTTON;
|
|
97
|
-
/**
|
|
98
|
-
* Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
|
|
99
|
-
* @en Input id attribute. Defaults to random string.
|
|
100
|
-
*/
|
|
101
|
-
this.afId = randomIdGenerator_util.randomIdGenerator('digi-button');
|
|
102
|
-
/**
|
|
103
|
-
* Sätter knappens bredd till 100%.
|
|
104
|
-
* @en Set button width to 100%.
|
|
105
|
-
*/
|
|
106
|
-
this.afFullWidth = false;
|
|
107
|
-
}
|
|
108
|
-
fullWidthHandler() {
|
|
109
|
-
this.isFullSize = this.afFullWidth;
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
|
|
113
|
-
* @en Returns a reference to the button element. Handy for setting focus programmatically.
|
|
114
|
-
*/
|
|
115
|
-
async afMGetButtonElement() {
|
|
116
|
-
return this._button;
|
|
117
|
-
}
|
|
118
|
-
componentWillLoad() {
|
|
119
|
-
this.setHasIcon();
|
|
120
|
-
this.fullWidthHandler();
|
|
121
|
-
}
|
|
122
|
-
componentWillUpdate() {
|
|
123
|
-
this.setHasIcon();
|
|
124
|
-
}
|
|
125
|
-
componentDidLoad() {
|
|
126
|
-
this.afOnReady.emit();
|
|
127
|
-
}
|
|
128
|
-
setHasIcon() {
|
|
129
|
-
const icon = !!this.hostElement.querySelector('[slot="icon"]');
|
|
130
|
-
const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
|
|
131
|
-
if (icon) {
|
|
132
|
-
this.hasIcon = icon;
|
|
133
|
-
}
|
|
134
|
-
if (iconSecondary) {
|
|
135
|
-
this.hasIconSecondary = iconSecondary;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
get cssModifiers() {
|
|
139
|
-
return {
|
|
140
|
-
[`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
|
|
141
|
-
[`digi-button--size-${this.afSize}`]: !!this.afSize,
|
|
142
|
-
'digi-button--icon': this.hasIcon,
|
|
143
|
-
'digi-button--icon-secondary': this.hasIconSecondary,
|
|
144
|
-
'digi-button--full-width': this.isFullSize
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
get pressedState() {
|
|
148
|
-
if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
return this.afAriaPressed ? 'true' : 'false';
|
|
152
|
-
}
|
|
153
|
-
get expandedState() {
|
|
154
|
-
if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
return this.afAriaExpanded ? 'true' : 'false';
|
|
158
|
-
}
|
|
159
|
-
get hasPopup() {
|
|
160
|
-
if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
return this.afAriaHaspopup ? 'true' : 'false';
|
|
164
|
-
}
|
|
165
|
-
clickHandler(e) {
|
|
166
|
-
this.afOnClick.emit(e);
|
|
167
|
-
}
|
|
168
|
-
focusHandler(e) {
|
|
169
|
-
this.afOnFocus.emit(e);
|
|
170
|
-
}
|
|
171
|
-
blurHandler(e) {
|
|
172
|
-
this.afOnBlur.emit(e);
|
|
173
|
-
}
|
|
174
|
-
render() {
|
|
175
|
-
return (index.h(index.Host, { key: '3a398d75ad83e3caa9ec54928544d5bf8315d30f' }, index.h("button", { key: '2159552d7e8064acbb6da5c02c28ead3d4985e85', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
|
|
176
|
-
var _a, _b, _c;
|
|
177
|
-
this._button = el;
|
|
178
|
-
(_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
|
|
179
|
-
// Stencil has a bug wiith form attribute so we need to set it like this
|
|
180
|
-
// https://github.com/ionic-team/stencil/issues/2703
|
|
181
|
-
this.afForm
|
|
182
|
-
? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
|
|
183
|
-
: (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
|
|
184
|
-
}, id: this.afId, tabindex: this.afTabindex, "aria-label": this.afAriaLabel, "aria-labelledby": this.afAriaLabelledby, "aria-controls": this.afAriaControls, "aria-pressed": this.pressedState, "aria-expanded": this.expandedState, "aria-haspopup": this.hasPopup, "aria-current": this.afAriaCurrent, "aria-checked": this.afAriaChecked, onClick: (e) => this.clickHandler(e), onFocus: (e) => this.focusHandler(e), onBlur: (e) => this.blurHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null, form: this.afForm, lang: this.afLang, dir: this.afDir }, this.hasIcon && (index.h("span", { key: '1188d5cb005a51e4e065b70663d06877db3a1477', class: "digi-button__icon" }, index.h("slot", { key: 'f90319563c18e1f82fa13f478b4d4d13ce3e9bf7', name: "icon" }))), index.h("span", { key: '17dce8eed2e845ca6166cf85a1c0252c2c0b8037', class: "digi-button__text" }, index.h("slot", { key: '2f637e48b837ecd0f0f2333349f328c497aee650' })), this.hasIconSecondary && (index.h("span", { key: '49ffd3361b0cc00c074e1ce332dab2de33127fcc', class: "digi-button__icon digi-button__icon--secondary" }, index.h("slot", { key: '367d3ba37e2fd0b7e83d600f35d02d4df303c1c0', name: "icon-secondary" }))))));
|
|
185
|
-
}
|
|
186
|
-
get hostElement() { return index.getElement(this); }
|
|
187
|
-
static get watchers() { return {
|
|
188
|
-
"afFullWidth": [{
|
|
189
|
-
"fullWidthHandler": 0
|
|
190
|
-
}]
|
|
191
|
-
}; }
|
|
192
|
-
};
|
|
193
|
-
Button.style = buttonCss();
|
|
8
|
+
var buttonVariation_enum = require('./button-variation.enum-DkUalo9f.js');
|
|
9
|
+
var calendarWeekViewHeadingLevel_enum = require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
|
|
194
10
|
|
|
195
11
|
/**
|
|
196
12
|
* @name addDays
|
|
@@ -216,9 +32,9 @@ Button.style = buttonCss();
|
|
|
216
32
|
*/
|
|
217
33
|
|
|
218
34
|
function addDays(dirtyDate, dirtyAmount) {
|
|
219
|
-
index
|
|
220
|
-
var date = index
|
|
221
|
-
var amount = index
|
|
35
|
+
index.requiredArgs(2, arguments);
|
|
36
|
+
var date = index.toDate(dirtyDate);
|
|
37
|
+
var amount = index.toInteger(dirtyAmount);
|
|
222
38
|
|
|
223
39
|
if (isNaN(amount)) {
|
|
224
40
|
return new Date(NaN);
|
|
@@ -266,18 +82,18 @@ function addDays(dirtyDate, dirtyAmount) {
|
|
|
266
82
|
*/
|
|
267
83
|
|
|
268
84
|
function startOfWeek(dirtyDate, dirtyOptions) {
|
|
269
|
-
index
|
|
85
|
+
index.requiredArgs(1, arguments);
|
|
270
86
|
var options = dirtyOptions || {};
|
|
271
87
|
var locale = options.locale;
|
|
272
88
|
var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
|
|
273
|
-
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index
|
|
274
|
-
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index
|
|
89
|
+
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
|
|
90
|
+
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
|
|
275
91
|
|
|
276
92
|
if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
|
|
277
93
|
throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
|
|
278
94
|
}
|
|
279
95
|
|
|
280
|
-
var date = index
|
|
96
|
+
var date = index.toDate(dirtyDate);
|
|
281
97
|
var day = date.getDay();
|
|
282
98
|
var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
|
|
283
99
|
date.setDate(date.getDate() - diff);
|
|
@@ -311,7 +127,7 @@ function startOfWeek(dirtyDate, dirtyOptions) {
|
|
|
311
127
|
*/
|
|
312
128
|
|
|
313
129
|
function startOfISOWeek(dirtyDate) {
|
|
314
|
-
index
|
|
130
|
+
index.requiredArgs(1, arguments);
|
|
315
131
|
return startOfWeek(dirtyDate, {
|
|
316
132
|
weekStartsOn: 1
|
|
317
133
|
});
|
|
@@ -348,8 +164,8 @@ function startOfISOWeek(dirtyDate) {
|
|
|
348
164
|
*/
|
|
349
165
|
|
|
350
166
|
function getISOWeekYear(dirtyDate) {
|
|
351
|
-
index
|
|
352
|
-
var date = index
|
|
167
|
+
index.requiredArgs(1, arguments);
|
|
168
|
+
var date = index.toDate(dirtyDate);
|
|
353
169
|
var year = date.getFullYear();
|
|
354
170
|
var fourthOfJanuaryOfNextYear = new Date(0);
|
|
355
171
|
fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
|
|
@@ -396,7 +212,7 @@ function getISOWeekYear(dirtyDate) {
|
|
|
396
212
|
*/
|
|
397
213
|
|
|
398
214
|
function startOfISOWeekYear(dirtyDate) {
|
|
399
|
-
index
|
|
215
|
+
index.requiredArgs(1, arguments);
|
|
400
216
|
var year = getISOWeekYear(dirtyDate);
|
|
401
217
|
var fourthOfJanuary = new Date(0);
|
|
402
218
|
fourthOfJanuary.setFullYear(year, 0, 4);
|
|
@@ -503,8 +319,8 @@ var MILLISECONDS_IN_DAY = 86400000; // This function will be a part of public AP
|
|
|
503
319
|
// See issue: https://github.com/date-fns/date-fns/issues/376
|
|
504
320
|
|
|
505
321
|
function getUTCDayOfYear(dirtyDate) {
|
|
506
|
-
index
|
|
507
|
-
var date = index
|
|
322
|
+
index.requiredArgs(1, arguments);
|
|
323
|
+
var date = index.toDate(dirtyDate);
|
|
508
324
|
var timestamp = date.getTime();
|
|
509
325
|
date.setUTCMonth(0, 1);
|
|
510
326
|
date.setUTCHours(0, 0, 0, 0);
|
|
@@ -611,7 +427,7 @@ var formatters = {
|
|
|
611
427
|
},
|
|
612
428
|
// Local week-numbering year
|
|
613
429
|
Y: function (date, token, localize, options) {
|
|
614
|
-
var signedWeekYear = index
|
|
430
|
+
var signedWeekYear = index.getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript)
|
|
615
431
|
|
|
616
432
|
var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; // Two digit year
|
|
617
433
|
|
|
@@ -632,7 +448,7 @@ var formatters = {
|
|
|
632
448
|
},
|
|
633
449
|
// ISO week-numbering year
|
|
634
450
|
R: function (date, token) {
|
|
635
|
-
var isoWeekYear = index
|
|
451
|
+
var isoWeekYear = index.getUTCISOWeekYear(date); // Padding
|
|
636
452
|
|
|
637
453
|
return addLeadingZeros(isoWeekYear, token.length);
|
|
638
454
|
},
|
|
@@ -815,7 +631,7 @@ var formatters = {
|
|
|
815
631
|
},
|
|
816
632
|
// Local week of year
|
|
817
633
|
w: function (date, token, localize, options) {
|
|
818
|
-
var week = index
|
|
634
|
+
var week = index.getUTCWeek(date, options);
|
|
819
635
|
|
|
820
636
|
if (token === 'wo') {
|
|
821
637
|
return localize.ordinalNumber(week, {
|
|
@@ -827,7 +643,7 @@ var formatters = {
|
|
|
827
643
|
},
|
|
828
644
|
// ISO week of year
|
|
829
645
|
I: function (date, token, localize) {
|
|
830
|
-
var isoWeek = index
|
|
646
|
+
var isoWeek = index.getUTCISOWeek(date);
|
|
831
647
|
|
|
832
648
|
if (token === 'Io') {
|
|
833
649
|
return localize.ordinalNumber(isoWeek, {
|
|
@@ -1700,21 +1516,21 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
|
|
|
1700
1516
|
*/
|
|
1701
1517
|
|
|
1702
1518
|
function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
|
|
1703
|
-
index
|
|
1519
|
+
index.requiredArgs(2, arguments);
|
|
1704
1520
|
var formatStr = String(dirtyFormatStr);
|
|
1705
1521
|
var options = dirtyOptions || {};
|
|
1706
|
-
var locale = options.locale || index
|
|
1522
|
+
var locale = options.locale || index.locale;
|
|
1707
1523
|
var localeFirstWeekContainsDate = locale.options && locale.options.firstWeekContainsDate;
|
|
1708
|
-
var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : index
|
|
1709
|
-
var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : index
|
|
1524
|
+
var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : index.toInteger(localeFirstWeekContainsDate);
|
|
1525
|
+
var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : index.toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
|
|
1710
1526
|
|
|
1711
1527
|
if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
|
|
1712
1528
|
throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
|
|
1713
1529
|
}
|
|
1714
1530
|
|
|
1715
1531
|
var localeWeekStartsOn = locale.options && locale.options.weekStartsOn;
|
|
1716
|
-
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index
|
|
1717
|
-
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index
|
|
1532
|
+
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
|
|
1533
|
+
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
|
|
1718
1534
|
|
|
1719
1535
|
if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
|
|
1720
1536
|
throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
|
|
@@ -1728,17 +1544,17 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
|
|
|
1728
1544
|
throw new RangeError('locale must contain formatLong property');
|
|
1729
1545
|
}
|
|
1730
1546
|
|
|
1731
|
-
var originalDate = index
|
|
1547
|
+
var originalDate = index.toDate(dirtyDate);
|
|
1732
1548
|
|
|
1733
|
-
if (!index
|
|
1549
|
+
if (!index.isValid(originalDate)) {
|
|
1734
1550
|
throw new RangeError('Invalid time value');
|
|
1735
1551
|
} // Convert the date in system timezone to the same date in UTC+00:00 timezone.
|
|
1736
1552
|
// This ensures that when UTC functions will be implemented, locales will be compatible with them.
|
|
1737
1553
|
// See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
|
|
1738
1554
|
|
|
1739
1555
|
|
|
1740
|
-
var timezoneOffset = index
|
|
1741
|
-
var utcDate = index
|
|
1556
|
+
var timezoneOffset = index.getTimezoneOffsetInMilliseconds(originalDate);
|
|
1557
|
+
var utcDate = index.subMilliseconds(originalDate, timezoneOffset);
|
|
1742
1558
|
var formatterOptions = {
|
|
1743
1559
|
firstWeekContainsDate: firstWeekContainsDate,
|
|
1744
1560
|
weekStartsOn: weekStartsOn,
|
|
@@ -1749,7 +1565,7 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
|
|
|
1749
1565
|
var firstCharacter = substring[0];
|
|
1750
1566
|
|
|
1751
1567
|
if (firstCharacter === 'p' || firstCharacter === 'P') {
|
|
1752
|
-
var longFormatter = index
|
|
1568
|
+
var longFormatter = index.longFormatters[firstCharacter];
|
|
1753
1569
|
return longFormatter(substring, locale.formatLong, formatterOptions);
|
|
1754
1570
|
}
|
|
1755
1571
|
|
|
@@ -1769,12 +1585,12 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
|
|
|
1769
1585
|
var formatter = formatters[firstCharacter];
|
|
1770
1586
|
|
|
1771
1587
|
if (formatter) {
|
|
1772
|
-
if (!options.useAdditionalWeekYearTokens && index
|
|
1773
|
-
index
|
|
1588
|
+
if (!options.useAdditionalWeekYearTokens && index.isProtectedWeekYearToken(substring)) {
|
|
1589
|
+
index.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
|
|
1774
1590
|
}
|
|
1775
1591
|
|
|
1776
|
-
if (!options.useAdditionalDayOfYearTokens && index
|
|
1777
|
-
index
|
|
1592
|
+
if (!options.useAdditionalDayOfYearTokens && index.isProtectedDayOfYearToken(substring)) {
|
|
1593
|
+
index.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
|
|
1778
1594
|
}
|
|
1779
1595
|
|
|
1780
1596
|
return formatter(utcDate, substring, locale.localize, formatterOptions);
|
|
@@ -1819,8 +1635,8 @@ var MILLISECONDS_IN_WEEK = 604800000;
|
|
|
1819
1635
|
*/
|
|
1820
1636
|
|
|
1821
1637
|
function getISOWeek(dirtyDate) {
|
|
1822
|
-
index
|
|
1823
|
-
var date = index
|
|
1638
|
+
index.requiredArgs(1, arguments);
|
|
1639
|
+
var date = index.toDate(dirtyDate);
|
|
1824
1640
|
var diff = startOfISOWeek(date).getTime() - startOfISOWeekYear(date).getTime(); // Round the number of days to the nearest integer
|
|
1825
1641
|
// because the number of milliseconds in a week is not constant
|
|
1826
1642
|
// (e.g. it's different in the week of the daylight saving time clock shift)
|
|
@@ -1852,8 +1668,8 @@ function getISOWeek(dirtyDate) {
|
|
|
1852
1668
|
*/
|
|
1853
1669
|
|
|
1854
1670
|
function subDays(dirtyDate, dirtyAmount) {
|
|
1855
|
-
index
|
|
1856
|
-
var amount = index
|
|
1671
|
+
index.requiredArgs(2, arguments);
|
|
1672
|
+
var amount = index.toInteger(dirtyAmount);
|
|
1857
1673
|
return addDays(dirtyDate, -amount);
|
|
1858
1674
|
}
|
|
1859
1675
|
|
|
@@ -1889,19 +1705,19 @@ function subDays(dirtyDate, dirtyAmount) {
|
|
|
1889
1705
|
* //=> Sun Sep 07 2014 00:00:00
|
|
1890
1706
|
*/
|
|
1891
1707
|
function setDay(dirtyDate, dirtyDay, dirtyOptions) {
|
|
1892
|
-
index
|
|
1708
|
+
index.requiredArgs(2, arguments);
|
|
1893
1709
|
var options = {};
|
|
1894
1710
|
var locale = options.locale;
|
|
1895
1711
|
var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
|
|
1896
|
-
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index
|
|
1897
|
-
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index
|
|
1712
|
+
var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
|
|
1713
|
+
var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
|
|
1898
1714
|
|
|
1899
1715
|
if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
|
|
1900
1716
|
throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
|
|
1901
1717
|
}
|
|
1902
1718
|
|
|
1903
|
-
var date = index
|
|
1904
|
-
var day = index
|
|
1719
|
+
var date = index.toDate(dirtyDate);
|
|
1720
|
+
var day = index.toInteger(dirtyDay);
|
|
1905
1721
|
var currentDay = date.getDay();
|
|
1906
1722
|
var remainder = day % 7;
|
|
1907
1723
|
var dayIndex = (remainder + 7) % 7;
|
|
@@ -2023,15 +1839,15 @@ var dateTimeFormats = {
|
|
|
2023
1839
|
short: '{{date}} {{time}}'
|
|
2024
1840
|
};
|
|
2025
1841
|
var formatLong = {
|
|
2026
|
-
date: index
|
|
1842
|
+
date: index.buildFormatLongFn({
|
|
2027
1843
|
formats: dateFormats,
|
|
2028
1844
|
defaultWidth: 'full'
|
|
2029
1845
|
}),
|
|
2030
|
-
time: index
|
|
1846
|
+
time: index.buildFormatLongFn({
|
|
2031
1847
|
formats: timeFormats,
|
|
2032
1848
|
defaultWidth: 'full'
|
|
2033
1849
|
}),
|
|
2034
|
-
dateTime: index
|
|
1850
|
+
dateTime: index.buildFormatLongFn({
|
|
2035
1851
|
formats: dateTimeFormats,
|
|
2036
1852
|
defaultWidth: 'full'
|
|
2037
1853
|
})
|
|
@@ -2153,26 +1969,26 @@ function ordinalNumber(dirtyNumber) {
|
|
|
2153
1969
|
|
|
2154
1970
|
var localize = {
|
|
2155
1971
|
ordinalNumber: ordinalNumber,
|
|
2156
|
-
era: index
|
|
1972
|
+
era: index.buildLocalizeFn({
|
|
2157
1973
|
values: eraValues,
|
|
2158
1974
|
defaultWidth: 'wide'
|
|
2159
1975
|
}),
|
|
2160
|
-
quarter: index
|
|
1976
|
+
quarter: index.buildLocalizeFn({
|
|
2161
1977
|
values: quarterValues,
|
|
2162
1978
|
defaultWidth: 'wide',
|
|
2163
1979
|
argumentCallback: function (quarter) {
|
|
2164
1980
|
return Number(quarter) - 1;
|
|
2165
1981
|
}
|
|
2166
1982
|
}),
|
|
2167
|
-
month: index
|
|
1983
|
+
month: index.buildLocalizeFn({
|
|
2168
1984
|
values: monthValues,
|
|
2169
1985
|
defaultWidth: 'wide'
|
|
2170
1986
|
}),
|
|
2171
|
-
day: index
|
|
1987
|
+
day: index.buildLocalizeFn({
|
|
2172
1988
|
values: dayValues,
|
|
2173
1989
|
defaultWidth: 'wide'
|
|
2174
1990
|
}),
|
|
2175
|
-
dayPeriod: index
|
|
1991
|
+
dayPeriod: index.buildLocalizeFn({
|
|
2176
1992
|
values: dayPeriodValues,
|
|
2177
1993
|
defaultWidth: 'wide',
|
|
2178
1994
|
formattingValues: formattingDayPeriodValues,
|
|
@@ -2232,20 +2048,20 @@ var parseDayPeriodPatterns = {
|
|
|
2232
2048
|
}
|
|
2233
2049
|
};
|
|
2234
2050
|
var match = {
|
|
2235
|
-
ordinalNumber: index
|
|
2051
|
+
ordinalNumber: index.buildMatchPatternFn({
|
|
2236
2052
|
matchPattern: matchOrdinalNumberPattern,
|
|
2237
2053
|
parsePattern: parseOrdinalNumberPattern,
|
|
2238
2054
|
valueCallback: function (value) {
|
|
2239
2055
|
return parseInt(value, 10);
|
|
2240
2056
|
}
|
|
2241
2057
|
}),
|
|
2242
|
-
era: index
|
|
2058
|
+
era: index.buildMatchFn({
|
|
2243
2059
|
matchPatterns: matchEraPatterns,
|
|
2244
2060
|
defaultMatchWidth: 'wide',
|
|
2245
2061
|
parsePatterns: parseEraPatterns,
|
|
2246
2062
|
defaultParseWidth: 'any'
|
|
2247
2063
|
}),
|
|
2248
|
-
quarter: index
|
|
2064
|
+
quarter: index.buildMatchFn({
|
|
2249
2065
|
matchPatterns: matchQuarterPatterns,
|
|
2250
2066
|
defaultMatchWidth: 'wide',
|
|
2251
2067
|
parsePatterns: parseQuarterPatterns,
|
|
@@ -2254,19 +2070,19 @@ var match = {
|
|
|
2254
2070
|
return index + 1;
|
|
2255
2071
|
}
|
|
2256
2072
|
}),
|
|
2257
|
-
month: index
|
|
2073
|
+
month: index.buildMatchFn({
|
|
2258
2074
|
matchPatterns: matchMonthPatterns,
|
|
2259
2075
|
defaultMatchWidth: 'wide',
|
|
2260
2076
|
parsePatterns: parseMonthPatterns,
|
|
2261
2077
|
defaultParseWidth: 'any'
|
|
2262
2078
|
}),
|
|
2263
|
-
day: index
|
|
2079
|
+
day: index.buildMatchFn({
|
|
2264
2080
|
matchPatterns: matchDayPatterns,
|
|
2265
2081
|
defaultMatchWidth: 'wide',
|
|
2266
2082
|
parsePatterns: parseDayPatterns,
|
|
2267
2083
|
defaultParseWidth: 'any'
|
|
2268
2084
|
}),
|
|
2269
|
-
dayPeriod: index
|
|
2085
|
+
dayPeriod: index.buildMatchFn({
|
|
2270
2086
|
matchPatterns: matchDayPeriodPatterns,
|
|
2271
2087
|
defaultMatchWidth: 'any',
|
|
2272
2088
|
parsePatterns: parseDayPeriodPatterns,
|
|
@@ -2304,10 +2120,10 @@ const calendarWeekViewCss = () => `.sc-digi-calendar-week-view-h{--digi--calenda
|
|
|
2304
2120
|
|
|
2305
2121
|
const CalendarWeekView = class {
|
|
2306
2122
|
constructor(hostRef) {
|
|
2307
|
-
index.registerInstance(this, hostRef);
|
|
2308
|
-
this.afOnWeekChange = index.createEvent(this, "afOnWeekChange", 7);
|
|
2309
|
-
this.afOnDateChange = index.createEvent(this, "afOnDateChange", 7);
|
|
2310
|
-
this.afOnReady = index.createEvent(this, "afOnReady", 3);
|
|
2123
|
+
index$1.registerInstance(this, hostRef);
|
|
2124
|
+
this.afOnWeekChange = index$1.createEvent(this, "afOnWeekChange", 7);
|
|
2125
|
+
this.afOnDateChange = index$1.createEvent(this, "afOnDateChange", 7);
|
|
2126
|
+
this.afOnReady = index$1.createEvent(this, "afOnReady", 3);
|
|
2311
2127
|
this.minDate = new Date();
|
|
2312
2128
|
this.maxDate = new Date();
|
|
2313
2129
|
this.dates = [];
|
|
@@ -2459,7 +2275,7 @@ const CalendarWeekView = class {
|
|
|
2459
2275
|
format(new Date(lastDate), 'MMMM yyyy', { locale: locale });
|
|
2460
2276
|
}
|
|
2461
2277
|
render() {
|
|
2462
|
-
return (index.h("div", { key: '44d49828a7f43a1f3943aaf0af4139f402844bf0', class: "digi-calendar-week-view" }, index.h("nav", { key: '44ba98a7c433077c2c11c55b150a5cc2f1d38ac2', class: "digi-calendar-week-view__timepicker" }, index.h("div", { key: '160ce73dc293abd69193c2b1750c9fd7400b8804', class: "digi-calendar-week-view__dates" }, index.h("div", { key: '2d60245978d9c7615f3ff5ec7b9d8d628e16f843', class: "digi-calendar-week-view__flex" }, index.h("digi-typography", { key: '23a1c94d0575061951f67f46782144de52e5e662' }, index.h(this.afHeadingLevel, { key: 'a183705a035f4d3d57ced74920221f40bbe6019f', role: "status", class: "digi-calendar-week-view__heading" }, index.h("span", { key: '147910745991716f3557491c6e6aa702f479e8c7', class: "digi-calendar-week-view__month" }, this.currentMonth), index.h("span", { key: '0d91367cd6066a2b35349edd0ff93e20b5326f04', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), index.h("ul", { key: 'fdff670cf241e05920e19e0ce6e601b62ae9a3f0', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
|
|
2278
|
+
return (index$1.h("div", { key: '44d49828a7f43a1f3943aaf0af4139f402844bf0', class: "digi-calendar-week-view" }, index$1.h("nav", { key: '44ba98a7c433077c2c11c55b150a5cc2f1d38ac2', class: "digi-calendar-week-view__timepicker" }, index$1.h("div", { key: '160ce73dc293abd69193c2b1750c9fd7400b8804', class: "digi-calendar-week-view__dates" }, index$1.h("div", { key: '2d60245978d9c7615f3ff5ec7b9d8d628e16f843', class: "digi-calendar-week-view__flex" }, index$1.h("digi-typography", { key: '23a1c94d0575061951f67f46782144de52e5e662' }, index$1.h(this.afHeadingLevel, { key: 'a183705a035f4d3d57ced74920221f40bbe6019f', role: "status", class: "digi-calendar-week-view__heading" }, index$1.h("span", { key: '147910745991716f3557491c6e6aa702f479e8c7', class: "digi-calendar-week-view__month" }, this.currentMonth), index$1.h("span", { key: '0d91367cd6066a2b35349edd0ff93e20b5326f04', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), index$1.h("ul", { key: 'fdff670cf241e05920e19e0ce6e601b62ae9a3f0', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
|
|
2463
2279
|
const date = format(new Date(dateItem), 'd', {
|
|
2464
2280
|
locale: locale
|
|
2465
2281
|
});
|
|
@@ -2469,27 +2285,27 @@ const CalendarWeekView = class {
|
|
|
2469
2285
|
const fullDay = format(new Date(dateItem), 'EEEE ', {
|
|
2470
2286
|
locale: locale
|
|
2471
2287
|
});
|
|
2472
|
-
return (index.h("li", { class: "digi-calendar-week-view__date-list-item", "aria-current": dateItem === this.todaysDate && 'date' }, index.h("digi-button", { onClick: () => (this.selectedDate = dateItem), afAriaLabel: `${fullDay} ${date}`, "aria-hidden": !this.dates.includes(dateItem) ? 'true' : 'false', "af-tabindex": !this.dates.includes(dateItem) ? -1 : null, "aria-pressed": this.selectedDate == dateItem ? 'true' : 'false', class: {
|
|
2288
|
+
return (index$1.h("li", { class: "digi-calendar-week-view__date-list-item", "aria-current": dateItem === this.todaysDate && 'date' }, index$1.h("digi-button", { onClick: () => (this.selectedDate = dateItem), afAriaLabel: `${fullDay} ${date}`, "aria-hidden": !this.dates.includes(dateItem) ? 'true' : 'false', "af-tabindex": !this.dates.includes(dateItem) ? -1 : null, "aria-pressed": this.selectedDate == dateItem ? 'true' : 'false', class: {
|
|
2473
2289
|
'digi-calendar-week-view__date-button': true,
|
|
2474
2290
|
'digi-calendar-week-view__date-button--active': this.selectedDate == dateItem,
|
|
2475
2291
|
'digi-calendar-week-view__date-button--no-value': !this.dates.includes(dateItem)
|
|
2476
|
-
}, "af-variation": buttonVariation_enum.ButtonVariation.SECONDARY }, index.h("span", { class: "digi-calendar-week-view__date-button-content", "aria-hidden": "true" }, index.h("span", { class: {
|
|
2292
|
+
}, "af-variation": buttonVariation_enum.ButtonVariation.SECONDARY }, index$1.h("span", { class: "digi-calendar-week-view__date-button-content", "aria-hidden": "true" }, index$1.h("span", { class: {
|
|
2477
2293
|
'digi-calendar-week-view__date-button-day': this.selectedDate != dateItem,
|
|
2478
2294
|
'digi-calendar-week-view__date-button-day--active': this.selectedDate == dateItem
|
|
2479
|
-
} }, day), index.h("span", { class: "digi-calendar-week-view__date-button-date" }, date), index.h("span", { "aria-hidden": "true", class: {
|
|
2295
|
+
} }, day), index$1.h("span", { class: "digi-calendar-week-view__date-button-date" }, date), index$1.h("span", { "aria-hidden": "true", class: {
|
|
2480
2296
|
'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
|
|
2481
2297
|
} })))));
|
|
2482
|
-
})))), index.h("digi-button", { key: 'dbae5227d0316a5a67febc7de83b1c4c5cfc1044', onClick: () => this.prevWeek(), class: {
|
|
2298
|
+
})))), index$1.h("digi-button", { key: 'dbae5227d0316a5a67febc7de83b1c4c5cfc1044', onClick: () => this.prevWeek(), class: {
|
|
2483
2299
|
'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
|
|
2484
2300
|
'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
|
|
2485
2301
|
'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
|
|
2486
|
-
}, "af-variation": "secondary" }, index.h("digi-icon-chevron-left", { key: '65d0f656a0d35911d39f9b8e9ade224be54d4371', slot: "icon" }), this.prevWeekText), index.h("digi-button", { key: '68d9b3d6c929d0185f412add980a542b3c86fbb2', onClick: () => this.nextWeek(), class: {
|
|
2302
|
+
}, "af-variation": "secondary" }, index$1.h("digi-icon-chevron-left", { key: '65d0f656a0d35911d39f9b8e9ade224be54d4371', slot: "icon" }), this.prevWeekText), index$1.h("digi-button", { key: '68d9b3d6c929d0185f412add980a542b3c86fbb2', onClick: () => this.nextWeek(), class: {
|
|
2487
2303
|
'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
|
|
2488
2304
|
'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
|
|
2489
2305
|
'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
|
|
2490
|
-
}, "af-variation": "secondary" }, index.h("digi-icon-chevron-right", { key: 'a9e688f815a5053aa709cfeb9359131f73df21c0', slot: "icon-secondary" }), this.nextWeekText)), index.h("div", { key: '7d1073f6cd1982fda2ce7dcb60532c94bd1d0634', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, index.h("digi-typography", { key: 'db7ce0ca80485df1e4ae67200f2cd90cc80938d5' }, index.h("slot", { key: 'f08f447ae89612dfcea56c638024220bc29e7914' })))));
|
|
2306
|
+
}, "af-variation": "secondary" }, index$1.h("digi-icon-chevron-right", { key: 'a9e688f815a5053aa709cfeb9359131f73df21c0', slot: "icon-secondary" }), this.nextWeekText)), index$1.h("div", { key: '7d1073f6cd1982fda2ce7dcb60532c94bd1d0634', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, index$1.h("digi-typography", { key: 'db7ce0ca80485df1e4ae67200f2cd90cc80938d5' }, index$1.h("slot", { key: 'f08f447ae89612dfcea56c638024220bc29e7914' })))));
|
|
2491
2307
|
}
|
|
2492
|
-
get hostElement() { return index.getElement(this); }
|
|
2308
|
+
get hostElement() { return index$1.getElement(this); }
|
|
2493
2309
|
static get watchers() { return {
|
|
2494
2310
|
"selectedDate": [{
|
|
2495
2311
|
"selectedDateChangeHandler": 0
|
|
@@ -2504,393 +2320,4 @@ const CalendarWeekView = class {
|
|
|
2504
2320
|
};
|
|
2505
2321
|
CalendarWeekView.style = calendarWeekViewCss();
|
|
2506
2322
|
|
|
2507
|
-
const iconChevronLeftCss = () => `.sc-digi-icon-chevron-left-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-chevron-left-h svg.sc-digi-icon-chevron-left{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)}`;
|
|
2508
|
-
|
|
2509
|
-
const IconChevronLeft = class {
|
|
2510
|
-
constructor(hostRef) {
|
|
2511
|
-
index.registerInstance(this, hostRef);
|
|
2512
|
-
/**
|
|
2513
|
-
* För att dölja ikonen för skärmläsare. Default är satt till true.
|
|
2514
|
-
* @en Hides the icon for screen readers. Default is set to true.
|
|
2515
|
-
*/
|
|
2516
|
-
this.afSvgAriaHidden = true;
|
|
2517
|
-
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
2518
|
-
}
|
|
2519
|
-
render() {
|
|
2520
|
-
return (index.h("svg", { key: 'def846a254699c1487c6650595a307d69570b03b', class: "digi-icon-chevron-left", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
2521
|
-
? this.afSvgAriaLabelledby
|
|
2522
|
-
: this.afTitle
|
|
2523
|
-
? this.titleId
|
|
2524
|
-
: undefined }, this.afTitle && index.h("title", { key: '07e54926302b1524b1040b2a807060670448c0f8', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'af3cae8cfe1b8451e4698e1ec43aeb52122d0f81' }, this.afDesc), index.h("path", { key: 'd98281b3481fbbc3853c5a34d1fdd35f58b0056c', class: "digi-icon-chevron-left__shape", d: "M8 13L2 6.926 7.853 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
|
|
2525
|
-
}
|
|
2526
|
-
};
|
|
2527
|
-
IconChevronLeft.style = iconChevronLeftCss();
|
|
2528
|
-
|
|
2529
|
-
const iconChevronRightCss = () => `.sc-digi-icon-chevron-right-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-chevron-right-h svg.sc-digi-icon-chevron-right{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)}`;
|
|
2530
|
-
|
|
2531
|
-
const IconChevronRight = class {
|
|
2532
|
-
constructor(hostRef) {
|
|
2533
|
-
index.registerInstance(this, hostRef);
|
|
2534
|
-
/**
|
|
2535
|
-
* För att dölja ikonen för skärmläsare. Default är satt till true.
|
|
2536
|
-
* @en Hides the icon for screen readers. Default is set to true.
|
|
2537
|
-
*/
|
|
2538
|
-
this.afSvgAriaHidden = true;
|
|
2539
|
-
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
2540
|
-
}
|
|
2541
|
-
render() {
|
|
2542
|
-
return (index.h("svg", { key: '8a7349c8865c737830b6af0e3ea9aa7c6bd50f6f', class: "digi-icon-chevron-right", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
2543
|
-
? this.afSvgAriaLabelledby
|
|
2544
|
-
: this.afTitle
|
|
2545
|
-
? this.titleId
|
|
2546
|
-
: undefined }, this.afTitle && index.h("title", { key: '83176271f8248b1ad42e1e5baf2f31ddc244cb0a', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'c22c051704141e87412e98ab3733afab36bf0bf3' }, this.afDesc), index.h("path", { key: '5f3f04a5512ca21c49e25797401bf68ac726c9d7', class: "digi-icon-chevron-right__shape", d: "M1 13l6-6.074L1.147 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
|
|
2547
|
-
}
|
|
2548
|
-
};
|
|
2549
|
-
IconChevronRight.style = iconChevronRightCss();
|
|
2550
|
-
|
|
2551
|
-
const navigationTablistCss = () => `.sc-digi-tablist-h{--tab-active-border-color:var(--digi--color--marking--navigation--selected);--tab-text-color:var(--digi--color--text--primary);--tab-icon-primary--color:var(--digi--color--icon--primary);--tab-icon-primary--color-hover:var(--digi--color--icon--primary);--tab-icon-primary--color-active:var(--digi--color--icon--primary)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist{font-family:var(--digi--global--typography--font-family--default);color:var(--digi--color--text--primary);position:relative;display:flex;gap:1rem;background-color:var(--digi--color--background--primary);margin-bottom:2.875rem;border-bottom:1px solid var(--digi--color--divider--secondary)}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist .control-wrapper.sc-digi-tablist{display:none !important}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:auto}.sc-digi-tablist-h .digi-tablist--overflow-controls.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:hidden}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist button.sc-digi-tablist{background:none;border:none;padding:0;font-family:inherit}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist [role=tablist].sc-digi-tablist{display:flex;font-weight:bold;flex-grow:1;width:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;height:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist{display:flex;align-items:center;justify-content:center;background-color:var(--digi--color--background--interactive--default--tertiary);border-radius:6px;min-height:auto;padding:0.75rem;aspect-ratio:1;cursor:pointer}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-right.sc-digi-tablist,.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-left.sc-digi-tablist{--digi--icon--color:var(--digi--color--icon--cta)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist{cursor:pointer;white-space:nowrap}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .content-wrapper.sc-digi-tablist{position:relative;height:2.75rem;display:flex;flex-direction:column;transition:background-color 0.1s linear}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .tablist-content.sc-digi-tablist{flex:1;display:flex;padding-right:0.75rem;padding-left:0.75rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--digi--icon--width:1rem;--digi--icon--color:var(--tab-icon-primary--color);padding-right:var(--digi--gutter--smaller)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist digi-badge-notification.sc-digi-tablist{margin-left:-0.125rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist{font-size:1rem;flex-direction:column;display:flex;align-items:center;justify-content:center;font-weight:normal;color:var(--tab-text-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist::after{content:attr(data-text);content:attr(data-text)/"";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .indicator.sc-digi-tablist{height:0.25rem;width:100%;visibility:hidden;background-color:var(--tab-active-border-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus{outline:none;box-shadow:none}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus-visible{z-index:10;outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) .title.sc-digi-tablist{color:var(--digi--color--text--interactive--primary);text-decoration:underline}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-hover)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .title.sc-digi-tablist{font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist svg.sc-digi-tablist{transform:translateX(-0.125rem)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-active)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .indicator.sc-digi-tablist{visibility:visible}`;
|
|
2552
|
-
|
|
2553
|
-
const NavigationTablist = class {
|
|
2554
|
-
constructor(hostRef) {
|
|
2555
|
-
index.registerInstance(this, hostRef);
|
|
2556
|
-
this.afTabChange = index.createEvent(this, "afTabChange", 7);
|
|
2557
|
-
this.afTabFocusChange = index.createEvent(this, "afTabFocusChange", 7);
|
|
2558
|
-
this.tabRefs = {};
|
|
2559
|
-
this.activeTab = 0;
|
|
2560
|
-
this.selectedTab = 0;
|
|
2561
|
-
this.windowTab = 0;
|
|
2562
|
-
this.tabs = [];
|
|
2563
|
-
this.listOverflows = false;
|
|
2564
|
-
this.showPrev = false;
|
|
2565
|
-
this.showNext = false;
|
|
2566
|
-
/**
|
|
2567
|
-
* Bestämmer beteende då flikar överflödar
|
|
2568
|
-
* * @en Set overflow behaviour
|
|
2569
|
-
*/
|
|
2570
|
-
this.afOverflowMode = navigationTablist_types.OverflowMode.Controls;
|
|
2571
|
-
this.handleResize = () => {
|
|
2572
|
-
if (!this.tablistRef)
|
|
2573
|
-
return;
|
|
2574
|
-
// Ensure we measure after any layout/paint from the resize
|
|
2575
|
-
if (this._requestAnimationFrame)
|
|
2576
|
-
cancelAnimationFrame(this._requestAnimationFrame);
|
|
2577
|
-
this._requestAnimationFrame = requestAnimationFrame(() => {
|
|
2578
|
-
var _a, _b;
|
|
2579
|
-
const el = this.tablistRef;
|
|
2580
|
-
const containerWidth = el.clientWidth;
|
|
2581
|
-
const contentWidth = el.scrollWidth;
|
|
2582
|
-
// Tolerance ≈ 1 physical pixel to absorb zoom/subpixel jitter
|
|
2583
|
-
const tolerance = 1 / ((window === null || window === void 0 ? void 0 : window.devicePixelRatio) || 1);
|
|
2584
|
-
// Guard against div-by-zero
|
|
2585
|
-
const tabsCount = Math.max((_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, 1);
|
|
2586
|
-
const avgTabWidth = contentWidth / tabsCount;
|
|
2587
|
-
// How many whole tabs fit? Nudge by tolerance to avoid off-by-one at zoom edges
|
|
2588
|
-
const tabsPerWindow = Math.floor((containerWidth + tolerance) / avgTabWidth);
|
|
2589
|
-
this.tabsPerWindow = Math.max(1, Math.min(tabsPerWindow, tabsCount));
|
|
2590
|
-
// Ensure windowTab stays within valid bounds after resize
|
|
2591
|
-
const maxValidWindowTab = Math.max(0, tabsCount - this.tabsPerWindow);
|
|
2592
|
-
if (this.windowTab > maxValidWindowTab) {
|
|
2593
|
-
this.windowTab = maxValidWindowTab;
|
|
2594
|
-
}
|
|
2595
|
-
// Overflow check with tolerance
|
|
2596
|
-
this.listOverflows = contentWidth - containerWidth > tolerance;
|
|
2597
|
-
// (Optional) if you have left/right “handles”, compute visibility too:
|
|
2598
|
-
this.showPrev = el.scrollLeft > tolerance;
|
|
2599
|
-
this.showNext =
|
|
2600
|
-
el.scrollLeft + el.clientWidth < el.scrollWidth - tolerance;
|
|
2601
|
-
});
|
|
2602
|
-
};
|
|
2603
|
-
}
|
|
2604
|
-
handleKey(e) {
|
|
2605
|
-
if (this.focusCaptured()) {
|
|
2606
|
-
let captureKey = true;
|
|
2607
|
-
switch (e.key) {
|
|
2608
|
-
case ' ':
|
|
2609
|
-
case 'Enter':
|
|
2610
|
-
return this.setActiveTabAndFocus(this.selectedTab);
|
|
2611
|
-
case 'ArrowLeft':
|
|
2612
|
-
if (e.shiftKey) {
|
|
2613
|
-
this.handleTabControl(navigationTablist_types.Direction.Previous);
|
|
2614
|
-
}
|
|
2615
|
-
else {
|
|
2616
|
-
this.focusTab(this.selectedTab - 1);
|
|
2617
|
-
}
|
|
2618
|
-
break;
|
|
2619
|
-
case 'ArrowRight':
|
|
2620
|
-
if (e.shiftKey) {
|
|
2621
|
-
this.handleTabControl(navigationTablist_types.Direction.Next);
|
|
2622
|
-
}
|
|
2623
|
-
else {
|
|
2624
|
-
this.focusTab(this.selectedTab + 1);
|
|
2625
|
-
}
|
|
2626
|
-
break;
|
|
2627
|
-
case 'Home':
|
|
2628
|
-
if (e.shiftKey) {
|
|
2629
|
-
return this.focusTab(0);
|
|
2630
|
-
}
|
|
2631
|
-
else {
|
|
2632
|
-
return this.moveWindow(0);
|
|
2633
|
-
}
|
|
2634
|
-
case 'End':
|
|
2635
|
-
if (e.shiftKey) {
|
|
2636
|
-
return this.focusTab(this.tabs.length - 1);
|
|
2637
|
-
}
|
|
2638
|
-
else {
|
|
2639
|
-
return this.moveWindow(this.tabs.length - 1);
|
|
2640
|
-
}
|
|
2641
|
-
default:
|
|
2642
|
-
captureKey = false;
|
|
2643
|
-
}
|
|
2644
|
-
if (captureKey) {
|
|
2645
|
-
e.preventDefault();
|
|
2646
|
-
}
|
|
2647
|
-
}
|
|
2648
|
-
}
|
|
2649
|
-
syncPanels() {
|
|
2650
|
-
var _a;
|
|
2651
|
-
const activeId = (_a = this.tabs[this.activeTab]) === null || _a === void 0 ? void 0 : _a.id;
|
|
2652
|
-
for (const panel of this.getSlottedPanels()) {
|
|
2653
|
-
panel.isVisible = panel.tab === activeId;
|
|
2654
|
-
}
|
|
2655
|
-
}
|
|
2656
|
-
handleTabPropChange(tabId) {
|
|
2657
|
-
this.setActiveTabById(tabId);
|
|
2658
|
-
}
|
|
2659
|
-
syncControls() {
|
|
2660
|
-
const tabGroup = Math.floor(this.windowTab / this.tabsPerWindow);
|
|
2661
|
-
const numberOfGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
|
|
2662
|
-
this.showPrev = tabGroup > 0;
|
|
2663
|
-
this.showNext = tabGroup < numberOfGroups - 1;
|
|
2664
|
-
}
|
|
2665
|
-
syncWindow(tabIdx) {
|
|
2666
|
-
const tab = this.tabs[tabIdx];
|
|
2667
|
-
const tabRef = this.tabRefs[tab.id];
|
|
2668
|
-
const listBox = this.tablistRef.getBoundingClientRect();
|
|
2669
|
-
const tabBox = tabRef.getBoundingClientRect();
|
|
2670
|
-
const centeredOffset = tabRef.offsetLeft - listBox.width / 2 + tabBox.width / 2;
|
|
2671
|
-
const maxLeft = this.tablistRef.scrollWidth - listBox.width;
|
|
2672
|
-
const left = Math.max(Math.min(centeredOffset, maxLeft), 0);
|
|
2673
|
-
this.tablistRef.scrollTo({
|
|
2674
|
-
left,
|
|
2675
|
-
behavior: 'smooth'
|
|
2676
|
-
});
|
|
2677
|
-
}
|
|
2678
|
-
syncFocus(tabIdx) {
|
|
2679
|
-
const tabRef = this.tabRefs[this.tabs[tabIdx].id];
|
|
2680
|
-
tabRef.focus({ preventScroll: true });
|
|
2681
|
-
this.windowTab = tabIdx;
|
|
2682
|
-
}
|
|
2683
|
-
setupTabs(tabs) {
|
|
2684
|
-
// Angular/React can connect the element before afTabs is set.
|
|
2685
|
-
if (tabs == null || tabs === '') {
|
|
2686
|
-
return;
|
|
2687
|
-
}
|
|
2688
|
-
const hadTabs = this.tabs.length > 0;
|
|
2689
|
-
if (typeof tabs === 'string') {
|
|
2690
|
-
this.tabs = JSON.parse(tabs);
|
|
2691
|
-
}
|
|
2692
|
-
else if (Array.isArray(tabs)) {
|
|
2693
|
-
this.tabs = tabs;
|
|
2694
|
-
}
|
|
2695
|
-
else {
|
|
2696
|
-
throw new Error('Invalid format or no tabs supplied');
|
|
2697
|
-
}
|
|
2698
|
-
if (!hadTabs) {
|
|
2699
|
-
this.setupInitialTab();
|
|
2700
|
-
}
|
|
2701
|
-
this.syncPanels();
|
|
2702
|
-
}
|
|
2703
|
-
getSlottedPanels() {
|
|
2704
|
-
return Array.from(this.hostElement.querySelectorAll('digi-tablist-panel')).filter((panel) => panel.closest('digi-tablist') === this.hostElement);
|
|
2705
|
-
}
|
|
2706
|
-
setActiveTabById(id) {
|
|
2707
|
-
const tabIdx = this.tabs.findIndex((tab) => tab.id === id);
|
|
2708
|
-
if (tabIdx > -1) {
|
|
2709
|
-
this.activeTab = tabIdx;
|
|
2710
|
-
}
|
|
2711
|
-
}
|
|
2712
|
-
setupInitialTab() {
|
|
2713
|
-
if (this.afActiveTab != null) {
|
|
2714
|
-
return this.setActiveTabById(this.afActiveTab);
|
|
2715
|
-
}
|
|
2716
|
-
else if (this.afInitialTab != null) {
|
|
2717
|
-
return this.setActiveTabById(this.afInitialTab);
|
|
2718
|
-
}
|
|
2719
|
-
}
|
|
2720
|
-
setupResizeHandler() {
|
|
2721
|
-
this.resizeObserver = new ResizeObserver(() => this.handleResize());
|
|
2722
|
-
this.resizeObserver.observe(this.tablistRef);
|
|
2723
|
-
}
|
|
2724
|
-
handleTabChange(tab) {
|
|
2725
|
-
const idx = this.tabs.findIndex(({ id }) => id === tab.id);
|
|
2726
|
-
this.setActiveTabAndFocus(idx);
|
|
2727
|
-
this.afTabChange.emit(tab);
|
|
2728
|
-
}
|
|
2729
|
-
handleTabControl(direction) {
|
|
2730
|
-
// Calculate the current window group
|
|
2731
|
-
const currentGroup = Math.floor(this.windowTab / this.tabsPerWindow);
|
|
2732
|
-
const totalGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
|
|
2733
|
-
let newGroup;
|
|
2734
|
-
if (direction === navigationTablist_types.Direction.Next) {
|
|
2735
|
-
newGroup = Math.min(currentGroup + 1, totalGroups - 1);
|
|
2736
|
-
}
|
|
2737
|
-
else {
|
|
2738
|
-
newGroup = Math.max(currentGroup - 1, 0);
|
|
2739
|
-
}
|
|
2740
|
-
// Move to the first tab of the target group
|
|
2741
|
-
const newWindowTab = newGroup * this.tabsPerWindow;
|
|
2742
|
-
this.moveWindow(newWindowTab);
|
|
2743
|
-
}
|
|
2744
|
-
setActiveTabAndFocus(tabIdx) {
|
|
2745
|
-
this.activeTab = tabIdx;
|
|
2746
|
-
this.focusTab(tabIdx);
|
|
2747
|
-
}
|
|
2748
|
-
focusTab(tabIdx) {
|
|
2749
|
-
this.selectedTab = this.nextTabIdx(tabIdx);
|
|
2750
|
-
const currentTab = this.tabs[this.selectedTab];
|
|
2751
|
-
this.afTabFocusChange.emit(currentTab);
|
|
2752
|
-
}
|
|
2753
|
-
moveWindow(tabIdx) {
|
|
2754
|
-
tabIdx = Math.max(0, Math.min(tabIdx, this.tabs.length - 1));
|
|
2755
|
-
this.windowTab = tabIdx;
|
|
2756
|
-
}
|
|
2757
|
-
nextTabIdx(tabIdx) {
|
|
2758
|
-
if (tabIdx >= this.tabs.length) {
|
|
2759
|
-
return 0;
|
|
2760
|
-
}
|
|
2761
|
-
else if (tabIdx < 0) {
|
|
2762
|
-
return this.tabs.length - 1;
|
|
2763
|
-
}
|
|
2764
|
-
return tabIdx;
|
|
2765
|
-
}
|
|
2766
|
-
focusCaptured() {
|
|
2767
|
-
return this.tabs.some((tab) => this.tabRefs[tab.id] === document.activeElement);
|
|
2768
|
-
}
|
|
2769
|
-
componentWillLoad() {
|
|
2770
|
-
this.setupTabs(this.afTabs);
|
|
2771
|
-
this.setupInitialTab();
|
|
2772
|
-
// Angular attaches the host first and binds `[afTabs]` on the next frame
|
|
2773
|
-
// (Stencil 4.36+). @Watch skips that first assignment, so if tabs are not
|
|
2774
|
-
// here yet, wait one frame. React/vanilla that already set the prop skip
|
|
2775
|
-
// the delay.
|
|
2776
|
-
if (this.tabs.length === 0) {
|
|
2777
|
-
return new Promise((resolve) => {
|
|
2778
|
-
requestAnimationFrame(() => {
|
|
2779
|
-
this.setupTabs(this.afTabs);
|
|
2780
|
-
this.setupInitialTab();
|
|
2781
|
-
resolve();
|
|
2782
|
-
});
|
|
2783
|
-
});
|
|
2784
|
-
}
|
|
2785
|
-
}
|
|
2786
|
-
componentDidLoad() {
|
|
2787
|
-
var _a, _b, _c;
|
|
2788
|
-
this.setupTabs(this.afTabs);
|
|
2789
|
-
// Also listen to window resize for viewport zoom changes
|
|
2790
|
-
if (window) {
|
|
2791
|
-
window.addEventListener('resize', this.handleResize, { passive: true });
|
|
2792
|
-
}
|
|
2793
|
-
// Recalculate once fonts finish loading (text width changes with webfonts)
|
|
2794
|
-
(_c = (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then) === null || _c === void 0 ? void 0 : _c.call(_b, () => this.handleResize());
|
|
2795
|
-
this.setupResizeHandler();
|
|
2796
|
-
this.handleResize();
|
|
2797
|
-
this.syncPanels();
|
|
2798
|
-
this.syncControls();
|
|
2799
|
-
}
|
|
2800
|
-
disconnectedCallback() {
|
|
2801
|
-
var _a;
|
|
2802
|
-
if (window) {
|
|
2803
|
-
window.removeEventListener('resize', this.handleResize);
|
|
2804
|
-
}
|
|
2805
|
-
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
2806
|
-
if (this._requestAnimationFrame)
|
|
2807
|
-
cancelAnimationFrame(this._requestAnimationFrame);
|
|
2808
|
-
}
|
|
2809
|
-
render() {
|
|
2810
|
-
return (index.h(index.Host, { key: 'b2d71ff4b3f2c2fa22feffbc298360c1b3202b1d' }, index.h("div", { key: 'df48ffc9fdabfca380675c7232af5fef80c445b9', class: {
|
|
2811
|
-
'digi-tablist': true,
|
|
2812
|
-
'digi-tablist--overflow-scroll': this.afOverflowMode === navigationTablist_types.OverflowMode.Scroll,
|
|
2813
|
-
'digi-tablist--overflow-controls': this.afOverflowMode === navigationTablist_types.OverflowMode.Controls
|
|
2814
|
-
} }, index.h("div", { key: '797f70a00aa1e3dd8a3b54d43808b9515259723c', class: "control-wrapper", style: {
|
|
2815
|
-
left: '0',
|
|
2816
|
-
visibility: this.showPrev ? 'visible' : 'hidden'
|
|
2817
|
-
} }, index.h("button", { key: '415237740bc65dd5cfdb0e57eb44307c9d838670', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(navigationTablist_types.Direction.Previous) }, index.h("digi-icon-chevron-left", { key: '59f2d43ba38c7d4ebdd85a575b2e89c0fec62381' }))), index.h("div", { key: '01602338cbd7a63f48cdcf541629e76bac46dd4c', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
|
|
2818
|
-
const focusable = tab.id === this.tabs[this.selectedTab].id;
|
|
2819
|
-
const isActive = tab.id === this.tabs[this.activeTab].id;
|
|
2820
|
-
const Icon = `digi-icon-${tab.icon}`;
|
|
2821
|
-
const badgeValue = tab.badgeValue;
|
|
2822
|
-
return (index.h("button", { ref: (ref) => (this.tabRefs[tab.id] = ref), class: {
|
|
2823
|
-
'digi-tab': true,
|
|
2824
|
-
'is-active': isActive
|
|
2825
|
-
}, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, index.h("div", { class: "content-wrapper" }, index.h("span", { class: "tablist-content" }, tab.icon && index.h(Icon, { "aria-hidden": "true" }), index.h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (index.h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), index.h("div", { class: "indicator" }))));
|
|
2826
|
-
})), index.h("div", { key: 'db28ea61c349d7aaf057e84b607c4f851b3f6712', class: "control-wrapper", style: {
|
|
2827
|
-
right: '0',
|
|
2828
|
-
visibility: this.showNext ? 'visible' : 'hidden'
|
|
2829
|
-
} }, index.h("button", { key: '83513f2d64cc0578155d305f21dfb1ca4a412cc6', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(navigationTablist_types.Direction.Next) }, index.h("digi-icon-chevron-right", { key: '9263e864c21ea5358f301214fbadda6ed7d3c74a' })))), index.h("div", { key: '205efbbb3aab40f51f9f85f8d74a4026970c7144', role: "presentation" }, index.h("slot", { key: 'e753d718f852072745f5c2a49f6189fb62f3645b', onSlotchange: () => this.syncPanels() }))));
|
|
2830
|
-
}
|
|
2831
|
-
get hostElement() { return index.getElement(this); }
|
|
2832
|
-
static get watchers() { return {
|
|
2833
|
-
"activeTab": [{
|
|
2834
|
-
"syncPanels": 0
|
|
2835
|
-
}],
|
|
2836
|
-
"afActiveTab": [{
|
|
2837
|
-
"handleTabPropChange": 0
|
|
2838
|
-
}],
|
|
2839
|
-
"windowTab": [{
|
|
2840
|
-
"syncControls": 0
|
|
2841
|
-
}, {
|
|
2842
|
-
"syncWindow": 0
|
|
2843
|
-
}],
|
|
2844
|
-
"listOverflows": [{
|
|
2845
|
-
"syncControls": 0
|
|
2846
|
-
}],
|
|
2847
|
-
"selectedTab": [{
|
|
2848
|
-
"syncFocus": 0
|
|
2849
|
-
}],
|
|
2850
|
-
"afTabs": [{
|
|
2851
|
-
"setupTabs": 0
|
|
2852
|
-
}]
|
|
2853
|
-
}; }
|
|
2854
|
-
};
|
|
2855
|
-
NavigationTablist.style = navigationTablistCss();
|
|
2856
|
-
|
|
2857
|
-
const NavigationTabPanel = class {
|
|
2858
|
-
constructor(hostRef) {
|
|
2859
|
-
index.registerInstance(this, hostRef);
|
|
2860
|
-
this.isVisible = false;
|
|
2861
|
-
}
|
|
2862
|
-
render() {
|
|
2863
|
-
return (index.h(index.Host, { key: '253b1c6e0b466c8e806aeec2a6e99f86172b3324' }, index.h("div", { key: '9639af8c2a404a738c2c07c437f0537f81f5a72f', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
|
|
2864
|
-
display: this.isVisible ? 'initial' : 'none',
|
|
2865
|
-
overflowX: 'hidden',
|
|
2866
|
-
overflowY: 'auto'
|
|
2867
|
-
} }, index.h("slot", { key: '3383cb70665259583d172e82f9c2dd38a81cec3c' }))));
|
|
2868
|
-
}
|
|
2869
|
-
get hostElement() { return index.getElement(this); }
|
|
2870
|
-
};
|
|
2871
|
-
|
|
2872
|
-
const typographyCss = () => `digi-typography{--digi--typography--h1--margin--small:var(--digi--margin--h1-small);--digi--typography--h1--margin--medium:var(--digi--margin--h1-medium);--digi--typography--h1--margin--large:var(--digi--margin--h1-large);--digi--typography--h2--margin--small:var(--digi--margin--h2-small);--digi--typography--h2--margin--large:var(--digi--margin--h2-large);--digi--typography--h3--margin--small:var(--digi--margin--h3-small);--digi--typography--h3--margin--large:var(--digi--margin--h3-large);--digi--typography--h4--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h4--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--h5--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h6--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--paragraph--margin--small:var(--digi--margin--text-small);--digi--typography--paragraph--margin--large:var(--digi--margin--text-large);--digi--typography--paragraph--margin-top:initial;--digi--typography--color--text:var(--digi--color--text--primary);--digi--typography--text-decoration-thickness--hover:0.156em;--digi--typography--text-decoration-thickness--default:0.05em;--digi--typography--text-underline-offset:3px;font-family:var(--digi--global--typography--font-family--default);color:var(--digi--typography--color--text);font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);--FONT-SIZE--BODY:var(--digi--typography--body--font-size--mobile);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--mobile);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--mobile);--TEXT-DECORATION--BODY:var( --digi--typography--body--text-decoration--mobile );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--mobile);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--mobile);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--mobile);--TEXT-DECORATION--LINK:var( --digi--typography--link--text-decoration--mobile );--FONT-SIZE--HEADING-1:var(--digi--typography--heading-1--font-size--mobile);--LINE-HEIGHT--HEADING-1:var( --digi--typography--heading-1--line-height--mobile );--FONT-WEIGHT--HEADING-1:var( --digi--typography--heading-1--font-weight--mobile );--TEXT-DECORATION--HEADING-1:var( --digi--typography--heading-1--text-decoration--mobile );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--small);--FONT-SIZE--HEADING-2:var(--digi--typography--heading-2--font-size--mobile);--LINE-HEIGHT--HEADING-2:var( --digi--typography--heading-2--line-height--mobile );--FONT-WEIGHT--HEADING-2:var( --digi--typography--heading-2--font-weight--mobile );--TEXT-DECORATION--HEADING-2:var( --digi--typography--heading-2--text-decoration--mobile );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(--digi--typography--heading-3--font-size--mobile);--LINE-HEIGHT--HEADING-3:var( --digi--typography--heading-3--line-height--mobile );--FONT-WEIGHT--HEADING-3:var( --digi--typography--heading-3--font-weight--mobile );--TEXT-DECORATION--HEADING-3:var( --digi--typography--heading-3--text-decoration--mobile );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-4:var( --digi--typography--heading-4--line-height--mobile );--FONT-WEIGHT--HEADING-4:var( --digi--typography--heading-4--font-weight--mobile );--TEXT-DECORATION--HEADING-4:var( --digi--typography--heading-4--text-decoration--mobile );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-5:var( --digi--typography--heading-4--line-height--mobile );--FONT-WEIGHT--HEADING-5:var( --digi--typography--heading-4--font-weight--mobile );--TEXT-DECORATION--HEADING-5:var( --digi--typography--heading-4--text-decoration--mobile );--MARGIN--HEADING-5:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-6:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-6:var( --digi--typography--heading-4--line-height--mobile );--FONT-WEIGHT--HEADING-6:var( --digi--typography--heading-4--font-weight--mobile );--TEXT-DECORATION--HEADING-6:var( --digi--typography--heading-4--text-decoration--mobile );--MARGIN--HEADING-6:var(--digi--typography--h4--margin--small)}@media (min-width: 61.9375rem){digi-typography{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--desktop);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--desktop);--TEXT-DECORATION--BODY:var( --digi--typography--body--text-decoration--desktop );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--desktop);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--desktop);--TEXT-DECORATION--LINK:var( --digi--typography--link--text-decoration--desktop );--FONT-SIZE--HEADING-1:var( --digi--typography--heading-1--font-size--desktop );--LINE-HEIGHT--HEADING-1:var( --digi--typography--heading-1--line-height--desktop );--FONT-WEIGHT--HEADING-1:var( --digi--typography--heading-1--font-weight--desktop );--TEXT-DECORATION--HEADING-1:var( --digi--typography--heading-1--text-decoration--desktop );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var( --digi--typography--heading-2--font-size--desktop );--LINE-HEIGHT--HEADING-2:var( --digi--typography--heading-2--line-height--desktop );--FONT-WEIGHT--HEADING-2:var( --digi--typography--heading-2--font-weight--desktop );--TEXT-DECORATION--HEADING-2:var( --digi--typography--heading-2--text-decoration--desktop );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var( --digi--typography--heading-3--font-size--desktop );--LINE-HEIGHT--HEADING-3:var( --digi--typography--heading-3--line-height--desktop );--FONT-WEIGHT--HEADING-3:var( --digi--typography--heading-3--font-weight--desktop );--TEXT-DECORATION--HEADING-3:var( --digi--typography--heading-3--text-decoration--desktop );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var( --digi--typography--heading-4--font-size--desktop );--LINE-HEIGHT--HEADING-4:var( --digi--typography--heading-4--line-height--desktop );--FONT-WEIGHT--HEADING-4:var( --digi--typography--heading-4--font-weight--desktop );--TEXT-DECORATION--HEADING-4:var( --digi--typography--heading-4--text-decoration--desktop );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var( --digi--typography--heading-4--font-size--desktop );--LINE-HEIGHT--HEADING-5:var( --digi--typography--heading-4--line-height--desktop );--FONT-WEIGHT--HEADING-5:var( --digi--typography--heading-4--font-weight--desktop );--TEXT-DECORATION--HEADING-5:var( --digi--typography--heading-4--text-decoration--desktop );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var( --digi--typography--heading-4--font-size--desktop );--LINE-HEIGHT--HEADING-6:var( --digi--typography--heading-4--line-height--desktop );--FONT-WEIGHT--HEADING-6:var( --digi--typography--heading-4--font-weight--desktop );--TEXT-DECORATION--HEADING-6:var( --digi--typography--heading-4--text-decoration--desktop );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}}digi-typography h1,digi-typography h2,digi-typography h3,digi-typography h4,digi-typography h5,digi-typography h6{margin-top:0;}digi-typography h1,digi-typography .digi-h1{font-size:var(--FONT-SIZE--HEADING-1);line-height:var(--LINE-HEIGHT--HEADING-1);font-weight:var(--FONT-WEIGHT--HEADING-1);text-decoration:var(--TEXT-DECORATION--HEADING-1);margin-bottom:var(--MARGIN--HEADING-1)}digi-typography h2,digi-typography .digi-h2{font-size:var(--FONT-SIZE--HEADING-2);line-height:var(--LINE-HEIGHT--HEADING-2);font-weight:var(--FONT-WEIGHT--HEADING-2);text-decoration:var(--TEXT-DECORATION--HEADING-2);margin-bottom:var(--MARGIN--HEADING-2)}digi-typography h3,digi-typography .digi-h3{font-size:var(--FONT-SIZE--HEADING-3);line-height:var(--LINE-HEIGHT--HEADING-3);font-weight:var(--FONT-WEIGHT--HEADING-3);text-decoration:var(--TEXT-DECORATION--HEADING-3);margin-bottom:var(--MARGIN--HEADING-3)}digi-typography h4,digi-typography .digi-h4{font-size:var(--FONT-SIZE--HEADING-4);line-height:var(--LINE-HEIGHT--HEADING-4);font-weight:var(--FONT-WEIGHT--HEADING-4);text-decoration:var(--TEXT-DECORATION--HEADING-4);margin-bottom:var(--MARGIN--HEADING-4)}digi-typography h5,digi-typography .digi-h5{font-size:var(--FONT-SIZE--HEADING-5);line-height:var(--LINE-HEIGHT--HEADING-5);font-weight:var(--FONT-WEIGHT--HEADING-5);text-decoration:var(--TEXT-DECORATION--HEADING-5);margin-bottom:var(--MARGIN--HEADING-5)}digi-typography h6,digi-typography .digi-h6{font-size:var(--FONT-SIZE--HEADING-6);line-height:var(--LINE-HEIGHT--HEADING-6);font-weight:var(--FONT-WEIGHT--HEADING-6);text-decoration:var(--TEXT-DECORATION--HEADING-6);margin-bottom:var(--MARGIN--HEADING-6)}digi-typography p,digi-typography blockquote{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);margin-top:initial;margin-bottom:var(--MARGIN--BODY);max-width:var(--digi--paragraph-width--medium)}digi-typography p:last-child,digi-typography blockquote:last-child{margin-bottom:0}digi-typography blockquote{margin-inline:0}digi-typography digi-typography-preamble{display:block;margin-bottom:var(--MARGIN--BODY)}digi-typography digi-typography-preamble:last-child{margin-bottom:0}digi-typography ul,digi-typography ol,digi-typography dl{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);max-width:var(--digi--paragraph-width--medium);margin-bottom:var(--MARGIN--BODY)}digi-typography ul,digi-typography ol{margin:0 0 var(--MARGIN--BODY) 0;padding-inline-start:1.5rem}digi-typography ul li,digi-typography ol li{margin-top:initial;margin-bottom:0.5rem;box-sizing:border-box;width:100%;padding-left:0}digi-typography ul li:last-child,digi-typography ol li:last-child{margin-bottom:0}digi-typography a{font-size:1em;line-height:var(--LINE-HEIGHT--LINK);font-weight:inherit;text-decoration:var(--TEXT-DECORATION--LINK);color:var(--digi--color--text--interactive--primary);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--default);text-underline-offset:var(--digi--typography--text-underline-offset)}digi-typography a:hover{text-decoration:var(--TEXT-DECORATION--LINK);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover)}digi-typography a:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}digi-typography a:visited{color:var(--digi--color--text--interactive--visited)}digi-typography .digi-typography--hide-visited a:visited{color:var(--digi--color--text--interactive--primary)}digi-typography strong{font-weight:var(--digi--typography--label--font-weight--desktop)}`;
|
|
2873
|
-
|
|
2874
|
-
const Typography = class {
|
|
2875
|
-
constructor(hostRef) {
|
|
2876
|
-
index.registerInstance(this, hostRef);
|
|
2877
|
-
}
|
|
2878
|
-
get cssModifiers() {
|
|
2879
|
-
return {
|
|
2880
|
-
'digi-typography--hide-visited': this.hideVisitedColor
|
|
2881
|
-
};
|
|
2882
|
-
}
|
|
2883
|
-
render() {
|
|
2884
|
-
return (index.h("div", { key: '2b78d2c69b94e258feb4c99d5835cc58507d7886', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, index.h("slot", { key: '1f952d99d2331fb09a1b6d549a6ea97440302346' })));
|
|
2885
|
-
}
|
|
2886
|
-
};
|
|
2887
|
-
Typography.style = typographyCss();
|
|
2888
|
-
|
|
2889
|
-
exports.digi_badge_notification = BadgeNotification;
|
|
2890
|
-
exports.digi_button = Button;
|
|
2891
2323
|
exports.digi_calendar_week_view = CalendarWeekView;
|
|
2892
|
-
exports.digi_icon_chevron_left = IconChevronLeft;
|
|
2893
|
-
exports.digi_icon_chevron_right = IconChevronRight;
|
|
2894
|
-
exports.digi_tablist = NavigationTablist;
|
|
2895
|
-
exports.digi_tablist_panel = NavigationTabPanel;
|
|
2896
|
-
exports.digi_typography = Typography;
|