@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
|
@@ -1,487 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-BnKuq1L7.js';
|
|
2
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
|
|
3
|
-
import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
|
|
4
|
-
import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
|
|
5
|
-
import { l as logger } from './logger.util-DdB9j8uV.js';
|
|
6
|
-
import { _ as _t } from './text-DsO1BTml.js';
|
|
7
|
-
import { i as isValid } from './index-BixPaBHw.js';
|
|
8
|
-
import { i as isBefore, a as isAfter } from './index-BsIL3T_0.js';
|
|
9
|
-
import './detectClosest.util-DwBvm-Nc.js';
|
|
10
|
-
|
|
11
|
-
const calendarCss = () => `.sc-digi-calendar-h{--digi--calendar--display:inline-block;--digi--calendar--header--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--header--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--header--display:flex;--digi--calendar--header--align-items:center;--digi--calendar--header--justify-content:space-between;--digi--calendar--header--text-align:center;--digi--calendar--header--button--padding:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--calendar--header--button--background:transparent;--digi--calendar--header--button--box-shadow:none;--digi--calendar--header--button--background--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--table--border-spacing:0;--digi--calendar--table--border-collapse:collapse;--digi--calendar--table--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--table--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--table-header--padding:var(--digi--gutter--larger) 0;--digi--calendar--table-header--font-weight-normal:var(--digi--typography--body--font-weight--desktop);--digi--calendar--date--border-color:none;--digi--calendar--date--box-shadow:none;--digi--calendar--date--background-color:var(--digi--color--background--interactive--default--secondary);--digi--calendar--date--background-color--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--padding:var(--digi--gutter--large);--digi--calendar--date--color:var(--digi--color--text--primary);--digi--calendar--date--focused--background-color:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--today--circle-border:2px solid var(--digi--color--marking--indication--secondary);--digi--calendar--date--today--circle-margin:10%;--digi--calendar--date--selected--color:var(--digi--color--text--interactive--secondary);--digi--calendar--date--selected--background-color:var(--digi--color--background--interactive--selected--primary);--digi--calendar--date--not-selectable-strike--color:var(--digi--color--marking--indication--tertiary);--digi--calendar--week--font-style:italic;--digi--calendar--week--font-size:var(--digi--global--typography--font-size--small);--digi--calendar--week--border-color:var(--digi--color--divider--primary);--digi--calendar--week--border-width:var(--digi--border-width--primary)}.sc-digi-calendar-h .digi-calendar.sc-digi-calendar{display:var(--digi--calendar--display);background:var(--digi--calendar--header--button--background);padding:0px 1px 3px 1px;overflow:hidden;max-width:23.4375rem}.sc-digi-calendar-h .digi-calendar--hide.sc-digi-calendar{--digi--calendar--display:none}.sc-digi-calendar-h .digi-calendar__header.sc-digi-calendar{display:var(--digi--calendar--header--display);align-items:var(--digi--calendar--header--align-items);justify-content:var(--digi--calendar--header--justify-content);text-align:var(--digi--calendar--header--text-align);font-size:var(--digi--global--typography--font-size--base);font-family:var(--digi--calendar--header--font-family);font-weight:var(--digi--calendar--header--font-weight)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar{display:inherit;justify-content:center;margin:0 auto}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:first-child{margin-right:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:last-child{width:5rem}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar select.sc-digi-calendar{padding-inline-end:2rem}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar{flex:auto;display:inherit;align-items:inherit;justify-content:inherit}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-name.sc-digi-calendar{padding-inline:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar{font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--digi--calendar--date--color);display:flex;align-items:center;background:var(--digi--calendar--header--button--background);border:var(--digi--calendar--date--box-shadow);padding:var(--digi--calendar--header--button--padding)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:last-child{border-radius:0 4px 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:first-child{border-radius:4px 0 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible:not(.digi-calendar__date--not-selectable),.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:active:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(--digi--calendar--header--button--background--hover);text-decoration:underline;cursor:pointer}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(--digi--calendar--header--button--background--hover);text-decoration:underline;cursor:pointer}}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar{border-collapse:var(--digi--calendar--table--border-collapse);border-spacing:var(--digi--calendar--table--border-spacing);font-family:var(--digi--calendar--table--font-family);table-layout:fixed;margin-bottom:var(--digi--margin--medium)}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar th.sc-digi-calendar{text-align:center}.sc-digi-calendar-h .digi-calendar__table-header-week.sc-digi-calendar{font-style:italic;padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table-header--font-weight-normal);width:50px}.sc-digi-calendar-h .digi-calendar__table-header.sc-digi-calendar{padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table--font-weight);width:46px}.sc-digi-calendar-h .digi-calendar__td-week.sc-digi-calendar{border-right:var(--digi--calendar--week--border-width) solid var(--digi--calendar--week--border-color)}.sc-digi-calendar-h .digi-calendar__td.sc-digi-calendar{text-align:right}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar{font-style:var(--digi--calendar--week--font-style);font-size:var(--digi--calendar--week--font-size);display:table-cell;text-align:center}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar:hover{cursor:default}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar{position:relative;padding:var(--digi--calendar--date--padding);color:var(--digi--calendar--date--color);background-color:var(--digi--calendar--date--background-color);border-color:var(--digi--calendar--date--border-color);border-radius:var(--digi--border-radius--secondary);font-family:inherit;font-size:inherit;font-weight:inherit;text-align:center;border:none;width:44px;height:44px}.sc-digi-calendar-h .digi-calendar__date--disabled.sc-digi-calendar{--digi--calendar--date--color:transparent;pointer-events:none}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar{position:relative}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar::after{display:block;content:" ";position:absolute;top:var(--digi--calendar--date--today--circle-margin);bottom:var(--digi--calendar--date--today--circle-margin);left:var(--digi--calendar--date--today--circle-margin);right:var(--digi--calendar--date--today--circle-margin);border:var(--digi--calendar--date--today--circle-border);border-radius:50%}.sc-digi-calendar-h .digi-calendar__date--today.digi-calendar__date--selected.sc-digi-calendar::after{border-color:var(--digi--color--icon--secondary)}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){cursor:pointer}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected){--digi--calendar--date--box-shadow:var(--digi--calendar--date--box-shadow--hover);--digi--calendar--date--background-color:var(--digi--calendar--date--background-color--hover)}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable) span.sc-digi-calendar{text-decoration:underline}}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color);--digi--calendar--date--color:var(--digi--calendar--date--selected--color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover span.sc-digi-calendar{text-decoration:none}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar{cursor:not-allowed}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar::after{display:block;content:" ";width:0px;height:100%;border:1px solid #757575;transform:rotate(-45deg);position:absolute;top:0%;left:50%}.sc-digi-calendar-h .digi-calendar__date--focused.sc-digi-calendar:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable){--digi--calendar--date--background-color:var(--digi--calendar--date--focused--background-color);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-s digi-form-label{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}`;
|
|
12
|
-
|
|
13
|
-
const Calendar = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
registerInstance(this, hostRef);
|
|
16
|
-
this.afOnDateSelectedChange = createEvent(this, "afOnDateSelectedChange", 7);
|
|
17
|
-
this.afOnFocusOutside = createEvent(this, "afOnFocusOutside", 7);
|
|
18
|
-
this.afOnClickOutside = createEvent(this, "afOnClickOutside", 7);
|
|
19
|
-
this.afOnDirty = createEvent(this, "afOnDirty", 7);
|
|
20
|
-
this.selectedDates = [];
|
|
21
|
-
this.dirty = false;
|
|
22
|
-
/**
|
|
23
|
-
* Prefix för komponentens 'id'-attribut. Ex. 'my-cool-id' genererar 'my-cool-id-calendar'. Ges inget värde genereras ett slumpmässigt.
|
|
24
|
-
* @en Prefix for the component's 'id' attribute. Example: 'my-cool-id' generates 'my-cool-id-calendar'. Defaults to random string.
|
|
25
|
-
*/
|
|
26
|
-
this.afId = randomIdGenerator('digi-calendar');
|
|
27
|
-
/**
|
|
28
|
-
* Visa veckonummer i kalender
|
|
29
|
-
* @en Show week number in the calendar
|
|
30
|
-
*/
|
|
31
|
-
this.afShowWeekNumber = false;
|
|
32
|
-
/**
|
|
33
|
-
* Valda datum i kalendern
|
|
34
|
-
* @en Selected dates in calendar
|
|
35
|
-
*/
|
|
36
|
-
this.afSelectedDates = [];
|
|
37
|
-
/**
|
|
38
|
-
* Visar eller döljer kalendern.
|
|
39
|
-
* @en Toggle calendar hide/show.
|
|
40
|
-
*/
|
|
41
|
-
this.afActive = true;
|
|
42
|
-
/**
|
|
43
|
-
* Sätt denna till true för att tillåta val av flera datum
|
|
44
|
-
* @en Set this to true to be able to allow selection of multiple dates
|
|
45
|
-
*/
|
|
46
|
-
this.afMultipleDates = false;
|
|
47
|
-
/**
|
|
48
|
-
* Sätt denna till true för att visa väljare för år
|
|
49
|
-
* @en Set this to true to be show year selector
|
|
50
|
-
*/
|
|
51
|
-
this.afYearSelect = false;
|
|
52
|
-
this.activeCalendar = [];
|
|
53
|
-
}
|
|
54
|
-
focusedDateChanged() {
|
|
55
|
-
this.drawCalendar(this.focusedDate);
|
|
56
|
-
}
|
|
57
|
-
afOpenCalendarToChangeHandler() {
|
|
58
|
-
this.determineFocusedDate();
|
|
59
|
-
}
|
|
60
|
-
afShowWeekNumberChangeHandler() {
|
|
61
|
-
this.drawCalendar(this.focusedDate);
|
|
62
|
-
}
|
|
63
|
-
afSelectedDateChangeHandler() {
|
|
64
|
-
this.afSelectedDates = isValid(this.afSelectedDate)
|
|
65
|
-
? [this.afSelectedDate]
|
|
66
|
-
: [];
|
|
67
|
-
}
|
|
68
|
-
afSelectedDatesChangeHandler() {
|
|
69
|
-
if (this.afSelectedDates.length > 0) {
|
|
70
|
-
if (this.afMultipleDates) {
|
|
71
|
-
const invalidDate = this.afSelectedDates.find((date) => !isValid(date));
|
|
72
|
-
if (invalidDate === undefined) {
|
|
73
|
-
this.selectedDates = this.afSelectedDates;
|
|
74
|
-
this.determineFocusedDate();
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
else if (isValid(this.afSelectedDates[0])) {
|
|
78
|
-
this.selectedDates = [this.afSelectedDates[0]];
|
|
79
|
-
this.determineFocusedDate();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
this.selectedDates = [];
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
focusoutHandler(e) {
|
|
87
|
-
const target = e.target;
|
|
88
|
-
const selector = `#${this.afId}-calendar`;
|
|
89
|
-
if (detectFocusOutside(target, selector)) {
|
|
90
|
-
this.afOnFocusOutside.emit(e);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
clickHandler(e) {
|
|
94
|
-
const target = e.target;
|
|
95
|
-
const selector = `#${this.afId}-calendar`;
|
|
96
|
-
if (detectClickOutside(target, selector)) {
|
|
97
|
-
this.afOnClickOutside.emit(e);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
determineFocusedDate() {
|
|
101
|
-
if (this.dirty) {
|
|
102
|
-
return; // Don't change focused date if user has already interacted with the calendar
|
|
103
|
-
}
|
|
104
|
-
else if (this.afOpenCalendarTo && isValid(this.afOpenCalendarTo)) {
|
|
105
|
-
this.focusedDate = this.afOpenCalendarTo;
|
|
106
|
-
}
|
|
107
|
-
else if (this.selectedDates.length > 0) {
|
|
108
|
-
this.focusedDate = this.selectedDates[0];
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
this.focusedDate = new Date();
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
drawCalendar(focusedDate) {
|
|
115
|
-
const date = {
|
|
116
|
-
year: focusedDate.getFullYear(),
|
|
117
|
-
month: focusedDate.getMonth()
|
|
118
|
-
};
|
|
119
|
-
this.lastWeekOfPreviousMonth = this.getWeekDays(this.getLastDayOfPrevMonth(date));
|
|
120
|
-
this.firstWeekOfNextMonth = this.getWeekDays(this.getFirstDayOfNextMonth(date));
|
|
121
|
-
this.weeksBetween = this.getWeeksBetween(this.getLastDayOfPrevMonth(date), this.getFirstDayOfNextMonth(date));
|
|
122
|
-
this.weekDaysbetween = this.getWeekdaysOfMonth(this.weeksBetween);
|
|
123
|
-
this.activeCalendar = this.appendFirstWeekOfNextMonth()
|
|
124
|
-
? [
|
|
125
|
-
this.lastWeekOfPreviousMonth,
|
|
126
|
-
...this.weekDaysbetween,
|
|
127
|
-
this.appendFirstWeekOfNextMonth()
|
|
128
|
-
]
|
|
129
|
-
: [this.lastWeekOfPreviousMonth, ...this.weekDaysbetween];
|
|
130
|
-
this.appendFirstWeekOfNextMonth();
|
|
131
|
-
if (this.afShowWeekNumber) {
|
|
132
|
-
this.activeCalendar.forEach((el, i) => {
|
|
133
|
-
this.activeCalendar[i].unshift(this.getWeekNumbers(el[0]));
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
appendFirstWeekOfNextMonth() {
|
|
138
|
-
const lastArray = JSON.stringify(this.weekDaysbetween.slice(-1)[0]);
|
|
139
|
-
const stringFirstweek = JSON.stringify(this.firstWeekOfNextMonth);
|
|
140
|
-
if (!this.firstWeekOfNextMonth.some((date) => this.isSameMonth(date, this.focusedDate))) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
else if (lastArray !== stringFirstweek) {
|
|
144
|
-
return this.firstWeekOfNextMonth;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
getLastDayOfPrevMonth(date) {
|
|
148
|
-
return new Date(date.year, date.month, 0);
|
|
149
|
-
}
|
|
150
|
-
getWeekDays(date) {
|
|
151
|
-
const today = date || new Date();
|
|
152
|
-
const week = [];
|
|
153
|
-
const dayOffset = today.getDay(); // 0=söndag
|
|
154
|
-
for (let i = 1; i <= 7; i++) {
|
|
155
|
-
week.push(new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOffset + i));
|
|
156
|
-
}
|
|
157
|
-
return week;
|
|
158
|
-
}
|
|
159
|
-
getFirstDayOfNextMonth(date) {
|
|
160
|
-
return new Date(date.year, date.month + 1, 1);
|
|
161
|
-
}
|
|
162
|
-
getWeeksBetween(lastDayOfPrevMonth, firstDayOnNextMonth) {
|
|
163
|
-
const week = 7 * 24 * 60 * 60 * 1000;
|
|
164
|
-
const d1ms = lastDayOfPrevMonth.getTime();
|
|
165
|
-
const d2ms = firstDayOnNextMonth.getTime();
|
|
166
|
-
const diff = Math.abs(d2ms - d1ms);
|
|
167
|
-
return Math.floor(diff / week);
|
|
168
|
-
}
|
|
169
|
-
getWeekdaysOfMonth(weeksBetween) {
|
|
170
|
-
let weeks = [];
|
|
171
|
-
for (let i = 1; i <= weeksBetween; i++) {
|
|
172
|
-
weeks = [...weeks, this.getWeekDays(this.getUpcoming(i))];
|
|
173
|
-
}
|
|
174
|
-
return weeks;
|
|
175
|
-
}
|
|
176
|
-
getUpcoming(weeks) {
|
|
177
|
-
return new Date(this.focusedDate.getFullYear(), this.focusedDate.getMonth(), 7 * weeks);
|
|
178
|
-
}
|
|
179
|
-
onDirty() {
|
|
180
|
-
if (!this.dirty) {
|
|
181
|
-
this.dirty = true;
|
|
182
|
-
this.afOnDirty.emit(this.dirty);
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
selectDateHandler(dateSelected) {
|
|
186
|
-
this.onDirty();
|
|
187
|
-
if (!this.isDateSelectable(dateSelected))
|
|
188
|
-
return;
|
|
189
|
-
if (this.isDateSelected(dateSelected)) {
|
|
190
|
-
this.selectedDates = this.afMultipleDates
|
|
191
|
-
? this.selectedDates.filter((d) => {
|
|
192
|
-
return !this.isSameDate(d, dateSelected);
|
|
193
|
-
})
|
|
194
|
-
: [];
|
|
195
|
-
}
|
|
196
|
-
else {
|
|
197
|
-
this.selectedDates = this.afMultipleDates
|
|
198
|
-
? [...this.selectedDates, dateSelected]
|
|
199
|
-
: [dateSelected];
|
|
200
|
-
}
|
|
201
|
-
this.focusedDate = new Date(dateSelected);
|
|
202
|
-
this.afOnDateSelectedChange.emit(this.selectedDates);
|
|
203
|
-
}
|
|
204
|
-
getMonthName(monthNumber) {
|
|
205
|
-
return new Date(1992, monthNumber, 1)
|
|
206
|
-
.toLocaleDateString(_t.locale, {
|
|
207
|
-
month: 'short'
|
|
208
|
-
})
|
|
209
|
-
.replace('.', '');
|
|
210
|
-
}
|
|
211
|
-
getFullMonthName(monthNumber) {
|
|
212
|
-
return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(_t.locale, {
|
|
213
|
-
month: 'long',
|
|
214
|
-
year: 'numeric'
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
// Get the week number of a specific date. Taken from https://weeknumber.com/how-to/javascript
|
|
218
|
-
getWeekNumbers(dateInput) {
|
|
219
|
-
const date = new Date(dateInput);
|
|
220
|
-
date.getTime();
|
|
221
|
-
date.setHours(0, 0, 0, 0);
|
|
222
|
-
date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
|
|
223
|
-
const week1 = new Date(date.getFullYear(), 0, 4);
|
|
224
|
-
return (1 +
|
|
225
|
-
Math.round(((date.getTime() - week1.getTime()) / 86400000 -
|
|
226
|
-
3 +
|
|
227
|
-
((week1.getDay() + 6) % 7)) /
|
|
228
|
-
7));
|
|
229
|
-
}
|
|
230
|
-
isSameMonth(date, currentDate) {
|
|
231
|
-
if (date instanceof Date && date instanceof Date) {
|
|
232
|
-
return (`${date.getFullYear()}${date.getMonth()}` ===
|
|
233
|
-
`${currentDate.getFullYear()}${currentDate.getMonth()}`);
|
|
234
|
-
}
|
|
235
|
-
return false;
|
|
236
|
-
}
|
|
237
|
-
isSameDate(date, newDate) {
|
|
238
|
-
return this.getDateString(date) === this.getDateString(newDate);
|
|
239
|
-
}
|
|
240
|
-
getDateString(date) {
|
|
241
|
-
return `${date.getDate()}${date.getMonth()}${date.getFullYear()}`;
|
|
242
|
-
}
|
|
243
|
-
isDateSelected(date) {
|
|
244
|
-
return !!this.selectedDates.find((d) => this.isSameDate(date, d));
|
|
245
|
-
}
|
|
246
|
-
isDateSelectable(date) {
|
|
247
|
-
if (this.afMinDate && this.isBefore(date, this.afMinDate))
|
|
248
|
-
return false;
|
|
249
|
-
if (this.afMaxDate && this.isAfter(date, this.afMaxDate))
|
|
250
|
-
return false;
|
|
251
|
-
return true;
|
|
252
|
-
}
|
|
253
|
-
isBefore(a, b) {
|
|
254
|
-
return isBefore(this.dateWithoutTime(a), this.dateWithoutTime(b));
|
|
255
|
-
}
|
|
256
|
-
isAfter(a, b) {
|
|
257
|
-
return isAfter(this.dateWithoutTime(a), this.dateWithoutTime(b));
|
|
258
|
-
}
|
|
259
|
-
dateWithoutTime(date) {
|
|
260
|
-
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
261
|
-
}
|
|
262
|
-
isInAnotherMonth(date) {
|
|
263
|
-
return !this.isSameMonth(date, this.focusedDate);
|
|
264
|
-
}
|
|
265
|
-
subtractMonth() {
|
|
266
|
-
this.onDirty();
|
|
267
|
-
const month = new Date(this.focusedDate);
|
|
268
|
-
const currentDay = month.getDate();
|
|
269
|
-
month.setMonth(month.getMonth() - 1, 1);
|
|
270
|
-
const lastDayOfPrevMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
|
|
271
|
-
month.setDate(Math.min(currentDay, lastDayOfPrevMonth));
|
|
272
|
-
this.focusedDate = month;
|
|
273
|
-
}
|
|
274
|
-
addMonth() {
|
|
275
|
-
this.onDirty();
|
|
276
|
-
const month = new Date(this.focusedDate);
|
|
277
|
-
const currentDay = month.getDate();
|
|
278
|
-
month.setMonth(month.getMonth() + 1, 1);
|
|
279
|
-
const lastDayOfNextMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
|
|
280
|
-
month.setDate(Math.min(currentDay, lastDayOfNextMonth));
|
|
281
|
-
this.focusedDate = month;
|
|
282
|
-
}
|
|
283
|
-
getCurrent(date) {
|
|
284
|
-
return this.isSameDate(date, new Date()) ? 'date' : null;
|
|
285
|
-
}
|
|
286
|
-
setTabIndex(date) {
|
|
287
|
-
return this.isFocused(date) ? 0 : -1;
|
|
288
|
-
}
|
|
289
|
-
navigateHandler(e, daysToAdd) {
|
|
290
|
-
!!e.detail && e.detail.preventDefault();
|
|
291
|
-
if (e.detail.key === 'Tab') {
|
|
292
|
-
return;
|
|
293
|
-
}
|
|
294
|
-
this.onDirty();
|
|
295
|
-
const date = new Date(e.detail.target.dataset.date);
|
|
296
|
-
const newDate = new Date(date.setDate(date.getDate() + daysToAdd));
|
|
297
|
-
this.focusedDate = newDate;
|
|
298
|
-
this.resetFocus();
|
|
299
|
-
}
|
|
300
|
-
resetFocus() {
|
|
301
|
-
setTimeout(() => {
|
|
302
|
-
const dates = this._tbody.querySelectorAll('.digi-calendar__date');
|
|
303
|
-
if (dates.length <= 0) {
|
|
304
|
-
logger.warn(`Could not find an element with data-date attribute matching navigated date.`, this._tbody);
|
|
305
|
-
return;
|
|
306
|
-
}
|
|
307
|
-
Array.from(dates).map((date) => {
|
|
308
|
-
const d = date;
|
|
309
|
-
d.tabIndex = -1;
|
|
310
|
-
d.classList.remove('digi-calendar__date--focused');
|
|
311
|
-
if (d.dataset.date === this.getFullDate(this.focusedDate)) {
|
|
312
|
-
d.focus();
|
|
313
|
-
d.tabIndex = 0;
|
|
314
|
-
d.classList.add('digi-calendar__date--focused');
|
|
315
|
-
}
|
|
316
|
-
});
|
|
317
|
-
}, 100);
|
|
318
|
-
}
|
|
319
|
-
getFullDate(date) {
|
|
320
|
-
return date.toLocaleString(_t.locale, {
|
|
321
|
-
day: 'numeric',
|
|
322
|
-
month: 'numeric',
|
|
323
|
-
year: 'numeric'
|
|
324
|
-
});
|
|
325
|
-
}
|
|
326
|
-
getDateName(date) {
|
|
327
|
-
return date.toLocaleString(_t.locale, {
|
|
328
|
-
year: 'numeric',
|
|
329
|
-
month: 'long',
|
|
330
|
-
day: 'numeric'
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
isFocused(date) {
|
|
334
|
-
if (this.dirty) {
|
|
335
|
-
return this.isSameDate(date, this.focusedDate);
|
|
336
|
-
}
|
|
337
|
-
if (this.afOpenCalendarTo) {
|
|
338
|
-
return this.isSameDate(date, this.afOpenCalendarTo);
|
|
339
|
-
}
|
|
340
|
-
return this.isSameMonth(date, new Date())
|
|
341
|
-
? this.isSameDate(date, new Date())
|
|
342
|
-
: this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
|
|
343
|
-
}
|
|
344
|
-
ariaPressed(date) {
|
|
345
|
-
return this.selectedDates.length > 0 &&
|
|
346
|
-
!!this.selectedDates.find((d) => this.isSameDate(d, date))
|
|
347
|
-
? 'true'
|
|
348
|
-
: 'false';
|
|
349
|
-
}
|
|
350
|
-
selectMonth(evt) {
|
|
351
|
-
this.onDirty();
|
|
352
|
-
const tempDate = new Date(this.focusedDate);
|
|
353
|
-
const selectedMonth = parseInt(evt.target.value, 10);
|
|
354
|
-
const currentDay = tempDate.getDate();
|
|
355
|
-
tempDate.setMonth(selectedMonth, 1);
|
|
356
|
-
const lastDayOfSelectedMonth = new Date(tempDate.getFullYear(), selectedMonth + 1, 0).getDate();
|
|
357
|
-
tempDate.setDate(Math.min(currentDay, lastDayOfSelectedMonth));
|
|
358
|
-
this.focusedDate = tempDate;
|
|
359
|
-
}
|
|
360
|
-
selectYear(evt) {
|
|
361
|
-
this.onDirty();
|
|
362
|
-
const selectedYear = parseInt(evt.target.value, 10);
|
|
363
|
-
// Skydda mot ogiltiga datum som 29 februari
|
|
364
|
-
const day = Math.min(this.focusedDate.getDate(), new Date(selectedYear, this.focusedDate.getMonth() + 1, 0).getDate());
|
|
365
|
-
const newDate = new Date(selectedYear, this.focusedDate.getMonth(), day);
|
|
366
|
-
this.focusedDate = newDate;
|
|
367
|
-
}
|
|
368
|
-
earliestSelectableYear() {
|
|
369
|
-
if (this.afMinDate)
|
|
370
|
-
return this.afMinDate.getFullYear();
|
|
371
|
-
return 1900;
|
|
372
|
-
}
|
|
373
|
-
latestSelectableYear() {
|
|
374
|
-
if (this.afMaxDate)
|
|
375
|
-
return this.afMaxDate.getFullYear();
|
|
376
|
-
return new Date(Date.now()).getFullYear() + 10;
|
|
377
|
-
}
|
|
378
|
-
allSelectableYears() {
|
|
379
|
-
const allYears = [];
|
|
380
|
-
let currentYear = this.earliestSelectableYear();
|
|
381
|
-
while (currentYear <= this.latestSelectableYear()) {
|
|
382
|
-
allYears.push(currentYear++);
|
|
383
|
-
}
|
|
384
|
-
return allYears;
|
|
385
|
-
}
|
|
386
|
-
componentWillLoad() {
|
|
387
|
-
var _a;
|
|
388
|
-
if (isValid(this.afSelectedDate)) {
|
|
389
|
-
this.selectedDates = [this.afSelectedDate];
|
|
390
|
-
}
|
|
391
|
-
else if (((_a = this.afSelectedDates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
392
|
-
const valid = this.afSelectedDates.filter((d) => isValid(d));
|
|
393
|
-
if (valid.length > 0)
|
|
394
|
-
this.selectedDates = valid;
|
|
395
|
-
}
|
|
396
|
-
this.determineFocusedDate();
|
|
397
|
-
this.drawCalendar(this.focusedDate);
|
|
398
|
-
}
|
|
399
|
-
async componentDidLoad() {
|
|
400
|
-
if (isValid(this.afSelectedDate))
|
|
401
|
-
this.selectedDates = [this.afSelectedDate];
|
|
402
|
-
else
|
|
403
|
-
this.afSelectedDatesChangeHandler();
|
|
404
|
-
await customElements.whenDefined('digi-form-select');
|
|
405
|
-
}
|
|
406
|
-
cssDateModifiers(date) {
|
|
407
|
-
const shownMonth = this.focusedDate.getMonth();
|
|
408
|
-
return {
|
|
409
|
-
'digi-calendar__date--today': this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date),
|
|
410
|
-
'digi-calendar__date--disabled': this.isInAnotherMonth(date),
|
|
411
|
-
'digi-calendar__date--focused': this.isFocused(date),
|
|
412
|
-
'digi-calendar__date--selected': this.isDateSelected(date) && date.getMonth() === shownMonth,
|
|
413
|
-
'digi-calendar__date--not-selectable': !this.isInAnotherMonth(date) && !this.isDateSelectable(date)
|
|
414
|
-
};
|
|
415
|
-
}
|
|
416
|
-
render() {
|
|
417
|
-
return (h("div", { key: '1077a770af823d9e0c0f59cdc6f1fef2a49d761a', class: {
|
|
418
|
-
'digi-calendar': true,
|
|
419
|
-
'digi-calendar--hide': !this.afActive
|
|
420
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'cd7dfa8e20efd08afa590cd4e177ddb4c41455d8', class: "digi-calendar__header" }, h("div", { key: 'd1e6e956713de7fe417253be0fc1ec3aea9748b0', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: 'cf34feec9ed25e0251effe86b3ce393918a32eda', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
421
|
-
this.selectMonth(evt);
|
|
422
|
-
} }, _t.calendar.months.map((month, index) => {
|
|
423
|
-
return h("option", { value: index }, month);
|
|
424
|
-
})), h("digi-form-select", { key: 'ddcd90917d6dba315f8018c4311c852f3471d3c0', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
425
|
-
this.selectYear(evt);
|
|
426
|
-
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '814648caa21619240a5904a809c95024398e9741', class: "digi-calendar__header" }, h("div", { key: 'd3dc54a4d0172d503bff66e5171846f433755c4b', class: "digi-calendar__header--month-step" }, h("button", { key: '7725160aab267e5cdd70618613b2f485d5b7dd7f', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
427
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'e8d1dc80011cb7e79ce6af893df2fd4601d92c74', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'ae56dadf565d819f8e89804596dbe38119fb592e', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '257ac7d346e084390aba658eb7329cab913e3463', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '0c483763c0420f1c172c78364d2ce931ffcd116d', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
428
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: 'de4617285a713bd9baa375a99f81bb027768c947', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '8d6252fcdd7a035ce8fe4e6f4cb468ce7935aeba', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '5080246278db71745444dcd40d0722a64e8c80b5', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: '9052f9c8135d95110f927c6a5a949fbd63daec7a', role: "grid", class: "digi-calendar__table" }, h("thead", { key: '428467866c49e65d348db796a006611542aabc02' }, h("tr", { key: '260024069438dadff553bc3391a37bbb533b5d11', role: "row" }, this.afShowWeekNumber && (h("th", { key: '2c22102011ade9125e61416ac78eaed16dec2e26', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: 'cbe3d290919c35ad27799c17e6b6236557dbe126', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
429
|
-
return (h("tr", null, week.map((day, i) => {
|
|
430
|
-
if (this.afShowWeekNumber && i === 0) {
|
|
431
|
-
return (h("th", { role: "rowheader", "aria-label": _t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
|
|
432
|
-
}
|
|
433
|
-
else {
|
|
434
|
-
return this.isInAnotherMonth(day) ? (h("td", null)) : (h("td", { role: "gridcell", class: "digi-calendar__td" }, h("button", { key: this.getFullDate(day), type: "button", class: Object.assign(Object.assign({}, this.cssDateModifiers(day)), { 'digi-calendar__date': true }), onClick: () => this.selectDateHandler(day), "aria-current": this.isSameDate(day, new Date()) ? 'date' : null, "aria-label": `
|
|
435
|
-
${!this.isDateSelectable(day)
|
|
436
|
-
? _t.calendar.disabledDate
|
|
437
|
-
: ''} ${this.getDateName(day)}
|
|
438
|
-
`, "aria-disabled": !this.isDateSelectable(day) ? 'true' : null, tabindex: this.setTabIndex(day), "data-date": this.getFullDate(day), "aria-pressed": this.isDateSelectable(day)
|
|
439
|
-
? this.ariaPressed(day)
|
|
440
|
-
: null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
441
|
-
}
|
|
442
|
-
})));
|
|
443
|
-
})))), h("slot", { key: 'e97e8147fc91a3b401665eeeb8db6be7036f678b', name: "calendar-footer" })));
|
|
444
|
-
}
|
|
445
|
-
static get watchers() { return {
|
|
446
|
-
"focusedDate": [{
|
|
447
|
-
"focusedDateChanged": 0
|
|
448
|
-
}],
|
|
449
|
-
"afOpenCalendarTo": [{
|
|
450
|
-
"afOpenCalendarToChangeHandler": 0
|
|
451
|
-
}],
|
|
452
|
-
"afShowWeekNumber": [{
|
|
453
|
-
"afShowWeekNumberChangeHandler": 0
|
|
454
|
-
}],
|
|
455
|
-
"afSelectedDate": [{
|
|
456
|
-
"afSelectedDateChangeHandler": 0
|
|
457
|
-
}],
|
|
458
|
-
"afSelectedDates": [{
|
|
459
|
-
"afSelectedDatesChangeHandler": 0
|
|
460
|
-
}]
|
|
461
|
-
}; }
|
|
462
|
-
};
|
|
463
|
-
Calendar.style = calendarCss();
|
|
464
|
-
|
|
465
|
-
const iconCalendarAltCss = () => `.sc-digi-icon-calendar-alt-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-calendar-alt-h svg.sc-digi-icon-calendar-alt{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)}`;
|
|
466
|
-
|
|
467
|
-
const IconCalendarAlt = class {
|
|
468
|
-
constructor(hostRef) {
|
|
469
|
-
registerInstance(this, hostRef);
|
|
470
|
-
/**
|
|
471
|
-
* För att dölja ikonen för skärmläsare. Default är satt till true.
|
|
472
|
-
* @en Hides the icon for screen readers. Default is set to true.
|
|
473
|
-
*/
|
|
474
|
-
this.afSvgAriaHidden = true;
|
|
475
|
-
this.titleId = randomIdGenerator('icontitle');
|
|
476
|
-
}
|
|
477
|
-
render() {
|
|
478
|
-
return (h("svg", { key: '51b9d922462d3ad108545dbe7df4bf805334b0ef', class: "digi-icon-calendar-alt", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
479
|
-
? this.afSvgAriaLabelledby
|
|
480
|
-
: this.afTitle
|
|
481
|
-
? this.titleId
|
|
482
|
-
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '0cf10651a3b238c59bc9f342cec98ff7c2a967e7', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'a7826ce588a9bd9580c3f45a20834ff4e66a3620' }, this.afDesc), h("path", { key: '0854e6fc47b9a773f3d902e557535765d973252a', class: "digi-icon-calendar-alt__shape", d: "M21.41 8.125H.59a.601.601 0 01-.59-.61V5.689C0 4.341 1.056 3.25 2.357 3.25h2.357V.61c0-.336.265-.61.59-.61h1.964c.324 0 .59.274.59.61v2.64h6.285V.61c0-.336.265-.61.59-.61h1.963c.325 0 .59.274.59.61v2.64h2.357C20.944 3.25 22 4.342 22 5.688v1.828c0 .335-.265.609-.59.609zM.59 9.75h20.82c.325 0 .59.274.59.61v13.203C22 24.907 20.944 26 19.643 26H2.357C1.056 26 0 24.908 0 23.562V10.36c0-.335.265-.609.59-.609zm5.696 10.36a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm6.285 6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm6.286 6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
483
|
-
}
|
|
484
|
-
};
|
|
485
|
-
IconCalendarAlt.style = iconCalendarAltCss();
|
|
486
|
-
|
|
487
|
-
export { Calendar as digi_calendar, IconCalendarAlt as digi_icon_calendar_alt };
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, d as getElement } from './index-BnKuq1L7.js';
|
|
2
|
-
import { _ as _t } from './text-DsO1BTml.js';
|
|
3
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
|
|
4
|
-
import { E as ExpandableAccordionHeaderLevel } from './expandable-accordion-header-level.enum-DwNlf6Sh.js';
|
|
5
|
-
|
|
6
|
-
const expandableAccordionCss = () => `.sc-digi-expandable-accordion-h{--digi--expandable-accordion--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all;--digi--expandable-accordion--header--font-size:var(--digi--typography--accordion--font-size--desktop);--digi--expandable-accordion--header--font-size--small:var(--digi--typography--accordion--font-size--mobile);--digi--expandable-accordion--header--font-weight:var(--digi--typography--accordion--font-weight--desktop);--digi--expandable-accordion--icon--size:0.875rem;--digi--expandable-accordion--icon--margin-right:var(--digi--margin--medium);--digi--expandable-accordion--border-bottom-width:var(--digi--border-width--secondary);--digi--expandable-accordion--border-bottom-color:var(--digi--color--divider--cta);--digi--expandable-accordion--content--padding:var(--digi--padding--medium) 0;--digi--expandable-accordion--content--transition:ease-in-out var(--digi--animation--duration--base) height;display:block}.sc-digi-expandable-accordion-h .digi-expandable-accordion.sc-digi-expandable-accordion::after{content:"";display:block;max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.sc-digi-expandable-accordion-h .digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion::after{content:"";display:block;max-width:none;border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.digi-expandable-accordion__header.sc-digi-expandable-accordion{display:flex;align-items:center}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--header--toggle-icon--transition)}.digi-expandable-accordion--expanded-true.sc-digi-expandable-accordion .digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transform:rotate(-180deg)}.digi-expandable-accordion__heading.sc-digi-expandable-accordion{margin:0;flex:1}.digi-expandable-accordion__heading-text.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium)}.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--expandable-accordion--header--font-size--small);font-weight:var(--digi--expandable-accordion--header--font-weight);width:100%;display:flex;gap:var(--digi--expandable-accordion--icon--margin-right);align-items:center;text-align:start;cursor:pointer;border:none}@media (min-width: 48rem){.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-size:var(--digi--expandable-accordion--header--font-size)}}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{color:var(--digi--color--text--primary);background-color:transparent;padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:hover{text-decoration:underline}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__content.sc-digi-expandable-accordion{overflow-y:hidden}.digi-expandable-accordion--expanded-false.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{height:0}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion>div.sc-digi-expandable-accordion{padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.digi-expandable-accordion--animation-true.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--content--transition)}.digi-expandable-accordion__toggle-inside.sc-digi-expandable-accordion{text-align:center;--digi--button--color--background--function--hover:var(--digi--color--background--primary)}@keyframes heightAnim{from{height:0%}to{height:100%}}`;
|
|
7
|
-
|
|
8
|
-
const ExpandableAccordion = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.afOnClick = createEvent(this, "afOnClick", 7);
|
|
12
|
-
/**
|
|
13
|
-
* Sätter utfällbar rubrik. 'h2' är förvalt.
|
|
14
|
-
* @en Set heading level. Default is 'h2'
|
|
15
|
-
*/
|
|
16
|
-
this.afHeadingLevel = ExpandableAccordionHeaderLevel.H2;
|
|
17
|
-
/**
|
|
18
|
-
* Gör så att komponenten tar upp 100% i bredd av ytan den befinner sig i.
|
|
19
|
-
* @en Makes the component take up 100% of the width of the surface it is in.
|
|
20
|
-
*/
|
|
21
|
-
this.afFullWidth = false;
|
|
22
|
-
/**
|
|
23
|
-
* Sätter läge på rubriken om den ska vara expanderad eller ej.
|
|
24
|
-
* @en Sets the state of the accordion to expanded or not.
|
|
25
|
-
*/
|
|
26
|
-
this.afExpanded = false;
|
|
27
|
-
/**
|
|
28
|
-
* Ställer in ifall komponenten ska ha en animation vid utfällning. Animation är påslagen som standard.
|
|
29
|
-
* @en Sets the state of the animation for the accordion's expanded area. Animation is on as default.
|
|
30
|
-
*/
|
|
31
|
-
this.afAnimation = true;
|
|
32
|
-
/**
|
|
33
|
-
* Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
|
|
34
|
-
* @en Set id attribute. Defaults to random string.
|
|
35
|
-
*/
|
|
36
|
-
this.afId = randomIdGenerator('digi-expandable-accordion');
|
|
37
|
-
/**
|
|
38
|
-
* Sätter texten som visas på knappen som expanderar komponenten. Om inget väljs så används "Visa"
|
|
39
|
-
* @en Sets the text on the button that expands the component. Defaults to "Visa".
|
|
40
|
-
*/
|
|
41
|
-
this.afExpandText = _t.show;
|
|
42
|
-
/**
|
|
43
|
-
* Sätter texten som visas på knappen som kollapsar komponenten. Om inget väljs så används "Dölj"
|
|
44
|
-
* @en Sets the text on the button that collapses the component. Defaults to "Dölj".
|
|
45
|
-
*/
|
|
46
|
-
this.afCollapseText = _t.hide;
|
|
47
|
-
}
|
|
48
|
-
get cssModifiers() {
|
|
49
|
-
return {
|
|
50
|
-
[`digi-expandable-accordion--expanded-${!!this.afExpanded}`]: true,
|
|
51
|
-
[`digi-expandable-accordion--animation-${!!this.afAnimation}`]: true,
|
|
52
|
-
[`digi-expandable-accordion--variation-primary`]: true,
|
|
53
|
-
[`digi-expandable-accordion--fullwidth`]: this.afFullWidth
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Hämtar en höjden till innehållet i Utfällbar yta och animera innehållet.
|
|
58
|
-
* @en Gets a height to the content for expandable and animate the content.
|
|
59
|
-
*/
|
|
60
|
-
componentDidLoad() {
|
|
61
|
-
const content = this.hostElement.querySelector(`#${this.afId}-content`);
|
|
62
|
-
if (!this.afExpanded) {
|
|
63
|
-
content.setAttribute('style', 'visibility: hidden;');
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
content.setAttribute('style', 'height: auto;');
|
|
67
|
-
}
|
|
68
|
-
content.addEventListener('transitionend', () => {
|
|
69
|
-
if (!this.afExpanded) {
|
|
70
|
-
content.setAttribute('style', 'visibility: hidden; height: ' + 0 + 'px');
|
|
71
|
-
}
|
|
72
|
-
else
|
|
73
|
-
content.setAttribute('style', 'height: auto');
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
animateContentHeight() {
|
|
77
|
-
const content = this.hostElement.querySelector(`#${this.afId}-content`);
|
|
78
|
-
const sectionHeight = content.firstElementChild
|
|
79
|
-
.offsetHeight;
|
|
80
|
-
if (!this.afExpanded && content.style.height === 'auto') {
|
|
81
|
-
content.setAttribute('style', 'height: ' + sectionHeight + 'px');
|
|
82
|
-
setTimeout(() => {
|
|
83
|
-
content.setAttribute('style', 'height: 0');
|
|
84
|
-
});
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
if (this.afExpanded) {
|
|
88
|
-
content.setAttribute('style', 'visibility: visible; height:' + sectionHeight + 'px');
|
|
89
|
-
if (!this.afAnimation) {
|
|
90
|
-
setTimeout(() => {
|
|
91
|
-
content.setAttribute('style', 'height: auto');
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
else {
|
|
96
|
-
content.setAttribute('style', 'height: ' + 0 + 'px');
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
clickToggleHandler(e, resetFocus = false) {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
this.afExpanded = !this.afExpanded;
|
|
102
|
-
if (resetFocus) {
|
|
103
|
-
this._button.focus();
|
|
104
|
-
}
|
|
105
|
-
this.afOnClick.emit(e);
|
|
106
|
-
}
|
|
107
|
-
render() {
|
|
108
|
-
return (h("article", { key: '25e76d66020522814e7777c139c6206b1c103d4e', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '2265191f9ad2394befad5da1bdf51cd758d4adba', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '4a26fe5cd756612c36b48a9b04abcff54ba70941', class: "digi-expandable-accordion__heading" }, h("button", { key: '8bb8e9ba1f25650b88f6fc0d26b9c94af9510eee', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '2b86e033967c20cecc33b34185826b06ab4189e4', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: '8d3d486567b4e073818b35e77a8f5be92ea3cdef', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '764b758a0bd68b7a02581f620dc8204b517fa991', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: 'bad7d77ef14b2edcd80e54d52ffde7bf429caa59' }, h("digi-typography", { key: '15c4a8abc0f50f3521c0a9b39aeb06ce194e4a3b' }, h("slot", { key: '0718dba75edfab31158aec6bf04a8b2bfc60463e' }))))));
|
|
109
|
-
}
|
|
110
|
-
get hostElement() { return getElement(this); }
|
|
111
|
-
static get watchers() { return {
|
|
112
|
-
"afExpanded": [{
|
|
113
|
-
"animateContentHeight": 0
|
|
114
|
-
}]
|
|
115
|
-
}; }
|
|
116
|
-
};
|
|
117
|
-
ExpandableAccordion.style = expandableAccordionCss();
|
|
118
|
-
|
|
119
|
-
export { ExpandableAccordion as digi_expandable_accordion };
|