@folkehelseinstituttet/designsystem 0.18.0 → 0.19.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.
Files changed (3) hide show
  1. package/fhi-flex.js +60 -22
  2. package/fhi-flex.js.map +1 -1
  3. package/package.json +1 -1
package/fhi-flex.js CHANGED
@@ -1,28 +1,28 @@
1
- import { i as g, n as l, a as m, x as d, t as h } from "./property-DYwjZ69W.js";
2
- var u = Object.defineProperty, c = Object.getOwnPropertyDescriptor, p = (r, i, a, s) => {
3
- for (var e = s > 1 ? void 0 : s ? c(i, a) : i, o = r.length - 1, n; o >= 0; o--)
4
- (n = r[o]) && (e = (s ? n(i, a, e) : n(e)) || e);
5
- return s && e && u(i, a, e), e;
1
+ import { i as g, n, a as h, x as m, t as c } from "./property-DYwjZ69W.js";
2
+ var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, a, r, o) => {
3
+ for (var e = o > 1 ? void 0 : o ? f(a, r) : a, p = s.length - 1, l; p >= 0; p--)
4
+ (l = s[p]) && (e = (o ? l(a, r, e) : l(e)) || e);
5
+ return o && e && u(a, r, e), e;
6
6
  };
7
- const f = "fhi-flex";
8
- let t = class extends m {
7
+ const d = "fhi-flex";
8
+ let t = class extends h {
9
9
  constructor() {
10
- super(...arguments), this.direction = "row", this.gap = "medium", this.wrap = !1;
10
+ super(...arguments), this.direction = "row", this.gap = "medium", this.wrap = !1, this.justify = "start", this.align = "stretch";
11
11
  }
12
- updated(r) {
13
- if (super.updated(r), r.has("gap")) {
12
+ updated(s) {
13
+ if (super.updated(s), s.has("gap")) {
14
14
  if (["small", "medium", "large"].includes(
15
15
  String(this.gap)
16
16
  )) {
17
17
  this.style.gap = "";
18
18
  return;
19
19
  }
20
- const a = Number(this.gap) ? `${this.gap}px` : this.gap;
21
- this.style.gap = a;
20
+ const r = Number(this.gap) ? `${this.gap}px` : this.gap;
21
+ this.style.gap = r;
22
22
  }
23
23
  }
24
24
  render() {
25
- return d`<slot></slot>`;
25
+ return m`<slot></slot>`;
26
26
  }
27
27
  };
28
28
  t.styles = g`
@@ -60,21 +60,59 @@ t.styles = g`
60
60
  :host([gap='large']) {
61
61
  gap: var(--dimension-gap-large);
62
62
  }
63
+
64
+ :host([justify='center']) {
65
+ justify-content: center;
66
+ }
67
+
68
+ :host([justify='start']) {
69
+ justify-content: start;
70
+ }
71
+
72
+ :host([justify='end']) {
73
+ justify-content: end;
74
+ }
75
+
76
+ :host([align='stretch']) {
77
+ align-items: stretch;
78
+ }
79
+
80
+ :host([align='center']) {
81
+ align-items: center;
82
+ }
83
+
84
+ :host([align='start']) {
85
+ align-items: start;
86
+ }
87
+
88
+ :host([align='end']) {
89
+ align-items: end;
90
+ }
91
+
92
+ :host([align='baseline']) {
93
+ align-items: baseline;
94
+ }
63
95
  `;
64
- p([
65
- l({ type: String, reflect: !0 })
96
+ i([
97
+ n({ type: String, reflect: !0 })
66
98
  ], t.prototype, "direction", 2);
67
- p([
68
- l({ type: String, reflect: !0 })
99
+ i([
100
+ n({ type: String, reflect: !0 })
69
101
  ], t.prototype, "gap", 2);
70
- p([
71
- l({ type: Boolean, reflect: !0 })
102
+ i([
103
+ n({ type: Boolean, reflect: !0 })
72
104
  ], t.prototype, "wrap", 2);
73
- t = p([
74
- h(f)
105
+ i([
106
+ n({ type: String })
107
+ ], t.prototype, "justify", 2);
108
+ i([
109
+ n({ type: String })
110
+ ], t.prototype, "align", 2);
111
+ t = i([
112
+ c(d)
75
113
  ], t);
76
114
  export {
77
115
  t as FhiFlex,
78
- f as FhiFlexSelector
116
+ d as FhiFlexSelector
79
117
  };
80
118
  //# sourceMappingURL=fhi-flex.js.map
package/fhi-flex.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-flex.js","sources":["../../src/components/fhi-flex/fhi-flex.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiFlexSelector = 'fhi-flex';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n@customElement(FhiFlexSelector)\nexport class FhiFlex extends LitElement {\n @property({ type: String, reflect: true }) direction: 'row' | 'column' =\n 'row';\n @property({ type: String, reflect: true }) gap:\n | 'small'\n | 'medium'\n | 'large'\n | FhiGapWidthUnit = 'medium';\n @property({ type: Boolean, reflect: true }) wrap = false;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('gap')) {\n const isPresetGap = ['small', 'medium', 'large'].includes(\n String(this.gap),\n );\n\n if (isPresetGap) {\n this.style.gap = '';\n return;\n }\n const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n this.style.gap = gapValue as string;\n }\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static styles = css`\n :host {\n --dimension-gap-small: var(--fhi-spacing-100);\n --dimension-gap-medium: var(--fhi-spacing-200);\n --dimension-gap-large: var(--fhi-spacing-300);\n }\n\n :host {\n display: flex;\n gap: var(--dimension-gap-medium);\n }\n\n :host([wrap]) {\n flex-wrap: wrap;\n }\n\n :host([direction='row']) {\n flex-direction: row;\n }\n\n :host([direction='column']) {\n flex-direction: column;\n }\n\n :host([gap='small']) {\n gap: var(--dimension-gap-small);\n }\n\n :host([gap='medium']) {\n gap: var(--dimension-gap-medium);\n }\n\n :host([gap='large']) {\n gap: var(--dimension-gap-large);\n }\n `;\n}\n"],"names":["FhiFlexSelector","FhiFlex","LitElement","changedProperties","gapValue","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAKxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GACsC,KAAA,YACzC,OACyC,KAAA,MAIrB,UACsB,KAAA,OAAO;AAAA,EAAA;AAAA,EAEnD,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,KAAK,GAAG;AAKhC,UAJoB,CAAC,SAAS,UAAU,OAAO,EAAE;AAAA,QAC/C,OAAO,KAAK,GAAG;AAAA,MAAA,GAGA;AACf,aAAK,MAAM,MAAM;AACjB;AAAA,MACF;AACA,YAAMC,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK;AAC3D,WAAK,MAAM,MAAMA;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,EACT;AAsCF;AAnEaJ,EA+BJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9B2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAD9BP,EACgC,WAAA,aAAA,CAAA;AAEAM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BP,EAGgC,WAAA,OAAA,CAAA;AAKCM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BP,EAQiC,WAAA,QAAA,CAAA;AARjCA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAe;AAAA,GACjBC,CAAA;"}
1
+ {"version":3,"file":"fhi-flex.js","sources":["../../src/components/fhi-flex/fhi-flex.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiFlexSelector = 'fhi-flex';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n@customElement(FhiFlexSelector)\nexport class FhiFlex extends LitElement {\n @property({ type: String, reflect: true }) direction: 'row' | 'column' =\n 'row';\n @property({ type: String, reflect: true }) gap:\n | 'small'\n | 'medium'\n | 'large'\n | FhiGapWidthUnit = 'medium';\n @property({ type: Boolean, reflect: true }) wrap = false;\n @property({ type: String }) justify: 'start' | 'center' | 'end' = 'start';\n @property({ type: String }) align:\n | 'stretch'\n | 'start'\n | 'center'\n | 'end'\n | 'baseline' = 'stretch';\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('gap')) {\n const isPresetGap = ['small', 'medium', 'large'].includes(\n String(this.gap),\n );\n\n if (isPresetGap) {\n this.style.gap = '';\n return;\n }\n const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n this.style.gap = gapValue as string;\n }\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static styles = css`\n :host {\n --dimension-gap-small: var(--fhi-spacing-100);\n --dimension-gap-medium: var(--fhi-spacing-200);\n --dimension-gap-large: var(--fhi-spacing-300);\n }\n\n :host {\n display: flex;\n gap: var(--dimension-gap-medium);\n }\n\n :host([wrap]) {\n flex-wrap: wrap;\n }\n\n :host([direction='row']) {\n flex-direction: row;\n }\n\n :host([direction='column']) {\n flex-direction: column;\n }\n\n :host([gap='small']) {\n gap: var(--dimension-gap-small);\n }\n\n :host([gap='medium']) {\n gap: var(--dimension-gap-medium);\n }\n\n :host([gap='large']) {\n gap: var(--dimension-gap-large);\n }\n\n :host([justify='center']) {\n justify-content: center;\n }\n\n :host([justify='start']) {\n justify-content: start;\n }\n\n :host([justify='end']) {\n justify-content: end;\n }\n\n :host([align='stretch']) {\n align-items: stretch;\n }\n\n :host([align='center']) {\n align-items: center;\n }\n\n :host([align='start']) {\n align-items: start;\n }\n\n :host([align='end']) {\n align-items: end;\n }\n\n :host([align='baseline']) {\n align-items: baseline;\n }\n `;\n}\n"],"names":["FhiFlexSelector","FhiFlex","LitElement","changedProperties","gapValue","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAKxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GACsC,KAAA,YACzC,OACyC,KAAA,MAIrB,UACsB,KAAA,OAAO,IACvB,KAAA,UAAsC,SACtC,KAAA,QAKX;AAAA,EAAA;AAAA,EAEjB,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,KAAK,GAAG;AAKhC,UAJoB,CAAC,SAAS,UAAU,OAAO,EAAE;AAAA,QAC/C,OAAO,KAAK,GAAG;AAAA,MAAA,GAGA;AACf,aAAK,MAAM,MAAM;AACjB;AAAA,MACF;AACA,YAAMC,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK;AAC3D,WAAK,MAAM,MAAMA;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,EACT;AAsEF;AA1GaJ,EAsCJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AArC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAD9BP,EACgC,WAAA,aAAA,CAAA;AAEAM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BP,EAGgC,WAAA,OAAA,CAAA;AAKCM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BP,EAQiC,WAAA,QAAA,CAAA;AAChBM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfP,EASiB,WAAA,WAAA,CAAA;AACAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfP,EAUiB,WAAA,SAAA,CAAA;AAVjBA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAe;AAAA,GACjBC,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.18.0",
5
+ "version": "0.19.0",
6
6
  "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
7
7
  "keywords": [
8
8
  "fhi",