@folkehelseinstituttet/designsystem 0.38.0 → 0.38.1

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 (6) hide show
  1. package/fhi-date-input.js +122 -234
  2. package/fhi-date-input.js.map +1 -1
  3. package/fhi-text-input.js +86 -177
  4. package/fhi-text-input.js.map +1 -1
  5. package/package.json +1 -1
  6. package/web-types.json +1 -1
package/fhi-date-input.js CHANGED
@@ -1,31 +1,31 @@
1
- import { i as c, n as o, a as u, b as l, t as g } from "./property-B2Ico5CW.js";
2
- import { e as y } from "./query-Ddbd72Um.js";
3
- import { o as d } from "./if-defined-B_sR6Mtk.js";
1
+ import { i as c, n as r, a as u, b as l, t as f } from "./property-B2Ico5CW.js";
2
+ import { e as g } from "./query-Ddbd72Um.js";
3
+ import { o as p } from "./if-defined-B_sR6Mtk.js";
4
4
  import "./fhi-icon-calendar.js";
5
5
  const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
6
- var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, a, p, n) => {
7
- for (var i = n > 1 ? void 0 : n ? m(a, p) : a, s = t.length - 1, h; s >= 0; s--)
8
- (h = t[s]) && (i = (n ? h(a, p, i) : h(i)) || i);
9
- return n && i && f(a, p, i), i;
6
+ var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, i, s, n) => {
7
+ for (var o = n > 1 ? void 0 : n ? y(i, s) : i, h = e.length - 1, d; h >= 0; h--)
8
+ (d = e[h]) && (o = (n ? d(i, s, o) : d(o)) || o);
9
+ return n && o && b(i, s, o), o;
10
10
  };
