@justeattakeaway/pie-breadcrumb 0.6.5 → 0.7.1

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 (9) hide show
  1. package/custom-elements.json +1 -7
  2. package/dist/{breadcrumb-Cf0aCs9p.js → breadcrumb-C7nM_RVH.js} +2 -2
  3. package/dist/index.js +1 -1
  4. package/dist/pie-breadcrumb-item/index.d.ts +1 -3
  5. package/dist/pie-breadcrumb-item/index.d.ts.map +1 -1
  6. package/dist/pie-breadcrumb-item/index.js +22 -24
  7. package/package.json +6 -6
  8. package/src/breadcrumb.scss +4 -0
  9. package/src/pie-breadcrumb-item/index.ts +3 -5
package/custom-elements.json CHANGED
@@ -152,7 +152,7 @@
152
152
  "kind": "method",
153
153
  "name": "renderSeparator",
154
154
  "privacy": "private",
155
- "description": "Renders a separator icon between breadcrumb items.\nThe icon direction depends on the RTL (Right-to-Left) setting.",
155
+ "description": "Renders a separator icon between breadcrumb items.",
156
156
  "return": {
157
157
  "type": {
158
158
  "text": "TemplateResult"
@@ -166,12 +166,6 @@
166
166
  "description": "Renders a navigation link for a breadcrumb item."
167
167
  }
168
168
  ],
169
- "mixins": [
170
- {
171
- "name": "RtlMixin",
172
- "package": "@justeattakeaway/pie-webc-core"
173
- }
174
- ],
175
169
  "superclass": {
176
170
  "name": "PieElement",
177
171
  "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
package/dist/{breadcrumb-Cf0aCs9p.js → breadcrumb-C7nM_RVH.js} RENAMED
@@ -4,9 +4,9 @@ const r = class r extends e {
4
4
  this.getAttribute("v") || this.setAttribute("v", r.v);
5
5
  }
6
6
  };
7
- r.v = "0.6.5";
7
+ r.v = "0.7.1";
8
8
  let t = r;
