@nldd/design-system 0.8.48 → 0.8.50
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/components/components.js +1 -1
- package/dist/components/{index-CHPElQwp.js → index-BVOcPb8I.js} +52 -161
- package/dist/components/layout/container/container.d.ts +15 -22
- package/dist/components/layout/container/container.d.ts.map +1 -1
- package/dist/components/layout/container/container.js +46 -47
- package/dist/components/layout/container/container.js.map +1 -1
- package/dist/components/layout/container/container.styles.d.ts.map +1 -1
- package/dist/components/layout/container/container.styles.js +17 -138
- package/dist/components/layout/container/container.styles.js.map +1 -1
- package/dist/components/layout/container/container.template.d.ts +1 -1
- package/dist/components/layout/container/container.template.d.ts.map +1 -1
- package/dist/components/layout/container/container.template.js +2 -2
- package/dist/components/layout/container/container.template.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +1 -1
- package/dist/components/{prism-python-ByhwnnUm.js → prism-python-C1D7CYBc.js} +1 -1
- package/dist/components/{prism-rust-BuyNemv0.js → prism-rust-DI5vrP6V.js} +1 -1
- package/dist/components/{prism-typescript-DNQwLx9f.js → prism-typescript-DBgOPJ4M.js} +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N, a, b, c, d, e, f, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax } from "./index-
|
|
1
|
+
import { N, a, b, c, d, e, f, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax } from "./index-BVOcPb8I.js";
|
|
2
2
|
export {
|
|
3
3
|
N as NLDDAppView,
|
|
4
4
|
a as NLDDBadge,
|
|
@@ -8350,17 +8350,17 @@ const GRAMMAR_LOADERS = {
|
|
|
8350
8350
|
yaml: () => import("./prism-yaml-DO0f9pf6.js"),
|
|
8351
8351
|
json: () => import("./prism-json-DIMpow89.js"),
|
|
8352
8352
|
javascript: () => import("./prism-javascript-DeC_17Pw.js"),
|
|
8353
|
-
typescript: () => import("./prism-typescript-
|
|
8353
|
+
typescript: () => import("./prism-typescript-DBgOPJ4M.js").then((n) => n.p),
|
|
8354
8354
|
css: () => import("./prism-css-B93tXdOU.js"),
|
|
8355
8355
|
html: () => import("./prism-markup-DfJYPYHA.js"),
|
|
8356
8356
|
xml: () => import("./prism-markup-DfJYPYHA.js"),
|
|
8357
8357
|
bash: () => import("./prism-bash-vbqaw3JR.js"),
|
|
8358
8358
|
markdown: () => import("./prism-markdown-D-uFBkiz.js"),
|
|
8359
|
-
rust: () => import("./prism-rust-
|
|
8359
|
+
rust: () => import("./prism-rust-DI5vrP6V.js").then((n) => n.p),
|
|
8360
8360
|
gherkin: () => import("./prism-gherkin-CMPYyXOQ.js"),
|
|
8361
8361
|
toml: () => import("./prism-toml-Ubdq-a5x.js"),
|
|
8362
8362
|
sql: () => import("./prism-sql-BGqCBMyJ.js"),
|
|
8363
|
-
python: () => import("./prism-python-
|
|
8363
|
+
python: () => import("./prism-python-C1D7CYBc.js").then((n) => n.p)
|
|
8364
8364
|
};
|
|
8365
8365
|
const grammarLoads = /* @__PURE__ */ new Map();
|
|
8366
8366
|
function loadGrammar(language) {
|
|
@@ -18639,6 +18639,10 @@ const containerStyles = css`
|
|
|
18639
18639
|
--_lg-padding-right: var(--_padding-right);
|
|
18640
18640
|
--_lg-padding-bottom: var(--_padding-bottom);
|
|
18641
18641
|
--_lg-padding-left: var(--_padding-left);
|
|
18642
|
+
--_slot-order: 0;
|
|
18643
|
+
--_slot-sm-order: var(--_slot-order);
|
|
18644
|
+
--_slot-md-order: var(--_slot-order);
|
|
18645
|
+
--_slot-lg-order: var(--_slot-order);
|
|
18642
18646
|
|
|
18643
18647
|
container-type: inline-size;
|
|
18644
18648
|
display: block;
|
|
@@ -18810,155 +18814,30 @@ const containerStyles = css`
|
|
|
18810
18814
|
}
|
|
18811
18815
|
|
|
18812
18816
|
|
|
18813
|
-
/* #
|
|
18817
|
+
/* # Slot order — per-child via order / sm-order / md-order / lg-order
|
|
18818
|
+
attributes on slotted children. Container JS bridges those to
|
|
18819
|
+
--_slot-{attr} inline custom props on the child; the queries below
|
|
18820
|
+
pick the right value per breakpoint with var() cascading
|
|
18821
|
+
sm/md/lg-order → order → 0. No-op for layout="columns" (multicol). */
|
|
18814
18822
|
|
|
18815
|
-
|
|
18816
|
-
|
|
18817
|
-
flex-direction: column-reverse;
|
|
18818
|
-
}
|
|
18819
|
-
|
|
18820
|
-
:host([reverse][layout="row"]) .container {
|
|
18821
|
-
flex-direction: row-reverse;
|
|
18822
|
-
}
|
|
18823
|
-
|
|
18824
|
-
:host([reverse][layout="wrap"]) .container {
|
|
18825
|
-
flex-direction: row-reverse;
|
|
18826
|
-
flex-wrap: wrap-reverse;
|
|
18827
|
-
}
|
|
18828
|
-
|
|
18829
|
-
/* Grid + reverse: fall back to flex so the 2D order truly reverses.
|
|
18830
|
-
Trade-off: last row no longer aligns to grid track. */
|
|
18831
|
-
:host([reverse][layout="grid"]) .container {
|
|
18832
|
-
display: flex;
|
|
18833
|
-
flex-direction: row-reverse;
|
|
18834
|
-
flex-wrap: wrap-reverse;
|
|
18835
|
-
}
|
|
18836
|
-
:host([reverse][layout="grid"]) ::slotted(*) {
|
|
18837
|
-
flex-grow: 1;
|
|
18838
|
-
flex-shrink: 1;
|
|
18839
|
-
flex-basis: var(--_min-column-width);
|
|
18840
|
-
min-width: 0;
|
|
18841
|
-
}
|
|
18842
|
-
:host([reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18843
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18844
|
-
}
|
|
18845
|
-
|
|
18846
|
-
/* layout="columns" + reverse: intentional no-op (multicol has no
|
|
18847
|
-
item-order hook). */
|
|
18848
|
-
|
|
18849
|
-
|
|
18850
|
-
/* # Reverse — sm scope */
|
|
18851
|
-
|
|
18852
|
-
@media (max-width: ${smMax$6}) {
|
|
18853
|
-
:host([sm-reverse]:not([layout])) .container,
|
|
18854
|
-
:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18855
|
-
:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18856
|
-
:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18857
|
-
:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18858
|
-
:host([sm-reverse][layout="grid"]) ::slotted(*) {
|
|
18859
|
-
flex-grow: 1;
|
|
18860
|
-
flex-shrink: 1;
|
|
18861
|
-
flex-basis: var(--_min-column-width);
|
|
18862
|
-
min-width: 0;
|
|
18863
|
-
}
|
|
18864
|
-
:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18865
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18866
|
-
}
|
|
18867
|
-
}
|
|
18868
|
-
|
|
18869
|
-
@container layout-container (max-width: ${smMax$6}) {
|
|
18870
|
-
:host([sm-reverse]:not([layout])) .container,
|
|
18871
|
-
:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18872
|
-
:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18873
|
-
:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18874
|
-
:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18875
|
-
:host([sm-reverse][layout="grid"]) ::slotted(*) {
|
|
18876
|
-
flex-grow: 1;
|
|
18877
|
-
flex-shrink: 1;
|
|
18878
|
-
flex-basis: var(--_min-column-width);
|
|
18879
|
-
min-width: 0;
|
|
18880
|
-
}
|
|
18881
|
-
:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18882
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18883
|
-
}
|
|
18884
|
-
}
|
|
18885
|
-
|
|
18886
|
-
|
|
18887
|
-
/* # Reverse — md scope */
|
|
18888
|
-
|
|
18889
|
-
@media (min-width: ${mdMin$5}) and (max-width: ${mdMax$2}) {
|
|
18890
|
-
:host([md-reverse]:not([layout])) .container,
|
|
18891
|
-
:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18892
|
-
:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18893
|
-
:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18894
|
-
:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18895
|
-
:host([md-reverse][layout="grid"]) ::slotted(*) {
|
|
18896
|
-
flex-grow: 1;
|
|
18897
|
-
flex-shrink: 1;
|
|
18898
|
-
flex-basis: var(--_min-column-width);
|
|
18899
|
-
min-width: 0;
|
|
18900
|
-
}
|
|
18901
|
-
:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18902
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18903
|
-
}
|
|
18823
|
+
::slotted(*) {
|
|
18824
|
+
order: var(--_slot-order, 0);
|
|
18904
18825
|
}
|
|
18905
18826
|
|
|
18906
|
-
@container
|
|
18907
|
-
:
|
|
18908
|
-
:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18909
|
-
:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18910
|
-
:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18911
|
-
:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18912
|
-
:host([md-reverse][layout="grid"]) ::slotted(*) {
|
|
18913
|
-
flex-grow: 1;
|
|
18914
|
-
flex-shrink: 1;
|
|
18915
|
-
flex-basis: var(--_min-column-width);
|
|
18916
|
-
min-width: 0;
|
|
18917
|
-
}
|
|
18918
|
-
:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18919
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18920
|
-
}
|
|
18827
|
+
@container (max-width: ${smMax$6}) {
|
|
18828
|
+
::slotted(*) { order: var(--_slot-sm-order, var(--_slot-order, 0)); }
|
|
18921
18829
|
}
|
|
18922
18830
|
|
|
18923
|
-
|
|
18924
|
-
|
|
18925
|
-
|
|
18926
|
-
@media (min-width: ${lgMin$3}) {
|
|
18927
|
-
:host([lg-reverse]:not([layout])) .container,
|
|
18928
|
-
:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18929
|
-
:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18930
|
-
:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18931
|
-
:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18932
|
-
:host([lg-reverse][layout="grid"]) ::slotted(*) {
|
|
18933
|
-
flex-grow: 1;
|
|
18934
|
-
flex-shrink: 1;
|
|
18935
|
-
flex-basis: var(--_min-column-width);
|
|
18936
|
-
min-width: 0;
|
|
18937
|
-
}
|
|
18938
|
-
:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18939
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18940
|
-
}
|
|
18831
|
+
@container (min-width: ${mdMin$5}) and (max-width: ${mdMax$2}) {
|
|
18832
|
+
::slotted(*) { order: var(--_slot-md-order, var(--_slot-order, 0)); }
|
|
18941
18833
|
}
|
|
18942
18834
|
|
|
18943
|
-
@container
|
|
18944
|
-
:
|
|
18945
|
-
:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
18946
|
-
:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
18947
|
-
:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18948
|
-
:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
18949
|
-
:host([lg-reverse][layout="grid"]) ::slotted(*) {
|
|
18950
|
-
flex-grow: 1;
|
|
18951
|
-
flex-shrink: 1;
|
|
18952
|
-
flex-basis: var(--_min-column-width);
|
|
18953
|
-
min-width: 0;
|
|
18954
|
-
}
|
|
18955
|
-
:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
18956
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
18957
|
-
}
|
|
18835
|
+
@container (min-width: ${lgMin$3}) {
|
|
18836
|
+
::slotted(*) { order: var(--_slot-lg-order, var(--_slot-order, 0)); }
|
|
18958
18837
|
}
|
|
18959
18838
|
`;
|
|
18960
|
-
function containerTemplate(
|
|
18961
|
-
return html`<div class="container"><slot></slot></div>`;
|
|
18839
|
+
function containerTemplate(component) {
|
|
18840
|
+
return html`<div class="container"><slot @slotchange=${component._onSlotChange}></slot></div>`;
|
|
18962
18841
|
}
|
|
18963
18842
|
var __defProp$o = Object.defineProperty;
|
|
18964
18843
|
var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
|
|
@@ -18980,6 +18859,7 @@ const VERTICAL_TO_FLEX = {
|
|
|
18980
18859
|
center: "center",
|
|
18981
18860
|
bottom: "flex-end"
|
|
18982
18861
|
};
|
|
18862
|
+
const ORDER_ATTRS = ["order", "sm-order", "md-order", "lg-order"];
|
|
18983
18863
|
function sizeToValue(size2) {
|
|
18984
18864
|
if (size2 === void 0) return null;
|
|
18985
18865
|
if (size2 === "0") return "0";
|
|
@@ -18988,10 +18868,6 @@ function sizeToValue(size2) {
|
|
|
18988
18868
|
let NLDDContainer = class extends LitElement {
|
|
18989
18869
|
constructor() {
|
|
18990
18870
|
super(...arguments);
|
|
18991
|
-
this.reverse = false;
|
|
18992
|
-
this.smReverse = false;
|
|
18993
|
-
this.mdReverse = false;
|
|
18994
|
-
this.lgReverse = false;
|
|
18995
18871
|
this.horizontalAlignment = void 0;
|
|
18996
18872
|
this.verticalAlignment = void 0;
|
|
18997
18873
|
this.gap = void 0;
|
|
@@ -19026,6 +18902,20 @@ let NLDDContainer = class extends LitElement {
|
|
|
19026
18902
|
this.lgPaddingRight = void 0;
|
|
19027
18903
|
this.lgPaddingBottom = void 0;
|
|
19028
18904
|
this.lgPaddingLeft = void 0;
|
|
18905
|
+
this._onSlotChange = (e) => {
|
|
18906
|
+
const slot = e.target;
|
|
18907
|
+
this._childObserver?.disconnect();
|
|
18908
|
+
this._childObserver = new MutationObserver((muts) => {
|
|
18909
|
+
for (const m of muts) {
|
|
18910
|
+
if (m.target instanceof HTMLElement) this._applyOrderProps(m.target);
|
|
18911
|
+
}
|
|
18912
|
+
});
|
|
18913
|
+
for (const el of slot.assignedElements()) {
|
|
18914
|
+
if (!(el instanceof HTMLElement)) continue;
|
|
18915
|
+
this._applyOrderProps(el);
|
|
18916
|
+
this._childObserver.observe(el, { attributes: true, attributeFilter: [...ORDER_ATTRS] });
|
|
18917
|
+
}
|
|
18918
|
+
};
|
|
19029
18919
|
}
|
|
19030
18920
|
updated(_changed) {
|
|
19031
18921
|
this.writeCustomProperties();
|
|
@@ -19079,26 +18969,27 @@ let NLDDContainer = class extends LitElement {
|
|
|
19079
18969
|
const left = get("PaddingLeft") ?? inline ?? all;
|
|
19080
18970
|
return [top, right, bottom, left];
|
|
19081
18971
|
}
|
|
18972
|
+
disconnectedCallback() {
|
|
18973
|
+
super.disconnectedCallback();
|
|
18974
|
+
this._childObserver?.disconnect();
|
|
18975
|
+
this._childObserver = void 0;
|
|
18976
|
+
}
|
|
18977
|
+
_applyOrderProps(el) {
|
|
18978
|
+
for (const attr of ORDER_ATTRS) {
|
|
18979
|
+
const v = el.getAttribute(attr);
|
|
18980
|
+
const prop = `--_slot-${attr}`;
|
|
18981
|
+
if (v !== null) el.style.setProperty(prop, v);
|
|
18982
|
+
else el.style.removeProperty(prop);
|
|
18983
|
+
}
|
|
18984
|
+
}
|
|
19082
18985
|
render() {
|
|
19083
|
-
return containerTemplate();
|
|
18986
|
+
return containerTemplate(this);
|
|
19084
18987
|
}
|
|
19085
18988
|
};
|
|
19086
18989
|
NLDDContainer.styles = containerStyles;
|
|
19087
18990
|
__decorateClass$p([
|
|
19088
18991
|
property({ type: String, reflect: true })
|
|
19089
18992
|
], NLDDContainer.prototype, "layout", 2);
|
|
19090
|
-
__decorateClass$p([
|
|
19091
|
-
property({ type: Boolean, reflect: true })
|
|
19092
|
-
], NLDDContainer.prototype, "reverse", 2);
|
|
19093
|
-
__decorateClass$p([
|
|
19094
|
-
property({ type: Boolean, reflect: true, attribute: "sm-reverse" })
|
|
19095
|
-
], NLDDContainer.prototype, "smReverse", 2);
|
|
19096
|
-
__decorateClass$p([
|
|
19097
|
-
property({ type: Boolean, reflect: true, attribute: "md-reverse" })
|
|
19098
|
-
], NLDDContainer.prototype, "mdReverse", 2);
|
|
19099
|
-
__decorateClass$p([
|
|
19100
|
-
property({ type: Boolean, reflect: true, attribute: "lg-reverse" })
|
|
19101
|
-
], NLDDContainer.prototype, "lgReverse", 2);
|
|
19102
18993
|
__decorateClass$p([
|
|
19103
18994
|
property({ type: Number, reflect: true, attribute: "column-count" })
|
|
19104
18995
|
], NLDDContainer.prototype, "columnCount", 2);
|
|
@@ -22924,7 +22815,7 @@ const breadcrumbsStyles = css`
|
|
|
22924
22815
|
}
|
|
22925
22816
|
|
|
22926
22817
|
.breadcrumbs {
|
|
22927
|
-
display:
|
|
22818
|
+
display: flex;
|
|
22928
22819
|
}
|
|
22929
22820
|
|
|
22930
22821
|
.breadcrumbs__items {
|
|
@@ -26,20 +26,17 @@
|
|
|
26
26
|
* - `grid`: horizontal = justify-items, vertical = align-items (per cell)
|
|
27
27
|
* - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment)
|
|
28
28
|
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* `sm-reverse` / `md-reverse` / `lg-reverse` enable reverse only at that
|
|
41
|
-
* breakpoint. Combine with the base `reverse` (always on) or use the
|
|
42
|
-
* scoped ones independently.
|
|
29
|
+
* Item order is set per-child via attributes on the slotted children
|
|
30
|
+
* themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">`
|
|
31
|
+
* / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint
|
|
32
|
+
* (resolved against THIS container's width via @container queries, same scope
|
|
33
|
+
* as the responsive padding/gap). The container observes slot changes and
|
|
34
|
+
* child attribute mutations and bridges these to `--_slot-order` /
|
|
35
|
+
* `--_slot-sm-order` / etc. custom properties on each child's inline style,
|
|
36
|
+
* which the container's CSS then reads via `::slotted(*)` inside @container
|
|
37
|
+
* queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm
|
|
38
|
+
* (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has
|
|
39
|
+
* no per-item ordering hook).
|
|
43
40
|
*
|
|
44
41
|
* The `column-count` attribute (1-8) forces an exact column count for
|
|
45
42
|
* `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides
|
|
@@ -52,10 +49,6 @@
|
|
|
52
49
|
* @element nldd-container
|
|
53
50
|
*
|
|
54
51
|
* @attr {string} layout - 'stack' | 'row' | 'wrap' | 'grid' | 'columns' (default: 'stack')
|
|
55
|
-
* @attr {boolean} reverse - Reverse the visual order of items
|
|
56
|
-
* @attr {boolean} sm-reverse - Reverse only at the sm breakpoint
|
|
57
|
-
* @attr {boolean} md-reverse - Reverse only at the md breakpoint
|
|
58
|
-
* @attr {boolean} lg-reverse - Reverse only at the lg breakpoint
|
|
59
52
|
* @attr {number} column-count - Force N columns (1-8) for layout=grid/columns
|
|
60
53
|
* @attr {number} sm-column-count - Column count when this container is sm-wide
|
|
61
54
|
* @attr {number} md-column-count - Column count when this container is md-wide
|
|
@@ -89,10 +82,6 @@ type VerticalAlignment = 'top' | 'center' | 'bottom';
|
|
|
89
82
|
export declare class NLDDContainer extends LitElement {
|
|
90
83
|
static styles: import("lit").CSSResult;
|
|
91
84
|
layout?: Layout;
|
|
92
|
-
reverse: boolean;
|
|
93
|
-
smReverse: boolean;
|
|
94
|
-
mdReverse: boolean;
|
|
95
|
-
lgReverse: boolean;
|
|
96
85
|
columnCount?: ColumnCount;
|
|
97
86
|
smColumnCount?: ColumnCount;
|
|
98
87
|
mdColumnCount?: ColumnCount;
|
|
@@ -134,6 +123,10 @@ export declare class NLDDContainer extends LitElement {
|
|
|
134
123
|
updated(_changed: PropertyValues): void;
|
|
135
124
|
private writeCustomProperties;
|
|
136
125
|
private resolvePadding;
|
|
126
|
+
private _childObserver?;
|
|
127
|
+
disconnectedCallback(): void;
|
|
128
|
+
_onSlotChange: (e: Event) => void;
|
|
129
|
+
private _applyOrderProps;
|
|
137
130
|
render(): import("lit-html").TemplateResult;
|
|
138
131
|
}
|
|
139
132
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.ts"],"names":[],"mappings":"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"}
|
|
@@ -32,20 +32,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
32
32
|
* - `grid`: horizontal = justify-items, vertical = align-items (per cell)
|
|
33
33
|
* - `columns`: alignment props have no effect (CSS multicol doesn't expose alignment)
|
|
34
34
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* `sm-reverse` / `md-reverse` / `lg-reverse` enable reverse only at that
|
|
47
|
-
* breakpoint. Combine with the base `reverse` (always on) or use the
|
|
48
|
-
* scoped ones independently.
|
|
35
|
+
* Item order is set per-child via attributes on the slotted children
|
|
36
|
+
* themselves: `<child order="3">` for a fixed position, or `<child sm-order="N">`
|
|
37
|
+
* / `<child md-order="N">` / `<child lg-order="N">` to override per breakpoint
|
|
38
|
+
* (resolved against THIS container's width via @container queries, same scope
|
|
39
|
+
* as the responsive padding/gap). The container observes slot changes and
|
|
40
|
+
* child attribute mutations and bridges these to `--_slot-order` /
|
|
41
|
+
* `--_slot-sm-order` / etc. custom properties on each child's inline style,
|
|
42
|
+
* which the container's CSS then reads via `::slotted(*)` inside @container
|
|
43
|
+
* queries. Cascade: `sm-order` falls back to `order` falls back to `0` at sm
|
|
44
|
+
* (and analogously for md/lg). No-op for `layout="columns"` (CSS multicol has
|
|
45
|
+
* no per-item ordering hook).
|
|
49
46
|
*
|
|
50
47
|
* The `column-count` attribute (1-8) forces an exact column count for
|
|
51
48
|
* `layout="grid"` (overrides auto-fit) and `layout="columns"` (overrides
|
|
@@ -58,10 +55,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
58
55
|
* @element nldd-container
|
|
59
56
|
*
|
|
60
57
|
* @attr {string} layout - 'stack' | 'row' | 'wrap' | 'grid' | 'columns' (default: 'stack')
|
|
61
|
-
* @attr {boolean} reverse - Reverse the visual order of items
|
|
62
|
-
* @attr {boolean} sm-reverse - Reverse only at the sm breakpoint
|
|
63
|
-
* @attr {boolean} md-reverse - Reverse only at the md breakpoint
|
|
64
|
-
* @attr {boolean} lg-reverse - Reverse only at the lg breakpoint
|
|
65
58
|
* @attr {number} column-count - Force N columns (1-8) for layout=grid/columns
|
|
66
59
|
* @attr {number} sm-column-count - Column count when this container is sm-wide
|
|
67
60
|
* @attr {number} md-column-count - Column count when this container is md-wide
|
|
@@ -100,6 +93,7 @@ const VERTICAL_TO_FLEX = {
|
|
|
100
93
|
center: 'center',
|
|
101
94
|
bottom: 'flex-end',
|
|
102
95
|
};
|
|
96
|
+
const ORDER_ATTRS = ['order', 'sm-order', 'md-order', 'lg-order'];
|
|
103
97
|
function sizeToValue(size) {
|
|
104
98
|
if (size === undefined)
|
|
105
99
|
return null;
|
|
@@ -110,17 +104,6 @@ function sizeToValue(size) {
|
|
|
110
104
|
let NLDDContainer = class NLDDContainer extends LitElement {
|
|
111
105
|
constructor() {
|
|
112
106
|
super(...arguments);
|
|
113
|
-
// Reverse the visual order of items within the chosen layout. For
|
|
114
|
-
// stack/row/wrap this is native flex-direction reverse (+ wrap-reverse
|
|
115
|
-
// for the 2D wrap case). For grid the host falls back to flex with
|
|
116
|
-
// wrap-reverse so 2D reversal works; the trade-off is that the last
|
|
117
|
-
// row no longer aligns to the grid track. For columns reverse is a
|
|
118
|
-
// no-op — multicol items flow top→bottom inside each column with no
|
|
119
|
-
// CSS hook to invert that.
|
|
120
|
-
this.reverse = false;
|
|
121
|
-
this.smReverse = false;
|
|
122
|
-
this.mdReverse = false;
|
|
123
|
-
this.lgReverse = false;
|
|
124
107
|
this.horizontalAlignment = undefined;
|
|
125
108
|
this.verticalAlignment = undefined;
|
|
126
109
|
this.gap = undefined;
|
|
@@ -155,6 +138,22 @@ let NLDDContainer = class NLDDContainer extends LitElement {
|
|
|
155
138
|
this.lgPaddingRight = undefined;
|
|
156
139
|
this.lgPaddingBottom = undefined;
|
|
157
140
|
this.lgPaddingLeft = undefined;
|
|
141
|
+
this._onSlotChange = (e) => {
|
|
142
|
+
const slot = e.target;
|
|
143
|
+
this._childObserver?.disconnect();
|
|
144
|
+
this._childObserver = new MutationObserver(muts => {
|
|
145
|
+
for (const m of muts) {
|
|
146
|
+
if (m.target instanceof HTMLElement)
|
|
147
|
+
this._applyOrderProps(m.target);
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
for (const el of slot.assignedElements()) {
|
|
151
|
+
if (!(el instanceof HTMLElement))
|
|
152
|
+
continue;
|
|
153
|
+
this._applyOrderProps(el);
|
|
154
|
+
this._childObserver.observe(el, { attributes: true, attributeFilter: [...ORDER_ATTRS] });
|
|
155
|
+
}
|
|
156
|
+
};
|
|
158
157
|
}
|
|
159
158
|
updated(_changed) {
|
|
160
159
|
this.writeCustomProperties();
|
|
@@ -168,12 +167,9 @@ let NLDDContainer = class NLDDContainer extends LitElement {
|
|
|
168
167
|
};
|
|
169
168
|
// Alignment maps to a different CSS property depending on the
|
|
170
169
|
// layout's axes:
|
|
171
|
-
// - Row/wrap (
|
|
172
|
-
//
|
|
173
|
-
// -
|
|
174
|
-
// horizontal = align-items (cross), vertical = justify-content (main)
|
|
175
|
-
// - Grid (non-reverse): per-cell —
|
|
176
|
-
// horizontal = justify-items, vertical = align-items
|
|
170
|
+
// - Row/wrap: horizontal = justify-content (main), vertical = align-items (cross)
|
|
171
|
+
// - Stack (flex column): horizontal = align-items (cross), vertical = justify-content (main)
|
|
172
|
+
// - Grid: per-cell — horizontal = justify-items, vertical = align-items
|
|
177
173
|
// We set --_justify-content/--_justify-items/--_align-items
|
|
178
174
|
// independently; the .container picks up whichever applies to its
|
|
179
175
|
// current display. Columns layout has no alignment hooks.
|
|
@@ -223,6 +219,21 @@ let NLDDContainer = class NLDDContainer extends LitElement {
|
|
|
223
219
|
const left = get('PaddingLeft') ?? inline ?? all;
|
|
224
220
|
return [top, right, bottom, left];
|
|
225
221
|
}
|
|
222
|
+
disconnectedCallback() {
|
|
223
|
+
super.disconnectedCallback();
|
|
224
|
+
this._childObserver?.disconnect();
|
|
225
|
+
this._childObserver = undefined;
|
|
226
|
+
}
|
|
227
|
+
_applyOrderProps(el) {
|
|
228
|
+
for (const attr of ORDER_ATTRS) {
|
|
229
|
+
const v = el.getAttribute(attr);
|
|
230
|
+
const prop = `--_slot-${attr}`;
|
|
231
|
+
if (v !== null)
|
|
232
|
+
el.style.setProperty(prop, v);
|
|
233
|
+
else
|
|
234
|
+
el.style.removeProperty(prop);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
226
237
|
render() {
|
|
227
238
|
return containerTemplate(this);
|
|
228
239
|
}
|
|
@@ -231,18 +242,6 @@ NLDDContainer.styles = containerStyles;
|
|
|
231
242
|
__decorate([
|
|
232
243
|
property({ type: String, reflect: true })
|
|
233
244
|
], NLDDContainer.prototype, "layout", void 0);
|
|
234
|
-
__decorate([
|
|
235
|
-
property({ type: Boolean, reflect: true })
|
|
236
|
-
], NLDDContainer.prototype, "reverse", void 0);
|
|
237
|
-
__decorate([
|
|
238
|
-
property({ type: Boolean, reflect: true, attribute: 'sm-reverse' })
|
|
239
|
-
], NLDDContainer.prototype, "smReverse", void 0);
|
|
240
|
-
__decorate([
|
|
241
|
-
property({ type: Boolean, reflect: true, attribute: 'md-reverse' })
|
|
242
|
-
], NLDDContainer.prototype, "mdReverse", void 0);
|
|
243
|
-
__decorate([
|
|
244
|
-
property({ type: Boolean, reflect: true, attribute: 'lg-reverse' })
|
|
245
|
-
], NLDDContainer.prototype, "lgReverse", void 0);
|
|
246
245
|
__decorate([
|
|
247
246
|
property({ type: Number, reflect: true, attribute: 'column-count' })
|
|
248
247
|
], NLDDContainer.prototype, "columnCount", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.ts"],"names":[],"mappings":";;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,yBAkO3B,CAAC"}
|
|
@@ -34,6 +34,10 @@ export const containerStyles = css `
|
|
|
34
34
|
--_lg-padding-right: var(--_padding-right);
|
|
35
35
|
--_lg-padding-bottom: var(--_padding-bottom);
|
|
36
36
|
--_lg-padding-left: var(--_padding-left);
|
|
37
|
+
--_slot-order: 0;
|
|
38
|
+
--_slot-sm-order: var(--_slot-order);
|
|
39
|
+
--_slot-md-order: var(--_slot-order);
|
|
40
|
+
--_slot-lg-order: var(--_slot-order);
|
|
37
41
|
|
|
38
42
|
container-type: inline-size;
|
|
39
43
|
display: block;
|
|
@@ -205,151 +209,26 @@ export const containerStyles = css `
|
|
|
205
209
|
}
|
|
206
210
|
|
|
207
211
|
|
|
208
|
-
/* #
|
|
212
|
+
/* # Slot order — per-child via order / sm-order / md-order / lg-order
|
|
213
|
+
attributes on slotted children. Container JS bridges those to
|
|
214
|
+
--_slot-{attr} inline custom props on the child; the queries below
|
|
215
|
+
pick the right value per breakpoint with var() cascading
|
|
216
|
+
sm/md/lg-order → order → 0. No-op for layout="columns" (multicol). */
|
|
209
217
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
flex-direction: column-reverse;
|
|
218
|
+
::slotted(*) {
|
|
219
|
+
order: var(--_slot-order, 0);
|
|
213
220
|
}
|
|
214
221
|
|
|
215
|
-
:
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
:host([reverse][layout="wrap"]) .container {
|
|
220
|
-
flex-direction: row-reverse;
|
|
221
|
-
flex-wrap: wrap-reverse;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
/* Grid + reverse: fall back to flex so the 2D order truly reverses.
|
|
225
|
-
Trade-off: last row no longer aligns to grid track. */
|
|
226
|
-
:host([reverse][layout="grid"]) .container {
|
|
227
|
-
display: flex;
|
|
228
|
-
flex-direction: row-reverse;
|
|
229
|
-
flex-wrap: wrap-reverse;
|
|
230
|
-
}
|
|
231
|
-
:host([reverse][layout="grid"]) ::slotted(*) {
|
|
232
|
-
flex-grow: 1;
|
|
233
|
-
flex-shrink: 1;
|
|
234
|
-
flex-basis: var(--_min-column-width);
|
|
235
|
-
min-width: 0;
|
|
236
|
-
}
|
|
237
|
-
:host([reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
238
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/* layout="columns" + reverse: intentional no-op (multicol has no
|
|
242
|
-
item-order hook). */
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
/* # Reverse — sm scope */
|
|
246
|
-
|
|
247
|
-
@media (max-width: ${smMax}) {
|
|
248
|
-
:host([sm-reverse]:not([layout])) .container,
|
|
249
|
-
:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
250
|
-
:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
251
|
-
:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
252
|
-
:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
253
|
-
:host([sm-reverse][layout="grid"]) ::slotted(*) {
|
|
254
|
-
flex-grow: 1;
|
|
255
|
-
flex-shrink: 1;
|
|
256
|
-
flex-basis: var(--_min-column-width);
|
|
257
|
-
min-width: 0;
|
|
258
|
-
}
|
|
259
|
-
:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
260
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
@container layout-container (max-width: ${smMax}) {
|
|
265
|
-
:host([sm-reverse]:not([layout])) .container,
|
|
266
|
-
:host([sm-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
267
|
-
:host([sm-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
268
|
-
:host([sm-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
269
|
-
:host([sm-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
270
|
-
:host([sm-reverse][layout="grid"]) ::slotted(*) {
|
|
271
|
-
flex-grow: 1;
|
|
272
|
-
flex-shrink: 1;
|
|
273
|
-
flex-basis: var(--_min-column-width);
|
|
274
|
-
min-width: 0;
|
|
275
|
-
}
|
|
276
|
-
:host([sm-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
277
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
/* # Reverse — md scope */
|
|
283
|
-
|
|
284
|
-
@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
|
|
285
|
-
:host([md-reverse]:not([layout])) .container,
|
|
286
|
-
:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
287
|
-
:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
288
|
-
:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
289
|
-
:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
290
|
-
:host([md-reverse][layout="grid"]) ::slotted(*) {
|
|
291
|
-
flex-grow: 1;
|
|
292
|
-
flex-shrink: 1;
|
|
293
|
-
flex-basis: var(--_min-column-width);
|
|
294
|
-
min-width: 0;
|
|
295
|
-
}
|
|
296
|
-
:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
297
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
|
|
302
|
-
:host([md-reverse]:not([layout])) .container,
|
|
303
|
-
:host([md-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
304
|
-
:host([md-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
305
|
-
:host([md-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
306
|
-
:host([md-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
307
|
-
:host([md-reverse][layout="grid"]) ::slotted(*) {
|
|
308
|
-
flex-grow: 1;
|
|
309
|
-
flex-shrink: 1;
|
|
310
|
-
flex-basis: var(--_min-column-width);
|
|
311
|
-
min-width: 0;
|
|
312
|
-
}
|
|
313
|
-
:host([md-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
314
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
315
|
-
}
|
|
222
|
+
@container (max-width: ${smMax}) {
|
|
223
|
+
::slotted(*) { order: var(--_slot-sm-order, var(--_slot-order, 0)); }
|
|
316
224
|
}
|
|
317
225
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
@media (min-width: ${lgMin}) {
|
|
322
|
-
:host([lg-reverse]:not([layout])) .container,
|
|
323
|
-
:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
324
|
-
:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
325
|
-
:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
326
|
-
:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
327
|
-
:host([lg-reverse][layout="grid"]) ::slotted(*) {
|
|
328
|
-
flex-grow: 1;
|
|
329
|
-
flex-shrink: 1;
|
|
330
|
-
flex-basis: var(--_min-column-width);
|
|
331
|
-
min-width: 0;
|
|
332
|
-
}
|
|
333
|
-
:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
334
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
335
|
-
}
|
|
226
|
+
@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
|
|
227
|
+
::slotted(*) { order: var(--_slot-md-order, var(--_slot-order, 0)); }
|
|
336
228
|
}
|
|
337
229
|
|
|
338
|
-
@container
|
|
339
|
-
:
|
|
340
|
-
:host([lg-reverse][layout="stack"]) .container { flex-direction: column-reverse; }
|
|
341
|
-
:host([lg-reverse][layout="row"]) .container { flex-direction: row-reverse; }
|
|
342
|
-
:host([lg-reverse][layout="wrap"]) .container { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
343
|
-
:host([lg-reverse][layout="grid"]) .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
|
|
344
|
-
:host([lg-reverse][layout="grid"]) ::slotted(*) {
|
|
345
|
-
flex-grow: 1;
|
|
346
|
-
flex-shrink: 1;
|
|
347
|
-
flex-basis: var(--_min-column-width);
|
|
348
|
-
min-width: 0;
|
|
349
|
-
}
|
|
350
|
-
:host([lg-reverse][layout="grid"][column-count]) ::slotted(*) {
|
|
351
|
-
flex-basis: calc((100% - (var(--_column-count) - 1) * var(--_gap)) / var(--_column-count));
|
|
352
|
-
}
|
|
230
|
+
@container (min-width: ${lgMin}) {
|
|
231
|
+
::slotted(*) { order: var(--_slot-lg-order, var(--_slot-order, 0)); }
|
|
353
232
|
}
|
|
354
233
|
`;
|
|
355
234
|
//# sourceMappingURL=container.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2CX,KAAK;;;;;;;uBAOL,KAAK,qBAAqB,KAAK;;;;;;;uBAO/B,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;4CAOL,KAAK,qBAAqB,KAAK;;;;;;;4CAO/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwB1B,KAAK;uBACL,KAAK,qBAAqB,KAAK;uBAC/B,KAAK;;4CAEgB,KAAK;4CACL,KAAK,qBAAqB,KAAK;4CAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsDvB,KAAK;;;;;;;;;;;;;;;0BAeL,KAAK,qBAAqB,KAAK;;;;;;;;;;;;;;;0BAe/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;0BAuBL,KAAK;;;;0BAIL,KAAK,qBAAqB,KAAK;;;;0BAI/B,KAAK;;;CAG9B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import type { NLDDContainer } from './container.js';
|
|
3
|
-
export declare function containerTemplate(
|
|
3
|
+
export declare function containerTemplate(component: NLDDContainer): TemplateResult;
|
|
4
4
|
//# sourceMappingURL=container.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,wBAAgB,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"container.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAM1E"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
|
-
export function containerTemplate(
|
|
2
|
+
export function containerTemplate(component) {
|
|
3
3
|
// Inner .container holds the layout (display, grid, flex, columns). The
|
|
4
4
|
// :host stays the padding wrapper + the query container (container-type:
|
|
5
5
|
// inline-size). CSS spec forbids an element from matching its own
|
|
6
6
|
// container queries, so the layout rules live on a descendant of :host.
|
|
7
|
-
return html `<div class="container"><slot></slot></div>`;
|
|
7
|
+
return html `<div class="container"><slot @slotchange=${component._onSlotChange}></slot></div>`;
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=container.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.template.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"container.template.js","sourceRoot":"","sources":["../../../../src/components/layout/container/container.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,wEAAwE;IACxE,yEAAyE;IACzE,kEAAkE;IAClE,wEAAwE;IACxE,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,aAAa,gBAAgB,CAAC;AAChG,CAAC"}
|