@usecapsule/core-components 3.0.1 → 3.1.0

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

@@ -86,12 +86,12 @@ span.container {
   height: 100%;
   border-radius: var(--container-border-radius);
   border: var(--container-border-width-default) solid;
-  background-color: var(--container-background-color-default);
+  background: var(--container-background-color-default);
   border-color: var(--container-border-color-default);
   transition: all 0.15s ease-in-out;
 }
 span.container.checked {
-  background-color: var(--container-background-color-checked);
+  background: var(--container-background-color-checked);
   border-color: var(--container-border-color-checked);
   border-width: var(--container-border-width-checked);
 }

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

@@ -9,7 +9,7 @@ export class CpslRadio {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '9c027812c817ec008e28b66fb74ca35e407f2572' }, h("input", { key: 'da445cfc2c18da5852cd21d54daf14897d3bc13a', type: "radio", checked: this.checked }), h("span", { key: '2f432d7c3a6f33ea7581a8c62dd84078de1904d1', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (h(Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), h("span", { key: '87436a09ace01394e860786950a916efb26a9bb7', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
     static get is() { return "cpsl-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: '4a88600c071a5ec733e3480e94037c2936effacd' }, h("slot", { key: '6ed654883b1acd711843480702821efba06cec96' })));
+        return (h(Host, { key: 'a227664834127c3580926c34abdc7aacdbd9ffd6' }, h("slot", { key: '61010658365df7a30f0e3b05f45436da5acf6720' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,229 @@
+/**
+ * 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-select-border-placeholder);
+  --container-border-color: var(--cpsl-color-select-border-active);
+  --container-border-error-color: var(--cpsl-color-select-border-error);
+  --container-background-color: var(--cpsl-color-select-surface-default);
+  --container-background-color-disabled: var(--cpsl-color-select-surface-disabled);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-select);
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  --container-padding-end: 12px;
+  --container-padding-start: 12px;
+  --container-height: 48px;
+  --container-gap: 8px;
+  --dropdown-margin-top: 4px;
+  --dropdown-border-width: 1px;
+  --dropdown-border-radius: var(--cpsl-border-radius-select);
+  --dropdown-border-color: var(--cpsl-color-select-dropdown-border);
+  --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;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--cpsl-font-family, inherit);
+}
+
+input {
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  cursor: pointer;
+}
+input.disabled {
+  cursor: default;
+}
+
+:host(:not(.has-value)) {
+  --container-border-color: var(--cpsl-color-select-border-placeholder);
+  --select-color: var(--cpsl-color-text-secondary);
+}
+
+:host(.disabled) {
+  --container-background-color: var(--container-background-color-disabled);
+  --select-background-color: var(--select-background-color-disabled);
+  --select-color: var(--cpsl-color-text-disabled);
+}
+
+:host(.focused) {
+  --container-box-shadow: 0px 0px 0px 2px var(--container-box-shadow-color);
+  --container-border-color: var(--cpsl-color-select-border-active);
+  --container-background-color: var(--cpsl-color-select-surface-default);
+}
+
+.select-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);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+  height: var(--container-height);
+  gap: var(--container-gap);
+  cursor: pointer;
+  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);
+}
+
+.error-container {
+  border-color: var(--container-border-error-color);
+}
+
+.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);
+}
+
+.selected-container-content {
+  flex: 1;
+}
+
+.chevron {
+  transition: transform 0.3s ease;
+  transform: rotate(180deg);
+  --icon-color: var(--cpsl-color-text-disabled);
+}
+.chevron.open {
+  transform: rotate(0deg);
+  --icon-color: var(--cpsl-color-text-primary);
+}
+.chevron.has-value {
+  --icon-color: var(--cpsl-color-text-primary);
+}
+
+.selected-text {
+  color: var(--cpsl-color-text-primary);
+}
+.selected-text.placeholder {
+  color: var(--cpsl-color-text-disabled);
+}
+
+.dropdown {
+  margin-top: var(--dropdown-margin-top);
+  border-style: solid;
+  border-width: var(--dropdown-border-width);
+  border-color: var(--dropdown-border-color);
+  border-radius: var(--dropdown-border-radius);
+  overflow: hidden;
+}
+.dropdown ::slotted(*:last-child) {
+  --container-border-width: 0px;
+}
+
+.dropdown-inner {
+  overflow: auto;
+  scrollbar-width: thin;
+}

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

@@ -0,0 +1,409 @@
+import { Host, h } from "@stencil/core";
+export class CpslSelect {
+    constructor() {
+        this.inputId = `cpsl-select-${inputIds++}`;
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            this.popoverEl.closePopover();
+            this.cpslBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.cpslFocus.emit(ev);
+        };
+        this.handleEnterPress = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                this.el.dispatchEvent(new MouseEvent('mousedown'));
+            }
+        };
+        this.selectItem = () => {
+            const items = Array.from(this.el.querySelectorAll('cpsl-select-item'));
+            items.forEach(item => {
+                if (item.value === this.selectedValue) {
+                    item.setAttribute('selected', 'true');
+                    this.hasSelectedItem = true;
+                }
+                else {
+                    item.setAttribute('selected', 'false');
+                }
+            });
+            if (!Boolean(this.selectedValue)) {
+                this.hasSelectedItem = false;
+            }
+        };
+        this.handleClickOutside = (event) => {
+            if (this.hasFocus && !this.el.contains(event.target)) {
+                this.hasFocus = false;
+                window.removeEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.hasFocus = true;
+                window.addEventListener('click', this.handleClickOutside);
+            }
+        };
+        this.anchorEl = undefined;
+        this.hasFocus = false;
+        this.popoverOpen = false;
+        this.hasSelectedItem = false;
+        this.disabled = false;
+        this.dropdownMaxHeight = undefined;
+        this.errorText = undefined;
+        this.formatValue = undefined;
+        this.helperText = undefined;
+        this.id = `${this.inputId}-trigger`;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.required = false;
+        this.selectedValue = undefined;
+        this.showFormattedSelectedItem = undefined;
+        this.showOptionalLabel = false;
+    }
+    onValueChange() {
+        this.popoverEl.closePopover();
+    }
+    handleValueChange() {
+        this.selectItem();
+    }
+    selectItemClickHandler(event) {
+        this.cpslSelectValueChange.emit(event.detail);
+    }
+    onPopoverOpen() {
+        this.popoverOpen = true;
+    }
+    onPopoverClose() {
+        this.popoverOpen = false;
+    }
+    componentDidLoad() {
+        this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
+        this.anchorEl = this.el.shadowRoot.getElementById('select-container');
+        this.selectItem();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: 'dfe6786c9be71ebd71fee236c9b569ef1ad30eac', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: 'fbe2cfb2d93558f647442e17b29713f37375be5a', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '9e5fdf3c056a7a6c13fe9ce45caf78e27482e779', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c721fcd057a142bad5f8f473c7b4daf090e7722a', name: "selected-item" }), h("div", { key: '58c94ace573965e8151ef4a9c0648385d6b1c4dc', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'ceb4c60607b6c2cbc17a086fe702045196afbd44', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '05cf53f1ce3f8f34e47082c591f2d75d4aeea11b', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: 'a395add0f06b0d10f1e2e6d0ea81478f4a1c07d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: 'e7f991ed99ed332f5f42e666bfd2d25eecff3113', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f734a586f0dd7e94ccb2d7806fc9a6a5bdb5f50b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'c45f42267e3b4945823e27f5901b58dc5545a51e', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'cd7bdc9a3e06a2c4aed9ebe12ec3cd070e323b12', class: "dropdown" }, h("div", { key: '0e1483542dd9d63ad548242a2bc2ecb2041f8ed5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e7697bc187fc433ccb2f5728f8944ff2162387d9', name: "items" }))))));
+    }
+    static get is() { return "cpsl-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the input."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dropdownMaxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the max height of the dropdown."
+                },
+                "attribute": "dropdown-max-height",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "formatValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Format value for display when selected."
+                }
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the element, must be unique for the popover trigger."
+                },
+                "attribute": "id",
+                "reflect": false,
+                "defaultValue": "`${this.inputId}-trigger`"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder to display if `selectedValue` is empty."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectedValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the selected item."
+                },
+                "attribute": "selected-value",
+                "reflect": false
+            },
+            "showFormattedSelectedItem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value."
+                },
+                "attribute": "show-formatted-selected-item",
+                "reflect": false
+            },
+            "showOptionalLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the label will display an \"optional\" tag."
+                },
+                "attribute": "show-optional-label",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "anchorEl": {},
+            "hasFocus": {},
+            "popoverOpen": {},
+            "hasSelectedItem": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslBlur",
+                "name": "cpslBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslFocus",
+                "name": "cpslFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "cpslSelectValueChange",
+                "name": "cpslSelectValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedValue",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "selectedValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "cpslSelectItemClick",
+                "method": "selectItemClickHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cpslOpen",
+                "method": "onPopoverOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "cpslClose",
+                "method": "onPopoverClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+let inputIds = 0;
+//# sourceMappingURL=cpsl-select.js.map