@folkehelseinstituttet/designsystem 0.27.0 → 0.28.4

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 (136) hide show
  1. package/custom-elements.json +26 -1
  2. package/fhi-body.js +1 -1
  3. package/fhi-button.js +1 -1
  4. package/fhi-checkbox.js +4 -3
  5. package/fhi-checkbox.js.map +1 -1
  6. package/fhi-date-input.js +20 -12
  7. package/fhi-date-input.js.map +1 -1
  8. package/fhi-display.js +2 -2
  9. package/fhi-flex.js +1 -1
  10. package/fhi-grid.js +1 -1
  11. package/fhi-headline.js +2 -2
  12. package/fhi-icon-arrow-down-left.js +1 -1
  13. package/fhi-icon-arrow-down-right.js +1 -1
  14. package/fhi-icon-arrow-down.js +1 -1
  15. package/fhi-icon-arrow-left.js +1 -1
  16. package/fhi-icon-arrow-right-left.js +1 -1
  17. package/fhi-icon-arrow-right.js +1 -1
  18. package/fhi-icon-arrow-up-down.js +1 -1
  19. package/fhi-icon-arrow-up-left.js +1 -1
  20. package/fhi-icon-arrow-up-right.js +1 -1
  21. package/fhi-icon-arrow-up.js +1 -1
  22. package/fhi-icon-bell.js +1 -1
  23. package/fhi-icon-calendar-clock.js +1 -1
  24. package/fhi-icon-calendar.js +1 -1
  25. package/fhi-icon-chart-bar-stacked.js +1 -1
  26. package/fhi-icon-chart-bar.js +1 -1
  27. package/fhi-icon-chart-column-stacked.js +1 -1
  28. package/fhi-icon-chart-column.js +1 -1
  29. package/fhi-icon-chart-line.js +1 -1
  30. package/fhi-icon-chart-no-axes-combined.js +1 -1
  31. package/fhi-icon-chart-pie.js +1 -1
  32. package/fhi-icon-check.js +1 -1
  33. package/fhi-icon-chevron-down.js +1 -1
  34. package/fhi-icon-chevron-left.js +1 -1
  35. package/fhi-icon-chevron-right.js +1 -1
  36. package/fhi-icon-chevron-up.js +1 -1
  37. package/fhi-icon-chevrons-down.js +1 -1
  38. package/fhi-icon-chevrons-left.js +1 -1
  39. package/fhi-icon-chevrons-right.js +1 -1
  40. package/fhi-icon-chevrons-up.js +1 -1
  41. package/fhi-icon-circle-arrow-down.js +1 -1
  42. package/fhi-icon-circle-arrow-left.js +1 -1
  43. package/fhi-icon-circle-arrow-right.js +1 -1
  44. package/fhi-icon-circle-arrow-up.js +1 -1
  45. package/fhi-icon-circle-check-big.js +1 -1
  46. package/fhi-icon-circle-check.js +1 -1
  47. package/fhi-icon-circle-chevron-down.js +1 -1
  48. package/fhi-icon-circle-chevron-left.js +1 -1
  49. package/fhi-icon-circle-chevron-right.js +1 -1
  50. package/fhi-icon-circle-chevron-up.js +1 -1
  51. package/fhi-icon-circle-exclamation.js +1 -1
  52. package/fhi-icon-circle-info.js +1 -1
  53. package/fhi-icon-circle-minus.js +1 -1
  54. package/fhi-icon-circle-plus.js +1 -1
  55. package/fhi-icon-circle-question.js +1 -1
  56. package/fhi-icon-circle-x.js +1 -1
  57. package/fhi-icon-circle.js +1 -1
  58. package/fhi-icon-clock.js +1 -1
  59. package/fhi-icon-copy.js +1 -1
  60. package/fhi-icon-download.js +1 -1
  61. package/fhi-icon-ellipsis-vertical.js +1 -1
  62. package/fhi-icon-ellipsis.js +1 -1
  63. package/fhi-icon-exclamation.js +1 -1
  64. package/fhi-icon-expand.js +1 -1
  65. package/fhi-icon-external-link.js +1 -1
  66. package/fhi-icon-eye-off.js +1 -1
  67. package/fhi-icon-eye.js +1 -1
  68. package/fhi-icon-file.js +1 -1
  69. package/fhi-icon-filter.js +1 -1
  70. package/fhi-icon-folder.js +1 -1
  71. package/fhi-icon-gear.js +1 -1
  72. package/fhi-icon-grid-9-dots.js +1 -1
  73. package/fhi-icon-grip-horizontal.js +1 -1
  74. package/fhi-icon-grip-vertical.js +1 -1
  75. package/fhi-icon-history.js +1 -1
  76. package/fhi-icon-info.js +1 -1
  77. package/fhi-icon-link-2-off.js +1 -1
  78. package/fhi-icon-link-2.js +1 -1
  79. package/fhi-icon-link.js +1 -1
  80. package/fhi-icon-lock-open.js +1 -1
  81. package/fhi-icon-lock.js +1 -1
  82. package/fhi-icon-log-in.js +1 -1
  83. package/fhi-icon-log-out.js +1 -1
  84. package/fhi-icon-mail.js +1 -1
  85. package/fhi-icon-map-pin.js +1 -1
  86. package/fhi-icon-menu.js +1 -1
  87. package/fhi-icon-message.js +1 -1
  88. package/fhi-icon-minus.js +1 -1
  89. package/fhi-icon-octagon-alert.js +1 -1
  90. package/fhi-icon-paperclip.js +1 -1
  91. package/fhi-icon-pencil.js +1 -1
  92. package/fhi-icon-phone.js +1 -1
  93. package/fhi-icon-pin-off.js +1 -1
  94. package/fhi-icon-pin.js +1 -1
  95. package/fhi-icon-plus.js +1 -1
  96. package/fhi-icon-printer.js +1 -1
  97. package/fhi-icon-question.js +1 -1
  98. package/fhi-icon-refresh.js +1 -1
  99. package/fhi-icon-rotate-left.js +1 -1
  100. package/fhi-icon-rotate-right.js +1 -1
  101. package/fhi-icon-search.js +1 -1
  102. package/fhi-icon-send.js +1 -1
  103. package/fhi-icon-share.js +1 -1
  104. package/fhi-icon-sheet.js +1 -1
  105. package/fhi-icon-square-check-big.js +1 -1
  106. package/fhi-icon-square-check.js +1 -1
  107. package/fhi-icon-square-pen.js +1 -1
  108. package/fhi-icon-square-x.js +1 -1
  109. package/fhi-icon-square.js +1 -1
  110. package/fhi-icon-trash.js +1 -1
  111. package/fhi-icon-triangle-alert.js +1 -1
  112. package/fhi-icon-upload.js +1 -1
  113. package/fhi-icon-user.js +1 -1
  114. package/fhi-icon-x.js +1 -1
  115. package/fhi-label.js +1 -1
  116. package/fhi-radio.js +6 -2
  117. package/fhi-radio.js.map +1 -1
  118. package/fhi-tag.js +16 -12
  119. package/fhi-tag.js.map +1 -1
  120. package/fhi-text-input.js +4 -3
  121. package/fhi-text-input.js.map +1 -1
  122. package/fhi-title.js +2 -2
  123. package/fhi-tooltip.js +1 -1
  124. package/fhi-tooltip.js.map +1 -1
  125. package/fonts/RobotoFlex.ttf.js.map +1 -0
  126. package/{if-defined-DNfpFw3g.js → if-defined-BW6N1yuF.js} +2 -2
  127. package/{if-defined-DNfpFw3g.js.map → if-defined-BW6N1yuF.js.map} +1 -1
  128. package/package.json +1 -1
  129. package/{property-XFX9TijU.js → property-DGdAXcEz.js} +69 -69
  130. package/property-DGdAXcEz.js.map +1 -0
  131. package/query-NJDNu0-P.js.map +1 -1
  132. package/theme/default.css +1 -1
  133. package/{unsafe-html-BD5OG__c.js → unsafe-html-lUureUEN.js} +2 -2
  134. package/{unsafe-html-BD5OG__c.js.map → unsafe-html-lUureUEN.js.map} +1 -1
  135. package/web-types.json +12 -2
  136. package/property-XFX9TijU.js.map +0 -1
