@proximus/lavender-container 2.0.0-alpha.58 → 2.0.0-alpha.59
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/Container.d.ts +17 -4
- package/dist/index.es.js +123 -53
- package/package.json +1 -1
package/dist/Container.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
2
|
export declare const anchorSpacingValues: string[];
|
|
3
|
-
export declare
|
|
3
|
+
export declare const subgridRowsValues: string[];
|
|
4
|
+
export declare class Container extends WithExtraAttributes {
|
|
4
5
|
static nativeName: string;
|
|
5
6
|
private template;
|
|
6
7
|
private _bgObserver;
|
|
@@ -25,6 +26,8 @@ export declare class Container extends VerticallyExtendedElement<HTMLDivElement>
|
|
|
25
26
|
updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
26
27
|
addAnchorClass(): void;
|
|
27
28
|
updateAnchorSpacing(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
29
|
+
updateSubgridRows(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;
|
|
30
|
+
get $el(): HTMLElement;
|
|
28
31
|
get $slotAnchor(): HTMLSlotElement;
|
|
29
32
|
get padding(): string;
|
|
30
33
|
set padding(value: string);
|
|
@@ -138,6 +141,16 @@ export declare class Container extends VerticallyExtendedElement<HTMLDivElement>
|
|
|
138
141
|
set anchorOffset(value: string);
|
|
139
142
|
get anchorSpacing(): string;
|
|
140
143
|
set anchorSpacing(value: string);
|
|
141
|
-
get inverted():
|
|
142
|
-
set inverted(value:
|
|
144
|
+
get inverted(): boolean;
|
|
145
|
+
set inverted(value: boolean);
|
|
146
|
+
get subgridRows(): string;
|
|
147
|
+
set subgridRows(value: string);
|
|
148
|
+
get subgridGap(): string;
|
|
149
|
+
set subgridGap(value: string);
|
|
150
|
+
get subgridGapMobile(): string;
|
|
151
|
+
set subgridGapMobile(value: string);
|
|
152
|
+
get subgridGapTablet(): string;
|
|
153
|
+
set subgridGapTablet(value: string);
|
|
154
|
+
get subgridGapLaptop(): string;
|
|
155
|
+
set subgridGapLaptop(value: string);
|
|
143
156
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,65 +1,86 @@
|
|
|
1
|
-
import { cssTokenBreakpoints as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as a, paddingValues as s, gapValues as k, WithExtraAttributes as m, boxShadowValues as f, backgroundSizeValues as v, noBorderRadiusValues as A, borderRadiusValues as y, borderSideValues as x, borderValues as $, gradientValues as L, log as d, backgroundColorValues as B, borderColorValues as C, checkName as g } from "@proximus/lavender-common";
|
|
2
|
+
const S = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', c = new CSSStyleSheet();
|
|
3
|
+
c.replaceSync(S);
|
|
4
|
+
const T = [
|
|
5
5
|
"has-patch",
|
|
6
6
|
"neighbor-has-patch",
|
|
7
7
|
"has-ribbon",
|
|
8
8
|
"neighbor-has-ribbon"
|
|
9
|
-
],
|
|
10
|
-
|
|
9
|
+
], R = [
|
|
10
|
+
"1",
|
|
11
|
+
"2",
|
|
12
|
+
"3",
|
|
13
|
+
"4",
|
|
14
|
+
"5",
|
|
15
|
+
"6",
|
|
16
|
+
"7",
|
|
17
|
+
"8",
|
|
18
|
+
"9",
|
|
19
|
+
"10",
|
|
20
|
+
"11",
|
|
21
|
+
"12"
|
|
22
|
+
], n = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", M = [
|
|
23
|
+
a(
|
|
11
24
|
"padding",
|
|
25
|
+
n,
|
|
12
26
|
s,
|
|
13
|
-
a,
|
|
14
27
|
b,
|
|
15
28
|
"--container-padding"
|
|
16
29
|
),
|
|
17
|
-
|
|
30
|
+
a(
|
|
18
31
|
"padding-inline",
|
|
32
|
+
n,
|
|
19
33
|
s,
|
|
20
|
-
a,
|
|
21
34
|
b
|
|
22
35
|
),
|
|
23
|
-
|
|
36
|
+
a(
|
|
24
37
|
"padding-block",
|
|
38
|
+
n,
|
|
25
39
|
s,
|
|
26
|
-
a,
|
|
27
40
|
b
|
|
28
41
|
),
|
|
29
|
-
|
|
42
|
+
a(
|
|
30
43
|
"padding-top",
|
|
44
|
+
n,
|
|
31
45
|
s,
|
|
32
|
-
a,
|
|
33
46
|
b
|
|
34
47
|
),
|
|
35
|
-
|
|
48
|
+
a(
|
|
36
49
|
"padding-right",
|
|
50
|
+
n,
|
|
37
51
|
s,
|
|
38
|
-
a,
|
|
39
52
|
b,
|
|
40
53
|
"--container-padding-right"
|
|
41
54
|
),
|
|
42
|
-
|
|
55
|
+
a(
|
|
43
56
|
"padding-bottom",
|
|
57
|
+
n,
|
|
44
58
|
s,
|
|
45
|
-
a,
|
|
46
59
|
b
|
|
47
60
|
),
|
|
48
|
-
|
|
61
|
+
a(
|
|
49
62
|
"padding-left",
|
|
63
|
+
n,
|
|
50
64
|
s,
|
|
51
|
-
a,
|
|
52
65
|
b,
|
|
53
66
|
"--container-padding-left"
|
|
67
|
+
),
|
|
68
|
+
a(
|
|
69
|
+
"gap",
|
|
70
|
+
n,
|
|
71
|
+
k,
|
|
72
|
+
"px-spacing",
|
|
73
|
+
void 0,
|
|
74
|
+
"subgrid-gap"
|
|
54
75
|
)
|
|
55
|
-
],
|
|
76
|
+
], u = class u extends m {
|
|
56
77
|
constructor() {
|
|
57
|
-
super(
|
|
78
|
+
super(c, ...M), this.template = () => `<div class="container">
|
|
58
79
|
<slot></slot>
|
|
59
80
|
<slot name="anchor-left"></slot>
|
|
60
81
|
<slot name="anchor-right"></slot>
|
|
61
82
|
<slot name="anchor-full"></slot>
|
|
62
|
-
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
83
|
+
</div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
|
|
63
84
|
}
|
|
64
85
|
static get observedAttributes() {
|
|
65
86
|
return [
|
|
@@ -92,11 +113,12 @@ const S = [
|
|
|
92
113
|
"box-shadow",
|
|
93
114
|
"anchor-offset",
|
|
94
115
|
"anchor-spacing",
|
|
95
|
-
"inverted"
|
|
116
|
+
"inverted",
|
|
117
|
+
"subgrid-rows"
|
|
96
118
|
];
|
|
97
119
|
}
|
|
98
120
|
connectedCallback() {
|
|
99
|
-
|
|
121
|
+
this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
|
|
100
122
|
this.$slotAnchor && this.addAnchorClass();
|
|
101
123
|
}), this.contentObserver.observe(this, {
|
|
102
124
|
childList: !0,
|
|
@@ -110,14 +132,14 @@ const S = [
|
|
|
110
132
|
}), this._bgObserver.observe(this.$el);
|
|
111
133
|
}
|
|
112
134
|
disconnectedCallback() {
|
|
113
|
-
var t;
|
|
114
|
-
(t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
|
|
135
|
+
var t, e;
|
|
136
|
+
(t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
|
|
115
137
|
}
|
|
116
138
|
attributeChangedCallback(t, e, r) {
|
|
117
139
|
if (e !== r)
|
|
118
140
|
switch (t) {
|
|
119
141
|
case "border":
|
|
120
|
-
this.updateAttribute(t, e, r,
|
|
142
|
+
this.updateAttribute(t, e, r, $);
|
|
121
143
|
break;
|
|
122
144
|
case "border-color":
|
|
123
145
|
this.updateBorderColor(t, r);
|
|
@@ -126,14 +148,14 @@ const S = [
|
|
|
126
148
|
case "border-side--mobile":
|
|
127
149
|
case "border-side--tablet":
|
|
128
150
|
case "border-side--laptop":
|
|
129
|
-
this.updateAttribute(t, e, r,
|
|
151
|
+
this.updateAttribute(t, e, r, x);
|
|
130
152
|
break;
|
|
131
153
|
case "border-radius":
|
|
132
154
|
this.updateAttribute(
|
|
133
155
|
t,
|
|
134
156
|
e,
|
|
135
157
|
r,
|
|
136
|
-
|
|
158
|
+
y
|
|
137
159
|
);
|
|
138
160
|
break;
|
|
139
161
|
case "no-border-radius":
|
|
@@ -144,7 +166,7 @@ const S = [
|
|
|
144
166
|
t,
|
|
145
167
|
e,
|
|
146
168
|
r,
|
|
147
|
-
|
|
169
|
+
A
|
|
148
170
|
);
|
|
149
171
|
break;
|
|
150
172
|
case "background-color":
|
|
@@ -164,7 +186,7 @@ const S = [
|
|
|
164
186
|
t,
|
|
165
187
|
e,
|
|
166
188
|
r,
|
|
167
|
-
|
|
189
|
+
v
|
|
168
190
|
);
|
|
169
191
|
break;
|
|
170
192
|
case "background-image":
|
|
@@ -177,13 +199,21 @@ const S = [
|
|
|
177
199
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
178
200
|
break;
|
|
179
201
|
case "box-shadow":
|
|
180
|
-
this.updateAttribute(t, e, r,
|
|
202
|
+
this.updateAttribute(t, e, r, f);
|
|
181
203
|
break;
|
|
182
204
|
case "anchor-offset":
|
|
183
|
-
this.updateAnchorOffset(e, r,
|
|
205
|
+
this.updateAnchorOffset(e, r, s);
|
|
184
206
|
break;
|
|
185
207
|
case "anchor-spacing":
|
|
186
|
-
this.updateAnchorSpacing(e, r,
|
|
208
|
+
this.updateAnchorSpacing(e, r, T);
|
|
209
|
+
break;
|
|
210
|
+
case "subgrid-rows":
|
|
211
|
+
this.updateSubgridRows(
|
|
212
|
+
t,
|
|
213
|
+
e,
|
|
214
|
+
r,
|
|
215
|
+
R
|
|
216
|
+
);
|
|
187
217
|
break;
|
|
188
218
|
default:
|
|
189
219
|
super.attributeChangedCallback(t, e, r);
|
|
@@ -205,7 +235,7 @@ const S = [
|
|
|
205
235
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
206
236
|
}
|
|
207
237
|
updateGradient(t, e) {
|
|
208
|
-
if (this.checkName(
|
|
238
|
+
if (this.checkName(L, e)) {
|
|
209
239
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
210
240
|
t = r.attrName;
|
|
211
241
|
const i = r.breakpoint;
|
|
@@ -214,13 +244,13 @@ const S = [
|
|
|
214
244
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
215
245
|
);
|
|
216
246
|
} else
|
|
217
|
-
|
|
247
|
+
d(
|
|
218
248
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
219
249
|
);
|
|
220
250
|
}
|
|
221
251
|
updateBackgroundColor(t, e) {
|
|
222
252
|
const r = e.startsWith("surface-");
|
|
223
|
-
if (this.checkName(
|
|
253
|
+
if (this.checkName(B, e)) {
|
|
224
254
|
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
225
255
|
this.$el.style.setProperty(
|
|
226
256
|
`--${i.attrName}${o}`,
|
|
@@ -230,24 +260,24 @@ const S = [
|
|
|
230
260
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
231
261
|
);
|
|
232
262
|
} else
|
|
233
|
-
|
|
263
|
+
d(
|
|
234
264
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
235
265
|
);
|
|
236
266
|
}
|
|
237
267
|
updateBorderColor(t, e) {
|
|
238
|
-
this.checkName(
|
|
268
|
+
this.checkName(C, e) ? (this.$el.style.setProperty(
|
|
239
269
|
`--${t}`,
|
|
240
270
|
`var(--px-color-border-${e}-default)`
|
|
241
271
|
), this.$el.style.setProperty(
|
|
242
272
|
`--${t}-inverted`,
|
|
243
273
|
`var(--px-color-border-${e}-inverted)`
|
|
244
|
-
)) :
|
|
274
|
+
)) : d(
|
|
245
275
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
246
276
|
);
|
|
247
277
|
}
|
|
248
278
|
updateNoBorderRadius(t, e, r, i) {
|
|
249
279
|
if (!this.checkName(i, r))
|
|
250
|
-
|
|
280
|
+
d(
|
|
251
281
|
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
252
282
|
);
|
|
253
283
|
else {
|
|
@@ -261,7 +291,7 @@ const S = [
|
|
|
261
291
|
}
|
|
262
292
|
updateAttribute(t, e, r, i) {
|
|
263
293
|
if (!this.checkName(i, r))
|
|
264
|
-
|
|
294
|
+
d(
|
|
265
295
|
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
266
296
|
);
|
|
267
297
|
else {
|
|
@@ -284,8 +314,8 @@ const S = [
|
|
|
284
314
|
return { attrName: t, breakpoint: e };
|
|
285
315
|
}
|
|
286
316
|
updateAnchorOffset(t, e, r) {
|
|
287
|
-
if (!
|
|
288
|
-
|
|
317
|
+
if (!g(r, e)) {
|
|
318
|
+
d(
|
|
289
319
|
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
290
320
|
);
|
|
291
321
|
return;
|
|
@@ -308,8 +338,8 @@ const S = [
|
|
|
308
338
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
309
339
|
}
|
|
310
340
|
updateAnchorSpacing(t, e, r) {
|
|
311
|
-
if (!
|
|
312
|
-
|
|
341
|
+
if (!g(r, e)) {
|
|
342
|
+
d(
|
|
313
343
|
`${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
|
|
314
344
|
);
|
|
315
345
|
return;
|
|
@@ -328,6 +358,15 @@ const S = [
|
|
|
328
358
|
};
|
|
329
359
|
i(t), i(e);
|
|
330
360
|
}
|
|
361
|
+
updateSubgridRows(t, e, r, i) {
|
|
362
|
+
g(i, r) ? this.style.setProperty(`--${t}`, r) : d(
|
|
363
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
364
|
+
);
|
|
365
|
+
}
|
|
366
|
+
get $el() {
|
|
367
|
+
var t;
|
|
368
|
+
return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
|
|
369
|
+
}
|
|
331
370
|
get $slotAnchor() {
|
|
332
371
|
return this.querySelector('[slot^="anchor"]');
|
|
333
372
|
}
|
|
@@ -668,16 +707,47 @@ const S = [
|
|
|
668
707
|
this.setAttribute("anchor-spacing", t);
|
|
669
708
|
}
|
|
670
709
|
get inverted() {
|
|
671
|
-
return this.
|
|
710
|
+
return this.hasAttribute("inverted");
|
|
672
711
|
}
|
|
673
712
|
set inverted(t) {
|
|
674
|
-
this.setAttribute("inverted",
|
|
713
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
714
|
+
}
|
|
715
|
+
get subgridRows() {
|
|
716
|
+
return this.getAttribute("subgrid-rows");
|
|
717
|
+
}
|
|
718
|
+
set subgridRows(t) {
|
|
719
|
+
this.setAttribute("subgrid-rows", t);
|
|
720
|
+
}
|
|
721
|
+
get subgridGap() {
|
|
722
|
+
return this.getAttribute("subgrid-gap");
|
|
723
|
+
}
|
|
724
|
+
set subgridGap(t) {
|
|
725
|
+
this.setAttribute("subgrid-gap", t);
|
|
726
|
+
}
|
|
727
|
+
get subgridGapMobile() {
|
|
728
|
+
return this.getAttribute("subgrid-gap--mobile");
|
|
729
|
+
}
|
|
730
|
+
set subgridGapMobile(t) {
|
|
731
|
+
this.setAttribute("subgrid-gap--mobile", t);
|
|
732
|
+
}
|
|
733
|
+
get subgridGapTablet() {
|
|
734
|
+
return this.getAttribute("subgrid-gap--tablet");
|
|
735
|
+
}
|
|
736
|
+
set subgridGapTablet(t) {
|
|
737
|
+
this.setAttribute("subgrid-gap--tablet", t);
|
|
738
|
+
}
|
|
739
|
+
get subgridGapLaptop() {
|
|
740
|
+
return this.getAttribute("subgrid-gap--laptop");
|
|
741
|
+
}
|
|
742
|
+
set subgridGapLaptop(t) {
|
|
743
|
+
this.setAttribute("subgrid-gap--laptop", t);
|
|
675
744
|
}
|
|
676
745
|
};
|
|
677
|
-
|
|
678
|
-
let
|
|
679
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
746
|
+
u.nativeName = "div";
|
|
747
|
+
let p = u;
|
|
748
|
+
customElements.get("px-container") || customElements.define("px-container", p);
|
|
680
749
|
export {
|
|
681
|
-
|
|
682
|
-
|
|
750
|
+
p as Container,
|
|
751
|
+
T as anchorSpacingValues,
|
|
752
|
+
R as subgridRowsValues
|
|
683
753
|
};
|