nve-designsystem 2.7.0 → 2.8.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 (4) hide show
  1. package/components/nve-checkbox/nve-checkbox.styles.js +7 -16
  2. package/components/nve-textarea/nve-textarea.component.js +51 -47
  3. package/custom-elements.json +1 -1
  4. package/package.json +1 -1
package/components/nve-checkbox/nve-checkbox.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { i as r } from "../../chunks/lit-element.js";
2
- const t = r`
2
+ const a = r`
3
3
  .error {
4
4
  border-color: var(--feedback-background-emphasized-error) !important;
5
5
  }
@@ -8,8 +8,7 @@ const t = r`
8
8
  }
9
9
  }
10
10
 
11
- :host::part(control),
12
- :host([disabled]:hover)::part(control) {
11
+ :host::part(control) {
13
12
  border: var(--border-width-strong) solid var(--neutrals-foreground-primary);
14
13
  border-radius: var(--border-radius-small);
15
14
  width: 1.1rem;
@@ -18,25 +17,20 @@ const t = r`
18
17
  }
19
18
 
20
19
  :host::part(control control--checked),
21
- :host::part(control control--indeterminate),
22
- :host([disabled]:hover)::part(control control--checked),
23
- :host([disabled]:hover)::part(control control--indeterminate) {
20
+ :host::part(control control--indeterminate) {
24
21
  background: var(--neutrals-foreground-primary) !important;
25
22
  border-color: var(--neutrals-foreground-primary) !important;
26
23
  }
27
24
 
28
- :host([data-invalid])::part(control),
29
- :host([disabled][data-user-invalid]:hover)::part(control) {
25
+ :host([data-invalid])::part(control) {
30
26
  border-color: var(--feedback-background-emphasized-error);
31
27
  }
32
28
  :host([data-invalid])::part(control control--checked),
33
- :host([data-user-invalid])::part(control control--indeterminate),
34
- :host([disabled][data-user-invalid]:hover)::part(control control--checked),
35
- :host([disabled][data-user-invalid]:hover)::part(control control--indeterminate) {
29
+ :host([data-user-invalid])::part(control control--indeterminate) {
36
30
  background: var(--feedback-background-emphasized-error);
37
31
  }
38
32
 
39
- :host(:hover)::part(control) {
33
+ :host(:not([disabled]):hover)::part(control) {
40
34
  border-color: var(--neutrals-foreground-subtle, #006b99) !important;
41
35
  }
42
36
 
@@ -50,9 +44,6 @@ const t = r`
50
44
  background: var(--neutrals-foreground-subtle, #006b99);
51
45
  }
52
46
 
53
- .checkbox--disabled {
54
- opacity: var(--disabled);
55
- }
56
47
  .checkbox {
57
48
  align-items: center;
58
49
  }
@@ -61,5 +52,5 @@ const t = r`
61
52
  }
62
53
  `;
63
54
  export {
64
- t as default
55
+ a as default
65
56
  };
package/components/nve-textarea/nve-textarea.component.js CHANGED
@@ -1,5 +1,5 @@
1
- import { a as m, E as p, x as n } from "../../chunks/lit-element.js";
2
- import { n as i, t as b } from "../../chunks/property.js";
1
+ import { a as m, E as p, x as o } from "../../chunks/lit-element.js";
2
+ import { n as s, t as b } from "../../chunks/property.js";
3
3
  import { r as u } from "../../chunks/state.js";
4
4
  import { e as v } from "../../chunks/query.js";
5
5
  import f from "./nve-textarea.styles.js";
@@ -8,10 +8,10 @@ import { l as y } from "../../chunks/live.js";
8
8
  import { e as g } from "../../chunks/class-map.js";
9
9
  import "../nve-icon/nve-icon.component.js";
10
10
  import "../nve-label/nve-label.component.js";
11
- var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (s, o, a, h) => {
12
- for (var l = h > 1 ? void 0 : h ? _(o, a) : o, d = s.length - 1, c; d >= 0; d--)
13
- (c = s[d]) && (l = (h ? c(o, a, l) : c(l)) || l);
14
- return h && l && x(o, a, l), l;
11
+ var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (i, l, a, h) => {
12
+ for (var n = h > 1 ? void 0 : h ? _(l, a) : l, d = i.length - 1, c; d >= 0; d--)
13
+ (c = i[d]) && (n = (h ? c(l, a, n) : c(n)) || n);
14
+ return h && n && x(l, a, n), n;
15
15
  };
16
16
  let e = class extends m {
17
17
  constructor() {
@@ -22,11 +22,11 @@ let e = class extends m {
22
22
  const a = this.input.checkValidity();
23
23
  this.toggleAttribute("data-valid", a), this.toggleAttribute("data-invalid", !a);
24
24
  }
25
- const s = this.shadowRoot?.querySelector(".textarea__control"), o = this.shadowRoot?.querySelector(".textarea__label");
26
- s && o && (this.resizeObserver = new ResizeObserver((a) => {
25
+ const i = this.shadowRoot?.querySelector(".textarea__control"), l = this.shadowRoot?.querySelector(".textarea__label");
26
+ i && l && (this.resizeObserver = new ResizeObserver((a) => {
27
27
  for (const h of a)
28
- o.style.width = `${h.contentRect.width + 32}px`;
29
- }), this.resizeObserver.observe(s));
28
+ l.style.width = `${h.contentRect.width + 32}px`;
29
+ }), this.resizeObserver.observe(i));
30
30
  }
31
31
  connectedCallback() {
32
32
  super.connectedCallback(), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this));
@@ -35,11 +35,11 @@ let e = class extends m {
35
35
  super.disconnectedCallback(), this.closest("form")?.removeEventListener("submit", this.handleSubmit.bind(this)), this.resizeObserver?.disconnect();
36
36
  }
37
37
  // kan senere flyttes til utils hvis blir brukt flere steder
38
- emit(s) {
39
- this.dispatchEvent(new CustomEvent(s));
38
+ emit(i) {
39
+ this.dispatchEvent(new CustomEvent(i));
40
40
  }
41
- handleSubmit(s) {
42
- s.preventDefault(), this.checkValidity();
41
+ handleSubmit(i) {
42
+ i.preventDefault(), this.checkValidity();
43
43
  }
44
44
  // validerer ikke hvis bruker ikke har tatt på input feltet
45
45
  handleBlur() {
@@ -55,8 +55,8 @@ let e = class extends m {
55
55
  checkValidity() {
56
56
  this.input.checkValidity() ? this.resetValidation() : this.makeInvalid();
57
57
  }
58
- setCustomValidity(s = "") {
59
- this.input.setCustomValidity(s), this.checkValidity();
58
+ setCustomValidity(i = "") {
59
+ this.input.setCustomValidity(i), this.checkValidity();
60
60
  }
61
61
  makeInvalid() {
62
62
  this.errorMessage = this.errorMessage || this.input.validationMessage, this.showErrorMessage = !0, this.emit("sl-invalid"), this.toggleValidationAttributes(!1);
@@ -65,16 +65,20 @@ let e = class extends m {
65
65
  this.showErrorMessage = !1, this.toggleValidationAttributes(!0);
66
66
  }
67
67
  /** Toggler riktig validering attribute for å vise riktig style */
68
- toggleValidationAttributes(s) {
69
- this.toggleAttribute("data-valid", s), this.toggleAttribute("data-user-valid", s), this.toggleAttribute("data-invalid", !s), this.toggleAttribute("data-user-invalid", !s);
68
+ toggleValidationAttributes(i) {
69
+ this.toggleAttribute("data-valid", i), this.toggleAttribute("data-user-valid", i), this.toggleAttribute("data-invalid", !i), this.toggleAttribute("data-user-invalid", !i);
70
70
  }
71
71
  // eslint-disable-next-line max-lines-per-function
72
72
  render() {
73
- return n`
73
+ const i = !!this.querySelector('[slot="label"]');
74
+ return o`
74
75
  <div part="form-control" class=${g({ "form-control": !0, "form-control--has-label": this.label })}>
75
- ${this.label ? n`<div class="textarea__label">
76
- <nve-label id="label" value=${this.label} size="small" tooltip=${r(this.tooltip)}></nve-label>
77
- </div>` : p}
76
+ ${i ? o`<slot name="label"></slot>` : this.label ? o`<nve-label
77
+ id="label"
78
+ value=${this.label}
79
+ size="small"
80
+ tooltip=${r(this.tooltip)}
81
+ ></nve-label>` : p}
78
82
  <div part="base" class="textarea__base">
79
83
  <textarea
80
84
  part="textarea"
@@ -103,17 +107,17 @@ let e = class extends m {
103
107
  Må gjøres sånn fordi vi vil ikke begrense textarea__base brede til fit-content (da textarea kan aldri ta så mye plass som er
104
108
  tilgjengelig i nettleseren og man må alltid sette brede på den manuelt. Nei takk.) -->
105
109
  <!-- Foreløpig kan man ha enten 'lock' eller 'error' ikone -->
106
- ${this.disabled || this.showErrorMessage ? n`<div class="textarea__icon__container">
107
- ${this.disabled ? n`<nve-icon name="lock"></nve-icon>` : null}
108
- ${this.showErrorMessage ? n`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
110
+ ${this.disabled || this.showErrorMessage ? o`<div class="textarea__icon__container">
111
+ ${this.disabled ? o`<nve-icon name="lock"></nve-icon>` : null}
112
+ ${this.showErrorMessage ? o`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
109
113
  </div>` : p}
110
114
  </div>
111
115
  <div part="help-text-container" class="textarea__help-text__container">
112
116
  <!-- Ikke vis hjelpe tekst mens feil -->
113
- ${!this.showErrorMessage && this.helpText ? n`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
117
+ ${!this.showErrorMessage && this.helpText ? o`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
114
118
  >${this.helpText}</span
115
119
  >` : p}
116
- ${this.showErrorMessage ? n`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : p}
120
+ ${this.showErrorMessage ? o`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : p}
117
121
  </div>
118
122
  </div>
119
123
  `;
@@ -121,64 +125,64 @@ let e = class extends m {
121
125
  };
122
126
  e.styles = [f];
123
127
  t([
124
- i()
128
+ s()
125
129
  ], e.prototype, "name", 2);
126
130
  t([
127
- i()
131
+ s()
128
132
  ], e.prototype, "value", 2);
129
133
  t([
130
- i()
134
+ s()
131
135
  ], e.prototype, "errorMessage", 2);
132
136
  t([
133
- i()
137
+ s()
134
138
  ], e.prototype, "title", 2);
135
139
  t([
136
- i({ type: Boolean, reflect: !0 })
140
+ s({ type: Boolean, reflect: !0 })
137
141
  ], e.prototype, "filled", 2);
138
142
  t([
139
- i()
143
+ s()
140
144
  ], e.prototype, "label", 2);
141
145
  t([
142
- i()
146
+ s()
143
147
  ], e.prototype, "helpText", 2);
144
148
  t([
145
- i({ type: Boolean, reflect: !0 })
149
+ s({ type: Boolean, reflect: !0 })
146
150
  ], e.prototype, "disabled", 2);
147
151
  t([
148
- i({ type: Boolean, reflect: !0 })
152
+ s({ type: Boolean, reflect: !0 })
149
153
  ], e.prototype, "readonly", 2);
150
154
  t([
151
- i()
155
+ s()
152
156
  ], e.prototype, "placeholder", 2);
153
157
  t([
154
- i({ type: Boolean, reflect: !0 })
158
+ s({ type: Boolean, reflect: !0 })
155
159
  ], e.prototype, "required", 2);
156
160
  t([
157
- i()
161
+ s()
158
162
  ], e.prototype, "requiredLabel", 2);
159
163
  t([
160
- i({ type: Number })
164
+ s({ type: Number })
161
165
  ], e.prototype, "minlength", 2);
162
166
  t([
163
- i({ type: Number })
167
+ s({ type: Number })
164
168
  ], e.prototype, "maxlength", 2);
165
169
  t([
166
- i()
170
+ s()
167
171
  ], e.prototype, "autocapitalize", 2);
168
172
  t([
169
- i()
173
+ s()
170
174
  ], e.prototype, "autocorrect", 2);
171
175
  t([
172
- i()
176
+ s()
173
177
  ], e.prototype, "tooltip", 2);
174
178
  t([
175
- i({ reflect: !0, type: String })
179
+ s({ reflect: !0, type: String })
176
180
  ], e.prototype, "testId", 2);
177
181
  t([
178
- i()
182
+ s()
179
183
  ], e.prototype, "inputmode", 2);
180
184
  t([
181
- i()
185
+ s()
182
186
  ], e.prototype, "rows", 2);
183
187
  t([
184
188
  u()
package/custom-elements.json CHANGED
@@ -6670,7 +6670,7 @@
6670
6670
  "package": {
6671
6671
  "name": "nve-designsystem",
6672
6672
  "description": "Designsystem for NVE",
6673
- "version": "2.6.0",
6673
+ "version": "2.7.1",
6674
6674
  "author": {
6675
6675
  "name": "NVE",
6676
6676
  "email": "nve@nve.no"
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "license": "MIT",
9
9
  "homepage": "https://github.com/NVE/Designsystem/",
10
- "version": "2.7.0",
10
+ "version": "2.8.0",
11
11
  "customElements": "custom-elements.json",
12
12
  "exports": {
13
13
  ".": {