@justeattakeaway/pie-form-label 0.18.13 → 0.18.15

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/dist/index.js +26 -26
  2. package/package.json +5 -5
  3. package/src/form-label.scss +3 -0
package/dist/index.js CHANGED
@@ -1,59 +1,59 @@
1
- import { LitElement as b, unsafeCSS as h, nothing as g, html as f } from "lit";
2
- import { ifDefined as m } from "lit/directives/if-defined.js";
1
+ import { LitElement as g, unsafeCSS as m, nothing as b, html as c } from "lit";
2
+ import { ifDefined as h } from "lit/directives/if-defined.js";
3
3
  import { safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
4
- import { property as d } from "lit/decorators.js";
5
- const l = class l extends b {
4
+ import { property as p } from "lit/decorators.js";
5
+ const r = class r extends g {
6
6
  willUpdate() {
7
- this.getAttribute("v") || this.setAttribute("v", l.v);
7
+ this.getAttribute("v") || this.setAttribute("v", r.v);
8
8
  }
9
9
  };
10
- l.v = "0.18.13";
11
- let p = l;
12
- const u = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-formLabel{--form-label-font-size: calc(var(--dt-font-body-strong-s-size) * 1px);--form-label-line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);--form-label-font-weight: var(--dt-font-body-strong-s-weight);--form-label-color: var(--dt-color-content-default-solid);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--dt-spacing-d);color:var(--form-label-color);font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight);padding-block-end:var(--dt-spacing-a)}.c-formLabel-optional,.c-formLabel-trailing{color:var(--dt-color-content-subdued-solid);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);font-weight:var(--dt-font-body-s-weight)}.c-formLabel-leading-wrapper{display:flex}.c-formLabel-leading{margin-inline-end:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}";
13
- var y = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, r, n, a) => {
14
- for (var t = a > 1 ? void 0 : a ? L(r, n) : r, s = e.length - 1, c; s >= 0; s--)
15
- (c = e[s]) && (t = (a ? c(r, n, t) : c(t)) || t);
16
- return a && t && y(r, n, t), t;
10
+ r.v = "0.18.15";
11
+ let d = r;
12
+ const y = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-formLabel{--form-label-font-family: var(--dt-font-body-strong-s-family);--form-label-font-size: calc(var(--dt-font-body-strong-s-size) * 1px);--form-label-line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);--form-label-font-weight: var(--dt-font-body-strong-s-weight);--form-label-color: var(--dt-color-content-default-solid);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--dt-spacing-d);color:var(--form-label-color);font-family:var(--form-label-font-family);font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight);padding-block-end:var(--dt-spacing-a)}.c-formLabel-optional,.c-formLabel-trailing{color:var(--dt-color-content-subdued-solid);font-family:var(--dt-font-body-s-family);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);font-weight:var(--dt-font-body-s-weight)}.c-formLabel-leading-wrapper{display:flex}.c-formLabel-leading{margin-inline-end:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}";
13
+ var u = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (t, a, n, l) => {
14
+ for (var e = l > 1 ? void 0 : l ? L(a, n) : a, s = t.length - 1, f; s >= 0; s--)
15
+ (f = t[s]) && (e = (l ? f(a, n, e) : f(e)) || e);
16
+ return l && e && u(a, n, e), e;
17
17
  };
