@getpara/core-components 0.1.0

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

@@ -0,0 +1,115 @@
+/**
+ * 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;
+   *   }
+   * }
+   */
+:host {
+  --container-height: 24px;
+  --container-width: 44px;
+  --container-padding: 2px;
+  --container-border-radius: var(--cpsl-border-radius-switch);
+  --container-background-color-default: var(--cpsl-color-switch-surface-default);
+  --container-background-color-checked: var(--cpsl-color-switch-surface-checked);
+  --thumb-size: calc(var(--container-height) - var(--container-padding) * 2);
+  --thumb-border-radius: var(--cpsl-border-radius-switch);
+  --thumb-background-color-default: var(--cpsl-color-switch-thumb-default);
+  --thumb-background-color-checked: var(--cpsl-color-switch-thumb-checked);
+  display: block;
+  position: relative;
+  height: var(--container-height);
+  width: var(--container-width);
+  cursor: pointer;
+}
+
+input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+}
+
+span.container {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: var(--container-padding);
+  border-radius: var(--container-border-radius);
+  background: var(--container-background-color-default);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08) inset;
+  transition: all 0.15s ease-in-out;
+}
+span.container.checked {
+  background: var(--container-background-color-checked);
+  box-shadow: none;
+}
+
+span.thumb {
+  display: inline-block;
+  position: relative;
+  background: var(--thumb-background-color-default);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  border-radius: var(--thumb-border-radius);
+  transform: translateX(0);
+  left: 0;
+  transition: all 0.15s ease-in-out;
+}
+span.thumb.checked {
+  background: var(--thumb-background-color-checked);
+  left: 100%;
+  transform: translateX(-100%);
+}

package/dist/collection/components/cpsl-switch/cpsl-switch.js

@@ -0,0 +1,64 @@
+import { Host, h } from "@stencil/core";
+export class CpslSwitch {
+    constructor() {
+        this.handleSwitchClick = () => {
+            this.cpslSwitchChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: '80395b6f36c5653c725a69883098d2822cb6d420' }, h("input", { key: 'b9f74ffce1f02b8efa28b47f60c82e549a87bd09', type: "checkbox", checked: this.checked }), h("span", { key: '1f0763f6aaca5f55a66620a59444a907dc837360', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '1804cbae3ea10091952722c6bfb50c6dd518fe0b', class: { thumb: true, checked: this.checked } }))));
+    }
+    static get is() { return "cpsl-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the switch is checked."
+                },
+                "attribute": "checked",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslSwitchChanged",
+                "name": "cpslSwitchChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the switch state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-switch.js.map

package/dist/collection/components/cpsl-switch/cpsl-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-switch.js","sourceRoot":"","sources":["../../../../src/components/cpsl-switch/cpsl-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,UAAU;;QAWb,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;YAChD,6DAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBACtF,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI,CAClD,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-switch',\n  styleUrl: 'cpsl-switch.scss',\n  shadow: true,\n})\nexport class CpslSwitch {\n  /**\n   * Whether or not the switch is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * Emitted when the switch state changes.\n   */\n  @Event() cpslSwitchChanged!: EventEmitter<boolean>;\n\n  private handleSwitchClick = () => {\n    this.cpslSwitchChanged.emit(!this.checked);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input type=\"checkbox\" checked={this.checked} />\n        <span onClick={this.handleSwitchClick} class={{ container: true, checked: this.checked }}>\n          <span class={{ thumb: true, checked: this.checked }} />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,46 @@
+:host {
+  --tab-color: var(--cpsl-color-text-secondary);
+  --tab-gap: 2px;
+  --tab-icon-height: 16px;
+  --tab-icon-width: 16px;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+}
+:host ::slotted([slot=start]) {
+  --icon-color: var(--tab-color);
+  --height: var(--tab-icon-height);
+  --width: var(--tab-icon-width);
+}
+:host ::slotted([slot=end]) {
+  --icon-color: var(--tab-color);
+  --height: var(--tab-icon-height);
+  --width: var(--tab-icon-width);
+}
+
+:host(.selected) {
+  --tab-color: var(--cpsl-color-text-primary);
+}
+
+.tab-container {
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  text-align: center;
+  white-space: nowrap;
+  font-weight: 500;
+  color: var(--tab-color);
+  display: flex;
+  gap: var(--tab-gap);
+  padding-top: var(--tab-top-padding);
+  padding-bottom: var(--tab-bottom-padding);
+  padding-left: var(--tab-left-padding);
+  padding-right: var(--tab-right-padding);
+}
+
+.content {
+  flex: 1 1 auto;
+}

