@spw-ds/spw-stencil-library 0.0.1

package/dist/collection/components/spw-custom-select/spw-custom-select.js

@@ -0,0 +1,680 @@
+import { h } from "@stencil/core";
+export class SpwCustomSelect {
+    constructor() {
+        this.handleClickOutside = (event) => {
+            var _a, _b;
+            if (this.isOpen) {
+                const target = event.composedPath()[0];
+                const isInsideHost = this.host.contains(target);
+                const searchField = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.spw-custom-select__search-input');
+                const isInsideSearchField = searchField === null || searchField === void 0 ? void 0 : searchField.contains(target);
+                if (!isInsideHost && !isInsideSearchField) {
+                    if (this.multiple) {
+                        const optionsContainer = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.spw-custom-select__options');
+                        if (optionsContainer && optionsContainer.contains(target)) {
+                            return;
+                        }
+                    }
+                    this.closeDropdown();
+                }
+            }
+        };
+        this.internalValue = undefined;
+        this.isOpen = false;
+        this.parsedOptions = [];
+        this.focusedOptionIndex = null;
+        this.searchText = '';
+        this.dropdownDirection = 'down';
+        this.hasSelectedValue = false;
+        this.value = [];
+        this.label = '';
+        this.placeholder = 'Sélectionnez une option';
+        this.disabled = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.options = undefined;
+        this.size = 'medium';
+        this.multiple = false;
+        this.isSearch = false;
+        this.assistiveText = undefined;
+        this.error = '';
+        this.hint = '';
+        this.success = '';
+        this.showErrorIcon = true;
+        this.showHintIcon = true;
+        this.showSuccessIcon = true;
+    }
+    componentWillLoad() {
+        if (this.multiple) {
+            if (typeof this.value === 'string') {
+                try {
+                    this.internalValue = JSON.parse(this.value);
+                }
+                catch (e) {
+                    this.internalValue = [];
+                }
+            }
+            else if (Array.isArray(this.value)) {
+                this.internalValue = this.value;
+            }
+            else {
+                this.internalValue = [];
+            }
+        }
+        else {
+            this.internalValue = this.value;
+        }
+        if (this.options) {
+            this.parseOptions(this.options);
+        }
+        this.updateSelectedOption();
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside);
+        this.internals.setFormValue(this.getFormValue());
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    parseOptions(newValue) {
+        try {
+            this.parsedOptions = JSON.parse(newValue).map(option => ({
+                value: option.value,
+                label: option.label,
+            }));
+            this.updateSelectedOption();
+        }
+        catch (e) {
+            this.parsedOptions = [];
+        }
+    }
+    valueChangedHandler(newValue) {
+        if (this.multiple) {
+            this.internalValue = Array.isArray(newValue) ? newValue : [newValue];
+        }
+        else {
+            this.internalValue = newValue;
+        }
+        this.updateSelectedOption();
+        this.internals.setFormValue(this.getFormValue());
+        this.valueChanged.emit(this.internalValue);
+    }
+    updateSelectedOption() {
+        this.internals.setFormValue(this.getFormValue());
+        if (!this.multiple && this.internalValue !== undefined) {
+            this.focusedOptionIndex = this.parsedOptions.findIndex(option => String(option.value) === String(this.internalValue));
+        }
+        else if (this.multiple && Array.isArray(this.internalValue)) {
+            this.internalValue = this.internalValue
+                .filter(val => this.parsedOptions.some(option => String(option.value) === String(val)))
+                .sort((a, b) => this.parsedOptions.findIndex(option => String(option.value) === String(a)) - this.parsedOptions.findIndex(option => String(option.value) === String(b)));
+        }
+    }
+    internalValueChanged() {
+        this.hasSelectedValue = Array.isArray(this.internalValue) ? this.internalValue.length > 0 : Boolean(this.internalValue);
+    }
+    getFormValue() {
+        if (this.multiple) {
+            return Array.isArray(this.internalValue) && this.internalValue.length > 0 ? this.internalValue.map(v => String(v)).join(',') : null;
+        }
+        return this.internalValue ? String(this.internalValue) : null;
+    }
+    toggleDropdown(event) {
+        if (!this.disabled) {
+            if (event) {
+                const target = event.composedPath()[0];
+                if (target.classList.contains('spw-custom-select__search-input')) {
+                    return;
+                }
+                event.stopPropagation();
+            }
+            this.determineDropdownDirection();
+            this.isOpen = !this.isOpen;
+            if (!this.isOpen) {
+                this.focusedOptionIndex = null;
+            }
+        }
+    }
+    determineDropdownDirection() {
+        const rect = this.selectContainer.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        if (rect.bottom + 200 > viewportHeight && rect.top > 200) {
+            this.dropdownDirection = 'up';
+        }
+        else {
+            this.dropdownDirection = 'down';
+        }
+    }
+    openDropdownWithKeyboard() {
+        this.determineDropdownDirection();
+        this.isOpen = true;
+        this.focusedOptionIndex = 0;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.focusedOptionIndex = null;
+        this.searchText = '';
+    }
+    selectOption(optionValue, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.multiple) {
+            const index = this.internalValue.findIndex(val => String(val) === String(optionValue));
+            if (index > -1) {
+                this.internalValue = [...this.internalValue.slice(0, index), ...this.internalValue.slice(index + 1)];
+            }
+            else {
+                this.internalValue = [...this.internalValue, optionValue];
+            }
+            this.internalValue = this.internalValue.sort((a, b) => this.parsedOptions.findIndex(option => String(option.value) === String(a)) - this.parsedOptions.findIndex(option => String(option.value) === String(b)));
+        }
+        else {
+            this.internalValue = optionValue;
+            this.closeDropdown();
+        }
+        this.value = this.internalValue;
+        this.internals.setFormValue(this.getFormValue());
+        this.valueChanged.emit(this.internalValue);
+        this.updateSelectedOption();
+    }
+    handleOptionKeyDown(event, optionValue) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.selectOption(optionValue);
+        }
+    }
+    handleKeyDown(event) {
+        if (event.target.classList.contains('spw-custom-select__search-input')) {
+            return;
+        }
+        switch (event.key) {
+            case ' ':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.openDropdownWithKeyboard();
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.isOpen) {
+                    this.focusedOptionIndex = this.focusedOptionIndex === null ? 0 : (this.focusedOptionIndex + 1) % this.parsedOptions.length;
+                }
+                else {
+                    this.openDropdownWithKeyboard();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen) {
+                    this.focusedOptionIndex =
+                        this.focusedOptionIndex === null ? this.parsedOptions.length - 1 : (this.focusedOptionIndex - 1 + this.parsedOptions.length) % this.parsedOptions.length;
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.isOpen && this.focusedOptionIndex !== null) {
+                    this.selectOption(this.parsedOptions[this.focusedOptionIndex].value);
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen) {
+                    this.closeDropdown();
+                }
+                break;
+        }
+    }
+    renderErrorMessage() {
+        if (this.error) {
+            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, this.error));
+        }
+    }
+    renderHintMessage() {
+        if (this.hint) {
+            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon }, this.hint));
+        }
+    }
+    renderSuccessMessage() {
+        if (this.success) {
+            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, this.success));
+        }
+    }
+    get elementClass() {
+        return {
+            'spw-custom-select': true,
+            [`spw-custom-select--${this.size}`]: true,
+            'spw-custom-select--is-error': !!this.error,
+            'spw-custom-select--disabled': this.disabled,
+            'spw-custom-select--is-opened': this.isOpen,
+            'spw-custom-select--has-value': this.hasSelectedValue,
+            'spw-custom-select--no-value': !this.hasSelectedValue,
+            'spw-custom-select--is-searchable': this.isSearch,
+            'spw-custom-select--not-searchable': !this.isSearch,
+        };
+    }
+    normalizeString(str) {
+        return str
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase();
+    }
+    getSelectedLabels() {
+        if (this.multiple) {
+            return Array.isArray(this.internalValue) && this.internalValue.length > 0
+                ? this.internalValue
+                    .map(val => { var _a; return (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 : _a.label; })
+                    .filter(Boolean)
+                    .join(', ')
+                : null;
+        }
+        else {
+            const selectedOption = this.parsedOptions.find(option => String(option.value) === String(this.internalValue));
+            return selectedOption ? selectedOption.label : null;
+        }
+    }
+    getFilteredOptions() {
+        const normalizedSearchText = this.normalizeString(this.searchText);
+        return this.parsedOptions.filter(option => this.normalizeString(option.label).includes(normalizedSearchText));
+    }
+    handleSearchInput(event) {
+        const input = event.target;
+        this.searchText = input.value;
+        this.focusedOptionIndex = 0;
+        if (!this.isOpen) {
+            this.isOpen = true;
+        }
+    }
+    isSearchVisible() {
+        if (!this.isSearch)
+            return false;
+        if (!this.hasSelectedValue && !this.isOpen)
+            return true;
+        if (this.isSearch && this.isOpen)
+            return true;
+        return this.isOpen;
+    }
+    showPlaceholder() {
+        if (this.isSearch)
+            return false;
+        if (this.hasSelectedValue)
+            return false;
+        return true;
+    }
+    render() {
+        const filteredOptions = this.getFilteredOptions();
+        const showPlaceholder = this.showPlaceholder();
+        return (h("div", { key: '04b9b042735ca9cbd8d62fdde23df9903b4af983', class: this.elementClass, ref: el => (this.host = el) }, this.label && h("spw-field-label", { key: '1c712b4c97a02abf414e7263a0e4025621861718', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'a6677e42e705a4d19bab430bc4f4f85df18753d8', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'd5a8ead52aeecb11202aad815666137a54fb9181', class: "spw-custom-select__wrapper" }, h("div", { key: '1c644ae35f75c299dff9164339840da3912e2b79', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'be1320ab9c008e2ba2d29875f2eb95e4deb1e797', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '9bc6165e0688318a1666d7273ca448bcefb77b3c', class: "spw-custom-select__search" }, h("input", { key: '809d52b2d5a9e83b245c6ec26bb7c565316bc379', class: "spw-custom-select__search-input", placeholder: "Entrez votre recherche", onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: 'fc13a05467fc489f5639bc190d80a488c5fec4cd' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '2e7fa49d7f495045ecd62d7e35795af3b17309d8', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+            var _a;
+            return (h("span", { class: "spw-custom-select__selected-item" }, (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 :
+                _a.label, h("spw-icon", { icon: "fa-times", class: "spw-custom-select__deselect-icon", onClick: event => this.selectOption(val, event) })));
+        }))), !this.multiple && h("span", { key: 'd1a6b8e5df131273aba9a64e6dfd7790a8de74c8' }, this.getSelectedLabels()))), h("div", { key: '0aba5a4ab9e364ac363b8b04ca05ec5db31593bf', class: "spw-custom-select__arrow" }, h("spw-icon", { key: '8262e24e01a52bd2e92deecc29c88a743f272aac', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: '71a1b63d9996231b34b3bd0cb24075ea8f1cb7f6', class: `spw-custom-select__options spw-custom-select__options--${this.dropdownDirection}` }, !!filteredOptions.length && (h("ul", { key: 'f9a5d9d75187b92c6e503d12e8e4ce0e11d54454' }, filteredOptions.map((option, index) => (h("li", { class: {
+                'spw-custom-select__option': true,
+                'spw-custom-select__option--selected': this.multiple
+                    ? this.internalValue.some(val => String(val) === String(option.value))
+                    : option.value === this.internalValue,
+                'spw-custom-select__option--focused': index === this.focusedOptionIndex,
+            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-tw-mr-2", checked: this.internalValue.some(val => String(val) === String(option.value)) })), option.label))))), !filteredOptions.length && h("p", { key: 'c8fc0bd94b5c0e6aa70fbbb0194b91e733b9d44e', class: "spw-custom-select__no-results" }, "Pas de r\u00E9sultats pour cette recherche.")))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage()));
+    }
+    static get is() { return "spw-custom-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-custom-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-custom-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "(string | number)[] | string | number",
+                    "resolved": "(string | number)[] | number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valeur actuelle s\u00E9lectionn\u00E9e dans le composant, peut \u00EAtre une cha\u00EEne, un nombre ou un tableau"
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label associ\u00E9 au champ de s\u00E9lection personnalis\u00E9"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder \u00E0 afficher lorsque aucune option n'est s\u00E9lectionn\u00E9e"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'S\u00E9lectionnez une option'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le champ est d\u00E9sactiv\u00E9 et donc non interactif"
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nom de l'\u00E9l\u00E9ment dans les formulaires, utilis\u00E9 pour associer la valeur"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la s\u00E9lection est obligatoire dans le formulaire"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cha\u00EEne JSON des options disponibles dans le select (valeur et label)"
+                },
+                "attribute": "options",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium'",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Taille du select, peut \u00EAtre \"large\" ou \"medium\""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet la s\u00E9lection multiple si vrai"
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active la fonction de recherche dans la liste des options"
+                },
+                "attribute": "is-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "assistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte d'assistance \u00E0 afficher sous le champ"
+                },
+                "attribute": "assistive-text",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur \u00E0 afficher sous le champ"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'indication (hint) \u00E0 afficher sous le champ"
+                },
+                "attribute": "hint",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "success": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message de succ\u00E8s \u00E0 afficher sous le champ"
+                },
+                "attribute": "success",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "showErrorIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne d'erreur si vrai"
+                },
+                "attribute": "show-error-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showHintIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne d'indication si vrai"
+                },
+                "attribute": "show-hint-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showSuccessIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne de succ\u00E8s si vrai"
+                },
+                "attribute": "show-success-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "isOpen": {},
+            "parsedOptions": {},
+            "focusedOptionIndex": {},
+            "searchText": {},
+            "dropdownDirection": {},
+            "hasSelectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque la valeur s\u00E9lectionn\u00E9e change"
+                },
+                "complexType": {
+                    "original": "(string | number)[] | string | number",
+                    "resolved": "(string | number)[] | number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "parseOptions"
+            }, {
+                "propName": "value",
+                "methodName": "valueChangedHandler"
+            }, {
+                "propName": "internalValue",
+                "methodName": "internalValueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=spw-custom-select.js.map