@folkehelseinstituttet/designsystem 0.41.2 → 0.42.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-callout.d.ts +1 -0
- package/fhi-callout.js +142 -0
- package/fhi-callout.js.map +1 -0
- package/fhi-callout.manifest.json +1 -0
- package/fhi-data-table.js +1 -1
- package/{fhi-tooltip.component-DJNDfrHK.js → fhi-tooltip.component-Bs2jmkyC.js} +291 -329
- package/fhi-tooltip.component-Bs2jmkyC.js.map +1 -0
- package/fhi-tooltip.js +1 -1
- package/index.js +125 -124
- package/package.json +1 -1
- package/web-types.json +54 -1
- package/fhi-tooltip.component-DJNDfrHK.js.map +0 -1
package/fhi-callout.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/fhi-callout.js
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
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 "./fhi-title.js";
|
|
3
|
+
import "./fhi-body.js";
|
|
4
|
+
//#region src/components/fhi-callout/fhi-callout.component.ts
|
|
5
|
+
var o = "fhi-callout", s = class extends r {
|
|
6
|
+
constructor(...e) {
|
|
7
|
+
super(...e), this.color = "neutral", this.variant = "subtle";
|
|
8
|
+
}
|
|
9
|
+
update(e) {
|
|
10
|
+
if (e.has("color")) switch (this.color) {
|
|
11
|
+
case "neutral":
|
|
12
|
+
case "success":
|
|
13
|
+
case "warning":
|
|
14
|
+
case "danger": break;
|
|
15
|
+
default:
|
|
16
|
+
this.color = "neutral";
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
if (e.has("variant")) switch (this.variant) {
|
|
20
|
+
case "subtle":
|
|
21
|
+
case "bordered": break;
|
|
22
|
+
default:
|
|
23
|
+
this.variant = "subtle";
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
26
|
+
super.update(e);
|
|
27
|
+
}
|
|
28
|
+
render() {
|
|
29
|
+
return a`
|
|
30
|
+
<slot name="icon"></slot>
|
|
31
|
+
<div>
|
|
32
|
+
${this.heading ? a`<fhi-title level="2">${this.heading}</fhi-title>` : null}
|
|
33
|
+
<slot></slot>
|
|
34
|
+
</div>
|
|
35
|
+
`;
|
|
36
|
+
}
|
|
37
|
+
static {
|
|
38
|
+
this.styles = t`
|
|
39
|
+
:host {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
|
|
43
|
+
border-radius: var(--fhi-border-radius-100);
|
|
44
|
+
border: var(--fhi-dimension-border-width) solid transparent;
|
|
45
|
+
|
|
46
|
+
letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
|
|
47
|
+
|
|
48
|
+
font: var(--fhi-typography-body-medium-font-weight)
|
|
49
|
+
var(--fhi-typography-body-medium-font-size) /
|
|
50
|
+
var(--fhi-typography-body-medium-line-height)
|
|
51
|
+
var(--fhi-font-family-default);
|
|
52
|
+
|
|
53
|
+
div {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
padding: 0 var(--fhi-spacing-050);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
slot[name='icon'] {
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-self: stretch;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
::slotted([slot='icon']) {
|
|
66
|
+
margin-inline-end: var(--fhi-spacing-050);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([heading]) {
|
|
71
|
+
fhi-title {
|
|
72
|
+
padding: 0.125rem 0;
|
|
73
|
+
}
|
|
74
|
+
slot[name='icon'] {
|
|
75
|
+
align-items: flex-start;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host([color='neutral']) {
|
|
80
|
+
background-color: var(--fhi-color-neutral-surface-default);
|
|
81
|
+
color: var(--fhi-color-neutral-text-default);
|
|
82
|
+
slot[name='icon'] {
|
|
83
|
+
color: var(--fhi-color-neutral-base-default);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&:host([variant='bordered']) {
|
|
87
|
+
border-color: var(--fhi-color-neutral-surface-active);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:host([color='success']) {
|
|
92
|
+
background-color: var(--fhi-color-success-surface-default);
|
|
93
|
+
color: var(--fhi-color-success-text-default);
|
|
94
|
+
slot[name='icon'] {
|
|
95
|
+
color: var(--fhi-color-success-base-default);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:host([variant='bordered']) {
|
|
99
|
+
border-color: var(--fhi-color-success-surface-active);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host([color='warning']) {
|
|
104
|
+
background-color: var(--fhi-color-warning-surface-default);
|
|
105
|
+
color: var(--fhi-color-warning-text-default);
|
|
106
|
+
slot[name='icon'] {
|
|
107
|
+
color: var(--fhi-color-warning-text-subtle);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&:host([variant='bordered']) {
|
|
111
|
+
border-color: var(--fhi-color-warning-surface-active);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([color='danger']) {
|
|
116
|
+
background-color: var(--fhi-color-danger-surface-default);
|
|
117
|
+
color: var(--fhi-color-danger-text-default);
|
|
118
|
+
slot[name='icon'] {
|
|
119
|
+
color: var(--fhi-color-danger-base-default);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&:host([variant='bordered']) {
|
|
123
|
+
border-color: var(--fhi-color-danger-surface-active);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
i([e({
|
|
130
|
+
type: String,
|
|
131
|
+
reflect: !0
|
|
132
|
+
})], s.prototype, "heading", void 0), i([e({
|
|
133
|
+
type: String,
|
|
134
|
+
reflect: !0
|
|
135
|
+
})], s.prototype, "color", void 0), i([e({
|
|
136
|
+
type: String,
|
|
137
|
+
reflect: !0
|
|
138
|
+
})], s.prototype, "variant", void 0), s = i([n(o)], s);
|
|
139
|
+
//#endregion
|
|
140
|
+
export { s as FhiCallout, o as FhiCalloutSelector };
|
|
141
|
+
|
|
142
|
+
//# sourceMappingURL=fhi-callout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fhi-callout.js","names":[],"sources":["../../src/components/fhi-callout/fhi-callout.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiCalloutSelector = 'fhi-callout';\n\nimport '../typography/fhi-title/fhi-title.component';\nimport '../typography/fhi-body/fhi-body.component';\n\n/**\n * ## FHI Callout\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-callout--docs}\n *\n * The `<fhi-callout>` component represents a callout message.\n * It should be used to highlight important information or warnings.\n *\n * @tag fhi-callout\n * @element fhi-callout\n *\n * @slot icon - Optional icon to be displayed in the callout.\n * @slot - The main content of the callout. This is typically plain text or other inline elements.\n *\n */\n@customElement(FhiCalloutSelector)\nexport class FhiCallout extends LitElement {\n /**\n * The heading of the callout. This is optional and can be used to provide a title for the callout message.\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n heading?: string;\n\n /**\n * The color of the callout, which indicates the type of message being conveyed.\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n color: 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';\n\n /**\n * The variant of the callout, which determines the visual style of the callout.\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n variant: 'subtle' | 'bordered' = 'subtle';\n\n update(changedProperties: PropertyValues) {\n if (changedProperties.has('color')) {\n switch (this.color) {\n case 'neutral':\n case 'success':\n case 'warning':\n case 'danger':\n break;\n default:\n this.color = 'neutral';\n break;\n }\n }\n\n if (changedProperties.has('variant')) {\n switch (this.variant) {\n case 'subtle':\n case 'bordered':\n break;\n default:\n this.variant = 'subtle';\n break;\n }\n }\n\n super.update(changedProperties);\n }\n\n render() {\n return html`\n <slot name=\"icon\"></slot>\n <div>\n ${this.heading\n ? html`<fhi-title level=\"2\">${this.heading}</fhi-title>`\n : null}\n <slot></slot>\n </div>\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n align-items: center;\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n border-radius: var(--fhi-border-radius-100);\n border: var(--fhi-dimension-border-width) solid transparent;\n\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n font: var(--fhi-typography-body-medium-font-weight)\n var(--fhi-typography-body-medium-font-size) /\n var(--fhi-typography-body-medium-line-height)\n var(--fhi-font-family-default);\n\n div {\n display: flex;\n flex-direction: column;\n padding: 0 var(--fhi-spacing-050);\n }\n\n slot[name='icon'] {\n display: flex;\n justify-content: center;\n align-self: stretch;\n }\n\n ::slotted([slot='icon']) {\n margin-inline-end: var(--fhi-spacing-050);\n }\n }\n\n :host([heading]) {\n fhi-title {\n padding: 0.125rem 0;\n }\n slot[name='icon'] {\n align-items: flex-start;\n }\n }\n\n :host([color='neutral']) {\n background-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n slot[name='icon'] {\n color: var(--fhi-color-neutral-base-default);\n }\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-neutral-surface-active);\n }\n }\n\n :host([color='success']) {\n background-color: var(--fhi-color-success-surface-default);\n color: var(--fhi-color-success-text-default);\n slot[name='icon'] {\n color: var(--fhi-color-success-base-default);\n }\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-success-surface-active);\n }\n }\n\n :host([color='warning']) {\n background-color: var(--fhi-color-warning-surface-default);\n color: var(--fhi-color-warning-text-default);\n slot[name='icon'] {\n color: var(--fhi-color-warning-text-subtle);\n }\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-warning-surface-active);\n }\n }\n\n :host([color='danger']) {\n background-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-default);\n slot[name='icon'] {\n color: var(--fhi-color-danger-base-default);\n }\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-danger-surface-active);\n }\n }\n `;\n}\n"],"mappings":";;;;AAGA,IAAa,IAAqB,eAqB3B,IAAA,cAAyB,EAAW;;4BAiBa,0BASrB;;CAEjC,OAAO,GAAmC;EACxC,IAAI,EAAkB,IAAI,OAAO,GAC/B,QAAQ,KAAK,OAAb;GACE,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK,UACH;GACF;IACE,KAAK,QAAQ;IACb;EACJ;EAGF,IAAI,EAAkB,IAAI,SAAS,GACjC,QAAQ,KAAK,SAAb;GACE,KAAK;GACL,KAAK,YACH;GACF;IACE,KAAK,UAAU;IACf;EACJ;EAGF,MAAM,OAAO,CAAiB;CAChC;CAEA,SAAS;EACP,OAAO,CAAI;;;UAGL,KAAK,UACH,CAAI,wBAAwB,KAAK,QAAQ,gBACzC,KAAK;;;;CAIf;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFrB;GAtJG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MASxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MASxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UA1B1C,EAAc,CAAkB,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"kind":"javascript-module","path":"src/components/fhi-callout/fhi-callout.component.ts","declarations":[{"kind":"class","description":"## FHI Callout\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-callout--docs\n\nThe `<fhi-callout>` component represents a callout message.\nIt should be used to highlight important information or warnings.","name":"FhiCallout","slots":[{"description":"The main content of the callout. This is typically plain text or other inline elements.","name":""},{"description":"Optional icon to be displayed in the callout.","name":"icon"}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"default":"'neutral'","description":"The color of the callout, which indicates the type of message being conveyed.","reflects":true,"attribute":"color"},{"kind":"field","name":"heading","type":{"text":"string"},"description":"The heading of the callout. This is optional and can be used to provide a title for the callout message.","reflects":true,"attribute":"heading"},{"kind":"field","name":"variant","type":{"text":"string"},"default":"'subtle'","description":"The variant of the callout, which determines the visual style of the callout.","reflects":true,"attribute":"variant"}],"attributes":[{"name":"color","type":{"text":"string"},"default":"'neutral'","description":"The color of the callout, which indicates the type of message being conveyed.","fieldName":"color"},{"name":"heading","type":{"text":"string"},"description":"The heading of the callout. This is optional and can be used to provide a title for the callout message.","fieldName":"heading"},{"name":"variant","type":{"text":"string"},"default":"'subtle'","description":"The variant of the callout, which determines the visual style of the callout.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-callout","customElement":true},{"kind":"variable","name":"FhiCalloutSelector","type":{"text":"string"},"default":"'fhi-callout'"}]}
|
package/fhi-data-table.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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 "./fhi-grid.js";
|
|
3
2
|
import "./fhi-body.js";
|
|
3
|
+
import "./fhi-grid.js";
|
|
4
4
|
//#region src/components/data-table/fhi-data-table/fhi-data-table.component.ts
|
|
5
5
|
var o = "fhi-data-table", s = class extends r {
|
|
6
6
|
connectedCallback() {
|