@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/lib/components/container-grid/container-grid.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './container-grid.styles.js';
+/** `cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to
+* N-across patterns - keyed to this element's own rendered width via
+* `@container` instead of the viewport via `@media`. It establishes its own
+* containment context, so use it wherever the number of columns should
+* depend on the space actually available: a grid placed in a narrow sidebar
+* on a wide viewport still stacks, and a grid placed in a wide main column
+* on a narrow viewport still goes multi-up.
+*
+* @slot - The grid items
+*/
+export class Cre8ContainerGrid extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-container-grid', {
+            'cre8-c-container-grid--side-by-side': this.variant === 'side-by-side',
+            'cre8-c-container-grid--2up': this.variant === '2up',
+            'cre8-c-container-grid--3up': this.variant === '3up',
+            'cre8-c-container-grid--1-3up': this.variant === '1-3up',
+            'cre8-c-container-grid--4up': this.variant === '4up',
+            'cre8-c-container-grid--1-4up': this.variant === '1-4up',
+            'cre8-c-container-grid--1-2-4up': this.variant === '1-2-4up',
+            'cre8-c-container-grid--2-4-6up': this.variant === '2-4-6up',
+            'cre8-c-container-grid--gap-none': this.gap === 'none',
+            'cre8-c-container-grid--gap-sm': this.gap === 'sm',
+            'cre8-c-container-grid--gap-lg': this.gap === 'lg',
+            'cre8-c-container-grid--break-faster': this.break === 'faster',
+            'cre8-c-container-grid--break-slower': this.break === 'slower',
+        });
+        return html `
+      <div class="${componentClassName}">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Cre8ContainerGrid.styles = [styles];
+__decorate([
+    property()
+], Cre8ContainerGrid.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8ContainerGrid.prototype, "gap", void 0);
+__decorate([
+    property()
+], Cre8ContainerGrid.prototype, "break", void 0);
+if (customElements.get('cre8-container-grid') === undefined) {
+    customElements.define('cre8-container-grid', Cre8ContainerGrid);
+}
+export default Cre8ContainerGrid;
+//# sourceMappingURL=container-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container-grid.js","sourceRoot":"","sources":["../../../components/container-grid/container-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,4BAA4B,CAAC;AAEhD;;;;;;;;;EASE;AACF,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IA0ChD,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;YACzE,qCAAqC,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc;YACtE,4BAA4B,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YACpD,4BAA4B,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YACpD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxD,4BAA4B,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;YACpD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxD,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5D,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5D,iCAAiC,EAAE,IAAI,CAAC,GAAG,KAAK,MAAM;YACtD,+BAA+B,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YAClD,+BAA+B,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;YAClD,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC9D,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACjE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AA/DQ,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAoBvB;IADH,QAAQ,EAAE;kDACsF;AAS7F;IADH,QAAQ,EAAE;8CACoB;AAU3B;IADH,QAAQ,EAAE;gDACqB;AA2BlC,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACpE,CAAC;AAQD,eAAe,iBAAiB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './container-grid.styles.js';\n\n/** `cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to\n* N-across patterns - keyed to this element's own rendered width via\n* `@container` instead of the viewport via `@media`. It establishes its own\n* containment context, so use it wherever the number of columns should\n* depend on the space actually available: a grid placed in a narrow sidebar\n* on a wide viewport still stacks, and a grid placed in a wide main column\n* on a narrow viewport still goes multi-up.\n*\n* @slot - The grid items\n*/\nexport class Cre8ContainerGrid 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) regardless of width\n   * - **2up** yields a grid whose grid items are stacked when this element is narrow\n   *   but display side-by-side once it has enough of its own width to do so\n   * - **3up** yields a grid whose grid items are stacked when narrow,\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 when narrow\n   *   and transforms to a 3-across pattern once wide enough\n   * - **4up** yields a grid whose grid items are stacked when narrow,\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 when narrow,\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 when narrow,\n   *   transforms to a 4-across pattern once wide enough\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 container width than the default.\n   *   Example: 2up grid breaks to 2 per row at a smaller width than default\n   * - **slower** breaks the grid at a larger container width than the default.\n   *   Example: 2up grid breaks to 2 per row at a larger width than default\n   */\n  @property()\n      break?: 'faster' | 'slower';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-container-grid', {\n          'cre8-c-container-grid--side-by-side': this.variant === 'side-by-side',\n          'cre8-c-container-grid--2up': this.variant === '2up',\n          'cre8-c-container-grid--3up': this.variant === '3up',\n          'cre8-c-container-grid--1-3up': this.variant === '1-3up',\n          'cre8-c-container-grid--4up': this.variant === '4up',\n          'cre8-c-container-grid--1-4up': this.variant === '1-4up',\n          'cre8-c-container-grid--1-2-4up': this.variant === '1-2-4up',\n          'cre8-c-container-grid--2-4-6up': this.variant === '2-4-6up',\n          'cre8-c-container-grid--gap-none': this.gap === 'none',\n          'cre8-c-container-grid--gap-sm': this.gap === 'sm',\n          'cre8-c-container-grid--gap-lg': this.gap === 'lg',\n          'cre8-c-container-grid--break-faster': this.break === 'faster',\n          'cre8-c-container-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-container-grid') === undefined) {\n    customElements.define('cre8-container-grid', Cre8ContainerGrid);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-container-grid': Cre8ContainerGrid;\n  }\n}\n\nexport default Cre8ContainerGrid;\n"]}

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

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

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

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