@getpara/core-components 0.1.0

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

@@ -0,0 +1,174 @@
+import { Host, h } from "@stencil/core";
+export class CpslPagination {
+    constructor() {
+        this.handlePrevClick = () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+            }
+        };
+        this.handleNextClick = () => {
+            if (this.currentPage < this.totalPages - 1) {
+                this.currentPage++;
+            }
+        };
+        this.handlePageClick = (value) => () => {
+            if (value >= 0 && value <= this.totalPages - 1) {
+                this.currentPage = value;
+            }
+        };
+        this.currentPage = 0;
+        this.initialPage = undefined;
+        this.totalPages = undefined;
+        this.visiblePages = 5;
+    }
+    watchChange() {
+        this.cpslPaginationChanged.emit(this.currentPage);
+    }
+    componentWillLoad() {
+        var _a;
+        this.currentPage = (_a = this.initialPage) !== null && _a !== void 0 ? _a : 0;
+        if (this.visiblePages < 5) {
+            this.visiblePages = 5;
+        }
+    }
+    render() {
+        const filteredPages = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];
+        if (this.totalPages > this.visiblePages) {
+            filteredPages.push(0);
+            const isFirstSelected = this.currentPage === 0;
+            const isLastSelected = this.currentPage === this.totalPages - 1;
+            const isFirstOrLastSelected = isFirstSelected || isLastSelected;
+            let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);
+            const halfRemaining = Math.round(remainingVisible / 2);
+            const numberBefore = Math.max(this.currentPage - 1, 0);
+            const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);
+            let beforeHalf = halfRemaining;
+            let afterHalf = remainingVisible - halfRemaining;
+            if (numberBefore >= beforeHalf) {
+                if (numberAfter < afterHalf) {
+                    beforeHalf += afterHalf - numberAfter;
+                    afterHalf = numberAfter;
+                }
+            }
+            else {
+                afterHalf += beforeHalf - numberBefore;
+                beforeHalf = numberBefore;
+            }
+            while (beforeHalf > 0) {
+                filteredPages.push(this.currentPage - beforeHalf);
+                beforeHalf--;
+            }
+            if (!isFirstSelected) {
+                filteredPages.push(this.currentPage);
+            }
+            const pagesAfter = [];
+            while (afterHalf > 0) {
+                pagesAfter.push(this.currentPage + afterHalf);
+                afterHalf--;
+            }
+            filteredPages.push(...pagesAfter.reverse());
+            if (!isLastSelected) {
+                filteredPages.push(this.totalPages - 1);
+            }
+        }
+        return (h(Host, { key: '030d0a78198c77a243ae9996dd8192437c3c370b' }, h("cpsl-button-group", { key: 'b12f592a5cf2cdab91c82516206e4a831bdad5d6', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: 'a24be555c3be19f63a5011aacac7046dbd8bdecd', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: 'e82fe20b2091ede6ac99c16dfb433b47d7490293', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '3d4c5c6b211a1543818746da22739df63a4afcee', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'f623fb7dc739556480bc90d1ce296baa8f5afcb0', class: "icon", icon: "arrowNarrow" })))));
+    }
+    static get is() { return "cpsl-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initialPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial page to select.\nDefault is 0."
+                },
+                "attribute": "initial-page",
+                "reflect": false
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The total number of pages."
+                },
+                "attribute": "total-pages",
+                "reflect": false
+            },
+            "visiblePages": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of pages visible to select.\nDefault is 5.\nMin is 5."
+                },
+                "attribute": "visible-pages",
+                "reflect": false,
+                "defaultValue": "5"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslPaginationChanged",
+                "name": "cpslPaginationChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "watchChange"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-pagination.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pagination/cpsl-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, h, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pagination',\n  styleUrl: 'cpsl-pagination.scss',\n  shadow: true,\n})\nexport class CpslPagination {\n  @State() currentPage = 0;\n\n  /**\n   * The initial page to select.\n   * Default is 0.\n   */\n  @Prop() initialPage?: number;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() totalPages: number;\n\n  /**\n   * The number of pages visible to select.\n   * Default is 5.\n   * Min is 5.\n   */\n\n  @Prop({ mutable: true }) visiblePages?: number = 5;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslPaginationChanged!: EventEmitter<number>;\n\n  @Watch('currentPage')\n  watchChange() {\n    this.cpslPaginationChanged.emit(this.currentPage);\n  }\n\n  componentWillLoad() {\n    this.currentPage = this.initialPage ?? 0;\n    if (this.visiblePages < 5) {\n      this.visiblePages = 5;\n    }\n  }\n\n  private handlePrevClick = () => {\n    if (this.currentPage > 0) {\n      this.currentPage--;\n    }\n  };\n\n  private handleNextClick = () => {\n    if (this.currentPage < this.totalPages - 1) {\n      this.currentPage++;\n    }\n  };\n\n  private handlePageClick = (value: number) => () => {\n    if (value >= 0 && value <= this.totalPages - 1) {\n      this.currentPage = value;\n    }\n  };\n\n  render() {\n    const filteredPages: number[] = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];\n\n    if (this.totalPages > this.visiblePages) {\n      filteredPages.push(0);\n\n      const isFirstSelected = this.currentPage === 0;\n      const isLastSelected = this.currentPage === this.totalPages - 1;\n      const isFirstOrLastSelected = isFirstSelected || isLastSelected;\n\n      let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);\n      const halfRemaining = Math.round(remainingVisible / 2);\n      const numberBefore = Math.max(this.currentPage - 1, 0);\n      const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);\n      let beforeHalf = halfRemaining;\n      let afterHalf = remainingVisible - halfRemaining;\n\n      if (numberBefore >= beforeHalf) {\n        if (numberAfter < afterHalf) {\n          beforeHalf += afterHalf - numberAfter;\n          afterHalf = numberAfter;\n        }\n      } else {\n        afterHalf += beforeHalf - numberBefore;\n        beforeHalf = numberBefore;\n      }\n\n      while (beforeHalf > 0) {\n        filteredPages.push(this.currentPage - beforeHalf);\n        beforeHalf--;\n      }\n\n      if (!isFirstSelected) {\n        filteredPages.push(this.currentPage);\n      }\n\n      const pagesAfter: number[] = [];\n      while (afterHalf > 0) {\n        pagesAfter.push(this.currentPage + afterHalf);\n        afterHalf--;\n      }\n\n      filteredPages.push(...pagesAfter.reverse());\n\n      if (!isLastSelected) {\n        filteredPages.push(this.totalPages - 1);\n      }\n    }\n\n    return (\n      <Host>\n        <cpsl-button-group selectedId={`${this.currentPage}`}>\n          <cpsl-button class=\"arrow-button\" onClick={this.handlePrevClick}>\n            <cpsl-icon class={{ 'icon': true, 'start-icon': true }} icon=\"arrowNarrow\" />\n          </cpsl-button>\n          {filteredPages.map(page => (\n            <cpsl-button key={page} variant=\"secondary\" fullWidth id={`${page}`} onClick={this.handlePageClick(page)}>\n              <cpsl-text variant=\"bodyS\">{page + 1}</cpsl-text>\n            </cpsl-button>\n          ))}\n          <cpsl-button class=\"arrow-button\" onClick={this.handleNextClick}>\n            <cpsl-icon class=\"icon\" icon=\"arrowNarrow\" />\n          </cpsl-button>\n        </cpsl-button-group>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,92 @@
+/**
+ * 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 {
+  --pill-text-color: var(--cpsl-pill-text);
+  --pill-text-size: clamp(10px, 0.625rem, 15px);
+  --pill-text-line-height: 100%;
+  --pill-container-height: 18px;
+  --pill-container-background-color: var(--cpsl-color-pill-container-background);
+  --pill-container-border-color: var(--cpsl-color-pill-container-border);
+  --pill-container-padding-start: 8px;
+  --pill-container-padding-end: 8px;
+  --pill-container-border-radius: var(--cpsl-border-radius-pill);
+  font-family: var(--cpsl-font-family, inherit);
+  display: inline-block;
+}
+
+.pill-container {
+  -webkit-padding-start: var(--pill-container-padding-start);
+  padding-inline-start: var(--pill-container-padding-start);
+  -webkit-padding-end: var(--pill-container-padding-end);
+  padding-inline-end: var(--pill-container-padding-end);
+  padding-top: var(--pill-container-padding-top);
+  padding-bottom: var(--pill-container-padding-bottom);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--pill-container-height);
+  background: var(--pill-container-background-color);
+  border: 1px solid;
+  border-color: var(--pill-container-border-color);
+  border-radius: var(--pill-container-border-radius);
+  color: var(--pill-text-color);
+  font-size: var(--pill-text-size);
+  line-height: var(--pill-text-line-height);
+}
+.pill-container span {
+  display: inline-block;
+}

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

@@ -0,0 +1,43 @@
+import { Host, h } from "@stencil/core";
+export class CpslPill {
+    constructor() {
+        this.text = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'a349d2f48d6ebc223437e1a9ca125587061659dc' }, h("div", { key: '1bf3f63a8c41fb7fa662201817f5884e3c3926fd', class: "pill-container" }, h("span", { key: 'd9ba2ff7fd44d242b5ae0ee037ae6b9c85ff4834' }, this.text))));
+    }
+    static get is() { return "cpsl-pill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the pill."
+                },
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-pill.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pill/cpsl-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;;;IAMnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pill',\n  styleUrl: 'cpsl-pill.scss',\n  shadow: true,\n})\nexport class CpslPill {\n  /**\n   * Text of the pill.\n   */\n  @Prop() text: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pill-container\">\n          <span>{this.text}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,101 @@
+/**
+ * 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 {
+  position: fixed;
+  display: block;
+  z-index: -1;
+  overflow: auto;
+  transform: var(--th, ) var(--tv, );
+}
+
+:host(.open) {
+  z-index: 10006;
+}
+
+.container {
+  visibility: hidden;
+  height: 0px;
+}
+
+.open {
+  visibility: visible;
+  height: auto;
+  z-index: 10006;
+}
+
+:host(.transform-h-left) {
+  --th: translateX(0);
+}
+
+:host(.transform-h-center) {
+  --th: translateX(-50%);
+}
+
+:host(.transform-h-right) {
+  --th: translateX(-100%);
+}
+
+:host(.transform-v-top) {
+  --tv: translateY(0);
+}
+
+:host(.transform-v-center) {
+  --tv: translateY(-50%);
+}
+
+:host(.transform-v-bottom) {
+  --tv: translateY(-100%);
+}