package/custom-elements.json CHANGED
@@ -698,6 +698,16 @@
698
698
  }
699
699
  }
700
700
  },
701
+ {
702
+ "kind": "method",
703
+ "name": "_dispatchInputEvent",
704
+ "privacy": "private",
705
+ "return": {
706
+ "type": {
707
+ "text": "void"
708
+ }
709
+ }
710
+ },
701
711
  {
702
712
  "kind": "method",
703
713
  "name": "_handleChange",
@@ -716,7 +726,15 @@
716
726
  "type": {
717
727
  "text": "void"
718
728
  }
719
- }
729
+ },
730
+ "parameters": [
731
+ {
732
+ "name": "event",
733
+ "type": {
734
+ "text": "Event"
735
+ }
736
+ }
737
+ ]
720
738
  },
721
739
  {
722
740
  "kind": "method",
@@ -894,6 +912,13 @@
894
912
  "text": "Event"
895
913
  },
896
914
  "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."
915
+ },
916
+ {
917
+ "name": "input",
918
+ "type": {
919
+ "text": "Event"
920
+ },
921
+ "description": "Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."
897
922
  }
898
923
  ],
899
924
  "attributes": [
package/fhi-body.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as g, n, a as p, x as f, t as y } from "./property-XFX9TijU.js";
1
+ import { i as g, n, a as p, b as f, t as y } from "./property-DGdAXcEz.js";
2
2
  var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, h = (t, r, o, a) => {
3
3
  for (var e = a > 1 ? void 0 : a ? d(r, o) : r, l = t.length - 1, s; l >= 0; l--)
4
4
  (s = t[l]) && (e = (a ? s(r, o, e) : s(e)) || e);
package/fhi-button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as u, n as i, a as s, x as b, t as v } from "./property-XFX9TijU.js";
1
+ import { i as u, n as i, a as s, b, t as v } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (r, e, a, c) => {
3
3
  for (var t = c > 1 ? void 0 : c ? h(e, a) : e, o = r.length - 1, d; o >= 0; o--)
4
4
  (d = r[o]) && (t = (c ? d(e, a, t) : d(t)) || t);
package/fhi-checkbox.js CHANGED
@@ -1,5 +1,5 @@
1
- import { i as b, n as a, a as v, x as s, t as k } from "./property-XFX9TijU.js";
2
- import { o as d } from "./if-defined-DNfpFw3g.js";
1
+ import { i as b, n as a, a as v, b as s, t as k } from "./property-DGdAXcEz.js";
2
+ import { o as d } from "./if-defined-BW6N1yuF.js";
3
3
  var p = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (r, t, i, h) => {
4
4
  for (var e = h > 1 ? void 0 : h ? u(t, i) : t, l = r.length - 1, n; l >= 0; l--)
5
5
  (n = r[l]) && (e = (h ? n(t, i, e) : n(e)) || e);
@@ -182,7 +182,8 @@ o.styles = b`
182
182
 
183
183
  :host([disabled]) {
184
184
  opacity: var(--opacity-disabled);
185
- * {
185
+ label,
186
+ input {
186
187
  cursor: not-allowed;
187
188
  }
188
189
 
package/fhi-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-checkbox.js","sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n --typography-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-font-weight: var(--fhi-typography-body-medium-font-weight);\n --typography-line-height: var(--fhi-typography-body-medium-line-height);\n --typography-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --color-text: var(--fhi-color-neutral-text-default);\n --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);\n --color-checkbox: var(--fhi-color-neutral-background-default);\n --color-checkbox-border: var(--fhi-color-neutral-border-default);\n --color-checkbox-hover: var(--fhi-color-accent-background-subtle);\n --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);\n --color-checkbox-border-active: var(--fhi-color-accent-border-strong);\n --color-checkbox-active: var(--fhi-color-accent-surface-default);\n --color-checkbox-checked: var(--fhi-color-neutral-base-default);\n --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);\n --color-checkbox-checked-active: var(--fhi-color-accent-base-active);\n --color-checkbox-error: var(--fhi-color-danger-background-default);\n --color-checkbox-border-error: var(--fhi-color-danger-border-default);\n --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);\n --color-checkbox-border-error-hover: var(\n --fhi-color-danger-border-strong\n );\n --color-checkbox-error-active: var(--fhi-color-danger-surface-default);\n --color-checkbox-error-checked: var(--fhi-color-danger-base-default);\n --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);\n --color-checkbox-checked-error-active: var(\n --fhi-color-danger-base-active\n );\n --color-checkbox-outline: var(--fhi-color-accent-surface-hover);\n --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);\n\n --dimension-checkbox-gap: var(--fhi-spacing-050);\n --dimension-checkbox-border-radius: var(--fhi-border-radius-050);\n --dimension-checkbox-border-width: var(--fhi-dimension-border-width);\n --dimension-checkbox-size: 1.125rem;\n --dimension-checkbox-margin: 3px;\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n --motion-checkbox-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--color-text);\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n font-size: var(--typography-font-size);\n font-weight: var(--typography-font-weight);\n line-height: var(--typography-line-height);\n letter-spacing: var(--typography-letter-spacing);\n gap: var(--dimension-checkbox-gap);\n }\n\n input[type='checkbox'] {\n margin: var(--dimension-checkbox-margin);\n appearance: none;\n width: var(--dimension-checkbox-size);\n height: var(--dimension-checkbox-size);\n background-color: var(--color-checkbox);\n border: var(--dimension-checkbox-border-width) solid\n var(--color-checkbox-border);\n border-radius: var(--dimension-checkbox-border-radius);\n transition: var(--motion-checkbox-transition);\n\n &:hover {\n background-color: var(--color-checkbox-hover);\n border-color: var(--color-checkbox-border-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-active);\n outline: solid 5px var(--color-checkbox-outline);\n border-color: var(--color-checkbox-border-active);\n }\n\n &:checked {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n ~ .checkmark {\n fill: var(--color-checkbox-checkmark);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--color-checkbox-checked-hover);\n border-color: var(--color-checkbox-checked-hover);\n }\n &:active {\n background-color: var(--color-checkbox-checked-active);\n border-color: var(--color-checkbox-checked-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-checkbox-transition);\n position: absolute;\n height: var(--dimension-checkbox-size);\n width: var(--dimension-checkbox-size);\n margin-left: var(--dimension-checkbox-margin);\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n * {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:active {\n outline: none;\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:checked:hover {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n\n &:checked:active {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--color-checkbox-error);\n border-color: var(--color-checkbox-border-error);\n\n &:hover {\n background-color: var(--color-checkbox-error-hover);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-error-active);\n outline: solid 5px var(--color-checkbox-outline-error);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:checked {\n background-color: var(--color-checkbox-error-checked);\n border-color: var(--color-checkbox-error-checked);\n &:hover {\n background-color: var(--color-checkbox-checked-error-hover);\n border-color: var(--color-checkbox-checked-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-checked-error-active);\n border-color: var(--color-checkbox-checked-error-active);\n }\n }\n }\n }\n `;\n}\n"],"names":["FhiCheckboxSelector","FhiCheckbox","LitElement","event","html","ifDefined","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAc5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EA8C1C,cAAc;AACZ,UAAA,GAtC0B,KAAA,QAAiB,QAMjB,KAAA,OAAgB,QAMhB,KAAA,QAAgB,MAcf,KAAA,UAAW,IAOI,KAAA,WAAY,IAMtD,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,iBAAA;AAAA,EACP;AAAA,EAEQ,cAAcC,GAAoB;AACxC,SAAK,UAAWA,EAAM,OAA4B,SAClD,KAAK,iBAAA,GAELA,EAAM,gBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,aAAaA,GAAoB;AACvC,IAAAA,EAAM,gBAAA,GACN,KAAK,oBAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAC/D;AAAA,EAEQ,uBAA6B;AAKnC,SAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAA,CAAM,CAAC;AAAA,EAC3D;AAAA,EAEQ,sBAA4B;AAKlC,SAAK,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC1E;AAAA,EAEO,oBAAoB;AACzB,SAAK,UAAU,IACf,KAAK,iBAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,kBAIOC,EAAU,KAAK,IAAI,CAAC;AAAA,mBACnBA,EAAU,KAAK,KAAK,CAAC;AAAA,sBAClB,KAAK,QAAQ;AAAA,qBACd,KAAK,OAAO;AAAA,oBACb,KAAK,aAAa;AAAA,mBACnB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc1B,KAAK,KAAK;AAAA;AAAA;AAAA,EAGlB;AAuLF;AAhTaJ,EAEK,iBAAiB;AAFtBA,EA2HJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAlHYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfP,EASiB,WAAA,SAAA,CAAA;AAMAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAffP,EAeiB,WAAA,QAAA,CAAA;AAMAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfP,EAqBiB,WAAA,SAAA,CAAA;AAQeM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7B9BP,EA6BgC,WAAA,UAAA,CAAA;AAMdM,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnChBP,EAmCkB,WAAA,WAAA,CAAA;AAOeM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BP,EA0CiC,WAAA,YAAA,CAAA;AA1CjCA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAmB;AAAA,GACrBC,CAAA;"}
1
+ {"version":3,"file":"fhi-checkbox.js","sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n --typography-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-font-weight: var(--fhi-typography-body-medium-font-weight);\n --typography-line-height: var(--fhi-typography-body-medium-line-height);\n --typography-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --color-text: var(--fhi-color-neutral-text-default);\n --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);\n --color-checkbox: var(--fhi-color-neutral-background-default);\n --color-checkbox-border: var(--fhi-color-neutral-border-default);\n --color-checkbox-hover: var(--fhi-color-accent-background-subtle);\n --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);\n --color-checkbox-border-active: var(--fhi-color-accent-border-strong);\n --color-checkbox-active: var(--fhi-color-accent-surface-default);\n --color-checkbox-checked: var(--fhi-color-neutral-base-default);\n --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);\n --color-checkbox-checked-active: var(--fhi-color-accent-base-active);\n --color-checkbox-error: var(--fhi-color-danger-background-default);\n --color-checkbox-border-error: var(--fhi-color-danger-border-default);\n --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);\n --color-checkbox-border-error-hover: var(\n --fhi-color-danger-border-strong\n );\n --color-checkbox-error-active: var(--fhi-color-danger-surface-default);\n --color-checkbox-error-checked: var(--fhi-color-danger-base-default);\n --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);\n --color-checkbox-checked-error-active: var(\n --fhi-color-danger-base-active\n );\n --color-checkbox-outline: var(--fhi-color-accent-surface-hover);\n --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);\n\n --dimension-checkbox-gap: var(--fhi-spacing-050);\n --dimension-checkbox-border-radius: var(--fhi-border-radius-050);\n --dimension-checkbox-border-width: var(--fhi-dimension-border-width);\n --dimension-checkbox-size: 1.125rem;\n --dimension-checkbox-margin: 3px;\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n --motion-checkbox-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--color-text);\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n font-size: var(--typography-font-size);\n font-weight: var(--typography-font-weight);\n line-height: var(--typography-line-height);\n letter-spacing: var(--typography-letter-spacing);\n gap: var(--dimension-checkbox-gap);\n }\n\n input[type='checkbox'] {\n margin: var(--dimension-checkbox-margin);\n appearance: none;\n width: var(--dimension-checkbox-size);\n height: var(--dimension-checkbox-size);\n background-color: var(--color-checkbox);\n border: var(--dimension-checkbox-border-width) solid\n var(--color-checkbox-border);\n border-radius: var(--dimension-checkbox-border-radius);\n transition: var(--motion-checkbox-transition);\n\n &:hover {\n background-color: var(--color-checkbox-hover);\n border-color: var(--color-checkbox-border-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-active);\n outline: solid 5px var(--color-checkbox-outline);\n border-color: var(--color-checkbox-border-active);\n }\n\n &:checked {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n ~ .checkmark {\n fill: var(--color-checkbox-checkmark);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--color-checkbox-checked-hover);\n border-color: var(--color-checkbox-checked-hover);\n }\n &:active {\n background-color: var(--color-checkbox-checked-active);\n border-color: var(--color-checkbox-checked-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-checkbox-transition);\n position: absolute;\n height: var(--dimension-checkbox-size);\n width: var(--dimension-checkbox-size);\n margin-left: var(--dimension-checkbox-margin);\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:active {\n outline: none;\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:checked:hover {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n\n &:checked:active {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--color-checkbox-error);\n border-color: var(--color-checkbox-border-error);\n\n &:hover {\n background-color: var(--color-checkbox-error-hover);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-error-active);\n outline: solid 5px var(--color-checkbox-outline-error);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:checked {\n background-color: var(--color-checkbox-error-checked);\n border-color: var(--color-checkbox-error-checked);\n &:hover {\n background-color: var(--color-checkbox-checked-error-hover);\n border-color: var(--color-checkbox-checked-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-checked-error-active);\n border-color: var(--color-checkbox-checked-error-active);\n }\n }\n }\n }\n `;\n}\n"],"names":["FhiCheckboxSelector","FhiCheckbox","LitElement","event","html","ifDefined","css","__decorateClass","property","customElement"],"mappings":"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"}
package/fhi-date-input.js CHANGED
@@ -1,12 +1,12 @@
1
- import { i as c, n as o, a as u, x as d, t as g } from "./property-XFX9TijU.js";
1
+ import { i as c, n as o, a as u, b as d, t as g } from "./property-DGdAXcEz.js";
2
2
  import { e as y } from "./query-NJDNu0-P.js";