11
- const b = "fhi-date-input";
12
- let e = class extends u {
11
+ const m = "fhi-date-input";
12
+ let t = class extends u {
13
13
  constructor() {
14
14
  super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.min = void 0, this.max = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
15
15
  }
16
16
  get name() {
17
17
  return this._name;
18
18
  }
19
- set name(t) {
20
- const a = this._name;
21
- this._name = t, this.requestUpdate("name", a), this._internals.setFormValue(this.value ?? null);
19
+ set name(e) {
20
+ const i = this._name;
21
+ this._name = e, this.requestUpdate("name", i), this._internals.setFormValue(this.value ?? null);
22
22
  }
23
23
  get value() {
24
24
  return this._value;
25
25
  }
26
- set value(t) {
27
- const a = this._value;
28
- this._value = t, this.requestUpdate("value", a), this._internals.setFormValue(this._value ?? null);
26
+ set value(e) {
27
+ const i = this._value;
28
+ this._value = e, 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,8 @@ let e = class extends u {
41
41
  })
42
42
  );
43
43
  }
44
- _handleInput(t) {
45
- this.value = this._input.value, this._internals.setFormValue(this.value ?? null), t.stopPropagation(), this._dispatchInputEvent();
44
+ _handleInput(e) {
45
+ this.value = this._input.value, this._internals.setFormValue(this.value ?? null), e.stopPropagation(), this._dispatchInputEvent();
46
46
  }
47
47
  _dispatchInputEvent() {
48
48
  this.dispatchEvent(
@@ -52,14 +52,14 @@ let e = class extends u {
52
52
  })
53
53
  );
54
54
  }
55
- _handleKeyDown(t) {
56
- t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
55
+ _handleKeyDown(e) {
56
+ e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
57
57
  }
58
58
  formResetCallback() {
59
59
  this.value = this.getAttribute("value"), this._internals.setFormValue(this.value ?? null);
60
60
  }
61
- _showDate(t) {
62
- t && t.type == "keydown" && t.key !== "Enter" && t.code !== "Space" || this._input.showPicker();
61
+ _showDate(e) {
62
+ e && e.type == "keydown" && e.key !== "Enter" && e.code !== "Space" || this._input.showPicker();
63
63
  }
64
64
  render() {
65
65
  return l`
@@ -69,9 +69,9 @@ let e = class extends u {
69
69
  <input
70
70
  type="date"
71
71
  id="input-element"
72
- name=${d(this.name)}
73
- min=${d(this.min)}
74
- max=${d(this.max)}
72
+ name=${p(this.name)}
73
+ min=${p(this.min)}
74
+ max=${p(this.max)}
75
75
  .value=${this.value ?? ""}
76
76
  ?readonly=${this.readonly}
77
77
  ?disabled=${this.disabled}
@@ -94,186 +94,73 @@ let e = class extends u {
94
94
  `;
95
95
  }
96
96
  };
97
- e.formAssociated = !0;
98
- e.styles = c`
99
- :host {
100
- --typography-font-family: var(--fhi-font-family-default);
101
-
102
- --opacity-disabled: var(--fhi-opacity-disabled);
103
-
104
- --dimension-width: calc(var(--fhi-spacing-1000) * 2);
105
-
106
- /* label */
107
- --color-label-text: var(--fhi-color-neutral-text-default);
108
- --color-label-text-error: var(--fhi-color-danger-text-default);
109
-
110
- --typography-label-font-family: var(--fhi-typography-label-small-font);
111
- --typography-label-font-weight: var(
112
- --fhi-typography-label-small-font-weight
113
- );
114
- --typography-label-font-size: var(--fhi-typography-label-small-font-size);
115
- --typography-label-line-height: var(
116
- --fhi-typography-label-small-line-height
117
- );
118
- --typography-label-letter-spacing: var(
119
- --fhi-typography-label-small-letter-spacing
120
- );
121
- --dimension-label-margin-bottom: var(--fhi-spacing-050);
122
-
123
- /* input */
124
- --color-input-text: var(--fhi-color-neutral-text-default);
125
- --color-input-text-error: var(--fhi-color-danger-text-default);
126
- --color-input-background: var(--fhi-color-neutral-background-default);
127
- --color-input-background-active: var(
128
- --fhi-color-accent-background-default
129
- );
130
- --color-input-background-hover: var(--fhi-color-accent-background-subtle);
131
- --color-input-background-error: var(
132
- --fhi-color-danger-background-default
133
- );
134
- --color-input-border: var(--fhi-color-neutral-border-default);
135
- --color-input-border-hover: var(--fhi-color-accent-border-default);
136
- --color-input-border-active: var(--fhi-color-accent-border-strong);
137
- --color-input-border-error: var(--fhi-color-danger-border-strong);
138
- --color-input-border-disabled: var(--fhi-color-neutral-border-default);
139
- --color-input-selection-background: var(
140
- --fhi-color-accent-surface-active
141
- );
142
-
143
- --typography-input-font-weight: var(
144
- --fhi-typography-body-medium-font-weight
145
- );
146
- --typography-input-font-size: var(--fhi-typography-body-medium-font-size);
147
- --typography-input-line-height: var(
148
- --fhi-typography-body-medium-line-height
149
- );
150
- --typography-input-letter-spacing: var(
151
- --fhi-typography-body-medium-letter-spacing
152
- );
153
-
154
- --dimension-input-border-width: var(--fhi-dimension-border-width);
155
-
156
- --dimension-input-height: var(--fhi-spacing-500);
157
- --dimension-input-border-radius: var(--fhi-border-radius-050);
158
- --dimension-input-padding-left: var(--fhi-spacing-150);
159
- --dimension-input-padding-right: var(--fhi-spacing-150);
160
-
161
- --motion-input-transition: all var(--fhi-motion-ease-default)
162
- var(--fhi-motion-duration-quick);
163
-
164
- /* icon */
165
- --dimension-icon-margin-right: var(--fhi-spacing-100);
166
- --dimension-icon-padding-left: var(--fhi-spacing-050);
167
-
168
- --color-icon-focus-outline: var(--fhi-color-accent-border-default);
169
-
170
- --dimension-icon-border-radius: var(--fhi-border-radius-050);
171
-
172
- /* message */
173
- --color-message-text: var(--fhi-color-neutral-text-default);
174
- --color-message-text-error: var(--fhi-color-danger-text-subtle);
175
-
176
- --typography-message-font-weight: var(
177
- --fhi-typography-body-small-font-weight
178
- );
179
- --typography-message-font-size: var(
180
- --fhi-typography-body-small-font-size
181
- );
182
- --typography-message-line-height: var(
183
- --fhi-typography-body-small-line-height
184
- );
185
- --typography-message-letter-spacing: var(
186
- --fhi-typography-body-small-letter-spacing
187
- );
188
-
189
- --dimension-message-margin-top: var(--fhi-spacing-050);
190
-
191
- /* help-text */
192
- --color-help-text-text: var(--fhi-color-neutral-text-subtle);
193
- --color-help-text-text-error: var(--fhi-color-danger-text-default);
194
-
195
- --typography-help-text-font-weight: var(
196
- --fhi-typography-body-small-font-weight
197
- );
198
- --typography-help-text-font-size: var(
199
- --fhi-typography-body-small-font-size
200
- );
201
- --typography-help-text-line-height: var(
202
- --fhi-typography-body-small-line-height
203
- );
204
- --typography-help-text-letter-spacing: var(
205
- --fhi-typography-body-small-letter-spacing
206
- );
207
- --dimension-help-text-margin-bottom: var(--fhi-spacing-050);
208
- }
209
-
97
+ t.formAssociated = !0;
98
+ t.styles = c`
210
99
  :host {
211
100
  display: flex;
212
101
  flex-direction: column;
213
- font-family: var(--typography-font-family);
102
+ font-family: var(--fhi-font-family-default);
214
103
  -webkit-font-smoothing: antialiased;
215
- width: var(--dimension-width);
104
+ width: calc(var(--fhi-spacing-1000) * 2);
216
105
 
217
106
  label {
218
- font-weight: var(--typography-label-font-weight);
219
- font-size: var(--typography-label-font-size);
220
- line-height: var(--typography-label-line-height);
221
- letter-spacing: var(--typography-label-letter-spacing);
222
- color: var(--color-label-text);
223
- margin: 0 0 var(--dimension-label-margin-bottom) 0;
107
+ font-weight: var(--fhi-typography-label-small-font-weight);
108
+ font-size: var(--fhi-typography-label-small-font-size);
109
+ line-height: var(--fhi-typography-label-small-line-height);
110
+ letter-spacing: var(--fhi-typography-label-small-letter-spacing);
111
+ color: var(--fhi-color-neutral-text-default);
112
+ margin: 0 0 var(--fhi-spacing-050) 0;
224
113
  }
225
114
  label:has(+ p) {
226
115
  margin: 0 0 0 0;
227
116
  }
228
117
 
229
118
  input[type='date'] {
230
- font-family: var(--typography-font-family);
231
- font-weight: var(--typography-input-font-weight);
232
- font-size: var(--typography-input-font-size);
233
- line-height: var(--typography-input-line-height);
234
- letter-spacing: var(--typography-input-letter-spacing);
119
+ font-family: var(--fhi-font-family-default);
120
+ font-weight: var(--fhi-typography-body-medium-font-weight);
121
+ font-size: var(--fhi-typography-body-medium-font-size);
122
+ line-height: var(--fhi-typography-body-medium-line-height);
123
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
235
124
  box-sizing: border-box;
236
- height: var(--dimension-input-height);
237
- border: var(--dimension-input-border-width) solid
238
- var(--color-input-border);
239
- border-radius: var(--dimension-input-border-radius);
240
- padding: 0 var(--dimension-input-padding-right) 0
241
- var(--dimension-input-padding-left);
242
- margin-top: var(--dimension-input-margin-top);
243
- color: var(--color-input-text);
244
- background-color: var(--color-input-background);
245
- transition: var(--motion-input-transition);
125
+ height: var(--fhi-spacing-500);
126
+ border: var(--fhi-dimension-border-width) solid
127
+ var(--fhi-color-neutral-border-default);
128
+ border-radius: var(--fhi-border-radius-050);
129
+ padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);
130
+
131
+ color: var(--fhi-color-neutral-text-default);
132
+ background-color: var(--fhi-color-neutral-background-default);
133
+ transition: all var(--fhi-motion-ease-default)
134
+ var(--fhi-motion-duration-quick);
246
135
  appearance: none;
247
136
  -moz-appearance: none;
248
137
  -webkit-appearance: none;
249
138
  width: 100%;
250
139
  &:hover {
251
- border-color: var(--color-input-border-hover);
252
- background-color: var(--color-input-background-hover);
140
+ border-color: var(--fhi-color-accent-border-default);
141
+ background-color: var(--fhi-color-accent-background-subtle);
253
142
  }
254
143
  &:focus {
255
- outline: none;
256
- border-color: var(--color-input-border-active);
257
- background-color: var(--color-input-background-active);
144
+ border-color: var(--fhi-color-accent-border-strong);
145
+ background-color: var(--fhi-color-accent-background-default);
258
146
  }
259
147
  }
260
148
  .message {
261
- margin: var(--dimension-message-margin-top) 0 0 0;
262
- color: var(--color-message-text);
263
- font-weight: var(--typography-message-font-weight);
264
- font-size: var(--typography-message-font-size);
265
- line-height: var(--typography-message-line-height);
266
- letter-spacing: var(--typography-message-letter-spacing);
149
+ margin: var(--fhi-spacing-050) 0 0 0;
150
+ color: var(--fhi-color-neutral-text-default);
151
+ font-weight: var(--fhi-typography-body-small-font-weight);
152
+ font-size: var(--fhi-typography-body-small-font-size);
153
+ line-height: var(--fhi-typography-body-small-line-height);
154
+ letter-spacing: var(--fhi-typography-body-small-letter-spacing);
267
155
  }
268
156
 
269
157
  .help-text {
270
- margin: var(--dimension-help-text-margin-top) 0 0 0;
271
- color: var(--color-help-text-text);
272
- font-weight: var(--typography-help-text-font-weight);
273
- font-size: var(--typography-help-text-font-size);
274
- line-height: var(--typography-help-text-line-height);
275
- letter-spacing: var(--typography-help-text-letter-spacing);
276
- margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
158
+ color: var(--fhi-color-neutral-text-subtle);
159
+ font-weight: var(--fhi-typography-body-small-font-weight);
160
+ font-size: var(--fhi-typography-body-small-font-size);
161
+ line-height: var(--fhi-typography-body-small-line-height);
162
+ letter-spacing: var(--fhi-typography-body-small-letter-spacing);
163
+ margin: 0 0 var(--fhi-spacing-050) 0;
277
164
  }
278
165
  [type='date']::-webkit-inner-spin-button {
279
166
  opacity: 0;
@@ -290,7 +177,7 @@ e.styles = c`
290
177
  }
291
178
  }
292
179
  .input-container {
293
- height: var(--dimension-input-height);
180
+ height: var(--fhi-spacing-500);
294
181
  position: relative;
295
182
  }
296
183
  .date-icon {
@@ -298,26 +185,27 @@ e.styles = c`
298
185
  right: 0;
299
186
  top: 50%;
300
187
  transform: translateY(-50%);
301
- margin-right: var(--dimension-icon-margin-right);
188
+ margin-right: var(--fhi-spacing-100);
302
189
  height: fit-content;
303
- transition: var(--motion-input-transition);
304
- border-radius: var(--dimension-icon-border-radius);
190
+ transition: all var(--fhi-motion-ease-default)
191
+ var(--fhi-motion-duration-quick);
192
+ border-radius: var(--fhi-border-radius-050);
305
193
  &:focus {
306
- outline: solid var(--color-icon-focus-outline);
194
+ outline: solid var(--fhi-color-accent-border-default);
307
195
  }
308
196
  }
309
197
  }
310
198
 
311
199
  :host([disabled]) {
312
- opacity: var(--opacity-disabled);
200
+ opacity: var(--fhi-opacity-disabled);
313
201
  cursor: not-allowed;
314
202
  * {
315
203
  cursor: not-allowed;
316
204
  }
317
205
  input[type='date'] {
318
206
  &:hover {
319
- border-color: var(--color-input-border);
320
- background-color: var(--color-input-background);
207
+ border-color: var(--fhi-color-neutral-border-default);
208
+ background-color: var(--fhi-color-neutral-background-default);
321
209
  }
322
210
  }
323
211
  .date-icon {
@@ -333,8 +221,8 @@ e.styles = c`
333
221
  border: unset;
334
222
  border-radius: unset;
335
223
  background-color: unset;
336
- border-left: var(--dimension-input-border-width) solid
337
- var(--color-input-border);
224
+ border-left: var(--fhi-dimension-border-width) solid
225
+ var(--fhi-color-neutral-border-default);
338
226
  &:hover + .date-icon {
339
227
  background-color: unset;
340
228
  }
@@ -347,22 +235,22 @@ e.styles = c`
347
235
 
348
236
  :host([status='error']:not([disabled]):not([readonly])) {
349
237
  label {
350
- color: var(--color-label-text-error);
238
+ color: var(--fhi-color-danger-text-default);
351
239
  }
352
240
  input[type='date'] {
353
- border-color: var(--color-input-border-error);
354
- background-color: var(--color-input-background-error);
355
- color: var(--color-input-text-error);
241
+ border-color: var(--fhi-color-danger-border-strong);
242
+ background-color: var(--fhi-color-danger-background-default);
243
+ color: var(--fhi-color-danger-text-default);
356
244
  }
357
245
  .message {
358
- color: var(--color-message-text-error);
246
+ color: var(--fhi-color-danger-text-subtle);
359
247
  }
360
248
  .help-text {
361
- color: var(--color-help-text-text-error);
249
+ color: var(--fhi-color-danger-text-default);
362
250
  }
363
251
  .date-icon {
364
- background-color: var(--color-input-background-error);
365
- color: var(--color-input-text-error);
252
+ background-color: var(--fhi-color-danger-background-default);
253
+ color: var(--fhi-color-danger-text-default);
366
254
  }
367
255
  }
368
256
 
@@ -375,44 +263,44 @@ e.styles = c`
375
263
  }
376
264
  }
377
265
  `;
378
- r([
379
- o({ type: String })
380
- ], e.prototype, "label", 2);
381
- r([
382
- o({ type: String })
383
- ], e.prototype, "message", 2);
384
- r([
385
- o({ type: String, attribute: "help-text" })
386
- ], e.prototype, "helpText", 2);
387
- r([
388
- o({ type: String })
389
- ], e.prototype, "min", 2);
390
- r([
391
- o({ type: String })
392
- ], e.prototype, "max", 2);
393
- r([
394
- o({ type: String, reflect: !0 })
395
- ], e.prototype, "status", 2);
396
- r([
397
- o({ type: Boolean, reflect: !0 })
398
- ], e.prototype, "readonly", 2);
399
- r([
400
- o({ type: Boolean, reflect: !0 })
401
- ], e.prototype, "disabled", 2);
402
- r([
403
- y("#input-element")
404
- ], e.prototype, "_input", 2);
405
- r([
406
- o({ type: String, reflect: !0 })
407
- ], e.prototype, "name", 1);
408
- r([
409
- o({ type: String })
410
- ], e.prototype, "value", 1);
411
- e = r([
412
- g(b)
413
- ], e);
266
+ a([
267
+ r({ type: String })
268
+ ], t.prototype, "label", 2);
269
+ a([
270
+ r({ type: String })
271
+ ], t.prototype, "message", 2);
272
+ a([
273
+ r({ type: String, attribute: "help-text" })
274
+ ], t.prototype, "helpText", 2);
275
+ a([
276
+ r({ type: String })
277
+ ], t.prototype, "min", 2);
278
+ a([
279
+ r({ type: String })
280
+ ], t.prototype, "max", 2);
281
+ a([
282
+ r({ type: String, reflect: !0 })
283
+ ], t.prototype, "status", 2);
284
+ a([
285
+ r({ type: Boolean, reflect: !0 })
286
+ ], t.prototype, "readonly", 2);
287
+ a([
288
+ r({ type: Boolean, reflect: !0 })
289
+ ], t.prototype, "disabled", 2);
290
+ a([
291
+ g("#input-element")
292
+ ], t.prototype, "_input", 2);
293
+ a([
294
+ r({ type: String, reflect: !0 })
295
+ ], t.prototype, "name", 1);
296
+ a([
297
+ r({ type: String })
298
+ ], t.prototype, "value", 1);
299
+ t = a([
300
+ f(m)
301
+ ], t);
414
302
  export {
415
- e as FhiDateInput,
416
- b as FhiDateInputSelector
303
+ t as FhiDateInput,
304
+ m as FhiDateInputSelector
417
305
  };
418
306
  //# sourceMappingURL=fhi-date-input.js.map
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 */\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 * The help-text shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n 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 ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\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-font-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 --dimension-label-margin-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 /* help-text */\n --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n --color-help-text-text-error: var(--fhi-color-danger-text-default);\n\n --typography-help-text-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-help-text-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-help-text-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-help-text-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n --dimension-help-text-margin-bottom: 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 margin: 0 0 var(--dimension-label-margin-bottom) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\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 margin-top: var(--dimension-input-margin-top);\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\n .help-text {\n margin: var(--dimension-help-text-margin-top) 0 0 0;\n color: var(--color-help-text-text);\n font-weight: var(--typography-help-text-font-weight);\n font-size: var(--typography-help-text-font-size);\n line-height: var(--typography-help-text-line-height);\n letter-spacing: var(--typography-help-text-letter-spacing);\n margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\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 .help-text {\n color: var(--color-help-text-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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A;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;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;AA/MYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfX,EASiB,WAAA,SAAA,CAAA;AAOAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfX,EAgBiB,WAAA,WAAA,CAAA;AAOwBU,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvBvCX,EAuByC,WAAA,YAAA,CAAA;AAOxBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9BfX,EA8BiB,WAAA,OAAA,CAAA;AAMAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfX,EAoCiB,WAAA,OAAA,CAAA;AASeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7C9BX,EA6CgC,WAAA,UAAA,CAAA;AAOCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BX,EA2DiC,WAAA,YAAA,CAAA;AAGpCU,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA7DZZ,EA8DH,WAAA,UAAA,CAAA;AAcJU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BX,EA4EP,WAAA,QAAA,CAAA;AAwBAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfX,EAoGP,WAAA,SAAA,CAAA;AApGOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;"}
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 */\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 * The help-text shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n 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 ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\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 display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n width: calc(var(--fhi-spacing-1000) * 2);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n box-sizing: border-box;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n }\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\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(--fhi-spacing-500);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--fhi-spacing-100);\n height: fit-content;\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n border-radius: var(--fhi-border-radius-050);\n &:focus {\n outline: solid var(--fhi-color-accent-border-default);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\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(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\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(--fhi-color-danger-text-default);\n }\n input[type='date'] {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n .date-icon {\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\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-text-input.js CHANGED
@@ -1,13 +1,13 @@
1
- import { i as c, n as a, a as g, b as s, t as u } from "./property-B2Ico5CW.js";
2
- import { e as y } from "./query-Ddbd72Um.js";
3
- import { o as d } from "./if-defined-B_sR6Mtk.js";
4
- var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
5
- for (var n = l > 1 ? void 0 : l ? f(e, i) : e, p = t.length - 1, h; p >= 0; p--)
6
- (h = t[p]) && (n = (l ? h(e, i, n) : h(n)) || n);
7
- return l && n && v(e, i, n), n;
1
+ import { i as c, n as r, a as u, b as s, t as f } from "./property-B2Ico5CW.js";
2
+ import { e as g } from "./query-Ddbd72Um.js";
3
+ import { o as p } from "./if-defined-B_sR6Mtk.js";
4
+ var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, i, n) => {
5
+ for (var l = n > 1 ? void 0 : n ? b(e, i) : e, h = t.length - 1, d; h >= 0; h--)
6
+ (d = t[h]) && (l = (n ? d(e, i, l) : d(l)) || l);
7
+ return n && l && v(e, i, l), l;
8
8
  };
9
- const b = "fhi-text-input";
10
- let o = class extends g {
9
+ const y = "fhi-text-input";
10
+ let o = class extends u {
11
11
  constructor() {
12
12
  super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.placeholder = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
13
13
  }
@@ -83,8 +83,8 @@ let o = class extends g {
83
83
  <div class="input-container">
84
84
  <input
85
85
  id="input-element"
86
- name=${d(this.name)}
87
- placeholder=${d(this.placeholder)}
86
+ name=${p(this.name)}
87
+ placeholder=${p(this.placeholder)}
88
88
  .value=${this.value}
89
89
  ?readonly=${this.readonly}
90
90
  ?disabled=${this.disabled}
@@ -102,115 +102,24 @@ let o = class extends g {
102
102
  o.formAssociated = !0;
103
103
  o.styles = c`
104
104
  :host {
105
- --typography-font-family: var(--fhi-font-family-default);
106
-
107
- --opacity-disabled: var(--fhi-opacity-disabled);
108
-
109
- /* label */
110
- --color-label-text: var(--fhi-color-neutral-text-default);
111
- --color-label-text-error: var(--fhi-color-danger-text-default);
112
-
113
- --typography-label-font-weight: var(
114
- --fhi-typography-label-small-font-weight
115
- );
116
- --typography-label-font-size: var(--fhi-typography-label-small-font-size);
117
- --typography-label-line-height: var(
118
- --fhi-typography-label-small-line-height
119
- );
120
- --typography-label-letter-spacing: var(
121
- --fhi-typography-label-small-letter-spacing
122
- );
123
- --dimension-label-margin-bottom: var(--fhi-spacing-050);
124
-
125
- /* input */
126
- --color-input-placeholder: var(--fhi-color-neutral-base-default);
127
- --color-input-text: var(--fhi-color-neutral-text-default);
128
- --color-input-text-error: var(--fhi-color-danger-text-default);
129
- --color-input-background: var(--fhi-color-neutral-background-default);
130
- --color-input-background-active: var(
131
- --fhi-color-accent-background-default
132
- );
133
- --color-input-background-hover: var(--fhi-color-accent-background-subtle);
134
- --color-input-background-error: var(
135
- --fhi-color-danger-background-default
136
- );
137
- --color-input-border: var(--fhi-color-neutral-border-default);
138
- --color-input-border-hover: var(--fhi-color-accent-border-default);
139
- --color-input-border-active: var(--fhi-color-accent-border-strong);
140
- --color-input-border-error: var(--fhi-color-danger-border-strong);
141
- --color-input-border-disabled: var(--fhi-color-neutral-border-default);
142
-
143
- --typography-input-font-weight: var(
144
- --fhi-typography-body-medium-font-weight
145
- );
146
- --typography-input-font-size: var(--fhi-typography-body-medium-font-size);
147
- --typography-input-line-height: var(
148
- --fhi-typography-body-medium-line-height
149
- );
150
- --typography-input-letter-spacing: var(
151
- --fhi-typography-body-medium-letter-spacing
152
- );
153
-
154
- --dimension-input-border-width: var(--fhi-dimension-border-width);
155
-
156
- --dimension-input-height: var(--fhi-spacing-500);
157
- --dimension-input-border-radius: var(--fhi-border-radius-050);
158
- --dimension-input-padding-left: var(--fhi-spacing-150);
159
- --dimension-input-padding-right: var(--fhi-spacing-150);
160
-
161
- --motion-input-transition: all var(--fhi-motion-ease-default)
162
- var(--fhi-motion-duration-quick);
163
-
164
- /* message */
165
- --color-message-text: var(--fhi-color-neutral-text-default);
166
- --color-message-text-error: var(--fhi-color-danger-text-subtle);
167
-
168
- --typography-message-font-weight: var(
169
- --fhi-typography-body-small-font-weight
170
- );
171
- --typography-message-font-size: var(
172
- --fhi-typography-body-small-font-size
173
- );
174
- --typography-message-line-height: var(
175
- --fhi-typography-body-small-line-height
176
- );
177
- --typography-message-letter-spacing: var(
178
- --fhi-typography-body-small-letter-spacing
179
- );
180
-
181
- --dimension-message-margin-top: var(--fhi-spacing-050);
182
-
183
- /* help-text */
184
- --color-help-text-text: var(--fhi-color-neutral-text-subtle);
185
- --color-help-text-text-error: var(--fhi-color-danger-text-default);
186
- --typography-help-text-font-weight: var(
187
- --fhi-typography-body-small-font-weight
188
- );
189
- --typography-help-text-font-size: var(
190
- --fhi-typography-body-small-font-size
191
- );
192
- --typography-help-text-line-height: var(
193
- --fhi-typography-body-small-line-height
194
- );
195
- --typography-help-text-letter-spacing: var(
196
- --fhi-typography-body-small-letter-spacing
197
- );
198
- --dimension-help-text-margin-bottom: var(--fhi-spacing-050);
105
+ --fhi-text-input-placeholder-color: unset;
199
106
  }
200
107
 
201
108
  :host {
202
109
  display: flex;
203
110
  flex-direction: column;
204
- font-family: var(--typography-font-family);
111
+ font-family: var(--fhi-font-family-default);
205
112
  -webkit-font-smoothing: antialiased;
206
113
 
114
+ --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);
115
+
207
116
  label {
208
- font-weight: var(--typography-label-font-weight);
209
- font-size: var(--typography-label-font-size);
210
- line-height: var(--typography-label-line-height);
211
- letter-spacing: var(--typography-label-letter-spacing);
212
- color: var(--color-label-text);
213
- margin: 0 0 var(--dimension-label-margin-bottom) 0;
117
+ font-weight: var(--fhi-typography-label-small-font-weight);
118
+ font-size: var(--fhi-typography-label-small-font-size);
119
+ line-height: var(--fhi-typography-label-small-line-height);
120
+ letter-spacing: var(--fhi-typography-label-small-letter-spacing);
121
+ color: var(--fhi-color-neutral-text-default);
122
+ margin: 0 0 var(--fhi-spacing-050) 0;
214
123
  }
215
124
 
216
125
  label:has(+ p) {
@@ -220,30 +129,30 @@ o.styles = c`
220
129
  input {
221
130
  box-sizing: border-box;
222
131
  flex: 1 1 auto;
223
- height: var(--dimension-input-height);
224
- border: var(--dimension-input-border-width) solid
225
- var(--color-input-border);
226
- border-radius: var(--dimension-input-border-radius);
227
- padding: 0 var(--dimension-input-padding-right) 0
228
- var(--dimension-input-padding-left);
229
- color: var(--color-input-text);
230
- background-color: var(--color-input-background);
231
- font-family: var(--typography-font-family);
232
- font-weight: var(--typography-input-font-weight);
233
- font-size: var(--typography-input-font-size);
234
- line-height: var(--typography-input-line-height);
235
- letter-spacing: var(--typography-input-letter-spacing);
236
- transition: var(--motion-input-transition);
132
+ height: var(--fhi-spacing-500);
133
+ border: var(--fhi-dimension-border-width) solid
134
+ var(--fhi-color-neutral-border-default);
135
+ border-radius: var(--fhi-border-radius-050);
136
+ padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);
137
+ color: var(--fhi-color-neutral-text-default);
138
+ background-color: var(--fhi-color-neutral-background-default);
139
+ font-family: var(--fhi-font-family-default);
140
+ font-weight: var(--fhi-typography-body-medium-font-weight);
141
+ font-size: var(--fhi-typography-body-medium-font-size);
142
+ line-height: var(--fhi-typography-body-medium-line-height);
143
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
144
+ transition: all var(--fhi-motion-ease-default)
145
+ var(--fhi-motion-duration-quick);
237
146
  &:hover {
238
- border-color: var(--color-input-border-hover);
239
- background-color: var(--color-input-background-hover);
147
+ border-color: var(--fhi-color-accent-border-default);
148
+ background-color: var(--fhi-color-accent-background-subtle);
240
149
  }
241
150
  &:focus {
242
- border-color: var(--color-input-border-active);
243
- background-color: var(--color-input-background-active);
151
+ border-color: var(--fhi-color-accent-border-strong);
152
+ background-color: var(--fhi-color-accent-background-default);
244
153
  }
245
154
  &::placeholder {
246
- color: var(--color-input-placeholder);
155
+ color: var(--fhi-text-input-placeholder-color);
247
156
  }
248
157
  }
249
158
 
@@ -260,21 +169,21 @@ o.styles = c`
260
169
  }
261
170
 
262
171
  .message {
263
- margin: var(--dimension-message-margin-top) 0 0 0;
264
- color: var(--color-message-text);
265
- font-weight: var(--typography-message-font-weight);
266
- font-size: var(--typography-message-font-size);
267
- line-height: var(--typography-message-line-height);
268
- letter-spacing: var(--typography-message-letter-spacing);
172
+ margin: var(--fhi-spacing-050) 0 0 0;
173
+ color: var(--fhi-color-neutral-text-default);
174
+ font-weight: var(--fhi-typography-body-small-font-weight);
175
+ font-size: var(--fhi-typography-body-small-font-size);
176
+ line-height: var(--fhi-typography-body-small-line-height);
177
+ letter-spacing: var(--fhi-typography-body-small-letter-spacing);
269
178
  }
270
179
 
271
180
  .help-text {
272
- color: var(--color-help-text-text);
273
- font-weight: var(--typography-help-text-font-weight);
274
- font-size: var(--typography-help-text-font-size);
275
- line-height: var(--typography-help-text-line-height);
276
- letter-spacing: var(--typography-help-text-letter-spacing);
277
- margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
181
+ color: var(--fhi-color-neutral-text-subtle);
182
+ font-weight: var(--fhi-typography-body-small-font-weight);
183
+ font-size: var(--fhi-typography-body-small-font-size);
184
+ line-height: var(--fhi-typography-body-small-line-height);
185
+ letter-spacing: var(--fhi-typography-body-small-letter-spacing);
186
+ margin: 0 0 var(--fhi-spacing-050) 0;
278
187
  }
279
188
 
280
189
  .input-container {
@@ -307,7 +216,7 @@ o.styles = c`
307
216
  }
308
217
 
309
218
  :host([disabled]) {
310
- opacity: var(--opacity-disabled);
219
+ opacity: var(--fhi-opacity-disabled);
311
220
  cursor: not-allowed;
312
221
  label,
313
222
  input {
@@ -315,8 +224,8 @@ o.styles = c`
315
224
  }
316
225
  input {
317
226
  &:hover {
318
- border-color: var(--color-input-border);
319
- background-color: var(--color-input-background);
227
+ border-color: var(--fhi-color-neutral-border-default);
228
+ background-color: var(--fhi-color-neutral-background-default);
320
229
  }
321
230
  }
322
231
  }
@@ -326,25 +235,25 @@ o.styles = c`
326
235
  border: unset;
327
236
  border-radius: unset;
328
237
  background-color: unset;
329
- border-left: var(--dimension-input-border-width) solid
330
- var(--color-input-border);
238
+ border-left: var(--fhi-dimension-border-width) solid
239
+ var(--fhi-color-neutral-border-default);
331
240
  }
332
241
  }
333
242
 
334
243
  :host([status='error']:not([disabled]):not([readonly])) {
335
244
  label {
336
- color: var(--color-label-text-error);
245
+ color: var(--fhi-color-danger-text-default);
337
246
  }
338
247
  input {
339
- border-color: var(--color-input-border-error);
340
- background-color: var(--color-input-background-error);
341
- color: var(--color-input-text-error);
248
+ border-color: var(--fhi-color-danger-border-strong);
249
+ background-color: var(--fhi-color-danger-background-default);
250
+ color: var(--fhi-color-danger-text-default);
342
251
  }
343
252
  .message {
344
- color: var(--color-message-text-error);
253
+ color: var(--fhi-color-danger-text-subtle);
345
254
  }
346
255
  .help-text {
347
- color: var(--color-help-text-text-error);
256
+ color: var(--fhi-color-danger-text-default);
348
257
  }
349
258
  slot[name='start'] {
350
259
  color: var(--fhi-color-danger-text-subtle);
@@ -358,41 +267,41 @@ o.styles = c`
358
267
  }
359
268
  }
360
269
  `;
361
- r([
362
- a({ type: String })
270
+ a([
271
+ r({ type: String })
363
272
  ], o.prototype, "label", 2);
364
- r([
365
- a({ type: String })
273
+ a([
274
+ r({ type: String })
366
275
  ], o.prototype, "message", 2);
367
- r([
368
- a({ type: String, attribute: "help-text" })
276
+ a([
277
+ r({ type: String, attribute: "help-text" })
369
278
  ], o.prototype, "helpText", 2);
370
- r([
371
- a({ type: String })
279
+ a([
280
+ r({ type: String })
372
281
  ], o.prototype, "placeholder", 2);
373
- r([
374
- a({ type: String, reflect: !0 })
282
+ a([
283
+ r({ type: String, reflect: !0 })
375
284
  ], o.prototype, "status", 2);
376
- r([
377
- a({ type: Boolean, reflect: !0 })
285
+ a([
286
+ r({ type: Boolean, reflect: !0 })
378
287
  ], o.prototype, "readonly", 2);
379
- r([
380
- a({ type: Boolean, reflect: !0 })
288
+ a([
289
+ r({ type: Boolean, reflect: !0 })
381
290
  ], o.prototype, "disabled", 2);
382
- r([
383
- y("#input-element")
291
+ a([
292
+ g("#input-element")
384
293
  ], o.prototype, "_input", 2);
385
- r([
386
- a({ type: String, reflect: !0 })
294
+ a([
295
+ r({ type: String, reflect: !0 })
387
296
  ], o.prototype, "name", 1);
388
- r([
389
- a({ type: String })
297
+ a([
298
+ r({ type: String })
390
299
  ], o.prototype, "value", 1);
391
- o = r([
392
- u(b)
300
+ o = a([
301
+ f(y)
393
302
  ], o);
394
303
  export {
395
304
  o as FhiTextInput,
396
- b as FhiTextInputSelector
305
+ y as FhiTextInputSelector
397
306
  };
398
307
  //# sourceMappingURL=fhi-text-input.js.map
package/fhi-text-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\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 * The message shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = 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;\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 set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the input field.\n *\n * You can fetch the current value of the text 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(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\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') || '';\n this._internals.setFormValue(this.value);\n }\n\n private _handleStartSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n private _handleEndSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n <div class=\"input-container\">\n <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\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 <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\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 /* 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-weight: var(\n --fhi-typography-label-small-font-weight\n );\n --typography-label-font-size: var(--fhi-typography-label-small-font-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 --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n /* input */\n --color-input-placeholder: var(--fhi-color-neutral-base-default);\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\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 /* 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 /* help-text */\n --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n --color-help-text-text-error: var(--fhi-color-danger-text-default);\n --typography-help-text-font-weight: var(\n --fhi-typography-body-small-font-weight\n );\n --typography-help-text-font-size: var(\n --fhi-typography-body-small-font-size\n );\n --typography-help-text-line-height: var(\n --fhi-typography-body-small-line-height\n );\n --typography-help-text-letter-spacing: var(\n --fhi-typography-body-small-letter-spacing\n );\n --dimension-help-text-margin-bottom: 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\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 margin: 0 0 var(--dimension-label-margin-bottom) 0;\n }\n\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\n box-sizing: border-box;\n flex: 1 1 auto;\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 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 transition: var(--motion-input-transition);\n &:hover {\n border-color: var(--color-input-border-hover);\n background-color: var(--color-input-background-hover);\n }\n &:focus {\n border-color: var(--color-input-border-active);\n background-color: var(--color-input-background-active);\n }\n &::placeholder {\n color: var(--color-input-placeholder);\n }\n }\n\n slot[name='start'] {\n color: var(--fhi-color-neutral-text-subtle);\n }\n\n input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-subtle);\n }\n input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-default);\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\n .help-text {\n color: var(--color-help-text-text);\n font-weight: var(--typography-help-text-font-weight);\n font-size: var(--typography-help-text-font-size);\n line-height: var(--typography-help-text-line-height);\n letter-spacing: var(--typography-help-text-letter-spacing);\n margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n }\n\n .input-container {\n position: relative;\n display: flex;\n }\n\n slot[name='start'] {\n display: block;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 8px;\n height: fit-content;\n pointer-events: none;\n }\n\n slot[name='end'] {\n display: block;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 8px;\n height: fit-content;\n pointer-events: none;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--color-input-border);\n background-color: var(--color-input-background);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\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 }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--color-label-text-error);\n }\n input {\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 .help-text {\n color: var(--color-help-text-text-error);\n }\n slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n input:hover ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n input:focus ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","iconNode","icon","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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AAA;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;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;AAtNYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfb,EAQiB,WAAA,SAAA,CAAA;AAOAY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAffb,EAeiB,WAAA,WAAA,CAAA;AAOwBY,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtBvCb,EAsByC,WAAA,YAAA,CAAA;AAQxBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Bfb,EA8BiB,WAAA,eAAA,CAAA;AASeY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9Bb,EAuCgC,WAAA,UAAA,CAAA;AAOCY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/Bb,EA8CiC,WAAA,YAAA,CAAA;AAOAY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/Bb,EAqDiC,WAAA,YAAA,CAAA;AAGpCY,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GAvDZd,EAwDH,WAAA,UAAA,CAAA;AAcJY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArE9Bb,EAsEP,WAAA,QAAA,CAAA;AAuBAY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Ffb,EA6FP,WAAA,SAAA,CAAA;AA7FOA,IAANY,EAAA;AAAA,EADNG,EAAchB,CAAoB;AAAA,GACtBC,CAAA;"}
1
+ {"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\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 * The message shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = 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;\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 set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the input field.\n *\n * You can fetch the current value of the text 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(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\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') || '';\n this._internals.setFormValue(this.value);\n }\n\n private _handleStartSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n private _handleEndSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n <div class=\"input-container\">\n <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\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 <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n </div>\n ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-text-input-placeholder-color: unset;\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n\n --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n &::placeholder {\n color: var(--fhi-text-input-placeholder-color);\n }\n }\n\n slot[name='start'] {\n color: var(--fhi-color-neutral-text-subtle);\n }\n\n input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-subtle);\n }\n input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-default);\n }\n\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .input-container {\n position: relative;\n display: flex;\n }\n\n slot[name='start'] {\n display: block;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 8px;\n height: fit-content;\n pointer-events: none;\n }\n\n slot[name='end'] {\n display: block;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 8px;\n height: fit-content;\n pointer-events: none;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n input:hover ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n input:focus ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","iconNode","icon","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.38.0","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.10.10","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.57.0","@release-it/conventional-changelog":"~11.0.0","@storybook/addon-docs":"^10.2.8","@storybook/web-components-vite":"^10.2.8","@types/mocha":"~10.0.10","@types/node":"~22.5.5","@types/react":"^19.2.14","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.0","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.4","@web/test-runner":"~0.18.3","@web/test-runner-playwright":"~0.11.1","cross-env":"7.0.3","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.2.1","mocha":"~10.7.3","playwright":"^1.58.2","release-it":"~20.0.1","rimraf":"^6.1.2","storybook":"^10.2.8","storybook-design-token":"^5.0.0","svgo":"^3.3.2","vite":"~6.4.1","vite-plugin-static-copy":"~3.1.4"},"dependencies":{"@floating-ui/dom":"^1.7.4"},"pnpm":{"overrides":{"undici@<6.23.0":">=6.23.0","diff@>=5.0.0 <5.2.2":">=5.2.2","qs@>=6.7.0 <=6.14.1":">=6.14.2"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.38.1","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.10.10","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.57.0","@release-it/conventional-changelog":"~11.0.0","@storybook/addon-docs":"^10.2.8","@storybook/web-components-vite":"^10.2.8","@types/mocha":"~10.0.10","@types/node":"~22.5.5","@types/react":"^19.2.14","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.0","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.4","@web/test-runner":"~0.18.3","@web/test-runner-playwright":"~0.11.1","cross-env":"7.0.3","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.2.1","mocha":"~10.7.3","playwright":"^1.58.2","release-it":"~20.0.1","rimraf":"^6.1.2","storybook":"^10.2.8","storybook-design-token":"^5.0.0","svgo":"^3.3.2","vite":"~6.4.1","vite-plugin-static-copy":"~3.1.4"},"dependencies":{"@floating-ui/dom":"^1.7.4"},"pnpm":{"overrides":{"undici@<6.23.0":">=6.23.0","diff@>=5.0.0 <5.2.2":">=5.2.2","qs@>=6.7.0 <=6.14.1":">=6.14.2"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.38.0",
4
+ "version": "0.38.1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {