https://www.principalam.com/profiles/contrib/houston/modules/pfg_p…/pds-components/grid.B-TWNqqL.js

1import { b as o } from "./lit-element.chunk-B6Olh1kf.js";
2import { n as g } from "./state.chunk-B35jHvjT.js";
3import { P as m, e as n } from "./PdsElement.chunk-BX0ldsof.js";
4import { pdsCustomElement as w } from "./pds-custom-element.C-DkuQLk.js";
5import "./grid-item.CsK3xRyO.js";
6const c = "*,::slotted(*),*:before,*:after{box-sizing:border-box}:host{display:block}.pds-l-grid{--gap-size: calc(var(--pds-base-unit) * 3);display:flex;flex-flow:column;gap:var(--gap-size)}.pds-l-grid--gap-none{--gap-size: 0;gap:var(--gap-size)}.pds-l-grid--gap-sm{--gap-size: calc(var(--pds-base-unit) * 1);gap:var(--gap-size)}.pds-l-grid--gap-lg{--gap-size: calc(var(--pds-base-unit) * 4);gap:var(--gap-size)}@media all and (min-width:1024px){.pds-l-grid--2up{flex-flow:row wrap}}@media all and (min-width:768px){.pds-l-grid--2up.pds-l-grid--break-faster{flex-flow:row wrap}}@media all and (min-width:768px){.pds-l-grid--1-3up{flex-flow:row wrap}}@media all and (min-width:540px){.pds-l-grid--1-3up.pds-l-grid--break-faster{flex-flow:row wrap}}@media all and (min-width:768px){.pds-l-grid--1-2-4up{flex-flow:row wrap}}@media all and (min-width:540px){.pds-l-grid--1-2-4up.pds-l-grid--break-faster{flex-flow:row wrap}}.pds-l-grid--side-by-side{flex-flow:row wrap}@media all and (min-width:768px){.pds-l-grid--3up{flex-flow:row wrap}}@media all and (min-width:540px){.pds-l-grid--3up.pds-l-grid--break-faster{flex-flow:row wrap}}::slotted(pds-grid-item){display:block;width:100%}@media all and (min-width:1024px){.pds-l-grid--2up>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:768px){.pds-l-grid--1-3up>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}@media all and (min-width:768px){.pds-l-grid--1-2-4up>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:1024px){.pds-l-grid--1-2-4up>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 3);width:calc((100% - var(--gap-total)) / 4)}}.pds-l-grid--side-by-side>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}@media all and (min-width:768px){.pds-l-grid--3up>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:1024px){.pds-l-grid--3up>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}.pds-l-grid--gap-none>::slotted(pds-grid-item){--gap-size: 0px}.pds-l-grid--gap-sm>::slotted(pds-grid-item){--gap-size: calc(var(--pds-base-unit) * 1)}.pds-l-grid--gap-lg>::slotted(pds-grid-item){--gap-size: calc(var(--pds-base-unit) * 4)}@media all and (min-width:768px){.pds-l-grid--2up.pds-l-grid--break-faster>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:1024px){.pds-l-grid--2up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:100%}}@media all and (min-width:1366px){.pds-l-grid--2up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:540px){.pds-l-grid--1-2-4up.pds-l-grid--break-faster>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:768px){.pds-l-grid--1-2-4up.pds-l-grid--break-faster>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 3);width:calc((100% - var(--gap-total)) / 4)}}@media all and (min-width:768px){.pds-l-grid--1-2-4up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:100%}}@media all and (min-width:1024px){.pds-l-grid--1-2-4up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:1366px){.pds-l-grid--1-2-4up.pds-l-grid--break-slower>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 3);width:calc((100% - var(--gap-total)) / 4)}}@media all and (min-width:540px){.pds-l-grid--1-3up.pds-l-grid--break-faster>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}@media all and (min-width:768px){.pds-l-grid--1-3up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:100%}}@media all and (min-width:1024px){.pds-l-grid--1-3up.pds-l-grid--break-slower>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}@media all and (min-width:540px){.pds-l-grid--3up.pds-l-grid--break-faster>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}@media all and (min-width:768px){.pds-l-grid--3up.pds-l-grid--break-faster>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}@media all and (min-width:1024px){.pds-l-grid--3up.pds-l-grid--break-slower>::slotted(pds-grid-item){width:calc((100% - var(--gap-size)) / 2)}}

6@media all and (min-width:1366px){.pds-l-grid--3up.pds-l-grid--break-slower>::slotted(pds-grid-item){--gap-total: calc(var(--gap-size) * 2);width:calc((100% - var(--gap-total)) / 3)}}";
7var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (i, l, r, p) => {
8  for (var d = p > 1 ? void 0 : p ? v(l, r) : l, s = i.length - 1, e; s >= 0; s--)
9    (e = i[s]) && (d = (p ? e(l, r, d) : e(d)) || d);
10  return p && d && h(l, r, d), d;
11};
12let a = class extends m {
13  constructor() {
14    super(...arguments), this.variant = "default", this.gap = "default", this.break = "default";
15  }
16  firstUpdated() {
17    super.firstUpdated(), this.handleSlotValidation();
18  }
19  render() {
20    const i = {
21      "pds-l-grid": !0,
22      [`pds-l-grid--${this.variant}`]: !!this.variant,
23      [`pds-l-grid--gap-${this.gap}`]: !!this.gap,
24      [`pds-l-grid--break-${this.break}`]: this.break
25    };
26    return o`<div class=${n(i)}>
27      <slot
28        allowed-elements="pds-grid-item"
29        @slotchange=${this.handleSlotValidation}
30      ></slot>
31    </div>`;
32  }
33};
34t([
35  g()
36], a.prototype, "variant", 2);
37t([
38  g()
39], a.prototype, "gap", 2);
40t([
41  g()
42], a.prototype, "break", 2);
43a = t([
44  w("pds-grid", {
45    category: "layout",
46    type: "component",
47    state: "stable",
48    styles: c
49  })
50], a);
51export {
52  a as PdsGrid
53};
54//# sourceMappingURL=grid.B-TWNqqL.js.map