3
- import { o as h } from "./if-defined-DNfpFw3g.js";
3
+ import { o as h } from "./if-defined-BW6N1yuF.js";
4
4
  import "./fhi-icon-calendar.js";
5
5
  const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
6
- var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, a, l, n) => {
7
- for (var i = n > 1 ? void 0 : n ? f(a, l) : a, s = t.length - 1, p; s >= 0; s--)
8
- (p = t[s]) && (i = (n ? p(a, l, i) : p(i)) || i);
9
- return n && i && b(a, l, i), i;
6
+ var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, i, l, n) => {
7
+ for (var a = n > 1 ? void 0 : n ? f(i, l) : i, s = t.length - 1, p; s >= 0; s--)
8
+ (p = t[s]) && (a = (n ? p(i, l, a) : p(a)) || a);
9
+ return n && a && b(i, l, a), a;
10
10
  };
11
11
  const m = "fhi-date-input";
12
12
  let e = class extends u {
@@ -17,15 +17,15 @@ let e = class extends u {
17
17
  return this._name;
18
18
  }
19
19
  set name(t) {
20
- const a = this._name;
21
- this._name = t, this.requestUpdate("name", a), this._internals.setFormValue(this.value ?? null);
20
+ const i = this._name;
21
+ this._name = t, this.requestUpdate("name", i), this._internals.setFormValue(this.value ?? null);
22
22
  }
23
23
  get value() {
24
24
  return this._value;
25
25
  }
26
26
  set value(t) {
27
- const a = this._value;
28
- this._value = t, this.requestUpdate("value", a), this._internals.setFormValue(this._value ?? null);
27
+ const i = this._value;
28
+ this._value = t, this.requestUpdate("value", i), this._internals.setFormValue(this._value ?? null);
29
29
  }
30
30
  connectedCallback() {
31
31
  super.connectedCallback(), this._internals.setFormValue(this.value ?? null);
@@ -41,8 +41,16 @@ let e = class extends u {
41
41
  })
42
42
  );
