@usecapsule/core-components 3.0.0 → 3.0.1-dev.2

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,427 @@
+import { Host, h } from "@stencil/core";
+export class CpslSelect {
+    constructor() {
+        this.inputId = `cpsl-select-${inputIds++}`;
+        this.resetStyles = () => {
+            document.documentElement.style.removeProperty('overflow');
+            document.body.style.removeProperty('padding-right');
+        };
+        this.measureScrollbarWidth = () => {
+            const scrollbox = document.createElement('div');
+            scrollbox.style.overflow = 'scroll';
+            document.body.appendChild(scrollbox);
+            const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
+            document.body.removeChild(scrollbox);
+            return scrollBarWidth;
+        };
+        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;
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
+    }
+    onPopoverClose() {
+        this.popoverOpen = false;
+        this.resetStyles();
+    }
+    componentDidLoad() {
+        this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
+        this.anchorEl = this.el.shadowRoot.getElementById('select-container');
+        this.selectItem();
+    }
+    disconnectedCallback() {
+        this.resetStyles();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', 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: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', 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: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', 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