@proximus/lavender-timeline 1.0.0-alpha.26 → 1.0.0-alpha.27
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/index.es.js +11 -11
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const s = ".timeline{list-style:none;margin:0;padding:0}",
|
|
2
|
-
|
|
1
|
+
const s = ".timeline{list-style:none;margin:0;padding:0}", o = new CSSStyleSheet();
|
|
2
|
+
o.replaceSync(s);
|
|
3
3
|
class d extends HTMLElement {
|
|
4
4
|
template() {
|
|
5
5
|
return `
|
|
@@ -9,7 +9,7 @@ class d extends HTMLElement {
|
|
|
9
9
|
`;
|
|
10
10
|
}
|
|
11
11
|
constructor() {
|
|
12
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
12
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
|
|
13
13
|
}
|
|
14
14
|
static get observedAttributes() {
|
|
15
15
|
return ["inverted"];
|
|
@@ -21,8 +21,8 @@ class d extends HTMLElement {
|
|
|
21
21
|
if (e !== i)
|
|
22
22
|
switch (t) {
|
|
23
23
|
case "inverted":
|
|
24
|
-
for (let
|
|
25
|
-
this.$children[
|
|
24
|
+
for (let a = 0; a < this.$children.length; a++)
|
|
25
|
+
this.$children[a].toggleAttribute("inverted");
|
|
26
26
|
break;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -46,9 +46,9 @@ class d extends HTMLElement {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
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{margin-bottom:var(--px-spacing-
|
|
50
|
-
|
|
51
|
-
let
|
|
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-spacing-default-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-spacing-default-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
52
|
class p extends HTMLElement {
|
|
53
53
|
template() {
|
|
54
54
|
return `
|
|
@@ -64,7 +64,7 @@ class p extends HTMLElement {
|
|
|
64
64
|
`;
|
|
65
65
|
}
|
|
66
66
|
constructor() {
|
|
67
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
67
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
|
|
68
68
|
}
|
|
69
69
|
static get observedAttributes() {
|
|
70
70
|
return ["inverted", "lastchild", "item"];
|
|
@@ -73,12 +73,12 @@ class p extends HTMLElement {
|
|
|
73
73
|
if (e !== i)
|
|
74
74
|
switch (t) {
|
|
75
75
|
case "item":
|
|
76
|
-
this.updateItem(e, i), this.updateIndicator(
|
|
76
|
+
this.updateItem(e, i), this.updateIndicator(n);
|
|
77
77
|
break;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
updateItem(t, e) {
|
|
81
|
-
t !== null && t !== "" && (
|
|
81
|
+
t !== null && t !== "" && (n = t), e !== null && e !== "" && (n = e);
|
|
82
82
|
}
|
|
83
83
|
updateIndicator(t) {
|
|
84
84
|
const e = this.$el.querySelector(".indicator");
|