@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../components/grid/grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IA2CvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc;YAC5D,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YAC1C,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC9C,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,GAAG,KAAK,MAAM;YAC5C,qBAAqB,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YACxC,qBAAqB,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YACxC,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YACpD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AAhEQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAoBvB;IADH,QAAQ,EAAE;yCACsF;AAS7F;IADH,QAAQ,EAAE;qCACoB;AAW3B;IADH,QAAQ,EAAE;uCACqB;AA2BlC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './grid.styles.js';\n\n/**\n * @slot - The grid items\n */\nexport class Cre8Grid extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variant\n   * - **side-by-side** yields a grid whose grid items display side-by-side (2 per row) on all screen sizes\n   * - **2up** yields a grid whose grid items are stacked on small screens\n   *   but display side-by-side when enough screen real estate is available to do so\n   * - **3up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern and then transforms again to a 3-across pattern\n   * - **1-3up** yields a grid whose grid items are stacked on small screens\n   *   and transforms to a 3-across pattern on larger screens\n   * - **4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern, transforms again to a 3-across pattern,\n   *   and ultimately transforms to a 4-across pattern\n   * - **1-2-4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern\n   * - **1-4up** yields a grid whose grid items are stacked on small screens,\n   *   transforms to a 4-across pattern on medium/large screens\n   */\n  @property()\n      variant?: 'side-by-side' | '2up' | '3up' | '1-3up' | '4up' | '1-4up' | '1-2-4up' | '2-4-6up';\n\n  /**\n   * Style variant\n   * - **none** yields a grid whose grid items are spaced without any gutter in between\n   * - **sm** yields a grid whose grid items are spaced with a gap smaller than the default\n   * - **lg** yields a grid whose grid items are spaced with a gap larger than the default\n   */\n  @property()\n      gap?: 'none' | 'sm' | 'lg';\n\n  /**\n   * Break variant\n   * - **faster** breaks the grid at a smaller width than the default.\n   *   Example: 2up grid breaks to 2 per row at smaller width than default\n   * - **slower** breaks the grid at a larger width than the default.\n   *   Example: 2up grid breaks to 2 per row at larger width than default\n   * - **lg** yields a grid whose grid items are spaced with a gap larger than the default\n   */\n  @property()\n      break?: 'faster' | 'slower';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-grid', {\n          'cre8-c-grid--side-by-side': this.variant === 'side-by-side',\n          'cre8-c-grid--2up': this.variant === '2up',\n          'cre8-c-grid--3up': this.variant === '3up',\n          'cre8-c-grid--1-3up': this.variant === '1-3up',\n          'cre8-c-grid--4up': this.variant === '4up',\n          'cre8-c-grid--1-4up': this.variant === '1-4up',\n          'cre8-c-grid--1-2-4up': this.variant === '1-2-4up',\n          'cre8-c-grid--2-4-6up': this.variant === '2-4-6up',\n          'cre8-c-grid--gap-none': this.gap === 'none',\n          'cre8-c-grid--gap-sm': this.gap === 'sm',\n          'cre8-c-grid--gap-lg': this.gap === 'lg',\n          'cre8-c-grid--break-faster': this.break === 'faster',\n          'cre8-c-grid--break-slower': this.break === 'slower',\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-grid') === undefined) {\n    customElements.define('cre8-grid', Cre8Grid);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-grid': Cre8Grid;\n  }\n}\n\nexport default Cre8Grid;\n"]}

package/lib/components/grid/grid.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=grid.styles.d.ts.map

package/lib/components/grid/grid.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.styles.d.ts","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAm6BV,CAAC;AACH,eAAe,MAAM,CAAC"}