@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-input-select/xplor-input-select.js

@@ -0,0 +1,430 @@
+import { Host, h } from "@stencil/core";
+export class XplorInputSelect {
+    constructor() {
+        /**
+         * Selected value(s)
+         */
+        this.value = null;
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Select...';
+        /**
+         * Options array
+         */
+        this.options = [];
+        /**
+         * Whether multiple selection is allowed
+         */
+        this.multiple = false;
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the select is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the select is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether to hide validation details
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Error message
+         */
+        this.error = '';
+        /**
+         * Helper text
+         */
+        this.helperText = '';
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        this.isOpen = false;
+        this.isFocused = false;
+        this.handleOutsideClick = (event) => {
+            if (this.selectRef && !this.selectRef.contains(event.target)) {
+                this.isOpen = false;
+            }
+        };
+        this.toggleDropdown = () => {
+            if (!this.disabled && !this.readonly) {
+                this.isOpen = !this.isOpen;
+            }
+        };
+        this.handleOptionClick = (option) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                const index = currentValue.findIndex((v) => v === option.value);
+                if (index > -1) {
+                    this.value = currentValue.filter((_, i) => i !== index);
+                }
+                else {
+                    this.value = [...currentValue, option.value];
+                }
+            }
+            else {
+                this.value = option.value;
+                this.isOpen = false;
+            }
+            this.xplorChange.emit(this.value);
+        };
+        this.isSelected = (option) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                return currentValue.includes(option.value);
+            }
+            return this.value === option.value;
+        };
+        this.getDisplayValue = () => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                if (currentValue.length === 0)
+                    return this.placeholder;
+                const selectedOptions = this.options.filter((opt) => currentValue.includes(opt.value));
+                return `${selectedOptions.length} selected`;
+            }
+            const selectedOption = this.options.find((opt) => opt.value === this.value);
+            return selectedOption ? selectedOption.title : this.placeholder;
+        };
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-select': true,
+            'xplor-input-select--open': this.isOpen,
+            'xplor-input-select--focused': this.isFocused,
+            'xplor-input-select--disabled': this.disabled,
+            'xplor-input-select--error': !!this.error,
+        };
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
+        return (h(Host, { key: '186b55603079f4fec337dc824c2e3a4776472ae6' }, h("div", { key: '07d765115aa286e8da1f13fc76f55c6c6e9008c1', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '6e1116ba611eee1673ffdb71c5bb15455afd5921', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '77cefc98c67261ebcddac9c179f01cd6615306e8', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b65e671edced0c0f1780ecdd74cc23197310a550', class: "xplor-input-select__field", onClick: this.toggleDropdown }, h("div", { key: '52e7b58288c7d4c7ad4d505ae03f75204d461f15', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '7c780d75bc62648aed641e0d4be4e4d55065099b', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("div", { key: '809f4c0254c09d61cdf597e467daf8d1f5f7667c', class: "xplor-input-select__menu" }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
+                'xplor-input-select__option': true,
+                'xplor-input-select__option--selected': this.isSelected(option),
+            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '73f7808a7261cce5b3dc6e28e9771d9d669835d7', class: "xplor-input-select__details" }, this.error && h("div", { key: '9e934df8f33b080fd528fa99d0c5a4cb78c8f03a', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '8c0bdbc7304c433cca0d85d09c213f6ccf5f3b29', class: "xplor-input-select__helper-text" }, this.helperText))))));
+    }
+    static get is() { return "xplor-input-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-input-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-input-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "any | any[]",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value(s)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Select...'"
+            },
+            "options": {
+                "type": "unknown",
+                "attribute": "options",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
+                            "id": "src/components/xplor-input-select/xplor-input-select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether multiple selection is allowed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bgColor": {
+                "type": "string",
+                "attribute": "bg-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'white'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border/focus color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideDetails": {
+                "type": "any",
+                "attribute": "hide-details",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'auto'",
+                    "resolved": "\"auto\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to hide validation details"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "attribute": "helper-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorChange",
+                "name": "xplorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-input-select.js.map

package/dist/collection/components/xplor-input-select/xplor-input-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-input-select.js","sourceRoot":"","sources":["../../../src/components/xplor-input-select/xplor-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n  value: any;\n  title: string;\n  subtitle?: string;\n  [key: string]: any;\n}\n\n@Component({\n  tag: 'xplor-input-select',\n  styleUrl: 'xplor-input-select.scss',\n  scoped: true,\n})\nexport class XplorInputSelect {\n  private selectRef: HTMLDivElement;\n\n  /**\n   * Selected value(s)\n   */\n  @Prop({ mutable: true }) value: any | any[] = null;\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Select...';\n\n  /**\n   * Options array\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /**\n   * Whether multiple selection is allowed\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the select is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the select is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<any>;\n\n  @State() isOpen: boolean = false;\n  @State() isFocused: boolean = false;\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n  }\n\n  private handleOutsideClick = (event: MouseEvent) => {\n    if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private toggleDropdown = () => {\n    if (!this.disabled && !this.readonly) {\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleOptionClick = (option: SelectOption) => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      const index = currentValue.findIndex((v) => v === option.value);\n\n      if (index > -1) {\n        this.value = currentValue.filter((_, i) => i !== index);\n      } else {\n        this.value = [...currentValue, option.value];\n      }\n    } else {\n      this.value = option.value;\n      this.isOpen = false;\n    }\n\n    this.xplorChange.emit(this.value);\n  };\n\n  private isSelected = (option: SelectOption): boolean => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      return currentValue.includes(option.value);\n    }\n    return this.value === option.value;\n  };\n\n  private getDisplayValue = (): string => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      if (currentValue.length === 0) return this.placeholder;\n\n      const selectedOptions = this.options.filter((opt) =>\n        currentValue.includes(opt.value)\n      );\n      return `${selectedOptions.length} selected`;\n    }\n\n    const selectedOption = this.options.find((opt) => opt.value === this.value);\n    return selectedOption ? selectedOption.title : this.placeholder;\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-select': true,\n      'xplor-input-select--open': this.isOpen,\n      'xplor-input-select--focused': this.isFocused,\n      'xplor-input-select--disabled': this.disabled,\n      'xplor-input-select--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n          {this.label && (\n            <label class=\"xplor-input-select__label\">\n              {this.label}\n              {this.required && <span class=\"xplor-input-select__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown}>\n            <div class=\"xplor-input-select__value\">\n              {this.getDisplayValue()}\n            </div>\n            <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"xplor-input-select__menu\">\n              {this.options.length === 0 ? (\n                <div class=\"xplor-input-select__empty\">No options available</div>\n              ) : (\n                this.options.map((option) => (\n                  <div\n                    key={option.value}\n                    class={{\n                      'xplor-input-select__option': true,\n                      'xplor-input-select__option--selected': this.isSelected(option),\n                    }}\n                    onClick={() => this.handleOptionClick(option)}\n                  >\n                    {this.multiple && (\n                      <input\n                        type=\"checkbox\"\n                        class=\"xplor-input-select__checkbox\"\n                        checked={this.isSelected(option)}\n                        readOnly\n                      />\n                    )}\n                    <div class=\"xplor-input-select__option-content\">\n                      <div class=\"xplor-input-select__option-title\">{option.title}</div>\n                      {option.subtitle && (\n                        <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n                      )}\n                    </div>\n                  </div>\n                ))\n              )}\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"xplor-input-select__details\">\n              {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}