@justeattakeaway/pie-form-label 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface FormLabelProps {
     /**
@@ -20,12 +20,17 @@ export declare interface FormLabelProps {
 /**
  * @tagname pie-form-label
  */
-export declare class PieFormLabel extends LitElement implements FormLabelProps {
+export declare class PieFormLabel extends PieFormLabel_base implements FormLabelProps {
     for?: string;
     optional?: string;
     trailing?: string;
+    private _renderOptionalLabel;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare const PieFormLabel_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
 export { }

package/dist/index.js

@@ -1,46 +1,68 @@
-import { unsafeCSS as m, LitElement as b, html as s, nothing as p } from "lit";
-import { property as f } from "lit/decorators.js";
-function d(t, e) {
+import { isServer as d, unsafeCSS as m, html as f, nothing as i, LitElement as b } from "lit";
+import { property as c } from "lit/decorators.js";
+const g = (t) => {
+  class e extends t {
+    /**
+     * A getter to determine whether the text direction is right-to-left (RTL).
+     * If the `dir` property is present on the component, it will be used to determine the text direction.
+     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
+     * from the document's root element. This inference is not available during SSR.
+     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
+     *
+     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
+     */
+    get isRTL() {
+      return this.dir ? this.dir === "rtl" : !d && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+    }
+  }
+  return e;
+};
+function h(t, e) {
   customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
 }
-const g = `.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;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);margin-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-optional{margin-inline-start:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}
+const u = `.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);margin-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)}
 `;
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (t, e, n, l) => {
-  for (var o = l > 1 ? void 0 : l ? v(e, n) : e, a = t.length - 1, i; a >= 0; a--)
-    (i = t[a]) && (o = (l ? i(e, n, o) : i(o)) || o);
-  return l && o && h(e, n, o), o;
+var v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (t, e, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? L(e, n) : e, a = t.length - 1, s; a >= 0; a--)
+    (s = t[a]) && (r = (o ? s(e, n, r) : s(r)) || r);
+  return o && r && v(e, n, r), r;
 };
-const u = "pie-form-label";
-class r extends b {
+const y = "pie-form-label";
+class l extends g(b) {
+  _renderOptionalLabel() {
+    const { optional: e } = this;
+    return e ? f`<span class="c-formLabel-optional">${e}</span>` : i;
+  }
   render() {
     const {
-      optional: e,
-      trailing: n
+      trailing: e,
+      isRTL: n
     } = this;
-    return s`
+    return f`
             <label
                 data-test-id="pie-form-label"
                 class="c-formLabel"
                 for=${this.for}>
                     <div>
-                        <slot></slot>
-                        ${e ? s`<span class="c-formLabel-optional">${e}</span>` : p}
+                        ${n ? this._renderOptionalLabel() : i}
+                        <span class="c-formLabel-leading"><slot></slot></span>
+                        ${n ? i : this._renderOptionalLabel()}
                     </div>
-                    ${n ? s`<span class="c-formLabel-trailing">${n}</span>` : p}
+                    ${e ? f`<span class="c-formLabel-trailing">${e}</span>` : i}
             </label>`;
   }
 }
-r.styles = m(g);
-c([
-  f({ type: String, reflect: !0 })
-], r.prototype, "for", 2);
-c([
-  f({ type: String })
-], r.prototype, "optional", 2);
-c([
-  f({ type: String })
-], r.prototype, "trailing", 2);
-d(u, r);
+l.styles = m(u);
+p([
+  c({ type: String, reflect: !0 })
+], l.prototype, "for", 2);
+p([
+  c({ type: String })
+], l.prototype, "optional", 2);
+p([
+  c({ type: String })
+], l.prototype, "trailing", 2);
+h(y, l);
 export {
-  r as PieFormLabel
+  l as PieFormLabel
 };

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface FormLabelProps {
     /**
@@ -23,12 +23,17 @@ export declare const PieFormLabel: ReactWebComponent<PieFormLabel_2, {}>;
 /**
  * @tagname pie-form-label
  */
-declare class PieFormLabel_2 extends LitElement implements FormLabelProps {
+declare class PieFormLabel_2 extends PieFormLabel_base implements FormLabelProps {
     for?: string;
     optional?: string;
     trailing?: string;
+    private _renderOptionalLabel;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare const PieFormLabel_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/form-label.scss

@@ -8,6 +8,7 @@
 
     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);
@@ -22,8 +23,8 @@
     font-weight: var(--dt-font-weight-regular);
 }
 
-.c-formLabel-optional {
-    margin-inline-start: var(--dt-spacing-b);
+.c-formLabel-leading {
+    margin-inline-end: var(--dt-spacing-b);
 }
 
 .c-formLabel-trailing {

package/src/index.ts

@@ -1,7 +1,7 @@
 import {
-    LitElement, html, nothing, unsafeCSS,
+    LitElement, TemplateResult, html, nothing, unsafeCSS,
 } from 'lit';
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
 import { FormLabelProps } from './defs';
@@ -14,7 +14,7 @@ const componentSelector = 'pie-form-label';
 /**
  * @tagname pie-form-label
  */
-export class PieFormLabel extends LitElement implements FormLabelProps {
+export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps {
     @property({ type: String, reflect: true })
     public for?: string;
 
@@ -24,10 +24,16 @@ export class PieFormLabel extends LitElement implements FormLabelProps {
     @property({ type: String })
     public trailing?: string;
 
+    private _renderOptionalLabel (): TemplateResult | typeof nothing {
+        const { optional } = this;
+
+        return optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing;
+    }
+
     render () {
         const {
-            optional,
             trailing,
+            isRTL,
         } = this;
 
         return html`
@@ -36,8 +42,9 @@ export class PieFormLabel extends LitElement implements FormLabelProps {
                 class="c-formLabel"
                 for=${this.for}>
                     <div>
-                        <slot></slot>
-                        ${optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing}
+                        ${isRTL ? this._renderOptionalLabel() : nothing}
+                        <span class="c-formLabel-leading"><slot></slot></span>
+                        ${!isRTL ? this._renderOptionalLabel() : nothing}
                     </div>
                     ${trailing ? html`<span class="c-formLabel-trailing">${trailing}</span>` : nothing}
             </label>`;