@getpara/core-components 0.1.0

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

@@ -0,0 +1,250 @@
+import { Host, h } from "@stencil/core";
+import { Icons } from "../../assets/icons/index.js";
+export class CpslDropdown {
+    constructor() {
+        this.toggleDropdown = () => {
+            this.isOpen = !this.isOpen;
+        };
+        this.selectItem = (item, emitEvent = true) => {
+            this.selectedItem = item;
+            this.isOpen = false;
+            if (emitEvent) {
+                this.selectedItemChange.emit(this.selectedItem);
+            }
+        };
+        this.handleItemSelect = (item) => () => {
+            this.selectItem(item);
+        };
+        this.handleSearchQueryChange = (event) => {
+            const target = event.target;
+            this.searchQuery = target.value;
+            this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));
+        };
+        this.handleClickOutside = (event) => {
+            if (this.isOpen && !this.el.contains(event.target)) {
+                this.isOpen = false;
+            }
+        };
+        this.width = '100%';
+        this.hasCpslSearch = false;
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.filteredItems = [];
+        this.items = [];
+        this.selectedItem = null;
+    }
+    handleSelectedItemChange(newValue) {
+        if (newValue !== null) {
+            this.selectItem(newValue, false);
+        }
+    }
+    handleOpenChange() {
+        if (this.isOpen) {
+            this.adjustPosition();
+            this.addClickOutsideListener();
+        }
+        else {
+            this.removeClickOutsideListener();
+        }
+    }
+    handleResize() {
+        if (this.isOpen) {
+            this.adjustPosition();
+        }
+    }
+    adjustPosition() {
+        var _a;
+        const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
+        const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const searchBar = this.el.shadowRoot.querySelector('.search-bar');
+        const viewportHeight = window.innerHeight;
+        if (parentRect) {
+            this.width = `${parentRect.width}px`;
+            dropdownOptions.style.left = `${parentRect.x}px`;
+            if (window.innerWidth <= 480) {
+                searchBar.style.maxHeight = `30px`;
+                dropdownOptions.style.top = `425px`;
+                dropdownOptions.style.maxHeight = '110px';
+                return;
+            }
+            dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
+            const availableHeight = viewportHeight - parentRect.bottom;
+            dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
+        }
+    }
+    addClickOutsideListener() {
+        window.addEventListener('click', this.handleClickOutside);
+    }
+    removeClickOutsideListener() {
+        window.removeEventListener('click', this.handleClickOutside);
+    }
+    componentWillLoad() {
+        if (this.items.length > 0) {
+            this.filteredItems = [...this.items];
+            if (this.selectedItem !== null) {
+                this.selectItem(this.selectedItem, false);
+            }
+            else {
+                this.selectedItem = this.items[0];
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.removeClickOutsideListener();
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '95a5e98e81c71d0d22fb92dc7669a071c8982d5d' }, h("button", { key: '56b6bfca6283796be4a68b4bf2eb2404637c50e7', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'd589fca8b9ac25d0884b5a059c618b14547ca9fc', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'ae1977c621830127463fcc142e26141a93780048', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '98225551b1a3f5fcd744c873d09ea606e2b3141f', class: "search-bar" }, h("input", { key: '71988503de0b51e3e3cd771c11f25809da813db5', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+    }
+    static get is() { return "cpsl-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the dropdown"
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "hasCpslSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to include search capability"
+                },
+                "attribute": "has-cpsl-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<DropdownInputEventDetail>",
+                    "resolved": "DropdownInputEventDetail[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "DropdownInputEventDetail": {
+                            "location": "import",
+                            "path": "./dropdown-interface.js",
+                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to be presented in the dropdown"
+                },
+                "defaultValue": "[]"
+            },
+            "selectedItem": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DropdownInputEventDetail | null",
+                    "resolved": "DropdownInputEventDetail",
+                    "references": {
+                        "DropdownInputEventDetail": {
+                            "location": "import",
+                            "path": "./dropdown-interface.js",
+                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected item in the dropdown"
+                },
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "searchQuery": {},
+            "filteredItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedItemChange",
+                "name": "selectedItemChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the selected item changes"
+                },
+                "complexType": {
+                    "original": "DropdownInputEventDetail",
+                    "resolved": "DropdownInputEventDetail",
+                    "references": {
+                        "DropdownInputEventDetail": {
+                            "location": "import",
+                            "path": "./dropdown-interface.js",
+                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedItem",
+                "methodName": "handleSelectedItemChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons/index.js';\nimport { DropdownInputEventDetail } from './dropdown-interface.js';\n\n@Component({\n  tag: 'cpsl-dropdown',\n  styleUrl: 'cpsl-dropdown.scss',\n  shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n  @Element() el: HTMLCpslDropdownElement;\n\n  /**\n   * Width of the dropdown\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Whether or not to include search capability\n   */\n  @Prop() hasCpslSearch: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() searchQuery: string = '';\n  @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * Items to be presented in the dropdown\n   */\n  @Prop() items: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * The selected item in the dropdown\n   */\n  @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail | null = null;\n\n  /**\n   * Event emitted when the selected item changes\n   */\n  @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n  @Watch('selectedItem')\n  handleSelectedItemChange(newValue: DropdownInputEventDetail | null) {\n    if (newValue !== null) {\n      this.selectItem(newValue, false);\n    }\n  }\n\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n    this.selectedItem = item;\n    this.isOpen = false;\n    if (emitEvent) {\n      this.selectedItemChange.emit(this.selectedItem);\n    }\n  };\n\n  private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n    this.selectItem(item);\n  };\n\n  private handleSearchQueryChange = (event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    this.searchQuery = target.value;\n    this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n  };\n\n  @Watch('isOpen')\n  handleOpenChange() {\n    if (this.isOpen) {\n      this.adjustPosition();\n      this.addClickOutsideListener();\n    } else {\n      this.removeClickOutsideListener();\n    }\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.isOpen) {\n      this.adjustPosition();\n    }\n  }\n\n  private adjustPosition() {\n    const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n    const parentRect = this.el.parentElement?.getBoundingClientRect();\n    const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n    const viewportHeight = window.innerHeight;\n\n    if (parentRect) {\n      this.width = `${parentRect.width}px`;\n      dropdownOptions.style.left = `${parentRect.x}px`;\n      if (window.innerWidth <= 480) {\n        searchBar.style.maxHeight = `30px`;\n        dropdownOptions.style.top = `425px`;\n        dropdownOptions.style.maxHeight = '110px';\n        return;\n      }\n      dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n      const availableHeight = viewportHeight - parentRect.bottom;\n      dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n    }\n  }\n\n  private addClickOutsideListener() {\n    window.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeClickOutsideListener() {\n    window.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  componentWillLoad() {\n    if (this.items.length > 0) {\n      this.filteredItems = [...this.items];\n      if (this.selectedItem !== null) {\n        this.selectItem(this.selectedItem, false);\n      } else {\n        this.selectedItem = this.items[0];\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeClickOutsideListener();\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n          {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n          <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n        </button>\n        <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n          {this.hasCpslSearch && (\n            <li class=\"search-bar\">\n              <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n            </li>\n          )}\n          {this.filteredItems.map(item => (\n            <li onClick={this.handleItemSelect(item)}>\n              <span innerHTML={Icons[item.icon]}></span>\n              {item.label} <span class=\"dropdown-value\">{item.value}</span>\n            </li>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from '../../interface.js';\n\nexport interface DropdownInputEventDetail {\n  icon: IconType;\n  label: string;\n  value: string;\n  selectedLabel?: string;\n}\n"]}

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.css

@@ -0,0 +1,212 @@
+/**
+ * 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-box-shadow: none;
+  --container-box-shadow-color: var(--cpsl-color-file-border-placeholder);
+  --container-border-color: var(--cpsl-color-file-border-placeholder);
+  --container-border-color-error: var(--cpsl-color-file-border-error);
+  --container-background-color: var(--cpsl-color-file-surface-default);
+  --container-background-color-disabled: var(--cpsl-color-file-surface-disabled);
+  --container-background-color-drag: var(--cpsl-color-file-surface-drag);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-file);
+  --container-padding-top: 12px;
+  --container-padding-bottom: 12px;
+  --container-padding-end: 12px;
+  --container-padding-start: 12px;
+  --container-height: 48px;
+  --container-gap: 8px;
+  --optional-label-color: var(--cpsl-color-text-secondary);
+  --label-color: var(--cpsl-color-text-primary);
+  --label-font-size: var(--cpsl-font-size-body-s);
+  --label-margin-bottom: 0px;
+  --helper-text-color: var(--cpsl-color-text-secondary);
+  --helper-text-error-color: var(--cpsl-color-text-error);
+  --helper-text-icon-color: var(--cpsl-color-text-secondary);
+  --helper-text-icon-error-color: var(--cpsl-color-text-error);
+  --helper-text-icon-size: 16px;
+  --helper-text-font-size: var(--cpsl-font-size-body-xs);
+  --helper-text-margin-top: 0px;
+  --sample-img-height: 40px;
+  --sample-img-width: 40px;
+  --sample-img-border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--cpsl-font-family, inherit);
+}
+
+.container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--container-gap);
+  cursor: pointer;
+  position: relative;
+  border-style: solid;
+  border-width: var(--container-border-width);
+  border-color: var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  background: var(--container-background-color);
+  box-shadow: var(--container-box-shadow);
+}
+.container.drag, .container:active {
+  background: var(--container-background-color-drag);
+}
+.container.drag-error {
+  cursor: no-drop;
+}
+.container.error {
+  border-color: var(--container-border-color-error);
+}
+
+input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0px;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.sample-img {
+  height: var(--sample-img-height);
+  width: var(--sample-img-width);
+  border-radius: var(--sample-img-border-radius);
+  object-fit: contain;
+}
+
+.sample-image-name-container {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  text-align: center;
+}
+.sample-image-name-container cpsl-icon {
+  z-index: 10000;
+  --height: 16px;
+  --width: 16px;
+}
+
+.inline-text {
+  display: inline-block;
+}
+
+.sample-image-name {
+  display: inline-block;
+  color: var(--cpsl-color-text-tertiary);
+}
+
+.label-container {
+  flex: 1;
+}
+
+.file-container {
+  display: flex;
+  flex-direction: column;
+  flex: 0;
+  min-width: 33%;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
+  display: inline-block;
+  color: var(--label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+  margin-bottom: var(--label-margin-bottom);
+}
+
+.optional-label {
+  display: inline-block;
+  color: var(--optional-label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+}
+
+.helper-text-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--helper-text-color);
+  font-size: var(--helper-text-font-size);
+  font-weight: 500;
+  margin-top: var(--helper-text-margin-top);
+}
+.helper-text-container cpsl-icon {
+  --height: var(--helper-text-icon-size);
+  --width: var(--helper-text-icon-size);
+  --icon-color: var(--helper-text-icon-color);
+}
+
+.error-text {
+  color: var(--helper-text-error-color);
+}
+.error-text cpsl-icon {
+  --icon-color: var(--helper-text-icon-error-color);
+}