@usecapsule/core-components 2.0.0 → 2.0.2

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

@@ -1,121 +0,0 @@
-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);
-    }
-    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: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
-    }
-    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",
-                            "id": "src/components/cpsl-tab/tab-interface.ts::TabClickEventDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    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

@@ -1 +0,0 @@
-{"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;;QAuCV,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;wBAnCiB,KAAK;;;IAexB,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;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,OAAO,EAAE,IAAI,CAAC,YAAY;YAC9B,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;gBACnC,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TabClickEventDetail } from './tab-interface';\nimport { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface';\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  @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  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 onClick={this.onTabClicked}>\n        <div class={{ 'tab-container': true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,29 +0,0 @@
-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-tab', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newE2EPage();
-        yield page.setContent('<cpsl-tab></cpsl-tab>');
-        const element = yield page.find('cpsl-tab');
-        expect(element).toHaveClass('hydrated');
-    }));
-});
-//# sourceMappingURL=cpsl-tab.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-tab.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tab/test/cpsl-tab.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;QAE/C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,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-tab', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-tab></cpsl-tab>');\n\n    const element = await page.find('cpsl-tab');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

@@ -1,37 +0,0 @@
-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 { CpslTab } from "../cpsl-tab";
-describe('cpsl-tab', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newSpecPage({
-            components: [CpslTab],
-            html: `<cpsl-tab></cpsl-tab>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <cpsl-tab>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </cpsl-tab>
-    `);
-    }));
-});
-//# sourceMappingURL=cpsl-tab.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-tab.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tab/test/cpsl-tab.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,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 { CpslTab } from '../cpsl-tab';\n\ndescribe('cpsl-tab', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslTab],\n      html: `<cpsl-tab></cpsl-tab>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-tab>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-tab>\n    `);\n  });\n});\n"]}

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

