@proximus/lavender-pillar 2.0.0-alpha.18 → 2.0.0-alpha.181

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.
Files changed (3) hide show
  1. package/dist/Pillar.d.ts +8 -8
  2. package/dist/index.es.js +120 -135
  3. package/package.json +2 -2
package/dist/Pillar.d.ts CHANGED
@@ -16,14 +16,14 @@ export declare class Pillar extends WithExtraAttributes {
16
16
  get $container(): Container;
17
17
  get $title(): HTMLSlotElement;
18
18
  get $children(): NodeListOf<Element>;
19
- get variant(): string;
20
- set variant(value: string);
21
- get backgroundColor(): string;
22
- set backgroundColor(value: string);
23
- get gradient(): string;
24
- set gradient(value: string);
25
- get alignment(): string;
26
- set alignment(value: string);
19
+ get variant(): string | null;
20
+ set variant(value: string | null);
21
+ get backgroundColor(): string | null;
22
+ set backgroundColor(value: string | null);
23
+ get gradient(): string | null;
24
+ set gradient(value: string | null);
25
+ get alignment(): string | null;
26
+ set alignment(value: string | null);
27
27
  get inverted(): boolean;
28
28
  set inverted(value: boolean);
29
29
  }
package/dist/index.es.js CHANGED
@@ -1,136 +1,121 @@
1
- import { WithExtraAttributes as s, log as n } from "@proximus/lavender-common";
2
- const l = ':host{display:block}:host *{box-sizing:border-box}.pillar{height:100%;text-align:var(--pillar-text-align, left)}.pillar px-container{height:100%}.pillar__layout{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-s-mobile);height:100%}.pillar__content{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-xs-mobile)}::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)}::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)}@media only screen and (min-width: 768px){.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 only screen and (min-width: 1025px){.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)}', a = new CSSStyleSheet();
3
- a.replaceSync(l);
4
- const o = ["", "naked", "contained"], d = ["", "left", "center"];
5
- class c extends s {
6
- constructor() {
7
- super(a), this.template = () => `<div class="pillar">
8
- <px-container>
9
- <div class="pillar__layout">
10
- <slot name="media"></slot>
11
- <div class="pillar__content">
12
- <slot name="title"></slot>
13
- <slot name="description"></slot>
14
- </div>
15
- <slot name="action"></slot>
16
- </div>
17
- </px-container>
18
- </div>`, this.shadowRoot.innerHTML = this.template();
19
- }
20
- static get observedAttributes() {
21
- return [
22
- "variant",
23
- "background-color",
24
- "background-gradient",
25
- "alignment",
26
- "inverted"
27
- ];
28
- }
29
- connectedCallback() {
30
- this.configureContainer();
31
- }
32
- attributeChangedCallback(t, i, e) {
33
- if (i !== e)
34
- switch (t) {
35
- case "variant":
36
- this.updateVariant(t, i, e), this.configureContainer();
37
- break;
38
- case "background-color":
39
- this.$container.backgroundColor = e;
40
- break;
41
- case "background-gradient":
42
- this.$container.gradient = e;
43
- break;
44
- case "alignment":
45
- this.updateAlignment(t, i, e);
46
- break;
47
- case "inverted":
48
- if (e === null || e === "") {
49
- this.$container.setAttribute("inverted", "");
50
- for (let r = 0; r < this.$children.length; r++)
51
- this.$children[r].setAttribute("inverted", "");
52
- } else {
53
- this.$container.removeAttribute("inverted");
54
- for (let r = 0; r < this.$children.length; r++)
55
- this.$children[r].removeAttribute("inverted");
56
- }
57
- break;
58
- default:
59
- super.attributeChangedCallback(t, i, e);
60
- break;
61
- }
62
- }
63
- configureContainer() {
64
- 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");
65
- }
66
- updateAlignment(t, i, e) {
67
- if (!this.checkName(d, e)) {
68
- n(
69
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
70
- );
71
- return;
72
- }
73
- i !== null && i !== "" && i !== "default" && this.updateAlignmentStyle(i), e !== null && e !== "" && e !== "default" && this.updateAlignmentStyle(e);
74
- }
75
- updateAlignmentStyle(t) {
76
- const i = t === "left" ? "flex-start" : t;
77
- this.$el.style.setProperty("--pillar-align-items", i), this.$el.style.setProperty("--pillar-text-align", t);
78
- }
79
- updateVariant(t, i, e) {
80
- if (!this.checkName(o, e)) {
81
- n(
82
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
83
- );
84
- return;
85
- }
86
- i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(i), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
87
- }
88
- get $el() {
89
- return this.shadowRoot.querySelector(".pillar");
90
- }
91
- get $container() {
92
- return this.shadowRoot.querySelector("px-container");
93
- }
94
- get $title() {
95
- return this.querySelector('[slot="title"]');
96
- }
97
- get $children() {
98
- return this.querySelectorAll("px-pillar > *");
99
- }
100
- get variant() {
101
- return this.getAttribute("variant");
102
- }
103
- set variant(t) {
104
- t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
105
- }
106
- get backgroundColor() {
107
- return this.getAttribute("background-color");
108
- }
109
- set backgroundColor(t) {
110
- this.setAttribute("background-color", t);
111
- }
112
- get gradient() {
113
- return this.getAttribute("background-gradient");
114
- }
115
- set gradient(t) {
116
- this.setAttribute("background-gradient", t);
117
- }
118
- get alignment() {
119
- return this.getAttribute("alignment");
120
- }
121
- set alignment(t) {
122
- t ? this.setAttribute("alignment", t) : this.removeAttribute("alignment");
123
- }
124
- get inverted() {
125
- return this.hasAttribute("inverted");
126
- }
127
- set inverted(t) {
128
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
129
- }
130
- }
131
- customElements.get("px-pillar") || customElements.define("px-pillar", c);
132
- export {
133
- c as Pillar,
134
- d as pillarAlignmentValues,
135
- o as pillarVariantValues
1
+ import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, log as n, propertyToAttributeSetter as r } from "@proximus/lavender-common";
2
+ //#region src/pillar.css?inline
3
+ var i = ":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)}", a = new CSSStyleSheet();
4
+ a.replaceSync(i);
5
+ var o = [
6
+ "",
7
+ "naked",
8
+ "contained"
9
+ ], s = [
10
+ "",
11
+ "left",
12
+ "center"
13
+ ], c = class extends e {
14
+ constructor() {
15
+ super(a), this.template = () => "<div class=\"pillar\">\n <px-container>\n <div class=\"pillar__layout\">\n <slot name=\"media\"></slot>\n <div class=\"pillar__content\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n <slot name=\"action\"></slot>\n </div>\n </px-container>\n </div>", this.shadowRoot.innerHTML = this.template();
16
+ }
17
+ static get observedAttributes() {
18
+ return [
19
+ "variant",
20
+ "background-color",
21
+ "background-gradient",
22
+ "alignment",
23
+ "inverted"
24
+ ];
25
+ }
26
+ connectedCallback() {
27
+ this.configureContainer();
28
+ }
29
+ attributeChangedCallback(e, t, n) {
30
+ if (t !== n) switch (e) {
31
+ case "variant":
32
+ this.updateVariant(e, t, n), this.configureContainer();
33
+ break;
34
+ case "background-color":
35
+ this.$container.backgroundColor = n;
36
+ break;
37
+ case "background-gradient":
38
+ this.$container.gradient = n;
39
+ break;
40
+ case "alignment":
41
+ this.updateAlignment(e, t, n);
42
+ break;
43
+ case "inverted":
44
+ if (n === null || n === "") {
45
+ this.$container.setAttribute("inverted", "");
46
+ for (let e = 0; e < this.$children.length; e++) this.$children[e].setAttribute("inverted", "");
47
+ } else {
48
+ this.$container.removeAttribute("inverted");
49
+ for (let e = 0; e < this.$children.length; e++) this.$children[e].removeAttribute("inverted");
50
+ }
51
+ break;
52
+ default: super.attributeChangedCallback(e, t, n);
53
+ }
54
+ }
55
+ configureContainer() {
56
+ 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
+ }
58
+ updateAlignment(e, t, r) {
59
+ if (!this.checkName(s, r)) {
60
+ n(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${s.join("\", \"")}".`);
61
+ return;
62
+ }
63
+ t !== null && t !== "" && t !== "default" && this.updateAlignmentStyle(t), r !== null && r !== "" && r !== "default" && this.updateAlignmentStyle(r);
64
+ }
65
+ updateAlignmentStyle(e) {
66
+ let t = e === "left" ? "flex-start" : e;
67
+ this.$el.style.setProperty("--pillar-align-items", t), this.$el.style.setProperty("--pillar-text-align", e);
68
+ }
69
+ updateVariant(e, t, r) {
70
+ if (!this.checkName(o, r)) {
71
+ n(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
72
+ return;
73
+ }
74
+ t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(r);
75
+ }
76
+ get $el() {
77
+ return this.shadowRoot.querySelector(".pillar");
78
+ }
79
+ get $container() {
80
+ return this.shadowRoot.querySelector("px-container");
81
+ }
82
+ get $title() {
83
+ return this.querySelector("[slot=\"title\"]");
84
+ }
85
+ get $children() {
86
+ return this.querySelectorAll("px-pillar > *");
87
+ }
88
+ get variant() {
89
+ return this.getAttribute("variant");
90
+ }
91
+ set variant(e) {
92
+ r(this, "variant", e);
93
+ }
94
+ get backgroundColor() {
95
+ return this.getAttribute("background-color");
96
+ }
97
+ set backgroundColor(e) {
98
+ r(this, "background-color", e);
99
+ }
100
+ get gradient() {
101
+ return this.getAttribute("background-gradient");
102
+ }
103
+ set gradient(e) {
104
+ r(this, "background-gradient", e);
105
+ }
106
+ get alignment() {
107
+ return this.getAttribute("alignment");
108
+ }
109
+ set alignment(e) {
110
+ r(this, "alignment", e);
111
+ }
112
+ get inverted() {
113
+ return this.hasAttribute("inverted");
114
+ }
115
+ set inverted(e) {
116
+ t(this, "inverted", e);
117
+ }
136
118
  };
119
+ customElements.get("px-pillar") || customElements.define("px-pillar", c);
120
+ //#endregion
121
+ export { c as Pillar, s as pillarAlignmentValues, o as pillarVariantValues };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-pillar",
3
- "version": "2.0.0-alpha.18",
3
+ "version": "2.0.0-alpha.181",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"