@getpara/core-components 0.1.0

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

@@ -0,0 +1,90 @@
+/**
+ * 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 {
+  display: flex;
+  position: fixed;
+  z-index: 10004;
+}
+
+:host(.left) {
+  left: 0;
+  top: 0;
+  transition: left;
+}
+
+:host(.right) {
+  right: 0;
+  top: 0;
+  transition: right;
+}
+
+:host(.top) {
+  top: 0;
+  left: 0;
+  transition: top;
+}
+
+:host(.bottom) {
+  bottom: 0;
+  left: 0;
+  transition: bottom;
+}
+
+.container {
+  flex: 1;
+  overflow: auto;
+  z-index: 10004;
+}

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

@@ -0,0 +1,223 @@
+import { Host, h } from "@stencil/core";
+import { DEFAULT_Z_INDICES } from "../../constants.js";
+export class CpslDrawer {
+    constructor() {
+        this.closedAnchorPosition = undefined;
+        this.showTransition = undefined;
+        this.anchor = undefined;
+        this.anchorPosition = undefined;
+        this.noOverlay = undefined;
+        this.open = undefined;
+        this.size = undefined;
+        this.transitionDuration = 0.15;
+        this.transitionFunction = 'ease-in-out';
+        this.variant = 'temporary';
+        this.zIndexOverride = undefined;
+    }
+    componentDidLoad() {
+        this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
+        // Show transition after initial render
+        setTimeout(() => {
+            this.showTransition = true;
+        }, 100);
+    }
+    getContainerHeight() {
+        var _a;
+        return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    get containerEl() {
+        return this.el.shadowRoot.getElementById('container');
+    }
+    render() {
+        var _a;
+        const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
+        const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
+        const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
+        return (h(Host, { key: 'a658bc7f4a536ad193ffa83045fc9ee051ce00c8', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+                top: this.anchor === 'top',
+                bottom: this.anchor === 'bottom',
+                left: this.anchor === 'left',
+                right: this.anchor === 'right',
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '4af453a7893322c7327e4ae2daa36c510d79f63a', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'd223fe6203a4b927a4c7b4254fbf74bd0c5b7ba4', id: "container", class: "container", part: "container" }, h("slot", { key: 'c297bc0a9ce799ea62e84a7c15b3d56279424091' }))));
+    }
+    static get is() { return "cpsl-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which the drawer will enter from."
+                },
+                "attribute": "anchor",
+                "reflect": false
+            },
+            "anchorPosition": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Starting anchor position."
+                },
+                "attribute": "anchor-position",
+                "reflect": false
+            },
+            "noOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the overlay for temporary drawers."
+                },
+                "attribute": "no-overlay",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the drawer is open or not."
+                },
+                "attribute": "open",
+                "reflect": false
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'auto'",
+                    "resolved": "\"auto\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size (height or width) of the drawer."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "transitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the open/close animation.\nDefault is 0.15."
+                },
+                "attribute": "transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "transitionFunction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition timing function to use.\nDefault is ease-in-out."
+                },
+                "attribute": "transition-function",
+                "reflect": false,
+                "defaultValue": "'ease-in-out'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'temporary' | 'permanent'",
+                    "resolved": "\"permanent\" | \"temporary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the drawer.\n`temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\nDefault is `temporary`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'temporary'"
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "closedAnchorPosition": {},
+            "showTransition": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Element, h, State } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants.js';\n\n@Component({\n  tag: 'cpsl-drawer',\n  styleUrl: 'cpsl-drawer.scss',\n  shadow: true,\n})\nexport class CpslDrawer {\n  @Element() el!: HTMLCpslDrawerElement;\n\n  @State() closedAnchorPosition?: string;\n  @State() showTransition: boolean;\n\n  /**\n   * Side from which the drawer will enter from.\n   */\n  @Prop() anchor: 'top' | 'bottom' | 'left' | 'right';\n\n  /**\n   * Starting anchor position.\n   */\n  @Prop() anchorPosition?: number;\n\n  /**\n   * Hides the overlay for temporary drawers.\n   */\n  @Prop() noOverlay?: boolean;\n\n  /**\n   * Whether the drawer is open or not.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Size (height or width) of the drawer.\n   */\n  @Prop() size: number | 'auto';\n\n  /**\n   * Duration in seconds of the open/close animation.\n   * Default is 0.15.\n   */\n  @Prop() transitionDuration?: number = 0.15;\n\n  /**\n   * Transition timing function to use.\n   * Default is ease-in-out.\n   */\n  @Prop() transitionFunction?: string = 'ease-in-out';\n\n  /**\n   * The variant of the drawer.\n   * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n   * Default is `temporary`.\n   */\n  @Prop() variant?: 'temporary' | 'permanent' = 'temporary';\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  componentDidLoad() {\n    this.closedAnchorPosition = `-${this.getContainerHeight()}px`;\n    // Show transition after initial render\n    setTimeout(() => {\n      this.showTransition = true;\n    }, 100);\n  }\n\n  private getContainerHeight() {\n    return this.containerEl?.clientHeight;\n  }\n\n  private get containerEl() {\n    return this.el.shadowRoot.getElementById('container');\n  }\n\n  render() {\n    const setHeight = this.anchor === 'top' || this.anchor === 'bottom';\n    const startingAnchor = `${this.anchorPosition}px` ?? '0px';\n    const size = this.size === 'auto' ? 'auto' : `${this.size}px`;\n\n    return (\n      <Host\n        style={{\n          width: setHeight ? '100vw' : size,\n          height: setHeight ? size : '100vh',\n          transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`,\n          transitionTimingFunction: `${this.transitionFunction}`,\n          [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition,\n          opacity: this.closedAnchorPosition === undefined ? '0' : '1',\n          ...(this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}),\n        }}\n        class={{\n          top: this.anchor === 'top',\n          bottom: this.anchor === 'bottom',\n          left: this.anchor === 'left',\n          right: this.anchor === 'right',\n        }}\n      >\n        {this.variant === 'temporary' && !this.noOverlay && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n        <div id=\"container\" class=\"container\" part=\"container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,213 @@
+/**
+ * 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 {
+  display: block;
+  position: relative;
+  font-family: Arial, sans-serif;
+  --input-color: var(--cpsl-color-text-primary);
+  --container-background-color: var(--cpsl-color-input-surface-default);
+  --container-border-color: var(--cpsl-color-input-border-active);
+  --scrollbar-color: var(--cpsl-color-text-subtle);
+  --divider-color: var(--cpsl-color-divider);
+  --input-placeholder-color: var(--cpsl-color-text-secondary);
+  --input-font-size: var(--cpsl-font-size-body-m);
+  --button-hover-color: var(--cpsl-color-tile-button-surface-hover);
+  font-family: var(--cpsl-font-family, inherit);
+}
+
+.input-container {
+  position: relative;
+  width: 100%;
+}
+
+::slotted(cpsl-dropdown) {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  z-index: 2;
+}
+
+.dropdown-button {
+  display: flex;
+  width: 100%;
+  padding: 0 4px;
+  background: none;
+  border: none;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--input-color);
+}
+
+.dropdown-button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+
+.dropdown-button div {
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.dropdown-options {
+  display: none;
+  position: fixed;
+  list-style: none;
+  padding: 0;
+  margin-top: 4px;
+  border: 1px solid var(--container-border-color);
+  border-radius: 8px;
+  z-index: 999999999999;
+  overflow-y: auto; /* Enable vertical scrolling */
+  max-height: 300px; /* Initial max height */
+  box-sizing: border-box; /* Includes padding and border in the height */
+  background-color: var(--container-background-color); /* Background color for the ul component */
+}
+
+.dropdown-options.open {
+  display: block;
+}
+
+.dropdown-options li {
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--cpsl-color-divider);
+  color: var(--input-color);
+  background: var(--container-background-color);
+  font-size: var(--input-font-size);
+}
+
+.dropdown-options li:hover {
+  background-color: var(--button-hover-color);
+}
+
+.dropdown-options li svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  padding: 0 8px;
+  vertical-align: middle; /* Ensure vertical alignment */
+}
+
+/* Custom Scrollbar Styles */
+.dropdown-options::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent; /* Transparent scrollbar track color */
+}
+
+.dropdown-options::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-color);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  height: 8px;
+}
+
+.dropdown-options::-webkit-scrollbar-track {
+  background: transparent; /* Transparent scrollbar track color */
+}
+
+.dropdown-value {
+  margin-left: 8px;
+  color: var(--cpsl-color-text-secondary);
+}
+
+.dropdown-button .chevron {
+  transition: transform 0.3s ease;
+}
+
+.dropdown-button .chevron.closed {
+  transform: rotate(180deg);
+}
+
+.search-bar {
+  padding: 0; /* Remove padding */
+  border-bottom: 1px solid var(--cpsl-color-divider);
+  position: sticky; /* Make the search bar sticky */
+  top: 0; /* Stick to the top of the container */
+  background: var(--container-background-color); /* Ensure background color matches the dropdown */
+  z-index: 1; /* Ensure it stays above other items */
+}
+
+.search-bar input {
+  width: 100%;
+  padding: 8px; /* Add padding to match list item */
+  border: none; /* Remove inner border */
+  box-sizing: border-box;
+  font-size: var(--input-font-size);
+  color: var(--input-color);
+  background-color: var(--container-background-color);
+  border-radius: 0; /* Remove border radius for a flat look */
+}
+
+.search-bar input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.search-bar input:focus {
+  outline: none;
+  border-color: transparent; /* Ensure no border on focus */
+}