@justeattakeaway/pie-divider 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -15,6 +15,9 @@ export declare interface DividerProps {
 
 export declare const orientations: readonly ["horizontal", "vertical"];
 
+/**
+ * @tagname pie-divider
+ */
 export declare class PieDivider extends LitElement implements DividerProps {
     variant: DividerProps['variant'];
     orientation: DividerProps['orientation'];

package/dist/index.js

@@ -1,26 +1,30 @@
 import { unsafeCSS as u, LitElement as f, html as g } from "lit";
 import { property as c } from "lit/decorators.js";
-const l = (n, i, r) => function(e, t) {
-  const o = `#${t}`;
-  Object.defineProperty(e, t, {
+const l = (i, e, r) => function(t, o) {
+  const n = `#${o}`;
+  Object.defineProperty(t, o, {
     get() {
-      return this[o];
+      return this[n];
     },
     set(s) {
-      const p = this[o];
-      i.includes(s) ? this[o] = s : (console.error(
-        `<${n}> Invalid value "${s}" provided for property "${t}".`,
-        `Must be one of: ${i.join(" | ")}.`,
+      const p = this[n];
+      e.includes(s) ? this[n] = s : (console.error(
+        `<${i}> Invalid value "${s}" provided for property "${o}".`,
+        `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${r}"`
-      ), this[o] = r), this.requestUpdate(t, p);
+      ), this[n] = r), this.requestUpdate(o, p);
     }
   });
-}, m = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
-`, b = ["default", "inverse"], P = ["horizontal", "vertical"];
-var $ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (n, i, r, d) => {
-  for (var e = d > 1 ? void 0 : d ? y(i, r) : i, t = n.length - 1, o; t >= 0; t--)
-    (o = n[t]) && (e = (d ? o(i, r, e) : o(e)) || e);
-  return d && e && $(i, r, e), e;
+};
+function m(i, e) {
+  customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, e);
+}
+const b = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
+`, P = ["default", "inverse"], y = ["horizontal", "vertical"];
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (i, e, r, d) => {
+  for (var t = d > 1 ? void 0 : d ? w(e, r) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (t = (d ? n(e, r, t) : n(t)) || t);
+  return d && t && $(e, r, t), t;
 };
 const v = "pie-divider";
 class a extends f {
@@ -28,29 +32,29 @@ class a extends f {
     super(...arguments), this.variant = "default", this.orientation = "horizontal";
   }
   render() {
-    const { variant: i, orientation: r } = this;
+    const { variant: e, orientation: r } = this;
     return g`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
                 class="c-divider"
-                variant=${i}
+                variant=${e}
                 orientation=${r}
             />`;
   }
 }
-a.styles = u(m);
+a.styles = u(b);
 h([
   c({ type: String }),
-  l(v, b, "default")
+  l(v, P, "default")
 ], a.prototype, "variant", 2);
 h([
   c({ type: String }),
-  l(v, P, "horizontal")
+  l(v, y, "horizontal")
 ], a.prototype, "orientation", 2);
-customElements.define(v, a);
+m(v, a);
 export {
   a as PieDivider,
-  P as orientations,
-  b as variants
+  y as orientations,
+  P as variants
 };

package/dist/react.d.ts

@@ -18,6 +18,9 @@ export declare const orientations: readonly ["horizontal", "vertical"];
 
 export declare const PieDivider: ReactWebComponent<PieDivider_2, {}>;
 
+/**
+ * @tagname pie-divider
+ */
 declare class PieDivider_2 extends LitElement implements DividerProps {
     variant: DividerProps['variant'];
     orientation: DividerProps['orientation'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.10.0"
+    "@justeattakeaway/pie-webc-core": "0.11.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
 import { DividerProps, variants, orientations } from './defs';
 
@@ -9,6 +9,9 @@ export * from './defs';
 
 const componentSelector = 'pie-divider';
 
+/**
+ * @tagname pie-divider
+ */
 export class PieDivider extends LitElement implements DividerProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, 'default')
@@ -35,7 +38,7 @@ export class PieDivider extends LitElement implements DividerProps {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define(componentSelector, PieDivider);
+defineCustomElement(componentSelector, PieDivider);
 
 declare global {
     interface HTMLElementTagNameMap {