// // @ts-nocheck
// import { Component, Prop, h, State, Element, Watch } from '@stencil/core';
// import { guid } from '../../utils';
// import { ArrowDown01Icon, Tick02Icon } from '@hugeicons/react-pro';
// @Component({
//   tag: 'dga-dropdown',
//   styleUrl: 'dga-dropdown.scss',
//   // shadow: true
// })
// export class Dropdown {
//   @Element() el: HTMLElement;
//   @Prop() id: string = guid();
//   @Prop() placeholder?: string;
//   @Prop() size: 'md' | 'lg' = 'lg';
//   @Prop() variant: 'default' | 'lighter' | 'darker' = 'default';
//   @Prop() error: boolean = false;
//   @Prop() disabled: boolean = false;
//   @Prop() readonly: boolean = false;
//   @Prop() multiSelect: boolean = false;
//   @Prop() options: any[] = [];
//   @Prop() optionLabel: string = 'name';
//   @Prop() trackBy: string = 'value';
//   @Prop() getSelectedOptions?: (event: any) => void;
//   @Prop() extraClass?: string;
//   @State() optionList: any[] = [];
//   private btnRef: HTMLButtonElement;
//   private containerRef: HTMLElement;
//   componentWillLoad() {
//     this.initializeOptions();
//   }
//   @Watch('options')
//   initializeOptions() {
//     const cloneList = [...this.options].map(option => {
//       if (!option.selected) option.selected = false;
//       return option;
//     });
//     this.optionList = cloneList;
//   }
//   setSelectedOptions(option: any, index: number) {
//     const cloneList = [...this.optionList];
//     if (!this.multiSelect) {
//       cloneList.forEach(opt => (opt.selected = false));
//       cloneList[index].selected = !cloneList[index].selected;
//       if (this.getSelectedOptions) {
//         this.getSelectedOptions(option);
//       }
//     } else {
//       cloneList[index].selected = !cloneList[index].selected;
//       if (this.getSelectedOptions) {
//         this.getSelectedOptions({
//           selectedList: cloneList.filter(opt => opt.selected),
//           selectedOption: option,
//           selectedIndex: index,
//         });
//       }
//     }
//     this.optionList = cloneList;
//   }
//   handleClickOutside = (event: MouseEvent) => {
//     if (this.containerRef && !this.containerRef.contains(event.target as Node)) {
//       this.btnRef?.classList.remove('open');
//     }
//   };
//   componentDidLoad() {
//     document.addEventListener('click', this.handleClickOutside);
//   }
//   disconnectedCallback() {
//     document.removeEventListener('click', this.handleClickOutside);
//   }
//   handleAddPressed(e: MouseEvent) {
//     e.currentTarget.classList.add('active');
//   }
//   handleRemovePressed(e: MouseEvent) {
//     e.currentTarget.classList.remove('active');
//   }
//   handleToggleDropdown(e: MouseEvent) {
//     e.currentTarget.classList.toggle('open');
//   }
//   handleSelectSingleOption(e: MouseEvent, option: any, index: number) {
//     this.setSelectedOptions(option, index);
//     const target = e.target as HTMLLIElement;
//     const dropdown = target.closest('.dropdown')!;
//     const dropdownLabel = dropdown.querySelector('.dropdown__label')!;
//     const selectedOption = dropdown.querySelector('.dropdown__option.selected');
//     if (!target.classList.contains('selected')) {
//       dropdownLabel.classList.remove('dropdown__label--selection');
//       selectedOption?.classList.remove('selected');
//       target.classList.add('selected');
//       dropdownLabel.textContent = target.querySelector('.dropdown__option-label')?.textContent!;
//       dropdownLabel.classList.add('dropdown__label--selection');
//       dropdown.querySelector('.dropdown__btn')!.classList.remove('open');
//     } else {
//       dropdown.querySelector('.dropdown__btn')!.classList.remove('open');
//     }
//   }
//   getSelectedChoices(dropdown: Element) {
//     const selectedChoices: { values: string[]; labels: string[] } = {
//       values: [],
//       labels: [],
//     };
//     dropdown.querySelectorAll('.dropdown__option.selected').forEach(option => {
//       const optionValue = option.getAttribute('data-value')!;
//       const optionLabel = option.querySelector('.dropdown__option-label')?.textContent!;
//       selectedChoices.values.push(optionValue);
//       selectedChoices.labels.push(optionLabel);
//     });
//     return selectedChoices;
//   }
//   handleMultiOptionClicked(e: MouseEvent, option: any, index: number) {
//     this.setSelectedOptions(option, index);
//     const target = e.target as HTMLLIElement;
//     target.classList.toggle('selected');
//     const dropdown = target.closest('.dropdown')!;
//     const dropdownLabel = dropdown.querySelector('.dropdown__label')!;
//     const { values, labels } = this.getSelectedChoices(dropdown);
//     dropdown.setAttribute('data-value', values.join(', '));
//     dropdownLabel.textContent = labels.join(', ');
//     if (!values.length) {
//       dropdownLabel.classList.remove('dropdown__label--selection');
//     } else {
//       dropdownLabel.classList.add('dropdown__label--selection');
//     }
//   }
//   render() {
//     return (
//       <div
//         id={this.id}
//         ref={el => (this.containerRef = el)}
//         class={`dropdown dropdown--${this.size} ${this.error ? 'dropdown--error' : ''} ${this.variant !== 'default' ? `dropdown--${this.variant}` : ''} ${
//           this.disabled ? 'dropdown--disabled' : ''
//         } ${this.readonly ? 'dropdown--readonly' : ''} ${this.multiSelect ? 'dropdown--multi-select' : ''} ${this.extraClass || ''}`}
//       >
//         <button
//           class="dropdown__btn"
//           ref={el => (this.btnRef = el)}
//           disabled={this.disabled || this.readonly}
//           onClick={this.handleToggleDropdown.bind(this)}
//           onMouseDown={this.handleAddPressed.bind(this)}
//           onMouseUp={this.handleRemovePressed.bind(this)}
//           onMouseOut={this.handleRemovePressed.bind(this)}
//           type="button"
//         >
//           <span class="dropdown__label"></span>
//           <span class="dropdown__label-placeholder">{this.placeholder}</span>
//           <span class="dropdown__chevron">
//             <dga-icon icon={'ArrowDown01Icon'} variant="stroke" />
//           </span>
//         </button>
//         <ul class="dropdown__list">
//           {this.optionList.map((option, index) => {
//             if (!this.multiSelect)
//               return (
//                 <li key={option[this.trackBy] ? option[this.trackBy] : guid()}>
//                   <button
//                     class="dropdown__option"
//                     type="button"
//                     onClick={e => this.handleSelectSingleOption(e, option, index)}
//                     onMouseDown={this.handleAddPressed.bind(this)}
//                     onMouseUp={this.handleRemovePressed.bind(this)}
//                     onMouseOut={this.handleRemovePressed.bind(this)}
//                   >
//                     <span class="dropdown__option-label">{option[this.optionLabel] ? option[this.optionLabel] : ''}</span>
//                     <span class="dropdown__option-icon">
//                       <dga-icon icon={'Tick02Icon'} variant="solid" />
//                     </span>
//                   </button>
//                 </li>
//               );
//             return (
//               <li key={option[this.trackBy] ? option[this.trackBy] : guid()}>
//                 <button
//                   class={`dropdown__option dropdown__option--checkbox`}
//                   data-value={option[this.trackBy] ? option[this.trackBy] : ''}
//                   onClick={e => this.handleMultiOptionClicked(e, option, index)}
//                   onMouseDown={this.handleAddPressed.bind(this)}
//                   onMouseUp={this.handleRemovePressed.bind(this)}
//                   onMouseOut={this.handleRemovePressed.bind(this)}
//                   type="button"
//                 >
//                   <div class="dropdown__option-icon-container">
//                     <span class="dropdown__option-icon">
//                       <i class="hgi-solid hgi-tick-02" style={{
//                         fontSize:"20px"
//                       }}></i> 
//                       {/* <dga-icon icon={'Tick02Icon'} variant="solid" /> */}
//                     </span>
//                   </div>
//                   <span class="dropdown__option-label">{option[this.optionLabel] ? option[this.optionLabel] : ''}</span>
//                 </button>
//               </li>
//             );
//           })}
//         </ul>
//       </div>
//     );
//   }
// }
import { h } from "@stencil/core";
import { guid } from "../../utils";
export class Dropdown {
    constructor() {
        this.id = guid();
        this.size = 'lg';
        this.variant = 'default';
        this.error = false;
        this.disabled = false;
        this.readonly = false;
        this.multiSelect = false;
        this.options = [];
        this.optionLabel = 'name';
        this.trackBy = 'value';
        this.optionList = [];
        this.handleClickOutside = (event) => {
            var _a;
            if (this.containerRef && !this.containerRef.contains(event.target)) {
                (_a = this.btnRef) === null || _a === void 0 ? void 0 : _a.classList.remove('open');
            }
        };
    }
    handleValueChange(newValue) {
        if (newValue) {
            this.updateSelectedFromValue(newValue);
        }
    }
    initializeOptions() {
        const cloneList = [...this.options].map(option => (Object.assign(Object.assign({}, option), { selected: false })));
        this.optionList = cloneList;
    }
    updateSelectedFromValue(value) {
        const cloneList = [...this.optionList];
        if (this.multiSelect && Array.isArray(value)) {
            cloneList.forEach(option => {
                option.selected = value.includes(option[this.trackBy]);
            });
        }
        else if (!this.multiSelect && typeof value === 'string') {
            cloneList.forEach(option => {
                option.selected = option[this.trackBy] === value;
            });
        }
        this.optionList = cloneList;
        this.updateDropdownLabel();
    }
    updateDropdownLabel() {
        const selectedOptions = this.optionList.filter(opt => opt.selected);
        const dropdownLabel = this.el.querySelector('.dropdown__label');
        if (dropdownLabel) {
            if (selectedOptions.length > 0) {
                const labels = selectedOptions.map(opt => opt[this.optionLabel]);
                dropdownLabel.textContent = labels.join(', ');
                dropdownLabel.classList.add('dropdown__label--selection');
            }
            else {
                dropdownLabel.textContent = '';
                dropdownLabel.classList.remove('dropdown__label--selection');
            }
        }
    }
    componentWillLoad() {
        this.initializeOptions();
        if (this.value) {
            this.updateSelectedFromValue(this.value);
        }
    }
    componentDidLoad() {
        document.addEventListener('click', this.handleClickOutside);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleClickOutside);
    }
    handleAddPressed(e) {
        const target = e.currentTarget;
        target.classList.add('active');
    }
    handleRemovePressed(e) {
        const target = e.currentTarget;
        target.classList.remove('active');
    }
    handleToggleDropdown(e) {
        const target = e.currentTarget;
        target.classList.toggle('open');
    }
    setSelectedOptions(option, index) {
        const cloneList = [...this.optionList];
        if (!this.multiSelect) {
            cloneList.forEach(opt => (opt.selected = false));
            cloneList[index].selected = !cloneList[index].selected;
            if (this.onChange) {
                this.onChange(option[this.trackBy]);
            }
            if (this.getSelectedOptions) {
                this.getSelectedOptions(option);
            }
        }
        else {
            cloneList[index].selected = !cloneList[index].selected;
            if (this.onChange) {
                const selectedValues = cloneList
                    .filter(opt => opt.selected)
                    .map(opt => opt[this.trackBy]);
                this.onChange(selectedValues);
            }
            if (this.getSelectedOptions) {
                this.getSelectedOptions({
                    selectedList: cloneList.filter(opt => opt.selected),
                    selectedOption: option,
                    selectedIndex: index,
                });
            }
        }
        this.optionList = cloneList;
    }
    handleSelectSingleOption(e, option, index) {
        var _a, _b;
        this.setSelectedOptions(option, index);
        const target = e.target;
        const dropdown = target.closest('.dropdown');
        const dropdownLabel = dropdown === null || dropdown === void 0 ? void 0 : dropdown.querySelector('.dropdown__label');
        const selectedOption = dropdown === null || dropdown === void 0 ? void 0 : dropdown.querySelector('.dropdown__option.selected');
        if (dropdown && dropdownLabel) {
            if (!target.classList.contains('selected')) {
                dropdownLabel.classList.remove('dropdown__label--selection');
                selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.classList.remove('selected');
                target.classList.add('selected');
                const optionLabel = target.querySelector('.dropdown__option-label');
                if (optionLabel) {
                    dropdownLabel.textContent = optionLabel.textContent;
                    dropdownLabel.classList.add('dropdown__label--selection');
                }
                (_a = dropdown.querySelector('.dropdown__btn')) === null || _a === void 0 ? void 0 : _a.classList.remove('open');
            }
            else {
                (_b = dropdown.querySelector('.dropdown__btn')) === null || _b === void 0 ? void 0 : _b.classList.remove('open');
            }
        }
    }
    getSelectedChoices(dropdown) {
        const selectedChoices = {
            values: [],
            labels: []
        };
        dropdown.querySelectorAll('.dropdown__option.selected').forEach(option => {
            var _a;
            const optionValue = option.getAttribute('data-value');
            const optionLabel = (_a = option.querySelector('.dropdown__option-label')) === null || _a === void 0 ? void 0 : _a.textContent;
            if (optionValue && optionLabel) {
                selectedChoices.values.push(optionValue);
                selectedChoices.labels.push(optionLabel);
            }
        });
        return selectedChoices;
    }
    handleMultiOptionClicked(e, option, index) {
        this.setSelectedOptions(option, index);
        const target = e.target;
        target.classList.toggle('selected');
        const dropdown = target.closest('.dropdown');
        if (dropdown) {
            const dropdownLabel = dropdown.querySelector('.dropdown__label');
            if (dropdownLabel) {
                const { values, labels } = this.getSelectedChoices(dropdown);
                dropdown.setAttribute('data-value', values.join(', '));
                dropdownLabel.textContent = labels.join(', ');
                if (values.length === 0) {
                    dropdownLabel.classList.remove('dropdown__label--selection');
                }
                else {
                    dropdownLabel.classList.add('dropdown__label--selection');
                }
            }
        }
    }
    render() {
        const dropdownClasses = {
            'dropdown': true,
            [`dropdown--${this.size}`]: true,
            'dropdown--error': this.error,
            [`dropdown--${this.variant}`]: this.variant !== 'default',
            'dropdown--disabled': this.disabled,
            'dropdown--readonly': this.readonly,
            'dropdown--multi-select': this.multiSelect,
            [this.extraClass]: !!this.extraClass
        };
        return (h("div", { key: 'acb76594962989334df0737f5a47eaa37a9d2820', id: this.id, ref: el => (this.containerRef = el), class: Object.keys(dropdownClasses)
                .filter(key => dropdownClasses[key])
                .join(' ') }, h("button", { key: '33748265e3b5e5daf678535f7de61eec1f278c0f', class: "dropdown__btn", ref: el => (this.btnRef = el), disabled: this.disabled || this.readonly, onClick: this.handleToggleDropdown.bind(this), onMouseDown: this.handleAddPressed.bind(this), onMouseUp: this.handleRemovePressed.bind(this), onMouseOut: this.handleRemovePressed.bind(this), type: "button" }, h("span", { key: 'cbc663dc0ee9700cf15845554e119df4377ba129', class: "dropdown__label" }), h("span", { key: '9300b3b7d89a144d6d7cfaca9ecd119c405ac45d', class: "dropdown__label-placeholder" }, this.placeholder), h("span", { key: 'bd407ecc89097ae20c998a3ec87f0e9b985cae3e', class: "dropdown__chevron" }, h("dga-icon", { key: '108dff2ae7b355834676ee7abd2a8eb6bb1801f5', icon: 'ArrowDown01Icon', variant: "stroke" }))), h("ul", { key: '1b4cfb36920783249ce8f4e7aa08f97f4692db86', class: "dropdown__list" }, this.optionList.map((option, index) => (h("li", { key: option[this.trackBy] || guid() }, h("button", { class: {
                'dropdown__option': true,
                'dropdown__option--checkbox': this.multiSelect,
                'selected': option.selected
            }, "data-value": option[this.trackBy], onClick: e => this.multiSelect
                ? this.handleMultiOptionClicked(e, option, index)
                : this.handleSelectSingleOption(e, option, index), onMouseDown: this.handleAddPressed.bind(this), onMouseUp: this.handleRemovePressed.bind(this), onMouseOut: this.handleRemovePressed.bind(this), type: "button" }, this.multiSelect && (h("div", { class: "dropdown__option-icon-container" }, h("span", { class: "dropdown__option-icon" }, h("i", { class: "hgi-solid hgi-tick-02", style: { fontSize: "20px" } })))), h("span", { class: "dropdown__option-label" }, option[this.optionLabel] || ''), !this.multiSelect && (h("span", { class: "dropdown__option-icon" }, h("dga-icon", { icon: 'Tick02Icon', variant: "solid" }))))))))));
    }
    static get is() { return "dga-dropdown"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-dropdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "id",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'lg'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'lighter' | 'darker'",
                    "resolved": "\"darker\" | \"default\" | \"lighter\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "error",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "multiSelect": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "multi-select",
                "reflect": false,
                "defaultValue": "false"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "optionLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "option-label",
                "reflect": false,
                "defaultValue": "'name'"
            },
            "trackBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "track-by",
                "reflect": false,
                "defaultValue": "'value'"
            },
            "getSelectedOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: any) => void",
                    "resolved": "(event: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "extraClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "extra-class",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: string | string[]) => void",
                    "resolved": "(value: string | string[]) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "optionList": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleValueChange"
            }, {
                "propName": "options",
                "methodName": "initializeOptions"
            }];
    }
}
//# sourceMappingURL=dga-dropdown.js.map
