@sebgroup/green-core 1.18.0 → 1.19.0

package/chunks/chunk.WIWIGJID.js

@@ -1,244 +0,0 @@
-import {
-  grid_style_css_default
-} from "./chunk.XMPBXAGB.js";
-import {
-  tokens
-} from "./chunk.MMVYFXTU.js";
-import {
-  watch
-} from "./chunk.2WO4NHJ2.js";
-import {
-  gdsCustomElement,
-  html
-} from "./chunk.VOYMQ322.js";
-import {
-  __decorateClass,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.5VURDMKE.js";
-
-// libs/core/src/components/grid/grid.ts
-import { css, LitElement, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
-var BreakpointPattern = new RegExp("(?<l>l:([a-z0-9]+))?\\s*(?<m>m:([a-z0-9]+))?\\s*(?<s>s:([a-z0-9]+))?");
-var GdsGrid = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._gridVariables = {
-      varsColumn: css``,
-      varsGap: css``,
-      varsRowGap: css``,
-      varsPadding: css``,
-      varsAutoColumns: css``
-    };
-  }
-  /**
-   * Lifecycle method called when the element is connected to the DOM.
-   * It updates the column, gap, and padding variables.
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this._updateColumnVariables();
-    this._updateGapVariables();
-    this._updateRowGapVariables();
-    this._updatePaddingVariables();
-    this._updateAutoColumnsVariables();
-  }
-  _updateColumnVariables() {
-    var _a;
-    const match = (_a = this.columns) == null ? void 0 : _a.match(BreakpointPattern);
-    let columnsDesktop, columnsTablet, columnsMobile;
-    if (this.columns && !isNaN(Number(this.columns))) {
-      columnsDesktop = columnsTablet = columnsMobile = Number(this.columns);
-    } else {
-      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
-      columnsDesktop = l ? Number(l.split(":")[1]) : void 0;
-      columnsTablet = m ? Number(m.split(":")[1]) : void 0;
-      columnsMobile = s ? Number(s.split(":")[1]) : void 0;
-    }
-    const columnProperties = [
-      { name: "_columns-desktop", value: columnsDesktop },
-      { name: "_columns-tablet", value: columnsTablet },
-      { name: "_columns-mobile", value: columnsMobile }
-    ];
-    const cssVariables = columnProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
-    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
-      varsColumn: css`
-        ${unsafeCSS(cssVariables)}
-      `
-    });
-    this.requestUpdate("_gridVariables");
-  }
-  _updateGapVariables() {
-    var _a;
-    const match = (_a = this.gap) == null ? void 0 : _a.match(BreakpointPattern);
-    let gapDesktop, gapTablet, gapMobile;
-    if (this.gap && !this.gap.includes(" ")) {
-      gapDesktop = gapTablet = gapMobile = `var(--gds-sys-grid-gap-${this.gap})`;
-    } else {
-      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
-      gapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
-      gapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
-      gapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
-    }
-    const gapProperties = [
-      { name: "_gap-desktop", value: gapDesktop },
-      { name: "_gap-tablet", value: gapTablet },
-      { name: "_gap-mobile", value: gapMobile }
-    ];
-    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
-    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
-      varsGap: css`
-        ${unsafeCSS(cssVariables)}
-      `
-    });
-    this.requestUpdate("_gridVariables");
-  }
-  _updateRowGapVariables() {
-    var _a;
-    const match = (_a = this.rowGap) == null ? void 0 : _a.match(BreakpointPattern);
-    let rowGapDesktop, rowGapTablet, rowGapMobile;
-    if (this.rowGap && !this.rowGap.includes(" ")) {
-      rowGapDesktop = rowGapTablet = rowGapMobile = `var(--gds-sys-grid-gap-${this.rowGap})`;
-    } else {
-      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
-      rowGapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
-      rowGapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
-      rowGapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
-    }
-    const gapProperties = [
-      { name: "_row-gap-desktop", value: rowGapDesktop },
-      { name: "_row-gap-tablet", value: rowGapTablet },
-      { name: "_row-gap-mobile", value: rowGapMobile }
-    ];
-    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
-    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
-      varsRowGap: css`
-        ${unsafeCSS(cssVariables)}
-      `
-    });
-    this.requestUpdate("_gridVariables");
-  }
-  _updatePaddingVariables() {
-    var _a;
-    const match = (_a = this.padding) == null ? void 0 : _a.match(BreakpointPattern);
-    let paddingDesktop, paddingTablet, paddingMobile;
-    if (this.padding && !this.padding.includes(" ")) {
-      paddingDesktop = paddingTablet = paddingMobile = `var(--gds-sys-grid-gap-${this.gap})`;
-    } else {
-      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
-      paddingDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
-      paddingTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
-      paddingMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
-    }
-    const paddingProperties = [
-      { name: "_padding-desktop", value: paddingDesktop },
-      { name: "_padding-tablet", value: paddingTablet },
-      { name: "_padding-mobile", value: paddingMobile }
-    ];
-    const cssVariables = paddingProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
-    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
-      varsPadding: css`
-        ${unsafeCSS(cssVariables)}
-      `
-    });
-    this.requestUpdate("_gridVariables");
-  }
-  _updateAutoColumnsVariables() {
-    var _a;
-    const match = (_a = this.autoColumns) == null ? void 0 : _a.match(BreakpointPattern);
-    let widthDesktop, widthTablet, widthMobile;
-    if (this.autoColumns && !this.autoColumns.includes(" ")) {
-      widthDesktop = widthTablet = widthMobile = `${this.autoColumns}px`;
-    } else {
-      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
-      widthDesktop = l ? `${l.split(":")[1]}px` : void 0;
-      widthTablet = m ? `${m.split(":")[1]}px` : void 0;
-      widthMobile = s ? `${s.split(":")[1]}px` : void 0;
-    }
-    const widthProperties = [
-      { name: "_col-width-mobile", value: widthMobile },
-      { name: "_col-width-tablet", value: widthTablet },
-      { name: "_col-width-desktop", value: widthDesktop }
-    ];
-    const cssVariables = widthProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
-    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
-      varsAutoColumns: css`
-        ${unsafeCSS(cssVariables)}
-      `
-    });
-    this.requestUpdate("_gridVariables");
-  }
-  _updateGridCss() {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(`:host {${Object.values(this._gridVariables).join("")}} `);
-    if (this.shadowRoot) {
-      const styles = Array.isArray(GdsGrid.styles) ? GdsGrid.styles : [GdsGrid.styles];
-      const styleSheets = styles.flatMap((style) => {
-        if (Array.isArray(style)) {
-          return style.map((s) => {
-            const newSheet = new CSSStyleSheet();
-            newSheet.replaceSync(s.cssText);
-            return newSheet;
-          });
-        } else {
-          const newSheet = new CSSStyleSheet();
-          newSheet.replaceSync(style.cssText);
-          return [newSheet];
-        }
-      });
-      this.shadowRoot.adoptedStyleSheets = [sheet, ...styleSheets];
-    }
-  }
-  render() {
-    return html` <slot></slot> `;
-  }
-};
-GdsGrid.styles = [tokens, grid_style_css_default];
-GdsGrid.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-__decorateClass([
-  property({ attribute: "columns", type: String })
-], GdsGrid.prototype, "columns", 2);
-__decorateClass([
-  property({ attribute: "gap", type: String })
-], GdsGrid.prototype, "gap", 2);
-__decorateClass([
-  property({ attribute: "row-gap", type: String })
-], GdsGrid.prototype, "rowGap", 2);
-__decorateClass([
-  property({ attribute: "padding", type: String })
-], GdsGrid.prototype, "padding", 2);
-__decorateClass([
-  property({ attribute: "auto-columns", type: String })
-], GdsGrid.prototype, "autoColumns", 2);
-__decorateClass([
-  state()
-], GdsGrid.prototype, "_gridVariables", 2);
-__decorateClass([
-  watch("columns")
-], GdsGrid.prototype, "_updateColumnVariables", 1);
-__decorateClass([
-  watch("gap")
-], GdsGrid.prototype, "_updateGapVariables", 1);
-__decorateClass([
-  watch("row-gap")
-], GdsGrid.prototype, "_updateRowGapVariables", 1);
-__decorateClass([
-  watch("padding")
-], GdsGrid.prototype, "_updatePaddingVariables", 1);
-__decorateClass([
-  watch("autoColumns")
-], GdsGrid.prototype, "_updateAutoColumnsVariables", 1);
-__decorateClass([
-  watch("_gridVariables")
-], GdsGrid.prototype, "_updateGridCss", 1);
-GdsGrid = __decorateClass([
-  gdsCustomElement("gds-grid")
-], GdsGrid);
-
-export {
-  GdsGrid
-};