@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,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;