@spw-ds/spw-stencil-library 0.0.1

package/dist/collection/components/spw-pagination/spw-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-pagination.js","sourceRoot":"","sources":["../../../src/components/spw-pagination/spw-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Prop, Host, h, Event, EventEmitter, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-pagination',\n  styleUrl: 'spw-pagination.scss',\n  shadow: true,\n})\nexport class SpwPagination {\n  /** Nombre total d'éléments à paginer */\n  @Prop() totalItems: number;\n  /** Nombre d'éléments à afficher par page */\n  @Prop() itemsPerPage: number;\n  /** Indique si la pagination est désactivée */\n  @Prop() isDisabled: boolean = false;\n  /** Type de variante de la pagination : 'numbers' ou 'input' */\n  @Prop() variant: 'numbers' | 'input' = 'numbers';\n  /** Page actuellement sélectionnée, mutable */\n  @Prop({ mutable: true }) currentPage: number = 1;\n\n  /** Événement émis lorsque la page est changée, renvoie le numéro de la nouvelle page */\n  @Event() pageChanged: EventEmitter<number>;\n\n  private totalPages: number;\n  @State() inputPageValue: string = '';\n  @State() isMobile: boolean = window.innerWidth < 800;\n  private debounceTimer: any;\n\n  componentWillLoad() {\n    this.calculateTotalPages();\n    this.inputPageValue = this.currentPage.toString();\n    window.addEventListener('resize', this.updateIsMobile);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.updateIsMobile);\n  }\n\n  private updateIsMobile = () => {\n    this.isMobile = window.innerWidth < 800;\n  };\n\n  @Watch('totalItems')\n  @Watch('itemsPerPage')\n  @Watch('currentPage')\n  calculateTotalPages() {\n    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);\n  }\n\n  private goToPage(page: number) {\n    if (page !== this.currentPage && !this.isDisabled && page >= 1 && page <= this.totalPages) {\n      this.currentPage = page;\n      this.inputPageValue = this.currentPage.toString();\n      this.pageChanged.emit(this.currentPage);\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    const inputValue = (event.target as HTMLInputElement).value;\n    this.inputPageValue = inputValue;\n    const page = parseInt(inputValue, 10);\n\n    if (!isNaN(page) && page >= 1 && page <= this.totalPages) {\n      clearTimeout(this.debounceTimer);\n      this.debounceTimer = setTimeout(() => {\n        this.goToPage(page);\n      }, 500);\n    }\n  }\n\n  private getPaginationClass() {\n    const pages = this.calculatePageRange();\n    const ellipsisCount = pages.filter(({ page }) => page === '...').length;\n    const hasEllipsisStart = ellipsisCount > 0 && pages[1]?.page === '...';\n    const hasEllipsisEnd = ellipsisCount > 0 && pages[pages.length - 2]?.page === '...';\n\n    let paginationClass = `spw-pagination spw-pagination--${this.currentPage} spw-pagination--total-${this.totalPages}`;\n\n    if (ellipsisCount === 2) {\n      paginationClass += ' spw-pagination--double-ellipsis';\n    } else if (hasEllipsisStart) {\n      paginationClass += ' spw-pagination--ellipsis-start';\n    } else if (hasEllipsisEnd) {\n      paginationClass += ' spw-pagination--ellipsis-end';\n    }\n\n    return paginationClass;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      const page = parseInt(this.inputPageValue, 10);\n      if (!isNaN(page)) {\n        this.goToPage(page);\n      }\n    }\n  }\n\n  private calculateWidth(): string {\n    const length = this.inputPageValue.length;\n    if (length <= 1) {\n      return '3ch';\n    }\n    return `${length + 1}ch`;\n  }\n\n  private calculatePageRange() {\n    const pages = [];\n    const { currentPage, totalPages, isMobile } = this;\n\n    if (isMobile) {\n      // Mode mobile\n      if (totalPages <= 5) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 3) {\n        for (let i = 1; i <= 3; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 2) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 2; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 1; i <= currentPage + 1; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    } else {\n      // Mode desktop\n      if (totalPages <= 7) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 4) {\n        for (let i = 1; i <= 4; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 3) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 3; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 2; i <= currentPage + 2; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    }\n\n    return pages;\n  }\n\n  render() {\n    const pages = this.calculatePageRange();\n    const showPrevArrow = this.currentPage > 1;\n    const showNextArrow = this.currentPage < this.totalPages;\n\n    const prevArrow = showPrevArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span class=\"spw-pagination__item-arrow-text\">Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrow = showNextArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)}>\n          <span class=\"spw-pagination__item-arrow-text\">Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const prevArrowMobile = this.currentPage > 1 && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span>Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrowMobile = this.currentPage < this.totalPages && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)} disabled={this.currentPage >= this.totalPages}>\n          <span>Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const mobileArrows = (\n      <ul class=\"spw-pagination__mobile-arrows\">\n        {prevArrowMobile}\n        {nextArrowMobile}\n      </ul>\n    );\n\n    return (\n      <Host>\n        <div class={this.getPaginationClass()}>\n          {this.variant === 'input' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n                <li class=\"spw-pagination__input\">\n                  <spw-text-field\n                    value={this.inputPageValue}\n                    type=\"number\"\n                    onInput={event => this.handleInputChange(event)}\n                    onKeyDown={event => this.handleKeyDown(event)}\n                    disabled={this.isDisabled}\n                    style={{ width: this.calculateWidth() }}\n                  ></spw-text-field>\n                </li>\n                <li class=\"spw-pagination__total-pages\">sur {this.totalPages} pages</li>\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n          {this.variant === 'numbers' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n\n                {pages.map(({ page, class: pageClass }) => {\n                  if (page === '...') {\n                    return (\n                      <li class={`spw-pagination__item spw-pagination__item--dots ${pageClass}`}>\n                        <spw-icon icon=\"fa-ellipsis\"></spw-icon>\n                      </li>\n                    );\n                  }\n\n                  return (\n                    <li\n                      class={{\n                        'spw-pagination__item': true,\n                        'spw-pagination__item--active': page === this.currentPage,\n                        [pageClass]: true,\n                      }}\n                    >\n                      <button onClick={() => this.goToPage(page as number)} disabled={page === this.currentPage}>\n                        {page}\n                      </button>\n                    </li>\n                  );\n                })}\n\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:inline-flex;font-size:100%;line-height:1.3;vertical-align:top}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-radio{align-items:flex-start;display:inline-flex;flex-direction:row;gap:var(--spw-spacings-spacing-sm);padding:0}.spw-radio__wrapper{align-items:center;background-color:var(--spw-ds-white);border:2px solid var(--spw-color-themes-grey-grey-900);border-radius:var(--spw-spacings-border-radius-full);display:flex;flex:none;flex-grow:0;font-size:var(--spw-typography-font-size-xs);height:20px;justify-content:center;order:0;position:relative;width:20px}.spw-radio__wrapper--error{border-color:var(--spw-colors-dark-states-error-error-300)}.spw-radio__wrapper:not(.spw-radio__wrapper--disabled):hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-radio__wrapper:not(.spw-radio__wrapper--disabled):active,.spw-radio__wrapper:not(.spw-radio__wrapper--disabled):focus-visible,.spw-radio__wrapper:not(.spw-radio__wrapper--disabled):focus-within{outline:2px solid var(--spw-ds-focus);outline-offset:2px}.spw-radio__wrapper:not(.spw-radio__wrapper--disabled):active{box-shadow:0 0 4px var(--spw-color-themes-grey-grey-300)}.spw-radio__wrapper--disabled{border-color:var(--spw-color-themes-grey-grey-500)}.spw-radio__wrapper--checked{border-color:var(--spw-ds-primary);color:var(--spw-ds-primary)}.spw-radio__wrapper--checked--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-radio__circle{background:var(--spw-ds-primary);border-radius:var(--spw-spacings-border-radius-full);display:block;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.spw-radio__label{word-wrap:break-word;color:var(--spw-color-themes-grey-grey-900);order:1;padding-top:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-radio__label:hover~.spw-radio__wrapper:not(.spw-radio__wrapper--disabled){outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-radio__label:active~.spw-radio__wrapper:not(.spw-radio__wrapper--disabled){box-shadow:0 0 4px var(--spw-color-themes-grey-grey-300);outline:2px solid var(--spw-ds-focus);outline-offset:2px}.spw-radio__label--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-radio__label:hover,.spw-radio__wrapper:hover{cursor:pointer}.spw-radio__label--disabled:hover,.spw-radio__wrapper--disabled:hover{cursor:not-allowed}

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

@@ -0,0 +1,248 @@
+import { h } from "@stencil/core";
+export class SpwRadio {
+    constructor() {
+        this.disabled = false;
+        this.checked = false;
+        this.error = false;
+        this.name = undefined;
+        this.value = undefined;
+        this.internalChecked = undefined;
+    }
+    handleRadio() {
+        if (!this.disabled && !this.internalChecked) {
+            this.setCheckedState(true);
+            this.spwChange.emit({ checked: this.internalChecked, value: this.value });
+            this.uncheckOthers();
+        }
+    }
+    uncheckOthers() {
+        const form = this.el.closest('body');
+        if (form) {
+            const radios = Array.from(form.querySelectorAll(`spw-radio[name="${this.name}"]`));
+            radios.forEach(radio => {
+                if (radio !== this.el) {
+                    radio.setChecked(false);
+                }
+            });
+        }
+    }
+    /** Méthode pour changer l'état de la case à cocher. */
+    async setChecked(checked) {
+        this.setCheckedState(checked);
+    }
+    checkedChanged(newValue) {
+        this.setCheckedState(newValue);
+    }
+    setCheckedState(checked) {
+        this.internalChecked = checked;
+        this.checked = checked;
+        if (this.inputElement) {
+            this.inputElement.checked = checked;
+        }
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.internalChecked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    handleKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            this.handleRadio();
+            event.preventDefault();
+        }
+    }
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+    }
+    componentDidLoad() {
+        var _a;
+        this.setCheckedState(this.internalChecked);
+        (_a = this.el.closest('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', (e) => {
+            if (this.internalChecked) {
+                e.formData.set(this.name, this.value);
+            }
+        });
+    }
+    formResetCallback() {
+        this.setCheckedState(this.checked);
+    }
+    get elementClass() {
+        return {
+            'spw-radio__wrapper': true,
+            'spw-radio__wrapper--disabled': this.disabled,
+            'spw-radio__wrapper--checked': this.internalChecked,
+            'spw-radio__wrapper--error': this.error,
+        };
+    }
+    render() {
+        const slot = this.el.innerHTML;
+        const hasSlot = Boolean(slot);
+        return (h("div", { key: 'b7c5bfe6891acd048e668fc4f72de4853b911e99', class: "spw-radio" }, h("input", { key: '2fdadb345faeedc8bb329e57229ed5f096f3a559', type: "radio", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleRadio.bind(this), name: this.name, value: this.value, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'd9ee09839ce67f80af3dfdeda97858b07f94657a', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: this.handleRadio.bind(this) }, h("slot", { key: 'ec839eeebf46a5178284fd5cb356534f19170062' }))), h("div", { key: '160648566239681dea3af980a8afc3a9272f012a', tabIndex: this.disabled ? -1 : 0, onClick: this.handleRadio.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "radio", "aria-checked": this.internalChecked, "aria-disabled": this.disabled, "aria-labelledby": "label", class: this.elementClass }, this.internalChecked && h("span", { key: 'd61a59b3e153d19397de661c7f4397ed993f81d3', class: "spw-radio__circle" }))));
+    }
+    static get is() { return "spw-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le bouton radio est d\u00E9sactiv\u00E9"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le bouton radio est s\u00E9lectionn\u00E9 (coch\u00E9), mutable et refl\u00E9t\u00E9 dans le DOM"
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique s'il y a une erreur visuelle associ\u00E9e au bouton radio"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nom du bouton radio, utilis\u00E9 pour le grouper avec d'autres boutons radio dans un formulaire"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valeur associ\u00E9e au bouton radio"
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwChange",
+                "name": "spwChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lorsque l'\u00E9tat du bouton radio change (coch\u00E9 ou d\u00E9coch\u00E9)"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value: string }",
+                    "resolved": "{ checked: boolean; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setChecked": {
+                "complexType": {
+                    "signature": "(checked: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode pour changer l'\u00E9tat de la case \u00E0 cocher.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=spw-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spw-radio.js","sourceRoot":"","sources":["../../../src/components/spw-radio/spw-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'spw-radio',\n  styleUrl: 'spw-radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class SpwRadio {\n  private inputElement: HTMLInputElement;\n\n  @Element() el: HTMLSpwRadioElement;\n\n  /** Indique si le bouton radio est désactivé */\n  @Prop() disabled: boolean = false;\n  /** Indique si le bouton radio est sélectionné (coché), mutable et reflété dans le DOM */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Indique s'il y a une erreur visuelle associée au bouton radio */\n  @Prop() error: boolean = false;\n  /** Nom du bouton radio, utilisé pour le grouper avec d'autres boutons radio dans un formulaire */\n  @Prop() name: string;\n  /** Valeur associée au bouton radio */\n  @Prop() value: string;\n\n  @State() internalChecked: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Événement déclenché lorsque l'état du bouton radio change (coché ou décoché) */\n  @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<{ checked: boolean; value: string }>;\n\n  private handleRadio() {\n    if (!this.disabled && !this.internalChecked) {\n      this.setCheckedState(true);\n      this.spwChange.emit({ checked: this.internalChecked, value: this.value });\n      this.uncheckOthers();\n    }\n  }\n\n  private uncheckOthers() {\n    const form = this.el.closest('body');\n    if (form) {\n      const radios = Array.from(form.querySelectorAll(`spw-radio[name=\"${this.name}\"]`)) as HTMLSpwRadioElement[];\n      radios.forEach(radio => {\n        if (radio !== this.el) {\n          radio.setChecked(false);\n        }\n      });\n    }\n  }\n\n  /** Méthode pour changer l'état de la case à cocher. */\n  @Method()\n  async setChecked(checked: boolean) {\n    this.setCheckedState(checked);\n  }\n\n  @Watch('checked')\n  checkedChanged(newValue: boolean) {\n    this.setCheckedState(newValue);\n  }\n\n  private setCheckedState(checked: boolean) {\n    this.internalChecked = checked;\n    this.checked = checked;\n    if (this.inputElement) {\n      this.inputElement.checked = checked;\n    }\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (this.internalChecked) {\n      this.internals.setFormValue(this.value);\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleKeydown(event) {\n    if (event.key === ' ' || event.key === 'Enter') {\n      this.handleRadio();\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n\n  componentDidLoad() {\n    this.setCheckedState(this.internalChecked);\n    this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n      if (this.internalChecked) {\n        e.formData.set(this.name, this.value);\n      }\n    });\n  }\n\n  formResetCallback() {\n    this.setCheckedState(this.checked);\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-radio__wrapper': true,\n      'spw-radio__wrapper--disabled': this.disabled,\n      'spw-radio__wrapper--checked': this.internalChecked,\n      'spw-radio__wrapper--error': this.error,\n    };\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    const hasSlot = Boolean(slot);\n\n    return (\n      <div class=\"spw-radio\">\n        <input\n          type=\"radio\"\n          ref={el => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleRadio.bind(this)}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          style={{ display: 'none' }}\n        />\n        {hasSlot && (\n          <label class={`spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`} onClick={this.handleRadio.bind(this)}>\n            <slot />\n          </label>\n        )}\n        <div\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleRadio.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"radio\"\n          aria-checked={this.internalChecked}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={this.elementClass}\n        >\n          {this.internalChecked && <span class=\"spw-radio__circle\"></span>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-search-field/spw-search-field.css

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-search-field{position:relative}.spw-search-field__options{background-color:#fff;border:1px solid var(--spw-color-themes-grey-grey-800);border-radius:0 0 4px 4px;margin-top:-2px;max-height:200px;overflow-y:auto;position:absolute;transition:transform .3s ease,opacity .3s ease;width:100%;z-index:44}.spw-search-field__options--down,.spw-search-field__options--up{top:100%;transform:translateY(0)}.spw-search-field__option{border-bottom:1px solid var(--spw-color-themes-grey-grey-900);cursor:pointer;padding:12px;transition:background-color .2s ease}.spw-search-field__option:hover{background-color:var(--spw-color-themes-grey-grey-200)}.spw-search-field__option:last-child{border-bottom:none}.spw-search-field__option--focused{background-color:var(--spw-color-themes-grey-grey-300)}.spw-search-field__option--selected{font-weight:700}.spw-search-field__no-results{color:var(--spw-color-themes-grey-grey-600);cursor:not-allowed;padding:12px}.spw-tw-italic{font-style:italic}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}

package/dist/collection/components/spw-search-field/spw-search-field.js

@@ -0,0 +1,287 @@
+import { h } from "@stencil/core";
+export class SpwSearchField {
+    constructor() {
+        this.handleClickOutside = (event) => {
+            if (this.isOpen) {
+                const target = event.composedPath()[0];
+                const isInsideHost = this.hostElement.contains(target);
+                if (!isInsideHost) {
+                    this.isOpen = false;
+                }
+            }
+        };
+        this.items = undefined;
+        this.placeholder = 'Recherche...';
+        this.label = '';
+        this.disabled = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.assistiveText = undefined;
+        this.filteredItems = [];
+        this.searchText = '';
+        this.isOpen = false;
+        this.focusedItemIndex = null;
+        this.dropdownDirection = 'down';
+    }
+    componentWillLoad() {
+        if (this.items) {
+            this.parseItems(this.items);
+        }
+        else {
+            this.filteredItems = [];
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    parseItems(newValue) {
+        if (!newValue) {
+            this.filteredItems = [];
+            return;
+        }
+        try {
+            this.filteredItems = JSON.parse(newValue);
+        }
+        catch (e) {
+            console.error('Invalid JSON format for items:', newValue);
+            this.filteredItems = [];
+        }
+    }
+    handleSearchInput(event) {
+        const input = event.target;
+        this.searchText = input.value;
+        this.filterItems();
+        this.determineDropdownDirection();
+        this.isOpen = true;
+    }
+    filterItems() {
+        if (!this.items) {
+            this.filteredItems = [];
+            return;
+        }
+        const normalizedSearchText = this.normalizeString(this.searchText);
+        this.filteredItems = JSON.parse(this.items).filter(item => this.normalizeString(item.label).includes(normalizedSearchText));
+    }
+    normalizeString(str) {
+        return str
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase();
+    }
+    selectItem(item) {
+        this.searchText = item.label;
+        this.isOpen = false;
+        if (item.url) {
+            window.location.href = item.url;
+        }
+    }
+    determineDropdownDirection() {
+        const rect = this.hostElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        if (rect.bottom + 200 > viewportHeight && rect.top > 200) {
+            this.dropdownDirection = 'up';
+        }
+        else {
+            this.dropdownDirection = 'down';
+        }
+    }
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.isOpen) {
+                    this.focusedItemIndex = this.focusedItemIndex === null ? 0 : (this.focusedItemIndex + 1) % this.filteredItems.length;
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen) {
+                    this.focusedItemIndex =
+                        this.focusedItemIndex === null ? this.filteredItems.length - 1 : (this.focusedItemIndex - 1 + this.filteredItems.length) % this.filteredItems.length;
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.isOpen && this.focusedItemIndex !== null) {
+                    this.selectItem(this.filteredItems[this.focusedItemIndex]);
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    highlightMatch(item) {
+        const normalizedSearchText = this.normalizeString(this.searchText);
+        const normalizedItem = this.normalizeString(item);
+        const startIndex = normalizedItem.indexOf(normalizedSearchText);
+        if (startIndex === -1 || !this.searchText) {
+            return item;
+        }
+        const endIndex = startIndex + normalizedSearchText.length;
+        return (h("span", null, item.slice(0, startIndex), h("strong", null, item.slice(startIndex, endIndex)), item.slice(endIndex)));
+    }
+    render() {
+        return (h("div", { key: '54c4caffc49fe8354751caa94eea54976d2ca00d', ref: el => (this.hostElement = el), class: "spw-search-field" }, h("spw-text-field", { key: 'f6a9cd7d3bbb49325d16d1aa6086bca647416e65', placeholder: this.placeholder, name: this.name, label: this.label, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, onInput: event => this.handleSearchInput(event), onKeyDown: event => this.handleKeyDown(event) }), this.isOpen && !!this.items && (h("div", { key: 'b97c22a397b47348e0863141bf6a8d010e8765bb', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '7b22dbd27a14f4123325770594c9e9900388f47c' }, this.filteredItems.map((item, index) => (h("li", { class: {
+                'spw-search-field__option': true,
+                'spw-search-field__option--focused': index === this.focusedItemIndex,
+            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-tw-italic" }, " - ", item.category)))))), !this.filteredItems.length && h("p", { key: 'e2ca5f8f6936eab307618609f8ada8691845a697', class: "spw-search-field__no-results" }, "Pas de r\u00E9sultats.")))));
+    }
+    static get is() { return "spw-search-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-search-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-search-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Liste des \u00E9l\u00E9ments \u00E0 filtrer, pass\u00E9e sous forme de cha\u00EEne JSON"
+                },
+                "attribute": "items",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder \u00E0 afficher dans le champ de recherche"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Recherche...'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label associ\u00E9 au champ de recherche"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le champ de recherche est d\u00E9sactiv\u00E9"
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nom du champ de recherche, utilis\u00E9 pour les formulaires"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le champ est requis"
+                },
+                "attribute": "required",
+                "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 affich\u00E9 sous le champ de recherche"
+                },
+                "attribute": "assistive-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredItems": {},
+            "searchText": {},
+            "isOpen": {},
+            "focusedItemIndex": {},
+            "dropdownDirection": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "parseItems"
+            }];
+    }
+}
+//# sourceMappingURL=spw-search-field.js.map

package/dist/collection/components/spw-search-field/spw-search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-search-field.js","sourceRoot":"","sources":["../../../src/components/spw-search-field/spw-search-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'spw-search-field',\n  styleUrl: 'spw-search-field.scss',\n  shadow: true,\n})\nexport class SpwSearchField {\n  private hostElement: HTMLElement;\n\n  /** Liste des éléments à filtrer, passée sous forme de chaîne JSON */\n  @Prop() items?: string;\n  /** Placeholder à afficher dans le champ de recherche */\n  @Prop() placeholder: string = 'Recherche...';\n  /** Label associé au champ de recherche */\n  @Prop() label: string = '';\n  /** Indique si le champ de recherche est désactivé */\n  @Prop() disabled?: boolean;\n  /** Nom du champ de recherche, utilisé pour les formulaires */\n  @Prop() name: string;\n  /** Indique si le champ est requis */\n  @Prop() required?: boolean = false;\n  /** Texte d'assistance affiché sous le champ de recherche */\n  @Prop() assistiveText?: string;\n\n  @State() filteredItems: Array<{ url?: string; label: string; category?: string }> = [];\n  @State() searchText: string = '';\n  @State() isOpen: boolean = false;\n  @State() focusedItemIndex: number | null = null;\n  @State() dropdownDirection: 'up' | 'down' = 'down';\n\n  componentWillLoad() {\n    if (this.items) {\n      this.parseItems(this.items);\n    } else {\n      this.filteredItems = [];\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  @Watch('items')\n  parseItems(newValue: string) {\n    if (!newValue) {\n      this.filteredItems = [];\n      return;\n    }\n\n    try {\n      this.filteredItems = JSON.parse(newValue);\n    } catch (e) {\n      console.error('Invalid JSON format for items:', newValue);\n      this.filteredItems = [];\n    }\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen) {\n      const target = event.composedPath()[0] as Node;\n      const isInsideHost = this.hostElement.contains(target);\n\n      if (!isInsideHost) {\n        this.isOpen = false;\n      }\n    }\n  };\n\n  private handleSearchInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchText = input.value;\n    this.filterItems();\n    this.determineDropdownDirection();\n    this.isOpen = true;\n  }\n\n  private filterItems() {\n    if (!this.items) {\n      this.filteredItems = [];\n      return;\n    }\n\n    const normalizedSearchText = this.normalizeString(this.searchText);\n\n    this.filteredItems = JSON.parse(this.items).filter(item => this.normalizeString(item.label).includes(normalizedSearchText));\n  }\n\n  private normalizeString(str: string): string {\n    return str\n      .normalize('NFD')\n      .replace(/[\\u0300-\\u036f]/g, '')\n      .toLowerCase();\n  }\n\n  private selectItem(item: { url?: string; label: string }) {\n    this.searchText = item.label;\n    this.isOpen = false;\n\n    if (item.url) {\n      window.location.href = item.url;\n    }\n  }\n\n  private determineDropdownDirection() {\n    const rect = this.hostElement.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n\n    if (rect.bottom + 200 > viewportHeight && rect.top > 200) {\n      this.dropdownDirection = 'up';\n    } else {\n      this.dropdownDirection = 'down';\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex = this.focusedItemIndex === null ? 0 : (this.focusedItemIndex + 1) % this.filteredItems.length;\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex =\n            this.focusedItemIndex === null ? this.filteredItems.length - 1 : (this.focusedItemIndex - 1 + this.filteredItems.length) % this.filteredItems.length;\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.isOpen && this.focusedItemIndex !== null) {\n          this.selectItem(this.filteredItems[this.focusedItemIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  private highlightMatch(item: string) {\n    const normalizedSearchText = this.normalizeString(this.searchText);\n    const normalizedItem = this.normalizeString(item);\n\n    const startIndex = normalizedItem.indexOf(normalizedSearchText);\n\n    if (startIndex === -1 || !this.searchText) {\n      return item;\n    }\n\n    const endIndex = startIndex + normalizedSearchText.length;\n\n    return (\n      <span>\n        {item.slice(0, startIndex)}\n        <strong>{item.slice(startIndex, endIndex)}</strong>\n        {item.slice(endIndex)}\n      </span>\n    );\n  }\n\n  render() {\n    return (\n      <div ref={el => (this.hostElement = el as HTMLElement)} class=\"spw-search-field\">\n        <spw-text-field\n          placeholder={this.placeholder}\n          name={this.name}\n          label={this.label}\n          is-search={true}\n          is-clear={true}\n          required={this.required}\n          disabled={this.disabled}\n          assistiveText={this.assistiveText}\n          value={this.searchText}\n          onInput={event => this.handleSearchInput(event)}\n          onKeyDown={event => this.handleKeyDown(event)}\n        ></spw-text-field>\n        {this.isOpen && !!this.items && (\n          <div class={`spw-search-field__options spw-search-field__options--${this.dropdownDirection}`}>\n            {!!this.filteredItems.length && (\n              <ul>\n                {this.filteredItems.map((item, index) => (\n                  <li\n                    class={{\n                      'spw-search-field__option': true,\n                      'spw-search-field__option--focused': index === this.focusedItemIndex,\n                    }}\n                    onClick={() => this.selectItem(item)}\n                  >\n                    {this.highlightMatch(item.label)} {item.category && <span class=\"spw-tw-italic\"> - {item.category}</span>}\n                  </li>\n                ))}\n              </ul>\n            )}\n            {!this.filteredItems.length && <p class=\"spw-search-field__no-results\">Pas de résultats.</p>}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}