@designsystem-se/af 34.0.3-beta.0 → 34.0.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-form-select-filter.js +1 -1
- package/dist/cjs/{code-example-variation.enum-c6557727.js → code-example-variation.enum-6826a1e7.js} +7 -0
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-button_12.cjs.entry.js +1126 -0
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +8 -13
- package/dist/cjs/digi-code-block_3.cjs.entry.js +13 -18
- package/dist/cjs/digi-code-example.cjs.entry.js +3 -4
- package/dist/cjs/digi-dialog.cjs.entry.js +14 -19
- package/dist/cjs/digi-expandable-accordion.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 +6 -8
- package/dist/cjs/digi-form-receipt.cjs.entry.js +14 -19
- 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-navigation-pagination.cjs.entry.js +5 -10
- package/dist/cjs/digi-notification-alert.cjs.entry.js +12 -17
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +21 -26
- package/dist/cjs/digi-progress-indicator.cjs.entry.js +137 -0
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +15 -20
- package/dist/cjs/digi-util-mutation-observer.cjs.entry.js +64 -0
- package/dist/cjs/{form-input-type.enum-9c8ee12a.js → form-input-type.enum-1fb2180a.js} +14 -0
- package/dist/cjs/{form-file-upload-variation.enum-634cfae8.js → form-validation-message-variation.enum-c5ec3e2d.js} +7 -0
- package/dist/cjs/index-cfa8e9be.js +8 -24
- package/dist/cjs/index.cjs.js +105 -110
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{typography-variation.enum-252bed2e.js → progress-indicator-variation.enum-7cf8e0e4.js} +0 -6
- package/dist/cjs/{tools-feedback-variation.enum-b17e8f87.js → typography-variation.enum-07b834ba.js} +34 -0
- package/dist/collection/components/_form/form-select-filter/form-select-filter.css +1 -1
- package/dist/collection/design-tokens/components/_navigation-context-menu.variables.scss +47 -3
- package/dist/digi-arbetsformedlingen/design-tokens/components/_navigation-context-menu.variables.scss +0 -40
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-0b2baab8.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-333d2a13.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-38405a91.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-3887bb40.js +1 -0
- package/dist/digi-arbetsformedlingen/p-39708dfd.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-435d4154.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-47367a06.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-4934e112.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-4a7e484f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-537d3a7f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-53cfeeba.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-62c112f5.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-7fc94925.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-8f0cfb82.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-9dd5d6c8.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a29a52f3.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a8afc3af.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-b4e075c1.js +1 -0
- package/dist/digi-arbetsformedlingen/p-be5aa9ca.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c64b4626.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ccca6900.js +1 -0
- package/dist/digi-arbetsformedlingen/p-dc888867.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-e6ff6b0f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f8fa5e66.entry.js +1 -0
- package/dist/esm/{code-example-variation.enum-e9f9fced.js → code-example-variation.enum-222e18d3.js} +8 -1
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-button_12.entry.js +1111 -0
- package/dist/esm/digi-calendar-datepicker.entry.js +5 -10
- package/dist/esm/digi-code-block_3.entry.js +5 -10
- package/dist/esm/digi-code-example.entry.js +1 -2
- package/dist/esm/digi-dialog.entry.js +5 -10
- package/dist/esm/digi-expandable-accordion.entry.js +5 -10
- package/dist/esm/digi-footer.entry.js +5 -10
- package/dist/esm/digi-form-error-list.entry.js +5 -10
- package/dist/esm/digi-form-file-upload.entry.js +1 -2
- package/dist/esm/digi-form-input-search.entry.js +1 -3
- package/dist/esm/digi-form-receipt.entry.js +5 -10
- package/dist/esm/digi-header-navigation.entry.js +5 -10
- package/dist/esm/digi-header.entry.js +5 -10
- package/dist/esm/digi-navigation-pagination.entry.js +5 -10
- package/dist/esm/digi-notification-alert.entry.js +5 -10
- package/dist/esm/digi-notification-error-page.entry.js +5 -10
- package/dist/esm/digi-progress-indicator.entry.js +133 -0
- package/dist/esm/digi-tools-feedback.entry.js +5 -10
- package/dist/esm/digi-util-mutation-observer.entry.js +60 -0
- package/dist/esm/{form-input-type.enum-3da3db27.js → form-input-type.enum-a6bba983.js} +15 -1
- package/dist/esm/{form-file-upload-variation.enum-9c49ec5e.js → form-validation-message-variation.enum-f7835fc5.js} +8 -1
- package/dist/esm/index-8e318bb2.js +8 -24
- package/dist/esm/index.js +5 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{typography-variation.enum-d5ac8594.js → progress-indicator-variation.enum-b12ba50a.js} +1 -7
- package/dist/esm/{tools-feedback-variation.enum-4bfb560b.js → typography-variation.enum-253cc59f.js} +35 -1
- package/hydrate/index.js +1 -1
- package/hydrate/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/cjs/button-size.enum-7921c01e.js +0 -8
- package/dist/cjs/button-type.enum-406723db.js +0 -8
- package/dist/cjs/digi-button.cjs.entry.js +0 -130
- package/dist/cjs/digi-form-input.cjs.entry.js +0 -157
- package/dist/cjs/digi-form-label_3.cjs.entry.js +0 -129
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +0 -552
- package/dist/cjs/digi-icon-check_6.cjs.entry.js +0 -286
- package/dist/cjs/digi-icon-chevron-down.cjs.entry.js +0 -30
- package/dist/cjs/digi-util-keydown-handler.cjs.entry.js +0 -83
- package/dist/cjs/form-input-search-variation.enum-c50239bc.js +0 -8
- package/dist/cjs/form-input-variation.enum-c750520c.js +0 -29
- package/dist/cjs/form-validation-message-variation.enum-855ae0be.js +0 -8
- package/dist/digi-arbetsformedlingen/p-03c74be2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-1d065367.js +0 -1
- package/dist/digi-arbetsformedlingen/p-1f956af8.js +0 -1
- package/dist/digi-arbetsformedlingen/p-27a933f2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-38ac4375.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-3ee7d913.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4771449c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-48d8109b.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4c6b9991.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4e311538.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4e9b1820.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4e9cd0cd.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4f4113d7.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-525bd193.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-551f6906.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-5a602122.js +0 -1
- package/dist/digi-arbetsformedlingen/p-6492e062.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-766df2e4.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7933b555.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7f1574ff.js +0 -1
- package/dist/digi-arbetsformedlingen/p-80fce66a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-88b4d03a.js +0 -1
- package/dist/digi-arbetsformedlingen/p-905ccb30.js +0 -1
- package/dist/digi-arbetsformedlingen/p-91d1344c.js +0 -1
- package/dist/digi-arbetsformedlingen/p-a0472ce2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-bad82d8a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-bc37453e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-bc3d2778.js +0 -1
- package/dist/digi-arbetsformedlingen/p-c7fd83fa.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d13c7e47.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-edf6fbd2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ee9589e6.js +0 -1
- package/dist/digi-arbetsformedlingen/p-f3b56695.entry.js +0 -1
- package/dist/esm/button-size.enum-2dcd673f.js +0 -8
- package/dist/esm/button-type.enum-5250ae0b.js +0 -8
- package/dist/esm/digi-button.entry.js +0 -126
- package/dist/esm/digi-form-input.entry.js +0 -153
- package/dist/esm/digi-form-label_3.entry.js +0 -123
- package/dist/esm/digi-form-select-filter.entry.js +0 -548
- package/dist/esm/digi-icon-check_6.entry.js +0 -277
- package/dist/esm/digi-icon-chevron-down.entry.js +0 -26
- package/dist/esm/digi-util-keydown-handler.entry.js +0 -79
- package/dist/esm/form-input-search-variation.enum-f9d669f2.js +0 -8
- package/dist/esm/form-input-variation.enum-64d9450f.js +0 -29
- package/dist/esm/form-validation-message-variation.enum-bcef8a9d.js +0 -8
|
@@ -0,0 +1,1126 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-cfa8e9be.js');
|
|
6
|
+
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
+
const codeExampleVariation_enum = require('./code-example-variation.enum-6826a1e7.js');
|
|
8
|
+
const formInputType_enum = require('./form-input-type.enum-1fb2180a.js');
|
|
9
|
+
const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
|
|
10
|
+
const typographyVariation_enum = require('./typography-variation.enum-07b834ba.js');
|
|
11
|
+
const logger_util = require('./logger.util-fdafc086.js');
|
|
12
|
+
const text = require('./text-ca7e238b.js');
|
|
13
|
+
const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
|
|
14
|
+
const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
|
|
15
|
+
require('./badge-notification-shape.enum-ff802554.js');
|
|
16
|
+
require('./badge-status-variation.enum-0a5adc21.js');
|
|
17
|
+
require('./calendar-week-view-heading-level.enum-fd0c841b.js');
|
|
18
|
+
require('./card-footer-border.enum-143982da.js');
|
|
19
|
+
require('./bar-chart-variation.enum-a4e866b6.js');
|
|
20
|
+
require('./code-variation.enum-c4a4e6fd.js');
|
|
21
|
+
require('./expandable-faq-item-variation.enum-89427195.js');
|
|
22
|
+
require('./expandable-faq-variation.enum-af923f49.js');
|
|
23
|
+
require('./footer-card-variation.enum-99555edc.js');
|
|
24
|
+
require('./form-checkbox-variation.enum-d2ca879e.js');
|
|
25
|
+
const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-c5ec3e2d.js');
|
|
26
|
+
require('./form-select-variation.enum-528c1bf0.js');
|
|
27
|
+
require('./form-textarea-variation.enum-9c90d40f.js');
|
|
28
|
+
require('./info-card-multi-type.enum-14746572.js');
|
|
29
|
+
require('./info-card-variation.enum-64cef637.js');
|
|
30
|
+
require('./layout-container-max-width.enum-7e637f44.js');
|
|
31
|
+
require('./layout-block-variation.enum-f6102119.js');
|
|
32
|
+
require('./layout-columns-variation.enum-65675649.js');
|
|
33
|
+
require('./layout-media-object-alignment.enum-81c8e205.js');
|
|
34
|
+
require('./link-button-variation.enum-6c51aa80.js');
|
|
35
|
+
require('./list-type.enum-aea4d012.js');
|
|
36
|
+
require('./loader-skeleton-variation.enum-d52ba55e.js');
|
|
37
|
+
require('./loader-spinner-size.enum-db2973f0.js');
|
|
38
|
+
require('./logo-variation.enum-607fadb4.js');
|
|
39
|
+
require('./media-figure-alignment.enum-3885aba5.js');
|
|
40
|
+
require('./navigation-context-menu-item-type.enum-9b8142ad.js');
|
|
41
|
+
require('./navigation-context-menu-horizontal-position.enum-71b76501.js');
|
|
42
|
+
require('./navigation-sidebar-variation.enum-1c0c3064.js');
|
|
43
|
+
require('./navigation-vertical-menu-variation.enum-c237edd3.js');
|
|
44
|
+
require('./progress-indicator-variation.enum-7cf8e0e4.js');
|
|
45
|
+
require('./progress-list-item-variation.enum-90e4c874.js');
|
|
46
|
+
require('./progress-list-variation.enum-06d5ce27.js');
|
|
47
|
+
require('./progressbar-variation.enum-aff9fa80.js');
|
|
48
|
+
require('./quote-image-inner-position.enum-e64e7a6d.js');
|
|
49
|
+
require('./table-variation.enum-25df2ad7.js');
|
|
50
|
+
require('./tag-media-icon.enum-372563c5.js');
|
|
51
|
+
require('./tag-size.enum-0a6be639.js');
|
|
52
|
+
require('./tools-feedback-banner-type.enum-de373ba0.js');
|
|
53
|
+
require('./tools-feedback-rating-variation.enum-2f71e84d.js');
|
|
54
|
+
require('./typography-heading-jumbo-variation.enum-8677e099.js');
|
|
55
|
+
require('./typography-meta-variation.enum-13ac3538.js');
|
|
56
|
+
require('./typography-time-variation.enum-bce1d87e.js');
|
|
57
|
+
require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
|
|
58
|
+
const keyboardHandler_util = require('./keyboardHandler.util-d8600adb.js');
|
|
59
|
+
require('./detectClosest.util-85b3507b.js');
|
|
60
|
+
|
|
61
|
+
const buttonCss = ".digi--util--fs--xs.sc-digi-button{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-button{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-button{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-button{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-button{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-button{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-button{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-button{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-button{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-button{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-button{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-button{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-button{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-button{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-button{padding-top:5rem !important}.digi--util--pb--1.sc-digi-button{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-button{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-button{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-button{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-button{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-button{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-button{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-button{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-button{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-button{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-button{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-button{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-button{padding:2.5rem !important}.digi--util--p--60.sc-digi-button{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-button{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-button{padding:4.5rem !important}.digi--util--p--90.sc-digi-button{padding:5rem !important}.digi--util--ptb--1.sc-digi-button{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-button{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-button{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-button{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-button{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-button{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-button{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-button{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-button{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-button{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-button{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-button{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-button{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-button{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-button{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-button{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-button{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-button{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-button{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-button{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-button{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}.digi--util--hidden.sc-digi-button{display:none}.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--inverted-1);--digi--button--color--background--primary--hover:var(--digi--color--background--inverted-6);--digi--button--color--background--primary--focus:var(--digi--color--background--inverted-6);--digi--button--color--background--primary--active:var(--digi--color--background--inverted-6);--digi--button--color--background--secondary--default:var(--digi--color--background--primary);--digi--button--color--background--secondary--hover:var(--digi--color--background--inverted-5);--digi--button--color--background--secondary--focus:var(--digi--color--background--inverted-5);--digi--button--color--background--secondary--active:var(--digi--color--background--inverted-5);--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--inverted);--digi--button--color--text--primary--hover:var(--digi--color--text--inverted);--digi--button--color--text--primary--focus:var(--digi--color--text--inverted);--digi--button--color--text--primary--active:var(--digi--color--text--inverted);--digi--button--color--text--secondary--default:var(--digi--color--text--secondary);--digi--button--color--text--secondary--hover:var(--digi--color--text--secondary);--digi--button--color--text--secondary--focus:var(--digi--color--text--secondary);--digi--button--color--text--secondary--active:var(--digi--color--text--secondary);--digi--button--color--text--function--default:var(--digi--color--text--link);--digi--button--color--text--function--hover:var(--digi--color--text--link-hover);--digi--button--color--text--function--focus:var(--digi--color--text--secondary);--digi--button--color--text--function--active:var(--digi--color--text--secondary);--digi--button--color--border--primary--default:var(--digi--color--border--secondary);--digi--button--color--border--primary--hover:var(--digi--color--border--inverted-2);--digi--button--color--border--primary--focus:var(--digi--color--border--inverted-2);--digi--button--color--border--primary--active:var(--digi--color--border--inverted-2);--digi--button--color--border--secondary--default:var(--digi--color--border--secondary);--digi--button--color--border--secondary--hover:var(--digi--color--border--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--secondary);--digi--button--color--border--secondary--active:var(--digi--color--border--secondary);--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--text--inverted);--digi--button--color--icon--primary--hover:var(--digi--color--text--inverted);--digi--button--color--icon--primary--focus:var(--digi--color--text--inverted);--digi--button--color--icon--primary--active:var(--digi--color--text--inverted);--digi--button--color--icon--secondary--default:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--hover:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--focus:var(--digi--color--text--secondary);--digi--button--color--icon--secondary--active:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--link);--digi--button--color--icon--function--hover:var(--digi--color--text--link-hover);--digi--button--color--icon--function--focus:var(--digi--color--text--secondary);--digi--button--color--icon--function--active:var(--digi--color--text--secondary);--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-size--large:var(--digi--global--typography--font-size--interaction-large);--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--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset;--digi--button--min-height--large:unset}.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);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}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(\n --digi--button--color--background--primary--default\n );--COLOR--BACKGROUND--HOVER:var(\n --digi--button--color--background--primary--hover\n );--COLOR--BACKGROUND--FOCUS:var(\n --digi--button--color--background--primary--focus\n );--COLOR--BACKGROUND--ACTIVE:var(\n --digi--button--color--background--primary--active\n );--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(\n --digi--button--color--border--primary--default\n );--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(\n --digi--button--border-radius--primary--default\n );--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(\n --digi--button--color--background--secondary--default\n );--COLOR--BACKGROUND--HOVER:var(\n --digi--button--color--background--secondary--hover\n );--COLOR--BACKGROUND--FOCUS:var(\n --digi--button--color--background--secondary--focus\n );--COLOR--BACKGROUND--ACTIVE:var(\n --digi--button--color--background--secondary--active\n );--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(\n --digi--button--color--border--secondary--default\n );--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(\n --digi--button--color--border--secondary--active\n );--BORDER-RADIUS--DEFAULT:var(\n --digi--button--border-radius--secondary--default\n );--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(\n --digi--button--border-radius--secondary--active\n );--BORDER-WIDTH--DEFAULT:var(\n --digi--button--border-width--secondary--default\n );--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(\n --digi--button--border-style--secondary--default\n );--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(\n --digi--button--color--background--function--default\n );--COLOR--BACKGROUND--HOVER:var(\n --digi--button--color--background--function--hover\n );--COLOR--BACKGROUND--FOCUS:var(\n --digi--button--color--background--function--focus\n );--COLOR--BACKGROUND--ACTIVE:var(\n --digi--button--color--background--function--active\n );--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(\n --digi--button--color--border--function--default\n );--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(\n --digi--button--border-radius--function--default\n );--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--large)}.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: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(\n --digi--button--text-align--full-width\n );--digi--button--justify-content--default:var(\n --digi--button--justify-content--full-width\n )}";
|
|
62
|
+
const DigiButtonStyle0 = buttonCss;
|
|
63
|
+
|
|
64
|
+
const Button = class {
|
|
65
|
+
constructor(hostRef) {
|
|
66
|
+
index.registerInstance(this, hostRef);
|
|
67
|
+
this.afOnClick = index.createEvent(this, "afOnClick", 7);
|
|
68
|
+
this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
|
|
69
|
+
this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
|
|
70
|
+
this.afOnReady = index.createEvent(this, "afOnReady", 3);
|
|
71
|
+
this.hasIcon = undefined;
|
|
72
|
+
this.hasIconSecondary = undefined;
|
|
73
|
+
this.isFullSize = undefined;
|
|
74
|
+
this.afSize = codeExampleVariation_enum.ButtonSize.MEDIUM;
|
|
75
|
+
this.afTabindex = undefined;
|
|
76
|
+
this.afVariation = buttonVariation_enum.ButtonVariation.PRIMARY;
|
|
77
|
+
this.afType = formInputType_enum.ButtonType.BUTTON;
|
|
78
|
+
this.afId = randomIdGenerator_util.randomIdGenerator('digi-button');
|
|
79
|
+
this.afAriaLabel = undefined;
|
|
80
|
+
this.afAriaLabelledby = undefined;
|
|
81
|
+
this.afAriaControls = undefined;
|
|
82
|
+
this.afForm = undefined;
|
|
83
|
+
this.afAriaPressed = undefined;
|
|
84
|
+
this.afAriaExpanded = undefined;
|
|
85
|
+
this.afAriaHaspopup = undefined;
|
|
86
|
+
this.afAriaCurrent = undefined;
|
|
87
|
+
this.afRole = undefined;
|
|
88
|
+
this.afAriaChecked = undefined;
|
|
89
|
+
this.afLang = undefined;
|
|
90
|
+
this.afDir = undefined;
|
|
91
|
+
this.afFullWidth = false;
|
|
92
|
+
this.afAutofocus = undefined;
|
|
93
|
+
this.afInputRef = undefined;
|
|
94
|
+
}
|
|
95
|
+
fullWidthHandler() {
|
|
96
|
+
this.isFullSize = this.afFullWidth;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
|
|
100
|
+
* @en Returns a reference to the button element. Handy for setting focus programmatically.
|
|
101
|
+
*/
|
|
102
|
+
async afMGetButtonElement() {
|
|
103
|
+
return this._button;
|
|
104
|
+
}
|
|
105
|
+
componentWillLoad() {
|
|
106
|
+
this.setHasIcon();
|
|
107
|
+
this.fullWidthHandler();
|
|
108
|
+
}
|
|
109
|
+
componentWillUpdate() {
|
|
110
|
+
this.setHasIcon();
|
|
111
|
+
}
|
|
112
|
+
componentDidLoad() {
|
|
113
|
+
this.afOnReady.emit();
|
|
114
|
+
}
|
|
115
|
+
setHasIcon() {
|
|
116
|
+
const icon = !!this.hostElement.querySelector('[slot="icon"]');
|
|
117
|
+
const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
|
|
118
|
+
if (icon) {
|
|
119
|
+
this.hasIcon = icon;
|
|
120
|
+
}
|
|
121
|
+
if (iconSecondary) {
|
|
122
|
+
this.hasIconSecondary = iconSecondary;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
get cssModifiers() {
|
|
126
|
+
return {
|
|
127
|
+
[`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
|
|
128
|
+
[`digi-button--size-${this.afSize}`]: !!this.afSize,
|
|
129
|
+
'digi-button--icon': this.hasIcon,
|
|
130
|
+
'digi-button--icon-secondary': this.hasIconSecondary,
|
|
131
|
+
'digi-button--full-width': this.isFullSize
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
get pressedState() {
|
|
135
|
+
if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
return this.afAriaPressed ? 'true' : 'false';
|
|
139
|
+
}
|
|
140
|
+
get expandedState() {
|
|
141
|
+
if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
return this.afAriaExpanded ? 'true' : 'false';
|
|
145
|
+
}
|
|
146
|
+
get hasPopup() {
|
|
147
|
+
if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
return this.afAriaHaspopup ? 'true' : 'false';
|
|
151
|
+
}
|
|
152
|
+
clickHandler(e) {
|
|
153
|
+
this.afOnClick.emit(e);
|
|
154
|
+
}
|
|
155
|
+
focusHandler(e) {
|
|
156
|
+
this.afOnFocus.emit(e);
|
|
157
|
+
}
|
|
158
|
+
blurHandler(e) {
|
|
159
|
+
this.afOnBlur.emit(e);
|
|
160
|
+
}
|
|
161
|
+
render() {
|
|
162
|
+
return (index.h(index.Host, { key: 'ef36d70f087c51bb37fa5b2c0fdd9ff7bebb7b02' }, index.h("button", { key: 'c62591e478d6dec6cb33d197c46ab4aea06ee9f6', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
|
|
163
|
+
var _a, _b, _c;
|
|
164
|
+
this._button = el;
|
|
165
|
+
(_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
|
|
166
|
+
// Stencil has a bug wiith form attribute so we need to set it like this
|
|
167
|
+
// https://github.com/ionic-team/stencil/issues/2703
|
|
168
|
+
this.afForm
|
|
169
|
+
? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
|
|
170
|
+
: (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
|
|
171
|
+
}, 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: 'dd57484f5da45dbc1caf2b04733b89ac1641fd8b', class: "digi-button__icon" }, index.h("slot", { key: 'ca59512ee3eef6d6e772d6fc45d3b97523fc57a0', name: "icon" }))), index.h("span", { key: '4808cd35ff202c5ae9a07421e028cc463f87f951', class: "digi-button__text" }, index.h("slot", { key: '2e8005e8c42e81b1dbec44aef6ef9625ee7a089d' })), this.hasIconSecondary && (index.h("span", { key: '8a7e897b5cebf94c11d3dd6aa1c8a3ca23bc056d', class: "digi-button__icon digi-button__icon--secondary" }, index.h("slot", { key: 'ead4d4e5be559f0e6740e63ccff69bb03e46fee9', name: "icon-secondary" }))))));
|
|
172
|
+
}
|
|
173
|
+
get hostElement() { return index.getElement(this); }
|
|
174
|
+
static get watchers() { return {
|
|
175
|
+
"afFullWidth": ["fullWidthHandler"]
|
|
176
|
+
}; }
|
|
177
|
+
};
|
|
178
|
+
Button.style = DigiButtonStyle0;
|
|
179
|
+
|
|
180
|
+
const formInputCss = ".digi--util--fs--xs.sc-digi-form-input{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-form-input{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-form-input{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-form-input{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-form-input{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-form-input{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-form-input{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-form-input{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-form-input{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-form-input{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-form-input{padding-top:5rem !important}.digi--util--pb--1.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-form-input{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-form-input{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-form-input{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-form-input{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-form-input{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-form-input{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-form-input{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-form-input{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-form-input{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-form-input{padding:2.5rem !important}.digi--util--p--60.sc-digi-form-input{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-form-input{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-form-input{padding:4.5rem !important}.digi--util--p--90.sc-digi-form-input{padding:5rem !important}.digi--util--ptb--1.sc-digi-form-input{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-form-input{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-form-input{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-form-input{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-form-input{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-form-input{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-form-input{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-form-input{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-form-input{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-form-input{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-form-input{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-form-input{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-form-input{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-form-input{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-form-input{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-form-input{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-form-input{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-form-input{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}.digi--util--hidden.sc-digi-form-input{display:none}.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--input-empty);--digi--form-input--background--neutral:var(--digi--color--background--input);--digi--form-input--background--success:var(--digi--color--background--success-2);--digi--form-input--background--warning:var(--digi--color--background--warning-2);--digi--form-input--background--error:var(--digi--color--background--danger-2);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--neutral-3);--digi--form-input--border-color--success:var(--digi--color--border--success);--digi--form-input--border-color--warning:var(--digi--color--border--warning-2);--digi--form-input--border-color--error:var(--digi--color--border--danger)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}";
|
|
181
|
+
const DigiFormInputStyle0 = formInputCss;
|
|
182
|
+
|
|
183
|
+
const FormInput = class {
|
|
184
|
+
constructor(hostRef) {
|
|
185
|
+
index.registerInstance(this, hostRef);
|
|
186
|
+
this.afOnChange = index.createEvent(this, "afOnChange", 7);
|
|
187
|
+
this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
|
|
188
|
+
this.afOnKeyup = index.createEvent(this, "afOnKeyup", 7);
|
|
189
|
+
this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
|
|
190
|
+
this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
|
|
191
|
+
this.afOnInput = index.createEvent(this, "afOnInput", 7);
|
|
192
|
+
this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
|
|
193
|
+
this.afOnTouched = index.createEvent(this, "afOnTouched", 7);
|
|
194
|
+
this.afOnReady = index.createEvent(this, "afOnReady", 3);
|
|
195
|
+
this.hasActiveValidationMessage = false;
|
|
196
|
+
this.hasButton = undefined;
|
|
197
|
+
this.dirty = false;
|
|
198
|
+
this.touched = false;
|
|
199
|
+
this.afLabel = undefined;
|
|
200
|
+
this.afLabelDescription = undefined;
|
|
201
|
+
this.afType = formInputType_enum.FormInputType.TEXT;
|
|
202
|
+
this.afInputmode = typographyVariation_enum.FormInputMode.DEFAULT;
|
|
203
|
+
this.afButtonVariation = formInputType_enum.FormInputButtonVariation.PRIMARY;
|
|
204
|
+
this.afAutofocus = undefined;
|
|
205
|
+
this.afVariation = typographyVariation_enum.FormInputVariation.MEDIUM;
|
|
206
|
+
this.afName = undefined;
|
|
207
|
+
this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-input');
|
|
208
|
+
this.afMaxlength = undefined;
|
|
209
|
+
this.afMinlength = undefined;
|
|
210
|
+
this.afRequired = undefined;
|
|
211
|
+
this.afRequiredText = undefined;
|
|
212
|
+
this.afAnnounceIfOptional = false;
|
|
213
|
+
this.afAnnounceIfOptionalText = undefined;
|
|
214
|
+
this.value = undefined;
|
|
215
|
+
this.afValue = undefined;
|
|
216
|
+
this.afValidation = typographyVariation_enum.FormInputValidation.NEUTRAL;
|
|
217
|
+
this.afValidationText = undefined;
|
|
218
|
+
this.afRole = undefined;
|
|
219
|
+
this.afAutocomplete = undefined;
|
|
220
|
+
this.afMin = undefined;
|
|
221
|
+
this.afMax = undefined;
|
|
222
|
+
this.afList = undefined;
|
|
223
|
+
this.afStep = undefined;
|
|
224
|
+
this.afDirname = undefined;
|
|
225
|
+
this.afAriaAutocomplete = undefined;
|
|
226
|
+
this.afAriaActivedescendant = undefined;
|
|
227
|
+
this.afAriaLabelledby = undefined;
|
|
228
|
+
this.afAriaDescribedby = undefined;
|
|
229
|
+
this.afAriaControls = undefined;
|
|
230
|
+
}
|
|
231
|
+
onValueChanged(value) {
|
|
232
|
+
this.afValue = value;
|
|
233
|
+
}
|
|
234
|
+
onAfValueChanged(value) {
|
|
235
|
+
this.value = value;
|
|
236
|
+
}
|
|
237
|
+
afValidationTextWatch() {
|
|
238
|
+
this.setActiveValidationMessage();
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
|
|
242
|
+
* @en Returns a reference to the input element. Handy for setting focus programmatically.
|
|
243
|
+
*/
|
|
244
|
+
async afMGetFormControlElement() {
|
|
245
|
+
return this._input;
|
|
246
|
+
}
|
|
247
|
+
componentWillLoad() {
|
|
248
|
+
this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
|
|
249
|
+
this.setActiveValidationMessage();
|
|
250
|
+
this.setHasButton();
|
|
251
|
+
}
|
|
252
|
+
componentWillUpdate() {
|
|
253
|
+
this.setHasButton();
|
|
254
|
+
}
|
|
255
|
+
componentDidLoad() {
|
|
256
|
+
this.afOnReady.emit();
|
|
257
|
+
}
|
|
258
|
+
setActiveValidationMessage() {
|
|
259
|
+
this.hasActiveValidationMessage = !!this.afValidationText;
|
|
260
|
+
}
|
|
261
|
+
get cssModifiers() {
|
|
262
|
+
return {
|
|
263
|
+
'digi-form-input--small': this.afVariation === typographyVariation_enum.FormInputVariation.SMALL,
|
|
264
|
+
'digi-form-input--medium': this.afVariation === typographyVariation_enum.FormInputVariation.MEDIUM,
|
|
265
|
+
'digi-form-input--large': this.afVariation === typographyVariation_enum.FormInputVariation.LARGE,
|
|
266
|
+
'digi-form-input--neutral': this.afValidation === typographyVariation_enum.FormInputValidation.NEUTRAL,
|
|
267
|
+
'digi-form-input--success': this.afValidation === typographyVariation_enum.FormInputValidation.SUCCESS,
|
|
268
|
+
'digi-form-input--error': this.afValidation === typographyVariation_enum.FormInputValidation.ERROR,
|
|
269
|
+
'digi-form-input--warning': this.afValidation === typographyVariation_enum.FormInputValidation.WARNING,
|
|
270
|
+
[`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
|
|
271
|
+
[`digi-form-input--has-button-${this.hasButton}`]: true,
|
|
272
|
+
'digi-form-input--empty': !this.afValue &&
|
|
273
|
+
(!this.afValidation ||
|
|
274
|
+
this.afValidation === typographyVariation_enum.FormInputValidation.NEUTRAL)
|
|
275
|
+
};
|
|
276
|
+
}
|
|
277
|
+
blurHandler(e) {
|
|
278
|
+
if (!this.touched) {
|
|
279
|
+
this.afOnTouched.emit(e);
|
|
280
|
+
this.touched = true;
|
|
281
|
+
}
|
|
282
|
+
this.afOnBlur.emit(e);
|
|
283
|
+
}
|
|
284
|
+
changeHandler(e) {
|
|
285
|
+
this.setActiveValidationMessage();
|
|
286
|
+
this.afOnChange.emit(e);
|
|
287
|
+
}
|
|
288
|
+
focusHandler(e) {
|
|
289
|
+
this.afOnFocus.emit(e);
|
|
290
|
+
}
|
|
291
|
+
focusoutHandler(e) {
|
|
292
|
+
this.afOnFocusout.emit(e);
|
|
293
|
+
}
|
|
294
|
+
keyupHandler(e) {
|
|
295
|
+
this.afOnKeyup.emit(e);
|
|
296
|
+
}
|
|
297
|
+
inputHandler(e) {
|
|
298
|
+
this.afValue = this.value =
|
|
299
|
+
this.afType === formInputType_enum.FormInputType.NUMBER
|
|
300
|
+
? parseFloat(e.target.value)
|
|
301
|
+
: e.target.value;
|
|
302
|
+
if (!this.dirty) {
|
|
303
|
+
this.afOnDirty.emit(e);
|
|
304
|
+
this.dirty = true;
|
|
305
|
+
}
|
|
306
|
+
this.setActiveValidationMessage();
|
|
307
|
+
this.afOnInput.emit(e);
|
|
308
|
+
}
|
|
309
|
+
setHasButton() {
|
|
310
|
+
this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
|
|
311
|
+
}
|
|
312
|
+
render() {
|
|
313
|
+
return (index.h("div", { key: 'b2bd14e8a9e49dad598f00dc896729dfd31cffc5', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, index.h("digi-form-label", { key: '0f0ce35832740e632702ecd313d699c785a0084a', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: '96923f294d619338b9fd649280339bf39bdebbd5', class: "digi-form-input__input-wrapper" }, index.h("input", Object.assign({ key: 'd30e924087399be43ad644c1e53e1ad4c070503c', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === typographyVariation_enum.FormInputValidation.ERROR ? 'true' : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == typographyVariation_enum.FormInputMode.DEFAULT
|
|
314
|
+
? {}
|
|
315
|
+
: { inputmode: this.afInputmode }))), index.h("slot", { key: 'b8fc45af3240a1be2493765df990825846ac8407', name: "button" })), index.h("div", { key: '47c6e7abf34f9cda6e11ab1a2f8b513c42fd22cf', class: "digi-form-input__footer" }, index.h("div", { key: '9c1f5483cc3ffab6d6bbf0874689597f02268244', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
|
|
316
|
+
this.afValidation != typographyVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '5f344935241a4696706fb72d79679c4f3db4355b', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
|
|
317
|
+
}
|
|
318
|
+
get hostElement() { return index.getElement(this); }
|
|
319
|
+
static get watchers() { return {
|
|
320
|
+
"value": ["onValueChanged"],
|
|
321
|
+
"afValue": ["onAfValueChanged"],
|
|
322
|
+
"afValidationText": ["afValidationTextWatch"]
|
|
323
|
+
}; }
|
|
324
|
+
};
|
|
325
|
+
FormInput.style = DigiFormInputStyle0;
|
|
326
|
+
|
|
327
|
+
const formLabelCss = ".sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}";
|
|
328
|
+
const DigiFormLabelStyle0 = formLabelCss;
|
|
329
|
+
|
|
330
|
+
const FormLabel = class {
|
|
331
|
+
constructor(hostRef) {
|
|
332
|
+
index.registerInstance(this, hostRef);
|
|
333
|
+
this.labelText = undefined;
|
|
334
|
+
this.hasActionSlot = undefined;
|
|
335
|
+
this.afLabel = undefined;
|
|
336
|
+
this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
|
|
337
|
+
this.afFor = undefined;
|
|
338
|
+
this.afDescription = undefined;
|
|
339
|
+
this.afRequired = undefined;
|
|
340
|
+
this.afAnnounceIfOptional = false;
|
|
341
|
+
this.afRequiredText = text._t.required.toLowerCase();
|
|
342
|
+
this.afAnnounceIfOptionalText = text._t.optional.toLowerCase();
|
|
343
|
+
}
|
|
344
|
+
componentWillLoad() {
|
|
345
|
+
this.setLabelText();
|
|
346
|
+
this.validateFor();
|
|
347
|
+
this.handleSlotVisibility();
|
|
348
|
+
}
|
|
349
|
+
validateFor() {
|
|
350
|
+
if (this.afFor == null) {
|
|
351
|
+
logger_util.logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
setLabelText() {
|
|
355
|
+
this.labelText = `${this.afLabel} ${this.requiredText}`;
|
|
356
|
+
if (!this.afLabel) {
|
|
357
|
+
logger_util.logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
handleSlotVisibility() {
|
|
361
|
+
this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
|
|
362
|
+
}
|
|
363
|
+
get requiredText() {
|
|
364
|
+
if (this.afRequired && !this.afAnnounceIfOptional) {
|
|
365
|
+
return this.afRequiredText ? ` (${this.afRequiredText})` : '';
|
|
366
|
+
}
|
|
367
|
+
else if (!this.afRequired && this.afAnnounceIfOptional) {
|
|
368
|
+
return this.afAnnounceIfOptionalText
|
|
369
|
+
? ` (${this.afAnnounceIfOptionalText})`
|
|
370
|
+
: '';
|
|
371
|
+
}
|
|
372
|
+
else {
|
|
373
|
+
return '';
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
render() {
|
|
377
|
+
return (index.h("div", { key: 'e4a27fb5d0ce2eb12cee08acfe804f080486b805', class: "digi-form-label" }, index.h("div", { key: '9e06550d32519dc2bc89ff08e9025829275e959a', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '1408c2dcac2de2d64fe02bd371851bb557fae3dc', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: '0dcab145adac7bb9d08d189ea317154adcb694d9', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: 'eab65c9d6ed4b2026a14ab605468c906c52f8f33', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: '8394c8f21653cfe5889b234f9f5d0f32dbc5e1de', class: "digi-form-label__actions" }, index.h("slot", { key: '4e465d67ab95a7c212a47dda824241511ff3314a', name: "actions" }))))));
|
|
378
|
+
}
|
|
379
|
+
get hostElement() { return index.getElement(this); }
|
|
380
|
+
static get watchers() { return {
|
|
381
|
+
"afFor": ["validateFor"],
|
|
382
|
+
"afLabel": ["setLabelText"],
|
|
383
|
+
"afRequired": ["setLabelText"],
|
|
384
|
+
"afAnnounceIfOptional": ["setLabelText"]
|
|
385
|
+
}; }
|
|
386
|
+
};
|
|
387
|
+
FormLabel.style = DigiFormLabelStyle0;
|
|
388
|
+
|
|
389
|
+
const formSelectFilterCss = ".digi--util--fs--xs.sc-digi-form-select-filter{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-form-select-filter{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-form-select-filter{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-form-select-filter{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-form-select-filter{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-form-select-filter{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-form-select-filter{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-form-select-filter{padding-top:5rem !important}.digi--util--pb--1.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-form-select-filter{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-form-select-filter{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-form-select-filter{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-form-select-filter{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-form-select-filter{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-form-select-filter{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-form-select-filter{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-form-select-filter{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-form-select-filter{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-form-select-filter{padding:2.5rem !important}.digi--util--p--60.sc-digi-form-select-filter{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-form-select-filter{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-form-select-filter{padding:4.5rem !important}.digi--util--p--90.sc-digi-form-select-filter{padding:5rem !important}.digi--util--ptb--1.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-form-select-filter{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-form-select-filter{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-form-select-filter{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-form-select-filter{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-form-select-filter{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-form-select-filter{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-form-select-filter{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-form-select-filter{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-form-select-filter{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}.digi--util--hidden.sc-digi-form-select-filter{display:none}.sc-digi-form-select-filter-h{--digi--form-select-filter--footer--background:var(--digi--color--background--secondary);--digi--form-select-filter--scroll--max-height:10.625rem;--digi--form-select-filter--scroll--padding:var(--digi--padding--small);--digi--form-select-filter--reset-button--margin-right:var(--digi--padding--small);--digi--form-select-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);--digi--form-select-filter--list--margin:0;--digi--form-select-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-select-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-select-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-select-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-select-filter--dropdown--border-radius:var(--digi--border-radius--input);--digi--form-select-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-select-filter--dropdown--min-width:18.75rem;--digi--form-select-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-select-filter--dropdown--z-index:999;--digi--form-select-filter--dropdown--header--background:var(--digi--color--border--neutral-2);--digi--form-select-filter--dropdown--item--cursor:pointer;--digi--form-select-filter--dropdown--item--height:auto;--digi--form-select-filter--dropdown--item--min-height:1.5rem;--digi--form-select-filter--dropdown--item--color:var(--digi--color--text--primary);--digi--form-select-filter--dropdown--item--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select-filter--dropdown--item--font-family:var(--digi--global--typography--font-family--default);--digi--form-select-filter--dropdown--item--font-weight--default:var(--digi--typography--link--font-weight--desktop);--digi--form-select-filter--dropdown--item--font-weight--selected:var(--digi--typography--link-bold--font-weight--desktop);--digi--form-select-filter--dropdown--item--font-weight--hover:var(--digi--typography--link-bold--font-weight--desktop);--digi--form-select-filter--dropdown--item--letter-spacing:0px;--digi--form-select-filter--dropdown--item--line-height:1.5;--digi--form-select-filter--dropdown--item--margin-bottom:0px;--digi--form-select-filter--dropdown--item--border-width:var(--digi--border-width--primary);--digi--form-select-filter--dropdown--item--border-type:var(--digi--border-style--primary);--digi--form-select-filter--dropdown--item--border-color:var(--digi--color--border--neutral-2);--digi--form-select-filter--dropdown--item--padding-y:var(--digi--margin--small);--digi--form-select-filter--dropdown--item--padding-x:var(--digi--margin--largest);--digi--form-select-filter--dropdown--item--multiple--padding-y:var(--digi--margin--small);--digi--form-select-filter--dropdown--item--multiple--padding-x:var(--digi--padding--largest-2);--digi--form-select-filter--dropdown--item--background-color--default:var(--digi--color--background--primary);--digi--form-select-filter--dropdown--item--background-color--focus:var(--digi--color--background--neutral-6);--digi--form-select-filter--dropdown--item--background-color--hover:var(--digi--color--background--neutral-6);--digi--form-select-filter--dropdown--item--background-color--active:var(--digi--color--background--neutral-6);--digi--form-select-filter--dropdown--item--background-color--selected:var(--digi--color--background--neutral-6);--digi--form-select-filter--dropdown--item--checkbox--background-color:var(--digi--color--background--primary);--digi--form-select-filter--dropdown--item--checkbox--background-color--selected:var(--digi--color--background--success-1);--digi--form-select-filter--dropdown--item--checkbox--border-color:var(--digi--color--border--primary);--digi--form-select-filter--dropdown--item--checkbox--border-width:var(--digi--border-width--primary);--digi--form-select-filter--dropdown--item--checkbox--border-style:var(--digi--border-style--primary);--digi--form-select-filter--dropdown--item--checkbox--border-radius:var(--digi--border-radius--tertiary);--digi--form-select-filter--dropdown--item--checkbox--width:1.25rem;--digi--form-select-filter--dropdown--item--checkbox--height:1.25rem;--digi--form-select-filter--toggle-button-indicator--color--default:transparent;--digi--form-select-filter--toggle-button-indicator--color--active:var(--digi--color--border--success);--digi--form-select-filter--toggle-button-indicator--width:1rem;--digi--form-select-filter--toggle-button-indicator--height:1rem;--digi--form-select-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-select-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-select-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-select-filter--toggle-button-indicator--color:var(--digi--color--background--success-1);--digi--form-select-filter--toggle-icon--width:0.875rem;--digi--form-select-filter--toggle-icon--height:0.875rem;--digi--form-select-filter--search-input--border-radius:var(--digi--border-radius--input);--digi--form-select-filter--search-input--border-width:var(--digi--border-width--input-regular);--digi--form-select-filter--search-input--border-style:var(--digi--border-style--primary);--digi--form-select-filter--search-input--border-color:var(--digi--form-select-filter--toggle-button--border-width--neutral);--digi--form-select-filter--search-input--height:var(--digi--input-height--medium);--digi--form-select-filter--search-input--width:100%;--digi--form-select-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-select-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-select-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop);--digi--form-select-filter--toggle-button--border-width--neutral:var(--digi--border-width--input-regular);--digi--form-select-filter--toggle-button--border-color--neutral:var(--digi--color--border--neutral-3);--digi--form-select-filter--toggle-button--background--neutral:var(--digi--color--background--input);--digi--form-select-filter--toggle-button--border-width--success:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--success:var(--digi--color--border--success);--digi--form-select-filter--toggle-button--background--success:var(--digi--color--background--success-2);--digi--form-select-filter--toggle-button--border-width--warning:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--warning:var(--digi--color--border--warning-2);--digi--form-select-filter--toggle-button--background--warning:var(--digi--color--background--warning-2);--digi--form-select-filter--toggle-button--border-width--error:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--error:var(--digi--color--border--danger);--digi--form-select-filter--toggle-button--background--error:var(--digi--color--background--danger-2);box-sizing:content-box}.sc-digi-form-select-filter-h .digi-form-select-filter.sc-digi-form-select-filter{display:flex;flex-direction:column;gap:0.4em;position:relative;--INDICATOR--BACKGROUND:var(\n --digi--form-select-filter--toggle-button-indicator--color--default\n );--SCROLL--MAX-HEIGHT:var(--digi--form-select-filter--scroll--max-height)}.sc-digi-form-select-filter-h .digi-form-select-filter--neutral.sc-digi-form-select-filter{--BORDER-WIDTH:var(\n --digi--form-select-filter--toggle-button--border-width--neutral\n );--BORDER-COLOR:var(\n --digi--form-select-filter--toggle-button--border-color--neutral\n );--BACKGROUND:var(\n --digi--form-select-filter--toggle-button--background--neutral\n )}.sc-digi-form-select-filter-h .digi-form-select-filter--success.sc-digi-form-select-filter{--BORDER-WIDTH:var(\n --digi--form-select-filter--toggle-button--border-width--success\n );--BORDER-COLOR:var(\n --digi--form-select-filter--toggle-button--border-color--success\n );--BACKGROUND:var(\n --digi--form-select-filter--toggle-button--background--success\n )}.sc-digi-form-select-filter-h .digi-form-select-filter--warning.sc-digi-form-select-filter{--BORDER-WIDTH:var(\n --digi--form-select-filter--toggle-button--border-width--warning\n );--BORDER-COLOR:var(\n --digi--form-select-filter--toggle-button--border-color--warning\n );--BACKGROUND:var(\n --digi--form-select-filter--toggle-button--background--warning\n )}.sc-digi-form-select-filter-h .digi-form-select-filter--error.sc-digi-form-select-filter{--BORDER-WIDTH:var(\n --digi--form-select-filter--toggle-button--border-width--error\n );--BORDER-COLOR:var(\n --digi--form-select-filter--toggle-button--border-color--error\n );--BACKGROUND:var(\n --digi--form-select-filter--toggle-button--background--error\n )}.sc-digi-form-select-filter-h .digi-form-select-filter--open.sc-digi-form-select-filter .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter{transform:rotate(-180deg)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter{background:var(--BACKGROUND);border:var(--BORDER-WIDTH) solid var(--BORDER-COLOR);border-radius:var(--digi--border-radius--input);color:var(--digi--color--text--primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--digi--typography--body--font-size--desktop);width:100%;padding:0 var(--digi--gutter--medium);min-height:var(--digi--input-height--medium);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter:focus-visible,.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter:focus{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter{transition:var(--digi--form-select-filter--toggle-icon--transition)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter-s>[slot^=icon],.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon .sc-digi-form-select-filter-s>[slot^=icon]{--digi--icon--width:var(\n --digi--form-select-filter--toggle-icon--width\n );--digi--icon--height:var(\n --digi--form-select-filter--toggle-icon--height\n )}.sc-digi-form-select-filter-h .digi-form-select-filter__legend.sc-digi-form-select-filter{font-weight:var(--digi--form-select-filter--legend--font-weight);font-family:var(--digi--form-select-filter--legend--font-family);font-size:var(--digi--form-select-filter--legend--font-size);border:0;padding:0;margin:0;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}.sc-digi-form-select-filter-h .digi-form-select-filter__scroll.sc-digi-form-select-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter{background-color:var(--digi--form-select-filter--dropdown--header--background);padding:12px 12px 22px}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter input.sc-digi-form-select-filter{border-radius:var(--digi--form-select-filter--search-input--border-radius);border-width:var(--digi--form-select-filter--search-input--border-width);border-style:var(--digi--form-select-filter--search-input--border-style);border-color:var(--digi--form-select-filter--search-input--border-color);height:var(--digi--form-select-filter--search-input--height);width:var(--digi--form-select-filter--search-input--width)}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter legend.sc-digi-form-select-filter{width:100%;border-bottom:var(--digi--form-select-filter--legend__border-bottom)}.sc-digi-form-select-filter-h .digi-form-select-filter__footer.sc-digi-form-select-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-select-filter--footer--background);padding:var(--digi--form-select-filter--scroll--padding)}.sc-digi-form-select-filter-h .digi-form-select-filter__reset-button.sc-digi-form-select-filter{display:inline-block;margin-right:var(--digi--form-select-filter--reset-button--margin-right)}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown.sc-digi-form-select-filter{min-width:var(--digi--form-select-filter--dropdown--min-width);width:100%;position:absolute;z-index:var(--digi--form-select-filter--dropdown--z-index);background:var(--digi--form-select-filter--dropdown--background);border-radius:var(--digi--form-select-filter--dropdown--border-radius);box-shadow:var(--digi--form-select-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-select-filter--dropdown--margin-top)}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown.sc-digi-form-select-filter fieldset.sc-digi-form-select-filter{border:none;padding:0;margin:0}@media (min-width: 48rem){.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown--right.sc-digi-form-select-filter{right:0}}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown--hidden.sc-digi-form-select-filter{display:none}.sc-digi-form-select-filter-h .digi-form-select-filter__label.sc-digi-form-select-filter{display:block}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-wrapper--activated.sc-digi-form-select-filter{display:flex;align-items:center}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-indicator.sc-digi-form-select-filter{display:none;--digi--icon--color:var(\n --digi--form-select-filter--toggle-button-indicator--color\n )}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-indicator--active.sc-digi-form-select-filter{display:flex;margin-right:var(--digi--form-select-filter--toggle-button-indicator--margin-right);width:var(--digi--form-select-filter--toggle-button-indicator--width);height:var(--digi--form-select-filter--toggle-button-indicator--height)}.sc-digi-form-select-filter-h .digi-form-select-filter__search-status.sc-digi-form-select-filter{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary)}.sc-digi-form-select-filter-h .digi-form-select-filter__list.sc-digi-form-select-filter{margin:var(--digi--form-select-filter--list--margin);padding:0;max-width:100%}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter{background-color:var(--digi--form-select-filter--dropdown--item--background-color--default);border-width:0;box-sizing:border-box;border-bottom-width:var(--digi--form-select-filter--dropdown--item--border-width);border-style:var(--digi--form-select-filter--dropdown--item--border-type);border-color:var(--digi--form-select-filter--dropdown--item--border-color);cursor:var(--digi--form-select-filter--dropdown--item--cursor);color:var(--digi--form-select-filter--dropdown--item--color);display:block;font-size:var(--digi--form-select-filter--dropdown--item--font-size);font-family:var(--digi--form-select-filter--dropdown--item--font-family);font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--default);padding:var(--digi--form-select-filter--dropdown--item--padding-y) var(--digi--form-select-filter--dropdown--item--padding-x);position:relative;height:var(--digi--form-select-filter--dropdown--item--height);min-height:var(--digi--form-select-filter--dropdown--item--min-height);margin-bottom:var(--digi--form-select-filter--dropdown--item--margin-bottom);letter-spacing:var(--digi--form-select-filter--dropdown--item--letter-spacing);line-height:var(--digi--form-select-filter--dropdown--item--line-height)}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:focus-visible{background-color:var(--digi--form-select-filter--dropdown--item--background-color--focus);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:hover{background-color:var(--digi--form-select-filter--dropdown--item--background-color--hover);font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--hover)}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:active{background-color:var(--digi--form-select-filter--dropdown--item--background-color--active)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[aria-checked=true].sc-digi-form-select-filter{font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--selected);background-color:var(--digi--form-select-filter--dropdown--item--background-color--selected)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[dir=rtl].sc-digi-form-select-filter{text-align:right}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{position:absolute;width:13px;height:25px;left:7px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio][dir=rtl].sc-digi-form-select-filter::before{right:3px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio][dir=rtl].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{left:auto;right:7px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter{padding:var(--digi--form-select-filter--dropdown--item--multiple--padding-y) var(--digi--form-select-filter--dropdown--item--multiple--padding-x)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][aria-checked=true].sc-digi-form-select-filter:before{background:var(--digi--form-select-filter--dropdown--item--checkbox--background-color--selected);border-color:var(--digi--form-select-filter--dropdown--item--checkbox--background-color--selected)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter::before{content:\"\";position:absolute;background-color:var(--digi--form-select-filter--dropdown--item--checkbox--background-color);border-color:var(--digi--form-select-filter--dropdown--item--checkbox--border-color);border-width:var(--digi--form-select-filter--dropdown--item--checkbox--border-width);border-style:var(--digi--form-select-filter--dropdown--item--checkbox--border-style);height:var(--digi--form-select-filter--dropdown--item--checkbox--width);width:var(--digi--form-select-filter--dropdown--item--checkbox--height);border-radius:var(--digi--form-select-filter--dropdown--item--checkbox--border-radius);left:12px;transform:translateY(1px)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{position:absolute;width:13px;left:16px;--digi--icon--color:white}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][dir=rtl].sc-digi-form-select-filter::before{right:12px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][dir=rtl].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{left:auto;right:16px}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-text.sc-digi-form-select-filter{margin-right:var(--digi--form-select-filter--toggle-button--text--margin-right)}.sc-digi-form-select-filter-h .hidden.sc-digi-form-select-filter{display:none}";
|
|
390
|
+
const DigiFormSelectFilterStyle0 = formSelectFilterCss;
|
|
391
|
+
|
|
392
|
+
const FormSelectFilter = class {
|
|
393
|
+
constructor(hostRef) {
|
|
394
|
+
index.registerInstance(this, hostRef);
|
|
395
|
+
this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
|
|
396
|
+
this.afOnSubmitFilters = index.createEvent(this, "afOnSubmitFilters", 7);
|
|
397
|
+
this.afOnFilterClosed = index.createEvent(this, "afOnFilterClosed", 7);
|
|
398
|
+
this.afOnResetFilters = index.createEvent(this, "afOnResetFilters", 7);
|
|
399
|
+
this.afOnSelect = index.createEvent(this, "afOnSelect", 7);
|
|
400
|
+
this.afOnQueryChanged = index.createEvent(this, "afOnQueryChanged", 7);
|
|
401
|
+
this._searchQuery = '';
|
|
402
|
+
this.isOpen = false;
|
|
403
|
+
this.focusListItemIndex = 0;
|
|
404
|
+
this.focusInList = false;
|
|
405
|
+
this._afListItems = undefined;
|
|
406
|
+
this._filteredResult = [];
|
|
407
|
+
this._selectedItems = [];
|
|
408
|
+
this.afDescription = undefined;
|
|
409
|
+
this.afDisableValidation = undefined;
|
|
410
|
+
this.afValidation = typographyVariation_enum.FormSelectFilterValidation.NEUTRAL;
|
|
411
|
+
this.afValidationText = undefined;
|
|
412
|
+
this.afRequired = undefined;
|
|
413
|
+
this.afRequiredText = undefined;
|
|
414
|
+
this.afAnnounceIfOptional = false;
|
|
415
|
+
this.afAnnounceIfOptionalText = undefined;
|
|
416
|
+
this.sortAlphabetically = true;
|
|
417
|
+
this.value = [];
|
|
418
|
+
this.afMultipleItems = false;
|
|
419
|
+
this.afListItems = undefined;
|
|
420
|
+
this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-select-filter');
|
|
421
|
+
this.afFilterButtonTextLabel = undefined;
|
|
422
|
+
this.afFilterButtonText = undefined;
|
|
423
|
+
this.afFilterButtonTextMultipleValues = undefined;
|
|
424
|
+
this.afSubmitButtonText = undefined;
|
|
425
|
+
this.afSubmitButtonTextAriaLabel = undefined;
|
|
426
|
+
this.afResetButtonText = text._t.clear;
|
|
427
|
+
this.afResetButtonTextAriaLabel = undefined;
|
|
428
|
+
this.afHideResetButton = false;
|
|
429
|
+
this.afAlignRight = undefined;
|
|
430
|
+
this.afName = undefined;
|
|
431
|
+
this.afEmptySearchMessage = 'Inga sökträffar för';
|
|
432
|
+
this.afFilterButtonAriaDescribedby = undefined;
|
|
433
|
+
}
|
|
434
|
+
onValueChanged(value) {
|
|
435
|
+
const joinedArray = [...value, ...this._selectedItems];
|
|
436
|
+
const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
|
|
437
|
+
if (noDuplicates && noDuplicates.length > 0) {
|
|
438
|
+
if (this.afMultipleItems) {
|
|
439
|
+
this._selectedItems = [...noDuplicates];
|
|
440
|
+
}
|
|
441
|
+
else {
|
|
442
|
+
this._selectedItems = [noDuplicates[0]];
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
handleListItems() {
|
|
447
|
+
if (this.afListItems) {
|
|
448
|
+
try {
|
|
449
|
+
if (this.afListItems.constructor === Array) {
|
|
450
|
+
this._afListItems = this.afListItems;
|
|
451
|
+
}
|
|
452
|
+
else if (typeof this.afListItems === 'string') {
|
|
453
|
+
this._afListItems = JSON.parse(this.afListItems);
|
|
454
|
+
}
|
|
455
|
+
else {
|
|
456
|
+
throw `Invalid type in "af-list-items" attribute`;
|
|
457
|
+
}
|
|
458
|
+
this.giveItemsValueIfNoneExist();
|
|
459
|
+
this.sortListAlphabetically();
|
|
460
|
+
const selectedListItems = this._afListItems.filter((item) => item.selected);
|
|
461
|
+
if (selectedListItems && selectedListItems.length > 0) {
|
|
462
|
+
this._selectedItems = [...selectedListItems];
|
|
463
|
+
this.afOnSelect.emit(this._selectedItems);
|
|
464
|
+
this.value = this._selectedItems;
|
|
465
|
+
}
|
|
466
|
+
else if (this.value && this.value.length > 0) {
|
|
467
|
+
this._selectedItems = [...this.value];
|
|
468
|
+
}
|
|
469
|
+
this.filterResults();
|
|
470
|
+
}
|
|
471
|
+
catch (e) {
|
|
472
|
+
logger_util.logger.warn(`Invalid JSON in "af-list-items" attribute`, this.hostElement, e);
|
|
473
|
+
return;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
/**
|
|
478
|
+
* Funktion för att rensa valda värden från komponenten
|
|
479
|
+
* @en Function for clearing selected values from component
|
|
480
|
+
*/
|
|
481
|
+
async afMReset() {
|
|
482
|
+
this.resetSelectItems();
|
|
483
|
+
}
|
|
484
|
+
/**
|
|
485
|
+
* Funktion för att stänga dropdownen
|
|
486
|
+
* @en Function for closing the dropdown
|
|
487
|
+
*/
|
|
488
|
+
async afMCloseDropdown() {
|
|
489
|
+
this.setClosed();
|
|
490
|
+
}
|
|
491
|
+
clickHandler(e) {
|
|
492
|
+
const target = e.target;
|
|
493
|
+
const selector = `#${this.afId}-identifier`;
|
|
494
|
+
if (detectClickOutside_util.detectClickOutside(target, selector) && this.isOpen) {
|
|
495
|
+
this.emitFilterClosedEvent();
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
focusoutHandler(e) {
|
|
499
|
+
const target = e.target;
|
|
500
|
+
const selector = `#${this.afId}-identifier`;
|
|
501
|
+
const focusOutsideFilter = detectFocusOutside_util.detectFocusOutside(target, selector);
|
|
502
|
+
if (focusOutsideFilter && this.isOpen) {
|
|
503
|
+
this.emitFilterClosedEvent();
|
|
504
|
+
}
|
|
505
|
+
else {
|
|
506
|
+
this.focusInList = !detectFocusOutside_util.detectFocusOutside(target, `#${this.afId}-select-filter-list`);
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
debounce(func, timeout = 300) {
|
|
510
|
+
let timer;
|
|
511
|
+
return (...args) => {
|
|
512
|
+
clearTimeout(timer);
|
|
513
|
+
timer = setTimeout(() => {
|
|
514
|
+
func.apply(this, args);
|
|
515
|
+
}, timeout);
|
|
516
|
+
};
|
|
517
|
+
}
|
|
518
|
+
setClosed(focusToggleButton = false) {
|
|
519
|
+
this.isOpen = false;
|
|
520
|
+
if (focusToggleButton) {
|
|
521
|
+
document.getElementById(`${this.afId}`).focus();
|
|
522
|
+
}
|
|
523
|
+
this.setScroll(0);
|
|
524
|
+
this._searchQuery = '';
|
|
525
|
+
this.afOnQueryChanged.emit('');
|
|
526
|
+
this.afOnSubmitFilters.emit(this._selectedItems);
|
|
527
|
+
this.filterResults();
|
|
528
|
+
}
|
|
529
|
+
setScroll(scrollY) {
|
|
530
|
+
document.querySelector(`#${this.afId}-dropdown-menu .digi-form-select-filter__scroll`).scrollTop = scrollY;
|
|
531
|
+
}
|
|
532
|
+
setOpen() {
|
|
533
|
+
this.isOpen = true;
|
|
534
|
+
this.focusListItemIndex = 0;
|
|
535
|
+
setTimeout(() => {
|
|
536
|
+
this.setFocusSearch();
|
|
537
|
+
}, 50);
|
|
538
|
+
}
|
|
539
|
+
giveItemsValueIfNoneExist() {
|
|
540
|
+
this._afListItems
|
|
541
|
+
.filter((item) => {
|
|
542
|
+
return item.value === undefined;
|
|
543
|
+
})
|
|
544
|
+
.forEach((item) => {
|
|
545
|
+
item.value = item.label;
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
sortListAlphabetically() {
|
|
549
|
+
if (!this.sortAlphabetically) {
|
|
550
|
+
return;
|
|
551
|
+
}
|
|
552
|
+
this._afListItems.sort((a, b) => {
|
|
553
|
+
if (a.label < b.label) {
|
|
554
|
+
return -1;
|
|
555
|
+
}
|
|
556
|
+
if (a.label > b.label) {
|
|
557
|
+
return 1;
|
|
558
|
+
}
|
|
559
|
+
return 0;
|
|
560
|
+
});
|
|
561
|
+
}
|
|
562
|
+
toggleDropdown() {
|
|
563
|
+
return this.isOpen ? this.setClosed() : this.setOpen();
|
|
564
|
+
}
|
|
565
|
+
inputItem(identifier, index) {
|
|
566
|
+
const item = this.hostElement
|
|
567
|
+
.querySelectorAll(`#${identifier} .digi-form-select-filter__item`)
|
|
568
|
+
.item(index);
|
|
569
|
+
return item;
|
|
570
|
+
}
|
|
571
|
+
emitFilterClosedEvent() {
|
|
572
|
+
this.setClosed(true);
|
|
573
|
+
this.afOnFilterClosed.emit();
|
|
574
|
+
}
|
|
575
|
+
componentWillLoad() {
|
|
576
|
+
this.handleListItems();
|
|
577
|
+
}
|
|
578
|
+
setFocusItem() {
|
|
579
|
+
const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
|
|
580
|
+
if (element) {
|
|
581
|
+
element.focus();
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
setFocusSearch() {
|
|
585
|
+
const element = this.hostElement.querySelector('input');
|
|
586
|
+
if (element) {
|
|
587
|
+
element.focus();
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
incrementFocusItem() {
|
|
591
|
+
const listLength = this.showNeutralValue
|
|
592
|
+
? this._filteredResult.length
|
|
593
|
+
: this._filteredResult.length - 1;
|
|
594
|
+
if (this.focusListItemIndex < listLength) {
|
|
595
|
+
this.focusListItemIndex = this.focusListItemIndex + 1;
|
|
596
|
+
this.setFocusItem();
|
|
597
|
+
return;
|
|
598
|
+
}
|
|
599
|
+
else {
|
|
600
|
+
if (!this.afMultipleItems) {
|
|
601
|
+
this.focusListItemIndex = 0;
|
|
602
|
+
this.setFocusItem();
|
|
603
|
+
return;
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
this.tabHandler();
|
|
607
|
+
}
|
|
608
|
+
decrementFocusItem() {
|
|
609
|
+
if (this.focusListItemIndex === 0) {
|
|
610
|
+
this.setFocusSearch();
|
|
611
|
+
return;
|
|
612
|
+
}
|
|
613
|
+
if (this.focusListItemIndex > 0) {
|
|
614
|
+
this.focusListItemIndex = this.focusListItemIndex - 1;
|
|
615
|
+
}
|
|
616
|
+
this.setFocusItem();
|
|
617
|
+
}
|
|
618
|
+
downHandler(e) {
|
|
619
|
+
e.detail.preventDefault();
|
|
620
|
+
if (e.detail.code === 'ArrowDown' || e.detail.code === 'ArrowRight') {
|
|
621
|
+
this.incrementFocusItem();
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
upHandler(e) {
|
|
625
|
+
e.detail.preventDefault();
|
|
626
|
+
if (e.detail.code === 'ArrowUp' || e.detail.code === 'ArrowLeft') {
|
|
627
|
+
this.decrementFocusItem();
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
homeHandler(e) {
|
|
631
|
+
e.detail.preventDefault();
|
|
632
|
+
this.focusListItemIndex = 0;
|
|
633
|
+
this.setFocusItem();
|
|
634
|
+
}
|
|
635
|
+
endHandler(e) {
|
|
636
|
+
e.detail.preventDefault();
|
|
637
|
+
this.focusListItemIndex = this.showNeutralValue
|
|
638
|
+
? this._filteredResult.length
|
|
639
|
+
: this._filteredResult.length - 1;
|
|
640
|
+
this.setFocusItem();
|
|
641
|
+
}
|
|
642
|
+
enterHandler(e) {
|
|
643
|
+
e.detail.preventDefault();
|
|
644
|
+
e.detail.target.click();
|
|
645
|
+
}
|
|
646
|
+
spaceHandler(e) {
|
|
647
|
+
e.detail.preventDefault();
|
|
648
|
+
e.detail.target.click();
|
|
649
|
+
}
|
|
650
|
+
escHandler() {
|
|
651
|
+
if (this.isOpen) {
|
|
652
|
+
this.setClosed(true);
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
tabHandler() {
|
|
656
|
+
if (this.isOpen && this.focusInList) {
|
|
657
|
+
if (this.afMultipleItems && this._submitButton) {
|
|
658
|
+
setTimeout(() => {
|
|
659
|
+
var _a;
|
|
660
|
+
if (this._submitButton) {
|
|
661
|
+
(_a = this._submitButton.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
|
|
662
|
+
}
|
|
663
|
+
}, 10);
|
|
664
|
+
}
|
|
665
|
+
else {
|
|
666
|
+
this.setClosed(true);
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
shiftHandler() {
|
|
671
|
+
if (this.isOpen && this.focusInList) {
|
|
672
|
+
if (this.afMultipleItems && this._toggleButton) {
|
|
673
|
+
this._toggleButton.querySelector('button').focus();
|
|
674
|
+
}
|
|
675
|
+
else {
|
|
676
|
+
this.setFocusSearch();
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
}
|
|
680
|
+
filterResults() {
|
|
681
|
+
if (this._searchQuery && this._searchQuery.length > 0) {
|
|
682
|
+
this._filteredResult = [
|
|
683
|
+
...this._afListItems.filter((item) => {
|
|
684
|
+
return item.label
|
|
685
|
+
.toLowerCase()
|
|
686
|
+
.includes(this._searchQuery.toLowerCase());
|
|
687
|
+
})
|
|
688
|
+
];
|
|
689
|
+
}
|
|
690
|
+
else {
|
|
691
|
+
this._filteredResult = [...this._afListItems];
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
inputSearchKeyboardHandler(e) {
|
|
695
|
+
if (e.code === 'ArrowDown') {
|
|
696
|
+
e.preventDefault();
|
|
697
|
+
this.setFocusItem();
|
|
698
|
+
}
|
|
699
|
+
if (e.code === 'Enter' && this._searchQuery !== '') {
|
|
700
|
+
e.preventDefault();
|
|
701
|
+
this.setFocusItem();
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
inputSearchInputHandler(e) {
|
|
705
|
+
this._searchQuery = e.target.value;
|
|
706
|
+
this.afOnQueryChanged.emit(this._searchQuery);
|
|
707
|
+
this.filterResults();
|
|
708
|
+
}
|
|
709
|
+
resetSelectItems(close = false) {
|
|
710
|
+
this._selectedItems = [];
|
|
711
|
+
this.value = [];
|
|
712
|
+
this.afOnSelect.emit([]);
|
|
713
|
+
this._searchQuery = '';
|
|
714
|
+
this.filterResults();
|
|
715
|
+
if (close) {
|
|
716
|
+
this.emitFilterClosedEvent();
|
|
717
|
+
}
|
|
718
|
+
this.afOnResetFilters.emit();
|
|
719
|
+
}
|
|
720
|
+
selectItemHandler(item) {
|
|
721
|
+
if (this.afMultipleItems) {
|
|
722
|
+
item.selected = !item.selected;
|
|
723
|
+
if (this._selectedItems.filter((x) => {
|
|
724
|
+
return x.value === item.value;
|
|
725
|
+
}).length > 0) {
|
|
726
|
+
//ITEM VALUE ALREADY EXISTS IN LIST, DELETE FROM LIST
|
|
727
|
+
this._selectedItems.splice(this._selectedItems.findIndex((e) => e.value === item.value), 1);
|
|
728
|
+
}
|
|
729
|
+
else {
|
|
730
|
+
this._selectedItems = [...this._selectedItems, item];
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
else {
|
|
734
|
+
this._selectedItems.forEach((item) => {
|
|
735
|
+
item.selected = false;
|
|
736
|
+
});
|
|
737
|
+
item.selected = true;
|
|
738
|
+
this._selectedItems = [item];
|
|
739
|
+
this.emitFilterClosedEvent();
|
|
740
|
+
}
|
|
741
|
+
this.value = this._selectedItems;
|
|
742
|
+
this.afOnSelect.emit(this._selectedItems);
|
|
743
|
+
this.filterResults();
|
|
744
|
+
}
|
|
745
|
+
isSelected(textValue) {
|
|
746
|
+
if (textValue && this._selectedItems && this._selectedItems.length > 0) {
|
|
747
|
+
return (this._selectedItems.filter((item) => {
|
|
748
|
+
return item.value === textValue;
|
|
749
|
+
}).length > 0);
|
|
750
|
+
}
|
|
751
|
+
return false;
|
|
752
|
+
}
|
|
753
|
+
get cssModifiers() {
|
|
754
|
+
return {
|
|
755
|
+
'digi-form-select-filter--open': this.isOpen,
|
|
756
|
+
'digi-form-select-filter--neutral': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.NEUTRAL,
|
|
757
|
+
'digi-form-select-filter--success': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.SUCCESS,
|
|
758
|
+
'digi-form-select-filter--warning': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.WARNING,
|
|
759
|
+
'digi-form-select-filter--error': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.ERROR
|
|
760
|
+
};
|
|
761
|
+
}
|
|
762
|
+
get cssModifiersToggleButtonIndicator() {
|
|
763
|
+
return {
|
|
764
|
+
'digi-form-select-filter__toggle-button-indicator--active': this._selectedItems.length > 0
|
|
765
|
+
};
|
|
766
|
+
}
|
|
767
|
+
get cssModifiersToggleButtonWrapper() {
|
|
768
|
+
return {
|
|
769
|
+
'digi-form-select-filter__toggle-button-wrapper--activated': this._selectedItems.length > 0
|
|
770
|
+
};
|
|
771
|
+
}
|
|
772
|
+
buttonText(isAriaLabel) {
|
|
773
|
+
const ariaLabelText = (text = '') => {
|
|
774
|
+
return isAriaLabel ? text : '';
|
|
775
|
+
};
|
|
776
|
+
if (this._selectedItems && this._selectedItems.length === 1) {
|
|
777
|
+
return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
|
|
778
|
+
this._selectedItems[0].label);
|
|
779
|
+
}
|
|
780
|
+
else if (this._selectedItems &&
|
|
781
|
+
this._selectedItems.length > 0 &&
|
|
782
|
+
this.afMultipleItems) {
|
|
783
|
+
if (this.afFilterButtonTextMultipleValues) {
|
|
784
|
+
return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
|
|
785
|
+
this.afFilterButtonTextMultipleValues.replace('{count}', this._selectedItems.length.toString()));
|
|
786
|
+
}
|
|
787
|
+
else {
|
|
788
|
+
return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
|
|
789
|
+
`${this._selectedItems.length} valda`);
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
else {
|
|
793
|
+
return (ariaLabelText(this.afFilterButtonTextLabel
|
|
794
|
+
? this.afFilterButtonTextLabel + ': '
|
|
795
|
+
: '') + this.afFilterButtonText);
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
get renderButtonLabel() {
|
|
799
|
+
return this.buttonText(false);
|
|
800
|
+
}
|
|
801
|
+
get ariaLabel() {
|
|
802
|
+
return this.buttonText(true);
|
|
803
|
+
}
|
|
804
|
+
get showNeutralValue() {
|
|
805
|
+
return (!this.afMultipleItems &&
|
|
806
|
+
this.afFilterButtonText &&
|
|
807
|
+
this._searchQuery.length === 0);
|
|
808
|
+
}
|
|
809
|
+
showValidation() {
|
|
810
|
+
return !this.afDisableValidation &&
|
|
811
|
+
this.afValidation !== typographyVariation_enum.FormSelectFilterValidation.NEUTRAL &&
|
|
812
|
+
this.afValidationText
|
|
813
|
+
? true
|
|
814
|
+
: false;
|
|
815
|
+
}
|
|
816
|
+
renderEmptyStateBox() {
|
|
817
|
+
let statusMessage = '';
|
|
818
|
+
if (this._filteredResult && this._filteredResult.length > 0) {
|
|
819
|
+
statusMessage = `${this._filteredResult.length} sökträff${this._filteredResult.length > 1 ? 'ar' : ''}`;
|
|
820
|
+
}
|
|
821
|
+
else if (this._filteredResult.length === 0) {
|
|
822
|
+
statusMessage = `${this.afEmptySearchMessage} ${this._searchQuery}`;
|
|
823
|
+
}
|
|
824
|
+
return (index.h(index.Fragment, null, index.h("div", { role: "status", id: `${this.afId}-searchstatus`, class: {
|
|
825
|
+
'digi-form-select-filter__search-status': true,
|
|
826
|
+
'digi--util--sr-only': this._filteredResult && this._filteredResult.length > 0
|
|
827
|
+
} }, index.h("span", null, " ", statusMessage, " "), index.h("div", { class: {
|
|
828
|
+
hidden: this._filteredResult && this._filteredResult.length > 0
|
|
829
|
+
} }, index.h("slot", { name: "empty-search-result" })))));
|
|
830
|
+
}
|
|
831
|
+
render() {
|
|
832
|
+
return (index.h("div", { key: '0441a3108913933a52f7ce85a8e808637d1b3c91', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, index.h("digi-form-label", { key: '642aeed1224efdd28628722fc29c4885defe1f88', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("digi-util-keydown-handler", { key: 'b5117f00c181ceb475eff973d9fef953ab057ffe', onAfOnEsc: () => this.escHandler() }, index.h("button", { key: 'f5ac9723c420b469f280751113b8fed4be799b2f', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-labelledby": this.afFilterButtonAriaDescribedby, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, index.h("div", { key: '95f70c6e4a9ce0fb00d549ea9a2a56c889694536', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, index.h("digi-icon-check", { key: '1acd4598fe9a41669038186b086013a027c8e84f', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), index.h("span", { key: '965fd1089e5ebe115ebada0e6a8bac72de406d83', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), index.h("digi-icon-chevron-down", { key: '23ee710f53016cf532cf74bd2288e3202418bffd', class: "digi-form-select-filter__toggle-icon" })), index.h("div", { key: '55f99522a98d710b4d222b43e51c63961bdd390e', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
|
|
833
|
+
'digi-form-select-filter__dropdown': true,
|
|
834
|
+
'digi-form-select-filter__dropdown--right': this.afAlignRight,
|
|
835
|
+
'digi-form-select-filter__dropdown--hidden': !this.isOpen
|
|
836
|
+
} }, index.h("fieldset", { key: 'b801358f02ee8719a354128ce1669276ae26052c' }, index.h("div", { key: 'a307b294684fe855f61c3f1fae1359d79e118ed8', class: "digi-form-select-filter__header" }, index.h("legend", { key: '854730c3331539ff816c78bbb5c4afa8b3f8045f', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), index.h("digi-form-input", { key: 'ee515e0d2a5392fac6614309804762bb02b31b1b', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: typographyVariation_enum.FormInputVariation.MEDIUM, afType: formInputType_enum.FormInputType.SEARCH, afValidation: typographyVariation_enum.FormInputValidation.NEUTRAL, onAfOnFocus: () => {
|
|
837
|
+
this.focusListItemIndex = 0;
|
|
838
|
+
}, onAfOnKeyup: (e) => {
|
|
839
|
+
this.inputSearchKeyboardHandler(e.detail);
|
|
840
|
+
}, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), index.h("div", { key: '4c3b4dd67932713d3b0f9784ddb6908172bae788', class: "digi-form-select-filter__scroll" }, index.h("digi-util-keydown-handler", { key: '21fd9e82b72a29c6d4f6d9483a189bd877f86c7f', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, index.h("ul", { key: '1c7566020cc272722d7978b618395177c114a9ac', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
|
|
841
|
+
? 'false'
|
|
842
|
+
: this.afValidation === typographyVariation_enum.FormSelectFilterValidation.ERROR
|
|
843
|
+
? 'true'
|
|
844
|
+
: 'false', "aria-errormessage": `${this.afId}--validation-message`, "aria-required": this.afMultipleItems
|
|
845
|
+
? false
|
|
846
|
+
: this.afRequired
|
|
847
|
+
? 'true'
|
|
848
|
+
: 'false' }, this.showNeutralValue && (index.h("li", { key: '8d05cf89e96e8ac1483ce26a337a5978f838b639', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
|
|
849
|
+
? 'false'
|
|
850
|
+
: this.afRequired
|
|
851
|
+
? 'true'
|
|
852
|
+
: 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (index.h("digi-icon-check", { key: 'a38310179982e60d3f2689e86205b60954626a7b', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
|
|
853
|
+
this._filteredResult.map((item, index$1) => {
|
|
854
|
+
return (index.h("li", { class: "digi-form-select-filter__item", key: index$1, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
|
|
855
|
+
? 'false'
|
|
856
|
+
: this.afRequired
|
|
857
|
+
? 'true'
|
|
858
|
+
: 'false', "aria-invalid": this.afMultipleItems
|
|
859
|
+
? this.afValidation ===
|
|
860
|
+
typographyVariation_enum.FormSelectFilterValidation.ERROR
|
|
861
|
+
? 'true'
|
|
862
|
+
: 'false'
|
|
863
|
+
: 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue ? -1 : index$1 === 0 ? 0 : -1 }, this.isSelected(item.value) && (index.h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
|
|
864
|
+
}))))), this.afMultipleItems && (index.h("div", { key: '5b86ccce4ca0f6a5c8fdc02680aa792b97912a0b', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (index.h("digi-button", { key: 'b644d87b83ecbed6cfd1599a641e5264921ac4fc', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), index.h("digi-util-keydown-handler", { key: 'b0e8623abc016dcae8614310ea8653f28ec5d9b3', onAfOnUp: () => this.setFocusItem() }, index.h("digi-button", { key: '838f2780f265db6153e2e928ab23935a19885b51', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
|
|
865
|
+
this.setClosed(true);
|
|
866
|
+
}, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), index.h("div", { key: 'e2a972b032f28e6e0347e2bd7aca7724e7a144a2', class: "digi-form-select__footer" }, index.h("div", { key: 'f8d44fff602afedb23b2f64b80d5bcaf7b15b49e', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (index.h("digi-form-validation-message", { key: 'c91161db619777dbb192afa4b600732e39769208', "af-variation": this.afValidation }, this.afValidationText))))));
|
|
867
|
+
}
|
|
868
|
+
get hostElement() { return index.getElement(this); }
|
|
869
|
+
static get watchers() { return {
|
|
870
|
+
"value": ["onValueChanged"],
|
|
871
|
+
"afListItems": ["handleListItems"]
|
|
872
|
+
}; }
|
|
873
|
+
};
|
|
874
|
+
FormSelectFilter.style = DigiFormSelectFilterStyle0;
|
|
875
|
+
|
|
876
|
+
const formValidationMessageCss = ".sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icons--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icons--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icons--danger)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}";
|
|
877
|
+
const DigiFormValidationMessageStyle0 = formValidationMessageCss;
|
|
878
|
+
|
|
879
|
+
const FormValidationMessage = class {
|
|
880
|
+
constructor(hostRef) {
|
|
881
|
+
index.registerInstance(this, hostRef);
|
|
882
|
+
this.afVariation = formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS;
|
|
883
|
+
}
|
|
884
|
+
get cssModifiers() {
|
|
885
|
+
return {
|
|
886
|
+
'digi-form-validation-message--success': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS,
|
|
887
|
+
'digi-form-validation-message--error': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR,
|
|
888
|
+
'digi-form-validation-message--warning': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING
|
|
889
|
+
};
|
|
890
|
+
}
|
|
891
|
+
get icon() {
|
|
892
|
+
switch (this.afVariation) {
|
|
893
|
+
case formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS:
|
|
894
|
+
return index.h("digi-icon-validation-success", null);
|
|
895
|
+
case formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR:
|
|
896
|
+
return index.h("digi-icon-validation-error", null);
|
|
897
|
+
case formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING:
|
|
898
|
+
return index.h("digi-icon-validation-warning", null);
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
render() {
|
|
902
|
+
return (index.h("div", { key: '476664be4624693d823227aab661bf0332f500a6', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: 'e5ce10d94d2c101e60b82b3b3808e320d24f20b5', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: 'cdfbd680c9b56b2efc7a38034957434344d5724a', class: "digi-form-validation-message__text" }, index.h("slot", { key: 'c8c8320411478b72d1887974e177cdf3f7e49f49' }))));
|
|
903
|
+
}
|
|
904
|
+
get hostElement() { return index.getElement(this); }
|
|
905
|
+
};
|
|
906
|
+
FormValidationMessage.style = DigiFormValidationMessageStyle0;
|
|
907
|
+
|
|
908
|
+
const iconCheckCss = ".sc-digi-icon-check-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-check-h svg.sc-digi-icon-check{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)}";
|
|
909
|
+
const DigiIconCheckStyle0 = iconCheckCss;
|
|
910
|
+
|
|
911
|
+
const IconCheck = class {
|
|
912
|
+
constructor(hostRef) {
|
|
913
|
+
index.registerInstance(this, hostRef);
|
|
914
|
+
this.afTitle = undefined;
|
|
915
|
+
this.afDesc = undefined;
|
|
916
|
+
this.afSvgAriaHidden = true;
|
|
917
|
+
this.afSvgAriaLabelledby = undefined;
|
|
918
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
919
|
+
}
|
|
920
|
+
render() {
|
|
921
|
+
return (index.h("svg", { key: 'b93763762cb15da9dd043c599d28801dd1b7b6d2', class: "digi-icon-check", width: "23", height: "18", viewBox: "0 0 23 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
922
|
+
? this.afSvgAriaLabelledby
|
|
923
|
+
: this.afTitle
|
|
924
|
+
? this.titleId
|
|
925
|
+
: undefined }, this.afTitle && index.h("title", { key: '50601b1e8c8eaf8a33d0a1074005e9c65b87113d', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '06f9aacdab41e114f4f47f690ece821651ac4ee3' }, this.afDesc), index.h("path", { key: '1af3c61a39655f9002f6826fc8beaf48b2a976b1', class: "digi-icon-check__shape", d: "M20.547.18L7.315 13.627 2.453 8.686a.597.597 0 00-.853 0L.177 10.132a.62.62 0 000 .868l6.711 6.82c.236.24.618.24.854 0L22.823 2.493a.62.62 0 000-.867L21.4.18a.597.597 0 00-.853 0z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
926
|
+
}
|
|
927
|
+
};
|
|
928
|
+
IconCheck.style = DigiIconCheckStyle0;
|
|
929
|
+
|
|
930
|
+
const iconChevronDownCss = ".sc-digi-icon-chevron-down-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-down-h svg.sc-digi-icon-chevron-down{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)}";
|
|
931
|
+
const DigiIconChevronDownStyle0 = iconChevronDownCss;
|
|
932
|
+
|
|
933
|
+
const IconChevronDown = class {
|
|
934
|
+
constructor(hostRef) {
|
|
935
|
+
index.registerInstance(this, hostRef);
|
|
936
|
+
this.afTitle = undefined;
|
|
937
|
+
this.afDesc = undefined;
|
|
938
|
+
this.afSvgAriaHidden = true;
|
|
939
|
+
this.afSvgAriaLabelledby = undefined;
|
|
940
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
941
|
+
}
|
|
942
|
+
render() {
|
|
943
|
+
return (index.h("svg", { key: '5ac426b453a30750f70586d7ba38119c3ac36a73', class: "digi-icon-chevron-down", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
944
|
+
? this.afSvgAriaLabelledby
|
|
945
|
+
: this.afTitle
|
|
946
|
+
? this.titleId
|
|
947
|
+
: undefined }, this.afTitle && index.h("title", { key: '7f9ebb68d4f0a68f17df66c02e290e46b24a3004', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '5267ccd4d49aaf68cc85bb84dbcca21b1540d8c5' }, this.afDesc), index.h("path", { key: '4c0d7b31ff1e20fc32941d442ca3b04ca8349081', class: "digi-icon-chevron-down__shape", d: "M1 1l6.074 6L13 1.147", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
|
|
948
|
+
}
|
|
949
|
+
};
|
|
950
|
+
IconChevronDown.style = DigiIconChevronDownStyle0;
|
|
951
|
+
|
|
952
|
+
const iconValidationErrorCss = ".sc-digi-icon-validation-error-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-error-h svg.sc-digi-icon-validation-error{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)}";
|
|
953
|
+
const DigiIconValidationErrorStyle0 = iconValidationErrorCss;
|
|
954
|
+
|
|
955
|
+
const IconValidationError = class {
|
|
956
|
+
constructor(hostRef) {
|
|
957
|
+
index.registerInstance(this, hostRef);
|
|
958
|
+
this.afTitle = undefined;
|
|
959
|
+
this.afDesc = undefined;
|
|
960
|
+
this.afSvgAriaHidden = true;
|
|
961
|
+
this.afSvgAriaLabelledby = undefined;
|
|
962
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
963
|
+
}
|
|
964
|
+
render() {
|
|
965
|
+
return (index.h("svg", { key: '41ffc4c3d87390ae217263e98d041467a3f4c3a8', class: "digi-icon-validation-error", width: "48", height: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
966
|
+
? this.afSvgAriaLabelledby
|
|
967
|
+
: this.afTitle
|
|
968
|
+
? this.titleId
|
|
969
|
+
: undefined }, this.afTitle && index.h("title", { key: 'd1bdf3cb7894761018a33df17e461562c62f2a88', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '03e28955baed21df8d54fd9a45b5b6b52c861e72' }, this.afDesc), index.h("path", { key: 'd1aad885c99e8dcefbd87554dfa24ff4793e3e80', class: "digi-icon-validation-error__shape", d: "M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
970
|
+
}
|
|
971
|
+
};
|
|
972
|
+
IconValidationError.style = DigiIconValidationErrorStyle0;
|
|
973
|
+
|
|
974
|
+
const iconValidationSuccessCss = ".sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{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)}";
|
|
975
|
+
const DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
|
|
976
|
+
|
|
977
|
+
const IconCheckCircle = class {
|
|
978
|
+
constructor(hostRef) {
|
|
979
|
+
index.registerInstance(this, hostRef);
|
|
980
|
+
this.afTitle = undefined;
|
|
981
|
+
this.afDesc = undefined;
|
|
982
|
+
this.afSvgAriaHidden = true;
|
|
983
|
+
this.afSvgAriaLabelledby = undefined;
|
|
984
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
985
|
+
}
|
|
986
|
+
render() {
|
|
987
|
+
return (index.h("svg", { key: 'fae0e31b57ea0c8967bcf5b7c9f455ae082f6ba6', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
988
|
+
? this.afSvgAriaLabelledby
|
|
989
|
+
: this.afTitle
|
|
990
|
+
? this.titleId
|
|
991
|
+
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '281f60b240130a37391aa3e7ac0a3d0c5e637bc3', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '2bbf50f8eb1f5a56bb3ccf14c24a7ec46e2c94fe' }, this.afDesc), index.h("path", { key: '94abbabd9bb3b886c0fc81b8100547366982b6a7', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
992
|
+
}
|
|
993
|
+
};
|
|
994
|
+
IconCheckCircle.style = DigiIconValidationSuccessStyle0;
|
|
995
|
+
|
|
996
|
+
const iconValidationWarningCss = ".sc-digi-icon-validation-warning-h{--digi--icon--color:var(--digi--color--icons--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-warning-h svg.sc-digi-icon-validation-warning{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)}";
|
|
997
|
+
const DigiIconValidationWarningStyle0 = iconValidationWarningCss;
|
|
998
|
+
|
|
999
|
+
const IconValidationWarning = class {
|
|
1000
|
+
constructor(hostRef) {
|
|
1001
|
+
index.registerInstance(this, hostRef);
|
|
1002
|
+
this.afTitle = undefined;
|
|
1003
|
+
this.afDesc = undefined;
|
|
1004
|
+
this.afSvgAriaHidden = true;
|
|
1005
|
+
this.afSvgAriaLabelledby = undefined;
|
|
1006
|
+
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
1007
|
+
}
|
|
1008
|
+
render() {
|
|
1009
|
+
return (index.h("div", { key: '584c0d857b5b1f2e872abfac1ac0b67c743ee109' }, index.h("svg", { key: '9181b9f7e07e98629826415884de3dc8224282d7', class: "digi-icon-validation-warning", width: "18", height: "18", viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
1010
|
+
? this.afSvgAriaLabelledby
|
|
1011
|
+
: this.afTitle
|
|
1012
|
+
? this.titleId
|
|
1013
|
+
: undefined }, this.afTitle && index.h("title", { key: 'b86270de37ffe0d0dcdc2d3b11d122b294970e22', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'c534be9c18e9467d18aa8397698edac77f15dfae' }, this.afDesc), index.h("g", { key: '42657f7631a8c9a54e3b7a02bd95757222c68b86', fill: "none", "fill-rule": "evenodd" }, index.h("circle", { key: '863ad3e5f51f15d8385558494f9ea9e389a8d216', cx: "9", cy: "9", r: "6.75", fill: "#333" }), index.h("path", { key: '53881444c3a8a351d3a2b41bad03c0d10d190668', d: "m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z", fill: "#FFE200" })))));
|
|
1014
|
+
}
|
|
1015
|
+
};
|
|
1016
|
+
IconValidationWarning.style = DigiIconValidationWarningStyle0;
|
|
1017
|
+
|
|
1018
|
+
const typographyCss = ".digi--util--fs--xs{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50{padding-top:2.5rem !important}.digi--util--pt--60{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80{padding-top:4.5rem !important}.digi--util--pt--90{padding-top:5rem !important}.digi--util--pb--1{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50{padding-bottom:2.5rem !important}.digi--util--pb--60{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80{padding-bottom:4.5rem !important}.digi--util--pb--90{padding-bottom:5rem !important}.digi--util--p--1{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50{padding:2.5rem !important}.digi--util--p--60{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80{padding:4.5rem !important}.digi--util--p--90{padding:5rem !important}.digi--util--ptb--1{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only{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}.digi--util--hidden{display:none}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--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(\n --digi--typography--body--text-decoration--mobile\n );--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(\n --digi--typography--link--text-decoration--mobile\n );--FONT-SIZE--HEADING-1:var(--digi--typography--heading-1--font-size--mobile);--LINE-HEIGHT--HEADING-1:var(\n --digi--typography--heading-1--line-height--mobile\n );--FONT-WEIGHT--HEADING-1:var(\n --digi--typography--heading-1--font-weight--mobile\n );--TEXT-DECORATION--HEADING-1:var(\n --digi--typography--heading-1--text-decoration--mobile\n );--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(\n --digi--typography--heading-2--line-height--mobile\n );--FONT-WEIGHT--HEADING-2:var(\n --digi--typography--heading-2--font-weight--mobile\n );--TEXT-DECORATION--HEADING-2:var(\n --digi--typography--heading-2--text-decoration--mobile\n );--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(\n --digi--typography--heading-3--line-height--mobile\n );--FONT-WEIGHT--HEADING-3:var(\n --digi--typography--heading-3--font-weight--mobile\n );--TEXT-DECORATION--HEADING-3:var(\n --digi--typography--heading-3--text-decoration--mobile\n );--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(\n --digi--typography--heading-4--line-height--mobile\n );--FONT-WEIGHT--HEADING-4:var(\n --digi--typography--heading-4--font-weight--mobile\n );--TEXT-DECORATION--HEADING-4:var(\n --digi--typography--heading-4--text-decoration--mobile\n );--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(\n --digi--typography--heading-4--line-height--mobile\n );--FONT-WEIGHT--HEADING-5:var(\n --digi--typography--heading-4--font-weight--mobile\n );--TEXT-DECORATION--HEADING-5:var(\n --digi--typography--heading-4--text-decoration--mobile\n );--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(\n --digi--typography--heading-4--line-height--mobile\n );--FONT-WEIGHT--HEADING-6:var(\n --digi--typography--heading-4--font-weight--mobile\n );--TEXT-DECORATION--HEADING-6:var(\n --digi--typography--heading-4--text-decoration--mobile\n );--MARGIN--HEADING-6:var(--digi--typography--h4--margin--small);font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY)}@media (min-width: 62rem){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(\n --digi--typography--body--text-decoration--desktop\n );--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(\n --digi--typography--link--text-decoration--desktop\n );--FONT-SIZE--HEADING-1:var(\n --digi--typography--heading-1--font-size--desktop\n );--LINE-HEIGHT--HEADING-1:var(\n --digi--typography--heading-1--line-height--desktop\n );--FONT-WEIGHT--HEADING-1:var(\n --digi--typography--heading-1--font-weight--desktop\n );--TEXT-DECORATION--HEADING-1:var(\n --digi--typography--heading-1--text-decoration--desktop\n );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(\n --digi--typography--heading-2--font-size--desktop\n );--LINE-HEIGHT--HEADING-2:var(\n --digi--typography--heading-2--line-height--desktop\n );--FONT-WEIGHT--HEADING-2:var(\n --digi--typography--heading-2--font-weight--desktop\n );--TEXT-DECORATION--HEADING-2:var(\n --digi--typography--heading-2--text-decoration--desktop\n );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(\n --digi--typography--heading-3--font-size--desktop\n );--LINE-HEIGHT--HEADING-3:var(\n --digi--typography--heading-3--line-height--desktop\n );--FONT-WEIGHT--HEADING-3:var(\n --digi--typography--heading-3--font-weight--desktop\n );--TEXT-DECORATION--HEADING-3:var(\n --digi--typography--heading-3--text-decoration--desktop\n );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-4:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-4:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-4:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-5:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-5:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-5:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-6:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-6:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-6:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}}digi-typography .digi-typography--large{--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(\n --digi--typography--body--text-decoration--desktop\n );--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(\n --digi--typography--link--text-decoration--desktop\n );--FONT-SIZE--HEADING-1:var(\n --digi--typography--heading-1--font-size--desktop\n );--LINE-HEIGHT--HEADING-1:var(\n --digi--typography--heading-1--line-height--desktop\n );--FONT-WEIGHT--HEADING-1:var(\n --digi--typography--heading-1--font-weight--desktop\n );--TEXT-DECORATION--HEADING-1:var(\n --digi--typography--heading-1--text-decoration--desktop\n );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(\n --digi--typography--heading-2--font-size--desktop\n );--LINE-HEIGHT--HEADING-2:var(\n --digi--typography--heading-2--line-height--desktop\n );--FONT-WEIGHT--HEADING-2:var(\n --digi--typography--heading-2--font-weight--desktop\n );--TEXT-DECORATION--HEADING-2:var(\n --digi--typography--heading-2--text-decoration--desktop\n );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(\n --digi--typography--heading-3--font-size--desktop\n );--LINE-HEIGHT--HEADING-3:var(\n --digi--typography--heading-3--line-height--desktop\n );--FONT-WEIGHT--HEADING-3:var(\n --digi--typography--heading-3--font-weight--desktop\n );--TEXT-DECORATION--HEADING-3:var(\n --digi--typography--heading-3--text-decoration--desktop\n );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-4:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-4:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-4:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-5:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-5:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-5:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(\n --digi--typography--heading-4--font-size--desktop\n );--LINE-HEIGHT--HEADING-6:var(\n --digi--typography--heading-4--line-height--desktop\n );--FONT-WEIGHT--HEADING-6:var(\n --digi--typography--heading-4--font-weight--desktop\n );--TEXT-DECORATION--HEADING-6:var(\n --digi--typography--heading-4--text-decoration--desktop\n );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}@media (min-width: 62rem){digi-typography .digi-typography--large{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop-large);--LINE-HEIGHT--BODY:var(\n --digi--typography--body--line-height--desktop-large\n );--FONT-WEIGHT--BODY:var(\n --digi--typography--body--font-weight--desktop-large\n );--TEXT-DECORATION--BODY:var(\n --digi--typography--body--text-decoration--desktop-large\n );--MARGIN--BODY:var(--digi--typography--paragraph--margin--large);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop-large);--LINE-HEIGHT--LINK:var(\n --digi--typography--link--line-height--desktop-large\n );--FONT-WEIGHT--LINK:var(\n --digi--typography--link--font-weight--desktop-large\n );--TEXT-DECORATION--LINK:var(\n --digi--typography--link--text-decoration--desktop-large\n );--FONT-SIZE--HEADING-1:var(\n --digi--typography--heading-1--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-1:var(\n --digi--typography--heading-1--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-1:var(\n --digi--typography--heading-1--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-1:var(\n --digi--typography--heading-1--text-decoration--desktop-large\n );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--large);--FONT-SIZE--HEADING-2:var(\n --digi--typography--heading-2--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-2:var(\n --digi--typography--heading-2--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-2:var(\n --digi--typography--heading-2--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-2:var(\n --digi--typography--heading-2--text-decoration--desktop-large\n );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--large);--FONT-SIZE--HEADING-3:var(\n --digi--typography--heading-3--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-3:var(\n --digi--typography--heading-3--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-3:var(\n --digi--typography--heading-3--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-3:var(\n --digi--typography--heading-3--text-decoration--desktop-large\n );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--large);--FONT-SIZE--HEADING-4:var(\n --digi--typography--heading-4--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-4:var(\n --digi--typography--heading-4--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-4:var(\n --digi--typography--heading-4--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-4:var(\n --digi--typography--heading-4--text-decoration--desktop-large\n );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--large);--FONT-SIZE--HEADING-5:var(\n --digi--typography--heading-4--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-5:var(\n --digi--typography--heading-4--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-5:var(\n --digi--typography--heading-4--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-5:var(\n --digi--typography--heading-4--text-decoration--desktop-large\n );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--large);--FONT-SIZE--HEADING-6:var(\n --digi--typography--heading-4--font-size--desktop-large\n );--LINE-HEIGHT--HEADING-6:var(\n --digi--typography--heading-4--line-height--desktop-large\n );--FONT-WEIGHT--HEADING-6:var(\n --digi--typography--heading-4--font-weight--desktop-large\n );--TEXT-DECORATION--HEADING-6:var(\n --digi--typography--heading-4--text-decoration--desktop-large\n );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--large)}}digi-typography .digi-typography--hide-visited a:visited{color:var(--digi--color--text--link-secondary, var(--digi--color--text--link))}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--link-secondary, var(--digi--color--text--link));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--link-secondary-visited, var(--digi--color--text--link-visited))}digi-typography strong{font-weight:var(--digi--typography--label--font-weight--desktop)}";
|
|
1019
|
+
const DigiTypographyStyle0 = typographyCss;
|
|
1020
|
+
|
|
1021
|
+
const Typography = class {
|
|
1022
|
+
constructor(hostRef) {
|
|
1023
|
+
index.registerInstance(this, hostRef);
|
|
1024
|
+
this.afVariation = typographyVariation_enum.TypographyVariation.SMALL;
|
|
1025
|
+
this.hideVisitedColor = undefined;
|
|
1026
|
+
}
|
|
1027
|
+
get cssModifiers() {
|
|
1028
|
+
return {
|
|
1029
|
+
'digi-typography--large': this.afVariation === typographyVariation_enum.TypographyVariation.LARGE,
|
|
1030
|
+
'digi-typography--small': this.afVariation === typographyVariation_enum.TypographyVariation.SMALL,
|
|
1031
|
+
'digi-typography--hide-visited': this.hideVisitedColor
|
|
1032
|
+
};
|
|
1033
|
+
}
|
|
1034
|
+
render() {
|
|
1035
|
+
return (index.h("div", { key: '4a881c4feb6cbe1cf6b50a49209d0ba3ed373324', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, index.h("slot", { key: '4935b0dbadff8ed9f1830b23caa976701a29343e' })));
|
|
1036
|
+
}
|
|
1037
|
+
};
|
|
1038
|
+
Typography.style = DigiTypographyStyle0;
|
|
1039
|
+
|
|
1040
|
+
const UtilKeydownHandler = class {
|
|
1041
|
+
constructor(hostRef) {
|
|
1042
|
+
index.registerInstance(this, hostRef);
|
|
1043
|
+
this.afOnEsc = index.createEvent(this, "afOnEsc", 7);
|
|
1044
|
+
this.afOnEnter = index.createEvent(this, "afOnEnter", 7);
|
|
1045
|
+
this.afOnTab = index.createEvent(this, "afOnTab", 7);
|
|
1046
|
+
this.afOnSpace = index.createEvent(this, "afOnSpace", 7);
|
|
1047
|
+
this.afOnShiftTab = index.createEvent(this, "afOnShiftTab", 7);
|
|
1048
|
+
this.afOnUp = index.createEvent(this, "afOnUp", 7);
|
|
1049
|
+
this.afOnDown = index.createEvent(this, "afOnDown", 7);
|
|
1050
|
+
this.afOnLeft = index.createEvent(this, "afOnLeft", 7);
|
|
1051
|
+
this.afOnRight = index.createEvent(this, "afOnRight", 7);
|
|
1052
|
+
this.afOnHome = index.createEvent(this, "afOnHome", 7);
|
|
1053
|
+
this.afOnEnd = index.createEvent(this, "afOnEnd", 7);
|
|
1054
|
+
this.afOnKeyDown = index.createEvent(this, "afOnKeyDown", 7);
|
|
1055
|
+
}
|
|
1056
|
+
keydownHandler(e) {
|
|
1057
|
+
const key = keyboardHandler_util.keyboardHandler(e);
|
|
1058
|
+
switch (key) {
|
|
1059
|
+
case keyboardHandler_util.KEY_CODE.SHIFT_TAB:
|
|
1060
|
+
this.afOnShiftTab.emit(e);
|
|
1061
|
+
break;
|
|
1062
|
+
case keyboardHandler_util.KEY_CODE.DOWN_ARROW:
|
|
1063
|
+
this.afOnDown.emit(e);
|
|
1064
|
+
this.afOnKeyDown.emit(e);
|
|
1065
|
+
break;
|
|
1066
|
+
case keyboardHandler_util.KEY_CODE.UP_ARROW:
|
|
1067
|
+
this.afOnUp.emit(e);
|
|
1068
|
+
this.afOnKeyDown.emit(e);
|
|
1069
|
+
break;
|
|
1070
|
+
case keyboardHandler_util.KEY_CODE.LEFT_ARROW:
|
|
1071
|
+
this.afOnLeft.emit(e);
|
|
1072
|
+
this.afOnKeyDown.emit(e);
|
|
1073
|
+
break;
|
|
1074
|
+
case keyboardHandler_util.KEY_CODE.RIGHT_ARROW:
|
|
1075
|
+
this.afOnRight.emit(e);
|
|
1076
|
+
this.afOnKeyDown.emit(e);
|
|
1077
|
+
break;
|
|
1078
|
+
case keyboardHandler_util.KEY_CODE.ENTER:
|
|
1079
|
+
this.afOnEnter.emit(e);
|
|
1080
|
+
this.afOnKeyDown.emit(e);
|
|
1081
|
+
break;
|
|
1082
|
+
case keyboardHandler_util.KEY_CODE.ESCAPE:
|
|
1083
|
+
this.afOnEsc.emit(e);
|
|
1084
|
+
this.afOnKeyDown.emit(e);
|
|
1085
|
+
break;
|
|
1086
|
+
case keyboardHandler_util.KEY_CODE.TAB:
|
|
1087
|
+
this.afOnTab.emit(e);
|
|
1088
|
+
this.afOnKeyDown.emit(e);
|
|
1089
|
+
break;
|
|
1090
|
+
case keyboardHandler_util.KEY_CODE.SPACE:
|
|
1091
|
+
this.afOnSpace.emit(e);
|
|
1092
|
+
this.afOnKeyDown.emit(e);
|
|
1093
|
+
break;
|
|
1094
|
+
case keyboardHandler_util.KEY_CODE.HOME:
|
|
1095
|
+
this.afOnHome.emit(e);
|
|
1096
|
+
this.afOnKeyDown.emit(e);
|
|
1097
|
+
break;
|
|
1098
|
+
case keyboardHandler_util.KEY_CODE.END:
|
|
1099
|
+
this.afOnEnd.emit(e);
|
|
1100
|
+
this.afOnKeyDown.emit(e);
|
|
1101
|
+
break;
|
|
1102
|
+
case keyboardHandler_util.KEY_CODE.ANY:
|
|
1103
|
+
this.afOnKeyDown.emit(e);
|
|
1104
|
+
break;
|
|
1105
|
+
default:
|
|
1106
|
+
this.afOnKeyDown.emit(e);
|
|
1107
|
+
return;
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
render() {
|
|
1111
|
+
return index.h("slot", { key: 'e07347cd86e34c905bf0a0b19eee84dc4f201a30' });
|
|
1112
|
+
}
|
|
1113
|
+
};
|
|
1114
|
+
|
|
1115
|
+
exports.digi_button = Button;
|
|
1116
|
+
exports.digi_form_input = FormInput;
|
|
1117
|
+
exports.digi_form_label = FormLabel;
|
|
1118
|
+
exports.digi_form_select_filter = FormSelectFilter;
|
|
1119
|
+
exports.digi_form_validation_message = FormValidationMessage;
|
|
1120
|
+
exports.digi_icon_check = IconCheck;
|
|
1121
|
+
exports.digi_icon_chevron_down = IconChevronDown;
|
|
1122
|
+
exports.digi_icon_validation_error = IconValidationError;
|
|
1123
|
+
exports.digi_icon_validation_success = IconCheckCircle;
|
|
1124
|
+
exports.digi_icon_validation_warning = IconValidationWarning;
|
|
1125
|
+
exports.digi_typography = Typography;
|
|
1126
|
+
exports.digi_util_keydown_handler = UtilKeydownHandler;
|