@getpara/core-components 0.1.0

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

@@ -0,0 +1,109 @@
+/**
+ * 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;
+  width: fit-content;
+  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: 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;
+  margin: 4px;
+  border-radius: var(--tabs-border-radius);
+  background: var(--slider-background-color);
+}
+
+.loaded {
+  transition: all 0.5s;
+}

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

@@ -0,0 +1,188 @@
+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() {
+        // Allow component to condense or expand before recalculating silder
+        setTimeout(() => {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }, 50);
+    }
+    updateTab(newValue, oldValue) {
+        if (Boolean(newValue) && !oldValue) {
+            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
+        }
+    }
+    onTabSizeChange(ev) {
+        const { tab } = ev.detail;
+        if (tab === this.selectedTab) {
+            this.selectedTabRect = getTab(this.tabs, tab).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 };
+        // Allow slider to be rendered with the correct initial style before the transition is added
+        setTimeout(() => {
+            this.loaded = true;
+        }, 50);
+    }
+    get tabs() {
+        return Array.from(this.el.querySelectorAll('cpsl-tab'));
+    }
+    render() {
+        const tabsPosition = this.el.getBoundingClientRect();
+        // Get border width as a number
+        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
+        const selectedTabRect = this.selectedTabRect;
+        return (h(Host, { key: '4a52ac10f673a907bde10ff86fabc15c0e8a2bf8', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1473724b5b53e942082a1ba40148ba2f3595bdbd', class: "tabs-container" }, h("slot", { key: 'ac682db2fc58ceea90d55208b1617a90452c4f55' }), h("div", { key: '219d7e45a8403795f2a7fd1ba0b30833e4488691', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}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.js",
+                            "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.js",
+                            "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"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "cpslTabButtonSizeChange",
+                "method": "onTabSizeChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+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

@@ -0,0 +1 @@
+{"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, Listen } from '@stencil/core';\nimport { TabClickEventDetail, TabSizeChangeEventDetail } from '../cpsl-tab/tab-interface.js';\nimport { TabsChangedEventDetail } from './tabs-interface.js';\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) && !oldValue) {\n      this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n    }\n  }\n\n  @Listen('cpslTabButtonSizeChange', { target: 'window' })\n  onTabSizeChange(ev: CustomEvent<TabSizeChangeEventDetail>) {\n    const { tab } = ev.detail;\n\n    if (tab === this.selectedTab) {\n      this.selectedTabRect = getTab(this.tabs, tab).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 - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}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

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

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

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