9
- const o = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-breadcrumb-item:only-child){display:none}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);--breadcrumb-item-flex-direction: row;--breadcrumb-item-color: var(--dt-color-content-link);--breadcrumb-separator-color: var(--dt-color-content-subdued);--breadcrumb-separator-transform: none;background-color:var(--breadcrumb-background-color);padding-block-start:var(--dt-spacing-a);padding-block-end:var(--dt-spacing-a)}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);--breadcrumb-item-color: var(--dt-color-content-link-light);--breadcrumb-separator-color: var(--dt-color-content-light);border-radius:var(--dt-radius-rounded-e);padding-inline-start:var(--dt-spacing-d);padding-inline-end:var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-item{display:flex;flex-direction:var(--breadcrumb-item-flex-direction);align-items:center;white-space:nowrap;gap:var(--dt-spacing-a)}.c-breadcrumb-item pie-link{--link-text-color: var(--breadcrumb-item-color);--link-font-weight: var(--dt-font-weight-bold)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}:host([isCompact]) .c-breadcrumb{--breadcrumb-item-flex-direction: row-reverse;--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))){display:none}:host([hideCurrentPage]) ::slotted(pie-breadcrumb-item:last-of-type){display:none}:host(:last-of-type) pie-link{--link-font-weight: var(--dt-font-weight-regular)}:host(:last-of-type) pie-link::part(base):hover,:host(:last-of-type) pie-link::part(base):active{--link-text-decoration: none}:host(:last-of-type) pie-link span{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:last-of-type) .c-breadcrumb-separator{display:none}";
9
+ const o = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-breadcrumb-item:only-child){display:none}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);--breadcrumb-item-flex-direction: row;--breadcrumb-item-color: var(--dt-color-content-link);--breadcrumb-separator-color: var(--dt-color-content-subdued);--breadcrumb-separator-transform: none;background-color:var(--breadcrumb-background-color);padding-block-start:var(--dt-spacing-a);padding-block-end:var(--dt-spacing-a)}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);--breadcrumb-item-color: var(--dt-color-content-link-light);--breadcrumb-separator-color: var(--dt-color-content-light);border-radius:var(--dt-radius-rounded-e);padding-inline-start:var(--dt-spacing-d);padding-inline-end:var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-item{display:flex;flex-direction:var(--breadcrumb-item-flex-direction);align-items:center;white-space:nowrap;gap:var(--dt-spacing-a)}.c-breadcrumb-item pie-link{--link-text-color: var(--breadcrumb-item-color);--link-font-weight: var(--dt-font-weight-bold)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}.c-breadcrumb-separator:dir(rtl){--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) .c-breadcrumb{--breadcrumb-item-flex-direction: row-reverse;--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))){display:none}:host([hideCurrentPage]) ::slotted(pie-breadcrumb-item:last-of-type){display:none}:host(:last-of-type) pie-link{--link-font-weight: var(--dt-font-weight-regular)}:host(:last-of-type) pie-link::part(base):hover,:host(:last-of-type) pie-link::part(base):active{--link-text-decoration: none}:host(:last-of-type) pie-link span{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:last-of-type) .c-breadcrumb-separator{display:none}";
10
10
  export {
11
11
  t as P,
12
12
  o as s
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { unsafeCSS as u, html as m } from "lit";
2
2
  import { property as p } from "lit/decorators.js";
3
3
  import { validPropertyValues as d, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
4
4
  import { classMap as f } from "lit/directives/class-map.js";
5
- import { s as h, P as C } from "./breadcrumb-Cf0aCs9p.js";
5
+ import { s as h, P as C } from "./breadcrumb-C7nM_RVH.js";
6
6
  const v = ["default", "scrim"], i = {
7
7
  variant: "default",
8
8
  isCompact: !1,
package/dist/pie-breadcrumb-item/index.d.ts CHANGED
@@ -2,16 +2,14 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
2
2
  import { BreadcrumbItemProps } from './defs';
3
3
  declare const componentSelector = "pie-breadcrumb-item";
4
4
  export * from './defs';
5
- declare const PieBreadcrumbItem_base: import('@justeattakeaway/pie-webc-core').GenericConstructor<import('@justeattakeaway/pie-webc-core').RTLInterface> & typeof PieElement;
6
5
  /**
7
6
  * @tagname pie-breadcrumb-item
8
7
  */
9
- export declare class PieBreadcrumbItem extends PieBreadcrumbItem_base implements BreadcrumbItemProps {
8
+ export declare class PieBreadcrumbItem extends PieElement implements BreadcrumbItemProps {
10
9
  href: BreadcrumbItemProps['href'];
11
10
  target: BreadcrumbItemProps['target'];
12
11
  /**
13
12
  * Renders a separator icon between breadcrumb items.
14
- * The icon direction depends on the RTL (Right-to-Left) setting.
15
13
  *
16
14
  * @returns {TemplateResult} HTML template for the separator icon.
17
15
  *
package/dist/pie-breadcrumb-item/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAClE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,sBAAqB,YAAW,mBAAmB;IAE/E,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAY5B,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAGlE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAW,YAAW,mBAAmB;IAErE,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAY5B,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}
package/dist/pie-breadcrumb-item/index.js CHANGED
@@ -1,33 +1,31 @@
1
- import { html as r, unsafeCSS as d } from "lit";
2
- import { property as c } from "lit/decorators.js";
3
- import { P as f, s as h } from "../breadcrumb-Cf0aCs9p.js";
4
- import { RtlMixin as u, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
1
+ import { unsafeCSS as c, html as o } from "lit";
2
+ import { property as d } from "lit/decorators.js";
3
+ import { s as f, P as u } from "../breadcrumb-C7nM_RVH.js";
4
+ import { safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
5
5
  import { ifDefined as l } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-link";
7
7
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
8
- import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
9
- var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (m, i, a, n) => {
10
- for (var e = n > 1 ? void 0 : n ? g(i, a) : i, o = m.length - 1, s; o >= 0; o--)
11
- (s = m[o]) && (e = (n ? s(i, a, e) : s(e)) || e);
12
- return n && e && v(i, a, e), e;
8
+ var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (m, t, a, i) => {
9
+ for (var e = i > 1 ? void 0 : i ? v(t, a) : t, s = m.length - 1, n; s >= 0; s--)
10
+ (n = m[s]) && (e = (i ? n(t, a, e) : n(e)) || e);
11
+ return i && e && b(t, a, e), e;
13
12
  };
14
- let t = class extends u(f) {
13
+ let r = class extends u {
15
14
  /**
16
15
  * Renders a separator icon between breadcrumb items.
17
- * The icon direction depends on the RTL (Right-to-Left) setting.
18
16
  *
19
17
  * @returns {TemplateResult} HTML template for the separator icon.
20
18
  *
21
19
  * @private
22
20
  */
23
21
  renderSeparator() {
24
- return r`
22
+ return o`
25
23
  <span
26
24
  class="c-breadcrumb-separator"
27
25
  role="presentation"
28
26
  aria-hidden="true"
29
27
  data-test-id="pie-breadcrumb-separator">
30
- ${this.isRTL ? r`<icon-chevron-left></icon-chevron-left>` : r`<icon-chevron-right></icon-chevron-right>`}
28
+ <icon-chevron-right></icon-chevron-right>
31
29
  </span>
32
30
  `;
33
31
  }
@@ -37,7 +35,7 @@ let t = class extends u(f) {
37
35
  * @private
38
36
  */
39
37
  renderNavigationLink() {
40
- return r`
38
+ return o`
41
39
  <pie-link
42
40
  isStandalone
43
41
  underline="reversed"
@@ -48,7 +46,7 @@ let t = class extends u(f) {
48
46
  `;
49
47
  }
50
48
  render() {
51
- return r`
49
+ return o`
52
50
  <li role="listitem" data-test-id="pie-breadcrumb-item" class="c-breadcrumb-item">
53
51
  ${this.renderNavigationLink()}
54
52
  ${this.renderSeparator()}
@@ -56,16 +54,16 @@ let t = class extends u(f) {
56
54
  `;
57
55
  }
58
56
  };
59
- t.styles = d(h);
57
+ r.styles = c(f);
60
58
  p([
61
- c({ type: String })
62
- ], t.prototype, "href", 2);
59
+ d({ type: String })
60
+ ], r.prototype, "href", 2);
63
61
  p([
64
- c({ type: String })
65
- ], t.prototype, "target", 2);
66
- t = p([
67
- b("pie-breadcrumb-item")
68
- ], t);
62
+ d({ type: String })
63
+ ], r.prototype, "target", 2);
64
+ r = p([
65
+ h("pie-breadcrumb-item")
66
+ ], r);
69
67
  export {
70
- t as PieBreadcrumbItem
68
+ r as PieBreadcrumbItem
71
69
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-breadcrumb",
3
3
  "description": "PIE Design System Breadcrumb built using Web Components",
4
- "version": "0.6.5",
4
+ "version": "0.7.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -40,14 +40,14 @@
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeattakeaway/pie-components-config": "0.21.0",
43
- "@justeattakeaway/pie-css": "0.19.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.6.0",
43
+ "@justeattakeaway/pie-css": "0.22.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.7.0",
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-icons-webc": "1.14.1",
49
- "@justeattakeaway/pie-link": "1.2.9",
50
- "@justeattakeaway/pie-webc-core": "1.0.0"
48
+ "@justeattakeaway/pie-icons-webc": "1.15.0",
49
+ "@justeattakeaway/pie-link": "1.2.11",
50
+ "@justeattakeaway/pie-webc-core": "2.0.0"
51
51
  },
52
52
  "volta": {
53
53
  "extends": "../../../package.json"
package/src/breadcrumb.scss CHANGED
@@ -55,6 +55,10 @@
55
55
  display: inline-flex;
56
56
  color: var(--breadcrumb-separator-color);
57
57
  transform: var(--breadcrumb-separator-transform);
58
+
59
+ &:dir(rtl) {
60
+ --breadcrumb-separator-transform: rotate(180deg);
61
+ }
58
62
  }
59
63
 
60
64
  :host([isCompact]) {
package/src/pie-breadcrumb-item/index.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  import { html, unsafeCSS } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
- import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
4
+ import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
6
 
7
7
  import '@justeattakeaway/pie-link';
8
8
  import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
9
- import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
10
9
 
11
10
  import styles from '../breadcrumb.scss?inline';
12
11
  import { type BreadcrumbItemProps } from './defs';
@@ -20,7 +19,7 @@ export * from './defs';
20
19
  * @tagname pie-breadcrumb-item
21
20
  */
22
21
  @safeCustomElement('pie-breadcrumb-item')
23
- export class PieBreadcrumbItem extends RtlMixin(PieElement) implements BreadcrumbItemProps {
22
+ export class PieBreadcrumbItem extends PieElement implements BreadcrumbItemProps {
24
23
  @property({ type: String })
25
24
  public href: BreadcrumbItemProps['href'];
26
25
 
@@ -29,7 +28,6 @@ export class PieBreadcrumbItem extends RtlMixin(PieElement) implements Breadcrum
29
28
 
30
29
  /**
31
30
  * Renders a separator icon between breadcrumb items.
32
- * The icon direction depends on the RTL (Right-to-Left) setting.
33
31
  *
34
32
  * @returns {TemplateResult} HTML template for the separator icon.
35
33
  *
@@ -42,7 +40,7 @@ export class PieBreadcrumbItem extends RtlMixin(PieElement) implements Breadcrum
42
40
  role="presentation"
43
41
  aria-hidden="true"
44
42
  data-test-id="pie-breadcrumb-separator">
45
- ${this.isRTL ? html`<icon-chevron-left></icon-chevron-left>` : html`<icon-chevron-right></icon-chevron-right>`}
43
+ <icon-chevron-right></icon-chevron-right>
46
44
  </span>
47
45
  `;
48
46
  }