@proximus/lavender-pillar 2.0.0-alpha.203 → 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/Pillar.d.ts +1 -1
- package/dist/custom-elements.json +3 -5
- package/dist/index.es.js +24 -21
- package/dist/web-types.json +2 -3
- package/package.json +1 -1
package/dist/Pillar.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
|
3
3
|
export declare const pillarVariantValues: string[];
|
|
4
4
|
export declare const pillarAlignmentValues: string[];
|
|
5
5
|
export declare class Pillar extends WithExtraAttributes {
|
|
6
|
-
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
7
7
|
constructor();
|
|
8
8
|
static get observedAttributes(): string[];
|
|
9
9
|
connectedCallback(): void;
|
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
{
|
|
31
31
|
"kind": "field",
|
|
32
32
|
"name": "template",
|
|
33
|
-
"privacy": "
|
|
33
|
+
"privacy": "protected",
|
|
34
|
+
"static": true,
|
|
35
|
+
"readonly": true
|
|
34
36
|
},
|
|
35
37
|
{
|
|
36
38
|
"kind": "method",
|
|
@@ -135,10 +137,6 @@
|
|
|
135
137
|
{
|
|
136
138
|
"kind": "field",
|
|
137
139
|
"name": "inverted"
|
|
138
|
-
},
|
|
139
|
-
{
|
|
140
|
-
"kind": "field",
|
|
141
|
-
"name": "innerHTML"
|
|
142
140
|
}
|
|
143
141
|
],
|
|
144
142
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t,
|
|
1
|
+
import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, createTemplate as n, log as r, propertyToAttributeSetter as i, renderTemplate as a } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/pillar.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var o = ":host{display:block}:host *{box-sizing:border-box}.pillar{height:100%}.pillar px-container{height:100%}.pillar__layout{align-items:var(--pillar-align-items,flex-start);gap:var(--px-spacing-s-mobile);flex-direction:column;height:100%;display:flex}.pillar__content{align-items:var(--pillar-align-items,flex-start);gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}::slotted([slot=title]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);text-align:var(--pillar-text-align,left)}::slotted([slot=description]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-dimmed-default);text-align:var(--pillar-text-align,left)}@media screen and (width>=48rem){.pillar__layout{gap:var(--px-spacing-s-desktop)}.pillar__content{gap:var(--px-spacing-xs-desktop)}::slotted([slot=title]){font-size:var(--px-text-size-heading-m-desktop)}::slotted([slot=description]){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (width>=64.0625rem){.pillar__layout{gap:var(--px-spacing-s-desktop)}.pillar__content{gap:var(--px-spacing-xs-desktop)}::slotted([slot=title]){font-size:var(--px-text-size-heading-m-desktop)}::slotted([slot=description]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) ::slotted([slot=title]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) ::slotted([slot=description]){color:var(--px-color-text-dimmed-inverted)}", s = new CSSStyleSheet();
|
|
4
|
+
s.replaceSync(o);
|
|
5
|
+
var c = [
|
|
6
6
|
"",
|
|
7
7
|
"naked",
|
|
8
8
|
"contained"
|
|
9
|
-
],
|
|
9
|
+
], l = [
|
|
10
10
|
"",
|
|
11
11
|
"left",
|
|
12
12
|
"center"
|
|
13
|
-
],
|
|
13
|
+
], u = class o extends e {
|
|
14
|
+
static {
|
|
15
|
+
this.template = n("<div class=\"pillar\"><px-container><div class=\"pillar__layout\"><slot name=\"media\"></slot><div class=\"pillar__content\"><slot name=\"title\"></slot><slot name=\"description\"></slot></div><slot name=\"action\"></slot></div></px-container></div>");
|
|
16
|
+
}
|
|
14
17
|
constructor() {
|
|
15
|
-
super(
|
|
18
|
+
super(s), a(this.shadowRoot, o.template);
|
|
16
19
|
}
|
|
17
20
|
static get observedAttributes() {
|
|
18
21
|
return [
|
|
@@ -55,23 +58,23 @@ var o = [
|
|
|
55
58
|
configureContainer() {
|
|
56
59
|
this.variant === "contained" ? (this.$container.padding = "l", !this.backgroundColor && !this.gradient && (this.$container.backgroundColor = this.inverted ? "surface-brand" : "surface-default")) : (this.$container.padding = "none", this.$container.backgroundColor = "none", this.$container.borderRadius = "none");
|
|
57
60
|
}
|
|
58
|
-
updateAlignment(e, t,
|
|
59
|
-
if (!this.checkName(
|
|
60
|
-
|
|
61
|
+
updateAlignment(e, t, n) {
|
|
62
|
+
if (!this.checkName(l, n)) {
|
|
63
|
+
r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join("\", \"")}".`);
|
|
61
64
|
return;
|
|
62
65
|
}
|
|
63
|
-
t !== null && t !== "" && t !== "default" && this.updateAlignmentStyle(t),
|
|
66
|
+
t !== null && t !== "" && t !== "default" && this.updateAlignmentStyle(t), n !== null && n !== "" && n !== "default" && this.updateAlignmentStyle(n);
|
|
64
67
|
}
|
|
65
68
|
updateAlignmentStyle(e) {
|
|
66
69
|
let t = e === "left" ? "flex-start" : e;
|
|
67
70
|
this.$el.style.setProperty("--pillar-align-items", t), this.$el.style.setProperty("--pillar-text-align", e);
|
|
68
71
|
}
|
|
69
|
-
updateVariant(e, t,
|
|
70
|
-
if (!this.checkName(
|
|
71
|
-
|
|
72
|
+
updateVariant(e, t, n) {
|
|
73
|
+
if (!this.checkName(c, n)) {
|
|
74
|
+
r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${c.join("\", \"")}".`);
|
|
72
75
|
return;
|
|
73
76
|
}
|
|
74
|
-
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t),
|
|
77
|
+
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(n);
|
|
75
78
|
}
|
|
76
79
|
get $el() {
|
|
77
80
|
return this.shadowRoot.querySelector(".pillar");
|
|
@@ -89,25 +92,25 @@ var o = [
|
|
|
89
92
|
return this.getAttribute("variant");
|
|
90
93
|
}
|
|
91
94
|
set variant(e) {
|
|
92
|
-
|
|
95
|
+
i(this, "variant", e);
|
|
93
96
|
}
|
|
94
97
|
get backgroundColor() {
|
|
95
98
|
return this.getAttribute("background-color");
|
|
96
99
|
}
|
|
97
100
|
set backgroundColor(e) {
|
|
98
|
-
|
|
101
|
+
i(this, "background-color", e);
|
|
99
102
|
}
|
|
100
103
|
get gradient() {
|
|
101
104
|
return this.getAttribute("background-gradient");
|
|
102
105
|
}
|
|
103
106
|
set gradient(e) {
|
|
104
|
-
|
|
107
|
+
i(this, "background-gradient", e);
|
|
105
108
|
}
|
|
106
109
|
get alignment() {
|
|
107
110
|
return this.getAttribute("alignment");
|
|
108
111
|
}
|
|
109
112
|
set alignment(e) {
|
|
110
|
-
|
|
113
|
+
i(this, "alignment", e);
|
|
111
114
|
}
|
|
112
115
|
get inverted() {
|
|
113
116
|
return this.hasAttribute("inverted");
|
|
@@ -116,6 +119,6 @@ var o = [
|
|
|
116
119
|
t(this, "inverted", e);
|
|
117
120
|
}
|
|
118
121
|
};
|
|
119
|
-
customElements.get("px-pillar") || customElements.define("px-pillar",
|
|
122
|
+
customElements.get("px-pillar") || customElements.define("px-pillar", u);
|
|
120
123
|
//#endregion
|
|
121
|
-
export {
|
|
124
|
+
export { u as Pillar, l as pillarAlignmentValues, c as pillarVariantValues };
|
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-pillar",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.204",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -28,8 +28,7 @@
|
|
|
28
28
|
{ "name": "backgroundColor" },
|
|
29
29
|
{ "name": "gradient" },
|
|
30
30
|
{ "name": "alignment" },
|
|
31
|
-
{ "name": "inverted" }
|
|
32
|
-
{ "name": "innerHTML" }
|
|
31
|
+
{ "name": "inverted" }
|
|
33
32
|
],
|
|
34
33
|
"events": []
|
|
35
34
|
}
|