@folkehelseinstituttet/designsystem 0.38.1 → 0.38.3
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/custom-elements.json +1 -1
- package/fhi-body.js +32 -49
- package/fhi-body.js.map +1 -1
- package/fhi-display.js +29 -52
- package/fhi-display.js.map +1 -1
- package/fhi-headline.js +25 -48
- package/fhi-headline.js.map +1 -1
- package/fhi-label.js +23 -42
- package/fhi-label.js.map +1 -1
- package/fhi-tag.js +40 -62
- package/fhi-tag.js.map +1 -1
- package/fhi-tag.manifest.json +1 -1
- package/fhi-title.js +35 -54
- package/fhi-title.js.map +1 -1
- package/package.json +1 -1
- package/web-types.json +3 -3
package/fhi-body.js
CHANGED
|
@@ -1,43 +1,26 @@
|
|
|
1
|
-
import { i as
|
|
2
|
-
var
|
|
3
|
-
for (var
|
|
4
|
-
(
|
|
5
|
-
return
|
|
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
|
|
8
|
-
let
|
|
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(
|
|
13
|
-
super.updated(
|
|
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
|
|
16
|
+
return f`
|
|
17
17
|
<span class="body">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</span>
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
|
|
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
|
|
55
|
-
font-weight: var(--font-weight
|
|
56
|
-
line-height: var(--line-height
|
|
57
|
-
letter-spacing: var(--letter-spacing
|
|
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
|
|
64
|
-
font-weight: var(--font-weight
|
|
65
|
-
line-height: var(--line-height
|
|
66
|
-
letter-spacing: var(--letter-spacing
|
|
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
|
|
73
|
-
font-weight: var(--font-weight
|
|
74
|
-
line-height: var(--line-height
|
|
75
|
-
letter-spacing: var(--letter-spacing
|
|
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
|
-
|
|
81
|
-
],
|
|
63
|
+
y({ type: String, reflect: !0 })
|
|
64
|
+
], o.prototype, "size", 2);
|
|
82
65
|
s([
|
|
83
|
-
|
|
84
|
-
],
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
],
|
|
66
|
+
y({ type: String })
|
|
67
|
+
], o.prototype, "color", 2);
|
|
68
|
+
o = s([
|
|
69
|
+
g(m)
|
|
70
|
+
], o);
|
|
88
71
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
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
|
|
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-display.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { i as
|
|
2
|
-
import { o as
|
|
3
|
-
var
|
|
4
|
-
for (var i =
|
|
5
|
-
(
|
|
6
|
-
return
|
|
1
|
+
import { i as y, n as h, a as n, b as f, t as g } from "./property-B2Ico5CW.js";
|
|
2
|
+
import { o as d } from "./unsafe-html-DfuTUjUu.js";
|
|
3
|
+
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
|
|
4
|
+
for (var i = r > 1 ? void 0 : r ? v(t, s) : t, o = e.length - 1, p; o >= 0; o--)
|
|
5
|
+
(p = e[o]) && (i = (r ? p(t, s, i) : p(i)) || i);
|
|
6
|
+
return r && i && m(t, s, i), i;
|
|
7
7
|
};
|
|
8
8
|
const u = "fhi-display";
|
|
9
|
-
let l = class extends
|
|
9
|
+
let l = class extends n {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
@@ -27,33 +27,10 @@ let l = class extends g {
|
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</h${this.level}>
|
|
29
29
|
`;
|
|
30
|
-
return f`${
|
|
30
|
+
return f`${d(e)}`;
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
l.styles =
|
|
34
|
-
:host {
|
|
35
|
-
--font-size-large: var(--fhi-typography-display-large-font-size);
|
|
36
|
-
--font-weight-large: var(--fhi-typography-display-large-font-weight);
|
|
37
|
-
--line-height-large: var(--fhi-typography-display-large-line-height);
|
|
38
|
-
--letter-spacing-large: var(
|
|
39
|
-
--fhi-typography-display-large-letter-spacing
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
--font-size-medium: var(--fhi-typography-display-medium-font-size);
|
|
43
|
-
--font-weight-medium: var(--fhi-typography-display-medium-font-weight);
|
|
44
|
-
--line-height-medium: var(--fhi-typography-display-medium-line-height);
|
|
45
|
-
--letter-spacing-medium: var(
|
|
46
|
-
--fhi-typography-display-medium-letter-spacing
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
--font-size-small: var(--fhi-typography-display-small-font-size);
|
|
50
|
-
--font-weight-small: var(--fhi-typography-display-small-font-weight);
|
|
51
|
-
--line-height-small: var(--fhi-typography-display-small-line-height);
|
|
52
|
-
--letter-spacing-small: var(
|
|
53
|
-
--fhi-typography-display-small-letter-spacing
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
|
|
33
|
+
l.styles = y`
|
|
57
34
|
:host {
|
|
58
35
|
display: block;
|
|
59
36
|
contain: layout;
|
|
@@ -67,42 +44,42 @@ l.styles = n`
|
|
|
67
44
|
|
|
68
45
|
:host([size='large']) {
|
|
69
46
|
.display {
|
|
70
|
-
font-size: var(--font-size
|
|
71
|
-
font-weight: var(--font-weight
|
|
72
|
-
line-height: var(--line-height
|
|
73
|
-
letter-spacing: var(--letter-spacing
|
|
47
|
+
font-size: var(--fhi-typography-display-large-font-size);
|
|
48
|
+
font-weight: var(--fhi-typography-display-large-font-weight);
|
|
49
|
+
line-height: var(--fhi-typography-display-large-line-height);
|
|
50
|
+
letter-spacing: var(--fhi-typography-display-large-letter-spacing);
|
|
74
51
|
}
|
|
75
52
|
}
|
|
76
53
|
|
|
77
54
|
:host([size='medium']) {
|
|
78
55
|
.display {
|
|
79
|
-
font-size: var(--font-size
|
|
80
|
-
font-weight: var(--font-weight
|
|
81
|
-
line-height: var(--line-height
|
|
82
|
-
letter-spacing: var(--letter-spacing
|
|
56
|
+
font-size: var(--fhi-typography-display-medium-font-size);
|
|
57
|
+
font-weight: var(--fhi-typography-display-medium-font-weight);
|
|
58
|
+
line-height: var(--fhi-typography-display-medium-line-height);
|
|
59
|
+
letter-spacing: var(--fhi-typography-display-medium-letter-spacing);
|
|
83
60
|
}
|
|
84
61
|
}
|
|
85
62
|
|
|
86
63
|
:host([size='small']) {
|
|
87
64
|
.display {
|
|
88
|
-
font-size: var(--font-size
|
|
89
|
-
font-weight: var(--font-weight
|
|
90
|
-
line-height: var(--line-height
|
|
91
|
-
letter-spacing: var(--letter-spacing
|
|
65
|
+
font-size: var(--fhi-typography-display-small-font-size);
|
|
66
|
+
font-weight: var(--fhi-typography-display-small-font-weight);
|
|
67
|
+
line-height: var(--fhi-typography-display-small-line-height);
|
|
68
|
+
letter-spacing: var(--fhi-typography-display-small-letter-spacing);
|
|
92
69
|
}
|
|
93
70
|
}
|
|
94
71
|
`;
|
|
95
|
-
|
|
96
|
-
|
|
72
|
+
a([
|
|
73
|
+
h({ type: String, reflect: !0 })
|
|
97
74
|
], l.prototype, "size", 2);
|
|
98
|
-
|
|
99
|
-
|
|
75
|
+
a([
|
|
76
|
+
h({ type: String })
|
|
100
77
|
], l.prototype, "color", 2);
|
|
101
|
-
|
|
102
|
-
|
|
78
|
+
a([
|
|
79
|
+
h({ type: Number })
|
|
103
80
|
], l.prototype, "level", 2);
|
|
104
|
-
l =
|
|
105
|
-
|
|
81
|
+
l = a([
|
|
82
|
+
g(u)
|
|
106
83
|
], l);
|
|
107
84
|
export {
|
|
108
85
|
l as FhiDisplay,
|
package/fhi-display.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay 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-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\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 const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n
|
|
1
|
+
{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay 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-display color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-display>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: DisplayLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\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 const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .display {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .display {\n font-size: var(--fhi-typography-display-large-font-size);\n font-weight: var(--fhi-typography-display-large-font-weight);\n line-height: var(--fhi-typography-display-large-line-height);\n letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--fhi-typography-display-medium-font-size);\n font-weight: var(--fhi-typography-display-medium-font-weight);\n line-height: var(--fhi-typography-display-medium-line-height);\n letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--fhi-typography-display-small-font-size);\n font-weight: var(--fhi-typography-display-small-font-weight);\n line-height: var(--fhi-typography-display-small-line-height);\n letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n }\n }\n `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAuB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAyCF;AAxGaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}
|
package/fhi-headline.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { i as
|
|
1
|
+
import { i as p, n as s, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
|
|
2
2
|
import { o as d } from "./unsafe-html-DfuTUjUu.js";
|
|
3
|
-
var
|
|
4
|
-
for (var i =
|
|
5
|
-
(
|
|
6
|
-
return
|
|
3
|
+
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, h, r) => {
|
|
4
|
+
for (var i = r > 1 ? void 0 : r ? v(t, h) : t, o = e.length - 1, n; o >= 0; o--)
|
|
5
|
+
(n = e[o]) && (i = (r ? n(t, h, i) : n(i)) || i);
|
|
6
|
+
return r && i && m(t, h, i), i;
|
|
7
7
|
};
|
|
8
8
|
const u = "fhi-headline";
|
|
9
|
-
let l = class extends
|
|
9
|
+
let l = class extends f {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
@@ -27,33 +27,10 @@ let l = class extends p {
|
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</h${this.level}>
|
|
29
29
|
`;
|
|
30
|
-
return
|
|
30
|
+
return g`${d(e)}`;
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
l.styles =
|
|
34
|
-
:host {
|
|
35
|
-
--font-size-large: var(--fhi-typography-headline-large-font-size);
|
|
36
|
-
--font-weight-large: var(--fhi-typography-headline-large-font-weight);
|
|
37
|
-
--line-height-large: var(--fhi-typography-headline-large-line-height);
|
|
38
|
-
--letter-spacing-large: var(
|
|
39
|
-
--fhi-typography-headline-large-letter-spacing
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
--font-size-medium: var(--fhi-typography-headline-medium-font-size);
|
|
43
|
-
--font-weight-medium: var(--fhi-typography-headline-medium-font-weight);
|
|
44
|
-
--line-height-medium: var(--fhi-typography-headline-medium-line-height);
|
|
45
|
-
--letter-spacing-medium: var(
|
|
46
|
-
--fhi-typography-headline-medium-letter-spacing
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
--font-size-small: var(--fhi-typography-headline-small-font-size);
|
|
50
|
-
--font-weight-small: var(--fhi-typography-headline-small-font-weight);
|
|
51
|
-
--line-height-small: var(--fhi-typography-headline-small-line-height);
|
|
52
|
-
--letter-spacing-small: var(
|
|
53
|
-
--fhi-typography-headline-small-letter-spacing
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
|
|
33
|
+
l.styles = p`
|
|
57
34
|
:host {
|
|
58
35
|
display: block;
|
|
59
36
|
contain: layout;
|
|
@@ -67,42 +44,42 @@ l.styles = g`
|
|
|
67
44
|
|
|
68
45
|
:host([size='large']) {
|
|
69
46
|
.headline {
|
|
70
|
-
font-size: var(--font-size
|
|
71
|
-
font-weight: var(--font-weight
|
|
72
|
-
line-height: var(--line-height
|
|
73
|
-
letter-spacing: var(--letter-spacing
|
|
47
|
+
font-size: var(--fhi-typography-headline-large-font-size);
|
|
48
|
+
font-weight: var(--fhi-typography-headline-large-font-weight);
|
|
49
|
+
line-height: var(--fhi-typography-headline-large-line-height);
|
|
50
|
+
letter-spacing: var(--fhi-typography-headline-large-letter-spacing);
|
|
74
51
|
}
|
|
75
52
|
}
|
|
76
53
|
|
|
77
54
|
:host([size='medium']) {
|
|
78
55
|
.headline {
|
|
79
|
-
font-size: var(--font-size
|
|
80
|
-
font-weight: var(--font-weight
|
|
81
|
-
line-height: var(--line-height
|
|
82
|
-
letter-spacing: var(--letter-spacing
|
|
56
|
+
font-size: var(--fhi-typography-headline-medium-font-size);
|
|
57
|
+
font-weight: var(--fhi-typography-headline-medium-font-weight);
|
|
58
|
+
line-height: var(--fhi-typography-headline-medium-line-height);
|
|
59
|
+
letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);
|
|
83
60
|
}
|
|
84
61
|
}
|
|
85
62
|
|
|
86
63
|
:host([size='small']) {
|
|
87
64
|
.headline {
|
|
88
|
-
font-size: var(--font-size
|
|
89
|
-
font-weight: var(--font-weight
|
|
90
|
-
line-height: var(--line-height
|
|
91
|
-
letter-spacing: var(--letter-spacing
|
|
65
|
+
font-size: var(--fhi-typography-headline-small-font-size);
|
|
66
|
+
font-weight: var(--fhi-typography-headline-small-font-weight);
|
|
67
|
+
line-height: var(--fhi-typography-headline-small-line-height);
|
|
68
|
+
letter-spacing: var(--fhi-typography-headline-small-letter-spacing);
|
|
92
69
|
}
|
|
93
70
|
}
|
|
94
71
|
`;
|
|
95
|
-
|
|
72
|
+
a([
|
|
96
73
|
s({ type: String, reflect: !0 })
|
|
97
74
|
], l.prototype, "size", 2);
|
|
98
|
-
|
|
75
|
+
a([
|
|
99
76
|
s({ type: String })
|
|
100
77
|
], l.prototype, "color", 2);
|
|
101
|
-
|
|
78
|
+
a([
|
|
102
79
|
s({ type: Number })
|
|
103
80
|
], l.prototype, "level", 2);
|
|
104
|
-
l =
|
|
105
|
-
|
|
81
|
+
l = a([
|
|
82
|
+
y(u)
|
|
106
83
|
], l);
|
|
107
84
|
export {
|
|
108
85
|
l as FhiHeadline,
|
package/fhi-headline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\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-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\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 const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n
|
|
1
|
+
{"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n /**\n * Sets the size of the text styles.\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-headline color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-headline>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n * @type {1 | 2 | 3 | 4 | 5 | 6}\n */\n @property({ type: Number }) level!: HeadlineLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n const levelAsNumber = Number(this.level);\n if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n console.error(\n new TypeError(\n `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n ),\n );\n }\n }\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 const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .headline {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .headline {\n font-size: var(--fhi-typography-headline-large-font-size);\n font-weight: var(--fhi-typography-headline-large-font-weight);\n line-height: var(--fhi-typography-headline-large-line-height);\n letter-spacing: var(--fhi-typography-headline-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--fhi-typography-headline-medium-font-size);\n font-weight: var(--fhi-typography-headline-medium-font-weight);\n line-height: var(--fhi-typography-headline-medium-line-height);\n letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--fhi-typography-headline-small-font-size);\n font-weight: var(--fhi-typography-headline-small-font-weight);\n line-height: var(--fhi-typography-headline-small-line-height);\n letter-spacing: var(--fhi-typography-headline-small-letter-spacing);\n }\n }\n `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAuB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAyCF;AAxGaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAmB;AAAA,GACrBC,CAAA;"}
|
package/fhi-label.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { i as
|
|
2
|
-
var
|
|
3
|
-
for (var e = i > 1 ? void 0 : i ?
|
|
1
|
+
import { i as n, n as p, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
|
|
2
|
+
var b = Object.defineProperty, c = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
|
|
3
|
+
for (var e = i > 1 ? void 0 : i ? c(a, r) : a, o = t.length - 1, h; o >= 0; o--)
|
|
4
4
|
(h = t[o]) && (e = (i ? h(a, r, e) : h(e)) || e);
|
|
5
|
-
return i && e &&
|
|
5
|
+
return i && e && b(a, r, e), e;
|
|
6
6
|
};
|
|
7
|
-
const
|
|
7
|
+
const m = "fhi-label";
|
|
8
8
|
let l = class extends f {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments), this.size = "medium";
|
|
@@ -13,33 +13,14 @@ let l = class extends f {
|
|
|
13
13
|
super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return
|
|
16
|
+
return g`
|
|
17
17
|
<span class="label">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</span>
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
l.styles =
|
|
24
|
-
:host {
|
|
25
|
-
--font-size-large: var(--fhi-typography-label-large-font-size);
|
|
26
|
-
--font-weight-large: var(--fhi-typography-label-large-font-weight);
|
|
27
|
-
--line-height-large: var(--fhi-typography-label-large-line-height);
|
|
28
|
-
--letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);
|
|
29
|
-
|
|
30
|
-
--font-size-medium: var(--fhi-typography-label-medium-font-size);
|
|
31
|
-
--font-weight-medium: var(--fhi-typography-label-medium-font-weight);
|
|
32
|
-
--line-height-medium: var(--fhi-typography-label-medium-line-height);
|
|
33
|
-
--letter-spacing-medium: var(
|
|
34
|
-
--fhi-typography-label-medium-letter-spacing
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
--font-size-small: var(--fhi-typography-label-small-font-size);
|
|
38
|
-
--font-weight-small: var(--fhi-typography-label-small-font-weight);
|
|
39
|
-
--line-height-small: var(--fhi-typography-label-small-line-height);
|
|
40
|
-
--letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);
|
|
41
|
-
}
|
|
42
|
-
|
|
23
|
+
l.styles = n`
|
|
43
24
|
:host {
|
|
44
25
|
display: block;
|
|
45
26
|
contain: layout;
|
|
@@ -53,42 +34,42 @@ l.styles = g`
|
|
|
53
34
|
|
|
54
35
|
:host([size='large']) {
|
|
55
36
|
.label {
|
|
56
|
-
font-size: var(--font-size
|
|
57
|
-
font-weight: var(--font-weight
|
|
58
|
-
line-height: var(--line-height
|
|
59
|
-
letter-spacing: var(--letter-spacing
|
|
37
|
+
font-size: var(--fhi-typography-label-large-font-size);
|
|
38
|
+
font-weight: var(--fhi-typography-label-large-font-weight);
|
|
39
|
+
line-height: var(--fhi-typography-label-large-line-height);
|
|
40
|
+
letter-spacing: var(--fhi-typography-label-large-letter-spacing);
|
|
60
41
|
}
|
|
61
42
|
}
|
|
62
43
|
|
|
63
44
|
:host([size='medium']) {
|
|
64
45
|
.label {
|
|
65
|
-
font-size: var(--font-size
|
|
66
|
-
font-weight: var(--font-weight
|
|
67
|
-
line-height: var(--line-height
|
|
68
|
-
letter-spacing: var(--letter-spacing
|
|
46
|
+
font-size: var(--fhi-typography-label-medium-font-size);
|
|
47
|
+
font-weight: var(--fhi-typography-label-medium-font-weight);
|
|
48
|
+
line-height: var(--fhi-typography-label-medium-line-height);
|
|
49
|
+
letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
|
|
69
50
|
}
|
|
70
51
|
}
|
|
71
52
|
|
|
72
53
|
:host([size='small']) {
|
|
73
54
|
.label {
|
|
74
|
-
font-size: var(--font-size
|
|
75
|
-
font-weight: var(--font-weight
|
|
76
|
-
line-height: var(--line-height
|
|
77
|
-
letter-spacing: var(--letter-spacing
|
|
55
|
+
font-size: var(--fhi-typography-label-small-font-size);
|
|
56
|
+
font-weight: var(--fhi-typography-label-small-font-weight);
|
|
57
|
+
line-height: var(--fhi-typography-label-small-line-height);
|
|
58
|
+
letter-spacing: var(--fhi-typography-label-small-letter-spacing);
|
|
78
59
|
}
|
|
79
60
|
}
|
|
80
61
|
`;
|
|
81
62
|
s([
|
|
82
|
-
|
|
63
|
+
p({ type: String, reflect: !0 })
|
|
83
64
|
], l.prototype, "size", 2);
|
|
84
65
|
s([
|
|
85
|
-
|
|
66
|
+
p({ type: String })
|
|
86
67
|
], l.prototype, "color", 2);
|
|
87
68
|
l = s([
|
|
88
|
-
m
|
|
69
|
+
y(m)
|
|
89
70
|
], l);
|
|
90
71
|
export {
|
|
91
72
|
l as FhiLabel,
|
|
92
|
-
|
|
73
|
+
m as FhiLabelSelector
|
|
93
74
|
};
|
|
94
75
|
//# sourceMappingURL=fhi-label.js.map
|
package/fhi-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel 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-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\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=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n
|
|
1
|
+
{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel 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-label color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-label>\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=\"label\">\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 .label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .label {\n font-size: var(--fhi-typography-label-large-font-size);\n font-weight: var(--fhi-typography-label-large-font-weight);\n line-height: var(--fhi-typography-label-large-line-height);\n letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .label {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .label {\n font-size: var(--fhi-typography-label-small-font-size);\n font-weight: var(--fhi-typography-label-small-font-weight);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n }\n }\n `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,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,CAAgB;AAAA,GAClBC,CAAA;"}
|