jebamo 0.0.1 → 0.0.2

package/dist/collection/components/multiselect/je-multiselect/je-multiselect.js

@@ -0,0 +1,244 @@
+import { Host, h } from "@stencil/core";
+export class JeMultiselect {
+    constructor() {
+        this.originalValue = [];
+        this.handleContainerClick = async () => {
+            this.el.style.setProperty('--je-content-width', `${this.el.clientWidth}px`);
+            await this.popoverEl.present('element', this.el);
+        };
+        this.isTouched = false;
+        this.open = false;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = [];
+        this.expand = undefined;
+        this.required = undefined;
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+    }
+    componentWillLoad() {
+        if (!this.el.getAttribute('name') && this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+        if (!Array.isArray(this.value)) {
+            this.value = [this.value];
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+    }
+    handlePopoverPresent() {
+        this.open = true;
+    }
+    handlePopoverDismiss() {
+        this.open = false;
+        this.el.style.removeProperty('--je-content-width');
+        this.containerEl.classList.remove('focus');
+    }
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleOptionChecked(event) {
+        this.value = [...this.value, event.detail];
+    }
+    handleOptionUnchecked(event) {
+        this.value = this.value.filter(t => t !== event.detail);
+    }
+    handleFocus() {
+        this.containerEl.classList.add('focus');
+    }
+    handleBlur() {
+        this.isTouched = true;
+        if (!this.open) {
+            this.containerEl.classList.remove('focus');
+        }
+    }
+    handleValueChange() {
+        const options = this.el.querySelectorAll('je-multiselect-option');
+        options.forEach(option => {
+            if (this.value.includes(option.value)) {
+                option.checked = true;
+            }
+            else {
+                option.checked = false;
+            }
+        });
+    }
+    render() {
+        var _a;
+        const options = Array.from(this.el.querySelectorAll('je-multiselect-option'));
+        const requiredIcon = h("je-icon", { key: '980ad087f2037c624c834a999d68d5af7571c879', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
+        const label = h("label", { key: '0a570d461dfb85f605bcede7482551da079bb610', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
+        const invalid = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
+        const containerClasses = {
+            //disabled: this.disabled,
+            touched: this.isTouched
+        };
+        if (invalid && this.isTouched) {
+            this.internals.reportValidity();
+        }
+        return (h(Host, { key: '31dc686422fd5bb829fdd3034ac1e2556dcb8624' }, h("div", { key: 'a208b2ebdede78095e9d5604d341e19310413b60', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: '42683af62e175c43f4567348d65cada1138c1c59', part: 'start-container' }, h("slot", { key: '4cc5817c81442a06f148f03c59f70cd48c6b0206', name: 'start' }), this.label && label), h("div", { key: '56c08d003cc38e89164b94b87f32547a7812ee17', part: 'main-container' }, this.value.length > 0 && options.filter(t => this.value.includes(t.value)).map(t => h("je-pill", null, t.textContent)), (this.value.length < 1 && this.placeholder) && this.placeholder), h("div", { key: '495f68c15d7217e7b78bca9eee114b36fc08d328', part: 'end-container' }, h("slot", { key: '6838d86652f01b56a5409d9dee2b611318cb876e', name: 'end' }), h("je-icon", { key: '561c44792301b1adf11755737af1f56b3b3239b9', icon: 'expand_more', class: { open: this.open } }))), h("je-popover", { key: 'e0bf1b02ad6156a2212b3c81842cb08e86233ca8', ref: el => this.popoverEl = el, exportparts: 'content' }, h("slot", { key: '2314719361ba1f5908ce59d0526bef7efbb30d06' }))));
+    }
+    static get is() { return "je-multiselect"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-multiselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-multiselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expand",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTouched": {},
+            "open": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "didPresent",
+                "method": "handlePopoverPresent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "didDismiss",
+                "method": "handlePopoverDismiss",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "optionChecked",
+                "method": "handleOptionChecked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "optionUnchecked",
+                "method": "handleOptionUnchecked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=je-multiselect.js.map

package/dist/collection/components/multiselect/je-multiselect/je-multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-multiselect.js","sourceRoot":"","sources":["../../../../src/components/multiselect/je-multiselect/je-multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Listen, Prop, State, Watch, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'je-multiselect',\n  styleUrl: 'je-multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeMultiselect {\n  @Element() el: HTMLElement;\n  @AttachInternals() internals: ElementInternals;\n  @State() isTouched = false;\n  @State() open = false;\n  private containerEl!: HTMLDivElement;\n  private popoverEl!: HTMLJePopoverElement;\n  private originalValue: string[] = [];\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop({ mutable: true }) value: string[] = [];\n  @Prop() expand?: boolean;\n  @Prop() required?: boolean;\n\n  componentDidLoad() {\n    this.originalValue = this.value;\n  }\n\n  componentWillLoad() {\n    if (!this.el.getAttribute('name') && this.label) {\n      this.el.setAttribute('name', this.label);\n    }\n\n    if (!Array.isArray(this.value)) {\n      this.value = [this.value];\n    }\n  }\n\n  formResetCallback() {\n    this.value = this.originalValue;\n  }\n\n  @Listen('didPresent')\n  handlePopoverPresent() {\n    this.open = true;\n  }\n\n  @Listen('didDismiss')\n  handlePopoverDismiss() {\n    this.open = false;\n    this.el.style.removeProperty('--je-content-width')\n    this.containerEl.classList.remove('focus');\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.el.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('optionChecked')\n  handleOptionChecked(event: CustomEvent<string>) {\n    this.value = [...this.value, event.detail];\n  }\n\n  @Listen('optionUnchecked')\n  handleOptionUnchecked(event: CustomEvent<string>) {\n    this.value = this.value.filter(t => t !== event.detail);\n  }\n\n  @Listen('focus')\n  handleFocus() {\n    this.containerEl.classList.add('focus');\n  }\n\n  @Listen('blur')\n  handleBlur() {\n    this.isTouched = true;\n    if (!this.open) {\n      this.containerEl.classList.remove('focus');\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    const options = this.el.querySelectorAll('je-multiselect-option');\n    options.forEach(option => {\n      if (this.value.includes(option.value)) {\n        option.checked = true;\n      } else {\n        option.checked = false;\n      }\n    });\n  }\n\n  private handleContainerClick = async () => {\n    this.el.style.setProperty('--je-content-width', `${this.el.clientWidth}px`);\n    await this.popoverEl.present('element', this.el);\n  }\n\n  render() {\n    const options = Array.from(this.el.querySelectorAll('je-multiselect-option'));\n    const requiredIcon = <je-icon style={{ fontSize: '10px', color: 'var(--je-error-500)' }} icon=\"asterisk\" />;\n    const label = <label part='label' style={{ display: 'flex' }}>{this.label} {this.required && requiredIcon}</label>;\n    const invalid = this.required && ((this.value ?? '') === '');\n    const containerClasses = {\n      //disabled: this.disabled,\n      touched: this.isTouched\n    };\n\n    if (invalid && this.isTouched) {\n      this.internals.reportValidity();\n    }\n\n    return (\n      <Host>\n        <div ref={el => this.containerEl = el} part='outer-container' onClick={this.handleContainerClick} class={containerClasses}>\n          <div part='start-container'>\n            <slot name='start'/>\n            {this.label && label}\n          </div>\n\n          <div part='main-container'>\n            {this.value.length > 0 && options.filter(t => this.value.includes(t.value)).map(t => <je-pill>{t.textContent}</je-pill>)}\n            {(this.value.length < 1 && this.placeholder) && this.placeholder}\n          </div>\n\n          <div part='end-container'>\n            <slot name='end'/>\n            <je-icon icon='expand_more' class={{ open: this.open }} />\n          </div>\n        </div>\n\n        <je-popover ref={el => this.popoverEl = el} exportparts='content'>\n          <slot></slot>\n        </je-popover>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/multiselect/je-multiselect-option/je-multiselect-option.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  width: 100%;
+  --je-option-hover-color: var(--je-primary-100);
+}
+
+:host([darkmode]) {
+  --je-option-hover-color: var(--je-medium-850);
+}
+
+:host(:hover) span[part=container] {
+  background-color: var(--je-option-hover-color);
+}
+
+span[part=container] {
+  display: flex;
+  align-items: center;
+  gap: var(--je-spacing-2xs);
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  width: 100%;
+  padding: var(--je-spacing-xs, 10px);
+  background-color: transparent;
+  color: inherit;
+  transition: background-color 75ms ease-in;
+}
+
+je-icon {
+  cursor: pointer;
+}

package/dist/collection/components/multiselect/je-multiselect-option/je-multiselect-option.js

@@ -0,0 +1,122 @@
+import { h } from "@stencil/core";
+export class JeMultiselectOption {
+    constructor() {
+        this.value = undefined;
+        this.checked = false;
+    }
+    handleClick() {
+        if (this.checked) {
+            this.optionUnchecked.emit(this.value);
+        }
+        else {
+            this.optionChecked.emit(this.value);
+        }
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    render() {
+        return (h("span", { key: '0e863f622655ec29084296aa28ad67b607c7e004', part: 'container' }, h("je-icon", { key: '34d5756b234d995a4797b26098e483e8a1d7e413', icon: this.checked ? 'check_box' : 'check_box_outline_blank' }), h("slot", { key: '0d543f3703dfcc2bb6355845ff91195a38f67fe0' })));
+    }
+    static get is() { return "je-multiselect-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-multiselect-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-multiselect-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionChecked",
+                "name": "optionChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "optionUnchecked",
+                "name": "optionUnchecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-multiselect-option.js.map

package/dist/collection/components/multiselect/je-multiselect-option/je-multiselect-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-multiselect-option.js","sourceRoot":"","sources":["../../../../src/components/multiselect/je-multiselect-option/je-multiselect-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAOzF,MAAM,OAAO,mBAAmB;;;uBAGK,KAAK;;IAKxC,WAAW;QACT,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAGD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,6DAAM,IAAI,EAAC,WAAW;YACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,GAAG;YACxE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-multiselect-option',\n  styleUrl: 'je-multiselect-option.scss',\n  shadow: true,\n})\nexport class JeMultiselectOption {\n  @Element() hostEl!: HTMLElement;\n  @Prop() value: string;\n  @Prop({ reflect: true }) checked = false;\n  @Event() optionChecked: EventEmitter<string>;\n  @Event() optionUnchecked: EventEmitter<string>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.checked) {\n      this.optionUnchecked.emit(this.value);\n    } else {\n      this.optionChecked.emit(this.value);\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.hostEl.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  render() {\n    return (\n      <span part='container'>\n        <je-icon icon={this.checked ? 'check_box' : 'check_box_outline_blank'}/>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--je-spacing-2xs, 8px);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+je-icon {
+  cursor: pointer;
+  color: var(--je-primary-500);
+}

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

@@ -0,0 +1,128 @@
+import { Host, h } from "@stencil/core";
+export class JeRadio {
+    constructor() {
+        this.readonly = false;
+        this.disabled = false;
+        this.value = undefined;
+        this.labelPlacement = 'end';
+        this.selected = undefined;
+    }
+    connectedCallback() {
+        const parent = this.el.closest('je-radio-group');
+        if (parent) {
+            this.disabled = parent.disabled;
+            this.readonly = parent.readonly;
+        }
+    }
+    handleClick() {
+        if (!this.disabled && !this.readonly && this.selected !== true) {
+            this.radioSelect.emit(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '1a0e6e3ae1a17ac4b29bb44a06de42e6a4a56f9b' }, this.labelPlacement == 'start' && h("slot", { key: 'ed2becb99697e46e485b02ed908a8e88100d58cb' }), h("je-icon", { key: 'c37d5f92ae5f59be880868cc865577bf6aab9b31', icon: this.selected ? 'radio_button_checked' : 'radio_button_unchecked' }), this.labelPlacement == 'end' && h("slot", { key: '3fdf2901786c28a575a8429d37ee79bf30cd9321' })));
+    }
+    static get is() { return "je-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of this option and the radio group will compare against"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the label will appear before or after the control"
+                },
+                "attribute": "label-placement",
+                "reflect": false,
+                "defaultValue": "'end'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the option is currently selected"
+                },
+                "attribute": "selected",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "readonly": {},
+            "disabled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioSelect",
+                "name": "radioSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value whenever it is selected"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-radio.js.map

package/dist/collection/components/radio/je-radio/je-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-radio.js","sourceRoot":"","sources":["../../../../src/components/radio/je-radio/je-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,OAAO;;wBAEE,KAAK;wBACL,KAAK;;8BAUiB,KAAK;;;IAY/C,iBAAiB;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACjD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;YAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,cAAc,IAAI,OAAO,IAAI,8DAAa;YAChD,gEAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,wBAAwB,GAAI;YACnF,IAAI,CAAC,cAAc,IAAI,KAAK,IAAI,8DAAa,CACzC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, State, h, Element, Event, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-radio',\n  styleUrl: 'je-radio.scss',\n  shadow: true,\n})\nexport class JeRadio {\n  @Element() el!: HTMLElement;\n  @State() readonly = false;\n  @State() disabled = false;\n\n  /**\n   * The value of this option and the radio group will compare against\n   */\n  @Prop() value: any;\n\n  /**\n   * Whether or not the label will appear before or after the control\n   */\n  @Prop() labelPlacement: 'start' | 'end' = 'end';\n\n  /**\n   * If the option is currently selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Emits the value whenever it is selected\n   */\n  @Event() radioSelect: EventEmitter<any>;\n\n  connectedCallback() {\n    const parent = this.el.closest('je-radio-group');\n    if (parent) {\n      this.disabled = parent.disabled;\n      this.readonly = parent.readonly;\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    if (!this.disabled && !this.readonly && this.selected !== true) {\n      this.radioSelect.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.labelPlacement == 'start' && <slot></slot>}\n        <je-icon icon={this.selected ? 'radio_button_checked' : 'radio_button_unchecked'} />\n        {this.labelPlacement == 'end' && <slot></slot>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio/je-radio-group/je-radio-group.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  width: fit-content;
+}
+
+label {
+  display: block;
+  font-weight: var(--je-font-semi-bold);
+  margin-bottom: var(--je-spacing-2xs);
+}