@proximus/lavender-breadcrumb 1.4.17-alpha.6 → 1.4.17-alpha.8
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.
- package/dist/Breadcrumb-item.d.ts +1 -1
- package/dist/Breadcrumb.d.ts +1 -1
- package/dist/custom-elements.json +11 -11
- package/dist/index.es.js +21 -18
- package/dist/web-types.json +2 -3
- package/package.json +1 -1
|
@@ -2,8 +2,8 @@ import { PxElement } from '@proximus/lavender-common';
|
|
|
2
2
|
import type { Icon } from '@proximus/lavender-icon';
|
|
3
3
|
export declare const BREADCRUMB_ITEM_CONNECTED_EVENT = "px-breadcrumb-item-connected";
|
|
4
4
|
export declare class BreadcrumbItem extends PxElement<HTMLElement> {
|
|
5
|
+
protected static readonly template: HTMLTemplateElement;
|
|
5
6
|
static nativeName: string;
|
|
6
|
-
private template;
|
|
7
7
|
constructor();
|
|
8
8
|
static get observedAttributes(): string[];
|
|
9
9
|
connectedCallback(): void;
|
package/dist/Breadcrumb.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
2
|
export declare class Breadcrumb extends WithExtraAttributes {
|
|
3
3
|
#private;
|
|
4
|
-
|
|
4
|
+
protected static readonly template: HTMLTemplateElement;
|
|
5
5
|
constructor();
|
|
6
6
|
connectedCallback(): void;
|
|
7
7
|
static get observedAttributes(): string[];
|
|
@@ -19,6 +19,13 @@
|
|
|
19
19
|
"description": "",
|
|
20
20
|
"name": "BreadcrumbItem",
|
|
21
21
|
"members": [
|
|
22
|
+
{
|
|
23
|
+
"kind": "field",
|
|
24
|
+
"name": "template",
|
|
25
|
+
"privacy": "protected",
|
|
26
|
+
"static": true,
|
|
27
|
+
"readonly": true
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"kind": "field",
|
|
24
31
|
"name": "nativeName",
|
|
@@ -28,11 +35,6 @@
|
|
|
28
35
|
"static": true,
|
|
29
36
|
"default": "'div'"
|
|
30
37
|
},
|
|
31
|
-
{
|
|
32
|
-
"kind": "field",
|
|
33
|
-
"name": "template",
|
|
34
|
-
"privacy": "private"
|
|
35
|
-
},
|
|
36
38
|
{
|
|
37
39
|
"kind": "field",
|
|
38
40
|
"name": "$link",
|
|
@@ -114,9 +116,11 @@
|
|
|
114
116
|
"name": "Breadcrumb",
|
|
115
117
|
"members": [
|
|
116
118
|
{
|
|
117
|
-
"kind": "
|
|
119
|
+
"kind": "field",
|
|
118
120
|
"name": "template",
|
|
119
|
-
"privacy": "
|
|
121
|
+
"privacy": "protected",
|
|
122
|
+
"static": true,
|
|
123
|
+
"readonly": true
|
|
120
124
|
},
|
|
121
125
|
{
|
|
122
126
|
"kind": "method",
|
|
@@ -140,10 +144,6 @@
|
|
|
140
144
|
{
|
|
141
145
|
"kind": "field",
|
|
142
146
|
"name": "ariaLabel"
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
"kind": "field",
|
|
146
|
-
"name": "innerHTML"
|
|
147
147
|
}
|
|
148
148
|
],
|
|
149
149
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSetter as n,
|
|
1
|
+
import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSetter as n, createTemplate as r, propertyToAttributeSetter as i, renderTemplate as a } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/breadcrumb.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var o = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{flex-wrap:wrap;align-items:center;display:flex}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-mobile);align-items:center;display:flex}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{content:\"\";width:16px;height:16px;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile);background-color:currentColor;display:inline-block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E\");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media screen and (width>=48rem){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}", s = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-label-m-mobile);display:flex}:host ::slotted(px-a[variant=icon-link][color=inherit]){color:var(--px-color-icon-accent-default)}:host ::slotted(px-a[variant=icon-link][color=inherit]):hover{color:var(--px-color-icon-accent-default)}@media screen and (width>=48rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-laptop)}}@media screen and (width>=90.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) ::slotted(px-a[variant=icon-link][color=inherit]){color:var(--px-color-icon-accent-inverted)}:host([inverted]) ::slotted(px-a[variant=icon-link][color=inherit]):hover{color:var(--px-color-icon-accent-inverted)}", c = new CSSStyleSheet();
|
|
4
|
+
c.replaceSync(s);
|
|
5
|
+
var l = "px-breadcrumb-item-connected", u = class t extends e {
|
|
6
|
+
static {
|
|
7
|
+
this.template = r("<div class=\"breadcrumb-item\" role=\"listitem\"><slot></slot></div>");
|
|
8
|
+
}
|
|
6
9
|
static {
|
|
7
10
|
this.nativeName = "div";
|
|
8
11
|
}
|
|
9
12
|
constructor() {
|
|
10
|
-
super(
|
|
13
|
+
super(c), this.shadowRoot && a(this.shadowRoot, t.template);
|
|
11
14
|
}
|
|
12
15
|
static get observedAttributes() {
|
|
13
16
|
return [...super.observedAttributes, "inverted"];
|
|
14
17
|
}
|
|
15
18
|
connectedCallback() {
|
|
16
|
-
this.$icon && this.$icon.setAttribute("size", "s"), this.$link || this.$el.setAttribute("aria-current", "page"), this.dispatchEvent(new CustomEvent(
|
|
19
|
+
this.$icon && this.$icon.setAttribute("size", "s"), this.$link || this.$el.setAttribute("aria-current", "page"), this.dispatchEvent(new CustomEvent(l, {
|
|
17
20
|
bubbles: !0,
|
|
18
21
|
composed: !0
|
|
19
22
|
}));
|
|
@@ -42,20 +45,20 @@ var s = "px-breadcrumb-item-connected", c = class extends e {
|
|
|
42
45
|
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
43
46
|
}
|
|
44
47
|
};
|
|
45
|
-
customElements.get("px-breadcrumb-item") || customElements.define("px-breadcrumb-item",
|
|
48
|
+
customElements.get("px-breadcrumb-item") || customElements.define("px-breadcrumb-item", u);
|
|
46
49
|
//#endregion
|
|
47
50
|
//#region src/Breadcrumb.ts
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
var d = new CSSStyleSheet();
|
|
52
|
+
d.replaceSync(o);
|
|
53
|
+
var f = class e extends t {
|
|
54
|
+
static {
|
|
55
|
+
this.template = r("<nav class=\"breadcrumb\"><div role=\"list\"><slot></slot></div></nav>");
|
|
53
56
|
}
|
|
54
57
|
constructor() {
|
|
55
|
-
super(
|
|
58
|
+
super(d), a(this.shadowRoot, e.template);
|
|
56
59
|
}
|
|
57
60
|
connectedCallback() {
|
|
58
|
-
this.ariaLabel ||= "Breadcrumb", this.addEventListener(
|
|
61
|
+
this.ariaLabel ||= "Breadcrumb", this.addEventListener(l, () => {
|
|
59
62
|
this.#e();
|
|
60
63
|
}), this.#e();
|
|
61
64
|
}
|
|
@@ -73,7 +76,7 @@ var u = class extends t {
|
|
|
73
76
|
attributeChangedCallback(e, t, n) {
|
|
74
77
|
if (t !== n) switch (e) {
|
|
75
78
|
case "aria-label":
|
|
76
|
-
|
|
79
|
+
i(this.$el, "aria-label", this.ariaLabel);
|
|
77
80
|
break;
|
|
78
81
|
case "inverted":
|
|
79
82
|
this.isConnected && this.#e();
|
|
@@ -97,9 +100,9 @@ var u = class extends t {
|
|
|
97
100
|
return this.getAttribute("aria-label");
|
|
98
101
|
}
|
|
99
102
|
set ariaLabel(e) {
|
|
100
|
-
|
|
103
|
+
i(this, "aria-label", e);
|
|
101
104
|
}
|
|
102
105
|
};
|
|
103
|
-
customElements.get("px-breadcrumb") || customElements.define("px-breadcrumb",
|
|
106
|
+
customElements.get("px-breadcrumb") || customElements.define("px-breadcrumb", f);
|
|
104
107
|
//#endregion
|
|
105
|
-
export {
|
|
108
|
+
export { l as BREADCRUMB_ITEM_CONNECTED_EVENT, f as Breadcrumb, u as BreadcrumbItem };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-breadcrumb",
|
|
4
|
-
"version": "1.4.17-alpha.
|
|
4
|
+
"version": "1.4.17-alpha.8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -43,8 +43,7 @@
|
|
|
43
43
|
{ "name": "$el" },
|
|
44
44
|
{ "name": "$children" },
|
|
45
45
|
{ "name": "inverted" },
|
|
46
|
-
{ "name": "ariaLabel" }
|
|
47
|
-
{ "name": "innerHTML" }
|
|
46
|
+
{ "name": "ariaLabel" }
|
|
48
47
|
],
|
|
49
48
|
"events": []
|
|
50
49
|
}
|