@folkehelseinstituttet/designsystem 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/fhi-text-input.js +53 -74
  2. package/fhi-text-input.js.map +1 -1
  3. package/fhi-tooltip.js +1138 -0
  4. package/fhi-tooltip.js.map +1 -0
  5. package/index.js +243 -240
  6. package/index.js.map +1 -1
  7. package/package.json +6 -3
  8. package/query-NJDNu0-P.js +26 -0
  9. package/query-NJDNu0-P.js.map +1 -0
package/fhi-text-input.js CHANGED
@@ -1,55 +1,34 @@
1
- import { E as c, i as g, n, a as y, x as h, t as v } from "./property-WH20NVyT.js";
2
- /**
3
- * @license
4
- * Copyright 2017 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- const b = (e, r, o) => (o.configurable = !0, o.enumerable = !0, Reflect.decorate && typeof r != "object" && Object.defineProperty(e, r, o), o);
8
- /**
9
- * @license
10
- * Copyright 2017 Google LLC
11
- * SPDX-License-Identifier: BSD-3-Clause
12
- */
13
- function f(e, r) {
14
- return (o, l, i) => {
15
- const s = (p) => {
16
- var d;
17
- return ((d = p.renderRoot) == null ? void 0 : d.querySelector(e)) ?? null;
18
- };
19
- return b(o, l, { get() {
20
- return s(this);
21
- } });
22
- };
23
- }
1
+ import { E as u, i as c, n as a, a as g, x as h, t as y } from "./property-WH20NVyT.js";
2
+ import { e as v } from "./query-NJDNu0-P.js";
24
3
  /**
25
4
  * @license
26
5
  * Copyright 2018 Google LLC
27
6
  * SPDX-License-Identifier: BSD-3-Clause
28
7
  */
29
- const u = (e) => e ?? c;
30
- var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, r, o, l) => {
31
- for (var i = l > 1 ? void 0 : l ? x(r, o) : r, s = e.length - 1, p; s >= 0; s--)
32
- (p = e[s]) && (i = (l ? p(r, o, i) : p(i)) || i);
33
- return l && i && m(r, o, i), i;
8
+ const d = (t) => t ?? u;
9
+ var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, o, l, n) => {
10
+ for (var i = n > 1 ? void 0 : n ? f(o, l) : o, s = t.length - 1, p; s >= 0; s--)
11
+ (p = t[s]) && (i = (n ? p(o, l, i) : p(i)) || i);
12
+ return n && i && b(o, l, i), i;
34
13
  };
