@spw-ds/spw-stencil-library 1.2.0 → 1.2.1

package/dist/cjs/utils-CKYAw_Le.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils-CKYAw_Le.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function toKebabCase(str: string) {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\nexport function formatDate(date: string): string {\n  const parts = date.split('-');\n  return `${parts[2]}.${parts[1]}.${parts[0]}`;\n}\n\nexport function stripHtmlContent(content: string): string {\n  const div = document.createElement('div');\n  div.innerHTML = content;\n  return div.textContent || div.innerText || '';\n}\n\ninterface ComponentProp {\n  name: string;\n  type: string;\n  docs: string;\n  default: string;\n}\n\ninterface ComponentEvent {\n  event: string;\n  docs: string;\n  detail: string;\n}\n\ninterface ComponentMethod {\n  name: string;\n  signature: string;\n  docs: string;\n  returns: {\n    type: string;\n    docs: string;\n  };\n  parameters: Array<{\n    name: string;\n    type: string;\n    docs: string;\n  }>;\n}\n\ninterface ComponentInfo {\n  name: string;\n  props: ComponentProp[];\n  events: ComponentEvent[];\n  methods: ComponentMethod[];\n}\n\nconst description = (prop: ComponentProp | ComponentEvent | ComponentMethod) => (prop.docs || '').trim();\n\nconst isText = (prop: ComponentProp) => prop.type === 'string';\nconst isBoolean = (prop: ComponentProp) => prop.type === 'boolean';\nconst isEnum = (prop: ComponentProp) => prop.type.includes('|');\nconst isNumber = (prop: ComponentProp) => prop.type === 'number';\n\nconst enumOptions = (prop: ComponentProp) =>\n  prop.type\n    .split('|')\n    .map(t => t.trim())\n    .map(t => (t === '\"\"' ? 'default' : t))\n    .map(t => t.replace(/^\"(.*)\"$/, '$1'));\n\nconst generateProp = (prop: ComponentProp) => {\n  if (isText(prop)) {\n    return {\n      [prop.name]: {\n        control: 'text',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'string' },\n        },\n      },\n    };\n  }\n\n  if (isBoolean(prop)) {\n    return {\n      [prop.name]: {\n        control: 'boolean',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'boolean' },\n        },\n      },\n    };\n  }\n\n  if (isNumber(prop)) {\n    return {\n      [prop.name]: {\n        control: 'number',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'number' },\n        },\n      },\n    };\n  }\n\n  if (isEnum(prop)) {\n    return {\n      [prop.name]: {\n        control: 'select',\n        defaultValue: prop.default,\n        options: enumOptions(prop),\n        description: description(prop),\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'enum' },\n        },\n      },\n    };\n  }\n\n  return {};\n};\n\nconst generateProps = (props: ComponentProp[]) => {\n  let args = {};\n  props.forEach(prop => (args = { ...args, ...generateProp(prop) }));\n  return args;\n};\n\nconst generateEvent = (event: ComponentEvent) => {\n  function capitalizeFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  return {\n    [`on${capitalizeFirstLetter(event.event)}`]: {\n      action: event.event,\n      description: description(event),\n      table: {\n        defaultValue: { summary: event.event },\n        category: 'events',\n        type: { summary: event.detail },\n      },\n    },\n  };\n};\n\nconst generateEvents = (events: ComponentEvent[]) => {\n  let args = {};\n  events.forEach(event => (args = { ...args, ...generateEvent(event) }));\n  return args;\n};\n\nconst generateMethod = (method: ComponentMethod) => {\n  return {\n    [method.name]: {\n      action: method.name,\n      description: description(method),\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n        defaultValue: { summary: method.returns.type },\n      },\n    },\n  };\n};\n\nconst generateMethods = (methods: ComponentMethod[]) => {\n  let args = {};\n  methods.forEach(method => (args = { ...args, ...generateMethod(method) }));\n  return args;\n};\n\nconst extractComponentInfoByTag = (componentsData: any, tag: string): ComponentInfo | null => {\n  const component = componentsData.components.find(c => c.tag === tag);\n\n  if (!component) {\n    console.error(`Component with tag ${tag} not found`);\n    return null;\n  }\n\n  const { props, events, methods } = component;\n\n  const propInfo = props.map(prop => ({\n    name: prop.name,\n    type: prop.type,\n    docs: prop.docs,\n    default: prop.default || '',\n  }));\n\n  const eventInfo = events.map(event => ({\n    event: event.event,\n    docs: event.docs,\n    detail: event.detail,\n  }));\n\n  const methodInfo = methods.map(method => ({\n    name: method.name,\n    signature: method.signature,\n    docs: method.docs,\n    returns: method.returns,\n    parameters: method.parameters,\n  }));\n\n  return {\n    name: tag,\n    props: propInfo,\n    events: eventInfo,\n    methods: methodInfo,\n  };\n};\n\nconst generateHTMLTable = (componentInfo: ComponentInfo): string => {\n  if (!componentInfo) {\n    return `<p>Component not found</p>`;\n  }\n\n  const { props, events, methods } = componentInfo;\n\n  const propsRows = props\n    .map(\n      prop => `\n    <tr>\n      <td>${prop.name}</td>\n      <td>${prop.type}</td>\n      <td>${prop.docs}</td>\n      <td>${prop.default}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  const eventsRows = events\n    .map(\n      event => `\n    <tr>\n      <td>${event.event}</td>\n      <td>${event.detail}</td>\n      <td>${event.docs}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  const methodsRows = methods\n    .map(\n      method => `\n    <tr>\n      <td>${method.name}</td>\n      <td>${method.signature}</td>\n      <td>${method.returns.type}</td>\n      <td>${method.docs}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  return `\n    <h3>Propriétés</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Propriété</th>\n          <th>Type</th>\n          <th>Description</th>\n          <th>Valeur par défaut</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${propsRows}\n      </tbody>\n    </table>\n    <h3>Événements</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Événement</th>\n          <th>Détail</th>\n          <th>Description</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${eventsRows}\n      </tbody>\n    </table>\n    <h3>Méthodes</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Méthode</th>\n          <th>Signature</th>\n          <th>Retour</th>\n          <th>Description</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${methodsRows}\n      </tbody>\n    </table>\n  `;\n};\n\nexport const generateComponentTable = (componentsData: any, tag: string): string => {\n  const componentInfo = extractComponentInfoByTag(componentsData, tag);\n  return generateHTMLTable(componentInfo);\n};\n\nexport const withComponentControls = (\n  componentsData: any,\n  { tag, customTokens = [] }: { tag: string; customTokens?: { name: string; description: string; defaultValue: string }[] },\n): any => {\n  const component = componentsData.components.find(c => c.tag === tag);\n  const props = component?.props || [];\n  const events = component?.events || [];\n  const methods = component?.methods || [];\n\n  const tokenControls = customTokens.reduce((acc, token) => {\n    acc[token.name] = {\n      control: true,\n      description: token.description,\n      table: {\n        category: 'Tokens',\n        type: { summary: 'CSS Variable' },\n        defaultValue: { summary: token.defaultValue },\n      },\n    };\n    return acc;\n  }, {});\n\n  return {\n    ...generateProps(props as ComponentProp[]),\n    ...generateEvents(events as ComponentEvent[]),\n    ...generateMethods(methods as ComponentMethod[]),\n    ...tokenControls,\n  };\n};\n\nexport function extractArgTypes(componentsData: any, subComponentTags: string[]) {\n  return subComponentTags.reduce((acc, tag) => {\n    const subComponentArgTypes = withComponentControls(componentsData, { tag });\n    return { ...acc, ...subComponentArgTypes };\n  }, {});\n}\n\nexport function formatFileSize(sizeInBytes) {\n  const sizeInMB = sizeInBytes / (1024 * 1024);\n  let formattedSize = sizeInMB.toFixed(2).replace('.', ',');\n\n  if (sizeInMB > 0 && sizeInMB < 0.01) {\n    formattedSize = '0,01';\n  } else if (sizeInMB === 0) {\n    formattedSize = '0,00';\n  }\n\n  return `${formattedSize} Mo`;\n}\n\nexport function hasSlotContent(el: HTMLElement): boolean {\n  const slot = el.querySelector('slot');\n  return slot && slot.assignedNodes().length > 0;\n}\n"],"names":[],"mappings":";;AAQM,SAAU,UAAU,CAAC,IAAY,EAAA;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAC7B,IAAA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;AAC9C;AAuVM,SAAU,cAAc,CAAC,WAAW,EAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC;AAC5C,IAAA,IAAI,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEzD,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,IAAI,EAAE;QACnC,aAAa,GAAG,MAAM;;AACjB,SAAA,IAAI,QAAQ,KAAK,CAAC,EAAE;QACzB,aAAa,GAAG,MAAM;;IAGxB,OAAO,CAAA,EAAG,aAAa,CAAA,GAAA,CAAK;AAC9B;;;;;"}
+{"version":3,"file":"utils-CKYAw_Le.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function toKebabCase(str: string) {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\nexport function formatDate(date: string): string {\n  const parts = date.split('-');\n  return `${parts[2]}.${parts[1]}.${parts[0]}`;\n}\n\nexport function stripHtmlContent(content: string): string {\n  const div = document.createElement('div');\n  div.innerHTML = content;\n  return div.textContent || div.innerText || '';\n}\n\ninterface ComponentProp {\n  name: string;\n  type: string;\n  docs: string;\n  default: string;\n}\n\ninterface ComponentEvent {\n  event: string;\n  docs: string;\n  detail: string;\n}\n\ninterface ComponentMethod {\n  name: string;\n  signature: string;\n  docs: string;\n  returns: {\n    type: string;\n    docs: string;\n  };\n  parameters: Array<{\n    name: string;\n    type: string;\n    docs: string;\n  }>;\n}\n\ninterface ComponentInfo {\n  name: string;\n  props: ComponentProp[];\n  events: ComponentEvent[];\n  methods: ComponentMethod[];\n}\n\nconst description = (prop: ComponentProp | ComponentEvent | ComponentMethod) => (prop.docs || '').trim();\n\nconst isText = (prop: ComponentProp) => prop.type === 'string';\nconst isBoolean = (prop: ComponentProp) => prop.type === 'boolean';\nconst isEnum = (prop: ComponentProp) => prop.type.includes('|');\nconst isNumber = (prop: ComponentProp) => prop.type === 'number';\n\nconst enumOptions = (prop: ComponentProp) =>\n  prop.type\n    .split('|')\n    .map(t => t.trim())\n    .map(t => (t === '\"\"' ? 'default' : t))\n    .map(t => t.replace(/^\"(.*)\"$/, '$1'));\n\nconst generateProp = (prop: ComponentProp) => {\n  if (isText(prop)) {\n    return {\n      [prop.name]: {\n        control: 'text',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'string' },\n        },\n      },\n    };\n  }\n\n  if (isBoolean(prop)) {\n    return {\n      [prop.name]: {\n        control: 'boolean',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'boolean' },\n        },\n      },\n    };\n  }\n\n  if (isNumber(prop)) {\n    return {\n      [prop.name]: {\n        control: 'number',\n        description: description(prop),\n        defaultValue: prop.default,\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'number' },\n        },\n      },\n    };\n  }\n\n  if (isEnum(prop)) {\n    return {\n      [prop.name]: {\n        control: 'select',\n        defaultValue: prop.default,\n        options: enumOptions(prop),\n        description: description(prop),\n        table: {\n          category: 'properties',\n          defaultValue: { summary: prop.default },\n          type: { summary: 'enum' },\n        },\n      },\n    };\n  }\n\n  return {};\n};\n\nconst generateProps = (props: ComponentProp[]) => {\n  let args = {};\n  props.forEach(prop => (args = { ...args, ...generateProp(prop) }));\n  return args;\n};\n\nconst generateEvent = (event: ComponentEvent) => {\n  function capitalizeFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  return {\n    [`on${capitalizeFirstLetter(event.event)}`]: {\n      action: event.event,\n      description: description(event),\n      table: {\n        defaultValue: { summary: event.event },\n        category: 'events',\n        type: { summary: event.detail },\n      },\n    },\n  };\n};\n\nconst generateEvents = (events: ComponentEvent[]) => {\n  let args = {};\n  events.forEach(event => (args = { ...args, ...generateEvent(event) }));\n  return args;\n};\n\nconst generateMethod = (method: ComponentMethod) => {\n  return {\n    [method.name]: {\n      action: method.name,\n      description: description(method),\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n        defaultValue: { summary: method.returns.type },\n      },\n    },\n  };\n};\n\nconst generateMethods = (methods: ComponentMethod[]) => {\n  let args = {};\n  methods.forEach(method => (args = { ...args, ...generateMethod(method) }));\n  return args;\n};\n\nconst extractComponentInfoByTag = (componentsData: any, tag: string): ComponentInfo | null => {\n  const component = componentsData.components.find(c => c.tag === tag);\n\n  if (!component) {\n    console.error(`Component with tag ${tag} not found`);\n    return null;\n  }\n\n  const { props, events, methods } = component;\n\n  const propInfo = props.map(prop => ({\n    name: prop.name,\n    type: prop.type,\n    docs: prop.docs,\n    default: prop.default || '',\n  }));\n\n  const eventInfo = events.map(event => ({\n    event: event.event,\n    docs: event.docs,\n    detail: event.detail,\n  }));\n\n  const methodInfo = methods.map(method => ({\n    name: method.name,\n    signature: method.signature,\n    docs: method.docs,\n    returns: method.returns,\n    parameters: method.parameters,\n  }));\n\n  return {\n    name: tag,\n    props: propInfo,\n    events: eventInfo,\n    methods: methodInfo,\n  };\n};\n\nconst generateHTMLTable = (componentInfo: ComponentInfo): string => {\n  if (!componentInfo) {\n    return `<p>Component not found</p>`;\n  }\n\n  const { props, events, methods } = componentInfo;\n\n  const propsRows = props\n    .map(\n      prop => `\n    <tr>\n      <td>${prop.name}</td>\n      <td>${prop.type}</td>\n      <td>${prop.docs}</td>\n      <td>${prop.default}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  const eventsRows = events\n    .map(\n      event => `\n    <tr>\n      <td>${event.event}</td>\n      <td>${event.detail}</td>\n      <td>${event.docs}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  const methodsRows = methods\n    .map(\n      method => `\n    <tr>\n      <td>${method.name}</td>\n      <td>${method.signature}</td>\n      <td>${method.returns.type}</td>\n      <td>${method.docs}</td>\n    </tr>\n  `,\n    )\n    .join('');\n\n  return `\n    <h3>Propriétés</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Propriété</th>\n          <th>Type</th>\n          <th>Description</th>\n          <th>Valeur par défaut</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${propsRows}\n      </tbody>\n    </table>\n    <h3>Événements</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Événement</th>\n          <th>Détail</th>\n          <th>Description</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${eventsRows}\n      </tbody>\n    </table>\n    <h3>Méthodes</h3>\n    <table class=\"w-full\">\n      <thead>\n        <tr>\n          <th>Méthode</th>\n          <th>Signature</th>\n          <th>Retour</th>\n          <th>Description</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${methodsRows}\n      </tbody>\n    </table>\n  `;\n};\n\nexport const generateComponentTable = (componentsData: any, tag: string): string => {\n  const componentInfo = extractComponentInfoByTag(componentsData, tag);\n  return generateHTMLTable(componentInfo);\n};\n\nexport const withComponentControls = (\n  componentsData: any,\n  { tag, customTokens = [] }: { tag: string; customTokens?: { name: string; description: string; defaultValue: string }[] },\n): any => {\n  const component = componentsData.components.find(c => c.tag === tag);\n  const props = component?.props || [];\n  const events = component?.events || [];\n  const methods = component?.methods || [];\n\n  const tokenControls = customTokens.reduce((acc, token) => {\n    acc[token.name] = {\n      control: true,\n      description: token.description,\n      table: {\n        category: 'Tokens',\n        type: { summary: 'CSS Variable' },\n        defaultValue: { summary: token.defaultValue },\n      },\n    };\n    return acc;\n  }, {});\n\n  // ✅ Séparation claire des catégories\n  const propControls = generateProps(props as ComponentProp[]);\n  const eventControls = generateEvents(events as ComponentEvent[]);\n  const methodControls = generateMethods(methods as ComponentMethod[]);\n\n  // ✅ Regroupement complet pour Storybook\n  const allControls = {\n    ...propControls,\n    ...eventControls,\n    ...methodControls,\n    ...tokenControls,\n  };\n\n  // ✅ Indique explicitement quelles sont les props réelles du composant\n  Object.defineProperty(allControls, '__realProps', {\n    value: Object.keys(propControls).concat(Object.keys(tokenControls)),\n    enumerable: false, // ne pollue pas la vue Storybook\n  });\n\n  return allControls;\n};\n\nexport function extractArgTypes(componentsData: any, subComponentTags: string[]) {\n  return subComponentTags.reduce((acc, tag) => {\n    const subComponentArgTypes = withComponentControls(componentsData, { tag });\n    return { ...acc, ...subComponentArgTypes };\n  }, {});\n}\n\nexport function formatFileSize(sizeInBytes) {\n  const sizeInMB = sizeInBytes / (1024 * 1024);\n  let formattedSize = sizeInMB.toFixed(2).replace('.', ',');\n\n  if (sizeInMB > 0 && sizeInMB < 0.01) {\n    formattedSize = '0,01';\n  } else if (sizeInMB === 0) {\n    formattedSize = '0,00';\n  }\n\n  return `${formattedSize} Mo`;\n}\n\nexport function hasSlotContent(el: HTMLElement): boolean {\n  const slot = el.querySelector('slot');\n  return slot && slot.assignedNodes().length > 0;\n}\n"],"names":[],"mappings":";;AAQM,SAAU,UAAU,CAAC,IAAY,EAAA;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAC7B,IAAA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;AAC9C;AAqWM,SAAU,cAAc,CAAC,WAAW,EAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC;AAC5C,IAAA,IAAI,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEzD,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,IAAI,EAAE;QACnC,aAAa,GAAG,MAAM;;AACjB,SAAA,IAAI,QAAQ,KAAK,CAAC,EAAE;QACzB,aAAa,GAAG,MAAM;;IAGxB,OAAO,CAAA,EAAG,aAAa,CAAA,GAAA,CAAK;AAC9B;;;;;"}

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "components/spw-illustration/spw-illustration.js",
+    "components/spw-select/spw-select.js",
     "components/spw-table/spw-table.js",
     "components/spw-accordion/spw-accordion.js",
     "components/spw-accordion/spw-accordion-content/spw-accordion-content.js",
