@folkehelseinstituttet/designsystem 0.38.5 → 0.40.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/custom-elements.json +1 -1
- package/fhi-body.js +18 -19
- package/fhi-body.js.map +1 -1
- package/fhi-body.manifest.json +1 -1
- package/fhi-display.js +15 -16
- package/fhi-display.js.map +1 -1
- package/fhi-display.manifest.json +1 -1
- package/fhi-headline.js +7 -8
- package/fhi-headline.js.map +1 -1
- package/fhi-headline.manifest.json +1 -1
- package/fhi-label.js +5 -6
- package/fhi-label.js.map +1 -1
- package/fhi-label.manifest.json +1 -1
- package/fhi-tag.js +47 -25
- package/fhi-tag.js.map +1 -1
- package/fhi-tag.manifest.json +1 -1
- package/fhi-title.js +9 -10
- package/fhi-title.js.map +1 -1
- package/fhi-title.manifest.json +1 -1
- package/package.json +1 -1
- package/web-types.json +19 -6
package/fhi-body.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { i as p, n as
|
|
2
|
-
var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor,
|
|
3
|
-
for (var t = r > 1 ? void 0 : r ? c(i, a) : i, h =
|
|
4
|
-
(
|
|
1
|
+
import { i as p, n as l, a as n, b as f, t as g } from "./property-B2Ico5CW.js";
|
|
2
|
+
var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor, y = (o, i, a, r) => {
|
|
3
|
+
for (var t = r > 1 ? void 0 : r ? c(i, a) : i, h = o.length - 1, s; h >= 0; h--)
|
|
4
|
+
(s = o[h]) && (t = (r ? s(i, a, t) : s(t)) || t);
|
|
5
5
|
return r && t && d(i, a, t), t;
|
|
6
6
|
};
|
|
7
7
|
const m = "fhi-body";
|
|
8
|
-
let
|
|
8
|
+
let e = class extends n {
|
|
9
9
|
constructor() {
|
|
10
|
-
super(...arguments), this.size = "medium";
|
|
10
|
+
super(...arguments), this.size = "medium", this.color = "currentcolor";
|
|
11
11
|
}
|
|
12
|
-
updated(
|
|
13
|
-
super.updated(
|
|
12
|
+
updated(o) {
|
|
13
|
+
super.updated(o), o.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
return f`
|
|
@@ -20,11 +20,10 @@ let o = class extends n {
|
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
e.styles = p`
|
|
24
24
|
:host {
|
|
25
25
|
display: block;
|
|
26
26
|
contain: layout;
|
|
27
|
-
color: var(--fhi-color-neutral-text-default);
|
|
28
27
|
.body {
|
|
29
28
|
font-family: var(--fhi-font-family-default);
|
|
30
29
|
-webkit-font-smoothing: antialiased;
|
|
@@ -59,17 +58,17 @@ o.styles = p`
|
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
`;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
],
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
],
|
|
68
|
-
|
|
61
|
+
y([
|
|
62
|
+
l({ type: String, reflect: !0 })
|
|
63
|
+
], e.prototype, "size", 2);
|
|
64
|
+
y([
|
|
65
|
+
l({ type: String })
|
|
66
|
+
], e.prototype, "color", 2);
|
|
67
|
+
e = y([
|
|
69
68
|
g(m)
|
|
70
|
-
],
|
|
69
|
+
], e);
|
|
71
70
|
export {
|
|
72
|
-
|
|
71
|
+
e as FhiBody,
|
|
73
72
|
m as FhiBodySelector
|
|
74
73
|
};
|
|
75
74
|
//# 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'
|
|
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 = 'currentcolor';\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' ? this.color : 'currentcolor';\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 .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,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAE7C,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAwCF;AAnFaH,EA6CJ,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;AAvC2BC,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-body.manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
|
package/fhi-display.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
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
|
|
3
|
-
var
|
|
4
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
5
|
-
(p = e[o]) && (i = (r ? p(t,
|
|
6
|
-
return r && i &&
|
|
2
|
+
import { o as m } from "./unsafe-html-DfuTUjUu.js";
|
|
3
|
+
var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor, s = (e, t, a, r) => {
|
|
4
|
+
for (var i = r > 1 ? void 0 : r ? c(t, a) : t, o = e.length - 1, p; o >= 0; o--)
|
|
5
|
+
(p = e[o]) && (i = (r ? p(t, a, i) : p(i)) || i);
|
|
6
|
+
return r && i && d(t, a, i), i;
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const v = "fhi-display";
|
|
9
9
|
let l = class extends n {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(...arguments), this.size = "medium";
|
|
11
|
+
super(...arguments), this.size = "medium", this.color = "currentcolor";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
14
|
if (super.updated(e), e.has("level")) {
|
|
@@ -19,7 +19,7 @@ let l = class extends n {
|
|
|
19
19
|
)
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
|
-
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "
|
|
22
|
+
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
const e = `
|
|
@@ -27,14 +27,13 @@ let l = class extends n {
|
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</h${this.level}>
|
|
29
29
|
`;
|
|
30
|
-
return f`${
|
|
30
|
+
return f`${m(e)}`;
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
l.styles = y`
|
|
34
34
|
:host {
|
|
35
35
|
display: block;
|
|
36
36
|
contain: layout;
|
|
37
|
-
color: var(--fhi-color-neutral-text-default);
|
|
38
37
|
.display {
|
|
39
38
|
font-family: var(--fhi-font-family-default);
|
|
40
39
|
-webkit-font-smoothing: antialiased;
|
|
@@ -69,20 +68,20 @@ l.styles = y`
|
|
|
69
68
|
}
|
|
70
69
|
}
|
|
71
70
|
`;
|
|
72
|
-
|
|
71
|
+
s([
|
|
73
72
|
h({ type: String, reflect: !0 })
|
|
74
73
|
], l.prototype, "size", 2);
|
|
75
|
-
|
|
74
|
+
s([
|
|
76
75
|
h({ type: String })
|
|
77
76
|
], l.prototype, "color", 2);
|
|
78
|
-
|
|
77
|
+
s([
|
|
79
78
|
h({ type: Number })
|
|
80
79
|
], l.prototype, "level", 2);
|
|
81
|
-
l =
|
|
82
|
-
g(
|
|
80
|
+
l = s([
|
|
81
|
+
g(v)
|
|
83
82
|
], l);
|
|
84
83
|
export {
|
|
85
84
|
l as FhiDisplay,
|
|
86
|
-
|
|
85
|
+
v as FhiDisplaySelector
|
|
87
86
|
};
|
|
88
87
|
//# sourceMappingURL=fhi-display.js.map
|
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'
|
|
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 = 'currentcolor';\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' ? this.color : 'currentcolor';\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 .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,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAQ7C,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,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAwCF;AArGaJ,EA+DJ,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;AAzD2BC,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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/typography/fhi-display/fhi-display.component.ts","declarations":[{"kind":"class","description":"## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiDisplay","slots":[{"description":"The content of the fhi-display component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-display","customElement":true},{"kind":"variable","name":"FhiDisplaySelector","type":{"text":"string"},"default":"'fhi-display'"}]}
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/typography/fhi-display/fhi-display.component.ts","declarations":[{"kind":"class","description":"## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiDisplay","slots":[{"description":"The content of the fhi-display component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-display","customElement":true},{"kind":"variable","name":"FhiDisplaySelector","type":{"text":"string"},"default":"'fhi-display'"}]}
|
package/fhi-headline.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
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 m = Object.defineProperty,
|
|
4
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
3
|
+
var m = Object.defineProperty, c = Object.getOwnPropertyDescriptor, a = (e, t, h, r) => {
|
|
4
|
+
for (var i = r > 1 ? void 0 : r ? c(t, h) : t, o = e.length - 1, n; o >= 0; o--)
|
|
5
5
|
(n = e[o]) && (i = (r ? n(t, h, i) : n(i)) || i);
|
|
6
6
|
return r && i && m(t, h, i), i;
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const v = "fhi-headline";
|
|
9
9
|
let l = class extends f {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(...arguments), this.size = "medium";
|
|
11
|
+
super(...arguments), this.size = "medium", this.color = "currentcolor";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
14
|
if (super.updated(e), e.has("level")) {
|
|
@@ -19,7 +19,7 @@ let l = class extends f {
|
|
|
19
19
|
)
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
|
-
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "
|
|
22
|
+
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
const e = `
|
|
@@ -34,7 +34,6 @@ l.styles = p`
|
|
|
34
34
|
:host {
|
|
35
35
|
display: block;
|
|
36
36
|
contain: layout;
|
|
37
|
-
color: var(--fhi-color-neutral-text-default);
|
|
38
37
|
.headline {
|
|
39
38
|
font-family: var(--fhi-font-family-default);
|
|
40
39
|
-webkit-font-smoothing: antialiased;
|
|
@@ -79,10 +78,10 @@ a([
|
|
|
79
78
|
s({ type: Number })
|
|
80
79
|
], l.prototype, "level", 2);
|
|
81
80
|
l = a([
|
|
82
|
-
y(
|
|
81
|
+
y(v)
|
|
83
82
|
], l);
|
|
84
83
|
export {
|
|
85
84
|
l as FhiHeadline,
|
|
86
|
-
|
|
85
|
+
v as FhiHeadlineSelector
|
|
87
86
|
};
|
|
88
87
|
//# sourceMappingURL=fhi-headline.js.map
|
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'
|
|
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 = 'currentcolor';\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' ? this.color : 'currentcolor';\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 .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,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAQ7C,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,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAwCF;AArGaJ,EA+DJ,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;AAzD2BC,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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/typography/fhi-headline/fhi-headline.component.ts","declarations":[{"kind":"class","description":"## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiHeadline","slots":[{"description":"The content of the fhi-headline component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-headline","customElement":true},{"kind":"variable","name":"FhiHeadlineSelector","type":{"text":"string"},"default":"'fhi-headline'"}]}
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/typography/fhi-headline/fhi-headline.component.ts","declarations":[{"kind":"class","description":"## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiHeadline","slots":[{"description":"The content of the fhi-headline component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the text styles.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-headline","customElement":true},{"kind":"variable","name":"FhiHeadlineSelector","type":{"text":"string"},"default":"'fhi-headline'"}]}
|
package/fhi-label.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { i as n, n as p, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
|
|
2
|
-
var
|
|
3
|
-
for (var e = i > 1 ? void 0 : i ?
|
|
2
|
+
var c = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
|
|
3
|
+
for (var e = i > 1 ? void 0 : i ? b(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 && c(a, r, e), e;
|
|
6
6
|
};
|
|
7
7
|
const m = "fhi-label";
|
|
8
8
|
let l = class extends f {
|
|
9
9
|
constructor() {
|
|
10
|
-
super(...arguments), this.size = "medium";
|
|
10
|
+
super(...arguments), this.size = "medium", this.color = "currentcolor";
|
|
11
11
|
}
|
|
12
12
|
updated(t) {
|
|
13
|
-
super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "
|
|
13
|
+
super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
return g`
|
|
@@ -24,7 +24,6 @@ l.styles = n`
|
|
|
24
24
|
:host {
|
|
25
25
|
display: block;
|
|
26
26
|
contain: layout;
|
|
27
|
-
color: var(--fhi-color-neutral-text-default);
|
|
28
27
|
.label {
|
|
29
28
|
font-family: var(--fhi-font-family-default);
|
|
30
29
|
-webkit-font-smoothing: antialiased;
|
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'
|
|
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 = 'currentcolor';\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' ? this.color : 'currentcolor';\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 .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,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAE7C,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAwCF;AAnFaH,EA6CJ,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;AAvC2BC,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;"}
|
package/fhi-label.manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/typography/fhi-label/fhi-label.component.ts","declarations":[{"kind":"class","description":"## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.","name":"FhiLabel","slots":[{"description":"The content of the fhi-label component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-label","customElement":true},{"kind":"variable","name":"FhiLabelSelector","type":{"text":"string"},"default":"'fhi-label'"}]}
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/typography/fhi-label/fhi-label.component.ts","declarations":[{"kind":"class","description":"## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.","name":"FhiLabel","slots":[{"description":"The content of the fhi-label component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'currentcolor'","description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\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```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-label","customElement":true},{"kind":"variable","name":"FhiLabelSelector","type":{"text":"string"},"default":"'fhi-label'"}]}
|
package/fhi-tag.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { i as
|
|
1
|
+
import { i as f, n, a as d, b as h, t as u } from "./property-B2Ico5CW.js";
|
|
2
2
|
import "./fhi-body.js";
|
|
3
|
-
var
|
|
4
|
-
for (var
|
|
5
|
-
(
|
|
6
|
-
return
|
|
3
|
+
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (l, a, e, o) => {
|
|
4
|
+
for (var r = o > 1 ? void 0 : o ? g(a, e) : a, t = l.length - 1, i; t >= 0; t--)
|
|
5
|
+
(i = l[t]) && (r = (o ? i(a, e, r) : i(r)) || r);
|
|
6
|
+
return o && r && v(a, e, r), r;
|
|
7
7
|
};
|
|
8
|
-
const
|
|
9
|
-
let
|
|
8
|
+
const b = "fhi-tag";
|
|
9
|
+
let c = class extends d {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(...arguments), this.color = "neutral";
|
|
11
|
+
super(...arguments), this.color = "neutral", this.variant = "subtle";
|
|
12
12
|
}
|
|
13
|
-
_handleSlotChange(
|
|
14
|
-
const e =
|
|
15
|
-
(
|
|
13
|
+
_handleSlotChange(l) {
|
|
14
|
+
const e = l.target.assignedNodes().filter(
|
|
15
|
+
(r) => {
|
|
16
16
|
var t;
|
|
17
|
-
return
|
|
17
|
+
return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && ((t = r.textContent) == null ? void 0 : t.trim());
|
|
18
18
|
}
|
|
19
19
|
);
|
|
20
20
|
if (e.length === 0)
|
|
21
21
|
return;
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
24
|
-
const
|
|
25
|
-
|
|
22
|
+
const o = e[0];
|
|
23
|
+
if (o.nodeType === Node.ELEMENT_NODE && o.tagName.toLowerCase().startsWith("fhi-icon")) {
|
|
24
|
+
const r = o;
|
|
25
|
+
r.setAttribute("size", "1rem"), r.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))";
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
@@ -36,7 +36,7 @@ let l = class extends d {
|
|
|
36
36
|
`;
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
-
|
|
39
|
+
c.styles = f`
|
|
40
40
|
:host {
|
|
41
41
|
--fhi-tag-border-color: unset;
|
|
42
42
|
}
|
|
@@ -70,41 +70,63 @@ l.styles = n`
|
|
|
70
70
|
:host([color='neutral']) {
|
|
71
71
|
color: var(--fhi-color-neutral-text-default);
|
|
72
72
|
background-color: var(--fhi-color-neutral-surface-default);
|
|
73
|
+
&:host([variant='bordered']) {
|
|
74
|
+
border-color: var(--fhi-color-neutral-surface-active);
|
|
75
|
+
}
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
:host([color='accent']) {
|
|
76
79
|
color: var(--fhi-color-accent-text-default);
|
|
77
80
|
background-color: var(--fhi-color-accent-surface-default);
|
|
81
|
+
&:host([variant='bordered']) {
|
|
82
|
+
border-color: var(--fhi-color-accent-surface-active);
|
|
83
|
+
}
|
|
78
84
|
}
|
|
79
85
|
|
|
80
86
|
:host([color='success']) {
|
|
81
87
|
color: var(--fhi-color-success-text-default);
|
|
82
88
|
background-color: var(--fhi-color-success-surface-default);
|
|
89
|
+
|
|
90
|
+
&:host([variant='bordered']) {
|
|
91
|
+
border-color: var(--fhi-color-success-surface-active);
|
|
92
|
+
}
|
|
83
93
|
}
|
|
84
94
|
|
|
85
95
|
:host([color='warning']) {
|
|
86
96
|
color: var(--fhi-color-warning-text-default);
|
|
87
97
|
background-color: var(--fhi-color-warning-surface-default);
|
|
98
|
+
&:host([variant='bordered']) {
|
|
99
|
+
border-color: var(--fhi-color-warning-surface-active);
|
|
100
|
+
}
|
|
88
101
|
}
|
|
89
102
|
|
|
90
103
|
:host([color='danger']) {
|
|
91
104
|
color: var(--fhi-color-danger-text-default);
|
|
92
105
|
background-color: var(--fhi-color-danger-surface-default);
|
|
106
|
+
&:host([variant='bordered']) {
|
|
107
|
+
border-color: var(--fhi-color-danger-surface-active);
|
|
108
|
+
}
|
|
93
109
|
}
|
|
94
110
|
|
|
95
111
|
:host([color='info']) {
|
|
96
112
|
color: var(--fhi-color-info-text-default);
|
|
97
113
|
background-color: var(--fhi-color-info-surface-default);
|
|
114
|
+
&:host([variant='bordered']) {
|
|
115
|
+
border-color: var(--fhi-color-info-surface-active);
|
|
116
|
+
}
|
|
98
117
|
}
|
|
99
118
|
`;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
],
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
],
|
|
119
|
+
s([
|
|
120
|
+
n({ type: String, reflect: !0 })
|
|
121
|
+
], c.prototype, "color", 2);
|
|
122
|
+
s([
|
|
123
|
+
n({ type: String, reflect: !0 })
|
|
124
|
+
], c.prototype, "variant", 2);
|
|
125
|
+
c = s([
|
|
126
|
+
u(b)
|
|
127
|
+
], c);
|
|
106
128
|
export {
|
|
107
|
-
|
|
108
|
-
|
|
129
|
+
c as FhiTag,
|
|
130
|
+
b as FhiTagSelector
|
|
109
131
|
};
|
|
110
132
|
//# sourceMappingURL=fhi-tag.js.map
|
package/fhi-tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color theme of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-tag-border-color: unset;\n }\n\n :host {\n --fhi-tag-border-color: transparent;\n\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--fhi-tag-border-color);\n border-radius: var(--fhi-border-radius-050);\n\n height: calc(var(--fhi-spacing-300) - 2px);\n padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--fhi-spacing-050);\n }\n\n & fhi-body {\n color: inherit;\n text-wrap: nowrap;\n }\n }\n\n :host([color='neutral']) {\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-surface-default);\n }\n\n :host([color='accent']) {\n color: var(--fhi-color-accent-text-default);\n background-color: var(--fhi-color-accent-surface-default);\n }\n\n :host([color='success']) {\n color: var(--fhi-color-success-text-default);\n background-color: var(--fhi-color-success-surface-default);\n }\n\n :host([color='warning']) {\n color: var(--fhi-color-warning-text-default);\n background-color: var(--fhi-color-warning-surface-default);\n }\n\n :host([color='danger']) {\n color: var(--fhi-color-danger-text-default);\n background-color: var(--fhi-color-danger-surface-default);\n }\n\n :host([color='info']) {\n color: var(--fhi-color-info-text-default);\n background-color: var(--fhi-color-info-surface-default);\n }\n `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B;AAAA,EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /**\n * Sets the color theme of the tag.\n * @reflect\n * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n */\n @property({ type: String, reflect: true }) color:\n | 'neutral'\n | 'accent'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info' = 'neutral';\n\n /**\n * Sets the variant of the tag, which determines its visual style.\n * @reflect\n * @type {'subtle' | 'bordered'}\n */\n @property({ type: String, reflect: true })\n variant: 'subtle' | 'bordered' = 'subtle';\n\n private _handleSlotChange(event: Event): void {\n const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n const validNodes = nodes.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes.length === 0) {\n return;\n }\n\n const firstNode: Node = validNodes[0];\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n icon.setAttribute('size', '1rem');\n icon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-tag-border-color: unset;\n }\n\n :host {\n --fhi-tag-border-color: transparent;\n\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--fhi-tag-border-color);\n border-radius: var(--fhi-border-radius-050);\n\n height: calc(var(--fhi-spacing-300) - 2px);\n padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n .slot-container {\n display: flex;\n align-items: center;\n\n gap: var(--fhi-spacing-050);\n }\n\n & fhi-body {\n color: inherit;\n text-wrap: nowrap;\n }\n }\n\n :host([color='neutral']) {\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-neutral-surface-active);\n }\n }\n\n :host([color='accent']) {\n color: var(--fhi-color-accent-text-default);\n background-color: var(--fhi-color-accent-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-accent-surface-active);\n }\n }\n\n :host([color='success']) {\n color: var(--fhi-color-success-text-default);\n background-color: var(--fhi-color-success-surface-default);\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-success-surface-active);\n }\n }\n\n :host([color='warning']) {\n color: var(--fhi-color-warning-text-default);\n background-color: var(--fhi-color-warning-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-warning-surface-active);\n }\n }\n\n :host([color='danger']) {\n color: var(--fhi-color-danger-text-default);\n background-color: var(--fhi-color-danger-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-danger-surface-active);\n }\n }\n\n :host([color='info']) {\n color: var(--fhi-color-info-text-default);\n background-color: var(--fhi-color-info-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-info-surface-active);\n }\n }\n `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B,WAQb,KAAA,UAAiC;AAAA,EAAA;AAAA,EAEzB,kBAAkBC,GAAoB;AAG5C,UAAMC,IAFSD,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAE,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaC,IAAAD,EAAK,gBAAL,gBAAAC,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIF,EAAW,WAAW;AACxB;AAGF,UAAMG,IAAkBH,EAAW,CAAC;AAEpC,QACEG,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAOD;AAEb,MAAAC,EAAK,aAAa,QAAQ,MAAM,GAChCA,EAAK,MAAM,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIa,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI5C;AAkFF;AA3IaR,EA2DJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AArD2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BX,EAMgC,WAAA,SAAA,CAAA;AAc3CU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BX,EAoBX,WAAA,WAAA,CAAA;AApBWA,IAANU,EAAA;AAAA,EADNE,EAAcb,CAAc;AAAA,GAChBC,CAAA;"}
|
package/fhi-tag.manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. This should be pure text with, or without, an icon.","name":""}],"members":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","reflects":true,"attribute":"color"}],"attributes":[{"name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","fieldName":"color"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. This should be pure text with, or without, an icon.","name":""}],"members":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","reflects":true,"attribute":"color"},{"kind":"field","name":"variant","type":{"text":"'subtle' | 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","reflects":true,"attribute":"variant"}],"attributes":[{"name":"color","type":{"text":"'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","fieldName":"color"},{"name":"variant","type":{"text":"'subtle' | 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}
|