@designsystem-se/af 38.1.0 → 38.2.1-beta.0
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-calendar-datepicker.js +10 -6
- package/components/digi-form-checkbox.js +1 -1
- package/components/digi-form-error-list.js +33 -1
- package/components/digi-form-filter.js +1 -1
- package/components/digi-form-select-filter.js +84 -47
- package/components/{p-13c09880.js → p-f84f590e.js} +2 -2
- package/custom-elements.json +9 -1
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-button_11.cjs.entry.js +1194 -0
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +15 -13
- package/dist/cjs/digi-code-block_3.cjs.entry.js +6 -6
- package/dist/cjs/digi-dialog.cjs.entry.js +6 -6
- package/dist/cjs/digi-footer-card.cjs.entry.js +29 -0
- package/dist/cjs/digi-footer.cjs.entry.js +74 -0
- package/dist/cjs/digi-form-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-error-list.cjs.entry.js +39 -7
- package/dist/cjs/digi-form-file-upload.cjs.entry.js +9 -10
- package/dist/cjs/digi-form-input-search.cjs.entry.js +6 -7
- package/dist/cjs/digi-form-receipt.cjs.entry.js +6 -6
- package/dist/cjs/digi-header-avatar.cjs.entry.js +114 -0
- package/dist/cjs/digi-header-navigation-item.cjs.entry.js +27 -0
- package/dist/cjs/digi-header-navigation.cjs.entry.js +228 -0
- package/dist/cjs/digi-header-notification.cjs.entry.js +23 -0
- package/dist/cjs/digi-header.cjs.entry.js +115 -0
- package/dist/cjs/digi-icon-accessibility-universal.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-bars.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-bell-filled.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-envelope.cjs.entry.js +30 -0
- package/dist/cjs/{digi-link-external.cjs.entry.js → digi-icon-external-link-alt_2.cjs.entry.js} +24 -0
- package/dist/cjs/digi-icon-globe.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-sign.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-x.cjs.entry.js +30 -0
- package/dist/cjs/digi-layout-block_2.cjs.entry.js +92 -0
- package/dist/cjs/digi-link.cjs.entry.js +75 -0
- package/dist/cjs/digi-logo.cjs.entry.js +49 -0
- package/dist/cjs/digi-media-image_2.cjs.entry.js +167 -0
- package/dist/cjs/digi-navigation-pagination.cjs.entry.js +6 -6
- package/dist/cjs/digi-navigation-sidebar-button.cjs.entry.js +30 -0
- package/dist/cjs/digi-notification-alert.cjs.entry.js +6 -6
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +6 -6
- package/dist/cjs/digi-title-logo.cjs.entry.js +133 -0
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +6 -6
- package/dist/cjs/digi-typography.cjs.entry.js +26 -0
- package/dist/cjs/digi-util-breakpoint-observer.cjs.entry.js +48 -0
- package/dist/cjs/footer-card-variation.enum-99555edc.js +8 -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-7a477838.js +84 -20
- package/dist/cjs/index.cjs.js +73 -73
- package/dist/cjs/layout-container-max-width.enum-7e637f44.js +21 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/logo-color.enum-76f6c506.js +7 -0
- package/dist/cjs/{typography-variation.enum-c0ef9190.js → typography-variation.enum-9aab5027.js} +28 -33
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js +53 -6
- package/dist/collection/components/_form/form-checkbox/form-checkbox.js +8 -5
- package/dist/collection/components/_form/form-error-list/form-error-list.js +20 -1
- package/dist/collection/components/_form/form-select-filter/form-select-filter.js +85 -48
- package/dist/collection/design-tokens/components/_logo.variables.scss +17 -15
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +2 -0
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/{p-8833044b.entry.js → p-02731621.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-0ef5ec06.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-10261517.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-37c0ea9e.entry.js → p-2295239c.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-97f66789.entry.js → p-25371300.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-2c685e4f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-300aa9ef.js +1 -0
- package/dist/digi-arbetsformedlingen/p-3887bb40.js +1 -0
- package/dist/digi-arbetsformedlingen/p-3efa2f0b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-47ab0b39.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-4e9f2f05.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-ddd659bf.entry.js → p-655cda00.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-6abd8d58.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-7e77bbe7.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-7e85c9e3.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-8713df13.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-8d9f4f10.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-8ef41ad9.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-18880083.entry.js → p-986a1582.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-9dd41cc4.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a0c77dff.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a2008b0a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-e5bd5a7e.entry.js → p-b3283953.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-beba49c2.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-bf80a488.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-a186888d.entry.js → p-c3e0f6dd.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-c553b73b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c604694f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c604a480.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c64b4626.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c7a512ee.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c7d079d0.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c9dfda73.js +1 -0
- package/dist/digi-arbetsformedlingen/p-d6d7b1d8.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-db246e29.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-39468f49.entry.js → p-de22ce43.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-ecc2e481.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ee88e3f1.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f2e16531.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f5bcd77b.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f87c0b45.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-fa77fcf7.entry.js +1 -0
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-button_11.entry.js +1180 -0
- package/dist/esm/digi-calendar-datepicker.entry.js +14 -12
- package/dist/esm/digi-code-block_3.entry.js +6 -6
- package/dist/esm/digi-dialog.entry.js +6 -6
- package/dist/esm/digi-footer-card.entry.js +25 -0
- package/dist/esm/digi-footer.entry.js +70 -0
- package/dist/esm/digi-form-checkbox.entry.js +2 -2
- package/dist/esm/digi-form-error-list.entry.js +39 -7
- package/dist/esm/digi-form-file-upload.entry.js +1 -2
- package/dist/esm/digi-form-input-search.entry.js +1 -2
- package/dist/esm/digi-form-receipt.entry.js +6 -6
- package/dist/esm/digi-header-avatar.entry.js +110 -0
- package/dist/esm/digi-header-navigation-item.entry.js +23 -0
- package/dist/esm/digi-header-navigation.entry.js +224 -0
- package/dist/esm/digi-header-notification.entry.js +19 -0
- package/dist/esm/digi-header.entry.js +111 -0
- package/dist/esm/digi-icon-accessibility-universal.entry.js +26 -0
- package/dist/esm/digi-icon-bars.entry.js +26 -0
- package/dist/esm/digi-icon-bell-filled.entry.js +26 -0
- package/dist/esm/digi-icon-envelope.entry.js +26 -0
- package/dist/esm/{digi-link-external.entry.js → digi-icon-external-link-alt_2.entry.js} +25 -2
- package/dist/esm/digi-icon-globe.entry.js +26 -0
- package/dist/esm/digi-icon-sign.entry.js +26 -0
- package/dist/esm/digi-icon-x.entry.js +26 -0
- package/dist/esm/digi-layout-block_2.entry.js +87 -0
- package/dist/esm/digi-link.entry.js +71 -0
- package/dist/esm/digi-logo.entry.js +45 -0
- package/dist/esm/digi-media-image_2.entry.js +162 -0
- package/dist/esm/digi-navigation-pagination.entry.js +6 -6
- package/dist/esm/digi-navigation-sidebar-button.entry.js +26 -0
- package/dist/esm/digi-notification-alert.entry.js +6 -6
- package/dist/esm/digi-notification-error-page.entry.js +6 -6
- package/dist/esm/digi-title-logo.entry.js +129 -0
- package/dist/esm/digi-tools-feedback.entry.js +6 -6
- package/dist/esm/digi-typography.entry.js +22 -0
- package/dist/esm/digi-util-breakpoint-observer.entry.js +44 -0
- package/dist/esm/footer-card-variation.enum-cc732148.js +8 -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-148a7577.js +84 -20
- package/dist/esm/index.js +6 -6
- package/dist/esm/layout-container-max-width.enum-c40018ac.js +21 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/logo-color.enum-8593dca6.js +7 -0
- package/dist/esm/{typography-variation.enum-c85d7857.js → typography-variation.enum-fdda731c.js} +29 -34
- package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.d.ts +10 -0
- package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts +5 -2
- package/dist/types/components/_form/form-error-list/form-error-list.d.ts +3 -0
- package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts +22 -3
- package/dist/types/components.d.ts +26 -6
- package/hydrate/index.js +129 -56
- package/hydrate/index.mjs +129 -56
- package/package.json +1 -1
- package/dist/cjs/digi-button_27.cjs.entry.js +0 -1380
- package/dist/cjs/digi-form-input.cjs.entry.js +0 -194
- package/dist/cjs/digi-form-label_3.cjs.entry.js +0 -129
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +0 -564
- package/dist/cjs/digi-icon-check.cjs.entry.js +0 -30
- package/dist/cjs/digi-icon-chevron-down.cjs.entry.js +0 -30
- package/dist/cjs/digi-icon-validation-error_2.cjs.entry.js +0 -53
- package/dist/cjs/form-input-search-variation.enum-e0e025b1.js +0 -15
- 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-111fb07d.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-1f956af8.js +0 -1
- package/dist/digi-arbetsformedlingen/p-2788683e.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-2d2f6950.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-30dc159d.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4841b4e1.js +0 -1
- package/dist/digi-arbetsformedlingen/p-59073668.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-7933b555.js +0 -1
- package/dist/digi-arbetsformedlingen/p-82611050.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-82a74908.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-9c053cf8.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-9dae073c.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d595e8a3.js +0 -1
- package/dist/digi-arbetsformedlingen/p-eda570be.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ef689144.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-f0a405ca.entry.js +0 -1
- package/dist/esm/digi-button_27.entry.js +0 -1350
- package/dist/esm/digi-form-input.entry.js +0 -190
- package/dist/esm/digi-form-label_3.entry.js +0 -123
- package/dist/esm/digi-form-select-filter.entry.js +0 -560
- package/dist/esm/digi-icon-check.entry.js +0 -26
- package/dist/esm/digi-icon-chevron-down.entry.js +0 -26
- package/dist/esm/digi-icon-validation-error_2.entry.js +0 -48
- package/dist/esm/form-input-search-variation.enum-6d8dc10a.js +0 -15
- package/dist/esm/form-input-variation.enum-64d9450f.js +0 -29
- package/dist/esm/form-validation-message-variation.enum-bcef8a9d.js +0 -8
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-7a477838.js');
|
|
6
|
-
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
-
const formInputType_enum = require('./form-input-type.enum-9c8ee12a.js');
|
|
8
|
-
const formInputVariation_enum = require('./form-input-variation.enum-c750520c.js');
|
|
9
|
-
|
|
10
|
-
const formInputCss = ".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--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--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--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.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}";
|
|
11
|
-
const DigiFormInputStyle0 = formInputCss;
|
|
12
|
-
|
|
13
|
-
const FormInput = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
index.registerInstance(this, hostRef);
|
|
16
|
-
this.afOnChange = index.createEvent(this, "afOnChange", 7);
|
|
17
|
-
this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
|
|
18
|
-
this.afOnKeyup = index.createEvent(this, "afOnKeyup", 7);
|
|
19
|
-
this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
|
|
20
|
-
this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
|
|
21
|
-
this.afOnInput = index.createEvent(this, "afOnInput", 7);
|
|
22
|
-
this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
|
|
23
|
-
this.afOnTouched = index.createEvent(this, "afOnTouched", 7);
|
|
24
|
-
this.afOnReady = index.createEvent(this, "afOnReady", 3);
|
|
25
|
-
this.hasActiveValidationMessage = false;
|
|
26
|
-
this.hasButton = undefined;
|
|
27
|
-
this.dirty = false;
|
|
28
|
-
this.touched = false;
|
|
29
|
-
this.afLabel = undefined;
|
|
30
|
-
this.afLabelDescription = undefined;
|
|
31
|
-
this.afType = formInputType_enum.FormInputType.TEXT;
|
|
32
|
-
this.afInputmode = formInputVariation_enum.FormInputMode.DEFAULT;
|
|
33
|
-
this.afButtonVariation = formInputType_enum.FormInputButtonVariation.PRIMARY;
|
|
34
|
-
this.afAutofocus = undefined;
|
|
35
|
-
this.afVariation = formInputVariation_enum.FormInputVariation.MEDIUM;
|
|
36
|
-
this.afName = undefined;
|
|
37
|
-
this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-input');
|
|
38
|
-
this.afMaxlength = undefined;
|
|
39
|
-
this.afMinlength = undefined;
|
|
40
|
-
this.afRequired = undefined;
|
|
41
|
-
this.afRequiredText = undefined;
|
|
42
|
-
this.afAnnounceIfOptional = false;
|
|
43
|
-
this.afAnnounceIfOptionalText = undefined;
|
|
44
|
-
this.value = undefined;
|
|
45
|
-
this.afValue = undefined;
|
|
46
|
-
this.afValidation = formInputVariation_enum.FormInputValidation.NEUTRAL;
|
|
47
|
-
this.afValidationText = undefined;
|
|
48
|
-
this.afRole = undefined;
|
|
49
|
-
this.afAutocomplete = undefined;
|
|
50
|
-
this.afMin = undefined;
|
|
51
|
-
this.afMax = undefined;
|
|
52
|
-
this.afList = undefined;
|
|
53
|
-
this.afStep = undefined;
|
|
54
|
-
this.afDirname = undefined;
|
|
55
|
-
this.afAriaAutocomplete = undefined;
|
|
56
|
-
this.afAriaActivedescendant = undefined;
|
|
57
|
-
this.afAriaLabelledby = undefined;
|
|
58
|
-
this.afAriaDescribedby = undefined;
|
|
59
|
-
this.afAriaControls = undefined;
|
|
60
|
-
this.afTrimValue = undefined;
|
|
61
|
-
this.afErrorMessageIsAlert = true;
|
|
62
|
-
}
|
|
63
|
-
onValueChanged(value) {
|
|
64
|
-
this.afValue = value;
|
|
65
|
-
}
|
|
66
|
-
onAfValueChanged(value) {
|
|
67
|
-
this.value = value;
|
|
68
|
-
if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
|
|
69
|
-
this._input.value = String(value !== null && value !== void 0 ? value : '');
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
get errorMessageIsAlert() {
|
|
73
|
-
return (this.afErrorMessageIsAlert !== false &&
|
|
74
|
-
this.afErrorMessageIsAlert !== 'false');
|
|
75
|
-
}
|
|
76
|
-
afValidationTextWatch() {
|
|
77
|
-
this.setActiveValidationMessage();
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
|
|
81
|
-
* @en Returns a reference to the input element. Handy for setting focus programmatically.
|
|
82
|
-
*/
|
|
83
|
-
async afMGetFormControlElement() {
|
|
84
|
-
return this._input;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
|
|
88
|
-
* @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
|
|
89
|
-
*/
|
|
90
|
-
focusOnInput() {
|
|
91
|
-
this._input.focus();
|
|
92
|
-
}
|
|
93
|
-
componentWillLoad() {
|
|
94
|
-
this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
|
|
95
|
-
this.setActiveValidationMessage();
|
|
96
|
-
this.setHasButton();
|
|
97
|
-
}
|
|
98
|
-
componentWillUpdate() {
|
|
99
|
-
this.setHasButton();
|
|
100
|
-
}
|
|
101
|
-
componentDidLoad() {
|
|
102
|
-
this.afOnReady.emit();
|
|
103
|
-
}
|
|
104
|
-
setActiveValidationMessage() {
|
|
105
|
-
this.hasActiveValidationMessage = !!this.afValidationText;
|
|
106
|
-
}
|
|
107
|
-
get cssModifiers() {
|
|
108
|
-
return {
|
|
109
|
-
'digi-form-input--small': this.afVariation === formInputVariation_enum.FormInputVariation.SMALL,
|
|
110
|
-
'digi-form-input--medium': this.afVariation === formInputVariation_enum.FormInputVariation.MEDIUM,
|
|
111
|
-
'digi-form-input--large': this.afVariation === formInputVariation_enum.FormInputVariation.LARGE,
|
|
112
|
-
'digi-form-input--neutral': this.afValidation === formInputVariation_enum.FormInputValidation.NEUTRAL,
|
|
113
|
-
'digi-form-input--success': this.afValidation === formInputVariation_enum.FormInputValidation.SUCCESS,
|
|
114
|
-
'digi-form-input--error': this.afValidation === formInputVariation_enum.FormInputValidation.ERROR,
|
|
115
|
-
'digi-form-input--warning': this.afValidation === formInputVariation_enum.FormInputValidation.WARNING,
|
|
116
|
-
[`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
|
|
117
|
-
[`digi-form-input--has-button-${this.hasButton}`]: true,
|
|
118
|
-
'digi-form-input--empty': !this.afValue &&
|
|
119
|
-
(!this.afValidation ||
|
|
120
|
-
this.afValidation === formInputVariation_enum.FormInputValidation.NEUTRAL)
|
|
121
|
-
};
|
|
122
|
-
}
|
|
123
|
-
blurHandler(e) {
|
|
124
|
-
const trimableTypes = [
|
|
125
|
-
formInputType_enum.FormInputType.TEXT,
|
|
126
|
-
formInputType_enum.FormInputType.EMAIL,
|
|
127
|
-
formInputType_enum.FormInputType.SEARCH,
|
|
128
|
-
formInputType_enum.FormInputType.TEL,
|
|
129
|
-
formInputType_enum.FormInputType.URL
|
|
130
|
-
];
|
|
131
|
-
const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
|
|
132
|
-
if (shouldTrim && typeof e.target.value === 'string') {
|
|
133
|
-
const trimmedValue = e.target.value.trim();
|
|
134
|
-
if (trimmedValue !== e.target.value) {
|
|
135
|
-
this.afValue = this.value = trimmedValue;
|
|
136
|
-
if (this._input) {
|
|
137
|
-
this._input.value = trimmedValue;
|
|
138
|
-
}
|
|
139
|
-
// Emittar afOnInput så Angulars value accessor får det trimmade värdet
|
|
140
|
-
this.afOnInput.emit(e);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
if (!this.touched) {
|
|
144
|
-
this.afOnTouched.emit(e);
|
|
145
|
-
this.touched = true;
|
|
146
|
-
}
|
|
147
|
-
this.afOnBlur.emit(e);
|
|
148
|
-
}
|
|
149
|
-
changeHandler(e) {
|
|
150
|
-
this.setActiveValidationMessage();
|
|
151
|
-
this.afOnChange.emit(e);
|
|
152
|
-
}
|
|
153
|
-
focusHandler(e) {
|
|
154
|
-
this.afOnFocus.emit(e);
|
|
155
|
-
}
|
|
156
|
-
focusoutHandler(e) {
|
|
157
|
-
this.afOnFocusout.emit(e);
|
|
158
|
-
}
|
|
159
|
-
keyupHandler(e) {
|
|
160
|
-
this.afOnKeyup.emit(e);
|
|
161
|
-
}
|
|
162
|
-
inputHandler(e) {
|
|
163
|
-
this.afValue = this.value =
|
|
164
|
-
this.afType === formInputType_enum.FormInputType.NUMBER
|
|
165
|
-
? parseFloat(e.target.value)
|
|
166
|
-
: e.target.value;
|
|
167
|
-
if (!this.dirty) {
|
|
168
|
-
this.afOnDirty.emit(e);
|
|
169
|
-
this.dirty = true;
|
|
170
|
-
}
|
|
171
|
-
this.setActiveValidationMessage();
|
|
172
|
-
this.afOnInput.emit(e);
|
|
173
|
-
}
|
|
174
|
-
setHasButton() {
|
|
175
|
-
this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
|
|
176
|
-
}
|
|
177
|
-
render() {
|
|
178
|
-
return (index.h(index.Host, { key: '2739bdd7385125581d7ea9c25a3610f5950c6a74', tabindex: -1 }, index.h("div", { key: '7e261c1e2fc4f37f4ddda861872a470c89181e16', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, index.h("digi-form-label", { key: '7e8fd283dedf0a851c714331ae640f7c74176bde', 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: '68d715181c180ebaf957dfb46afb63b19b8a8188', class: "digi-form-input__input-wrapper" }, index.h("input", Object.assign({ key: 'e25ab871e988f9e8bd0837f75403e85f7423805f', 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} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === formInputVariation_enum.FormInputValidation.ERROR
|
|
179
|
-
? 'true'
|
|
180
|
-
: '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 == formInputVariation_enum.FormInputMode.DEFAULT
|
|
181
|
-
? {}
|
|
182
|
-
: { inputmode: this.afInputmode }))), index.h("slot", { key: 'c14ae079a53099fc3928bcf3ac7f5517c20b0f36', name: "button" })), index.h("div", { key: '75d6afa176cd8620e31c384e169b3c84a3bb584d', class: "digi-form-input__footer" }, index.h("div", { key: '81029d425aae06e3c72c08afe982f2ff1a7bb81d', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
|
|
183
|
-
this.afValidation != formInputVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '9a8fec12db8c78a037a9b70194b32814d7641dad', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
184
|
-
}
|
|
185
|
-
get hostElement() { return index.getElement(this); }
|
|
186
|
-
static get watchers() { return {
|
|
187
|
-
"value": ["onValueChanged"],
|
|
188
|
-
"afValue": ["onAfValueChanged"],
|
|
189
|
-
"afValidationText": ["afValidationTextWatch"]
|
|
190
|
-
}; }
|
|
191
|
-
};
|
|
192
|
-
FormInput.style = DigiFormInputStyle0;
|
|
193
|
-
|
|
194
|
-
exports.digi_form_input = FormInput;
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-7a477838.js');
|
|
6
|
-
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
|
|
7
|
-
const logger_util = require('./logger.util-fdafc086.js');
|
|
8
|
-
const text = require('./text-65b1b58c.js');
|
|
9
|
-
const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-855ae0be.js');
|
|
10
|
-
|
|
11
|
-
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)}";
|
|
12
|
-
const DigiFormLabelStyle0 = formLabelCss;
|
|
13
|
-
|
|
14
|
-
const FormLabel = class {
|
|
15
|
-
constructor(hostRef) {
|
|
16
|
-
index.registerInstance(this, hostRef);
|
|
17
|
-
this.labelText = undefined;
|
|
18
|
-
this.hasActionSlot = undefined;
|
|
19
|
-
this.afLabel = undefined;
|
|
20
|
-
this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
|
|
21
|
-
this.afFor = undefined;
|
|
22
|
-
this.afDescription = undefined;
|
|
23
|
-
this.afRequired = undefined;
|
|
24
|
-
this.afAnnounceIfOptional = false;
|
|
25
|
-
this.afRequiredText = text._t.required.toLowerCase();
|
|
26
|
-
this.afAnnounceIfOptionalText = text._t.optional.toLowerCase();
|
|
27
|
-
}
|
|
28
|
-
componentWillLoad() {
|
|
29
|
-
this.setLabelText();
|
|
30
|
-
this.validateFor();
|
|
31
|
-
this.handleSlotVisibility();
|
|
32
|
-
}
|
|
33
|
-
validateFor() {
|
|
34
|
-
if (this.afFor == null) {
|
|
35
|
-
logger_util.logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
setLabelText() {
|
|
39
|
-
this.labelText = `${this.afLabel} ${this.requiredText}`;
|
|
40
|
-
if (!this.afLabel) {
|
|
41
|
-
logger_util.logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
handleSlotVisibility() {
|
|
45
|
-
this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
|
|
46
|
-
}
|
|
47
|
-
get requiredText() {
|
|
48
|
-
if (this.afRequired && !this.afAnnounceIfOptional) {
|
|
49
|
-
return this.afRequiredText ? ` (${this.afRequiredText})` : '';
|
|
50
|
-
}
|
|
51
|
-
else if (!this.afRequired && this.afAnnounceIfOptional) {
|
|
52
|
-
return this.afAnnounceIfOptionalText
|
|
53
|
-
? ` (${this.afAnnounceIfOptionalText})`
|
|
54
|
-
: '';
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
return '';
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
render() {
|
|
61
|
-
return (index.h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, index.h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, index.h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
|
|
62
|
-
}
|
|
63
|
-
get hostElement() { return index.getElement(this); }
|
|
64
|
-
static get watchers() { return {
|
|
65
|
-
"afFor": ["validateFor"],
|
|
66
|
-
"afLabel": ["setLabelText"],
|
|
67
|
-
"afRequired": ["setLabelText"],
|
|
68
|
-
"afAnnounceIfOptional": ["setLabelText"]
|
|
69
|
-
}; }
|
|
70
|
-
};
|
|
71
|
-
FormLabel.style = DigiFormLabelStyle0;
|
|
72
|
-
|
|
73
|
-
const formValidationMessageCss = ".sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.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__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.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)}";
|
|
74
|
-
const DigiFormValidationMessageStyle0 = formValidationMessageCss;
|
|
75
|
-
|
|
76
|
-
const FormValidationMessage = class {
|
|
77
|
-
constructor(hostRef) {
|
|
78
|
-
index.registerInstance(this, hostRef);
|
|
79
|
-
this.afVariation = formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS;
|
|
80
|
-
}
|
|
81
|
-
get cssModifiers() {
|
|
82
|
-
return {
|
|
83
|
-
'digi-form-validation-message--success': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS,
|
|
84
|
-
'digi-form-validation-message--error': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR,
|
|
85
|
-
'digi-form-validation-message--warning': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
get icon() {
|
|
89
|
-
switch (this.afVariation) {
|
|
90
|
-
case formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS:
|
|
91
|
-
return index.h("digi-icon-validation-success", null);
|
|
92
|
-
case formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR:
|
|
93
|
-
return index.h("digi-icon-validation-error", null);
|
|
94
|
-
case formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING:
|
|
95
|
-
return index.h("digi-icon-validation-warning", { class: "warning" });
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
render() {
|
|
99
|
-
return (index.h("div", { key: 'e19f49d6e49b2d928b3c80053fd413d6f86056e0', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: 'ea2cce02d7c3c98c761cfa9abc1e39428c515063', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: 'd732a6a477a88fc3ca2e18a2199f8f1f528c8a0a', class: "digi-form-validation-message__text" }, index.h("slot", { key: '8d62d0fc0d2f3290227289b59c975b92133df852' }))));
|
|
100
|
-
}
|
|
101
|
-
get hostElement() { return index.getElement(this); }
|
|
102
|
-
};
|
|
103
|
-
FormValidationMessage.style = DigiFormValidationMessageStyle0;
|
|
104
|
-
|
|
105
|
-
const iconValidationSuccessCss = ".sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-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)}";
|
|
106
|
-
const DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
|
|
107
|
-
|
|
108
|
-
const IconCheckCircle = class {
|
|
109
|
-
constructor(hostRef) {
|
|
110
|
-
index.registerInstance(this, hostRef);
|
|
111
|
-
this.afTitle = undefined;
|
|
112
|
-
this.afDesc = undefined;
|
|
113
|
-
this.afSvgAriaHidden = true;
|
|
114
|
-
this.afSvgAriaLabelledby = undefined;
|
|
115
|
-
this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
|
|
116
|
-
}
|
|
117
|
-
render() {
|
|
118
|
-
return (index.h("svg", { key: '5a97bff65735eb5dfb967a91ac6d57e724bba899', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
119
|
-
? this.afSvgAriaLabelledby
|
|
120
|
-
: this.afTitle
|
|
121
|
-
? this.titleId
|
|
122
|
-
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '3595f915b3f4a2cdbdef9216c7e5f468d631444d', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '83552998214817f66d1dc8381fa8c6d8a04a4b8e' }, this.afDesc), index.h("path", { key: 'e1a139cccf2b81927aed305f137c0fb5ba523a97', 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" })));
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
IconCheckCircle.style = DigiIconValidationSuccessStyle0;
|
|
126
|
-
|
|
127
|
-
exports.digi_form_label = FormLabel;
|
|
128
|
-
exports.digi_form_validation_message = FormValidationMessage;
|
|
129
|
-
exports.digi_icon_validation_success = IconCheckCircle;
|