@usecapsule/core-components 2.0.2 → 2.0.4-dev.1

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -0,0 +1,223 @@
+import { Host, h } from "@stencil/core";
+export class CpslCodeInput {
+    constructor() {
+        this.handleInput = (ind, ev) => {
+            var _a;
+            const inputElements = this.inputs;
+            if (ev.inputType == 'insertText') {
+                if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    inputElements[ind].value = '';
+                    return;
+                }
+                inputElements[Math.min(this.length - 1, ind + 1)].focus();
+                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
+                this.cpslInput.emit({ value: newCode });
+                this.code = newCode;
+            }
+        };
+        this.handleKeyDown = (ind, ev) => {
+            const inputElements = this.inputs;
+            switch (ev.key) {
+                case 'Backspace': {
+                    let newCode;
+                    if (!inputElements[ind].value) {
+                        inputElements[Math.max(0, ind - 1)].value = '';
+                        inputElements[Math.max(0, ind - 1)].focus();
+                        newCode = this.code.substring(0, ind - 1);
+                    }
+                    else {
+                        newCode = this.code.substring(0, ind);
+                    }
+                    this.cpslInput.emit({ value: newCode });
+                    this.code = newCode;
+                    break;
+                }
+                case 'ArrowLeft': {
+                    setTimeout(() => {
+                        this.inputs[ind].setSelectionRange(1, 1);
+                    }, 0);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        };
+        this.handleFocus = (ind) => {
+            const inputElements = this.inputs;
+            for (const input of inputElements) {
+                if (!input.value) {
+                    input.focus();
+                    break;
+                }
+                else if (input.id === `code-input-${this.length - 1}`) {
+                    input.focus();
+                    break;
+                }
+            }
+            setTimeout(() => {
+                inputElements[ind].setSelectionRange(1, 1);
+            }, 0);
+        };
+        this.handlePaste = (e) => {
+            const inputElements = this.inputs;
+            const pastedCode = e.clipboardData.getData('text');
+            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
+                setTimeout(() => {
+                    inputElements[0].value = '';
+                }, 0);
+                return;
+            }
+            this.cpslInput.emit({
+                value: pastedCode,
+            });
+            inputElements.forEach((input, index) => {
+                input.value = pastedCode.charAt(index);
+            });
+            inputElements[this.length - 1].focus();
+        };
+        this.code = undefined;
+        this.errorText = undefined;
+        this.helperText = undefined;
+        this.length = undefined;
+        this.type = 'number';
+    }
+    get inputs() {
+        return Array.from(this.el.shadowRoot.querySelectorAll('input'));
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+            var _a;
+            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
+        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+    }
+    static get is() { return "cpsl-code-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-code-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-code-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the code."
+                },
+                "attribute": "code",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "length": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Length of the code."
+                },
+                "attribute": "length",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'number' | 'string'",
+                    "resolved": "\"number\" | \"string\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of characters to accept in the code.\nDefaults to number."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'number'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslInput",
+                "name": "cpslInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `cpslInput` event is fired each time the user modifies the input's value."
+                },
+                "complexType": {
+                    "original": "CodeChangeEventDetail",
+                    "resolved": "CodeChangeEventDetail",
+                    "references": {
+                        "CodeChangeEventDetail": {
+                            "location": "import",
+                            "path": "./code-change-interface",
+                            "id": "src/components/cpsl-code-input/code-change-interface.ts::CodeChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-code-input.js.map

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n    if (ev.inputType == 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n      inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n      const newCode = `${this.code ?? ''}${ev.data}`;\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  // TODO: figure out why pasting a string populates the first input\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    const pastedCode = e.clipboardData.getData('text');\n\n    if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n      // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n      setTimeout(() => {\n        inputElements[0].value = '';\n      }, 0);\n      return;\n    }\n\n    this.cpslInput.emit({\n      value: pastedCode,\n    });\n    inputElements.forEach((input, index) => {\n      input.value = pastedCode.charAt(index);\n    });\n    inputElements[this.length - 1].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n              id={`code-input-${i}`}\n              maxLength={1}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-code-input', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-code-input></cpsl-code-input>');
+        const element = yield page.find('cpsl-code-input');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-code-input.e2e.js.map

package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-code-input.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-code-input/test/cpsl-code-input.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;QAE7D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-code-input', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-code-input></cpsl-code-input>');\n\n    const element = await page.find('cpsl-code-input');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslCodeInput } from "../cpsl-code-input";
+describe('cpsl-code-input', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslCodeInput],
+            html: `<cpsl-code-input></cpsl-code-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-code-input>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-code-input>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-code-input.spec.js.map

package/dist/collection/components/cpsl-code-input/test/cpsl-code-input.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-code-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-code-input/test/cpsl-code-input.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslCodeInput } from '../cpsl-code-input';\n\ndescribe('cpsl-code-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslCodeInput],\n      html: `<cpsl-code-input></cpsl-code-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-code-input>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-code-input>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-col/cpsl-col.css

@@ -0,0 +1,200 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  /**
+   * @prop --cpsl-grid-columns: The number of total Columns in the Grid
+   * @prop --cpsl-grid-column-padding: Padding for the Column
+   * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up
+   * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up
+   * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up
+   * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up
+   * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up
+   */
+  -webkit-padding-start: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  padding-inline-start: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  -webkit-padding-end: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  padding-inline-end: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  padding-top: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  padding-bottom: var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  box-sizing: border-box;
+  position: relative;
+  flex-basis: 0;
+  flex-grow: 1;
+  width: 100%;
+  max-width: 100%;
+  min-height: 1px;
+}
+@media (min-width: 576px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+    padding-top: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+    padding-bottom: var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));
+  }
+}
+@media (min-width: 768px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+    padding-top: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+    padding-bottom: var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));
+  }
+}
+@media (min-width: 992px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+    padding-top: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+    padding-bottom: var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));
+  }
+}
+@media (min-width: 1200px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+    padding-top: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+    padding-bottom: var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));
+  }
+}