@spw-ds/spw-stencil-library 0.0.1

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

@@ -0,0 +1,203 @@
+import { p as proxyCustomElement, H, h } from './p-3706b88e.js';
+import { d as defineCustomElement$5 } from './p-b3b66a09.js';
+import { d as defineCustomElement$4 } from './p-e70f2b83.js';
+import { d as defineCustomElement$3 } from './p-72ca702e.js';
+import { d as defineCustomElement$2 } from './p-cb99b731.js';
+
+const spwSearchFieldCss = "/*! 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}";
+const SpwSearchFieldStyle0 = spwSearchFieldCss;
+
+const SpwSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SpwSearchField extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 watchers() { return {
+        "items": ["parseItems"]
+    }; }
+    static get style() { return SpwSearchFieldStyle0; }
+}, [1, "spw-search-field", {
+        "items": [1],
+        "placeholder": [1],
+        "label": [1],
+        "disabled": [4],
+        "name": [1],
+        "required": [4],
+        "assistiveText": [1, "assistive-text"],
+        "filteredItems": [32],
+        "searchText": [32],
+        "isOpen": [32],
+        "focusedItemIndex": [32],
+        "dropdownDirection": [32]
+    }, undefined, {
+        "items": ["parseItems"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-search-field", "spw-field-label", "spw-field-message", "spw-icon", "spw-text-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-search-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwSearchField$1);
+            }
+            break;
+        case "spw-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "spw-field-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "spw-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "spw-text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SpwSearchField = SpwSearchField$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwSearchField, defineCustomElement };
+
+//# sourceMappingURL=spw-search-field.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-search-field.js","mappings":"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","names":["SpwSearchField"],"sources":["src/components/spw-search-field/spw-search-field.scss?tag=spw-search-field&encapsulation=shadow","src/components/spw-search-field/spw-search-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-search-field {\n  position: relative;\n}\n\n.spw-search-field__options {\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  border: 1px solid var(--spw-color-themes-grey-grey-800);\n  border-radius: 0 0 4px 4px;\n  max-height: 200px;\n  overflow-y: auto;\n  z-index: 44;\n  margin-top: -2px;\n  transition:\n    transform 0.3s ease,\n    opacity 0.3s ease;\n}\n\n.spw-search-field__options--down {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__options--up {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__option {\n  padding: 12px;\n  border-bottom: 1px solid var(--spw-color-themes-grey-grey-900);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: var(--spw-color-themes-grey-grey-200);\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n\n  &--focused {\n    background-color: var(--spw-color-themes-grey-grey-300);\n  }\n\n  &--selected {\n    font-weight: 700;\n  }\n}\n\n.spw-search-field__no-results {\n  padding: 12px;\n  cursor: not-allowed;\n  color: var(--spw-color-themes-grey-grey-600);\n}\n","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"],"version":3}

