@folkehelseinstituttet/designsystem 0.33.0 → 0.33.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fhi-display.js +21 -17
- package/fhi-display.js.map +1 -1
- package/fhi-headline.js +23 -19
- package/fhi-headline.js.map +1 -1
- package/fhi-title.js +24 -20
- package/fhi-title.js.map +1 -1
- package/package.json +1 -2
- package/web-types.json +1 -1
package/fhi-display.js
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
import { i as n, n as p, a as g, b as f, t as y } from "./property-DGdAXcEz.js";
|
|
2
2
|
import { o as m } from "./unsafe-html-lUureUEN.js";
|
|
3
|
-
var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e,
|
|
4
|
-
for (var
|
|
5
|
-
(h = e[o]) && (
|
|
6
|
-
return a &&
|
|
3
|
+
var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
|
|
4
|
+
for (var i = a > 1 ? void 0 : a ? d(t, s) : t, o = e.length - 1, h; o >= 0; o--)
|
|
5
|
+
(h = e[o]) && (i = (a ? h(t, s, i) : h(i)) || i);
|
|
6
|
+
return a && i && v(t, s, i), i;
|
|
7
7
|
};
|
|
8
8
|
const u = "fhi-display";
|
|
9
|
-
let
|
|
9
|
+
let l = class extends g {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
|
-
super.updated(e), e.has("level")
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
if (super.updated(e), e.has("level")) {
|
|
15
|
+
const t = Number(this.level);
|
|
16
|
+
(isNaN(t) || t < 1 || t > 6) && console.error(
|
|
17
|
+
new TypeError(
|
|
18
|
+
`The level property must be set to a number between 1 and 6. Current value: ${this.level}`
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
19
23
|
}
|
|
20
24
|
render() {
|
|
21
25
|
const e = `
|
|
@@ -26,7 +30,7 @@ let i = class extends g {
|
|
|
26
30
|
return f`${m(e)}`;
|
|
27
31
|
}
|
|
28
32
|
};
|
|
29
|
-
|
|
33
|
+
l.styles = n`
|
|
30
34
|
:host {
|
|
31
35
|
--font-size-large: var(--fhi-typography-display-large-font-size);
|
|
32
36
|
--font-weight-large: var(--fhi-typography-display-large-font-weight);
|
|
@@ -90,18 +94,18 @@ i.styles = n`
|
|
|
90
94
|
`;
|
|
91
95
|
r([
|
|
92
96
|
p({ type: String, reflect: !0 })
|
|
93
|
-
],
|
|
97
|
+
], l.prototype, "size", 2);
|
|
94
98
|
r([
|
|
95
99
|
p({ type: String })
|
|
96
|
-
],
|
|
100
|
+
], l.prototype, "color", 2);
|
|
97
101
|
r([
|
|
98
102
|
p({ type: Number })
|
|
99
|
-
],
|
|
100
|
-
|
|
103
|
+
], l.prototype, "level", 2);
|
|
104
|
+
l = r([
|
|
101
105
|
y(u)
|
|
102
|
-
],
|
|
106
|
+
], l);
|
|
103
107
|
export {
|
|
104
|
-
|
|
108
|
+
l as FhiDisplay,
|
|
105
109
|
u as FhiDisplaySelector
|
|
106
110
|
};
|
|
107
111
|
//# 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 headline text in accordance with the FHI Design System guidelines.\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
|
|
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 headline text in accordance with the FHI Design System guidelines.\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 --font-size-large: var(--fhi-typography-display-large-font-size);\n --font-weight-large: var(--fhi-typography-display-large-font-weight);\n --line-height-large: var(--fhi-typography-display-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-display-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-display-medium-font-size);\n --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n --line-height-medium: var(--fhi-typography-display-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-display-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-display-small-font-size);\n --font-weight-small: var(--fhi-typography-display-small-font-weight);\n --line-height-small: var(--fhi-typography-display-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-display-small-letter-spacing\n );\n }\n\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(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .display {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .display {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAkB3B,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;AAgEF;AA/HaJ,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;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,21 +1,25 @@
|
|
|
1
1
|
import { i as g, n as s, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
|
|
2
|
-
import { o as
|
|
3
|
-
var
|
|
4
|
-
for (var
|
|
5
|
-
(o = e[n]) && (
|
|
6
|
-
return a &&
|
|
2
|
+
import { o as d } from "./unsafe-html-lUureUEN.js";
|
|
3
|
+
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, h, a) => {
|
|
4
|
+
for (var i = a > 1 ? void 0 : a ? y(t, h) : t, n = e.length - 1, o; n >= 0; n--)
|
|
5
|
+
(o = e[n]) && (i = (a ? o(t, h, i) : o(i)) || i);
|
|
6
|
+
return a && i && v(t, h, i), i;
|
|
7
7
|
};
|
|
8
8
|
const u = "fhi-headline";
|
|
9
|
-
let
|
|
9
|
+
let l = class extends p {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
13
13
|
updated(e) {
|
|
14
|
-
super.updated(e), e.has("level")
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
if (super.updated(e), e.has("level")) {
|
|
15
|
+
const t = Number(this.level);
|
|
16
|
+
(isNaN(t) || t < 1 || t > 6) && console.error(
|
|
17
|
+
new TypeError(
|
|
18
|
+
`The level property must be set to a number between 1 and 6. Current value: ${this.level}`
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
19
23
|
}
|
|
20
24
|
render() {
|
|
21
25
|
const e = `
|
|
@@ -23,10 +27,10 @@ let i = class extends p {
|
|
|
23
27
|
<slot></slot>
|
|
24
28
|
</h${this.level}>
|
|
25
29
|
`;
|
|
26
|
-
return f`${
|
|
30
|
+
return f`${d(e)}`;
|
|
27
31
|
}
|
|
28
32
|
};
|
|
29
|
-
|
|
33
|
+
l.styles = g`
|
|
30
34
|
:host {
|
|
31
35
|
--font-size-large: var(--fhi-typography-headline-large-font-size);
|
|
32
36
|
--font-weight-large: var(--fhi-typography-headline-large-font-weight);
|
|
@@ -90,18 +94,18 @@ i.styles = g`
|
|
|
90
94
|
`;
|
|
91
95
|
r([
|
|
92
96
|
s({ type: String, reflect: !0 })
|
|
93
|
-
],
|
|
97
|
+
], l.prototype, "size", 2);
|
|
94
98
|
r([
|
|
95
99
|
s({ type: String })
|
|
96
|
-
],
|
|
100
|
+
], l.prototype, "color", 2);
|
|
97
101
|
r([
|
|
98
102
|
s({ type: Number })
|
|
99
|
-
],
|
|
100
|
-
|
|
103
|
+
], l.prototype, "level", 2);
|
|
104
|
+
l = r([
|
|
101
105
|
m(u)
|
|
102
|
-
],
|
|
106
|
+
], l);
|
|
103
107
|
export {
|
|
104
|
-
|
|
108
|
+
l as FhiHeadline,
|
|
105
109
|
u as FhiHeadlineSelector
|
|
106
110
|
};
|
|
107
111
|
//# 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 headline text in accordance with the FHI Design System guidelines.\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
|
|
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 headline text in accordance with the FHI Design System guidelines.\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 --font-size-large: var(--fhi-typography-headline-large-font-size);\n --font-weight-large: var(--fhi-typography-headline-large-font-weight);\n --line-height-large: var(--fhi-typography-headline-large-line-height);\n --letter-spacing-large: var(\n --fhi-typography-headline-large-letter-spacing\n );\n\n --font-size-medium: var(--fhi-typography-headline-medium-font-size);\n --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);\n --line-height-medium: var(--fhi-typography-headline-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-headline-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-headline-small-font-size);\n --font-weight-small: var(--fhi-typography-headline-small-font-weight);\n --line-height-small: var(--fhi-typography-headline-small-line-height);\n --letter-spacing-small: var(\n --fhi-typography-headline-small-letter-spacing\n );\n }\n\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(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .headline {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .headline {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAkB5B,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;AAgEF;AA/HaJ,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;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-title.js
CHANGED
|
@@ -1,32 +1,36 @@
|
|
|
1
1
|
import { i as g, n, a as p, b as f, t as m } from "./property-DGdAXcEz.js";
|
|
2
2
|
import { o as v } from "./unsafe-html-lUureUEN.js";
|
|
3
|
-
var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (
|
|
4
|
-
for (var
|
|
5
|
-
(
|
|
6
|
-
return r &&
|
|
3
|
+
var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (e, t, o, r) => {
|
|
4
|
+
for (var i = r > 1 ? void 0 : r ? u(t, o) : t, s = e.length - 1, h; s >= 0; s--)
|
|
5
|
+
(h = e[s]) && (i = (r ? h(t, o, i) : h(i)) || i);
|
|
6
|
+
return r && i && y(t, o, i), i;
|
|
7
7
|
};
|
|
8
8
|
const c = "fhi-title";
|
|
9
|
-
let
|
|
9
|
+
let l = class extends p {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.size = "medium";
|
|
12
12
|
}
|
|
13
|
-
updated(
|
|
14
|
-
super.updated(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
updated(e) {
|
|
14
|
+
if (super.updated(e), e.has("level")) {
|
|
15
|
+
const t = Number(this.level);
|
|
16
|
+
(isNaN(t) || t < 1 || t > 6) && console.error(
|
|
17
|
+
new TypeError(
|
|
18
|
+
`The level property must be set to a number between 1 and 6. Current value: ${this.level}`
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
|
|
19
23
|
}
|
|
20
24
|
render() {
|
|
21
|
-
const
|
|
25
|
+
const e = `
|
|
22
26
|
<h${this.level} class="title">
|
|
23
27
|
<slot></slot>
|
|
24
28
|
</h${this.level}>
|
|
25
29
|
`;
|
|
26
|
-
return f`${v(
|
|
30
|
+
return f`${v(e)}`;
|
|
27
31
|
}
|
|
28
32
|
};
|
|
29
|
-
|
|
33
|
+
l.styles = g`
|
|
30
34
|
:host {
|
|
31
35
|
--font-size-large: var(--fhi-typography-title-large-font-size);
|
|
32
36
|
--font-weight-large: var(--fhi-typography-title-large-font-weight);
|
|
@@ -86,18 +90,18 @@ i.styles = g`
|
|
|
86
90
|
`;
|
|
87
91
|
a([
|
|
88
92
|
n({ type: String, reflect: !0 })
|
|
89
|
-
],
|
|
93
|
+
], l.prototype, "size", 2);
|
|
90
94
|
a([
|
|
91
95
|
n({ type: String })
|
|
92
|
-
],
|
|
96
|
+
], l.prototype, "color", 2);
|
|
93
97
|
a([
|
|
94
98
|
n({ type: Number })
|
|
95
|
-
],
|
|
96
|
-
|
|
99
|
+
], l.prototype, "level", 2);
|
|
100
|
+
l = a([
|
|
97
101
|
m(c)
|
|
98
|
-
],
|
|
102
|
+
], l);
|
|
99
103
|
export {
|
|
100
|
-
|
|
104
|
+
l as FhiTitle,
|
|
101
105
|
c as FhiTitleSelector
|
|
102
106
|
};
|
|
103
107
|
//# sourceMappingURL=fhi-title.js.map
|
package/fhi-title.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-title.js","sources":["../../src/components/typography/fhi-title/fhi-title.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 FhiTitleSelector = 'fhi-title';\n\nexport type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Title\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview}\n *\n * The `<fhi-title>` component is used to display title text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-title\n * @element fhi-title\n *\n * @slot - The content of the fhi-title component. This should be pure text.\n */\n@customElement(FhiTitleSelector)\nexport class FhiTitle 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-title color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-title>\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!: TitleLevel;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('level')) {\n
|
|
1
|
+
{"version":3,"file":"fhi-title.js","sources":["../../src/components/typography/fhi-title/fhi-title.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 FhiTitleSelector = 'fhi-title';\n\nexport type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Title\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview}\n *\n * The `<fhi-title>` component is used to display title text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-title\n * @element fhi-title\n *\n * @slot - The content of the fhi-title component. This should be pure text.\n */\n@customElement(FhiTitleSelector)\nexport class FhiTitle 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-title color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-title>\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!: TitleLevel;\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=\"title\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`${unsafeHTML(template)}`;\n }\n\n static styles = css`\n :host {\n --font-size-large: var(--fhi-typography-title-large-font-size);\n --font-weight-large: var(--fhi-typography-title-large-font-weight);\n --line-height-large: var(--fhi-typography-title-large-line-height);\n --letter-spacing-large: var(--fhi-typography-title-large-letter-spacing);\n\n --font-size-medium: var(--fhi-typography-title-medium-font-size);\n --font-weight-medium: var(--fhi-typography-title-medium-font-weight);\n --line-height-medium: var(--fhi-typography-title-medium-line-height);\n --letter-spacing-medium: var(\n --fhi-typography-title-medium-letter-spacing\n );\n\n --font-size-small: var(--fhi-typography-title-small-font-size);\n --font-weight-small: var(--fhi-typography-title-small-font-weight);\n --line-height-small: var(--fhi-typography-title-small-line-height);\n --letter-spacing-small: var(--fhi-typography-title-small-letter-spacing);\n }\n\n :host {\n display: block;\n contain: layout;\n color: var(--fhi-color-neutral-text-default);\n .title {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .title {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-large);\n line-height: var(--line-height-large);\n letter-spacing: var(--letter-spacing-large);\n }\n }\n\n :host([size='medium']) {\n .title {\n font-size: var(--font-size-medium);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-medium);\n letter-spacing: var(--letter-spacing-medium);\n }\n }\n\n :host([size='small']) {\n .title {\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-small);\n line-height: var(--line-height-small);\n letter-spacing: var(--letter-spacing-small);\n }\n }\n `;\n}\n"],"names":["FhiTitleSelector","FhiTitle","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAmB;AAkBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,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;AA4DF;AA3HaJ,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;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,CAAgB;AAAA,GAClBC,CAAA;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"title": "FHI Designsystem",
|
|
3
3
|
"author": "FHI Designsystem team",
|
|
4
4
|
"name": "@folkehelseinstituttet/designsystem",
|
|
5
|
-
"version": "0.33.
|
|
5
|
+
"version": "0.33.1",
|
|
6
6
|
"description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"fhi",
|
|
@@ -80,7 +80,6 @@
|
|
|
80
80
|
"@web/test-runner-playwright": "~0.11.1",
|
|
81
81
|
"cross-env": "7.0.3",
|
|
82
82
|
"custom-element-jet-brains-integration": "^1.7.0",
|
|
83
|
-
"eslint-plugin-storybook": "10.2.8",
|
|
84
83
|
"lit": "~3.2.1",
|
|
85
84
|
"mocha": "~10.7.3",
|
|
86
85
|
"playwright": "^1.58.2",
|
package/web-types.json
CHANGED