@folkehelseinstituttet/designsystem 0.38.0 → 0.38.2

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 (16) hide show
  1. package/fhi-body.js +32 -49
  2. package/fhi-body.js.map +1 -1
  3. package/fhi-date-input.js +122 -234
  4. package/fhi-date-input.js.map +1 -1
  5. package/fhi-display.js +29 -52
  6. package/fhi-display.js.map +1 -1
  7. package/fhi-headline.js +25 -48
  8. package/fhi-headline.js.map +1 -1
  9. package/fhi-label.js +23 -42
  10. package/fhi-label.js.map +1 -1
  11. package/fhi-text-input.js +86 -177
  12. package/fhi-text-input.js.map +1 -1
  13. package/fhi-title.js +35 -54
  14. package/fhi-title.js.map +1 -1
  15. package/package.json +1 -1
  16. package/web-types.json +1 -1
package/fhi-body.js CHANGED
@@ -1,43 +1,26 @@
1
- import { i as g, n, a as f, b as p, t as y } from "./property-B2Ico5CW.js";
2
- var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
3
- for (var e = a > 1 ? void 0 : a ? d(r, o) : r, l = t.length - 1, h; l >= 0; l--)
4
- (h = t[l]) && (e = (a ? h(r, o, e) : h(e)) || e);
5
- return a && e && m(r, o, e), e;
1
+ import { i as p, n as y, a as n, b as f, t as g } from "./property-B2Ico5CW.js";
2
+ var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor, s = (e, i, a, r) => {
3
+ for (var t = r > 1 ? void 0 : r ? c(i, a) : i, h = e.length - 1, l; h >= 0; h--)
4
+ (l = e[h]) && (t = (r ? l(i, a, t) : l(t)) || t);
5
+ return r && t && d(i, a, t), t;
6
6
  };