43
43
  }
44
- _handleInput() {
45
- this.value = this._input.value, this._internals.setFormValue(this.value ?? null);
44
+ _handleInput(t) {
45
+ this.value = this._input.value, this._internals.setFormValue(this.value ?? null), t.stopPropagation(), this._dispatchInputEvent();
46
+ }
47
+ _dispatchInputEvent() {
48
+ this.dispatchEvent(
49
+ new Event("input", {
50
+ bubbles: !0,
51
+ composed: !0
52
+ })
53
+ );
46
54
  }
47
55
  _handleKeyDown(t) {
48
56
  t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
package/fhi-date-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n\n --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n /* label */\n --color-label-text: var(--fhi-color-neutral-text-default);\n --color-label-text-error: var(--fhi-color-danger-text-default);\n\n --typography-label-font-family: var(--fhi-typography-label-small-font);\n --typography-label-font-weight: var(\n --fhi-typography-label-small-font-weight\n );\n --typography-label-font-size: var(--fhi-typography-label-small-size);\n --typography-label-line-height: var(\n --fhi-typography-label-small-line-height\n );\n --typography-label-letter-spacing: var(\n --fhi-typography-label-small-letter-spacing\n );\n\n --dimension-label-padding-bottom: var(--fhi-spacing-050);\n\n /* input */\n --color-input-text: var(--fhi-color-neutral-text-default);\n --color-input-text-error: var(--fhi-color-danger-text-default);\n --color-input-background: var(--fhi-color-neutral-background-default);\n --color-input-background-active: var(\n --fhi-color-accent-background-default\n );\n --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n --color-input-background-error: var(\n --fhi-color-danger-background-default\n );\n --color-input-border: var(--fhi-color-neutral-border-default);\n --color-input-border-hover: var(--fhi-color-accent-border-default);\n --color-input-border-active: var(--fhi-color-accent-border-strong);\n --color-input-border-error: var(--fhi-color-danger-border-strong);\n --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n --color-input-selection-background: var(\n --fhi-color-accent-surface-active\n );\n\n --typography-input-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-input-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-input-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n --dimension-input-height: var(--fhi-spacing-500);\n --dimension-input-border-radius: var(--fhi-border-radius-050);\n --dimension-input-padding-left: var(--fhi-spacing-150);\n --dimension-input-padding-right: var(--fhi-spacing-150);\n\n --motion-input-transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n /* icon */\n --dimension-icon-margin-right: var(--fhi-spacing-100);\n --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n /* message */\n --color-message-text: var(--fhi-color-neutral-text-default);\n --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n --typography-message-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-message-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-message-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-message-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n\n --dimension-message-margin-top: var(--fhi-spacing-050);\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n width: var(--dimension-width);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n padding-bottom: var(--dimension-label-padding-bottom);\n }\n\n input[type='date'] {\n font-family: var(--typography-font-family);\n font-weight: var(--typography-input-font-weight);\n font-size: var(--typography-input-font-size);\n line-height: var(--typography-input-line-height);\n letter-spacing: var(--typography-input-letter-spacing);\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n transition: var(--motion-input-transition);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n outline: none;\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n }\n .message {\n margin: var(--dimension-message-margin-top) 0 0 0;\n color: var(--color-message-text);\n font-weight: var(--typography-message-font-weight);\n font-size: var(--typography-message-font-size);\n line-height: var(--typography-message-line-height);\n letter-spacing: var(--typography-message-letter-spacing);\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--dimension-input-height);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--dimension-icon-margin-right);\n height: fit-content;\n transition: var(--motion-input-transition);\n border-radius: var(--dimension-icon-border-radius);\n &:focus {\n outline: solid var(--color-icon-focus-outline);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--dimension-input-border-width) solid\n var(--color-input-border);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input[type='date'] {\n border-color: var(--color-input-border-error);\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n .message {\n color: var(--color-message-text-error);\n }\n .date-icon {\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n\n --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n /* label */\n --color-label-text: var(--fhi-color-neutral-text-default);\n --color-label-text-error: var(--fhi-color-danger-text-default);\n\n --typography-label-font-family: var(--fhi-typography-label-small-font);\n --typography-label-font-weight: var(\n --fhi-typography-label-small-font-weight\n );\n --typography-label-font-size: var(--fhi-typography-label-small-size);\n --typography-label-line-height: var(\n --fhi-typography-label-small-line-height\n );\n --typography-label-letter-spacing: var(\n --fhi-typography-label-small-letter-spacing\n );\n\n --dimension-label-padding-bottom: var(--fhi-spacing-050);\n\n /* input */\n --color-input-text: var(--fhi-color-neutral-text-default);\n --color-input-text-error: var(--fhi-color-danger-text-default);\n --color-input-background: var(--fhi-color-neutral-background-default);\n --color-input-background-active: var(\n --fhi-color-accent-background-default\n );\n --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n --color-input-background-error: var(\n --fhi-color-danger-background-default\n );\n --color-input-border: var(--fhi-color-neutral-border-default);\n --color-input-border-hover: var(--fhi-color-accent-border-default);\n --color-input-border-active: var(--fhi-color-accent-border-strong);\n --color-input-border-error: var(--fhi-color-danger-border-strong);\n --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n --color-input-selection-background: var(\n --fhi-color-accent-surface-active\n );\n\n --typography-input-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-input-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-input-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n --dimension-input-height: var(--fhi-spacing-500);\n --dimension-input-border-radius: var(--fhi-border-radius-050);\n --dimension-input-padding-left: var(--fhi-spacing-150);\n --dimension-input-padding-right: var(--fhi-spacing-150);\n\n --motion-input-transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n /* icon */\n --dimension-icon-margin-right: var(--fhi-spacing-100);\n --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n /* message */\n --color-message-text: var(--fhi-color-neutral-text-default);\n --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n --typography-message-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-message-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-message-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-message-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n\n --dimension-message-margin-top: var(--fhi-spacing-050);\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n width: var(--dimension-width);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n padding-bottom: var(--dimension-label-padding-bottom);\n }\n\n input[type='date'] {\n font-family: var(--typography-font-family);\n font-weight: var(--typography-input-font-weight);\n font-size: var(--typography-input-font-size);\n line-height: var(--typography-input-line-height);\n letter-spacing: var(--typography-input-letter-spacing);\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n transition: var(--motion-input-transition);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n outline: none;\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n }\n .message {\n margin: var(--dimension-message-margin-top) 0 0 0;\n color: var(--color-message-text);\n font-weight: var(--typography-message-font-weight);\n font-size: var(--typography-message-font-size);\n line-height: var(--typography-message-line-height);\n letter-spacing: var(--typography-message-letter-spacing);\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--dimension-input-height);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--dimension-icon-margin-right);\n height: fit-content;\n transition: var(--motion-input-transition);\n border-radius: var(--dimension-icon-border-radius);\n &:focus {\n outline: solid var(--color-icon-focus-outline);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--dimension-input-border-width) solid\n var(--color-input-border);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input[type='date'] {\n border-color: var(--color-input-border-error);\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n .message {\n color: var(--color-message-text-error);\n }\n .date-icon {\n background-color: var(--color-input-background-error);\n color: var(--color-input-text-error);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
package/fhi-display.js CHANGED
@@ -1,5 +1,5 @@
1
- import { i as n, n as p, a as g, x as y, t as f } from "./property-XFX9TijU.js";
2
- import { o as m } from "./unsafe-html-BD5OG__c.js";
1
+ import { i as n, n as p, a as g, b as y, t as f } from "./property-DGdAXcEz.js";
2
+ import { o as m } from "./unsafe-html-lUureUEN.js";
3
3
  var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, l, s, a) => {
4
4
  for (var t = a > 1 ? void 0 : a ? v(l, s) : l, o = e.length - 1, h; o >= 0; o--)
5
5
  (h = e[o]) && (t = (a ? h(l, s, t) : h(t)) || t);
package/fhi-flex.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as g, n, a as h, x as m, t as c } from "./property-XFX9TijU.js";
1
+ import { i as g, n, a as h, b as m, t as c } from "./property-DGdAXcEz.js";
2
2
  var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, a, r, o) => {
3
3
  for (var e = o > 1 ? void 0 : o ? f(a, r) : a, p = s.length - 1, l; p >= 0; p--)
4
4
  (l = s[p]) && (e = (o ? l(a, r, e) : l(e)) || e);
package/fhi-grid.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as n, n as l, a as o, x as d, t as u } from "./property-XFX9TijU.js";
1
+ import { i as n, n as l, a as o, b as d, t as u } from "./property-DGdAXcEz.js";
2
2
  var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, m = (a, i, t, r) => {
3
3
  for (var s = r > 1 ? void 0 : r ? c(i, t) : i, p = a.length - 1, g; p >= 0; p--)
4
4
  (g = a[p]) && (s = (r ? g(i, t, s) : g(s)) || s);
package/fhi-headline.js CHANGED
@@ -1,5 +1,5 @@
1
- import { i as g, n as s, a as p, x as f, t as m } from "./property-XFX9TijU.js";
2
- import { o as d } from "./unsafe-html-BD5OG__c.js";
1
+ import { i as g, n as s, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
2
+ import { o as d } from "./unsafe-html-lUureUEN.js";
3
3
  var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, l, h, a) => {
4
4
  for (var t = a > 1 ? void 0 : a ? v(l, h) : l, n = e.length - 1, o; n >= 0; n--)
5
5
  (o = e[n]) && (t = (a ? o(l, h, t) : o(t)) || t);
package/fhi-icon-arrow-down-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var w = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (a, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? f(r, s) : r, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-down-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? w(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-down.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(t, s) : t, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(t, s, e) : o(e)) || e);
package/fhi-icon-arrow-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (a, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-right-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (a, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? f(r, s) : r, n = a.length - 1, l; n >= 0; n--)
4
4
  (l = a[n]) && (e = (i ? l(r, s, e) : l(e)) || e);
package/fhi-icon-arrow-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? w(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-up-down.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(t, s) : t, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(t, s, e) : o(e)) || e);
package/fhi-icon-arrow-up-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (h, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, n = h.length - 1, o; n >= 0; n--)
4
4
  (o = h[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-up-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? z(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-arrow-up.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? w(t, s) : t, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(t, s, e) : o(e)) || e);
package/fhi-icon-bell.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (o, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? z(r, s) : r, l = o.length - 1, n; l >= 0; l--)
4
4
  (n = o[l]) && (e = (i ? n(r, s, e) : n(e)) || e);
package/fhi-icon-calendar-clock.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (o, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, a = o.length - 1, n; a >= 0; a--)
4
4
  (n = o[a]) && (e = (i ? n(r, s, e) : n(e)) || e);
package/fhi-icon-calendar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as l, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as l, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var z = Object.defineProperty, g = Object.getOwnPropertyDescriptor, h = (o, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, n = o.length - 1, a; n >= 0; n--)
4
4
  (a = o[n]) && (e = (i ? a(r, s, e) : a(e)) || e);
package/fhi-icon-chart-bar-stacked.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as l, n as o, a as m, x as v, t as u } from "./property-XFX9TijU.js";
1
+ import { i as l, n as o, a as m, b as v, t as u } from "./property-DGdAXcEz.js";
2
2
  var z = Object.defineProperty, p = Object.getOwnPropertyDescriptor, h = (c, r, i, s) => {
3
3
  for (var e = s > 1 ? void 0 : s ? p(r, i) : r, a = c.length - 1, n; a >= 0; a--)
4
4
  (n = c[a]) && (e = (s ? n(r, i, e) : n(e)) || e);
package/fhi-icon-chart-bar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as l, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as l, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var z = Object.defineProperty, g = Object.getOwnPropertyDescriptor, h = (o, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, a = o.length - 1, n; a >= 0; a--)
4
4
  (n = o[a]) && (e = (i ? n(r, s, e) : n(e)) || e);
package/fhi-icon-chart-column-stacked.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as l, n as o, a as m, x as u, t as z } from "./property-XFX9TijU.js";
1
+ import { i as l, n as o, a as m, b as u, t as z } from "./property-DGdAXcEz.js";
2
2
  var p = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (c, r, i, s) => {
3
3
  for (var e = s > 1 ? void 0 : s ? v(r, i) : r, n = c.length - 1, a; n >= 0; n--)
4
4
  (a = c[n]) && (e = (s ? a(r, i, e) : a(e)) || e);
package/fhi-icon-chart-column.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as m, n as l, a as c, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as m, n as l, a as c, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, n = h.length - 1, a; n >= 0; n--)
4
4
  (a = h[n]) && (e = (i ? a(r, s, e) : a(e)) || e);
package/fhi-icon-chart-line.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as o, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as o, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? z(r, s) : r, n = l.length - 1, a; n >= 0; n--)
4
4
  (a = l[n]) && (e = (i ? a(r, s, e) : a(e)) || e);
package/fhi-icon-chart-no-axes-combined.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as m, n as l, a as c, x as v, t as u } from "./property-XFX9TijU.js";
1
+ import { i as m, n as l, a as c, b as v, t as u } from "./property-DGdAXcEz.js";
2
2
  var p = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, a = h.length - 1, n; a >= 0; a--)
4
4
  (n = h[a]) && (e = (i ? n(r, s, e) : n(e)) || e);
package/fhi-icon-chart-pie.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as l, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as l, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (o, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? z(r, s) : r, n = o.length - 1, a; n >= 0; n--)
4
4
  (a = o[n]) && (e = (i ? a(r, s, e) : a(e)) || e);
package/fhi-icon-check.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as a, n as c, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as a, n as c, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? z(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevron-down.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? v(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevron-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevron-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? v(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevron-up.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (h, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? v(r, s) : r, n = h.length - 1, o; n >= 0; n--)
4
4
  (o = h[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevrons-down.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var z = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (h, r, i, s) => {
3
3
  for (var e = s > 1 ? void 0 : s ? g(r, i) : r, n = h.length - 1, o; n >= 0; n--)
4
4
  (o = h[n]) && (e = (s ? o(r, i, e) : o(e)) || e);
package/fhi-icon-chevrons-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var f = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (h, r, i, s) => {
3
3
  for (var e = s > 1 ? void 0 : s ? z(r, i) : r, n = h.length - 1, l; n >= 0; n--)
4
4
  (l = h[n]) && (e = (s ? l(r, i, e) : l(e)) || e);
package/fhi-icon-chevrons-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (l, r, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? v(r, s) : r, n = l.length - 1, o; n >= 0; n--)
4
4
  (o = l[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
package/fhi-icon-chevrons-up.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var z = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, r, i, s) => {
3
3
  for (var e = s > 1 ? void 0 : s ? g(r, i) : r, n = h.length - 1, l; n >= 0; n--)
4
4
  (l = h[n]) && (e = (s ? l(r, i, e) : l(e)) || e);
package/fhi-icon-circle-arrow-down.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as h, n as c, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as h, n as c, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(t, s) : t, n = a.length - 1, o; n >= 0; n--)
4
4
  (o = a[n]) && (e = (i ? o(t, s, e) : o(e)) || e);
package/fhi-icon-circle-arrow-left.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as h, n as c, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as h, n as c, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? g(t, s) : t, n = a.length - 1, l; n >= 0; n--)
4
4
  (l = a[n]) && (e = (i ? l(t, s, e) : l(e)) || e);
package/fhi-icon-circle-arrow-right.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as c, n as a, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as c, n as a, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (h, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? w(t, s) : t, n = h.length - 1, l; n >= 0; n--)
4
4
  (l = h[n]) && (e = (i ? l(t, s, e) : l(e)) || e);
package/fhi-icon-circle-arrow-up.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as h, n as c, a as m, x as p, t as u } from "./property-XFX9TijU.js";
1
+ import { i as h, n as c, a as m, b as p, t as u } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (a, t, s, i) => {
3
3
  for (var e = i > 1 ? void 0 : i ? w(t, s) : t, n = a.length - 1, l; n >= 0; n--)
4
4
  (l = a[n]) && (e = (i ? l(t, s, e) : l(e)) || e);
package/fhi-icon-circle-check-big.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as a, n as h, a as m, x as u, t as p } from "./property-XFX9TijU.js";
1
+ import { i as a, n as h, a as m, b as u, t as p } from "./property-DGdAXcEz.js";
2
2
  var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, c = (o, i, s, r) => {
3
3
  for (var e = r > 1 ? void 0 : r ? z(i, s) : i, l = o.length - 1, n; l >= 0; l--)
4
4
  (n = o[l]) && (e = (r ? n(i, s, e) : n(e)) || e);