@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/collection/wrappers/set-attributes/test/set-attributes.spec.js

@@ -0,0 +1,16 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SetAttributes } from "../set-attributes";
+describe('set-attributes', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SetAttributes],
+      html: `<set-attributes><slot></slot></set-attributes>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <set-attributes>
+        <slot></slot>
+      </set-attributes>
+    `);
+  });
+});
+//# sourceMappingURL=set-attributes.spec.js.map

package/dist/collection/wrappers/set-attributes/test/set-attributes.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-attributes.spec.js","sourceRoot":"","sources":["../../../../src/wrappers/set-attributes/test/set-attributes.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SetAttributes } from '../set-attributes';\n\ndescribe('set-attributes', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SetAttributes],\n      html: `<set-attributes><slot></slot></set-attributes>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <set-attributes>\n        <slot></slot>\n      </set-attributes>\n    `);\n  });\n});\n"]}

package/dist/components/event-listeners.js

@@ -1,4 +1,3 @@
-const equals = (a) => (b) => Object.keys(a).every((key) => a[key] === b[key]);
 class EventListeners {
   constructor() {
     this.eventListeners = [];
@@ -7,8 +6,7 @@ class EventListeners {
       el.addEventListener(name, listener);
     };
     this.remove = (el, name, listener) => {
-      const sameItem = equals({ el, name, listener });
-      this.eventListeners = this.getFilteredEventListeners(sameItem);
+      this.eventListeners = this.getFilteredEventListeners((eventListener) => eventListener.listener == listener && eventListener.el === el && eventListener.name === name);
     };
     this.removeByIdentifier = (identifier) => {
       const sameItem = (el) => el.identifier === identifier;
@@ -19,9 +17,11 @@ class EventListeners {
       this.eventListeners = this.getFilteredEventListeners(sameItem);
     };
     this.removeAll = () => {
-      while (this.eventListeners.length) {
-        const { el, name, listener } = this.eventListeners.pop();
-        el.removeEventListener(name, listener);
+      while (this.eventListeners.length > 0) {
+        const eventListener = this.eventListeners.pop();
+        if (eventListener != null) {
+          eventListener.el.removeEventListener(eventListener.name, eventListener.listener);
+        }
       }
     };
   }
@@ -36,6 +36,22 @@ class EventListeners {
       }
     });
   }
+  forward(from, to, host) {
+    switch (to) {
+      case 'input':
+        this.add(host, from, () => host.dispatchEvent(new InputEvent(to, { bubbles: true, cancelable: true })));
+        break;
+      case 'change':
+        this.add(host, from, () => host.dispatchEvent(new InputEvent(to, { bubbles: true, cancelable: true })));
+        break;
+      case 'blur':
+        this.add(host, from, () => host.dispatchEvent(new FocusEvent(to, { bubbles: true, cancelable: true })));
+        break;
+      case 'focus':
+        this.add(host, from, () => host.dispatchEvent(new FocusEvent(to, { bubbles: true, cancelable: true })));
+        break;
+    }
+  }
 }
 
 export { EventListeners as E };

package/dist/components/event-listeners.js.map

