@folkehelseinstituttet/designsystem 0.11.0 → 0.12.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.
- package/fhi-radio.js +295 -0
- package/fhi-radio.js.map +1 -0
- package/index.js +267 -264
- package/index.js.map +1 -1
- package/package.json +1 -1
package/fhi-radio.js
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
import { i as h, n, a as u, x as p, t as b } from "./property-DYwjZ69W.js";
|
|
2
|
+
import { e as f } from "./query-NJDNu0-P.js";
|
|
3
|
+
import { o as v } from "./if-defined-Bw_mSLhL.js";
|
|
4
|
+
var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (r, o, t, l) => {
|
|
5
|
+
for (var e = l > 1 ? void 0 : l ? m(o, t) : o, a = r.length - 1, s; a >= 0; a--)
|
|
6
|
+
(s = r[a]) && (e = (l ? s(o, t, e) : s(e)) || e);
|
|
7
|
+
return l && e && g(o, t, e), e;
|
|
8
|
+
};
|
|
9
|
+
const c = "fhi-radio";
|
|
10
|
+
let i = class extends u {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(), this.label = void 0, this.name = void 0, this.status = void 0, this.disabled = !1, this.checked = !1, this.value = "on", this.isFormElement = !1, this._internals = this.attachInternals(), this._groupRoot = document;
|
|
13
|
+
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
super.connectedCallback(), this.addEventListener("focus", this._setFocusOnInput), this.isFormElement = !!this._internals.form, this.isFormElement && (this._updateFormValue(), this._groupRoot = this._internals.form), this.name && (this.addEventListener("keydown", this._handleKeyDown), this._SetTabbableRadios());
|
|
16
|
+
}
|
|
17
|
+
disconnectedCallback() {
|
|
18
|
+
super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("focus", this._setFocusOnInput);
|
|
19
|
+
}
|
|
20
|
+
_setFocusOnInput() {
|
|
21
|
+
this._input.focus();
|
|
22
|
+
}
|
|
23
|
+
_getRadioGroup() {
|
|
24
|
+
return Array.from(
|
|
25
|
+
this._groupRoot.querySelectorAll(
|
|
26
|
+
`${c}[name="${this.name}"]`
|
|
27
|
+
)
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
_SetTabbableRadios() {
|
|
31
|
+
const r = this._getRadioGroup();
|
|
32
|
+
r.forEach((o) => {
|
|
33
|
+
o.tabIndex = o.checked ? 0 : -1;
|
|
34
|
+
}), !r.some((o) => o.checked) && r.length > 0 && (r[0].tabIndex = 0);
|
|
35
|
+
}
|
|
36
|
+
updated(r) {
|
|
37
|
+
super.updated(r), r.has("checked") && (this._input.checked = !!this.checked, this._updateFormValue(), this.checked && this.uncheckGroupMembers()), (r.has("value") || r.has("name")) && this._input.checked && this._updateFormValue();
|
|
38
|
+
}
|
|
39
|
+
formResetCallback() {
|
|
40
|
+
this._getRadioGroup().filter(
|
|
41
|
+
(o) => typeof o.getAttribute("checked") == "string"
|
|
42
|
+
).pop() === this && (this.checked = !0), this._updateFormValue();
|
|
43
|
+
}
|
|
44
|
+
uncheckGroupMembers() {
|
|
45
|
+
this._getRadioGroup().forEach((o) => {
|
|
46
|
+
o !== this && (o.isFormElement && this._groupRoot === document || (o.checked = !1));
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
_updateFormValue() {
|
|
50
|
+
this.isFormElement && this._internals.setFormValue(this.checked ? this.value : null);
|
|
51
|
+
}
|
|
52
|
+
_handleChange(r) {
|
|
53
|
+
this.checked = r.target.checked, this.uncheckGroupMembers(), this._updateFormValue(), r.stopPropagation(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
54
|
+
}
|
|
55
|
+
_handleInput(r) {
|
|
56
|
+
r.stopPropagation(), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
|
|
57
|
+
}
|
|
58
|
+
_handleKeyDown(r) {
|
|
59
|
+
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(r.key))
|
|
60
|
+
return;
|
|
61
|
+
r.preventDefault();
|
|
62
|
+
const t = this._getRadioGroup();
|
|
63
|
+
if (t.length < 2)
|
|
64
|
+
return;
|
|
65
|
+
const e = t.indexOf(this);
|
|
66
|
+
let a;
|
|
67
|
+
r.key === "ArrowUp" || r.key === "ArrowLeft" ? a = t[e === 0 ? t.length - 1 : e - 1] : a = t[e === t.length - 1 ? 0 : e + 1], a.focus(), this.checked = !1, a.checked = !0, this._SetTabbableRadios();
|
|
68
|
+
}
|
|
69
|
+
render() {
|
|
70
|
+
return p`
|
|
71
|
+
<label>
|
|
72
|
+
<div class="radio-container">
|
|
73
|
+
<input
|
|
74
|
+
type="radio"
|
|
75
|
+
id="input-element"
|
|
76
|
+
name="${v(this.name)}"
|
|
77
|
+
value="${this.value}"
|
|
78
|
+
?checked=${this.checked}
|
|
79
|
+
?disabled=${this.disabled}
|
|
80
|
+
@change=${this._handleChange}
|
|
81
|
+
@input=${this._handleInput}
|
|
82
|
+
/>
|
|
83
|
+
<svg
|
|
84
|
+
class="radio-dot"
|
|
85
|
+
viewBox="0 0 18 18"
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
87
|
+
>
|
|
88
|
+
<circle r="6" cx="9" cy="9" />
|
|
89
|
+
</svg>
|
|
90
|
+
</div>
|
|
91
|
+
${this.label}
|
|
92
|
+
</label>
|
|
93
|
+
`;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
i.formAssociated = !0;
|
|
97
|
+
i.styles = h`
|
|
98
|
+
:host {
|
|
99
|
+
--motion-radio-transition: var(--fhi-motion-ease-default)
|
|
100
|
+
var(--fhi-motion-duration-quick);
|
|
101
|
+
|
|
102
|
+
--color-radio-label: var(--fhi-color-neutral-text-default);
|
|
103
|
+
--color-radio-border: var(--fhi-color-neutral-border-default);
|
|
104
|
+
--color-radio-background: var(--fhi-color-neutral-background-default);
|
|
105
|
+
|
|
106
|
+
--color-radio-border-hover: var(--fhi-color-accent-border-strong);
|
|
107
|
+
--color-radio-background-hover: var(--fhi-color-accent-background-subtle);
|
|
108
|
+
|
|
109
|
+
--color-radio-background-active: var(--fhi-color-accent-surface-default);
|
|
110
|
+
|
|
111
|
+
--color-radio-outline: var(--fhi-color-accent-surface-hover);
|
|
112
|
+
|
|
113
|
+
--typography-radio-label-font-family: var(--fhi-font-family-default);
|
|
114
|
+
--typography-radio-label-font-size: var(
|
|
115
|
+
--fhi-typography-body-medium-font-size
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
--typography-radio-label-font-weight: var(
|
|
119
|
+
--fhi-typography-body-medium-font-weight
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
--typography-radio-label-line-height: var(
|
|
123
|
+
--fhi-typography-body-medium-line-height
|
|
124
|
+
);
|
|
125
|
+
--typography-radio-label-letter-spacing: var(
|
|
126
|
+
--fhi-typography-body-medium-letter-spacing
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
--dimension-radio-label-gap: var(--fhi-spacing-050);
|
|
130
|
+
--dimension-radio-width: var(--fhi-spacing-250);
|
|
131
|
+
--dimension-radio-height: var(--fhi-spacing-250);
|
|
132
|
+
--dimension-radio-margin: 0.125rem;
|
|
133
|
+
--dimension-radio-border-width: var(--fhi-dimension-border-width);
|
|
134
|
+
|
|
135
|
+
--dimension-radio-dot-size: 1.125rem;
|
|
136
|
+
|
|
137
|
+
/* Checked state */
|
|
138
|
+
--dimension-radio-border-width-checked: var(
|
|
139
|
+
--fhi-dimension-border-width-active
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
/* Error state */
|
|
143
|
+
--color-radio-border-error: var(--fhi-color-danger-border-default);
|
|
144
|
+
--color-radio-background-error: var(
|
|
145
|
+
--fhi-color-danger-background-default
|
|
146
|
+
);
|
|
147
|
+
|
|
148
|
+
--color-radio-border-error-hover: var(--fhi-color-danger-border-strong);
|
|
149
|
+
--color-radio-background-error-hover: var(
|
|
150
|
+
--fhi-color-danger-background-subtle
|
|
151
|
+
);
|
|
152
|
+
|
|
153
|
+
--color-radio-background-error-active: var(
|
|
154
|
+
--fhi-color-danger-surface-default
|
|
155
|
+
);
|
|
156
|
+
|
|
157
|
+
--color-radio-outline-error: var(--fhi-color-danger-surface-hover);
|
|
158
|
+
|
|
159
|
+
/* Disabled state */
|
|
160
|
+
--opacity-disabled: var(--fhi-opacity-disabled);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:host {
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
width: max-content;
|
|
167
|
+
|
|
168
|
+
label {
|
|
169
|
+
display: flex;
|
|
170
|
+
position: relative;
|
|
171
|
+
gap: var(--dimension-radio-label-gap);
|
|
172
|
+
color: var(--color-radio-label);
|
|
173
|
+
font-family: var(--typography-radio-label-font-family);
|
|
174
|
+
font-size: var(--typography-radio-label-font-size);
|
|
175
|
+
font-weight: var(--typography-radio-label-font-weight);
|
|
176
|
+
line-height: var(--typography-radio-label-line-height);
|
|
177
|
+
letter-spacing: var(--typography-radio-label-letter-spacing);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.radio-container {
|
|
181
|
+
display: flex;
|
|
182
|
+
position: relative;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
input {
|
|
186
|
+
appearance: none;
|
|
187
|
+
margin: var(--dimension-radio-margin);
|
|
188
|
+
width: var(--dimension-radio-width);
|
|
189
|
+
height: var(--dimension-radio-height);
|
|
190
|
+
background-color: var(--color-radio-background);
|
|
191
|
+
border: var(--dimension-radio-border-width) solid
|
|
192
|
+
var(--color-radio-border);
|
|
193
|
+
border-radius: var(--fhi-border-radius-full);
|
|
194
|
+
transition: all var(--motion-radio-transition);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.radio-dot {
|
|
198
|
+
visibility: hidden;
|
|
199
|
+
opacity: 0;
|
|
200
|
+
transition: opacity var(--motion-radio-transition);
|
|
201
|
+
position: absolute;
|
|
202
|
+
top: 50%;
|
|
203
|
+
left: 50%;
|
|
204
|
+
transform: translate(-50%, -50%);
|
|
205
|
+
height: var(--dimension-radio-dot-size);
|
|
206
|
+
width: var(--dimension-radio-dot-size);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
input:checked {
|
|
210
|
+
border-width: var(--dimension-radio-border-width-checked);
|
|
211
|
+
~ .radio-dot {
|
|
212
|
+
circle {
|
|
213
|
+
fill: var(--color-radio-border);
|
|
214
|
+
}
|
|
215
|
+
visibility: visible;
|
|
216
|
+
opacity: 1;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
:host([disabled]) {
|
|
222
|
+
opacity: var(--opacity-disabled);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
:host(:not(:disabled)) {
|
|
226
|
+
input:hover:not(:checked) {
|
|
227
|
+
border-color: var(--color-radio-border-hover);
|
|
228
|
+
background-color: var(--color-radio-background-hover);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
input:active:not(:checked) {
|
|
232
|
+
border-color: var(--color-radio-border-hover);
|
|
233
|
+
background-color: var(--color-radio-background-active);
|
|
234
|
+
outline: var(--fhi-dimension-border-width-focus) solid
|
|
235
|
+
var(--color-radio-outline);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
:host([status='error']) {
|
|
240
|
+
input {
|
|
241
|
+
border-color: var(--color-radio-border-error);
|
|
242
|
+
background-color: var(--color-radio-background-error);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
input:checked {
|
|
246
|
+
~ .radio-dot {
|
|
247
|
+
circle {
|
|
248
|
+
fill: var(--color-radio-border-error);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
:host([status='error']:not(:disabled)) {
|
|
255
|
+
input:hover:not(:checked) {
|
|
256
|
+
border-color: var(--color-radio-border-error-hover);
|
|
257
|
+
background-color: var(--color-radio-background-error-hover);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
input:active:not(:checked) {
|
|
261
|
+
border-color: var(--color-radio-border-error-hover);
|
|
262
|
+
background-color: var(--color-radio-background-error-active);
|
|
263
|
+
outline-color: var(--color-radio-outline-error);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
`;
|
|
267
|
+
d([
|
|
268
|
+
n({ type: String })
|
|
269
|
+
], i.prototype, "label", 2);
|
|
270
|
+
d([
|
|
271
|
+
n({ type: String, reflect: !0 })
|
|
272
|
+
], i.prototype, "name", 2);
|
|
273
|
+
d([
|
|
274
|
+
n({ type: String, reflect: !0 })
|
|
275
|
+
], i.prototype, "status", 2);
|
|
276
|
+
d([
|
|
277
|
+
n({ type: Boolean, reflect: !0 })
|
|
278
|
+
], i.prototype, "disabled", 2);
|
|
279
|
+
d([
|
|
280
|
+
n({ type: Boolean })
|
|
281
|
+
], i.prototype, "checked", 2);
|
|
282
|
+
d([
|
|
283
|
+
n({ type: String })
|
|
284
|
+
], i.prototype, "value", 2);
|
|
285
|
+
d([
|
|
286
|
+
f("#input-element")
|
|
287
|
+
], i.prototype, "_input", 2);
|
|
288
|
+
i = d([
|
|
289
|
+
b(c)
|
|
290
|
+
], i);
|
|
291
|
+
export {
|
|
292
|
+
i as FhiRadio,
|
|
293
|
+
c as FhiRadioSelector
|
|
294
|
+
};
|
|
295
|
+
//# sourceMappingURL=fhi-radio.js.map
|
package/fhi-radio.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fhi-radio.js","sources":["../../src/components/fhi-radio/fhi-radio.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 FhiRadioSelector = 'fhi-radio';\n\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n @property({ type: String }) label?: string = undefined;\n\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @property({ type: Boolean }) checked? = false;\n\n @property({ type: String }) value: string = 'on';\n\n @query('#input-element') _input!: HTMLInputElement;\n\n private _groupRoot: Document | HTMLFormElement;\n private _internals: ElementInternals;\n\n public isFormElement = false;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._groupRoot = document;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this.isFormElement = !!this._internals.form;\n\n if (this.isFormElement) {\n this._updateFormValue();\n this._groupRoot = this._internals.form!;\n }\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n public _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n // make sure the radio input can be programmatically toggeled. e.g by a form reset\n if (changedProperties.has('checked')) {\n this._input.checked = !!this.checked;\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') || changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n if (radiosCheckedByDefault.pop() === this) {\n this.checked = true;\n }\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <label>\n <div class=\"radio-container\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --motion-radio-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n --color-radio-label: var(--fhi-color-neutral-text-default);\n --color-radio-border: var(--fhi-color-neutral-border-default);\n --color-radio-background: var(--fhi-color-neutral-background-default);\n\n --color-radio-border-hover: var(--fhi-color-accent-border-strong);\n --color-radio-background-hover: var(--fhi-color-accent-background-subtle);\n\n --color-radio-background-active: var(--fhi-color-accent-surface-default);\n\n --color-radio-outline: var(--fhi-color-accent-surface-hover);\n\n --typography-radio-label-font-family: var(--fhi-font-family-default);\n --typography-radio-label-font-size: var(\n --fhi-typography-body-medium-font-size\n );\n\n --typography-radio-label-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n\n --typography-radio-label-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-radio-label-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-radio-label-gap: var(--fhi-spacing-050);\n --dimension-radio-width: var(--fhi-spacing-250);\n --dimension-radio-height: var(--fhi-spacing-250);\n --dimension-radio-margin: 0.125rem;\n --dimension-radio-border-width: var(--fhi-dimension-border-width);\n\n --dimension-radio-dot-size: 1.125rem;\n\n /* Checked state */\n --dimension-radio-border-width-checked: var(\n --fhi-dimension-border-width-active\n );\n\n /* Error state */\n --color-radio-border-error: var(--fhi-color-danger-border-default);\n --color-radio-background-error: var(\n --fhi-color-danger-background-default\n );\n\n --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);\n --color-radio-background-error-hover: var(\n --fhi-color-danger-background-subtle\n );\n\n --color-radio-background-error-active: var(\n --fhi-color-danger-surface-default\n );\n\n --color-radio-outline-error: var(--fhi-color-danger-surface-hover);\n\n /* Disabled state */\n --opacity-disabled: var(--fhi-opacity-disabled);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n display: flex;\n position: relative;\n gap: var(--dimension-radio-label-gap);\n color: var(--color-radio-label);\n font-family: var(--typography-radio-label-font-family);\n font-size: var(--typography-radio-label-font-size);\n font-weight: var(--typography-radio-label-font-weight);\n line-height: var(--typography-radio-label-line-height);\n letter-spacing: var(--typography-radio-label-letter-spacing);\n }\n\n .radio-container {\n display: flex;\n position: relative;\n }\n\n input {\n appearance: none;\n margin: var(--dimension-radio-margin);\n width: var(--dimension-radio-width);\n height: var(--dimension-radio-height);\n background-color: var(--color-radio-background);\n border: var(--dimension-radio-border-width) solid\n var(--color-radio-border);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--motion-radio-transition);\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-radio-transition);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: var(--dimension-radio-dot-size);\n width: var(--dimension-radio-dot-size);\n }\n\n input:checked {\n border-width: var(--dimension-radio-border-width-checked);\n ~ .radio-dot {\n circle {\n fill: var(--color-radio-border);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--color-radio-border-hover);\n background-color: var(--color-radio-background-hover);\n }\n\n input:active:not(:checked) {\n border-color: var(--color-radio-border-hover);\n background-color: var(--color-radio-background-active);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--color-radio-outline);\n }\n }\n\n :host([status='error']) {\n input {\n border-color: var(--color-radio-border-error);\n background-color: var(--color-radio-background-error);\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--color-radio-border-error);\n }\n }\n }\n }\n\n :host([status='error']:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--color-radio-border-error-hover);\n background-color: var(--color-radio-background-error-hover);\n }\n\n input:active:not(:checked) {\n border-color: var(--color-radio-border-error-hover);\n background-color: var(--color-radio-background-error-active);\n outline-color: var(--color-radio-outline-error);\n }\n }\n `;\n}\n"],"names":["FhiRadioSelector","FhiRadio","LitElement","radios","radio","changedProperties","event","nextIndex","nextRadio","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
|
package/index.js
CHANGED
|
@@ -1,273 +1,276 @@
|
|
|
1
1
|
import { FhiButton as e, FhiButtonSelector as c } from "./fhi-button.js";
|
|
2
2
|
import { FhiCheckbox as n, FhiCheckboxSelector as t } from "./fhi-checkbox.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
78
|
-
import {
|
|
79
|
-
import {
|
|
80
|
-
import {
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
3
|
+
import { FhiRadio as F, FhiRadioSelector as I } from "./fhi-radio.js";
|
|
4
|
+
import { FhiTextInput as p, FhiTextInputSelector as f } from "./fhi-text-input.js";
|
|
5
|
+
import { FhiTooltip as x, FhiTooltipSelector as m } from "./fhi-tooltip.js";
|
|
6
|
+
import { FhiIconArrowDownLeft as a, FhiIconArrowDownLeftSelector as w } from "./fhi-icon-arrow-down-left.js";
|
|
7
|
+
import { FhiIconArrowDownRight as L, FhiIconArrowDownRightSelector as u } from "./fhi-icon-arrow-down-right.js";
|
|
8
|
+
import { FhiIconArrowDown as g, FhiIconArrowDownSelector as R } from "./fhi-icon-arrow-down.js";
|
|
9
|
+
import { FhiIconArrowLeft as v, FhiIconArrowLeftSelector as D } from "./fhi-icon-arrow-left.js";
|
|
10
|
+
import { FhiIconArrowRightLeft as E, FhiIconArrowRightLeftSelector as P } from "./fhi-icon-arrow-right-left.js";
|
|
11
|
+
import { FhiIconArrowRight as q, FhiIconArrowRightSelector as B } from "./fhi-icon-arrow-right.js";
|
|
12
|
+
import { FhiIconArrowUpDown as M, FhiIconArrowUpDownSelector as O } from "./fhi-icon-arrow-up-down.js";
|
|
13
|
+
import { FhiIconArrowUpLeft as T, FhiIconArrowUpLeftSelector as X } from "./fhi-icon-arrow-up-left.js";
|
|
14
|
+
import { FhiIconArrowUpRight as V, FhiIconArrowUpRightSelector as b } from "./fhi-icon-arrow-up-right.js";
|
|
15
|
+
import { FhiIconArrowUp as H, FhiIconArrowUpSelector as j } from "./fhi-icon-arrow-up.js";
|
|
16
|
+
import { FhiIconBell as K, FhiIconBellSelector as N } from "./fhi-icon-bell.js";
|
|
17
|
+
import { FhiIconCalendar as Y, FhiIconCalendarSelector as Z } from "./fhi-icon-calendar.js";
|
|
18
|
+
import { FhiIconCheck as $, FhiIconCheckSelector as oo } from "./fhi-icon-check.js";
|
|
19
|
+
import { FhiIconChevronDown as eo, FhiIconChevronDownSelector as co } from "./fhi-icon-chevron-down.js";
|
|
20
|
+
import { FhiIconChevronLeft as no, FhiIconChevronLeftSelector as to } from "./fhi-icon-chevron-left.js";
|
|
21
|
+
import { FhiIconChevronRight as Fo, FhiIconChevronRightSelector as Io } from "./fhi-icon-chevron-right.js";
|
|
22
|
+
import { FhiIconChevronUp as po, FhiIconChevronUpSelector as fo } from "./fhi-icon-chevron-up.js";
|
|
23
|
+
import { FhiIconChevronsDown as xo, FhiIconChevronsDownSelector as mo } from "./fhi-icon-chevrons-down.js";
|
|
24
|
+
import { FhiIconChevronsLeft as ao, FhiIconChevronsLeftSelector as wo } from "./fhi-icon-chevrons-left.js";
|
|
25
|
+
import { FhiIconChevronsRight as Lo, FhiIconChevronsRightSelector as uo } from "./fhi-icon-chevrons-right.js";
|
|
26
|
+
import { FhiIconChevronsUp as go, FhiIconChevronsUpSelector as Ro } from "./fhi-icon-chevrons-up.js";
|
|
27
|
+
import { FhiIconCircleArrowDown as vo, FhiIconCircleArrowDownSelector as Do } from "./fhi-icon-circle-arrow-down.js";
|
|
28
|
+
import { FhiIconCircleArrowLeft as Eo, FhiIconCircleArrowLeftSelector as Po } from "./fhi-icon-circle-arrow-left.js";
|
|
29
|
+
import { FhiIconCircleArrowRight as Bo, FhiIconCircleArrowRightSelector as Go } from "./fhi-icon-circle-arrow-right.js";
|
|
30
|
+
import { FhiIconCircleArrowUp as Oo, FhiIconCircleArrowUpSelector as yo } from "./fhi-icon-circle-arrow-up.js";
|
|
31
|
+
import { FhiIconCircleCheckBig as Xo, FhiIconCircleCheckBigSelector as Qo } from "./fhi-icon-circle-check-big.js";
|
|
32
|
+
import { FhiIconCircleCheck as bo, FhiIconCircleCheckSelector as zo } from "./fhi-icon-circle-check.js";
|
|
33
|
+
import { FhiIconCircleChevronDown as jo, FhiIconCircleChevronDownSelector as Jo } from "./fhi-icon-circle-chevron-down.js";
|
|
34
|
+
import { FhiIconCircleChevronLeft as No, FhiIconCircleChevronLeftSelector as Wo } from "./fhi-icon-circle-chevron-left.js";
|
|
35
|
+
import { FhiIconCircleChevronRight as Zo, FhiIconCircleChevronRightSelector as _o } from "./fhi-icon-circle-chevron-right.js";
|
|
36
|
+
import { FhiIconCircleChevronUp as or, FhiIconCircleChevronUpSelector as rr } from "./fhi-icon-circle-chevron-up.js";
|
|
37
|
+
import { FhiIconCircleExclamation as cr, FhiIconCircleExclamationSelector as ir } from "./fhi-icon-circle-exclamation.js";
|
|
38
|
+
import { FhiIconCircleInfo as tr, FhiIconCircleInfoSelector as hr } from "./fhi-icon-circle-info.js";
|
|
39
|
+
import { FhiIconCircleMinus as Ir, FhiIconCircleMinusSelector as lr } from "./fhi-icon-circle-minus.js";
|
|
40
|
+
import { FhiIconCirclePlus as fr, FhiIconCirclePlusSelector as Sr } from "./fhi-icon-circle-plus.js";
|
|
41
|
+
import { FhiIconCircleQuestion as mr, FhiIconCircleQuestionSelector as Cr } from "./fhi-icon-circle-question.js";
|
|
42
|
+
import { FhiIconCircleX as wr, FhiIconCircleXSelector as sr } from "./fhi-icon-circle-x.js";
|
|
43
|
+
import { FhiIconCircle as ur, FhiIconCircleSelector as Ar } from "./fhi-icon-circle.js";
|
|
44
|
+
import { FhiIconClock as Rr, FhiIconClockSelector as kr } from "./fhi-icon-clock.js";
|
|
45
|
+
import { FhiIconCopy as Dr, FhiIconCopySelector as Ur } from "./fhi-icon-copy.js";
|
|
46
|
+
import { FhiIconDownload as Pr, FhiIconDownloadSelector as dr } from "./fhi-icon-download.js";
|
|
47
|
+
import { FhiIconEllipsisVertical as Br, FhiIconEllipsisVerticalSelector as Gr } from "./fhi-icon-ellipsis-vertical.js";
|
|
48
|
+
import { FhiIconEllipsis as Or, FhiIconEllipsisSelector as yr } from "./fhi-icon-ellipsis.js";
|
|
49
|
+
import { FhiIconExclamation as Xr, FhiIconExclamationSelector as Qr } from "./fhi-icon-exclamation.js";
|
|
50
|
+
import { FhiIconExpand as br, FhiIconExpandSelector as zr } from "./fhi-icon-expand.js";
|
|
51
|
+
import { FhiIconExternalLink as jr, FhiIconExternalLinkSelector as Jr } from "./fhi-icon-external-link.js";
|
|
52
|
+
import { FhiIconEyeOff as Nr, FhiIconEyeOffSelector as Wr } from "./fhi-icon-eye-off.js";
|
|
53
|
+
import { FhiIconEye as Zr, FhiIconEyeSelector as _r } from "./fhi-icon-eye.js";
|
|
54
|
+
import { FhiIconFile as oe, FhiIconFileSelector as re } from "./fhi-icon-file.js";
|
|
55
|
+
import { FhiIconFolder as ce, FhiIconFolderSelector as ie } from "./fhi-icon-folder.js";
|
|
56
|
+
import { FhiIconGear as te, FhiIconGearSelector as he } from "./fhi-icon-gear.js";
|
|
57
|
+
import { FhiIconGrid9Dots as Ie, FhiIconGrid9DotsSelector as le } from "./fhi-icon-grid-9-dots.js";
|
|
58
|
+
import { FhiIconGripHorizontal as fe, FhiIconGripHorizontalSelector as Se } from "./fhi-icon-grip-horizontal.js";
|
|
59
|
+
import { FhiIconGripVertical as me, FhiIconGripVerticalSelector as Ce } from "./fhi-icon-grip-vertical.js";
|
|
60
|
+
import { FhiIconInfo as we, FhiIconInfoSelector as se } from "./fhi-icon-info.js";
|
|
61
|
+
import { FhiIconLink2Off as ue, FhiIconLink2OffSelector as Ae } from "./fhi-icon-link-2-off.js";
|
|
62
|
+
import { FhiIconLink2 as Re, FhiIconLink2Selector as ke } from "./fhi-icon-link-2.js";
|
|
63
|
+
import { FhiIconLink as De, FhiIconLinkSelector as Ue } from "./fhi-icon-link.js";
|
|
64
|
+
import { FhiIconLock as Pe, FhiIconLockSelector as de } from "./fhi-icon-lock.js";
|
|
65
|
+
import { FhiIconLogIn as Be, FhiIconLogInSelector as Ge } from "./fhi-icon-log-in.js";
|
|
66
|
+
import { FhiIconLogOut as Oe, FhiIconLogOutSelector as ye } from "./fhi-icon-log-out.js";
|
|
67
|
+
import { FhiIconMail as Xe, FhiIconMailSelector as Qe } from "./fhi-icon-mail.js";
|
|
68
|
+
import { FhiIconMenu as be, FhiIconMenuSelector as ze } from "./fhi-icon-menu.js";
|
|
69
|
+
import { FhiIconMinus as je, FhiIconMinusSelector as Je } from "./fhi-icon-minus.js";
|
|
70
|
+
import { FhiIconPaperclip as Ne, FhiIconPaperclipSelector as We } from "./fhi-icon-paperclip.js";
|
|
71
|
+
import { FhiIconPencil as Ze, FhiIconPencilSelector as _e } from "./fhi-icon-pencil.js";
|
|
72
|
+
import { FhiIconPinOff as oc, FhiIconPinOffSelector as rc } from "./fhi-icon-pin-off.js";
|
|
73
|
+
import { FhiIconPin as cc, FhiIconPinSelector as ic } from "./fhi-icon-pin.js";
|
|
74
|
+
import { FhiIconPlus as tc, FhiIconPlusSelector as hc } from "./fhi-icon-plus.js";
|
|
75
|
+
import { FhiIconPrinter as Ic, FhiIconPrinterSelector as lc } from "./fhi-icon-printer.js";
|
|
76
|
+
import { FhiIconQuestion as fc, FhiIconQuestionSelector as Sc } from "./fhi-icon-question.js";
|
|
77
|
+
import { FhiIconRefresh as mc, FhiIconRefreshSelector as Cc } from "./fhi-icon-refresh.js";
|
|
78
|
+
import { FhiIconRotateLeft as wc, FhiIconRotateLeftSelector as sc } from "./fhi-icon-rotate-left.js";
|
|
79
|
+
import { FhiIconRotateRight as uc, FhiIconRotateRightSelector as Ac } from "./fhi-icon-rotate-right.js";
|
|
80
|
+
import { FhiIconSearch as Rc, FhiIconSearchSelector as kc } from "./fhi-icon-search.js";
|
|
81
|
+
import { FhiIconShare as Dc, FhiIconShareSelector as Uc } from "./fhi-icon-share.js";
|
|
82
|
+
import { FhiIconSheet as Pc, FhiIconSheetSelector as dc } from "./fhi-icon-sheet.js";
|
|
83
|
+
import { FhiIconSquareCheckBig as Bc, FhiIconSquareCheckBigSelector as Gc } from "./fhi-icon-square-check-big.js";
|
|
84
|
+
import { FhiIconSquareCheck as Oc, FhiIconSquareCheckSelector as yc } from "./fhi-icon-square-check.js";
|
|
85
|
+
import { FhiIconSquarePen as Xc, FhiIconSquarePenSelector as Qc } from "./fhi-icon-square-pen.js";
|
|
86
|
+
import { FhiIconSquareX as bc, FhiIconSquareXSelector as zc } from "./fhi-icon-square-x.js";
|
|
87
|
+
import { FhiIconSquare as jc, FhiIconSquareSelector as Jc } from "./fhi-icon-square.js";
|
|
88
|
+
import { FhiIconTrash as Nc, FhiIconTrashSelector as Wc } from "./fhi-icon-trash.js";
|
|
89
|
+
import { FhiIconUpload as Zc, FhiIconUploadSelector as _c } from "./fhi-icon-upload.js";
|
|
90
|
+
import { FhiIconUser as oi, FhiIconUserSelector as ri } from "./fhi-icon-user.js";
|
|
91
|
+
import { FhiIconX as ci, FhiIconXSelector as ii } from "./fhi-icon-x.js";
|
|
91
92
|
export {
|
|
92
93
|
e as FhiButton,
|
|
93
94
|
c as FhiButtonSelector,
|
|
94
95
|
n as FhiCheckbox,
|
|
95
96
|
t as FhiCheckboxSelector,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
F as
|
|
269
|
-
I as
|
|
270
|
-
p as
|
|
271
|
-
f as
|
|
97
|
+
g as FhiIconArrowDown,
|
|
98
|
+
a as FhiIconArrowDownLeft,
|
|
99
|
+
w as FhiIconArrowDownLeftSelector,
|
|
100
|
+
L as FhiIconArrowDownRight,
|
|
101
|
+
u as FhiIconArrowDownRightSelector,
|
|
102
|
+
R as FhiIconArrowDownSelector,
|
|
103
|
+
v as FhiIconArrowLeft,
|
|
104
|
+
D as FhiIconArrowLeftSelector,
|
|
105
|
+
q as FhiIconArrowRight,
|
|
106
|
+
E as FhiIconArrowRightLeft,
|
|
107
|
+
P as FhiIconArrowRightLeftSelector,
|
|
108
|
+
B as FhiIconArrowRightSelector,
|
|
109
|
+
H as FhiIconArrowUp,
|
|
110
|
+
M as FhiIconArrowUpDown,
|
|
111
|
+
O as FhiIconArrowUpDownSelector,
|
|
112
|
+
T as FhiIconArrowUpLeft,
|
|
113
|
+
X as FhiIconArrowUpLeftSelector,
|
|
114
|
+
V as FhiIconArrowUpRight,
|
|
115
|
+
b as FhiIconArrowUpRightSelector,
|
|
116
|
+
j as FhiIconArrowUpSelector,
|
|
117
|
+
K as FhiIconBell,
|
|
118
|
+
N as FhiIconBellSelector,
|
|
119
|
+
Y as FhiIconCalendar,
|
|
120
|
+
Z as FhiIconCalendarSelector,
|
|
121
|
+
$ as FhiIconCheck,
|
|
122
|
+
oo as FhiIconCheckSelector,
|
|
123
|
+
eo as FhiIconChevronDown,
|
|
124
|
+
co as FhiIconChevronDownSelector,
|
|
125
|
+
no as FhiIconChevronLeft,
|
|
126
|
+
to as FhiIconChevronLeftSelector,
|
|
127
|
+
Fo as FhiIconChevronRight,
|
|
128
|
+
Io as FhiIconChevronRightSelector,
|
|
129
|
+
po as FhiIconChevronUp,
|
|
130
|
+
fo as FhiIconChevronUpSelector,
|
|
131
|
+
xo as FhiIconChevronsDown,
|
|
132
|
+
mo as FhiIconChevronsDownSelector,
|
|
133
|
+
ao as FhiIconChevronsLeft,
|
|
134
|
+
wo as FhiIconChevronsLeftSelector,
|
|
135
|
+
Lo as FhiIconChevronsRight,
|
|
136
|
+
uo as FhiIconChevronsRightSelector,
|
|
137
|
+
go as FhiIconChevronsUp,
|
|
138
|
+
Ro as FhiIconChevronsUpSelector,
|
|
139
|
+
ur as FhiIconCircle,
|
|
140
|
+
vo as FhiIconCircleArrowDown,
|
|
141
|
+
Do as FhiIconCircleArrowDownSelector,
|
|
142
|
+
Eo as FhiIconCircleArrowLeft,
|
|
143
|
+
Po as FhiIconCircleArrowLeftSelector,
|
|
144
|
+
Bo as FhiIconCircleArrowRight,
|
|
145
|
+
Go as FhiIconCircleArrowRightSelector,
|
|
146
|
+
Oo as FhiIconCircleArrowUp,
|
|
147
|
+
yo as FhiIconCircleArrowUpSelector,
|
|
148
|
+
bo as FhiIconCircleCheck,
|
|
149
|
+
Xo as FhiIconCircleCheckBig,
|
|
150
|
+
Qo as FhiIconCircleCheckBigSelector,
|
|
151
|
+
zo as FhiIconCircleCheckSelector,
|
|
152
|
+
jo as FhiIconCircleChevronDown,
|
|
153
|
+
Jo as FhiIconCircleChevronDownSelector,
|
|
154
|
+
No as FhiIconCircleChevronLeft,
|
|
155
|
+
Wo as FhiIconCircleChevronLeftSelector,
|
|
156
|
+
Zo as FhiIconCircleChevronRight,
|
|
157
|
+
_o as FhiIconCircleChevronRightSelector,
|
|
158
|
+
or as FhiIconCircleChevronUp,
|
|
159
|
+
rr as FhiIconCircleChevronUpSelector,
|
|
160
|
+
cr as FhiIconCircleExclamation,
|
|
161
|
+
ir as FhiIconCircleExclamationSelector,
|
|
162
|
+
tr as FhiIconCircleInfo,
|
|
163
|
+
hr as FhiIconCircleInfoSelector,
|
|
164
|
+
Ir as FhiIconCircleMinus,
|
|
165
|
+
lr as FhiIconCircleMinusSelector,
|
|
166
|
+
fr as FhiIconCirclePlus,
|
|
167
|
+
Sr as FhiIconCirclePlusSelector,
|
|
168
|
+
mr as FhiIconCircleQuestion,
|
|
169
|
+
Cr as FhiIconCircleQuestionSelector,
|
|
170
|
+
Ar as FhiIconCircleSelector,
|
|
171
|
+
wr as FhiIconCircleX,
|
|
172
|
+
sr as FhiIconCircleXSelector,
|
|
173
|
+
Rr as FhiIconClock,
|
|
174
|
+
kr as FhiIconClockSelector,
|
|
175
|
+
Dr as FhiIconCopy,
|
|
176
|
+
Ur as FhiIconCopySelector,
|
|
177
|
+
Pr as FhiIconDownload,
|
|
178
|
+
dr as FhiIconDownloadSelector,
|
|
179
|
+
Or as FhiIconEllipsis,
|
|
180
|
+
yr as FhiIconEllipsisSelector,
|
|
181
|
+
Br as FhiIconEllipsisVertical,
|
|
182
|
+
Gr as FhiIconEllipsisVerticalSelector,
|
|
183
|
+
Xr as FhiIconExclamation,
|
|
184
|
+
Qr as FhiIconExclamationSelector,
|
|
185
|
+
br as FhiIconExpand,
|
|
186
|
+
zr as FhiIconExpandSelector,
|
|
187
|
+
jr as FhiIconExternalLink,
|
|
188
|
+
Jr as FhiIconExternalLinkSelector,
|
|
189
|
+
Zr as FhiIconEye,
|
|
190
|
+
Nr as FhiIconEyeOff,
|
|
191
|
+
Wr as FhiIconEyeOffSelector,
|
|
192
|
+
_r as FhiIconEyeSelector,
|
|
193
|
+
oe as FhiIconFile,
|
|
194
|
+
re as FhiIconFileSelector,
|
|
195
|
+
ce as FhiIconFolder,
|
|
196
|
+
ie as FhiIconFolderSelector,
|
|
197
|
+
te as FhiIconGear,
|
|
198
|
+
he as FhiIconGearSelector,
|
|
199
|
+
Ie as FhiIconGrid9Dots,
|
|
200
|
+
le as FhiIconGrid9DotsSelector,
|
|
201
|
+
fe as FhiIconGripHorizontal,
|
|
202
|
+
Se as FhiIconGripHorizontalSelector,
|
|
203
|
+
me as FhiIconGripVertical,
|
|
204
|
+
Ce as FhiIconGripVerticalSelector,
|
|
205
|
+
we as FhiIconInfo,
|
|
206
|
+
se as FhiIconInfoSelector,
|
|
207
|
+
De as FhiIconLink,
|
|
208
|
+
Re as FhiIconLink2,
|
|
209
|
+
ue as FhiIconLink2Off,
|
|
210
|
+
Ae as FhiIconLink2OffSelector,
|
|
211
|
+
ke as FhiIconLink2Selector,
|
|
212
|
+
Ue as FhiIconLinkSelector,
|
|
213
|
+
Pe as FhiIconLock,
|
|
214
|
+
de as FhiIconLockSelector,
|
|
215
|
+
Be as FhiIconLogIn,
|
|
216
|
+
Ge as FhiIconLogInSelector,
|
|
217
|
+
Oe as FhiIconLogOut,
|
|
218
|
+
ye as FhiIconLogOutSelector,
|
|
219
|
+
Xe as FhiIconMail,
|
|
220
|
+
Qe as FhiIconMailSelector,
|
|
221
|
+
be as FhiIconMenu,
|
|
222
|
+
ze as FhiIconMenuSelector,
|
|
223
|
+
je as FhiIconMinus,
|
|
224
|
+
Je as FhiIconMinusSelector,
|
|
225
|
+
Ne as FhiIconPaperclip,
|
|
226
|
+
We as FhiIconPaperclipSelector,
|
|
227
|
+
Ze as FhiIconPencil,
|
|
228
|
+
_e as FhiIconPencilSelector,
|
|
229
|
+
cc as FhiIconPin,
|
|
230
|
+
oc as FhiIconPinOff,
|
|
231
|
+
rc as FhiIconPinOffSelector,
|
|
232
|
+
ic as FhiIconPinSelector,
|
|
233
|
+
tc as FhiIconPlus,
|
|
234
|
+
hc as FhiIconPlusSelector,
|
|
235
|
+
Ic as FhiIconPrinter,
|
|
236
|
+
lc as FhiIconPrinterSelector,
|
|
237
|
+
fc as FhiIconQuestion,
|
|
238
|
+
Sc as FhiIconQuestionSelector,
|
|
239
|
+
mc as FhiIconRefresh,
|
|
240
|
+
Cc as FhiIconRefreshSelector,
|
|
241
|
+
wc as FhiIconRotateLeft,
|
|
242
|
+
sc as FhiIconRotateLeftSelector,
|
|
243
|
+
uc as FhiIconRotateRight,
|
|
244
|
+
Ac as FhiIconRotateRightSelector,
|
|
245
|
+
Rc as FhiIconSearch,
|
|
246
|
+
kc as FhiIconSearchSelector,
|
|
247
|
+
Dc as FhiIconShare,
|
|
248
|
+
Uc as FhiIconShareSelector,
|
|
249
|
+
Pc as FhiIconSheet,
|
|
250
|
+
dc as FhiIconSheetSelector,
|
|
251
|
+
jc as FhiIconSquare,
|
|
252
|
+
Oc as FhiIconSquareCheck,
|
|
253
|
+
Bc as FhiIconSquareCheckBig,
|
|
254
|
+
Gc as FhiIconSquareCheckBigSelector,
|
|
255
|
+
yc as FhiIconSquareCheckSelector,
|
|
256
|
+
Xc as FhiIconSquarePen,
|
|
257
|
+
Qc as FhiIconSquarePenSelector,
|
|
258
|
+
Jc as FhiIconSquareSelector,
|
|
259
|
+
bc as FhiIconSquareX,
|
|
260
|
+
zc as FhiIconSquareXSelector,
|
|
261
|
+
Nc as FhiIconTrash,
|
|
262
|
+
Wc as FhiIconTrashSelector,
|
|
263
|
+
Zc as FhiIconUpload,
|
|
264
|
+
_c as FhiIconUploadSelector,
|
|
265
|
+
oi as FhiIconUser,
|
|
266
|
+
ri as FhiIconUserSelector,
|
|
267
|
+
ci as FhiIconX,
|
|
268
|
+
ii as FhiIconXSelector,
|
|
269
|
+
F as FhiRadio,
|
|
270
|
+
I as FhiRadioSelector,
|
|
271
|
+
p as FhiTextInput,
|
|
272
|
+
f as FhiTextInputSelector,
|
|
273
|
+
x as FhiTooltip,
|
|
274
|
+
m as FhiTooltipSelector
|
|
272
275
|
};
|
|
273
276
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"title": "FHI Designsystem",
|
|
3
3
|
"author": "FHI Designsystem team",
|
|
4
4
|
"name": "@folkehelseinstituttet/designsystem",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.12.0",
|
|
6
6
|
"description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"fhi",
|