7
- const v = "fhi-body";
8
- let i = class extends f {
7
+ const m = "fhi-body";
8
+ let o = class extends n {
9
9
  constructor() {
10
10
  super(...arguments), this.size = "medium";
11
11
  }
12
- updated(t) {
13
- super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
12
+ updated(e) {
13
+ super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
14
14
  }
15
15
  render() {
16
- return p`
16
+ return f`
17
17
  <span class="body">
18
18
  <slot></slot>
19
19
  </span>
20
20
  `;
21
21
  }
22
22
  };
23
- i.styles = g`
24
- :host {
25
- --font-size-large: var(--fhi-typography-body-large-font-size);
26
- --font-weight-large: var(--fhi-typography-body-large-font-weight);
27
- --line-height-large: var(--fhi-typography-body-large-line-height);
28
- --letter-spacing-large: var(--fhi-typography-body-large-letter-spacing);
29
-
30
- --font-size-medium: var(--fhi-typography-body-medium-font-size);
31
- --font-weight-medium: var(--fhi-typography-body-medium-font-weight);
32
- --line-height-medium: var(--fhi-typography-body-medium-line-height);
33
- --letter-spacing-medium: var(--fhi-typography-body-medium-letter-spacing);
34
-
35
- --font-size-small: var(--fhi-typography-body-small-font-size);
36
- --font-weight-small: var(--fhi-typography-body-small-font-weight);
37
- --line-height-small: var(--fhi-typography-body-small-line-height);
38
- --letter-spacing-small: var(--fhi-typography-body-small-letter-spacing);
39
- }
40
-
23
+ o.styles = p`
41
24
  :host {
42
25
  display: block;
43
26
  contain: layout;
@@ -51,42 +34,42 @@ i.styles = g`
51
34
 
52
35
  :host([size='large']) {
53
36
  .body {
54
- font-size: var(--font-size-large);
55
- font-weight: var(--font-weight-large);
56
- line-height: var(--line-height-large);
57
- letter-spacing: var(--letter-spacing-large);
37
+ font-size: var(--fhi-typography-body-large-font-size);
38
+ font-weight: var(--fhi-typography-body-large-font-weight);
39
+ line-height: var(--fhi-typography-body-large-line-height);
40
+ letter-spacing: var(--fhi-typography-body-large-letter-spacing);
58
41
  }
59
42
  }
60
43
 
61
44
  :host([size='medium']) {
62
45
  .body {
63
- font-size: var(--font-size-medium);
64
- font-weight: var(--font-weight-medium);
65
- line-height: var(--line-height-medium);
66
- letter-spacing: var(--letter-spacing-medium);
46
+ font-size: var(--fhi-typography-body-medium-font-size);
47
+ font-weight: var(--fhi-typography-body-medium-font-weight);
48
+ line-height: var(--fhi-typography-body-medium-line-height);
49
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
67
50
  }
68
51
  }
69
52
 
70
53
  :host([size='small']) {
71
54
  .body {
72
- font-size: var(--font-size-small);
73
- font-weight: var(--font-weight-small);
74
- line-height: var(--line-height-small);
75
- letter-spacing: var(--letter-spacing-small);
55
+ font-size: var(--fhi-typography-body-small-font-size);
56
+ font-weight: var(--fhi-typography-body-small-font-weight);
57
+ line-height: var(--fhi-typography-body-small-line-height);
58
+ letter-spacing: var(--fhi-typography-body-small-letter-spacing);
76
59
  }
77
60
  }
78
61
  `;
79
62
  s([
80
- n({ type: String, reflect: !0 })
81
- ], i.prototype, "size", 2);
63
+ y({ type: String, reflect: !0 })
64
+ ], o.prototype, "size", 2);
82
65
  s([
83
- n({ type: String })
84
- ], i.prototype, "color", 2);
85
- i = s([
86
- y(v)
87
- ], i);
66
+ y({ type: String })
67
+ ], o.prototype, "color", 2);
68
+ o = s([
69
+ g(m)
70
+ ], o);
88
71
  export {
89
- i as FhiBody,
90
- v as FhiBodySelector
72
+ o as FhiBody,
73
+ m as FhiBodySelector
91
74
  };
92
75
  //# sourceMappingURL=fhi-body.js.map
package/fhi-body.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-body.js","sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n return html`\n <span class=\"body\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-body-large-font-size);\n --font-weight-large: var(--fhi-typography-body-large-font-weight);\n --line-height-large: var(--fhi-typography-body-large-line-height);\n --letter-spacing-large: var(--fhi-typography-body-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-body-medium-font-size);\n --font-weight-medium: var(--fhi-typography-body-medium-font-weight);\n --line-height-medium: var(--fhi-typography-body-medium-line-height);\n --letter-spacing-medium: var(--fhi-typography-body-medium-letter-spacing);\n\n --font-size-small: var(--fhi-typography-body-small-font-size);\n --font-weight-small: var(--fhi-typography-body-small-font-weight);\n --line-height-small: var(--fhi-typography-body-small-line-height);\n --letter-spacing-small: var(--fhi-typography-body-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiBodySelector","FhiBody","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAgBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA0DF;AAvGaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAe;AAAA,GACjBC,CAAA;"}
1
+ {"version":3,"file":"fhi-body.js","sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('color')) {\n this.style.color =\n typeof this.color === 'string'\n ? this.color\n : 'var(--fhi-color-neutral-text-default)';\n }\n }\n\n render() {\n return html`\n <span class=\"body\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--fhi-typography-body-large-font-size);\n font-weight: var(--fhi-typography-body-large-font-weight);\n line-height: var(--fhi-typography-body-large-line-height);\n letter-spacing: var(--fhi-typography-body-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--fhi-typography-body-small-font-size);\n font-weight: var(--fhi-typography-body-small-font-weight);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n }\n `;\n}\n"],"names":["FhiBodySelector","FhiBody","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAgBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAyCF;AAtFaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAe;AAAA,GACjBC,CAAA;"}
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