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