package/dist/components/spw-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwSelect extends Components.SpwSelect, HTMLElement {}
+export const SpwSelect: {
+    prototype: SpwSelect;
+    new (): SpwSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/spw-select.js

@@ -0,0 +1,149 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3706b88e.js';
+import { d as defineCustomElement$4 } from './p-b3b66a09.js';
+import { d as defineCustomElement$3 } from './p-e70f2b83.js';
+import { d as defineCustomElement$2 } from './p-72ca702e.js';
+
+const spwSelectCss = "/*! 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-select,.spw-select__container{position:relative}.spw-select__arrow{color:var(--spw-color-themes-grey-grey-600);font-size:12px;pointer-events:none;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.spw-select__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid var(--spw-color-themes-grey-grey-800);border-radius:4px;color:var(--spw-color-themes-grey-grey-800);font-size:16px;height:40px;margin:0;padding:0 40px 0 12px;position:relative;width:100%}.spw-select__trigger:hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-select__trigger:focus-visible{outline:3px solid var(--spw-ds-focus);outline-offset:2px}.spw-select__trigger:after{color:var(--spw-color-themes-grey-grey-800);content:\"\\f078\";font-family:Font Awesome\\ 5 Free;font-size:14px;font-weight:900;pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.spw-select--is-error .spw-select__trigger{border-color:var(--spw-colors-states-error-error-300)}.spw-select--large .spw-select__trigger{font-size:18px;height:60px;padding:0 24px}.spw-select--disabled .spw-select__trigger{background:var(--spw-color-themes-grey-grey-100);border-color:var(--spw-color-themes-grey-grey-400);color:var(--spw-color-themes-grey-grey-500);cursor:not-allowed}.spw-select--disabled .spw-select__trigger::-moz-placeholder{color:var(--spw-color-themes-grey-grey-500)}.spw-select--disabled .spw-select__trigger::placeholder{color:var(--spw-color-themes-grey-grey-500)}.spw-select--disabled .spw-select__trigger:focus,.spw-select--disabled .spw-select__trigger:focus-visible,.spw-select--disabled .spw-select__trigger:hover{outline:none}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}";
+const SpwSelectStyle0 = spwSelectCss;
+
+const SpwSelect$1 = /*@__PURE__*/ proxyCustomElement(class SpwSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.internals = this.attachInternals();
+        this.internalValue = undefined;
+        this.value = undefined;
+        this.label = '';
+        this.placeholder = 'Sélectionner une option';
+        this.disabled = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.size = 'medium';
+        this.assistiveText = undefined;
+        this.error = '';
+        this.hint = '';
+        this.success = '';
+        this.showErrorIcon = true;
+        this.showHintIcon = true;
+        this.showSuccessIcon = true;
+    }
+    componentWillLoad() {
+        this.internalValue = this.value || this.getInitialSelectedValue();
+    }
+    componentDidLoad() {
+        this.internals.setFormValue(this.getFormValue());
+        this.moveOptionsToLightDom();
+    }
+    getFormValue() {
+        return this.internalValue ? String(this.internalValue) : null;
+    }
+    getInitialSelectedValue() {
+        const assignedNodes = Array.from(this.el.querySelectorAll('option'));
+        for (const option of assignedNodes) {
+            if (option.hasAttribute('selected')) {
+                return option.getAttribute('value');
+            }
+        }
+        return null;
+    }
+    handleSelectChange(event) {
+        const select = event.target;
+        this.internalValue = select.value;
+        this.value = this.internalValue;
+        this.internals.setFormValue(this.getFormValue());
+        this.valueChanged.emit(this.internalValue);
+    }
+    moveOptionsToLightDom() {
+        const slot = this.el.shadowRoot.querySelector('slot');
+        if (slot) {
+            const assignedNodes = slot.assignedNodes({ flatten: true });
+            assignedNodes.forEach(node => {
+                if (node.nodeName === 'OPTION' || node.nodeName === 'OPTGROUP') {
+                    this.selectElement.appendChild(node);
+                }
+            });
+        }
+    }
+    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-select': true,
+            [`spw-select--${this.size}`]: true,
+            'spw-select--disabled': this.disabled,
+            'spw-select--is-error': !!this.error,
+        };
+    }
+    render() {
+        return (h(Host, { key: '286a2cfe145c46177a886e4edbbc45fedfa9b359' }, h("div", { key: '56d205d4445361460ef5d742aaa749634ebe8a94', class: this.elementClass }, this.label && h("spw-field-label", { key: '179c2b7548576dadb2ca15985a24931b70d412c9', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '664e59f004d9578d1346864bc1dbbf27d8dd25fe', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '41dab1f83d2313563c803d32aee813fb6769509c', class: "spw-select__container" }, h("select", { key: '00bbbe08e999a42d7a05e0c46203bb31f2a64e38', id: this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: 'be20ee56bc5dd9ec7359814ef196b1954bcbf0cd', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("spw-icon", { key: 'b569a9ebe89e7716d44d6812704181965407ae5f', class: "spw-select__arrow", icon: "fa-chevron-down" })), h("slot", { key: '75f9fed6e88e88a965ac73a75dc94641314154a8' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage()));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get style() { return SpwSelectStyle0; }
+}, [65, "spw-select", {
+        "value": [1544],
+        "label": [1],
+        "placeholder": [1],
+        "disabled": [4],
+        "name": [1],
+        "required": [4],
+        "size": [1],
+        "assistiveText": [1, "assistive-text"],
+        "error": [1],
+        "hint": [1],
+        "success": [1],
+        "showErrorIcon": [4, "show-error-icon"],
+        "showHintIcon": [4, "show-hint-icon"],
+        "showSuccessIcon": [4, "show-success-icon"],
+        "internalValue": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-select", "spw-field-label", "spw-field-message", "spw-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwSelect$1);
+            }
+            break;
+        case "spw-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "spw-field-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "spw-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SpwSelect = SpwSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwSelect, defineCustomElement };
+
+//# sourceMappingURL=spw-select.js.map

package/dist/components/spw-select.js.map

@@ -0,0 +1 @@
+{"file":"spw-select.js","mappings":"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","names":["SpwSelect"],"sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-select {\n  position: relative;\n  &__container {\n    position: relative;\n  }\n  &__arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 12px;\n    pointer-events: none;\n    color: var(--spw-color-themes-grey-grey-600);\n    font-size: 12px;\n  }\n  &__trigger {\n    width: 100%;\n    height: 40px;\n    border-radius: 4px;\n    border: 1px solid var(--spw-color-themes-grey-grey-800);\n    background-color: #fff;\n    font-size: 16px;\n    color: var(--spw-color-themes-grey-grey-800);\n    position: relative;\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    padding: 0 12px;\n    padding-right: 40px;\n\n    &:hover {\n      outline: 4px solid var(--spw-color-themes-grey-grey-300);\n    }\n\n    &:focus-visible {\n      outline: 3px solid var(--spw-ds-focus);\n      outline-offset: 2px;\n    }\n\n    /* Add the chevron */\n    &::after {\n      content: '\\f078'; /* Font Awesome chevron-down unicode */\n      font-family: 'Font Awesome 5 Free';\n      font-weight: 900;\n      font-size: 14px;\n      color: var(--spw-color-themes-grey-grey-800);\n      position: absolute;\n      right: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none; /* Ensure the chevron does not block clicks */\n    }\n\n    .spw-select--is-error & {\n      border-color: var(--spw-colors-states-error-error-300);\n    }\n\n    .spw-select--large & {\n      height: 60px;\n      padding: 0 24px;\n      font-size: 18px;\n    }\n\n    .spw-select--disabled & {\n      border-color: var(--spw-color-themes-grey-grey-400);\n      background: var(--spw-color-themes-grey-grey-100);\n      color: var(--spw-color-themes-grey-grey-500);\n      cursor: not-allowed;\n      &::placeholder {\n        color: var(--spw-color-themes-grey-grey-500);\n      }\n      &:hover,\n      &:focus,\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n}\n","import { AttachInternals, Host, Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'spw-select',\n  styleUrl: 'spw-select.scss',\n  formAssociated: true,\n  shadow: true,\n})\nexport class SpwSelect {\n  @Element() el: HTMLSpwSelectElement;\n\n  /** Emet un event si la valeur change */\n  @Event() valueChanged: EventEmitter<string | number>;\n  @State() internalValue: string | number;\n\n  /** Valeur sélectionnée actuelle, mutable et reflétée dans le DOM */\n  @Prop({ mutable: true, reflect: true }) value: string | number;\n  /** Label associé au champ de sélection */\n  @Prop() label: string = '';\n  /** Texte du placeholder à afficher lorsque rien n'est sélectionné */\n  @Prop() placeholder: string = 'Sélectionner une option';\n  /** Indique si le champ de sélection est désactivé */\n  @Prop() disabled: boolean;\n  /** Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée */\n  @Prop() name: string;\n  /** Indique si la sélection est obligatoire dans le formulaire */\n  @Prop() required: boolean = false;\n  /** Taille du champ de sélection : 'large' ou 'medium' */\n  @Prop() size: 'large' | 'medium' = 'medium';\n  /** Texte d'assistance affiché sous le champ de sélection */\n  @Prop() assistiveText?: string;\n  /** Message d'erreur à afficher sous le champ de sélection */\n  @Prop() error?: string = '';\n  /** Message d'indication (hint) à afficher sous le champ de sélection */\n  @Prop() hint?: string = '';\n  /** Message de succès à afficher sous le champ de sélection */\n  @Prop() success?: string = '';\n  /** Affiche une icône d'erreur si vrai */\n  @Prop() showErrorIcon?: boolean = true;\n  /** Affiche une icône d'indication si vrai */\n  @Prop() showHintIcon?: boolean = true;\n  /** Affiche une icône de succès si vrai */\n  @Prop() showSuccessIcon?: boolean = true;\n\n  private selectElement!: HTMLSelectElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  componentWillLoad() {\n    this.internalValue = this.value || this.getInitialSelectedValue();\n  }\n\n  componentDidLoad() {\n    this.internals.setFormValue(this.getFormValue());\n    this.moveOptionsToLightDom();\n  }\n\n  private getFormValue(): string | null {\n    return this.internalValue ? String(this.internalValue) : null;\n  }\n\n  private getInitialSelectedValue(): string | number | null {\n    const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n    for (const option of assignedNodes) {\n      if (option.hasAttribute('selected')) {\n        return option.getAttribute('value');\n      }\n    }\n    return null;\n  }\n\n  private handleSelectChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n    this.internalValue = select.value;\n    this.value = this.internalValue;\n    this.internals.setFormValue(this.getFormValue());\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private moveOptionsToLightDom() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n      assignedNodes.forEach(node => {\n        if (node.nodeName === 'OPTION' || node.nodeName === 'OPTGROUP') {\n          this.selectElement.appendChild(node);\n        }\n      });\n    }\n  }\n\n  private renderErrorMessage() {\n    if (this.error) {\n      return (\n        <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n          {this.error}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderHintMessage() {\n    if (this.hint) {\n      return (\n        <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n          {this.hint}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderSuccessMessage() {\n    if (this.success) {\n      return (\n        <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n          {this.success}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-select': true,\n      [`spw-select--${this.size}`]: true,\n      'spw-select--disabled': this.disabled,\n      'spw-select--is-error': !!this.error,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n          {this.assistiveText && (\n            <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n              {this.assistiveText}\n            </spw-field-message>\n          )}\n          <div class=\"spw-select__container\">\n            <select\n              id={this.name}\n              class=\"spw-select__trigger\"\n              onChange={event => this.handleSelectChange(event)}\n              disabled={this.disabled}\n              ref={el => (this.selectElement = el as HTMLSelectElement)}\n              tabindex={this.disabled ? -1 : 0}\n            >\n              <option value=\"\" disabled selected={!this.internalValue}>\n                {this.placeholder}\n              </option>\n            </select>\n            <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n          </div>\n          <slot />\n        </div>\n        {this.renderErrorMessage()}\n        {this.renderHintMessage()}\n        {this.renderSuccessMessage()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-separator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwSeparator extends Components.SpwSeparator, HTMLElement {}
+export const SpwSeparator: {
+    prototype: SpwSeparator;
+    new (): SpwSeparator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/spw-separator.js

@@ -0,0 +1,61 @@
+import { p as proxyCustomElement, H, h } from './p-3706b88e.js';
+
+const spwSeparatorCss = "/*! 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-separator{border-width:1px;display:block}.spw-separator--horizontal{border-bottom-style:solid;height:0;width:auto}.spw-separator--vertical{border-right-style:solid;height:auto;width:0}.spw-separator--dark{border-color:var(--spw-colors-support-grey-grey-900)}.spw-separator--light{border-color:var(--spw-ds-white)}.spw-separator--thickness-1{border-width:1px}.spw-separator--thickness-2{border-width:2px}";
+const SpwSeparatorStyle0 = spwSeparatorCss;
+
+const SpwSeparator$1 = /*@__PURE__*/ proxyCustomElement(class SpwSeparator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.surface = 'dark';
+        this.direction = 'horizontal';
+        this.thickness = 1;
+        this.width = '100%';
+        this.height = '100%';
+    }
+    get elementClass() {
+        return {
+            'spw-separator': true,
+            [`spw-separator--${this.surface}`]: true,
+            [`spw-separator--${this.direction}`]: true,
+            [`spw-separator--thickness-${this.thickness}`]: true,
+        };
+    }
+    get style() {
+        return {
+            width: this.direction === 'horizontal' ? `${this.width}px` : `${this.thickness}px`,
+            height: this.direction === 'vertical' ? `${this.height}px` : `${this.thickness}px`,
+        };
+    }
+    render() {
+        return h("div", { key: 'cf968a9b822afa56b6427bce76dd30f61330505d', class: this.elementClass, style: this.style });
+    }
+    static get style() { return SpwSeparatorStyle0; }
+}, [1, "spw-separator", {
+        "surface": [1],
+        "direction": [1],
+        "thickness": [2],
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-separator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-separator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwSeparator$1);
+            }
+            break;
+    } });
+}
+
+const SpwSeparator = SpwSeparator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwSeparator, defineCustomElement };
+
+//# sourceMappingURL=spw-separator.js.map

package/dist/components/spw-separator.js.map

@@ -0,0 +1 @@
+{"file":"spw-separator.js","mappings":";;AAAA,MAAM,eAAe,GAAG,45FAA45F,CAAC;AACr7F,2BAAe,eAAe;;MCMjBA,cAAY;;;;;uBAEa,MAAM;yBAGK,YAAY;yBAGhC,CAAC;qBAGJ,MAAM;sBAGL,MAAM;;IAE/B,IAAY,YAAY;QACtB,OAAO;YACL,eAAe,EAAE,IAAI;YACrB,CAAC,kBAAkB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;YACxC,CAAC,kBAAkB,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;YAC1C,CAAC,4BAA4B,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;SACrD,CAAC;KACH;IAED,IAAY,KAAK;QACf,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI;YAClF,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI;SACnF,CAAC;KACH;IAED,MAAM;QACJ,OAAO,4DAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAQ,CAAC;KACjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwSeparator"],"sources":["src/components/spw-separator/spw-separator.scss?tag=spw-separator&encapsulation=shadow","src/components/spw-separator/spw-separator.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-separator {\n  display: block;\n  border-width: 1px;\n\n  &--horizontal {\n    border-bottom-style: solid;\n    width: auto;\n    height: 0;\n  }\n\n  &--vertical {\n    border-right-style: solid;\n    width: 0;\n    height: auto;\n  }\n\n  &--dark {\n    border-color: var(--spw-colors-support-grey-grey-900);\n  }\n\n  &--light {\n    border-color: var(--spw-ds-white);\n  }\n\n  &--thickness-1 {\n    border-width: 1px;\n  }\n\n  &--thickness-2 {\n    border-width: 2px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-separator',\n  styleUrl: 'spw-separator.scss',\n  shadow: true,\n})\nexport class SpwSeparator {\n  /** Permet de choisir la surface du séparateur (clair ou sombre) */\n  @Prop() surface: 'dark' | 'light' = 'dark';\n\n  /** Permet de définir la direction du séparateur */\n  @Prop() direction: 'vertical' | 'horizontal' = 'horizontal';\n\n  /** Définit l'épaisseur du séparateur */\n  @Prop() thickness: 1 | 2 = 1;\n\n  /** Largeur du séparateur (par défaut 100% si non spécifié) */\n  @Prop() width: string = '100%';\n\n  /** Hauteur du séparateur (par défaut 100% si non spécifié) */\n  @Prop() height: string = '100%';\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-separator': true,\n      [`spw-separator--${this.surface}`]: true,\n      [`spw-separator--${this.direction}`]: true,\n      [`spw-separator--thickness-${this.thickness}`]: true,\n    };\n  }\n\n  private get style(): { [key: string]: string } {\n    return {\n      width: this.direction === 'horizontal' ? `${this.width}px` : `${this.thickness}px`,\n      height: this.direction === 'vertical' ? `${this.height}px` : `${this.thickness}px`,\n    };\n  }\n\n  render() {\n    return <div class={this.elementClass} style={this.style}></div>;\n  }\n}\n"],"version":3}

