@justeattakeaway/pie-divider 1.2.1 → 1.3.1

package/custom-elements.json

@@ -107,8 +107,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-divider",
           "customElement": true

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import type { TemplateResult } from 'lit-html';
 
 export declare type DefaultProps = ComponentDefaultProps<DividerProps>;
@@ -27,7 +27,7 @@ export declare const orientations: readonly ["horizontal", "vertical"];
 /**
  * @tagname pie-divider
  */
-export declare class PieDivider extends LitElement implements DividerProps {
+export declare class PieDivider extends PieElement implements DividerProps {
     variant: "default" | "inverse";
     orientation: "horizontal" | "vertical";
     label: string;

package/dist/index.js

@@ -1,63 +1,76 @@
-import { LitElement as f, html as o, unsafeCSS as m } from "lit";
-import { property as v } from "lit/decorators.js";
+import { LitElement as u, html as c, unsafeCSS as m } from "lit";
+import { property as s } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { validPropertyValues as g, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
-const w = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", x = ["default", "inverse"], y = ["horizontal", "vertical"], a = {
+import { validPropertyValues as f, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
+var w = Object.defineProperty, x = (a, d, t, v) => {
+  for (var i = void 0, e = a.length - 1, n; e >= 0; e--)
+    (n = a[e]) && (i = n(d, t, i) || i);
+  return i && w(d, t, i), i;
+};
+class g extends u {
+  constructor() {
+    super(...arguments), this.v = "1.3.1";
+  }
+}
+x([
+  s({ type: String, reflect: !0 })
+], g.prototype, "v");
+const $ = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", z = ["default", "inverse"], S = ["horizontal", "vertical"], o = {
   variant: "default",
   orientation: "horizontal",
   label: ""
 };
-var $ = Object.defineProperty, c = (h, l, t, n) => {
-  for (var i = void 0, r = h.length - 1, p; r >= 0; r--)
-    (p = h[r]) && (i = p(l, t, i) || i);
-  return i && $(l, t, i), i;
+var _ = Object.defineProperty, h = (a, d, t, v) => {
+  for (var i = void 0, e = a.length - 1, n; e >= 0; e--)
+    (n = a[e]) && (i = n(d, t, i) || i);
+  return i && _(d, t, i), i;
 };
-const e = "pie-divider", s = class s extends f {
+const r = "pie-divider", p = class p extends g {
   constructor() {
-    super(...arguments), this.variant = a.variant, this.orientation = a.orientation, this.label = a.label;
+    super(...arguments), this.variant = o.variant, this.orientation = o.orientation, this.label = o.label;
   }
   render() {
-    const { variant: l, orientation: t, label: n } = this, i = n.length > 0 && t === "horizontal", r = {
+    const { variant: d, orientation: t, label: v } = this, i = v.length > 0 && t === "horizontal", e = {
       "c-divider": !0,
-      "c-divider--inverse": l === "inverse",
+      "c-divider--inverse": d === "inverse",
       "c-divider--vertical": t === "vertical",
       "c-divider--labelled": i
     };
-    return o`
-            ${i ? o`
+    return c`
+            ${i ? c`
                 <div
-                    id="${e}"
-                    data-test-id="${e}"
-                    class="${b(r)}"
-                    aria-labelledby="${e}-label">
+                    id="${r}"
+                    data-test-id="${r}"
+                    class="${b(e)}"
+                    aria-labelledby="${r}-label">
                         <hr aria-hidden="true"/>
-                        <span id="${e}-label" class="c-divider-label">${n}</span>
+                        <span id="${r}-label" class="c-divider-label">${v}</span>
                         <hr aria-hidden="true"/>
-                </div>` : o`
-                <hr id="${e}"
-                    data-test-id="${e}"
-                    class="${b(r)}"
+                </div>` : c`
+                <hr id="${r}"
+                    data-test-id="${r}"
+                    class="${b(e)}"
                     aria-hidden="true"
                 />`}`;
   }
 };
-s.styles = m(w);
-let d = s;
-c([
-  v({ type: String }),
-  g(e, x, a.variant)
-], d.prototype, "variant");
-c([
-  v({ type: String }),
-  g(e, y, a.orientation)
-], d.prototype, "orientation");
-c([
-  v({ type: String })
-], d.prototype, "label");
-u(e, d);
+p.styles = m($);
+let l = p;
+h([
+  s({ type: String }),
+  f(r, z, o.variant)
+], l.prototype, "variant");
+h([
+  s({ type: String }),
+  f(r, S, o.orientation)
+], l.prototype, "orientation");
+h([
+  s({ type: String })
+], l.prototype, "label");
+y(r, l);
 export {
-  d as PieDivider,
-  a as defaultProps,
-  y as orientations,
-  x as variants
+  l as PieDivider,
+  o as defaultProps,
+  S as orientations,
+  z as variants
 };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
@@ -30,7 +30,7 @@ export declare const PieDivider: React_2.ForwardRefExoticComponent<DividerProps
 /**
  * @tagname pie-divider
  */
-declare class PieDivider_2 extends LitElement implements DividerProps {
+declare class PieDivider_2 extends PieElement implements DividerProps {
     variant: "default" | "inverse";
     orientation: "horizontal" | "vertical";
     label: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,13 +39,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.15.1",
+    "@justeattakeaway/pie-components-config": "0.19.1",
+    "@justeattakeaway/pie-css": "0.16.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-webc-core": "0.25.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,7 @@
 import {
-    html, LitElement, unsafeCSS,
+    html, unsafeCSS,
 } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
@@ -17,7 +18,7 @@ const componentSelector = 'pie-divider';
 /**
  * @tagname pie-divider
  */
-export class PieDivider extends LitElement implements DividerProps {
+export class PieDivider extends PieElement implements DividerProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;

package/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}