@proximus/lavender-timeline 1.4.6-beta.2 → 1.4.6
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/Timeline.d.ts +0 -1
- package/dist/TimelineItem.d.ts +0 -2
- package/dist/index.es.js +71 -96
- package/package.json +1 -1
package/dist/Timeline.d.ts
CHANGED
package/dist/TimelineItem.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
export declare const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
|
|
2
1
|
export declare class TimelineItem extends HTMLElement {
|
|
3
2
|
private template;
|
|
4
3
|
constructor();
|
|
5
|
-
connectedCallback(): void;
|
|
6
4
|
static get observedAttributes(): string[];
|
|
7
5
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
8
6
|
updateItem(oldValue: string, newValue: string): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
const s = ".timeline{list-style:none;margin:0;padding:0}", o = new CSSStyleSheet();
|
|
2
|
+
o.replaceSync(s);
|
|
3
|
+
class d extends HTMLElement {
|
|
4
|
+
template() {
|
|
5
|
+
return `
|
|
6
|
+
<ol class="timeline" role="list">
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</ol>
|
|
9
|
+
`;
|
|
10
|
+
}
|
|
11
|
+
constructor() {
|
|
12
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
|
|
13
|
+
}
|
|
14
|
+
static get observedAttributes() {
|
|
15
|
+
return ["inverted"];
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
this.configureChildren();
|
|
19
|
+
}
|
|
20
|
+
attributeChangedCallback(t, e, i) {
|
|
21
|
+
if (e !== i)
|
|
22
|
+
switch (t) {
|
|
23
|
+
case "inverted":
|
|
24
|
+
for (let a = 0; a < this.$children.length; a++)
|
|
25
|
+
this.$children[a].toggleAttribute("inverted");
|
|
26
|
+
break;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
configureChildren() {
|
|
30
|
+
const t = this.$children[this.$children.length - 1];
|
|
31
|
+
t && !t.hasAttribute("lastchild") && t.setAttribute("lastchild", "");
|
|
32
|
+
for (let e = 0; e < this.$children.length; e++)
|
|
33
|
+
this.$children[e].setAttribute("item", `${e + 1}`);
|
|
34
|
+
}
|
|
35
|
+
get $el() {
|
|
36
|
+
return this.shadowRoot.querySelector(".timeline");
|
|
37
|
+
}
|
|
38
|
+
get $children() {
|
|
39
|
+
return this.querySelectorAll("px-timeline-item");
|
|
40
|
+
}
|
|
41
|
+
get inverted() {
|
|
42
|
+
return this.getAttribute("inverted");
|
|
43
|
+
}
|
|
44
|
+
set inverted(t) {
|
|
45
|
+
this.setAttribute("inverted", t);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
customElements.get("px-timeline") || customElements.define("px-timeline", d);
|
|
49
|
+
const c = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}', r = new CSSStyleSheet();
|
|
50
|
+
r.replaceSync(c);
|
|
51
|
+
let n = "1";
|
|
52
|
+
class p extends HTMLElement {
|
|
12
53
|
template() {
|
|
13
54
|
return `
|
|
14
55
|
<li class="timeline-item" role="listitem">
|
|
@@ -23,33 +64,25 @@ class u extends HTMLElement {
|
|
|
23
64
|
`;
|
|
24
65
|
}
|
|
25
66
|
constructor() {
|
|
26
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
27
|
-
}
|
|
28
|
-
connectedCallback() {
|
|
29
|
-
this.dispatchEvent(
|
|
30
|
-
new CustomEvent(p, {
|
|
31
|
-
bubbles: !0,
|
|
32
|
-
composed: !0
|
|
33
|
-
})
|
|
34
|
-
);
|
|
67
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
|
|
35
68
|
}
|
|
36
69
|
static get observedAttributes() {
|
|
37
70
|
return ["inverted", "lastchild", "item"];
|
|
38
71
|
}
|
|
39
|
-
attributeChangedCallback(
|
|
40
|
-
if (
|
|
41
|
-
switch (
|
|
72
|
+
attributeChangedCallback(t, e, i) {
|
|
73
|
+
if (e !== i)
|
|
74
|
+
switch (t) {
|
|
42
75
|
case "item":
|
|
43
|
-
this.updateItem(
|
|
76
|
+
this.updateItem(e, i), this.updateIndicator(n);
|
|
44
77
|
break;
|
|
45
78
|
}
|
|
46
79
|
}
|
|
47
|
-
updateItem(
|
|
48
|
-
|
|
80
|
+
updateItem(t, e) {
|
|
81
|
+
t !== null && t !== "" && (n = t), e !== null && e !== "" && (n = e);
|
|
49
82
|
}
|
|
50
|
-
updateIndicator(
|
|
51
|
-
const
|
|
52
|
-
|
|
83
|
+
updateIndicator(t) {
|
|
84
|
+
const e = this.$el.querySelector(".indicator");
|
|
85
|
+
e.innerHTML = t;
|
|
53
86
|
}
|
|
54
87
|
get $el() {
|
|
55
88
|
return this.shadowRoot.querySelector(".timeline-item");
|
|
@@ -57,82 +90,24 @@ class u extends HTMLElement {
|
|
|
57
90
|
get inverted() {
|
|
58
91
|
return this.getAttribute("inverted");
|
|
59
92
|
}
|
|
60
|
-
set inverted(
|
|
61
|
-
this.setAttribute("inverted",
|
|
93
|
+
set inverted(t) {
|
|
94
|
+
this.setAttribute("inverted", t);
|
|
62
95
|
}
|
|
63
96
|
get lastchild() {
|
|
64
97
|
return this.getAttribute("lastchild");
|
|
65
98
|
}
|
|
66
|
-
set lastchild(
|
|
67
|
-
this.setAttribute("lastchild",
|
|
99
|
+
set lastchild(t) {
|
|
100
|
+
this.setAttribute("lastchild", t);
|
|
68
101
|
}
|
|
69
102
|
get item() {
|
|
70
103
|
return this.getAttribute("item");
|
|
71
104
|
}
|
|
72
|
-
set item(
|
|
73
|
-
this.setAttribute("item",
|
|
105
|
+
set item(t) {
|
|
106
|
+
this.setAttribute("item", t);
|
|
74
107
|
}
|
|
75
108
|
}
|
|
76
|
-
customElements.get("px-timeline-item") || customElements.define("px-timeline-item",
|
|
77
|
-
const h = new CSSStyleSheet();
|
|
78
|
-
h.replaceSync(v);
|
|
79
|
-
var a, r;
|
|
80
|
-
class g extends HTMLElement {
|
|
81
|
-
constructor() {
|
|
82
|
-
super();
|
|
83
|
-
d(this, a);
|
|
84
|
-
this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [h];
|
|
85
|
-
}
|
|
86
|
-
template() {
|
|
87
|
-
return `
|
|
88
|
-
<ol class="timeline" role="list">
|
|
89
|
-
<slot></slot>
|
|
90
|
-
</ol>
|
|
91
|
-
`;
|
|
92
|
-
}
|
|
93
|
-
static get observedAttributes() {
|
|
94
|
-
return ["inverted"];
|
|
95
|
-
}
|
|
96
|
-
connectedCallback() {
|
|
97
|
-
this.addEventListener(p, () => {
|
|
98
|
-
this.configureChildren(), o(this, a, r).call(this);
|
|
99
|
-
}), this.configureChildren(), o(this, a, r).call(this);
|
|
100
|
-
}
|
|
101
|
-
attributeChangedCallback(t, i, m) {
|
|
102
|
-
if (i !== m)
|
|
103
|
-
switch (t) {
|
|
104
|
-
case "inverted":
|
|
105
|
-
this.isConnected && o(this, a, r).call(this);
|
|
106
|
-
break;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
configureChildren() {
|
|
110
|
-
const t = this.$children[this.$children.length - 1];
|
|
111
|
-
t && !t.hasAttribute("lastchild") && t.setAttribute("lastchild", "");
|
|
112
|
-
for (let i = 0; i < this.$children.length; i++)
|
|
113
|
-
this.$children[i].setAttribute("item", `${i + 1}`);
|
|
114
|
-
}
|
|
115
|
-
get $el() {
|
|
116
|
-
return this.shadowRoot.querySelector(".timeline");
|
|
117
|
-
}
|
|
118
|
-
get $children() {
|
|
119
|
-
return this.querySelectorAll("px-timeline-item");
|
|
120
|
-
}
|
|
121
|
-
get inverted() {
|
|
122
|
-
return this.getAttribute("inverted");
|
|
123
|
-
}
|
|
124
|
-
set inverted(t) {
|
|
125
|
-
this.setAttribute("inverted", t);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
a = new WeakSet(), r = function() {
|
|
129
|
-
const t = this.hasAttribute("inverted");
|
|
130
|
-
for (let i = 0; i < this.$children.length; i++)
|
|
131
|
-
this.$children[i].toggleAttribute("inverted", t);
|
|
132
|
-
};
|
|
133
|
-
customElements.get("px-timeline") || customElements.define("px-timeline", g);
|
|
109
|
+
customElements.get("px-timeline-item") || customElements.define("px-timeline-item", p);
|
|
134
110
|
export {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
u as TimelineItem
|
|
111
|
+
d as Timeline,
|
|
112
|
+
p as TimelineItem
|
|
138
113
|
};
|