@folkehelseinstituttet/designsystem 0.40.6 → 0.40.7
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 +16 -8
- package/fhi-body.js.map +1 -1
- package/fhi-body.manifest.json +1 -1
- package/fhi-display.js +20 -8
- package/fhi-display.js.map +1 -1
- package/fhi-display.manifest.json +1 -1
- package/fhi-headline.js +20 -8
- package/fhi-headline.js.map +1 -1
- package/fhi-headline.manifest.json +1 -1
- package/fhi-label.js +16 -8
- package/fhi-label.js.map +1 -1
- package/fhi-label.manifest.json +1 -1
- package/fhi-title.js +20 -8
- package/fhi-title.js.map +1 -1
- package/fhi-title.manifest.json +1 -1
- package/package.json +1 -1
- package/web-types.json +6 -6
package/fhi-body.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
|
|
2
|
+
import { t as o } from "./if-defined-Dl-W5B5_.js";
|
|
2
3
|
//#region src/components/typography/fhi-body/fhi-body.component.ts
|
|
3
|
-
var
|
|
4
|
+
var s = "fhi-body", c = class extends r {
|
|
4
5
|
constructor(...e) {
|
|
5
|
-
super(...e), this.size = "medium"
|
|
6
|
-
}
|
|
7
|
-
updated(e) {
|
|
8
|
-
super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
6
|
+
super(...e), this.size = "medium";
|
|
9
7
|
}
|
|
10
8
|
render() {
|
|
11
9
|
return a`
|
|
12
|
-
<span
|
|
10
|
+
<span
|
|
11
|
+
class="body"
|
|
12
|
+
style=${o(this.color ? `color: ${this.color}` : void 0)}
|
|
13
|
+
>
|
|
13
14
|
<slot></slot>
|
|
14
15
|
</span>
|
|
15
16
|
`;
|
|
@@ -17,8 +18,15 @@ var o = "fhi-body", s = class extends r {
|
|
|
17
18
|
static {
|
|
18
19
|
this.styles = t`
|
|
19
20
|
:host {
|
|
21
|
+
--fhi-body-color: unset;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host {
|
|
25
|
+
--fhi-body-color: currentcolor;
|
|
26
|
+
|
|
20
27
|
display: block;
|
|
21
28
|
contain: layout;
|
|
29
|
+
color: var(--fhi-body-color);
|
|
22
30
|
.body {
|
|
23
31
|
font-family: var(--fhi-font-family-default);
|
|
24
32
|
-webkit-font-smoothing: antialiased;
|
|
@@ -58,8 +66,8 @@ var o = "fhi-body", s = class extends r {
|
|
|
58
66
|
i([e({
|
|
59
67
|
type: String,
|
|
60
68
|
reflect: !0
|
|
61
|
-
})],
|
|
69
|
+
})], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), c = i([n(s)], c);
|
|
62
70
|
//#endregion
|
|
63
|
-
export {
|
|
71
|
+
export { c as FhiBody, s as FhiBodySelector };
|
|
64
72
|
|
|
65
73
|
//# sourceMappingURL=fhi-body.js.map
|
package/fhi-body.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-body.js","names":[],"sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement
|
|
1
|
+
{"version":3,"file":"fhi-body.js","names":[],"sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.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 render() {\n return html`\n <span\n class=\"body\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-body-color: unset;\n }\n\n :host {\n --fhi-body-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-body-color);\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"],"mappings":";;;AAIA,IAAa,IAAkB,YAgBxB,IAAA,cAAsB,EAAW;;2BASxB;;CAmBd,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;;;;CAKzE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAe,CAAA,GAAA,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"},"
|
|
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'"}]}
|
package/fhi-display.js
CHANGED
|
@@ -1,29 +1,41 @@
|
|
|
1
1
|
import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
|
|
2
|
-
import { t as o } from "./
|
|
2
|
+
import { t as o } from "./if-defined-Dl-W5B5_.js";
|
|
3
|
+
import { t as s } from "./unsafe-html-CBTN3162.js";
|
|
3
4
|
//#region src/components/typography/fhi-display/fhi-display.component.ts
|
|
4
|
-
var
|
|
5
|
+
var c = "fhi-display", l = class extends r {
|
|
5
6
|
constructor(...e) {
|
|
6
|
-
super(...e), this.size = "medium"
|
|
7
|
+
super(...e), this.size = "medium";
|
|
7
8
|
}
|
|
8
9
|
updated(e) {
|
|
9
10
|
if (super.updated(e), e.has("level")) {
|
|
10
11
|
let e = Number(this.level);
|
|
11
12
|
(isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
|
|
12
13
|
}
|
|
13
|
-
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
|
|
16
|
+
let e = `
|
|
17
17
|
<h${this.level} class="display">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</h${this.level}>
|
|
20
|
-
|
|
20
|
+
`;
|
|
21
|
+
return a`
|
|
22
|
+
<div style=${o(this.color ? `color: ${this.color}` : void 0)}>
|
|
23
|
+
${s(e)}
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
21
26
|
}
|
|
22
27
|
static {
|
|
23
28
|
this.styles = t`
|
|
24
29
|
:host {
|
|
30
|
+
--fhi-display-color: unset;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host {
|
|
34
|
+
--fhi-display-color: currentcolor;
|
|
35
|
+
|
|
25
36
|
display: block;
|
|
26
37
|
contain: layout;
|
|
38
|
+
color: var(--fhi-display-color);
|
|
27
39
|
.display {
|
|
28
40
|
font-family: var(--fhi-font-family-default);
|
|
29
41
|
-webkit-font-smoothing: antialiased;
|
|
@@ -63,8 +75,8 @@ var s = "fhi-display", c = class extends r {
|
|
|
63
75
|
i([e({
|
|
64
76
|
type: String,
|
|
65
77
|
reflect: !0
|
|
66
|
-
})],
|
|
78
|
+
})], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
|
|
67
79
|
//#endregion
|
|
68
|
-
export {
|
|
80
|
+
export { l as FhiDisplay, c as FhiDisplaySelector };
|
|
69
81
|
|
|
70
82
|
//# sourceMappingURL=fhi-display.js.map
|
package/fhi-display.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-display.js","names":[],"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
|
|
1
|
+
{"version":3,"file":"fhi-display.js","names":[],"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 { ifDefined } from 'lit/directives/if-defined.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\n render() {\n const template = `\n <h${this.level} class=\"display\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`\n <div style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}>\n ${unsafeHTML(template)}\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-display-color: unset;\n }\n\n :host {\n --fhi-display-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-display-color);\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"],"mappings":";;;;AAKA,IAAa,IAAqB,eAuB3B,IAAA,cAAyB,EAAW;;2BAS3B;;CAyBd,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;CACF;CAEA,SAAS;EACP,IAAM,IAAW;UACX,KAAK,MAAM;;WAEV,KAAK,MAAM;;EAElB,OAAO,CAAI;mBACI,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;UACpE,EAAW,CAAQ,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GArGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAkB,CAAA,GAAA,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"},"
|
|
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'"}]}
|
package/fhi-headline.js
CHANGED
|
@@ -1,29 +1,41 @@
|
|
|
1
1
|
import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
|
|
2
|
-
import { t as o } from "./
|
|
2
|
+
import { t as o } from "./if-defined-Dl-W5B5_.js";
|
|
3
|
+
import { t as s } from "./unsafe-html-CBTN3162.js";
|
|
3
4
|
//#region src/components/typography/fhi-headline/fhi-headline.component.ts
|
|
4
|
-
var
|
|
5
|
+
var c = "fhi-headline", l = class extends r {
|
|
5
6
|
constructor(...e) {
|
|
6
|
-
super(...e), this.size = "medium"
|
|
7
|
+
super(...e), this.size = "medium";
|
|
7
8
|
}
|
|
8
9
|
updated(e) {
|
|
9
10
|
if (super.updated(e), e.has("level")) {
|
|
10
11
|
let e = Number(this.level);
|
|
11
12
|
(isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
|
|
12
13
|
}
|
|
13
|
-
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
|
|
16
|
+
let e = `
|
|
17
17
|
<h${this.level} class="headline">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</h${this.level}>
|
|
20
|
-
|
|
20
|
+
`;
|
|
21
|
+
return a`
|
|
22
|
+
<div style=${o(this.color ? `color: ${this.color}` : void 0)}>
|
|
23
|
+
${s(e)}
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
21
26
|
}
|
|
22
27
|
static {
|
|
23
28
|
this.styles = t`
|
|
24
29
|
:host {
|
|
30
|
+
--fhi-headline-color: unset;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host {
|
|
34
|
+
--fhi-headline-color: currentcolor;
|
|
35
|
+
|
|
25
36
|
display: block;
|
|
26
37
|
contain: layout;
|
|
38
|
+
color: var(--fhi-headline-color);
|
|
27
39
|
.headline {
|
|
28
40
|
font-family: var(--fhi-font-family-default);
|
|
29
41
|
-webkit-font-smoothing: antialiased;
|
|
@@ -63,8 +75,8 @@ var s = "fhi-headline", c = class extends r {
|
|
|
63
75
|
i([e({
|
|
64
76
|
type: String,
|
|
65
77
|
reflect: !0
|
|
66
|
-
})],
|
|
78
|
+
})], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
|
|
67
79
|
//#endregion
|
|
68
|
-
export {
|
|
80
|
+
export { l as FhiHeadline, c as FhiHeadlineSelector };
|
|
69
81
|
|
|
70
82
|
//# sourceMappingURL=fhi-headline.js.map
|
package/fhi-headline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-headline.js","names":[],"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
|
|
1
|
+
{"version":3,"file":"fhi-headline.js","names":[],"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 { ifDefined } from 'lit/directives/if-defined.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\n render() {\n const template = `\n <h${this.level} class=\"headline\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`\n <div style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}>\n ${unsafeHTML(template)}\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-headline-color: unset;\n }\n\n :host {\n --fhi-headline-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-headline-color);\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"],"mappings":";;;;AAKA,IAAa,IAAsB,gBAuB5B,IAAA,cAA0B,EAAW;;2BAS5B;;CAyBd,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;CACF;CAEA,SAAS;EACP,IAAM,IAAW;UACX,KAAK,MAAM;;WAEV,KAAK,MAAM;;EAElB,OAAO,CAAI;mBACI,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;UACpE,EAAW,CAAQ,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GArGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAmB,CAAA,GAAA,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"},"
|
|
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'"}]}
|
package/fhi-label.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
|
|
2
|
+
import { t as o } from "./if-defined-Dl-W5B5_.js";
|
|
2
3
|
//#region src/components/typography/fhi-label/fhi-label.component.ts
|
|
3
|
-
var
|
|
4
|
+
var s = "fhi-label", c = class extends r {
|
|
4
5
|
constructor(...e) {
|
|
5
|
-
super(...e), this.size = "medium"
|
|
6
|
-
}
|
|
7
|
-
updated(e) {
|
|
8
|
-
super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
6
|
+
super(...e), this.size = "medium";
|
|
9
7
|
}
|
|
10
8
|
render() {
|
|
11
9
|
return a`
|
|
12
|
-
<span
|
|
10
|
+
<span
|
|
11
|
+
class="label"
|
|
12
|
+
style=${o(this.color ? `color: ${this.color}` : void 0)}
|
|
13
|
+
>
|
|
13
14
|
<slot></slot>
|
|
14
15
|
</span>
|
|
15
16
|
`;
|
|
@@ -17,8 +18,15 @@ var o = "fhi-label", s = class extends r {
|
|
|
17
18
|
static {
|
|
18
19
|
this.styles = t`
|
|
19
20
|
:host {
|
|
21
|
+
--fhi-label-color: unset;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host {
|
|
25
|
+
--fhi-label-color: currentcolor;
|
|
26
|
+
|
|
20
27
|
display: block;
|
|
21
28
|
contain: layout;
|
|
29
|
+
color: var(--fhi-label-color);
|
|
22
30
|
.label {
|
|
23
31
|
font-family: var(--fhi-font-family-default);
|
|
24
32
|
-webkit-font-smoothing: antialiased;
|
|
@@ -58,8 +66,8 @@ var o = "fhi-label", s = class extends r {
|
|
|
58
66
|
i([e({
|
|
59
67
|
type: String,
|
|
60
68
|
reflect: !0
|
|
61
|
-
})],
|
|
69
|
+
})], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), c = i([n(s)], c);
|
|
62
70
|
//#endregion
|
|
63
|
-
export {
|
|
71
|
+
export { c as FhiLabel, s as FhiLabelSelector };
|
|
64
72
|
|
|
65
73
|
//# sourceMappingURL=fhi-label.js.map
|
package/fhi-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-label.js","names":[],"sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement
|
|
1
|
+
{"version":3,"file":"fhi-label.js","names":[],"sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.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 render() {\n return html`\n <span\n class=\"label\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-label-color: unset;\n }\n\n :host {\n --fhi-label-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-label-color);\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"],"mappings":";;;AAIA,IAAa,IAAmB,aAgBzB,IAAA,cAAuB,EAAW;;2BASzB;;CAmBd,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;;;;CAKzE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAgB,CAAA,GAAA,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"},"
|
|
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'"}]}
|
package/fhi-title.js
CHANGED
|
@@ -1,29 +1,41 @@
|
|
|
1
1
|
import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
|
|
2
|
-
import { t as o } from "./
|
|
2
|
+
import { t as o } from "./if-defined-Dl-W5B5_.js";
|
|
3
|
+
import { t as s } from "./unsafe-html-CBTN3162.js";
|
|
3
4
|
//#region src/components/typography/fhi-title/fhi-title.component.ts
|
|
4
|
-
var
|
|
5
|
+
var c = "fhi-title", l = class extends r {
|
|
5
6
|
constructor(...e) {
|
|
6
|
-
super(...e), this.size = "medium"
|
|
7
|
+
super(...e), this.size = "medium";
|
|
7
8
|
}
|
|
8
9
|
updated(e) {
|
|
9
10
|
if (super.updated(e), e.has("level")) {
|
|
10
11
|
let e = Number(this.level);
|
|
11
12
|
(isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
|
|
12
13
|
}
|
|
13
|
-
e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
|
|
16
|
+
let e = `
|
|
17
17
|
<h${this.level} class="title">
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</h${this.level}>
|
|
20
|
-
|
|
20
|
+
`;
|
|
21
|
+
return a`
|
|
22
|
+
<div style=${o(this.color ? `color: ${this.color}` : void 0)}>
|
|
23
|
+
${s(e)}
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
21
26
|
}
|
|
22
27
|
static {
|
|
23
28
|
this.styles = t`
|
|
24
29
|
:host {
|
|
30
|
+
--fhi-title-color: unset;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host {
|
|
34
|
+
--fhi-title-color: currentcolor;
|
|
35
|
+
|
|
25
36
|
display: block;
|
|
26
37
|
contain: layout;
|
|
38
|
+
color: var(--fhi-title-color);
|
|
27
39
|
.title {
|
|
28
40
|
font-family: var(--fhi-font-family-default);
|
|
29
41
|
-webkit-font-smoothing: antialiased;
|
|
@@ -63,8 +75,8 @@ var s = "fhi-title", c = class extends r {
|
|
|
63
75
|
i([e({
|
|
64
76
|
type: String,
|
|
65
77
|
reflect: !0
|
|
66
|
-
})],
|
|
78
|
+
})], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({ type: Number })], l.prototype, "level", void 0), l = i([n(c)], l);
|
|
67
79
|
//#endregion
|
|
68
|
-
export {
|
|
80
|
+
export { l as FhiTitle, c as FhiTitleSelector };
|
|
69
81
|
|
|
70
82
|
//# sourceMappingURL=fhi-title.js.map
|
package/fhi-title.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fhi-title.js","names":[],"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 smaller, less prominent title text in accordance with the FHI Design System guidelines.\n *\n * For standard headline text, use the `<fhi-headline>` 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-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
|
|
1
|
+
{"version":3,"file":"fhi-title.js","names":[],"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 { ifDefined } from 'lit/directives/if-defined.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 smaller, less prominent title text in accordance with the FHI Design System guidelines.\n *\n * For standard headline text, use the `<fhi-headline>` 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-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\n render() {\n const template = `\n <h${this.level} class=\"title\">\n <slot></slot>\n </h${this.level}>\n `;\n return html`\n <div style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}>\n ${unsafeHTML(template)}\n </div>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-title-color: unset;\n }\n\n :host {\n --fhi-title-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-title-color);\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(--fhi-typography-title-large-font-size);\n font-weight: var(--fhi-typography-title-large-font-weight);\n line-height: var(--fhi-typography-title-large-line-height);\n letter-spacing: var(--fhi-typography-title-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .title {\n font-size: var(--fhi-typography-title-medium-font-size);\n font-weight: var(--fhi-typography-title-medium-font-weight);\n line-height: var(--fhi-typography-title-medium-line-height);\n letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .title {\n font-size: var(--fhi-typography-title-small-font-size);\n font-weight: var(--fhi-typography-title-small-font-weight);\n line-height: var(--fhi-typography-title-small-line-height);\n letter-spacing: var(--fhi-typography-title-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;;AAKA,IAAa,IAAmB,aAuBzB,IAAA,cAAuB,EAAW;;2BASzB;;CAyBd,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;CACF;CAEA,SAAS;EACP,IAAM,IAAW;UACX,KAAK,MAAM;;WAEV,KAAK,MAAM;;EAElB,OAAO,CAAI;mBACI,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;UACpE,EAAW,CAAQ,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GArGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAgB,CAAA,GAAA,CAAA"}
|
package/fhi-title.manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"kind":"javascript-module","path":"src/components/typography/fhi-title/fhi-title.component.ts","declarations":[{"kind":"class","description":"## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display smaller, less prominent title text in accordance with the FHI Design System guidelines.\n\nFor standard headline text, use the `<fhi-headline>` 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":"FhiTitle","slots":[{"description":"The content of the fhi-title component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/typography/fhi-title/fhi-title.component.ts","declarations":[{"kind":"class","description":"## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display smaller, less prominent title text in accordance with the FHI Design System guidelines.\n\nFor standard headline text, use the `<fhi-headline>` 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":"FhiTitle","slots":[{"description":"The content of the fhi-title 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-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\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-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\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-title","customElement":true},{"kind":"variable","name":"FhiTitleSelector","type":{"text":"string"},"default":"'fhi-title'"}]}
|