dap-design-system/dist/components/stack/stack.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as h } from "../../node_modules/lit-html/static.js";
import { DdsElement as l } from "../../internal/dds-hu-element.js";
import f from "./stack.scss.js";
import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (m, r, s, i) => {
  for (var t = i > 1 ? void 0 : i ? y(r, s) : r, p = m.length - 1, c; p >= 0; p--)
    (c = m[p]) && (t = (i ? c(r, s, t) : c(t)) || t);
  return i && t && v(r, s, t), t;
};
const o = class o extends l {
  constructor() {
    super(...arguments), this.direction = "column", this.endMargin = !1, this.startMargin = !1;
  }
  set spacing(r) {
    this._spacing = r;
  }
  get spacing() {
    return !this._spacing && this._spacing !== 0 && (this.direction === "column" || this.direction === "column-reverse") ? 600 : !this._spacing && this._spacing !== 0 && (this.direction === "row" || this.direction === "row-reverse") ? 200 : this._spacing;
  }
  getMarginStyles(r, s, i, t) {
    return r === "row" || r === "row-reverse" ? `margin-left: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-right: ${t ? `var(--dds-spacing-${s})` : "0"};` : `margin-top: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-bottom: ${t ? `var(--dds-spacing-${s})` : "0"};`;
  }
  render() {
    return h`
      <div
        class=${g("stack", `stack-gap-${this.spacing}`, {
      [`stack-direction-${this.direction}`]: this.direction
    })}
        part="base"
        style=${d(
      this.getMarginStyles(
        this.direction,
        this.spacing,
        this.startMargin,
        this.endMargin
      )
    )}>
        <slot></slot>
      </div>
    `;
  }
};
o.tagName = "dap-ds-stack", o.styles = u(f);
let e = o;
a([
  n()
], e.prototype, "direction", 2);
a([
  n({ type: Boolean })
], e.prototype, "endMargin", 2);
a([
  n({ type: Boolean })
], e.prototype, "startMargin", 2);
a([
  n({ type: Number })
], e.prototype, "spacing", 1);
export {
  e as default
};
//# sourceMappingURL=stack.component.js.map