@proximus/lavender-timeline 2.0.0-alpha.202 → 2.0.0-alpha.204
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 +1 -1
- package/dist/TimelineItem.d.ts +1 -1
- package/dist/custom-elements.json +8 -12
- package/dist/index.es.js +37 -19
- package/dist/web-types.json +1 -3
- package/package.json +1 -1
package/dist/Timeline.d.ts
CHANGED
package/dist/TimelineItem.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
|
|
2
2
|
export declare class TimelineItem extends HTMLElement {
|
|
3
|
-
|
|
3
|
+
protected static readonly template: HTMLTemplateElement;
|
|
4
4
|
constructor();
|
|
5
5
|
connectedCallback(): void;
|
|
6
6
|
static get observedAttributes(): string[];
|
|
@@ -12,9 +12,11 @@
|
|
|
12
12
|
"name": "Timeline",
|
|
13
13
|
"members": [
|
|
14
14
|
{
|
|
15
|
-
"kind": "
|
|
15
|
+
"kind": "field",
|
|
16
16
|
"name": "template",
|
|
17
|
-
"privacy": "
|
|
17
|
+
"privacy": "protected",
|
|
18
|
+
"static": true,
|
|
19
|
+
"readonly": true
|
|
18
20
|
},
|
|
19
21
|
{
|
|
20
22
|
"kind": "method",
|
|
@@ -39,10 +41,6 @@
|
|
|
39
41
|
"kind": "field",
|
|
40
42
|
"name": "inverted"
|
|
41
43
|
},
|
|
42
|
-
{
|
|
43
|
-
"kind": "field",
|
|
44
|
-
"name": "innerHTML"
|
|
45
|
-
},
|
|
46
44
|
{
|
|
47
45
|
"kind": "field",
|
|
48
46
|
"name": "adoptedStyleSheets",
|
|
@@ -101,9 +99,11 @@
|
|
|
101
99
|
"name": "TimelineItem",
|
|
102
100
|
"members": [
|
|
103
101
|
{
|
|
104
|
-
"kind": "
|
|
102
|
+
"kind": "field",
|
|
105
103
|
"name": "template",
|
|
106
|
-
"privacy": "
|
|
104
|
+
"privacy": "protected",
|
|
105
|
+
"static": true,
|
|
106
|
+
"readonly": true
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
109
|
"kind": "method",
|
|
@@ -152,10 +152,6 @@
|
|
|
152
152
|
"kind": "field",
|
|
153
153
|
"name": "item"
|
|
154
154
|
},
|
|
155
|
-
{
|
|
156
|
-
"kind": "field",
|
|
157
|
-
"name": "innerHTML"
|
|
158
|
-
},
|
|
159
155
|
{
|
|
160
156
|
"kind": "field",
|
|
161
157
|
"name": "adoptedStyleSheets",
|
package/dist/index.es.js
CHANGED
|
@@ -468,18 +468,36 @@ function g(e, t, n) {
|
|
|
468
468
|
e.setAttribute(t, "");
|
|
469
469
|
}
|
|
470
470
|
//#endregion
|
|
471
|
+
//#region ../common/src/template.ts
|
|
472
|
+
var _ = /* @__PURE__ */ new Map(), v = 500;
|
|
473
|
+
function y(e) {
|
|
474
|
+
let t = document.createElement("template");
|
|
475
|
+
return t.innerHTML = e, t;
|
|
476
|
+
}
|
|
477
|
+
function b(e) {
|
|
478
|
+
return y(e);
|
|
479
|
+
}
|
|
480
|
+
function x(e) {
|
|
481
|
+
let t = _.get(e);
|
|
482
|
+
return t || (t = y(e), _.size < v && _.set(e, t)), t;
|
|
483
|
+
}
|
|
484
|
+
function S(e, t) {
|
|
485
|
+
let n = typeof t == "string" ? x(t) : t;
|
|
486
|
+
e.replaceChildren(document.importNode(n.content, !0));
|
|
487
|
+
}
|
|
488
|
+
//#endregion
|
|
471
489
|
//#region src/timelineitem.css?inline
|
|
472
|
-
var
|
|
473
|
-
|
|
474
|
-
var
|
|
475
|
-
|
|
476
|
-
|
|
490
|
+
var C = ".timeline-item{gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);display:flex}.indicator-area{position:relative}.indicator-area:before{content:\"\";width:var(--px-size-border-m);background:var(--px-color-border-main-default);height:calc(100% - 26px);display:block;position:absolute;top:26px;left:12px}.indicator-area .indicator{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);justify-content:center;align-items:center;display:flex}.content-area{margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}.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 screen and (width>=48rem){.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 screen and (width>=64.0625rem){.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 screen and (width>=90.0625rem){.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)}}", w = new CSSStyleSheet();
|
|
491
|
+
w.replaceSync(C);
|
|
492
|
+
var T = "px-timeline-item-connected", E = "1", D = class e extends HTMLElement {
|
|
493
|
+
static {
|
|
494
|
+
this.template = b("<li class=\"timeline-item\" role=\"listitem\"><div class=\"indicator-area\"><div class=\"indicator\"></div></div><div class=\"content-area\"><slot name=\"title\"></slot><slot name=\"content\"></slot></div></li>");
|
|
477
495
|
}
|
|
478
496
|
constructor() {
|
|
479
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot
|
|
497
|
+
super(), this.attachShadow({ mode: "open" }), S(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [w];
|
|
480
498
|
}
|
|
481
499
|
connectedCallback() {
|
|
482
|
-
this.dispatchEvent(new CustomEvent(
|
|
500
|
+
this.dispatchEvent(new CustomEvent(T, {
|
|
483
501
|
bubbles: !0,
|
|
484
502
|
composed: !0
|
|
485
503
|
}));
|
|
@@ -493,11 +511,11 @@ var y = "px-timeline-item-connected", b = "1", x = class extends HTMLElement {
|
|
|
493
511
|
}
|
|
494
512
|
attributeChangedCallback(e, t, n) {
|
|
495
513
|
if (t !== n) switch (e) {
|
|
496
|
-
case "item": this.updateItem(t, n), this.updateIndicator(
|
|
514
|
+
case "item": this.updateItem(t, n), this.updateIndicator(E);
|
|
497
515
|
}
|
|
498
516
|
}
|
|
499
517
|
updateItem(e, t) {
|
|
500
|
-
e !== null && e !== "" && (
|
|
518
|
+
e !== null && e !== "" && (E = e), t !== null && t !== "" && (E = t);
|
|
501
519
|
}
|
|
502
520
|
updateIndicator(e) {
|
|
503
521
|
let t = this.$el?.querySelector(".indicator");
|
|
@@ -525,23 +543,23 @@ var y = "px-timeline-item-connected", b = "1", x = class extends HTMLElement {
|
|
|
525
543
|
h(this, "item", e);
|
|
526
544
|
}
|
|
527
545
|
};
|
|
528
|
-
customElements.get("px-timeline-item") || customElements.define("px-timeline-item",
|
|
546
|
+
customElements.get("px-timeline-item") || customElements.define("px-timeline-item", D);
|
|
529
547
|
//#endregion
|
|
530
548
|
//#region src/Timeline.ts
|
|
531
|
-
var
|
|
532
|
-
|
|
533
|
-
var
|
|
534
|
-
|
|
535
|
-
|
|
549
|
+
var O = new CSSStyleSheet();
|
|
550
|
+
O.replaceSync(e);
|
|
551
|
+
var k = class e extends HTMLElement {
|
|
552
|
+
static {
|
|
553
|
+
this.template = b("<ol class=\"timeline\" role=\"list\"><slot></slot></ol>");
|
|
536
554
|
}
|
|
537
555
|
constructor() {
|
|
538
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot
|
|
556
|
+
super(), this.attachShadow({ mode: "open" }), S(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [O];
|
|
539
557
|
}
|
|
540
558
|
static get observedAttributes() {
|
|
541
559
|
return ["inverted"];
|
|
542
560
|
}
|
|
543
561
|
connectedCallback() {
|
|
544
|
-
this.addEventListener(
|
|
562
|
+
this.addEventListener(T, () => {
|
|
545
563
|
this.configureChildren(), this.#e();
|
|
546
564
|
}), this.configureChildren(), this.#e();
|
|
547
565
|
}
|
|
@@ -572,6 +590,6 @@ var C = class extends HTMLElement {
|
|
|
572
590
|
g(this, "inverted", e);
|
|
573
591
|
}
|
|
574
592
|
};
|
|
575
|
-
customElements.get("px-timeline") || customElements.define("px-timeline",
|
|
593
|
+
customElements.get("px-timeline") || customElements.define("px-timeline", k);
|
|
576
594
|
//#endregion
|
|
577
|
-
export {
|
|
595
|
+
export { T as TIMELINE_ITEM_CONNECTED_EVENT, k as Timeline, D as TimelineItem };
|
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-timeline",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.204",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
{ "name": "$el" },
|
|
18
18
|
{ "name": "$children" },
|
|
19
19
|
{ "name": "inverted" },
|
|
20
|
-
{ "name": "innerHTML" },
|
|
21
20
|
{ "name": "adoptedStyleSheets", "type": "array" }
|
|
22
21
|
],
|
|
23
22
|
"events": []
|
|
@@ -41,7 +40,6 @@
|
|
|
41
40
|
{ "name": "inverted" },
|
|
42
41
|
{ "name": "lastchild" },
|
|
43
42
|
{ "name": "item" },
|
|
44
|
-
{ "name": "innerHTML" },
|
|
45
43
|
{ "name": "adoptedStyleSheets", "type": "array" }
|
|
46
44
|
],
|
|
47
45
|
"events": [
|