@@ -1,111 +0,0 @@
-/**
- * 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 {
-  --tab-top-padding: 5px;
-  --tab-bottom-padding: 5px;
-  --tab-left-padding: 16px;
-  --tab-right-padding: 16px;
-  --tabs-border-radius: var(--cpsl-border-radius-tabs);
-  --tabs-font-size: 12px;
-  --tabs-line-height: 24px;
-  --tabs-border-width: 1px;
-  --tabs-border-color: var(--cpsl-color-tabs-border);
-  --tabs-background-color: var(--cpsl-color-tabs-background);
-  --slider-background-color: var(--cpsl-color-tabs-slider-background);
-  display: inline-block;
-  max-width: 100%;
-  font-family: var(--cpsl-font-family, inherit);
-}
-
-:host(.full-width) {
-  display: block;
-}
-
-.tabs-container {
-  position: relative;
-  display: flex;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  border-width: var(--tabs-border-width);
-  border-style: solid;
-  border-color: var(--tabs-border-color);
-  border-radius: var(--tabs-border-radius);
-  background-color: var(--tabs-background-color);
-  font-size: var(--tabs-font-size);
-  line-height: var(--tabs-line-height);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.tabs-container::-webkit-scrollbar {
-  display: none;
-}
-
-.slider {
-  position: absolute;
-  top: calc(var(--tabs-border-width) * -1);
-  bottom: calc(var(--tabs-border-width) * -1);
-  left: -1px;
-  border-width: var(--tabs-border-width);
-  border-style: solid;
-  border-color: var(--tabs-border-color);
-  border-radius: var(--tabs-border-radius);
-  background-color: var(--slider-background-color);
-  box-shadow: -1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10);
-}
-
-.loaded {
-  transition: all 0.5s;
-}

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

@@ -1,170 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class CpslTabs {
-    constructor() {
-        this.onTabClicked = (ev) => {
-            const { tab } = ev.detail;
-            if (tab !== this.selectedTab) {
-                this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
-                this.cpslTabsChanged.emit({
-                    tab,
-                });
-            }
-        };
-        this.selectedTabRect = undefined;
-        this.loaded = false;
-        this.fullWidth = undefined;
-        this.selectedTab = undefined;
-    }
-    updateSlider() {
-        setTimeout(() => {
-            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
-        }, 50);
-    }
-    updateTab(newValue, oldValue) {
-        if (Boolean(newValue) && !Boolean(oldValue)) {
-            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
-        }
-    }
-    componentWillLoad() {
-        var _a, _b;
-        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
-        this.cpslTabsInit.emit({
-            tab: this.selectedTab,
-        });
-    }
-    componentDidLoad() {
-        var _a, _b;
-        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
-        setTimeout(() => {
-            this.loaded = true;
-        }, 50);
-    }
-    get tabs() {
-        return Array.from(this.el.querySelectorAll('cpsl-tab'));
-    }
-    render() {
-        const tabsPosition = this.el.getBoundingClientRect();
-        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
-        const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
-    }
-    static get is() { return "cpsl-tabs"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["cpsl-tabs.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["cpsl-tabs.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether or not the tabs take the full width of their container."
-                },
-                "attribute": "full-width",
-                "reflect": false
-            },
-            "selectedTab": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The selected tab component"
-                },
-                "attribute": "selected-tab",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedTabRect": {},
-            "loaded": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "cpslTabsChanged",
-                "name": "cpslTabsChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a tab is changed"
-                },
-                "complexType": {
-                    "original": "TabsChangedEventDetail",
-                    "resolved": "TabsChangedEventDetail",
-                    "references": {
-                        "TabsChangedEventDetail": {
-                            "location": "import",
-                            "path": "./tabs-interface",
-                            "id": "src/components/cpsl-tabs/tabs-interface.ts::TabsChangedEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "cpslTabsInit",
-                "name": "cpslTabsInit",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when tabs are initialized"
-                },
-                "complexType": {
-                    "original": "TabsChangedEventDetail",
-                    "resolved": "TabsChangedEventDetail",
-                    "references": {
-                        "TabsChangedEventDetail": {
-                            "location": "import",
-                            "path": "./tabs-interface",
-                            "id": "src/components/cpsl-tabs/tabs-interface.ts::TabsChangedEventDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "fullWidth",
-                "methodName": "updateSlider"
-            }, {
-                "propName": "selectedTab",
-                "methodName": "updateTab"
-            }];
-    }
-}
-const getTab = (tabs, tab) => {
-    const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
-    return tabEl;
-};
-//# sourceMappingURL=cpsl-tabs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n  tag: 'cpsl-tabs',\n  styleUrl: 'cpsl-tabs.scss',\n  shadow: true,\n})\nexport class CpslTabs {\n  @Element() el!: HTMLCpslTabsElement;\n\n  @State() selectedTabRect?: DOMRect;\n  @State() loaded: boolean = false;\n\n  /**\n   * Whether or not the tabs take the full width of their container.\n   */\n  @Prop() fullWidth?: boolean;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * Emitted when a tab is changed\n   */\n  @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n  /**\n   * Emitted when tabs are initialized\n   * @internal\n   */\n  @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n  @Watch('fullWidth')\n  updateSlider() {\n    // Allow component to condense or expand before recalculating silder\n    setTimeout(() => {\n      this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n    }, 50);\n  }\n\n  @Watch('selectedTab')\n  updateTab(newValue?: string, oldValue?: string) {\n    if (Boolean(newValue) && !Boolean(oldValue)) {\n      this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n    }\n  }\n\n  componentWillLoad() {\n    this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n    this.cpslTabsInit.emit({\n      tab: this.selectedTab,\n    });\n  }\n\n  componentDidLoad() {\n    this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n    // Allow slider to be rendered with the correct initial style before the transition is added\n    setTimeout(() => {\n      this.loaded = true;\n    }, 50);\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('cpsl-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n    const { tab } = ev.detail;\n\n    if (tab !== this.selectedTab) {\n      this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n      this.cpslTabsChanged.emit({\n        tab,\n      });\n    }\n  };\n\n  render() {\n    const tabsPosition = this.el.getBoundingClientRect();\n    // Get border width as a number\n    const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);\n    const selectedTabRect = this.selectedTabRect;\n\n    return (\n      <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n        <div class=\"tabs-container\">\n          <slot></slot>\n          <div\n            class={{ slider: true, loaded: this.loaded }}\n            style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string | HTMLCpslTabElement): HTMLCpslTabElement | undefined => {\n  const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n  return tabEl;\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/tabs-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabsCustomEvent extends CustomEvent {\n  detail: { tab: string };\n  target: HTMLCpslTabsElement;\n}\n\nexport interface TabsChangedEventDetail {\n  tab?: string;\n}\n"]}

package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.e2e.js

@@ -1,29 +0,0 @@
-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-tabs', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newE2EPage();
-        yield page.setContent('<cpsl-tabs></cpsl-tabs>');
-        const element = yield page.find('cpsl-tabs');
-        expect(element).toHaveClass('hydrated');
-    }));
-});
-//# sourceMappingURL=cpsl-tabs.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-tabs.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tabs/test/cpsl-tabs.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,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-tabs', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-tabs></cpsl-tabs>');\n\n    const element = await page.find('cpsl-tabs');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-tabs/test/cpsl-tabs.spec.js

@@ -1,37 +0,0 @@
-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 { CpslTabs } from "../cpsl-tabs";
-describe('cpsl-tabs', () => {
-    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
-        const page = yield newSpecPage({
-            components: [CpslTabs],
-            html: `<cpsl-tabs></cpsl-tabs>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <cpsl-tabs>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </cpsl-tabs>
-    `);
-    }));
-});
-//# sourceMappingURL=cpsl-tabs.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-tabs.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tabs/test/cpsl-tabs.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,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 { CpslTabs } from '../cpsl-tabs';\n\ndescribe('cpsl-tabs', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslTabs],\n      html: `<cpsl-tabs></cpsl-tabs>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-tabs>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-tabs>\n    `);\n  });\n});\n"]}

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

@@ -1,59 +0,0 @@
-/**
- * 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 {
-  font-family: var(--cpsl-font-family, inherit);
-  color: var(--cpsl-color-text-primary);
-}