@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-checkbox/xplor-checkbox.js

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+export class XplorCheckbox {
+    constructor() {
+        this.initialChecked = false;
+        this.initialIndeterminate = false;
+        this.disabled = false;
+        this.error = false;
+        this.label = '';
+        this.checked = false;
+        this.indeterminate = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.indeterminate) {
+                // If indeterminate, go to checked state
+                this.indeterminate = false;
+                this.checked = true;
+            }
+            else {
+                // Toggle between checked and unchecked
+                this.checked = !this.checked;
+            }
+            this.checkboxChange.emit({
+                checked: this.checked,
+                indeterminate: this.indeterminate
+            });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.isPressed = true;
+                this.handleClick();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.isPressed = false;
+            }
+        };
+        this.getCheckboxClass = () => {
+            const classes = ['checkbox'];
+            if (this.checked)
+                classes.push('checked');
+            if (this.indeterminate)
+                classes.push('indeterminate');
+            if (this.disabled)
+                classes.push('disabled');
+            if (this.error)
+                classes.push('error');
+            if (this.isHovered && !this.disabled)
+                classes.push('hover');
+            if (this.isFocused && !this.disabled)
+                classes.push('focus');
+            if (this.isPressed && !this.disabled)
+                classes.push('pressed');
+            return classes.join(' ');
+        };
+    }
+    watchCheckedProp(newValue) {
+        this.checked = newValue;
+    }
+    watchIndeterminateProp(newValue) {
+        this.indeterminate = newValue;
+    }
+    componentWillLoad() {
+        this.checked = this.initialChecked;
+        this.indeterminate = this.initialIndeterminate;
+    }
+    render() {
+        return (h("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, h("div", { key: '4e1ea41fed9f07346be31da5436eeb4d8961d559', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString() }, this.checked && (h("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '25b2882bc42793685ce25b4a06ae35a3f33fb195', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+    }
+    static get is() { return "xplor-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initialChecked": {
+                "type": "boolean",
+                "attribute": "initial-checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "initialIndeterminate": {
+                "type": "boolean",
+                "attribute": "initial-indeterminate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checked": {},
+            "indeterminate": {},
+            "isHovered": {},
+            "isFocused": {},
+            "isPressed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxChange",
+                "name": "checkboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; indeterminate: boolean }",
+                    "resolved": "{ checked: boolean; indeterminate: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "initialChecked",
+                "methodName": "watchCheckedProp"
+            }, {
+                "propName": "initialIndeterminate",
+                "methodName": "watchIndeterminateProp"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-checkbox.js.map

package/dist/collection/components/xplor-checkbox/xplor-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-checkbox.js","sourceRoot":"","sources":["../../../src/components/xplor-checkbox/xplor-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-checkbox',\n  styleUrl: 'xplor-checkbox.scss',\n  shadow: true,\n})\nexport class XplorCheckbox {\n  @Prop() initialChecked: boolean = false;\n  @Prop() initialIndeterminate: boolean = false;\n\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() label: string = '';\n\n  @State() checked: boolean = false;\n  @State() indeterminate: boolean = false;\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n  @State() isPressed: boolean = false;\n\n  @Event() checkboxChange: EventEmitter<{ checked: boolean; indeterminate: boolean }>;\n\n  @Watch('initialChecked')\n  watchCheckedProp(newValue: boolean) {\n    this.checked = newValue;\n  }\n\n  @Watch('initialIndeterminate')\n  watchIndeterminateProp(newValue: boolean) {\n    this.indeterminate = newValue;\n  }\n\n  componentWillLoad() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  } private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.indeterminate) {\n      // If indeterminate, go to checked state\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      // Toggle between checked and unchecked\n      this.checked = !this.checked;\n    }\n\n    this.checkboxChange.emit({\n      checked: this.checked,\n      indeterminate: this.indeterminate\n    });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.isPressed = true;\n      this.handleClick();\n    }\n  };\n\n  private handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      this.isPressed = false;\n    }\n  };\n\n  private getCheckboxClass = () => {\n    const classes = ['checkbox'];\n\n    if (this.checked) classes.push('checked');\n    if (this.indeterminate) classes.push('indeterminate');\n    if (this.disabled) classes.push('disabled');\n    if (this.error) classes.push('error');\n    if (this.isHovered && !this.disabled) classes.push('hover');\n    if (this.isFocused && !this.disabled) classes.push('focus');\n    if (this.isPressed && !this.disabled) classes.push('pressed');\n\n    return classes.join(' ');\n  };\n\n  render() {\n    return (\n      <div class=\"checkbox-wrapper\">\n        <div\n          class={this.getCheckboxClass()}\n          onClick={this.handleClick}\n          onMouseEnter={() => this.isHovered = true}\n          onMouseLeave={() => this.isHovered = false}\n          onMouseDown={() => this.isPressed = true}\n          onMouseUp={() => this.isPressed = false}\n          onFocus={() => this.isFocused = true}\n          onBlur={() => this.isFocused = false}\n          onKeyDown={this.handleKeyDown}\n          onKeyUp={this.handleKeyUp}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.checked.toString()}\n          aria-disabled={this.disabled.toString()}\n        >\n          {this.checked && (\n            <svg class=\"check-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path\n                d=\"M13.3334 4L6.00002 11.3333L2.66669 8\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          )}\n          {this.indeterminate && (\n            <svg class=\"indeterminate-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path\n                d=\"M3.33331 8H12.6666\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          )}\n        </div>\n        {this.label && <span class=\"label\">{this.label}</span>}\n      </div>\n    );\n  }\n}"]}