package/dist/collection/components/cpsl-tab/cpsl-tab.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+export class CpslTab {
+    constructor() {
+        this.onTabClicked = () => {
+            this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });
+        };
+        this.selected = false;
+        this.tab = undefined;
+    }
+    onTabsChanged(ev) {
+        this.setSelected(ev);
+    }
+    onTabsInit(ev) {
+        this.setSelected(ev);
+    }
+    componentDidLoad() {
+        new MutationObserver(() => {
+            this.cpslTabButtonSizeChange.emit({ tab: this.tab });
+        }).observe(this.el, {
+            attributes: true,
+        });
+    }
+    setSelected(ev) {
+        const dispatchedFrom = ev.target;
+        const parent = this.el.parentElement;
+        if (ev.composedPath().includes(parent) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
+            this.selected = this.tab === ev.detail.tab;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'dffbcb7a246b03dd586d05152b3c53d3d5af3f87', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: 'a9606f29660d01f66f3474d2aa2efb99f83ee569', class: { 'tab-container': true } }, h("slot", { key: '0974381842769333c6a5cfa94e842feec5feaf56', name: "start" }), h("div", { key: 'b0d17ead876fab16b55b8a3176828ca76f553ead', class: "content" }, h("slot", { key: '6bdb9f6706881fee90d9a0cc759e29b65eeb3113' })), h("slot", { key: '7c9b87600f7e4fec0509bda1a080f3116c0fbbfe', name: "end" }))));
+    }
+    static get is() { return "cpsl-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab component"
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A tab id must be provided for each `cpsl-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
+                },
+                "attribute": "tab",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslTabButtonClick",
+                "name": "cpslTabButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when tabs are clicked"
+                },
+                "complexType": {
+                    "original": "TabClickEventDetail",
+                    "resolved": "TabClickEventDetail",
+                    "references": {
+                        "TabClickEventDetail": {
+                            "location": "import",
+                            "path": "./tab-interface.js",
+                            "id": "src/components/cpsl-tab/tab-interface.ts::TabClickEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslTabButtonSizeChange",
+                "name": "cpslTabButtonSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when tab size changes"
+                },
+                "complexType": {
+                    "original": "TabSizeChangeEventDetail",
+                    "resolved": "TabSizeChangeEventDetail",
+                    "references": {
+                        "TabSizeChangeEventDetail": {
+                            "location": "import",
+                            "path": "./tab-interface.js",
+                            "id": "src/components/cpsl-tab/tab-interface.ts::TabSizeChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "cpslTabsChanged",
+                "method": "onTabsChanged",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cpslTabsInit",
+                "method": "onTabsInit",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-tab.js.map

package/dist/collection/components/cpsl-tab/cpsl-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tab.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/cpsl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,OAAO,OAAO;;QAqDV,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;wBAjDiB,KAAK;;;IAqBxB,aAAa,CAAC,EAAuC;QACnD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAGD,UAAU,CAAC,EAAuC;QAChD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAClB,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAuC;QACzD,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,EAAE,CAAC;YAC5E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY;YAClE,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;gBACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT;gBACN,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TabClickEventDetail, TabSizeChangeEventDetail } from './tab-interface.js';\nimport { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface.js';\n\n@Component({\n  tag: 'cpsl-tab',\n  styleUrl: 'cpsl-tab.scss',\n  shadow: true,\n})\nexport class CpslTab {\n  @Element() el!: HTMLCpslTabElement;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selected = false;\n\n  /**\n   * A tab id must be provided for each `cpsl-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab: string;\n\n  /**\n   * Emitted when tabs are clicked\n   * @internal\n   */\n  @Event() cpslTabButtonClick!: EventEmitter<TabClickEventDetail>;\n\n  /**\n   * Emitted when tab size changes\n   * @internal\n   */\n  @Event() cpslTabButtonSizeChange!: EventEmitter<TabSizeChangeEventDetail>;\n\n  @Listen('cpslTabsChanged', { target: 'window' })\n  onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>) {\n    this.setSelected(ev);\n  }\n\n  @Listen('cpslTabsInit', { target: 'window' })\n  onTabsInit(ev: CustomEvent<TabsChangedEventDetail>) {\n    this.setSelected(ev);\n  }\n\n  componentDidLoad() {\n    new MutationObserver(() => {\n      this.cpslTabButtonSizeChange.emit({ tab: this.tab });\n    }).observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  private setSelected(ev: CustomEvent<TabsChangedEventDetail>) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if (ev.composedPath().includes(parent) || dispatchedFrom?.contains(this.el)) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private onTabClicked = () => {\n    this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });\n  };\n\n  render() {\n    return (\n      <Host class={{ selected: this.selected }} onClick={this.onTabClicked}>\n        <div class={{ 'tab-container': true }}>\n          <slot name=\"start\"></slot>\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tab/tab-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tab-interface.js.map

package/dist/collection/components/cpsl-tab/tab-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/tab-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabClickEventDetail {\n  tab: string;\n  selected: boolean;\n}\n\nexport interface TabSizeChangeEventDetail {\n  tab: string;\n}\n"]}

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

@@ -0,0 +1,159 @@
+/**
+ * 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;
+   *   }
+   * }
+   */
+:host {
+  --container-border-radius: var(--cpsl-border-radius-table-container);
+  --container-border-color: var(--cpsl-color-background-16);
+  --container-background-color: var(--cpsl-color-background-0);
+  --container-border-width: 1px;
+  --container-header-padding-top: 24px;
+  --container-header-padding-bottom: 24px;
+  --container-header-padding-start: 24px;
+  --container-header-padding-end: 24px;
+  --container-header-border-width: 1px;
+  --container-header-border-color: var(--cpsl-color-background-16);
+  --container-footer-padding-top: 16px;
+  --container-footer-padding-bottom: 16px;
+  --container-footer-padding-start: 24px;
+  --container-footer-padding-end: 24px;
+  --container-footer-border-width: 1px;
+  --container-footer-border-color: var(--cpsl-color-background-8);
+  --table-header-padding-top: 16px;
+  --table-header-padding-bottom: 16px;
+  --table-header-padding-start: 24px;
+  --table-header-padding-end: 24px;
+  --table-header-background-color: var(--cpsl-color-background-4);
+  --table-header-border-color: var(--cpsl-color-background-16);
+  --table-header-border-width: 1px;
+  --table-content-padding-top: 16px;
+  --table-content-padding-bottom: 16px;
+  --table-content-padding-start: 24px;
+  --table-content-padding-end: 24px;
+  --table-content-border-color: var(--cpsl-color-background-8);
+  --table-content-border-width: 1px;
+  display: block;
+}
+
+:host cpsl-card {
+  height: 100%;
+  --card-padding-top: 0px;
+  --card-padding-bottom: 0px;
+  --card-padding-start: 0px;
+  --card-padding-end: 0px;
+  --card-border-width: var(--container-border-width);
+  --card-border-color: var(--container-border-color);
+  --card-border-radius: var(--container-border-radius);
+  --card-background-color: var(--container-background-color);
+}
+:host cpsl-card::part(card-container) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.overlay.horizontal-scroll:not(.vertical-scroll) {
+  box-shadow: -24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset;
+}
+.overlay.vertical-scroll:not(.horizontal-scroll) {
+  box-shadow: 0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset;
+}
+.overlay.horizontal-scroll.vertical-scroll {
+  box-shadow: -24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset;
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 100%;
+}
+
+.container-header {
+  display: none;
+  -webkit-padding-start: var(--container-header-padding-start);
+  padding-inline-start: var(--container-header-padding-start);
+  -webkit-padding-end: var(--container-header-padding-end);
+  padding-inline-end: var(--container-header-padding-end);
+  padding-top: var(--container-header-padding-top);
+  padding-bottom: var(--container-header-padding-bottom);
+  border-bottom: var(--container-header-border-width) solid var(--container-header-border-color);
+}
+
+.container-footer {
+  display: none;
+  -webkit-padding-start: var(--container-footer-padding-start);
+  padding-inline-start: var(--container-footer-padding-start);
+  -webkit-padding-end: var(--container-footer-padding-end);
+  padding-inline-end: var(--container-footer-padding-end);
+  padding-top: var(--container-footer-padding-top);
+  padding-bottom: var(--container-footer-padding-bottom);
+  border-top: var(--container-footer-border-width) solid var(--container-footer-border-color);
+}
+
+.shown {
+  display: block;
+}

package/dist/collection/components/cpsl-table/cpsl-table.js

@@ -0,0 +1,72 @@
+import { Host, h } from "@stencil/core";
+export class CpslTable {
+    constructor() {
+        this.resizeOb = new ResizeObserver(entries => {
+            // since we are observing only a single element, so we access the first element in entries array
+            const rect = entries[0].contentRect;
+            // current width & height
+            const containerWidth = Math.round(rect.width);
+            const containerHeight = Math.round(rect.height);
+            const contentWidth = this.containerSlotEl.clientWidth;
+            const contentHeight = this.containerSlotEl.clientHeight;
+            if (contentWidth > containerWidth) {
+                this.hasHorizontalScroll = true;
+            }
+            else {
+                this.hasHorizontalScroll = false;
+            }
+            if (contentHeight > containerHeight) {
+                this.hasVerticalScroll = true;
+            }
+            else {
+                this.hasVerticalScroll = false;
+            }
+        });
+        this.hasHorizontalScroll = false;
+        this.hasVerticalScroll = false;
+    }
+    componentDidLoad() {
+        this.resizeOb.observe(this.contentContainerEl);
+    }
+    get containerHeaderEl() {
+        return this.el.querySelector('[slot="header"]');
+    }
+    get containerFooterEl() {
+        return this.el.querySelector('[slot="footer"]');
+    }
+    get contentContainerEl() {
+        return this.el.shadowRoot.getElementById('content-container');
+    }
+    get headerEl() {
+        return this.el.shadowRoot.getElementById('header-container');
+    }
+    get containerSlotEl() {
+        return this.el.querySelector('[slot="content"]');
+    }
+    get footerEl() {
+        return this.el.shadowRoot.getElementById('footer-container');
+    }
+    render() {
+        return (h(Host, { key: '144ebe0917ce215a128b6653c8ed47138be7b319' }, h("cpsl-card", { key: '8197bc383734a332a2e0ee7221a1990ba20b1f84', part: "table-container", style: { position: 'relative' } }, h("div", { key: 'dd8d0026515ce96a848ae4a6cdf5cdab7bb7ddf2', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '1b5a2cbae0fa49bb0b5b4d89fef4b44ce8a46439', name: "header" })), h("div", { key: 'e22bd3b94832ded10fe7b152d2d0c68165853529', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, h("slot", { key: 'f1bbfc01f1c25f820d9d4846ac1a7f64c21ee03b', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (h("div", { key: 'ad1e130185b6621b763892ae693ffab1d6243ae5', style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: 'fb8b26f5d97b3965c50676b0541a14f21c675fe6', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '70a40dfe9bb80e3c825c895d12cb971467898e6a', name: "footer" })))));
+    }
+    static get is() { return "cpsl-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-table.css"]
+        };
+    }
+    static get states() {
+        return {
+            "hasHorizontalScroll": {},
+            "hasVerticalScroll": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-table.js.map

package/dist/collection/components/cpsl-table/cpsl-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-table',\n  styleUrl: 'cpsl-table.scss',\n  shadow: true,\n})\nexport class CpslTable {\n  @Element() el!: HTMLCpslTableElement;\n\n  @State() hasHorizontalScroll: boolean = false;\n  @State() hasVerticalScroll: boolean = false;\n\n  componentDidLoad() {\n    this.resizeOb.observe(this.contentContainerEl);\n  }\n\n  private resizeOb = new ResizeObserver(entries => {\n    // since we are observing only a single element, so we access the first element in entries array\n    const rect = entries[0].contentRect;\n\n    // current width & height\n    const containerWidth = Math.round(rect.width);\n    const containerHeight = Math.round(rect.height);\n    const contentWidth = this.containerSlotEl.clientWidth;\n    const contentHeight = this.containerSlotEl.clientHeight;\n\n    if (contentWidth > containerWidth) {\n      this.hasHorizontalScroll = true;\n    } else {\n      this.hasHorizontalScroll = false;\n    }\n    if (contentHeight > containerHeight) {\n      this.hasVerticalScroll = true;\n    } else {\n      this.hasVerticalScroll = false;\n    }\n  });\n\n  private get containerHeaderEl() {\n    return this.el.querySelector('[slot=\"header\"]');\n  }\n\n  private get containerFooterEl() {\n    return this.el.querySelector('[slot=\"footer\"]');\n  }\n\n  private get contentContainerEl() {\n    return this.el.shadowRoot.getElementById('content-container');\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('header-container');\n  }\n\n  private get containerSlotEl() {\n    return this.el.querySelector('[slot=\"content\"]');\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('footer-container');\n  }\n\n  render() {\n    return (\n      <Host>\n        <cpsl-card part=\"table-container\" style={{ position: 'relative' }}>\n          <div id=\"header-container\" class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n            <slot name=\"header\"></slot>\n          </div>\n          <div id=\"content-container\" class={{ 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }} part=\"content\">\n            <slot name=\"content\"></slot>\n          </div>\n          {this.headerEl && this.contentContainerEl && this.footerEl && (\n            <div\n              style={{ top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }}\n              class={{ 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }}\n            />\n          )}\n          <div id=\"footer-container\" class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </cpsl-card>\n      </Host>\n    );\n  }\n}\n"]}