18
- let o = class extends p {
18
+ let o = class extends d {
19
19
  _renderOptionalLabel() {
20
- const { optional: e } = this;
21
- return e ? f`<span class="c-formLabel-optional">${e}</span>` : g;
20
+ const { optional: t } = this;
21
+ return t ? c`<span class="c-formLabel-optional">${t}</span>` : b;
22
22
  }
23
23
  handleClick() {
24
24
  if (this.for) {
25
- const e = document.querySelector(`#${this.for}`);
26
- if (!(e && e.focusTarget && "focus" in e.focusTarget && "click" in e.focusTarget)) return;
27
- e.focusTarget.focus(), e.focusTarget.click();
25
+ const t = document.querySelector(`#${this.for}`);
26
+ if (!(t && t.focusTarget && "focus" in t.focusTarget && "click" in t.focusTarget)) return;
27
+ t.focusTarget.focus(), t.focusTarget.click();
28
28
  }
29
29
  }
30
30
  render() {
31
31
  const {
32
- trailing: e
32
+ trailing: t
33
33
  } = this;
34
- return f`
34
+ return c`
35
35
  <label
36
36
  @click=${this.handleClick}
37
37
  data-test-id="pie-form-label"
38
38
  class="c-formLabel"
39
- for=${m(this.for)}>
39
+ for=${h(this.for)}>
40
40
  <div class="c-formLabel-leading-wrapper">
41
41
  <span class="c-formLabel-leading" data-test-id="pie-form-label-leading"><slot></slot></span>
42
42
  ${this._renderOptionalLabel()}
43
43
  </div>
44
- ${e ? f`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${e}</span>` : g}
44
+ ${t ? c`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${t}</span>` : b}
45
45
  </label>`;
46
46
  }
47
47
  };
48
- o.styles = h(u);
48
+ o.styles = m(y);
49
49
  i([
50
- d({ type: String, reflect: !0 })
50
+ p({ type: String, reflect: !0 })
51
51
  ], o.prototype, "for", 2);
52
52
  i([
53
- d({ type: String })
53
+ p({ type: String })
54
54
  ], o.prototype, "optional", 2);
55
55
  i([
56
- d({ type: String })
56
+ p({ type: String })
57
57
  ], o.prototype, "trailing", 2);
58
58
  o = i([
59
59
  v("pie-form-label")
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-form-label",
3
3
  "description": "PIE Design System Form Label built using Web Components",
4
- "version": "0.18.13",
4
+ "version": "0.18.15",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -43,15 +43,15 @@
43
43
  "devDependencies": {
44
44
  "@custom-elements-manifest/analyzer": "0.9.0",
45
45
  "@justeattakeaway/pie-components-config": "0.21.0",
46
- "@justeattakeaway/pie-css": "0.29.0",
46
+ "@justeattakeaway/pie-css": "0.30.0",
47
47
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
48
- "@justeattakeaway/pie-switch": "2.3.17",
49
- "@justeattakeaway/pie-text-input": "0.29.18",
48
+ "@justeattakeaway/pie-switch": "2.3.18",
49
+ "@justeattakeaway/pie-text-input": "0.29.20",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
51
51
  "cem-plugin-module-file-extensions": "0.0.5"
52
52
  },
53
53
  "dependencies": {
54
- "@justeattakeaway/pie-webc-core": "9.0.0"
54
+ "@justeattakeaway/pie-webc-core": "10.0.0"
55
55
  },
56
56
  "volta": {
57
57
  "extends": "../../../package.json"
package/src/form-label.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  }
6
6
 
7
7
  .c-formLabel {
8
+ --form-label-font-family: var(--dt-font-body-strong-s-family);
8
9
  --form-label-font-size: #{p.font-size(--dt-font-body-strong-s-size)};
9
10
  --form-label-line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);
10
11
  --form-label-font-weight: var(--dt-font-body-strong-s-weight);
@@ -15,6 +16,7 @@
15
16
  align-items: flex-end;
16
17
  gap: var(--dt-spacing-d);
17
18
  color: var(--form-label-color);
19
+ font-family: var(--form-label-font-family);
18
20
  font-size: var(--form-label-font-size);
19
21
  line-height: var(--form-label-line-height);
20
22
  font-weight: var(--form-label-font-weight);
@@ -24,6 +26,7 @@
24
26
  .c-formLabel-optional,
25
27
  .c-formLabel-trailing {
26
28
  color: var(--dt-color-content-subdued-solid);
29
+ font-family: var(--dt-font-body-s-family);
27
30
  font-size: #{p.font-size(--dt-font-body-s-size)};
28
31
  line-height: calc(var(--dt-font-body-s-line-height) * 1px);
29
32
  font-weight: var(--dt-font-body-s-weight);