@justeattakeaway/pie-form-label 0.16.4 → 0.17.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 (7) hide show
  1. package/custom-elements.json +3 -36
  2. package/dist/index.d.ts +3 -7
  3. package/dist/index.js +31 -33
  4. package/dist/react.d.ts +4 -8
  5. package/package.json +7 -7
  6. package/src/form-label.scss +4 -0
  7. package/src/index.ts +4 -6
package/custom-elements.json CHANGED
@@ -29,9 +29,7 @@
29
29
  "type": {
30
30
  "text": "FormLabelProps['for']"
31
31
  },
32
- "privacy": "public",
33
- "attribute": "for",
34
- "reflects": true
32
+ "privacy": "public"
35
33
  },
36
34
  {
37
35
  "kind": "field",
@@ -39,8 +37,7 @@
39
37
  "type": {
40
38
  "text": "FormLabelProps['optional']"
41
39
  },
42
- "privacy": "public",
43
- "attribute": "optional"
40
+ "privacy": "public"
44
41
  },
45
42
  {
46
43
  "kind": "field",
@@ -48,8 +45,7 @@
48
45
  "type": {
49
46
  "text": "FormLabelProps['trailing']"
50
47
  },
51
- "privacy": "public",
52
- "attribute": "trailing"
48
+ "privacy": "public"
53
49
  },
54
50
  {
55
51
  "kind": "method",
@@ -67,35 +63,6 @@
67
63
  "privacy": "private"
68
64
  }
69
65
  ],