@@ -1 +1 @@
-{"file":"event-listeners.js","mappings":"AAOA,MAAM,MAAM,GACV,CAAmB,CAAI,KACvB,CAAmB,CAAI,KACrB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;MAExC,cAAc;EAA3B;IACE,mBAAc,GAAoB,EAAE,CAAC;IAErC,QAAG,GAAG,CACJ,EAAK,EACL,IAAY,EACZ,QAA4C,EAC5C,UAAU,GAAG,IAAI;MAEjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;MAC7D,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACrC,CAAC;IAEF,WAAM,GAAG,CACP,EAAK,EACL,IAAY,EACZ,QAA4C;MAE5C,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;MAChD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;KAChE,CAAC;IAEF,uBAAkB,GAAG,CAAC,UAAkB;MACtC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,UAAU,KAAK,UAAU,CAAC;MACtD,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC;MAEvE,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO;OACR;MAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;KAChE,CAAC;IAaF,cAAS,GAAG;MACV,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QACjC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC;QACzD,EAAE,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;OACxC;KACF,CAAC;GACH;EAjBS,yBAAyB,CAAC,QAAyB;IACzD,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,IAAI;MACrC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtD,OAAO,KAAK,CAAC;OACd;WAAM;QACL,OAAO,IAAI,CAAC;OACb;KACF,CAAC,CAAC;GACJ;;;;;","names":[],"sources":["./src/utils/event-listeners.ts"],"sourcesContent":["interface EventListener {\n  el: DocumentAndElementEventHandlers;\n  name: string;\n  listener: EventListenerOrEventListenerObject;\n  identifier?: string | null;\n}\n\nconst equals =\n  <A extends Object>(a: A) =>\n  <B extends Object>(b: B) =>\n    Object.keys(a).every((key) => a[key] === b[key]);\n\nexport class EventListeners {\n  eventListeners: EventListener[] = [];\n\n  add = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject,\n    identifier = null\n  ) => {\n    this.eventListeners.push({ el, name, listener, identifier });\n    el.addEventListener(name, listener);\n  };\n\n  remove = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject\n  ) => {\n    const sameItem = equals({ el, name, listener });\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  removeByIdentifier = (identifier: string) => {\n    const sameItem = (el) => el.identifier === identifier;\n    const foundListener = this.eventListeners.find(sameItem) !== undefined;\n\n    if (!foundListener) {\n      return;\n    }\n\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  private getFilteredEventListeners(sameItem: (el) => boolean) {\n    return this.eventListeners.filter((item) => {\n      if (sameItem(item)) {\n        item.el.removeEventListener(item.name, item.listener);\n        return false;\n      } else {\n        return true;\n      }\n    });\n  }\n\n  removeAll = () => {\n    while (this.eventListeners.length) {\n      const { el, name, listener } = this.eventListeners.pop();\n      el.removeEventListener(name, listener);\n    }\n  };\n}\n"],"version":3}
+{"file":"event-listeners.js","mappings":"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","names":[],"sources":["src/utils/event-listeners.ts"],"sourcesContent":["interface EventListener {\n  el: GlobalEventHandlers;\n  name: string;\n  listener: EventListenerOrEventListenerObject;\n  identifier?: string | null;\n}\n\nexport class EventListeners {\n  eventListeners: EventListener[] = [];\n\n  add = <T extends GlobalEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject,\n    identifier: string | null | undefined = null\n  ) => {\n    this.eventListeners.push({ el, name, listener, identifier });\n    el.addEventListener(name, listener);\n  };\n\n  remove = <T extends GlobalEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject) => {\n    this.eventListeners = this.getFilteredEventListeners(\n      (eventListener: EventListener) =>\n        eventListener.listener == listener && eventListener.el === el && eventListener.name === name\n    );\n  };\n\n  removeByIdentifier = (identifier: string) => {\n    const sameItem = (el: EventListener) => el.identifier === identifier;\n    const foundListener = this.eventListeners.find(sameItem) !== undefined;\n    if (!foundListener) {\n      return;\n    }\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  private getFilteredEventListeners(sameItem: (el: EventListener) => boolean) {\n    return this.eventListeners.filter((item) => {\n      if (sameItem(item)) {\n        item.el.removeEventListener(item.name, item.listener);\n        return false;\n      } else {\n        return true;\n      }\n    });\n  }\n\n  removeAll = () => {\n    while (this.eventListeners.length > 0) {\n      const eventListener: EventListener | undefined = this.eventListeners.pop();\n      if (eventListener != null) {\n        eventListener.el.removeEventListener(eventListener.name, eventListener.listener);\n      }\n    }\n  };\n\n  forward(from: string, to: 'input' | 'change' | 'blur' | 'focus', host: HTMLElement) {\n    switch (to) {\n      case 'input':\n        this.add(host, from, () => host.dispatchEvent(new InputEvent(to, { bubbles: true, cancelable: true })));\n        break;\n      case 'change':\n        this.add(host, from, () => host.dispatchEvent(new InputEvent(to, { bubbles: true, cancelable: true })));\n        break;\n      case 'blur':\n        this.add(host, from, () => host.dispatchEvent(new FocusEvent(to, { bubbles: true, cancelable: true })));\n        break;\n      case 'focus':\n        this.add(host, from, () => host.dispatchEvent(new FocusEvent(to, { bubbles: true, cancelable: true })));\n        break;\n    }\n  }\n}\n"],"version":3}

package/dist/components/execution-control.js

@@ -15,9 +15,11 @@ const DEFAULT_DEBOUNCE_FAST = 300;
  */
 const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
   let timer;