@@ -53,7 +55,6 @@
     "components/spw-pagination/spw-pagination.js",
     "components/spw-radio/spw-radio.js",
     "components/spw-search-field/spw-search-field.js",
-    "components/spw-select/spw-select.js",
     "components/spw-separator/spw-separator.js",
     "components/spw-sidebar/spw-sidebar.js",
     "components/spw-sidebar/spw-sidebar-navigation-dropdown/spw-sidebar-navigation-dropdown.js",

package/dist/collection/components/spw-accordion/spw-accordion-content/spw-accordion-content.js

@@ -58,7 +58,7 @@ export class SpwAccordionContent {
         });
     }
     render() {
-        return (h("div", { key: 'f8f76591fc8045f35393ad0f3149105010af26ed', class: "spw-accordion-content", ref: el => (this.contentElement = el), "data-accordion-id": this.el.getAttribute('data-accordion-id') }, h("div", { key: 'b04d6bc87f3990182f4f6b5b0b10f7a01660724f', class: "spw-accordion-content__inner" }, h("slot", { key: 'fc51919bab2efa6e1b950b92f84458c86f3488c7', onSlotchange: () => this.updateHeight() }))));
+        return (h("div", { key: '47bc447a3bc5cd22e31a103e9223d68bb3299747', class: "spw-accordion-content", ref: el => (this.contentElement = el), "data-accordion-id": this.el.getAttribute('data-accordion-id') }, h("div", { key: '850eef496b26067e7924d08d2b910d1b104b2d89', class: "spw-accordion-content__inner" }, h("slot", { key: '12d15fce0069bc11dcb8d16df2c3bda4870137d3', onSlotchange: () => this.updateHeight() }))));
     }
     static get is() { return "spw-accordion-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-accordion/spw-accordion-item/spw-accordion-item.js

@@ -118,7 +118,7 @@ export class SpwAccordionItem {
         };
     }
     render() {
-        return (h(Host, { key: 'af6e1e952bdd85b92582701bfce055bf3a98daf3', class: this.elementClass }, h("div", { key: 'a33a3b84d3f9e50d0cf1ecebd894b67bff2c0153', class: "spw-accordion-item__content" }, h("a", { key: '4d04b8d3e6d9245e78aa8831a18e391e142821cd', href: "#", class: this.elementChildClass, onClick: event => this.handleClick(event) }, h("slot", { key: 'e0ffaddb5db07b075f35ff8cddea420809fc4fc5', name: "title" })), h("slot", { key: '1f2d49ec989efff671bbfe7abe1d56349c9ed3dc', name: "content" }))));
+        return (h(Host, { key: 'db85e50c8268f27e6c2c1bd5fb9f14ade4a5918b', class: this.elementClass }, h("div", { key: '85dae7aa652686ec4e74863ea78e6a82ac0d6bc7', class: "spw-accordion-item__content" }, h("a", { key: 'a40ecf4340f2a6380301e786d82402af1b9ca5e2', href: "#", class: this.elementChildClass, onClick: event => this.handleClick(event) }, h("slot", { key: 'aa68afc78b54f5478506449f9b914fc0429819a1', name: "title" })), h("slot", { key: 'd6f6682794d136ef114bd3ff286ba01237865422', name: "content" }))));
     }
     static get is() { return "spw-accordion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-accordion/spw-accordion-title/spw-accordion-title.js

@@ -7,7 +7,7 @@ export class SpwAccordionTitle {
     render() {
         const TagType = this.tag;
         const iconElement = this.icon ? h("spw-icon", { icon: this.icon }) : null;
-        return (h(Host, { key: 'f0891468444ba1c8f9ee09a4d2513a5d0653aa7e' }, h("div", { key: '36a0ebf0448a092f5b6ad5ad89f9ed557a7d24c9', class: "spw-accordion-title" }, h("div", { key: '8956d395ccc6afc39a0a7e5833e9d2567b482414', class: "spw-accordion-title__content" }, h(TagType, { key: 'fc7b7701040208a041d252dbe10185c6835b4360', class: "spw-tw-flex" }, iconElement && h("div", { key: 'd609dee213c488348b8fc8559631ab691575a6bc', class: "spw-tw-mr-3" }, iconElement), h("div", { key: '30fb49013c2298e3948f32a75972a1531f5faa11' }, h("slot", { key: '015109222b29238f54a70417f0b053286a2f5b0a' }))), h("span", { key: '06b41243e8552d8b8c54cbae8264d2b682ca23c1', class: "spw-accordion-title__trigger" }, h("spw-icon", { key: '40c0cc747f68fe3b42a04d03dfcdca3747b3fb7d', icon: "fa-chevron-down" }))))));
+        return (h(Host, { key: 'c48130c949e4772c6b6e163b8f84b595fa7b4c51' }, h("div", { key: '9ff66e56f51b8642019ba46c4b11193fb821bb44', class: "spw-accordion-title" }, h("div", { key: '0bb09fdd533c01e98f4f6645338327674e41f2e9', class: "spw-accordion-title__content" }, h(TagType, { key: '3b399be71a64a1a765b0b63e254bf1526ce35534', class: "spw-tw-flex" }, iconElement && h("div", { key: '343ecc64661eb5d85ba408d6556a6c4e407c10d9', class: "spw-tw-mr-3" }, iconElement), h("div", { key: '13531d24356419e72af41be702865551c9794518' }, h("slot", { key: 'b04e6bf552232e0cccffb7ae81bbcb7f689a3f45' }))), h("span", { key: '80bc63470ca5793d423df78c313fa70330f8c302', class: "spw-accordion-title__trigger" }, h("spw-icon", { key: '85b2440cdff81b927edfe25a4e3bf71e99e3c236', icon: "fa-chevron-down" }))))));
     }
     static get is() { return "spw-accordion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwAccordion {
     render() {
-        return (h(Host, { key: '1ef883ec46d5900e52826d4863afda99e80c68e9' }, h("div", { key: 'baec73af31494e3ec63d344148c58133e29777f3', class: "spw-accordion" }, h("slot", { key: '242ef6fe1603ca9904a040d741c362fc6bba8601' }))));
+        return (h(Host, { key: '580fb50f869e7eb3e2c0a53f41ad515d94cbe009' }, h("div", { key: '841e8c248402008a91263ba8e11d09505ca1b71b', class: "spw-accordion" }, h("slot", { key: 'cbe8f77a5f9b644b7fcea364f2e1f71d0fb09108' }))));
     }
     static get is() { return "spw-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb-item/spw-breadcrumb-item.js

@@ -32,7 +32,7 @@ export class SpwBreadcrumbItem {
         this.el.classList.add(`spw-breadcrumb-item--${this.surface}`);
     }
     render() {
-        return (h(Host, { key: 'dd39349f680eac37273a156d01eaeafeb109bd63' }, h("li", { key: '5097ca5e8ad4833aec74c03fab5468b29e17740f', class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface }, h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page" }, h("slot", null))))));
+        return (h(Host, { key: 'd18e813e92311789b8f2a9d9f88f59a90b8103a0' }, h("li", { key: '7e76e4927389fc6e575f9b6b01c6dfa5a603f140', class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface }, h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page" }, h("slot", null))))));
     }
     static get is() { return "spw-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,7 +43,7 @@ export class SpwBreadcrumb {
             [`spw-breadcrumb--font-size-${this.fontSize}`]: true,
             [`spw-breadcrumb--${this.variant}`]: true,
         };
-        return (h(Host, { key: 'bcece665bc261db84a03ed079b40389182e5fe8b' }, h("nav", { key: '016b3f90793dbcef5d4ed3461183fb7db57bc3fc', "aria-label": "breadcrumb", class: elementClass }, h("ol", { key: '1ba58bcd97f30de63bd75e297333d96005fed8d2', class: "spw-breadcrumb__list" }, h("slot", { key: '9e1fdea821224f5b1b0c69b17cff3ac570d5dbcb' })))));
+        return (h(Host, { key: '78bb34c23a1528efdbec664e0eb50226c862d714' }, h("nav", { key: 'e062187ac27e74421f969086dd3bd4c2163ef925', "aria-label": "breadcrumb", class: elementClass }, h("ol", { key: 'f04a93f46893f74322ba6a9480d675da5dd474e2', class: "spw-breadcrumb__list" }, h("slot", { key: '952c976501ba0565299d763f823a18930387ea67' })))));
     }
     static get is() { return "spw-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,7 +97,7 @@ export class SpwButton {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': isDisabled ? 'true' : null,
         };
-        return (h(TagType, Object.assign({ key: 'cba8fa4cf8582a8da491f6a0644af9cf875354b6' }, attrs, { class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: '4b888f2de16270d4579d19cdcfe706fee4d02210', class: "spw-button__inner" }, h("div", { key: 'e817c201a16f40d58b32bb37cb2357b5ad8861f0', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: '1a718325da6dac35625b066ac28245709643aeae' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: '78f434b7c901cb88e9f753ea9080b3ead3a91e36', text: "" })));
+        return (h(TagType, Object.assign({ key: 'e9eef72fb99c615172917acc24f70ebd45952829' }, attrs, { class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: '6a855c4097ae1aa79900f755448c03990f21a5cd', class: "spw-button__inner" }, h("div", { key: 'df7af3c99186aa808a65526d4c205a29d36ed285', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: '9909ce45a0e6e832fc98f5ea96da6c6c0a934399' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: '5433366a7c599fcedd58cc6361bcb058c407689c', text: "" })));
     }
     static get is() { return "spw-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-content/spw-card-content.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { formatDate } from "../../../utils/utils";
 export class SpwCardContent {
     render() {
-        return (h("div", { key: 'd145802efbd36f13a4f0b5f078788600a9c6632b', class: "spw-card-content" }, this.tag && h("span", { key: '33fee50a75c8332c43d31b5a29b955cfda162c96', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: '1bfdac654414769ef33633cb324ed2ed3d251669', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '0bb280b7d7cb74449694d409f3c728ce95c4d9ff' })));
+        return (h("div", { key: 'fae19ee18d307295062443308246f5baa72b4c77', class: "spw-card-content" }, this.tag && h("span", { key: 'd95abdb0e8ba592680abd0e1e2c73ada5f1e55b0', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: 'e4051e54e576af610e47bdc05433b14b4c8bc6c3', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '94abc1be4bd3ca1f9083419a358b1372975e9bd3' })));
     }
     static get is() { return "spw-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-excerpt/spw-card-excerpt.js

@@ -13,7 +13,7 @@ export class SpwCardExcerpt {
         };
     }
     render() {
-        return (h("div", { key: '6095e49f16088b4ebe8e693124e0507561aaf0f8', class: this.elementClass }, h("slot", { key: '704d15c121948cee1364be14650cfa9f3a614c6e' })));
+        return (h("div", { key: '7141ae670aa86d10cec7111a7f9f3ac23a7ffe99', class: this.elementClass }, h("slot", { key: '414df86d9a9b1564f05cccd2ac97c248b2356ffe' })));
     }
     static get is() { return "spw-card-excerpt"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-image/spw-card-image.js

@@ -19,7 +19,7 @@ export class SpwCardImage {
         }
     }
     render() {
-        return (h("div", { key: '23372c9f4959fc7a39f998d9b467d8a5c68978bd', class: "spw-card-image" }, this.label && h("span", { key: '9f7207229572543d3e3748626a72ef45ad50be9a', class: "spw-card-image__label" }, this.label), h("slot", { key: 'c21e75555d3012a423945d68dd01aaa49df4b93b' }), h("div", { key: 'db7efe735e5f40483c9d90113844f34925c6bf58', class: "spw-card-image__icon" }, h("spw-icon", { key: '048acb6cf5aff5a2accd58ec9445a1d5bfab3581', icon: "fa-plus" }))));
+        return (h("div", { key: 'ddfa5865de5a66d7316ac86c09226d2714fee04c', class: "spw-card-image" }, this.label && h("span", { key: 'b7b63987b51733788a2901a6cecd685333ca468c', class: "spw-card-image__label" }, this.label), h("slot", { key: '2562150ce4fe208e70bcc326bf3b90b2aebaf9c0' }), h("div", { key: '24b37db0c310e1a524c2c66496e578ade4b1a47c', class: "spw-card-image__icon" }, h("spw-icon", { key: '6334e1ec0e33f2406922dcaa50df0c7e586e47af', icon: "fa-plus" }))));
     }
     static get is() { return "spw-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtag-item/spw-card-subtag-item.js

@@ -12,7 +12,7 @@ export class SpwCardSubtagItem {
         };
     }
     render() {
-        return (h(Host, { key: '7e30b9bb90784e374b1d3bc84fb1202e631ef7e4' }, h("span", { key: '7f1c1abc556bc4dbe1a3bdec8b1fda7a3758a062', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: '103791510b6af6bce06a5679e0ef4739489287f6' }))));
+        return (h(Host, { key: 'bb36b5ced113d9129698ceeff14cd092dcc44c20' }, h("span", { key: '64ad44f7a700914c82371215cddd7fbe624bd622', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: 'd540bd37c2a2000d8daa11291f7e26810baea930' }))));
     }
     static get is() { return "spw-card-subtag-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.js

@@ -23,7 +23,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: 'c2abe029921015ce992e821e25e1f79f26ac2eac' }, h("div", { key: '92b9920ceeb61daff3e21dbc8e28e92ba0ab725e', class: this.elementClass }, h("slot", { key: 'f572e23dad24bb1d9dcbe36b32d7551b2c091e09' }))));
+        return (h(Host, { key: '7197f57b0a93b6b51941fa40cdfadcd60c6e4077' }, h("div", { key: 'ecdd97414e532375fb29dcb945b539852f1ccf87', class: this.elementClass }, h("slot", { key: 'ae8d6e6ae70af87e7e9ea6bce86ebf35a0beb91f' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-card/spw-card-title/spw-card-title.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwCardTitle {
     render() {
-        return (h("h3", { key: '7ab4466f7c72b8deedbfe76fdb2077d28be6e9bf', class: "spw-card-title" }, h("slot", { key: 'a6705a96741a72ab378774ce42a6c5e4e307432e' })));
+        return (h("h3", { key: 'a2aae793eea1b60c5ccc58ddb22f508f18984a3a', class: "spw-card-title" }, h("slot", { key: 'ab895331d9876bc14a621fe197933d69612ac07d' })));
     }
     static get is() { return "spw-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: '57c021e54b5aa7499cfbbdd63948c6c49744a782', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '30a38d6d817a336b6052999baabd811724ab69a6', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '81b3e6be4c24ad0e1d2677ae89c0847722d34906' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: 'b95296b4b58a85bb1b21e44e9613047a806daf20', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: 'e04f67e288faa21ea2f5fde0398bb2748e8d8033', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: 'ce8b0d98fcb7469b4304af4c3824730777ffd8fd' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '120b625ad8a4d1fdb1d72fff6bc2e3c95e01740d' })))));
+        return (h(Host, { key: '414b823a8a824f866571819908c4279481f4b4bd', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '550b1c32da3f917ca8e78194b13592d3265db0b1', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '3988de2a54183a0eff3cea43de9904c094790110' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: '7840de1b38ec0300f5dbb8213241c1b6c2d1917d', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: 'f542560e0505e84676c1b3a2e7910c2ba18b9970', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: 'f7bdcf4575a95303ed2dc06ac141e7424a24760d' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '608fc7a34d3060dff797cf273d7cd7c09c24c520' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,2 +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:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;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-checkbox{align-items:flex-start;display:inline-flex;flex-direction:row;padding:0}.spw-checkbox__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-2-xs);display:flex;flex:none;flex-grow:0;font-size:var(--spw-typography-body-body-3-font-size);height:20px;justify-content:center;order:0;position:relative;width:20px}.spw-checkbox__wrapper spw-icon{font-size:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.spw-checkbox__wrapper--error{border-color:var(--spw-colors-dark-states-error-error-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):active,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-visible,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-within{box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__wrapper--disabled{border-color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper--checked{border-color:var(--spw-ds-primary);color:var(--spw-ds-primary)}.spw-checkbox__wrapper--checked--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label{word-wrap:break-word;color:var(--spw-color-themes-grey-grey-900);order:1;padding-left:var(--spw-spacings-spacing-sm);padding-top:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-checkbox__label:hover~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__label:active~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__label--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label:hover,.spw-checkbox__wrapper:hover{cursor:pointer}.spw-checkbox__label--disabled:hover,.spw-checkbox__wrapper--disabled:hover{cursor:not-allowed}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}.spw-tw-mr-2{margin-right:.5rem}
+ /*! 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%;--spw-ds-checkbox-checked-color:var(--spw-ds-primary);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:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;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-checkbox{align-items:flex-start;display:inline-flex;flex-direction:row;padding:0}.spw-checkbox__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-2-xs);display:flex;flex:none;flex-grow:0;font-size:var(--spw-typography-body-body-3-font-size);height:20px;justify-content:center;order:0;position:relative;width:20px}.spw-checkbox__wrapper spw-icon{font-size:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.spw-checkbox__wrapper--error{border-color:var(--spw-colors-dark-states-error-error-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):hover{outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):active,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-visible,.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled):focus-within{box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__wrapper--disabled{border-color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper--checked{border-color:var(--spw-ds-checkbox-checked-color);color:var(--spw-ds-checkbox-checked-color)}.spw-checkbox__wrapper--checked--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper--toggle{background:var(--spw-color-themes-grey-grey-500);border-color:var(--spw-color-themes-grey-grey-500);border-radius:40px;height:20px;width:32px}.spw-checkbox__wrapper--toggle spw-icon{line-height:0;opacity:0;transition:all .2s ease .3s}.spw-checkbox__wrapper--toggle:before{background:#fff;border-radius:50%;content:"";height:14px;left:2px;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:14px}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle{background:var(--spw-ds-checkbox-checked-color);border-color:var(--spw-ds-checkbox-checked-color)}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle:before{background:#fff;left:calc(100% - 16px)}.spw-checkbox__wrapper.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle spw-icon{color:var(--spw-ds-checkbox-checked-color);display:block;font-size:10px;margin-left:5px}.spw-checkbox__wrapper.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled{background:#fff;border-color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__wrapper.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled:before{background:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label{word-wrap:break-word;color:var(--spw-color-themes-grey-grey-900);order:1;padding-left:var(--spw-spacings-spacing-sm);padding-top:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-checkbox__label:hover~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){outline:4px solid var(--spw-color-themes-grey-grey-300)}.spw-checkbox__label:active~.spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled){box-shadow:0 0 0 4px #000;outline:2px solid #fff;outline-offset:0}.spw-checkbox__label--disabled{color:var(--spw-color-themes-grey-grey-500)}.spw-checkbox__label:hover,.spw-checkbox__wrapper:hover{cursor:pointer}.spw-checkbox__label--disabled:hover,.spw-checkbox__wrapper--disabled:hover{cursor:not-allowed}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}.spw-tw-mr-2{margin-right:.5rem}

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

@@ -9,6 +9,8 @@ export class SpwCheckbox {
         this.error = false;
         /** Icône à afficher lorsque la case à cocher est cochée */
         this.icon = 'fa-check';
+        /** Type de variant pour la checkbox */
+        this.variant = 'default';
     }
     handleCheckbox() {
         if (!this.disabled) {
@@ -64,6 +66,7 @@ export class SpwCheckbox {
     get elementClass() {
         return {
             'spw-checkbox__wrapper': true,
+            [`spw-checkbox__wrapper--${this.variant}`]: true,
             'spw-checkbox__wrapper--disabled': this.disabled,
             'spw-checkbox__wrapper--checked': this.internalChecked,
             'spw-checkbox__wrapper--error': this.error,
@@ -72,7 +75,7 @@ export class SpwCheckbox {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: '4025cfdeb40b577201fd39958d3c352c3bd9c20c', class: "spw-checkbox" }, h("input", { key: '63a36779a3c22b3179925b1058c975e858d8adb6', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '2665795a7d89b4973720e59f7408262df84975ee', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '8b454a0a5c6b07f6c7d536ad2d127643ab8176e4' }))), h("div", { key: '77b376a060eb165bf91fd2246a54290e25d9b410', tabindex: this.disabled ? -1 : 0, onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "label", class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'd62ff0182844be865f7f60acdbe55630b88eba00', icon: this.icon }))));
+        return (h("div", { key: '51a08401d10268179bf2c4cb7724c16c429f59f6', class: "spw-checkbox" }, h("input", { key: 'b667048ec9264d847c11adc97c14b46c46996d1d', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '03ccc8358b7d53064db1486fdd3b774adc682667', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '2f6b5d7a74f9c41bf91ed9f482fd67e9596f6d72' }))), h("div", { key: '5bd4f661b54525388bb2f3b554de712775197833', tabindex: this.disabled ? -1 : 0, onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "label", class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'aec767de94d5fe31cb9fad4f124fb0a7eada5810', icon: this.icon }))));
     }
     static get is() { return "spw-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -187,6 +190,26 @@ export class SpwCheckbox {
                 "setter": false,
                 "attribute": "name",
                 "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'toggle'",
+                    "resolved": "\"default\" | \"toggle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Type de variant pour la checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"spw-checkbox.js","sourceRoot":"","sources":["../../../src/components/spw-checkbox/spw-checkbox.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-checkbox',\n  styleUrl: 'spw-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class SpwCheckbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el: HTMLSpwCheckboxElement;\n\n  /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable */\n  @Prop() disabled: boolean = false;\n  /** Propriété mutable qui reflète si la case à cocher est cochée ou non */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel */\n  @Prop() error: boolean = false;\n  /** Icône à afficher lorsque la case à cocher est cochée */\n  @Prop() icon: string = 'fa-check';\n  /** Nom de l'élément utilisé dans les formulaires */\n  @Prop() name: string;\n\n  @State() internalChecked: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) */\n  @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<boolean>;\n\n  private handleCheckbox() {\n    if (!this.disabled) {\n      this.internalChecked = !this.internalChecked;\n      this.checked = this.internalChecked;\n      this.updateFormValue();\n      this.spwChange.emit(this.internalChecked);\n    }\n  }\n\n  /** Méthode publique pour changer l'état de la case à cocher. */\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n    this.checked = newVal;\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged(newChecked: boolean) {\n    this.internalChecked = newChecked;\n    this.inputElement.checked = newChecked;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (this.internalChecked) {\n      this.internals.setFormValue('on');\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleKeydown(event) {\n    if (event.key === ' ' || event.key === 'Enter') {\n      // Space or Enter keys\n      this.handleCheckbox();\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.updateFormValue();\n  }\n\n  componentDidLoad() {\n    this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n      if (this.internalChecked) {\n        e.formData.set(this.name, 'on');\n      }\n    });\n  }\n\n  formResetCallback() {\n    this.internalChecked = false;\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-checkbox__wrapper': true,\n      'spw-checkbox__wrapper--disabled': this.disabled,\n      'spw-checkbox__wrapper--checked': this.internalChecked,\n      'spw-checkbox__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-checkbox\">\n        <input\n          type=\"checkbox\"\n          ref={el => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)}\n          name={this.name}\n          disabled={this.disabled}\n          style={{ display: 'none' }}\n        />\n        {hasSlot && (\n          <label htmlFor={this.name} class={`spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </label>\n        )}\n        <div\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.internalChecked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-labelledby=\"label\"\n          class={this.elementClass}\n        >\n          {this.internalChecked && <spw-icon icon={this.icon}></spw-icon>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"spw-checkbox.js","sourceRoot":"","sources":["../../../src/components/spw-checkbox/spw-checkbox.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-checkbox',\n  styleUrl: 'spw-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class SpwCheckbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el: HTMLSpwCheckboxElement;\n\n  /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable */\n  @Prop() disabled: boolean = false;\n  /** Propriété mutable qui reflète si la case à cocher est cochée ou non */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel */\n  @Prop() error: boolean = false;\n  /** Icône à afficher lorsque la case à cocher est cochée */\n  @Prop() icon: string = 'fa-check';\n  /** Nom de l'élément utilisé dans les formulaires */\n  @Prop() name: string;\n  /** Type de variant pour la checkbox */\n  @Prop() variant?: 'default' | 'toggle' = 'default';\n\n  @State() internalChecked: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) */\n  @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<boolean>;\n\n  private handleCheckbox() {\n    if (!this.disabled) {\n      this.internalChecked = !this.internalChecked;\n      this.checked = this.internalChecked;\n      this.updateFormValue();\n      this.spwChange.emit(this.internalChecked);\n    }\n  }\n\n  /** Méthode publique pour changer l'état de la case à cocher. */\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n    this.checked = newVal;\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged(newChecked: boolean) {\n    this.internalChecked = newChecked;\n    this.inputElement.checked = newChecked;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (this.internalChecked) {\n      this.internals.setFormValue('on');\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleKeydown(event) {\n    if (event.key === ' ' || event.key === 'Enter') {\n      // Space or Enter keys\n      this.handleCheckbox();\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.updateFormValue();\n  }\n\n  componentDidLoad() {\n    this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n      if (this.internalChecked) {\n        e.formData.set(this.name, 'on');\n      }\n    });\n  }\n\n  formResetCallback() {\n    this.internalChecked = false;\n    this.checked = false;\n    this.updateFormValue();\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-checkbox__wrapper': true,\n      [`spw-checkbox__wrapper--${this.variant}`]: true,\n      'spw-checkbox__wrapper--disabled': this.disabled,\n      'spw-checkbox__wrapper--checked': this.internalChecked,\n      'spw-checkbox__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-checkbox\">\n        <input\n          type=\"checkbox\"\n          ref={el => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)}\n          name={this.name}\n          disabled={this.disabled}\n          style={{ display: 'none' }}\n        />\n        {hasSlot && (\n          <label htmlFor={this.name} class={`spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </label>\n        )}\n        <div\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.internalChecked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-labelledby=\"label\"\n          class={this.elementClass}\n        >\n          {this.internalChecked && <spw-icon icon={this.icon}></spw-icon>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -19,7 +19,7 @@ export class SpwCustomSelect {
         this.size = 'medium';
         /** Permet la sélection multiple si vrai */
         this.multiple = false;
-        /** Active la fonction de recherche dans la liste des options */
+        /** Active la fonction de recherche dans la liste des items */
         this.isSearch = false;
         /** Message d'erreur à afficher sous le champ */
         this.error = '';
@@ -76,8 +76,8 @@ export class SpwCustomSelect {
         else {
             this.internalValue = this.value;
         }
-        if (this.options) {
-            this.parseOptions(this.options);
+        if (this.items) {
+            this.parseOptions(this.items);
         }
         this.updateSelectedOption();
     }
@@ -90,10 +90,21 @@ export class SpwCustomSelect {
     }
     parseOptions(newValue) {
         try {
-            this.parsedOptions = JSON.parse(newValue).map(option => ({
-                value: option.value,
-                label: option.label,
-            }));
+            if (Array.isArray(newValue)) {
+                this.parsedOptions = newValue.map(option => ({
+                    value: option.value,
+                    label: option.label,
+                }));
+            }
+            else if (typeof newValue === 'string') {
+                this.parsedOptions = JSON.parse(newValue).map(option => ({
+                    value: option.value,
+                    label: option.label,
+                }));
+            }
+            else {
+                this.parsedOptions = [];
+            }
             this.updateSelectedOption();
         }
         catch (e) {
@@ -320,17 +331,17 @@ export class SpwCustomSelect {
     render() {
         const filteredOptions = this.getFilteredOptions();
         const showPlaceholder = this.showPlaceholder();
-        return (h("div", { key: '4a969c8d7174191f704ab1d12c3fa9718bee505b', class: this.elementClass, ref: el => (this.host = el) }, this.label && h("spw-field-label", { key: '188543dbfc1cb9e3cc0d1fb4a4d525ed8e42923e', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '9202c8e7a116d922a40eff0065141b013164c5c5', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '7cce00abec098d3217b97599901949ab1704e960', class: "spw-custom-select__wrapper" }, h("div", { key: 'd9d39199ae798539b06807f50cc8481b98e20c46', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '6285eb1c5bc0e0ae1dba7b66c2c31638b90d7091', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: 'f1708fb68261cc58fcb5c3adab85ee8b6c0691cd', class: "spw-custom-select__search" }, h("input", { key: 'c7f45eaef69ad86c9b9a263e89c33f2146c08e41', class: "spw-custom-select__search-input", placeholder: "Entrez votre recherche", onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: 'c96ebed40ae86b3d948900b4425b7fb211e40bd6' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '7f7eb8208fc65204e38b8c472a7574b6d8cc8287', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+        return (h("div", { key: 'ac71da7209ac21f34d46ca0a09343cc6b9bfa45a', class: this.elementClass, ref: el => (this.host = el) }, this.label && h("spw-field-label", { key: 'df068beec072a926e8a5a037d28c7c2153b8d2d6', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '1bf71bd5905367ac3e5bd9a1bc1527405296ebbd', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '38c944172467b46b16f7d9c182cf4d5a6b7f11d1', class: "spw-custom-select__wrapper" }, h("div", { key: '0c9a95151f53cf02c12af7f5c8d0b12b2e238a2e', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '1b283156f6c5eda0702d7836b3c7efc7d985f15e', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: 'ac3eca133447a18eb352ab3c03bafc909d7db07d', class: "spw-custom-select__search" }, h("input", { key: '189b8d41d07ac897ca15d92b3d16635f195710dd', class: "spw-custom-select__search-input", placeholder: "Entrez votre recherche", onInput: event => this.handleSearchInput(event), value: this.searchText }))), showPlaceholder && h("span", { key: 'b92cdb15ae68ea9f60791c7f629ae0c0743389b5' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: 'fcccd09dcb72b234da60b27ce75bd42fba37aaa1', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
             var _a;
             return (h("span", { class: "spw-custom-select__selected-item" }, (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 :
                 _a.label, h("spw-icon", { icon: "fa-times", class: "spw-custom-select__deselect-icon", onClick: event => this.selectOption(val, event) })));
-        }))), !this.multiple && h("span", { key: 'd50ec1a50427ce24757f114cb3afbbd9d6a3a09e' }, this.getSelectedLabels()))), h("div", { key: 'cff36764911e4a392949307c114dcd5c1e95bcf7', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'fe9833ebecedfca9258d4f88491f8804dbbebb24', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: '895fcfa8cd8b42597fcab93dac157d5131747643', class: `spw-custom-select__options spw-custom-select__options--${this.dropdownDirection}` }, !!filteredOptions.length && (h("ul", { key: '7f54fc7bf8d2225badb6554923da2e9a6eda829f' }, filteredOptions.map((option, index) => (h("li", { class: {
+        }))), !this.multiple && h("span", { key: 'eab58763f1b27e81d81d4ab2dfaf782a93982bb4' }, this.getSelectedLabels()))), h("div", { key: 'cc2a564cb3b98efba9d6d3d02a8ca55a2ee80b99', class: "spw-custom-select__arrow" }, h("spw-icon", { key: '341cd325c824a2864eabaa53cae2af6100d94ec7', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' })), this.isOpen && (h("div", { key: '72b52a7e1552a1ca48b770e67fdc4710421869db', class: `spw-custom-select__options spw-custom-select__options--${this.dropdownDirection}` }, !!filteredOptions.length && (h("ul", { key: '6353c43477a08c4c5ccd9e39164c8c88fbccfa8e' }, filteredOptions.map((option, index) => (h("li", { class: {
                 'spw-custom-select__option': true,
                 'spw-custom-select__option--selected': this.multiple
                     ? this.internalValue.some(val => String(val) === String(option.value))
                     : option.value === this.internalValue,
                 'spw-custom-select__option--focused': index === this.focusedOptionIndex,
-            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-tw-mr-2", checked: this.internalValue.some(val => String(val) === String(option.value)) })), option.label))))), !filteredOptions.length && h("p", { key: 'e7adb4bc809f541a39f748822cd14da4a074e417', class: "spw-custom-select__no-results" }, "Pas de r\u00E9sultats pour cette recherche.")))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-tw-mr-2", checked: this.internalValue.some(val => String(val) === String(option.value)) })), option.label))))), !filteredOptions.length && h("p", { key: 'e55cae01d4b81d84c2fde2ff0a40958aae3e105a', class: "spw-custom-select__no-results" }, "Pas de r\u00E9sultats pour cette recherche.")))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-custom-select"; }
     static get encapsulation() { return "shadow"; }
@@ -465,12 +476,12 @@ export class SpwCustomSelect {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "options": {
+            "items": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
@@ -481,7 +492,7 @@ export class SpwCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
+                "attribute": "items",
                 "reflect": false
             },
             "size": {
@@ -536,7 +547,7 @@ export class SpwCustomSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Active la fonction de recherche dans la liste des options"
+                    "text": "Active la fonction de recherche dans la liste des items"
                 },
                 "getter": false,
                 "setter": false,
@@ -756,7 +767,7 @@ export class SpwCustomSelect {
     }
     static get watchers() {
         return [{
-                "propName": "options",
+                "propName": "items",
                 "methodName": "parseOptions"
             }, {
                 "propName": "value",