70
- "attributes": [
71
- {
72
- "name": "for",
73
- "type": {
74
- "text": "FormLabelProps['for']"
75
- },
76
- "fieldName": "for"
77
- },
78
- {
79
- "name": "optional",
80
- "type": {
81
- "text": "FormLabelProps['optional']"
82
- },
83
- "fieldName": "optional"
84
- },
85
- {
86
- "name": "trailing",
87
- "type": {
88
- "text": "FormLabelProps['trailing']"
89
- },
90
- "fieldName": "trailing"
91
- }
92
- ],
93
- "mixins": [
94
- {
95
- "name": "RtlMixin",
96
- "package": "@justeattakeaway/pie-webc-core"
97
- }
98
- ],
99
66
  "superclass": {
100
67
  "name": "PieElement",
101
68
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
package/dist/index.d.ts CHANGED
@@ -1,8 +1,6 @@
1
- import type { CSSResult } from 'lit';
2
- import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
1
+ import { CSSResult } from 'lit';
3
2
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
- import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
5
- import type { TemplateResult } from 'lit';
3
+ import { TemplateResult } from 'lit';
6
4
 
7
5
  export declare interface FormLabelProps {
8
6
  /**
@@ -22,7 +20,7 @@ export declare interface FormLabelProps {
22
20
  /**
23
21
  * @tagname pie-form-label
24
22
  */
25
- export declare class PieFormLabel extends PieFormLabel_base implements FormLabelProps {
23
+ export declare class PieFormLabel extends PieElement implements FormLabelProps {
26
24
  for: FormLabelProps['for'];
27
25
  optional: FormLabelProps['optional'];
28
26
  trailing: FormLabelProps['trailing'];
@@ -32,6 +30,4 @@ export declare class PieFormLabel extends PieFormLabel_base implements FormLabel
32
30
  static styles: CSSResult;
33
31
  }
34
32
 
35
- declare const PieFormLabel_base: GenericConstructor<RTLInterface> & typeof PieElement;
36
-
37
33
  export { }
package/dist/index.js CHANGED
@@ -1,24 +1,24 @@
1
- import { LitElement as b, nothing as l, html as p, unsafeCSS as m } from "lit";
1
+ import { LitElement as b, unsafeCSS as m, nothing as g, html as f } from "lit";
2
2
  import { ifDefined as h } from "lit/directives/if-defined.js";
3
- import { RtlMixin as v, safeCustomElement as u } from "@justeattakeaway/pie-webc-core";
4
- import { property as g } from "lit/decorators.js";
3
+ import { safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
4
+ import { property as d } from "lit/decorators.js";
5
5
  const o = class o extends b {
6
6
  willUpdate() {
7
7
  this.getAttribute("v") || this.setAttribute("v", o.v);
8
8
  }
9
9
  };
10
- o.v = "0.16.4";
11
- let d = o;
12
- const L = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-formLabel{--form-label-font-size: calc(var(--dt-font-size-14) * 1px);--form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--form-label-font-weight: var(--dt-font-weight-bold);--form-label-color: var(--dt-color-content-default);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);font-weight:var(--dt-font-weight-regular)}.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, w = Object.getOwnPropertyDescriptor, n = (e, t, s, a) => {
14
- for (var r = a > 1 ? void 0 : a ? w(t, s) : t, c = e.length - 1, f; c >= 0; c--)
15
- (f = e[c]) && (r = (a ? f(t, s, r) : f(r)) || r);
16
- return a && r && y(t, s, r), r;
10
+ o.v = "0.17.0";
11
+ let p = o;
12
+ const u = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-formLabel{--form-label-font-size: calc(var(--dt-font-size-14) * 1px);--form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--form-label-font-weight: var(--dt-font-weight-bold);--form-label-color: var(--dt-color-content-default);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);font-weight:var(--dt-font-weight-regular)}.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 L = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, a, n, l) => {
14
+ for (var t = l > 1 ? void 0 : l ? y(a, n) : a, s = e.length - 1, c; s >= 0; s--)
15
+ (c = e[s]) && (t = (l ? c(a, n, t) : c(t)) || t);
16
+ return l && t && L(a, n, t), t;
17
17
  };
18
- let i = class extends v(d) {
18
+ let r = class extends p {
19
19
  _renderOptionalLabel() {
20
20
  const { optional: e } = this;
21
- return e ? p`<span class="c-formLabel-optional">${e}</span>` : l;
21
+ return e ? f`<span class="c-formLabel-optional">${e}</span>` : g;
22
22
  }
23
23
  handleClick() {
24
24
  if (this.for) {
@@ -29,37 +29,35 @@ let i = class extends v(d) {
29
29
  }
30
30
  render() {
31
31
  const {
32
- trailing: e,
33
- isRTL: t
32
+ trailing: e
34
33
  } = this;
35
- return p`
34
+ return f`
36
35
  <label
37
36
  @click=${this.handleClick}
38
37
  data-test-id="pie-form-label"
39
38
  class="c-formLabel"
40
39
  for=${h(this.for)}>
41
- <div>
42
- ${t ? this._renderOptionalLabel() : l}
40
+ <div class="c-formLabel-leading-wrapper">
43
41
  <span class="c-formLabel-leading" data-test-id="pie-form-label-leading"><slot></slot></span>
44
- ${t ? l : this._renderOptionalLabel()}
42
+ ${this._renderOptionalLabel()}
45
43
  </div>
46
- ${e ? p`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${e}</span>` : l}
44
+ ${e ? f`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${e}</span>` : g}
47
45
  </label>`;
48
46
  }
49
47
  };
50
- i.styles = m(L);
51
- n([
52
- g({ type: String, reflect: !0 })
53
- ], i.prototype, "for", 2);
54
- n([
55
- g({ type: String })
56
- ], i.prototype, "optional", 2);
57
- n([
58
- g({ type: String })
59
- ], i.prototype, "trailing", 2);
60
- i = n([
61
- u("pie-form-label")
62
- ], i);
48
+ r.styles = m(u);
49
+ i([
50
+ d({ type: String, reflect: !0 })
51
+ ], r.prototype, "for", 2);
52
+ i([
53
+ d({ type: String })
54
+ ], r.prototype, "optional", 2);
55
+ i([
56
+ d({ type: String })
57
+ ], r.prototype, "trailing", 2);
58
+ r = i([
59
+ v("pie-form-label")
60
+ ], r);
63
61
  export {
64
- i as PieFormLabel
62
+ r as PieFormLabel
65
63
  };
package/dist/react.d.ts CHANGED
@@ -1,9 +1,7 @@
1
- import type { CSSResult } from 'lit';
2
- import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
1
+ import { CSSResult } from 'lit';
3
2
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
3
  import * as React_2 from 'react';
5
- import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
6
- import type { TemplateResult } from 'lit';
4
+ import { TemplateResult } from 'lit';
7
5
 
8
6
  export declare interface FormLabelProps {
9
7
  /**
@@ -20,12 +18,12 @@ export declare interface FormLabelProps {
20
18
  trailing?: string;
21
19
  }
22
20
 
23
- export declare const PieFormLabel: React_2.ForwardRefExoticComponent<FormLabelProps & React_2.RefAttributes<PieFormLabel_2> & ReactBaseType>;
21
+ export declare const PieFormLabel: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<FormLabelProps> & React_2.RefAttributes<PieFormLabel_2> & ReactBaseType>;
24
22
 
25
23
  /**
26
24
  * @tagname pie-form-label
27
25
  */
28
- declare class PieFormLabel_2 extends PieFormLabel_base implements FormLabelProps {
26
+ declare class PieFormLabel_2 extends PieElement implements FormLabelProps {
29
27
  for: FormLabelProps['for'];
30
28
  optional: FormLabelProps['optional'];
31
29
  trailing: FormLabelProps['trailing'];
@@ -35,8 +33,6 @@ declare class PieFormLabel_2 extends PieFormLabel_base implements FormLabelProps
35
33
  static styles: CSSResult;
36
34
  }
37
35
 
38
- declare const PieFormLabel_base: GenericConstructor<RTLInterface> & typeof PieElement;
39
-
40
36
  declare type ReactBaseType = React_2.LabelHTMLAttributes<HTMLLabelElement>;
41
37
 
42
38
  export { }
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.16.4",
4
+ "version": "0.17.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,16 +39,16 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.20.1",
43
- "@justeattakeaway/pie-css": "0.16.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.5.1",
45
- "@justeattakeaway/pie-switch": "2.0.3",
46
- "@justeattakeaway/pie-text-input": "0.28.7",
42
+ "@justeattakeaway/pie-components-config": "0.21.0",
43
+ "@justeattakeaway/pie-css": "0.19.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.7.0",
45
+ "@justeattakeaway/pie-switch": "2.1.0",
46
+ "@justeattakeaway/pie-text-input": "0.28.12",
47
47
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
48
48
  "cem-plugin-module-file-extensions": "0.0.5"
49
49
  },
50
50
  "dependencies": {
51
- "@justeattakeaway/pie-webc-core": "1.0.0"
51
+ "@justeattakeaway/pie-webc-core": "1.1.0"
52
52
  },
53
53
  "volta": {
54
54
  "extends": "../../../package.json"
package/src/form-label.scss CHANGED
@@ -27,6 +27,10 @@
27
27
  font-weight: var(--dt-font-weight-regular);
28
28
  }
29
29
 
30
+ .c-formLabel-leading-wrapper {
31
+ display: flex;
32
+ }
33
+
30
34
  .c-formLabel-leading {
31
35
  margin-inline-end: var(--dt-spacing-b);
32
36
  }
package/src/index.ts CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  } from 'lit';
4
4
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
- import { RtlMixin, safeCustomElement, type PIEInputElement } from '@justeattakeaway/pie-webc-core';
6
+ import { safeCustomElement, type PIEInputElement } from '@justeattakeaway/pie-webc-core';
7
7
  import { property } from 'lit/decorators.js';
8
8
  import styles from './form-label.scss?inline';
9
9
  import { type FormLabelProps } from './defs';
@@ -17,7 +17,7 @@ const componentSelector = 'pie-form-label';
17
17
  * @tagname pie-form-label
18
18
  */
19
19
  @safeCustomElement('pie-form-label')
20
- export class PieFormLabel extends RtlMixin(PieElement) implements FormLabelProps {
20
+ export class PieFormLabel extends PieElement implements FormLabelProps {
21
21
  @property({ type: String, reflect: true })
22
22
  public for: FormLabelProps['for'];
23
23
 
@@ -51,7 +51,6 @@ export class PieFormLabel extends RtlMixin(PieElement) implements FormLabelProps
51
51
  render () {
52
52
  const {
53
53
  trailing,
54
- isRTL,
55
54
  } = this;
56
55
 
57
56
  return html`
@@ -60,10 +59,9 @@ export class PieFormLabel extends RtlMixin(PieElement) implements FormLabelProps
60
59
  data-test-id="pie-form-label"
61
60
  class="c-formLabel"
62
61
  for=${ifDefined(this.for)}>
63
- <div>
64
- ${isRTL ? this._renderOptionalLabel() : nothing}
62
+ <div class="c-formLabel-leading-wrapper">
65
63
  <span class="c-formLabel-leading" data-test-id="pie-form-label-leading"><slot></slot></span>
66
- ${!isRTL ? this._renderOptionalLabel() : nothing}
64
+ ${this._renderOptionalLabel()}
67
65
  </div>
68
66
  ${trailing ? html`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${trailing}</span>` : nothing}
69
67
  </label>`;