package/dist/components/spw-table-body.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwTableBody extends Components.SpwTableBody, HTMLElement {}
+export const SpwTableBody: {
+    prototype: SpwTableBody;
+    new (): SpwTableBody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/spw-table-body.js

@@ -0,0 +1,36 @@
+import { p as proxyCustomElement, H, h } from './p-3706b88e.js';
+
+const spwTableBodyCss = "/*! 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:contents;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)}}";
+const SpwTableBodyStyle0 = spwTableBodyCss;
+
+const SpwTableBody$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableBody extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("tbody", { key: '63663fe3b8514338dc96185e715ccbce015978e9', part: "tbody" }, h("slot", { key: '4411d3b6f1e0a6c4835075bd977d8528f6753468' })));
+    }
+    static get style() { return SpwTableBodyStyle0; }
+}, [1, "spw-table-body"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-table-body"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-table-body":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwTableBody$1);
+            }
+            break;
+    } });
+}
+
+const SpwTableBody = SpwTableBody$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwTableBody, defineCustomElement };
+
+//# sourceMappingURL=spw-table-body.js.map

package/dist/components/spw-table-body.js.map

@@ -0,0 +1 @@
+{"file":"spw-table-body.js","mappings":";;AAAA,MAAM,eAAe,GAAG,ugFAAugF,CAAC;AAChiF,2BAAe,eAAe;;MCMjBA,cAAY;;;;;;IACvB,MAAM;QACJ,QACE,8DAAO,IAAI,EAAC,OAAO,IACjB,8DAAQ,CACF,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTableBody"],"sources":["src/components/spw-table/spw-table-body/spw-table-body.scss?tag=spw-table-body&encapsulation=shadow","src/components/spw-table/spw-table-body/spw-table-body.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-table-body',\n  styleUrl: 'spw-table-body.scss',\n  shadow: true,\n})\nexport class SpwTableBody {\n  render() {\n    return (\n      <tbody part=\"tbody\">\n        <slot />\n      </tbody>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-table-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwTableCell extends Components.SpwTableCell, HTMLElement {}
+export const SpwTableCell: {
+    prototype: SpwTableCell;
+    new (): SpwTableCell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;