35
- const _ = "fhi-text-input";
36
- let t = class extends y {
14
+ const m = "fhi-text-input";
15
+ let e = class extends g {
37
16
  constructor() {
38
17
  super(), this.label = void 0, this.message = void 0, this.placeholder = null, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
39
18
  }
40
19
  get name() {
41
20
  return this._name;
42
21
  }
43
- set name(e) {
44
- const r = this._name;
45
- this._name = e, this.requestUpdate("name", r), this._internals.setFormValue(this._value);
22
+ set name(t) {
23
+ const o = this._name;
24
+ this._name = t, this.requestUpdate("name", o), this._internals.setFormValue(this._value);
46
25
  }
47
26
  get value() {
48
27
  return this._value;
49
28
  }
50
- set value(e) {
51
- const r = this._value;
52
- this._value = e, this.requestUpdate("value", r), this._internals.setFormValue(this._value);
29
+ set value(t) {
30
+ const o = this._value;
31
+ this._value = t, this.requestUpdate("value", o), this._internals.setFormValue(this._value);
53
32
  }
54
33
  connectedCallback() {
55
34
  super.connectedCallback(), this._internals.setFormValue(this.value);
@@ -65,8 +44,8 @@ let t = class extends y {
65
44
  onInput() {
66
45
  this.value = this._input.value, this._internals.setFormValue(this.value);
67
46
  }
68
- onKeyDown(e) {
69
- e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
47
+ onKeyDown(t) {
48
+ t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
70
49
  }
71
50
  formResetCallback() {
72
51
  this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
@@ -76,8 +55,8 @@ let t = class extends y {
76
55
  ${this.label && h`<label for="input-element">${this.label}</label>`}
77
56
  <input
78
57
  id="input-element"
79
- name=${u(this.name)}
80
- placeholder=${u(this.placeholder)}
58
+ name=${d(this.name)}
59
+ placeholder=${d(this.placeholder)}
81
60
  .value=${this.value}
82
61
  ?readonly=${this.readonly}
83
62
  ?disabled=${this.disabled}
@@ -89,8 +68,8 @@ let t = class extends y {
89
68
  `;
90
69
  }
91
70
  };
92
- t.formAssociated = !0;
93
- t.styles = g`
71
+ e.formAssociated = !0;
72
+ e.styles = c`
94
73
  :host {
95
74
  --typography-font-family: var(--fhi-font-family-default);
96
75
 
@@ -263,38 +242,38 @@ t.styles = g`
263
242
  }
264
243
  }
265
244
  `;
266
- a([
267
- n({ type: String })
268
- ], t.prototype, "label", 2);
269
- a([
270
- n({ type: String })
271
- ], t.prototype, "message", 2);
272
- a([
273
- n({ type: String })
274
- ], t.prototype, "placeholder", 2);
275
- a([
276
- n({ type: String, reflect: !0 })
277
- ], t.prototype, "status", 2);
278
- a([
279
- n({ type: Boolean, reflect: !0 })
280
- ], t.prototype, "readonly", 2);
281
- a([
282
- n({ type: Boolean, reflect: !0 })
283
- ], t.prototype, "disabled", 2);
284
- a([
285
- f("#input-element")
286
- ], t.prototype, "_input", 2);
287
- a([
288
- n({ type: String, reflect: !0 })
289
- ], t.prototype, "name", 1);
290
- a([
291
- n({ type: String })
292
- ], t.prototype, "value", 1);
293
- t = a([
294
- v(_)
295
- ], t);
245
+ r([
246
+ a({ type: String })
247
+ ], e.prototype, "label", 2);
248
+ r([
249
+ a({ type: String })
250
+ ], e.prototype, "message", 2);
251
+ r([
252
+ a({ type: String })
253
+ ], e.prototype, "placeholder", 2);
254
+ r([
255
+ a({ type: String, reflect: !0 })
256
+ ], e.prototype, "status", 2);
257
+ r([
258
+ a({ type: Boolean, reflect: !0 })
259
+ ], e.prototype, "readonly", 2);
260
+ r([
261
+ a({ type: Boolean, reflect: !0 })
262
+ ], e.prototype, "disabled", 2);
263
+ r([
264
+ v("#input-element")
265
+ ], e.prototype, "_input", 2);
266
+ r([
267
+ a({ type: String, reflect: !0 })
268
+ ], e.prototype, "name", 1);
269
+ r([
270
+ a({ type: String })
271
+ ], e.prototype, "value", 1);
272
+ e = r([
273
+ y(m)
274
+ ], e);
296
275
  export {
297
- t as FhiTextInput,
298
- _ as FhiTextInputSelector
276
+ e as FhiTextInput,
277
+ m as FhiTextInputSelector
299
278
  };
300
279
  //# sourceMappingURL=fhi-text-input.js.map
package/fhi-text-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-text-input.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/query.js","../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js","../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}=\"object\"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};\n//# sourceMappingURL=query.js.map\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","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@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n static readonly formAssociated = true;\n\n @property({ type: String }) label?: string = undefined;\n\n @property({ type: String }) message?: string = undefined;\n\n @property({ type: String }) placeholder?: string | null = null;\n\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element') _input!: HTMLInputElement;\n\n private _name?: string = undefined;\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 @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 public onChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n public onInput(): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n }\n\n public onKeyDown(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 render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\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.onChange}\n @input=${this.onInput}\n @keydown=${this.onKeyDown}\n />\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\n --dimension-label-padding-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\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n padding-bottom: var(--dimension-label-padding-bottom);\n }\n\n input {\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n 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 .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\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\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 }\n `;\n}\n"],"names":["e","t","c","n","s","o","_a","FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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","x_google_ignoreList":[0,1,2]}
1
+ {"version":3,"file":"fhi-text-input.js","sources":["../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js","../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","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@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n static readonly formAssociated = true;\n\n @property({ type: String }) label?: string = undefined;\n\n @property({ type: String }) message?: string = undefined;\n\n @property({ type: String }) placeholder?: string | null = null;\n\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element') _input!: HTMLInputElement;\n\n private _name?: string = undefined;\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 @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 public onChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n public onInput(): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n }\n\n public onKeyDown(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 render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\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.onChange}\n @input=${this.onInput}\n @keydown=${this.onKeyDown}\n />\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\n --dimension-label-padding-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\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-font-family);\n\n label {\n font-weight: var(--typography-label-font-weight);\n font-size: var(--typography-label-font-size);\n line-height: var(--typography-label-line-height);\n letter-spacing: var(--typography-label-letter-spacing);\n color: var(--color-label-text);\n padding-bottom: var(--dimension-label-padding-bottom);\n }\n\n input {\n box-sizing: border-box;\n height: var(--dimension-input-height);\n border: var(--dimension-input-border-width) solid\n var(--color-input-border);\n border-radius: var(--dimension-input-border-radius);\n padding: 0 var(--dimension-input-padding-right) 0\n var(--dimension-input-padding-left);\n color: var(--color-input-text);\n background-color: var(--color-input-background);\n 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 .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\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n * {\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 }\n `;\n}\n"],"names":["o","t","FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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","x_google_ignoreList":[0]}