-  return (...args) => {
+  return (args) => {
     clearTimeout(timer);
-    timer = setTimeout(() => callback.apply(undefined, args), timeout);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    timer = setTimeout(() => callback(args), timeout);
   };
 };
 /**
@@ -27,6 +29,7 @@ const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
  * @param timeout
  */
 const debounceEvent = (event, timeout) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const original = event._original || event;
   const emit = debounce(original.emit.bind(original), timeout);
   return {

package/dist/components/execution-control.js.map

@@ -1 +1 @@
-{"file":"execution-control.js","mappings":"MAEa,8BAA8B,GAAG,GAAG;MAEpC,qBAAqB,GAAG,IAAI;AAGzC;;;;;;;;;;;;;MAaa,QAAQ,GAAG,CAAC,QAAkB,EAAE,OAAO,GAAG,qBAAqB;EAC1E,IAAI,KAAqB,CAAC;EAC1B,OAAO,CAAI,GAAG,IAAS;IACrB,YAAY,CAAC,KAAK,CAAC,CAAC;IACpB,KAAK,GAAG,UAAU,CAAC,MAAM,QAAQ,CAAC,KAAK,CAACA,SAAI,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;GAC/D,CAAC;AACJ,EAAE;AAEF;;;;;;MAMa,aAAa,GAAG,CAAC,KAAmB,EAAE,OAAe;EAChE,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;EACnD,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAyB,CAAC;EACrF,OAAO;IACL,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,IAAI;GACK,CAAC;AACpB;;;;","names":["this"],"sources":["./src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_VERY_FAST = 100;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\nexport const DEFAULT_DEBOUNCE_SLOW = 600;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = (callback: Function, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: NodeJS.Timeout;\n  return <T>(...args: T[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (any) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"version":3}
+{"file":"execution-control.js","mappings":"MAEa,8BAA8B,GAAG,GAAG;MACpC,qBAAqB,GAAG,IAAI;AAEzC;;;;;;;;;;;;;MAaa,QAAQ,GAAG,CAAI,QAAwB,EAAE,OAAO,GAAG,qBAAqB;EACnF,IAAI,KAAa,CAAC;EAClB,OAAO,CAAC,IAAO;IACb,YAAY,CAAC,KAAK,CAAC,CAAC;;;IAGpB,KAAK,GAAG,UAAU,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;GACnD,CAAC;AACJ,EAAE;AAEF;;;;;;MAMa,aAAa,GAAG,CAAC,KAAmB,EAAE,OAAe;;EAEhE,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;EACnD,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAgC,CAAC;EAC5F,OAAO;IACL,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,IAAI;GACK,CAAC;AACpB;;;;","names":[],"sources":["src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = <T>(callback: (x: T) => void, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: number;\n  return (args: T) => {\n    clearTimeout(timer);\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    timer = setTimeout(() => callback(args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (_: unknown) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"version":3}

package/dist/components/focus-visible.js

@@ -6,7 +6,7 @@
 //
 const listeners = new WeakMap();
 function observe(el) {
-  if (!el)
+  if (el == null)
     return;
   const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
   const is = (event) => {
@@ -22,7 +22,7 @@ function observe(el) {
   el.addEventListener('mousedown', isNot);
 }
 function unobserve(el) {
-  if (!el)
+  if (el == null)
     return;
   const listener = listeners.get(el);
   if (!listener) {

package/dist/components/focus-visible.js.map

@@ -1 +1 @@
-{"file":"focus-visible.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;SAEhB,OAAO,CAAC,EAAe;EACrC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC7G,MAAM,EAAE,GAAG,CAAC,KAAoB;IAC9B,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC5B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;KACnC;GACF,CAAC;EACF,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACzD,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;EAEjC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACnC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACjC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EACxC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;SAEe,SAAS,CAAC,EAAe;EACvC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAEnC,IAAI,CAAC,QAAQ,EAAE;IACb,OAAO;GACR;EAED,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;EAE/B,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACrC,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACtC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACpC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EAC3C,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7C,CAAC;MAEY,YAAY,GAAG;EAC1B,OAAO;EACP,SAAS;;;;;","names":[],"sources":["./src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (!el) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (!el) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"version":3}
+{"file":"focus-visible.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;SAEhB,OAAO,CAAC,EAAe;EACrC,IAAI,EAAE,IAAI,IAAI;IAAE,OAAO;EAEvB,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC7G,MAAM,EAAE,GAAG,CAAC,KAAoB;IAC9B,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC5B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;KACnC;GACF,CAAC;EACF,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACzD,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;EAEjC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACnC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACjC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EACxC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;SAEe,SAAS,CAAC,EAAe;EACvC,IAAI,EAAE,IAAI,IAAI;IAAE,OAAO;EAEvB,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAEnC,IAAI,CAAC,QAAQ,EAAE;IACb,OAAO;GACR;EAED,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;EAE/B,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACrC,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACtC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACpC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EAC3C,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7C,CAAC;MAEY,YAAY,GAAG;EAC1B,OAAO;EACP,SAAS;;;;;","names":[],"sources":["src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (el == null) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (el == null) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"version":3}

package/dist/components/form-control.js

@@ -1,10 +1,9 @@
 import { h } from '@stencil/core/internal/client';
 
 const FormControl = (props, children) => {
-  const hasLabel = props.label ? true : props.hasLabelSlot;
-  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;
-  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */
-  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;
+  var _a, _b, _c, _d, _e, _f;
+  const hasLabel = props.label != null && props.label.trim() !== '' ? true : (_a = props.hasLabelSlot) !== null && _a !== void 0 ? _a : false;
+  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : (_b = props.hasHelpTextSlot) !== null && _b !== void 0 ? _b : false;
   return (h("div", { part: "form-control", class: {
       'form-control': true,
       'form-control--small': props.size === 'small',
@@ -12,17 +11,17 @@ const FormControl = (props, children) => {
       'form-control--large': props.size === 'large',
       'form-control--has-label': hasLabel,
       'form-control--has-help-text': hasHelpText,
-      'form-control--has-error-text': props.displayError,
-      'form-control--disabled': props.disabled,
-      'form-control--invalid': props.displayError && !props.disabled,
+      'form-control--has-error-text': (_c = props.displayError) !== null && _c !== void 0 ? _c : false,
+      'form-control--disabled': (_d = props.disabled) !== null && _d !== void 0 ? _d : false,
+      'form-control--invalid': ((_e = props.displayError) !== null && _e !== void 0 ? _e : false) && !props.disabled,
     } },
     h("label", { part: "label", id: props.labelId, class: {
         'form-control__label': true,
-        'form-control__label__required': props.required,
+        'form-control__label__required': (_f = props.required) !== null && _f !== void 0 ? _f : false,
       }, htmlFor: props.inputId, "aria-hidden": hasLabel ? 'false' : 'true', onClick: props.onLabelClick },
       h("slot", { name: "label" }, props.label)),
     h("div", { class: "form-control__input" }, children),
-    h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": props.displayError ? 'false' : 'true' }, useErrorTextAttribute ? props.errorText : h("slot", { name: "error-text" })),
+    h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": props.displayError ? 'false' : 'true' }, props.errorText),
     h("div", { part: "help-text", id: props.helpTextId, class: "form-control__help-text", "aria-hidden": hasHelpText ? 'false' : 'true' },
       h("slot", { name: "help-text" }, props.helpText))));
 };

package/dist/components/form-control.js.map

@@ -1 +1 @@
-{"file":"form-control.js","mappings":";;MAiDM,WAAW,GAAG,CAAC,KAAuB,EAAE,QAAQ;EACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;EACzD,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,eAAe,CAAC;;EAElE,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC;EAErG,QACE,WACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;MACL,cAAc,EAAE,IAAI;MACpB,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,sBAAsB,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;MAC/C,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,yBAAyB,EAAE,QAAQ;MACnC,6BAA6B,EAAE,WAAW;MAC1C,8BAA8B,EAAE,KAAK,CAAC,YAAY;MAClD,wBAAwB,EAAE,KAAK,CAAC,QAAQ;MACxC,uBAAuB,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ;KAC/D;IAED,aACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,OAAO,EACjB,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,+BAA+B,EAAE,KAAK,CAAC,QAAQ;OAChD,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,iBACT,QAAQ,GAAG,OAAO,GAAG,MAAM,EACxC,OAAO,EAAE,KAAK,CAAC,YAAY;MAE3B,YAAM,IAAI,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACjC;IAER,WAAK,KAAK,EAAC,qBAAqB,IAAE,QAAQ,CAAO;IAEjD,WACE,IAAI,EAAC,YAAY,EACjB,EAAE,EAAE,KAAK,CAAC,WAAW,EACrB,KAAK,EAAC,0BAA0B,iBACnB,KAAK,CAAC,YAAY,GAAG,OAAO,GAAG,MAAM,IAEjD,qBAAqB,GAAG,KAAK,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAG,CACjE;IAEN,WACE,IAAI,EAAC,WAAW,EAChB,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,KAAK,EAAC,yBAAyB,iBAClB,WAAW,GAAG,OAAO,GAAG,MAAM;MAE3C,YAAM,IAAI,EAAC,WAAW,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC1C,CACF,EACN;AACJ;;;;","names":[],"sources":["./src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether or not a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether or not a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string;\n\n  /** Whether or not a error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children) => {\n  const hasLabel = props.label ? true : props.hasLabelSlot;\n  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;\n  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */\n  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError,\n        'form-control--disabled': props.disabled,\n        'form-control--invalid': props.displayError && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {useErrorTextAttribute ? props.errorText : <slot name=\"error-text\" />}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"version":3}
+{"file":"form-control.js","mappings":";;MA8CM,WAAW,GAAG,CAAC,KAAuB,EAAE,QAAiB;;EAC7D,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,CAAC;EACvG,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,MAAA,KAAK,CAAC,eAAe,mCAAI,KAAK,CAAC;EAEnH,QACE,WACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;MACL,cAAc,EAAE,IAAI;MACpB,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,sBAAsB,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;MAC/C,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,yBAAyB,EAAE,QAAQ;MACnC,6BAA6B,EAAE,WAAW;MAC1C,8BAA8B,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK;MAC3D,wBAAwB,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK;MACjD,uBAAuB,EAAE,CAAC,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,KAAK,CAAC,KAAK,CAAC,QAAQ;KAC1E;IAED,aACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,OAAO,EACjB,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,+BAA+B,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK;OACzD,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,iBACT,QAAQ,GAAG,OAAO,GAAG,MAAM,EACxC,OAAO,EAAE,KAAK,CAAC,YAAY;MAE3B,YAAM,IAAI,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACjC;IAER,WAAK,KAAK,EAAC,qBAAqB,IAAE,QAAQ,CAAO;IAEjD,WACE,IAAI,EAAC,YAAY,EACjB,EAAE,EAAE,KAAK,CAAC,WAAW,EACrB,KAAK,EAAC,0BAA0B,iBACnB,KAAK,CAAC,YAAY,GAAG,OAAO,GAAG,MAAM,IAEjD,KAAK,CAAC,SAAS,CACZ;IAEN,WACE,IAAI,EAAC,WAAW,EAChB,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,KAAK,EAAC,yBAAyB,iBAClB,WAAW,GAAG,OAAO,GAAG,MAAM;MAE3C,YAAM,IAAI,EAAC,WAAW,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC1C,CACF,EACN;AACJ;;;;","names":[],"sources":["src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text */\n  errorText?: string;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n  const hasLabel = props.label != null && props.label.trim() !== '' ? true : props.hasLabelSlot ?? false;\n  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : props.hasHelpTextSlot ?? false;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError ?? false,\n        'form-control--disabled': props.disabled ?? false,\n        'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required ?? false,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {props.errorText}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"version":3}

package/dist/components/form.js

@@ -0,0 +1,18 @@
+function submitForm(element) {
+  const form = element.closest('form');
+  if (form != null) {
+    // Calling form.submit() would bypass the submit event and constraint validation.
+    // To prevent this, we inject a native submit button into the form, "click" it,
+    // then remove it to simulate a standard form submission.
+    const fakeButton = document.createElement('button');
+    fakeButton.type = 'submit';
+    fakeButton.style.display = 'none';
+    form.appendChild(fakeButton);
+    fakeButton.click();
+    fakeButton.remove();
+  }
+}
+
+export { submitForm as s };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -0,0 +1 @@
+{"file":"form.js","mappings":"SAAgB,UAAU,CAAC,OAAoB;EAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EACrC,IAAI,IAAI,IAAI,IAAI,EAAE;;;;IAIhB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACpD,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;IAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;IACnB,UAAU,CAAC,MAAM,EAAE,CAAC;GACrB;AACH;;;;","names":[],"sources":["src/utils/form.ts"],"sourcesContent":["export function submitForm(element: HTMLElement) {\n  const form = element.closest('form');\n  if (form != null) {\n    // Calling form.submit() would bypass the submit event and constraint validation.\n    // To prevent this, we inject a native submit button into the form, \"click\" it,\n    // then remove it to simulate a standard form submission.\n    const fakeButton = document.createElement('button');\n    fakeButton.type = 'submit';\n    fakeButton.style.display = 'none';\n    form.appendChild(fakeButton);\n    fakeButton.click();\n    fakeButton.remove();\n  }\n}\n"],"version":3}

package/dist/components/index.js

@@ -15,7 +15,6 @@ import { SixFileList } from './six-file-list.js';
 import { SixFileListItem } from './six-file-list-item.js';
 import { SixFileUpload } from './six-file-upload.js';
 import { SixFooter } from './six-footer.js';
-import { SixForm } from './six-form.js';
 import { SixGroupLabel } from './six-group-label.js';
 import { SixHeader } from './six-header.js';
 import { SixIcon } from './six-icon.js';
@@ -53,6 +52,97 @@ import { SixTimepicker } from './six-timepicker.js';
 import { SixTooltip } from './six-tooltip.js';
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 
+const dateFormat = new Intl.DateTimeFormat('de-CH');
+/**
+ * Returns an error message for the given language and error.
+ */
+function getErrorMessage(language, error) {
+  try {
+    const message = translation[language][error.key];
+    switch (error.key) {
+      case 'required':
+      case 'requiredtrue':
+      case 'email':
+        return message;
+      case 'minlength':
+      case 'maxlength':
+        return message.replace('{requiredLength}', String(error.requiredLength));
+      case 'pattern':
+        return message.replace('{pattern}', String(error.requiredPattern));
+      case 'min':
+        return message.replace('{min}', String(error.min));
+      case 'max':
+        return message.replace('{max}', String(error.max));
+      case 'mindate':
+        return message.replace('{mindate}', dateFormat.format(error.mindate));
+      case 'maxdate':
+        return message.replace('{maxdate}', dateFormat.format(error.maxdate));
+      case 'invaliddate':
+        return message;
+      case 'custom':
+        return error.text;
+    }
+  }
+  catch (e) {
+    console.warn(`no error message in '${language}' for error:`, error);
+    return undefined;
+  }
+}
+const translation = {
+  en: {
+    required: 'Please fill out this field.',
+    minlength: 'Please enter at least {requiredLength} characters.',
+    maxlength: 'Please enter no more than {requiredLength} characters.',
+    pattern: 'Please enter a value that matches the pattern: {pattern}.',
+    email: 'Please enter a valid email address.',
+    min: 'Please enter a value greater than or equal to {min}.',
+    max: 'Please enter a value less than or equal to {max}.',
+    requiredtrue: 'Please check this field.',
+    mindate: 'Please enter a date on or after {mindate}.',
+    maxdate: 'Please enter a date on or before {maxdate}.',
+    invaliddate: 'Please enter a valid date.',
+  },
+  fr: {
+    required: "Veuillez remplir ce champ s'il vous plaît.",
+    minlength: 'Veuillez entrer au moins {requiredLength} caractères.',
+    maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',
+    pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',
+    email: 'Veuillez entrer une adresse email valide.',
+    min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',
+    max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',
+    requiredtrue: "Veuillez cocher cette case s'il vous plaît.",
+    mindate: 'Veuillez entrer une date le {mindate} ou après.',
+    maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',
+    invaliddate: 'Veuillez entrer une date valide.',
+  },
+  de: {
+    required: 'Bitte füllen Sie dieses Feld aus.',
+    minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',
+    maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',
+    pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',
+    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',
+    max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',
+    requiredtrue: 'Bitte aktivieren Sie dieses Feld.',
+    mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',
+    maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',
+    invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',
+  },
+  it: {
+    required: 'Si prega di compilare questo campo.',
+    minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',
+    maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',
+    pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',
+    email: 'Si prega di inserire un indirizzo email valido.',
+    min: 'Si prega di inserire un valore maggiore o uguale a {min}.',
+    max: 'Si prega di inserire un valore minore o uguale a {max}.',
+    requiredtrue: 'Si prega di spuntare questo campo.',
+    mindate: 'Si prega di inserire una data il {mindate} o successiva.',
+    maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',
+    invaliddate: 'Inserisci una data valida.',
+  },
+};
+
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
@@ -73,7 +163,6 @@ const defineCustomElements = (opts) => {
       SixFileListItem,
       SixFileUpload,
       SixFooter,
-      SixForm,
       SixGroupLabel,
       SixHeader,
       SixIcon,
@@ -117,6 +206,6 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { defineCustomElements };
+export { defineCustomElements, getErrorMessage };
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAgBpD;;;SAGgB,eAAe,CAAC,QAAkB,EAAE,KAAsB;EACxE,IAAI;IACF,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjD,QAAQ,KAAK,CAAC,GAAG;MACf,KAAK,UAAU,CAAC;MAChB,KAAK,cAAc,CAAC;MACpB,KAAK,OAAO;QACV,OAAO,OAAO,CAAC;MACjB,KAAK,WAAW,CAAC;MACjB,KAAK,WAAW;QACd,OAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;MAC3E,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;MACrE,KAAK,KAAK;QACR,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;MACrD,KAAK,KAAK;QACR,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;MACrD,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;MACxE,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;MACxE,KAAK,aAAa;QAChB,OAAO,OAAO,CAAC;MACjB,KAAK,QAAQ;QACX,OAAO,KAAK,CAAC,IAAI,CAAC;KACrB;GACF;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,IAAI,CAAC,wBAAwB,QAAQ,cAAc,EAAE,KAAK,CAAC,CAAC;IACpE,OAAO,SAAS,CAAC;GAClB;AACH,CAAC;AAED,MAAM,WAAW,GAA6C;EAC5D,EAAE,EAAE;IACF,QAAQ,EAAE,6BAA6B;IACvC,SAAS,EAAE,oDAAoD;IAC/D,SAAS,EAAE,wDAAwD;IACnE,OAAO,EAAE,2DAA2D;IACpE,KAAK,EAAE,qCAAqC;IAC5C,GAAG,EAAE,sDAAsD;IAC3D,GAAG,EAAE,mDAAmD;IACxD,YAAY,EAAE,0BAA0B;IACxC,OAAO,EAAE,4CAA4C;IACrD,OAAO,EAAE,6CAA6C;IACtD,WAAW,EAAE,4BAA4B;GAC1C;EACD,EAAE,EAAE;IACF,QAAQ,EAAE,4CAA4C;IACtD,SAAS,EAAE,uDAAuD;IAClE,SAAS,EAAE,yDAAyD;IACpE,OAAO,EAAE,kEAAkE;IAC3E,KAAK,EAAE,2CAA2C;IAClD,GAAG,EAAE,yDAAyD;IAC9D,GAAG,EAAE,yDAAyD;IAC9D,YAAY,EAAE,6CAA6C;IAC3D,OAAO,EAAE,iDAAiD;IAC1D,OAAO,EAAE,iDAAiD;IAC1D,WAAW,EAAE,kCAAkC;GAChD;EACD,EAAE,EAAE;IACF,QAAQ,EAAE,mCAAmC;IAC7C,SAAS,EAAE,0DAA0D;IACrE,SAAS,EAAE,yDAAyD;IACpE,OAAO,EAAE,uEAAuE;IAChF,KAAK,EAAE,kDAAkD;IACzD,GAAG,EAAE,0DAA0D;IAC/D,GAAG,EAAE,2DAA2D;IAChE,YAAY,EAAE,mCAAmC;IACjD,OAAO,EAAE,2DAA2D;IACpE,OAAO,EAAE,0DAA0D;IACnE,WAAW,EAAE,yCAAyC;GACvD;EACD,EAAE,EAAE;IACF,QAAQ,EAAE,qCAAqC;IAC/C,SAAS,EAAE,yDAAyD;IACpE,SAAS,EAAE,6DAA6D;IACxE,OAAO,EAAE,uEAAuE;IAChF,KAAK,EAAE,iDAAiD;IACxD,GAAG,EAAE,2DAA2D;IAChE,GAAG,EAAE,yDAAyD;IAC9D,YAAY,EAAE,oCAAoC;IAClD,OAAO,EAAE,0DAA0D;IACnE,OAAO,EAAE,0DAA0D;IACnE,WAAW,EAAE,4BAA4B;GAC1C;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/error-messages.ts"],"sourcesContent":["export type Language = 'de' | 'fr' | 'it' | 'en';\n\nconst dateFormat = new Intl.DateTimeFormat('de-CH');\n\nexport type ValidationError =\n  | { key: 'required' }\n  | { key: 'requiredtrue' }\n  | { key: 'email'; requiredPattern: string }\n  | { key: 'minlength'; requiredLength: number }\n  | { key: 'maxlength'; requiredLength: number }\n  | { key: 'pattern'; requiredPattern: string }\n  | { key: 'min'; min: number }\n  | { key: 'max'; max: number }\n  | { key: 'mindate'; mindate: Date; actual: Date }\n  | { key: 'maxdate'; maxdate: Date; actual: Date }\n  | { key: 'invaliddate'; actual: Date }\n  | { key: 'custom'; text: string };\n\n/**\n * Returns an error message for the given language and error.\n */\nexport function getErrorMessage(language: Language, error: ValidationError): string | undefined {\n  try {\n    const message = translation[language][error.key];\n    switch (error.key) {\n      case 'required':\n      case 'requiredtrue':\n      case 'email':\n        return message;\n      case 'minlength':\n      case 'maxlength':\n        return message.replace('{requiredLength}', String(error.requiredLength));\n      case 'pattern':\n        return message.replace('{pattern}', String(error.requiredPattern));\n      case 'min':\n        return message.replace('{min}', String(error.min));\n      case 'max':\n        return message.replace('{max}', String(error.max));\n      case 'mindate':\n        return message.replace('{mindate}', dateFormat.format(error.mindate));\n      case 'maxdate':\n        return message.replace('{maxdate}', dateFormat.format(error.maxdate));\n      case 'invaliddate':\n        return message;\n      case 'custom':\n        return error.text;\n    }\n  } catch (e) {\n    console.warn(`no error message in '${language}' for error:`, error);\n    return undefined;\n  }\n}\n\nconst translation: Record<Language, Record<string, string>> = {\n  en: {\n    required: 'Please fill out this field.',\n    minlength: 'Please enter at least {requiredLength} characters.',\n    maxlength: 'Please enter no more than {requiredLength} characters.',\n    pattern: 'Please enter a value that matches the pattern: {pattern}.',\n    email: 'Please enter a valid email address.',\n    min: 'Please enter a value greater than or equal to {min}.',\n    max: 'Please enter a value less than or equal to {max}.',\n    requiredtrue: 'Please check this field.',\n    mindate: 'Please enter a date on or after {mindate}.',\n    maxdate: 'Please enter a date on or before {maxdate}.',\n    invaliddate: 'Please enter a valid date.',\n  },\n  fr: {\n    required: \"Veuillez remplir ce champ s'il vous plaît.\",\n    minlength: 'Veuillez entrer au moins {requiredLength} caractères.',\n    maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',\n    pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',\n    email: 'Veuillez entrer une adresse email valide.',\n    min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',\n    max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',\n    requiredtrue: \"Veuillez cocher cette case s'il vous plaît.\",\n    mindate: 'Veuillez entrer une date le {mindate} ou après.',\n    maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',\n    invaliddate: 'Veuillez entrer une date valide.',\n  },\n  de: {\n    required: 'Bitte füllen Sie dieses Feld aus.',\n    minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',\n    maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',\n    pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',\n    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n    min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',\n    max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',\n    requiredtrue: 'Bitte aktivieren Sie dieses Feld.',\n    mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',\n    maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',\n    invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',\n  },\n  it: {\n    required: 'Si prega di compilare questo campo.',\n    minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',\n    maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',\n    pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',\n    email: 'Si prega di inserire un indirizzo email valido.',\n    min: 'Si prega di inserire un valore maggiore o uguale a {min}.',\n    max: 'Si prega di inserire un valore minore o uguale a {max}.',\n    requiredtrue: 'Si prega di spuntare questo campo.',\n    mindate: 'Si prega di inserire una data il {mindate} o successiva.',\n    maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',\n    invaliddate: 'Inserisci una data valida.',\n  },\n};\n"],"version":3}

package/dist/components/modal.js

@@ -34,11 +34,12 @@ class Modal {
     return activeModals[activeModals.length - 1] === this.element;
   }
   handleFocusIn(event) {
+    var _a, _b;
     const target = event.target;
     const tagName = this.element.tagName.toLowerCase();
     // If focus is lost while the modal is active, run the onFocusOut callback
-    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {
-      this.options.onFocusOut(event);
+    if (this.isActive() && target.closest(tagName) !== this.element && typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.onFocusOut) === 'function') {
+      (_b = this.options) === null || _b === void 0 ? void 0 : _b.onFocusOut(event);
     }
   }
 }

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"file":"modal.js","mappings":"AAAA;AACA;AACA;MACa,wBAAwB,GAAG;EACtC,IAAI,SAAS,GAAG,KAAK,CAAC;EAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,KAAK;IACX,OAAO,CAAC,KAAK,CAAC;MACZ,IAAI,aAAa;QACf,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,KAAK,CAAC;OACd;KACF,CAAC,CAAC;EAEL,OAAO,SAAS,CAAC;AACnB;;ACZA,IAAI,YAAY,GAAkB,EAAE,CAAC;MAEhB,KAAK;EAIxB,YAAY,OAAoB,EAAE,OAAsB;IACtD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpD;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC1D;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC7D;EAED,QAAQ;;IAEN,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;GAC/D;EAED,aAAa,CAAC,KAAY;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;IAGnD,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,KAAK,UAAU,EAAE;MAChH,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChC;GACF;;;;;","names":[],"sources":["./src/utils/support.ts","./src/utils/modal.ts"],"sourcesContent":["//\n// Determines if the browser supports focus({ preventScroll })\n//\nexport const isPreventScrollSupported = () => {\n  let supported = false;\n\n  const element = document.createElement('div');\n  element.focus &&\n    element.focus({\n      get preventScroll() {\n        supported = true;\n        return false;\n      },\n    });\n\n  return supported;\n};\n","interface ModalOptions {\n  onFocusOut?: (event: Event) => any;\n}\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  options: ModalOptions;\n\n  constructor(element: HTMLElement, options?: ModalOptions) {\n    this.element = element;\n    this.options = options;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const target = event.target as HTMLElement;\n    const tagName = this.element.tagName.toLowerCase();\n\n    // If focus is lost while the modal is active, run the onFocusOut callback\n    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {\n      this.options.onFocusOut(event);\n    }\n  }\n}\n"],"version":3}
+{"file":"modal.js","mappings":"AAAA;AACA;AACA;MACa,wBAAwB,GAAG;EACtC,IAAI,SAAS,GAAG,KAAK,CAAC;EAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,KAAK;IACX,OAAO,CAAC,KAAK,CAAC;MACZ,IAAI,aAAa;QACf,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,KAAK,CAAC;OACd;KACF,CAAC,CAAC;EAEL,OAAO,SAAS,CAAC;AACnB;;ACZA,IAAI,YAAY,GAAkB,EAAE,CAAC;MAEhB,KAAK;EAIxB,YAAY,OAAoB,EAAE,OAAsB;IACtD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpD;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC1D;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC7D;EAED,QAAQ;;IAEN,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;GAC/D;EAED,aAAa,CAAC,KAAY;;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;IAGnD,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,QAAO,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA,KAAK,UAAU,EAAE;MACjH,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KACjC;GACF;;;;;","names":[],"sources":["src/utils/support.ts","src/utils/modal.ts"],"sourcesContent":["//\n// Determines if the browser supports focus({ preventScroll })\n//\nexport const isPreventScrollSupported = () => {\n  let supported = false;\n\n  const element = document.createElement('div');\n  element.focus &&\n    element.focus({\n      get preventScroll() {\n        supported = true;\n        return false;\n      },\n    });\n\n  return supported;\n};\n","interface ModalOptions {\n  onFocusOut?: (event: Event) => void;\n}\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  options?: ModalOptions;\n\n  constructor(element: HTMLElement, options?: ModalOptions) {\n    this.element = element;\n    this.options = options;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const target = event.target as HTMLElement;\n    const tagName = this.element.tagName.toLowerCase();\n\n    // If focus is lost while the modal is active, run the onFocusOut callback\n    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options?.onFocusOut === 'function') {\n      this.options?.onFocusOut(event);\n    }\n  }\n}\n"],"version":3}

package/dist/components/popover.js

@@ -449,7 +449,6 @@ function effect$1(_ref2) {
   }
 
   if (!contains(state.elements.popper, arrowElement)) {
-
     return;
   }
 
@@ -591,7 +590,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -1659,8 +1657,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -1680,7 +1677,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -1705,7 +1701,6 @@ function popperGenerator(generatorOptions) {
         });
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -1743,7 +1738,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-
       return instance;
     }
 
@@ -1758,11 +1752,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -1808,27 +1802,32 @@ class Popover {
       strategy: 'absolute',
       transitionElement: this.popover,
       visibleClass: 'popover-visible',
-      onAfterShow: () => { },
-      onAfterHide: () => { },
-      onTransitionEnd: () => { },
+      onAfterShow: () => Promise,
+      onAfterHide: () => Promise,
+      onTransitionEnd: () => Promise,
     }, options);
     this.isVisible = false;
     this.popover.hidden = true;
-    this.popover.classList.remove(this.options.visibleClass);
+    if (this.options.visibleClass != null) {
+      this.popover.classList.remove(this.options.visibleClass);
+    }
     this.popover.addEventListener('transitionend', this.handleTransitionEnd);
   }
   handleTransitionEnd(event) {
+    var _a, _b;
     const target = event.target;
     // Make sure the transition event originates from from the correct element, and not one that has bubbled up
     if (target === this.options.transitionElement) {
       // This is called before the element is hidden so users can do things like reset scroll. It will fire once for
       // every transition property. Use `event.propertyName` to determine which property has finished transitioning.
-      this.options.onTransitionEnd.call(this, event);
+      (_a = this.options.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(this, event);
       // Make sure we only do this once, since transitionend will fire for every transition
       if (!this.isVisible && !this.popover.hidden) {
         this.popover.hidden = true;
-        this.popover.classList.remove(this.options.visibleClass);
-        this.options.onAfterHide.call(this);
+        if (this.options.visibleClass != null) {
+          this.popover.classList.remove(this.options.visibleClass);
+        }
+        (_b = this.options.onAfterHide) === null || _b === void 0 ? void 0 : _b.call(this);
       }
     }
   }
@@ -1836,13 +1835,17 @@ class Popover {
     this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
     if (this.popper) {
       this.popper.destroy();
-      this.popper = null;
+      this.popper = undefined;
     }
   }
   show() {
     this.isVisible = true;
     this.popover.hidden = false;
-    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));
+    requestAnimationFrame(() => {
+      if (this.options.visibleClass != null) {
+        this.popover.classList.add(this.options.visibleClass);
+      }
+    });
     if (this.popper) {
       this.popper.destroy();
     }
@@ -1864,30 +1867,35 @@ class Popover {
         },
       ],
     });
-    this.popover.addEventListener('transitionend', () => this.options.onAfterShow.call(this), { once: true });
+    this.popover.addEventListener('transitionend', () => { var _a; return (_a = this.options.onAfterShow) === null || _a === void 0 ? void 0 : _a.call(this); }, { once: true });
     // Reposition the menu after it appears in case a modifier kicked in
     requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
   }
   reposition() {
-    this.popper.update();
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
   }
   hide() {
     // Apply the hidden styles and wait for the transition before hiding completely
     this.isVisible = false;
-    this.popover.classList.remove(this.options.visibleClass);
+    if (this.options.visibleClass != null) {
+      this.popover.classList.remove(this.options.visibleClass);
+    }
   }
   setOptions(options) {
     this.options = Object.assign(this.options, options);
-    this.isVisible
-      ? this.popover.classList.add(this.options.visibleClass)
-      : this.popover.classList.remove(this.options.visibleClass);
+    if (this.options.visibleClass != null) {
+      this.isVisible
+        ? this.popover.classList.add(this.options.visibleClass)
+        : this.popover.classList.remove(this.options.visibleClass);
+    }
     // Update popper options
-    if (this.popper) {
-      this.popper.setOptions({
+    if (this.popper != null) {
+      void this.popper.setOptions({
         placement: this.options.placement,
         strategy: this.options.strategy,
       });
-      requestAnimationFrame(() => this.popper.update());
+      requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
     }
   }
 }