@six-group/ui-library 4.0.3 → 4.1.0

package/dist/components/index.js

@@ -1,4 +1,3 @@
-import { SetAttributes } from './set-attributes.js';
 import { SixAlert } from './six-alert.js';
 import { SixAvatar } from './six-avatar.js';
 import { SixBadge } from './six-badge.js';
@@ -37,6 +36,7 @@ import { SixRange } from './six-range.js';
 import { SixRoot } from './six-root.js';
 import { SixSearchField } from './six-search-field.js';
 import { SixSelect } from './six-select.js';
+export { g as getErrorMessage, a as getLanguage, l as languages } from './six-select.js';
 import { SixSidebar } from './six-sidebar.js';
 import { SixSidebarItem } from './six-sidebar-item.js';
 import { SixSidebarItemGroup } from './six-sidebar-item-group.js';
@@ -51,163 +51,125 @@ import { SixTextarea } from './six-textarea.js';
 import { SixTile } from './six-tile.js';
 import { SixTimepicker } from './six-timepicker.js';
 import { SixTooltip } from './six-tooltip.js';
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { getAssetPath, 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.
+ * Displays an alert on the toast stack with a specified message and optional configuration.
+ *
+ * @param message - The message to be displayed in the alert.
+ * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.
+ * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.
+ * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.
  */
-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;
+function showAlert(message, alertType, duration, iconName) {
+    const type = alertType !== null && alertType !== void 0 ? alertType : 'info';
+    const icon = iconName !== null && iconName !== void 0 ? iconName : getIcon(type);
+    const alert = Object.assign(document.createElement('six-alert'), {
+        type,
+        duration: duration !== null && duration !== void 0 ? duration : getDuration(type),
+        innerHTML: `<six-icon slot="icon">${icon}</six-icon>${escapeHtml(message)}`,
+        closable: true,
+    });
+    document.body.append(alert);
+    alert.toast();
+}
+function escapeHtml(html) {
+    const div = document.createElement('div');
+    div.textContent = html;
+    return div.innerHTML;
+}
+function getIcon(messageType) {
+    switch (messageType) {
+        case 'primary':
+            return 'info';
+        case 'info':
+            return 'info';
+        case 'success':
+            return 'check_circle';
+        case 'warning':
+            return 'warning';
+        case 'danger':
+            return 'report';
+    }
+}
+function getDuration(messageType) {
+    switch (messageType) {
+        case 'primary':
+            return 10000;
+        case 'info':
+            return 10000;
+        case 'success':
+            return 10000;
+        case 'warning':
+            return 20000;
+        case 'danger':
+            return 20000;
     }
-  }
-  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') {
-    [
-      SetAttributes,
-      SixAlert,
-      SixAvatar,
-      SixBadge,
-      SixButton,
-      SixCard,
-      SixCheckbox,
-      SixDatepicker,
-      SixDetails,
-      SixDialog,
-      SixDrawer,
-      SixDropdown,
-      SixError,
-      SixErrorPage,
-      SixFileList,
-      SixFileListItem,
-      SixFileUpload,
-      SixFooter,
-      SixGroupLabel,
-      SixHeader,
-      SixIcon,
-      SixIconButton,
-      SixInput,
-      SixItemPicker,
-      SixLanguageSwitcher,
-      SixLayoutGrid,
-      SixMainContainer,
-      SixMenu,
-      SixMenuDivider,
-      SixMenuItem,
-      SixMenuLabel,
-      SixPicto,
-      SixProgressBar,
-      SixProgressRing,
-      SixRadio,
-      SixRange,
-      SixRoot,
-      SixSearchField,
-      SixSelect,
-      SixSidebar,
-      SixSidebarItem,
-      SixSidebarItemGroup,
-      SixSpinner,
-      SixStageIndicator,
-      SixSwitch,
-      SixTab,
-      SixTabGroup,
-      SixTabPanel,
-      SixTag,
-      SixTextarea,
-      SixTile,
-      SixTimepicker,
-      SixTooltip,
-    ].forEach(cmp => {
-      if (!customElements.get(cmp.is)) {
-        customElements.define(cmp.is, cmp, opts);
-      }
-    });
-  }
+    if (typeof customElements !== 'undefined') {
+        [
+            SixAlert,
+            SixAvatar,
+            SixBadge,
+            SixButton,
+            SixCard,
+            SixCheckbox,
+            SixDatepicker,
+            SixDetails,
+            SixDialog,
+            SixDrawer,
+            SixDropdown,
+            SixError,
+            SixErrorPage,
+            SixFileList,
+            SixFileListItem,
+            SixFileUpload,
+            SixFooter,
+            SixGroupLabel,
+            SixHeader,
+            SixIcon,
+            SixIconButton,
+            SixInput,
+            SixItemPicker,
+            SixLanguageSwitcher,
+            SixLayoutGrid,
+            SixMainContainer,
+            SixMenu,
+            SixMenuDivider,
+            SixMenuItem,
+            SixMenuLabel,
+            SixPicto,
+            SixProgressBar,
+            SixProgressRing,
+            SixRadio,
+            SixRange,
+            SixRoot,
+            SixSearchField,
+            SixSelect,
+            SixSidebar,
+            SixSidebarItem,
+            SixSidebarItemGroup,
+            SixSpinner,
+            SixStageIndicator,
+            SixSwitch,
+            SixTab,
+            SixTabGroup,
+            SixTabPanel,
+            SixTag,
+            SixTextarea,
+            SixTile,
+            SixTimepicker,
+            SixTooltip,
+        ].forEach(cmp => {
+            if (!customElements.get(cmp.is)) {
+                customElements.define(cmp.is, cmp, opts);
+            }
+        });
+    }
 };
 
-export { defineCustomElements, getErrorMessage };
+export { defineCustomElements, showAlert };
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"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","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}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;;;;;;SAQgB,SAAS,CAAC,OAAe,EAAE,SAAqB,EAAE,QAAiB,EAAE,QAAiB;IACpG,MAAM,IAAI,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAC/D,IAAI;QACJ,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,WAAW,CAAC,IAAI,CAAC;QACvC,SAAS,EAAE,yBAAyB,IAAI,cAAc,UAAU,CAAC,OAAO,CAAC,EAAE;QAC3E,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACH,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,KAAK,CAAC,KAAK,EAAE,CAAC;AAChB,CAAC;AAED,SAAS,UAAU,CAAC,IAAY;IAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC;IACvB,OAAO,GAAG,CAAC,SAAS,CAAC;AACvB,CAAC;AAED,SAAS,OAAO,CAAC,WAAsB;IACrC,QAAQ,WAAW;QACjB,KAAK,SAAS;YACZ,OAAO,MAAM,CAAC;QAChB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAC;QACxB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;KACnB;AACH,CAAC;AAED,SAAS,WAAW,CAAC,WAAsB;IACzC,QAAQ,WAAW;QACjB,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC;QACf,KAAK,MAAM;YACT,OAAO,KAAK,CAAC;QACf,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC;QACf,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;KAChB;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/alert.ts"],"sourcesContent":["import { AlertType } from '../components/six-alert/six-alert';\n\n/**\n * Displays an alert on the toast stack with a specified message and optional configuration.\n *\n * @param message - The message to be displayed in the alert.\n * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.\n * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.\n * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.\n */\nexport function showAlert(message: string, alertType?: AlertType, duration?: number, iconName?: string): void {\n  const type = alertType ?? 'info';\n  const icon = iconName ?? getIcon(type);\n  const alert = Object.assign(document.createElement('six-alert'), {\n    type,\n    duration: duration ?? getDuration(type),\n    innerHTML: `<six-icon slot=\"icon\">${icon}</six-icon>${escapeHtml(message)}`,\n    closable: true,\n  });\n  document.body.append(alert);\n  alert.toast();\n}\n\nfunction escapeHtml(html: string): string {\n  const div = document.createElement('div');\n  div.textContent = html;\n  return div.innerHTML;\n}\n\nfunction getIcon(messageType: AlertType): string {\n  switch (messageType) {\n    case 'primary':\n      return 'info';\n    case 'info':\n      return 'info';\n    case 'success':\n      return 'check_circle';\n    case 'warning':\n      return 'warning';\n    case 'danger':\n      return 'report';\n  }\n}\n\nfunction getDuration(messageType: AlertType): number {\n  switch (messageType) {\n    case 'primary':\n      return 10000;\n    case 'info':\n      return 10000;\n    case 'success':\n      return 10000;\n    case 'warning':\n      return 20000;\n    case 'danger':\n      return 20000;\n  }\n}\n"],"version":3}

package/dist/components/modal.js

@@ -2,46 +2,46 @@
 // Determines if the browser supports focus({ preventScroll })
 //
 const isPreventScrollSupported = () => {
-  let supported = false;
-  const element = document.createElement('div');
-  element.focus &&
-    element.focus({
-      get preventScroll() {
-        supported = true;
-        return false;
-      },
-    });
-  return supported;
+    let supported = false;
+    const element = document.createElement('div');
+    element.focus &&
+        element.focus({
+            get preventScroll() {
+                supported = true;
+                return false;
+            },
+        });
+    return supported;
 };
 
 let activeModals = [];
 class Modal {
-  constructor(element, options) {
-    this.element = element;
-    this.options = options;
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-  }
-  activate() {
-    activeModals.push(this.element);
-    document.addEventListener('focusin', this.handleFocusIn);
-  }
-  deactivate() {
-    activeModals = activeModals.filter((modal) => modal !== this.element);
-    document.removeEventListener('focusin', this.handleFocusIn);
-  }
-  isActive() {
-    // The "active" modal is always the most recent one shown
-    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 ((_a = this.options) === null || _a === void 0 ? void 0 : _a.onFocusOut) === 'function') {
-      (_b = this.options) === null || _b === void 0 ? void 0 : _b.onFocusOut(event);
+    constructor(element, options) {
+        this.element = element;
+        this.options = options;
+        this.handleFocusIn = this.handleFocusIn.bind(this);
+    }
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+    }
+    deactivate() {
+        activeModals = activeModals.filter((modal) => modal !== this.element);
+        document.removeEventListener('focusin', this.handleFocusIn);
+    }
+    isActive() {
+        // The "active" modal is always the most recent one shown
+        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 ((_a = this.options) === null || _a === void 0 ? void 0 : _a.onFocusOut) === 'function') {
+            (_b = this.options) === null || _b === void 0 ? void 0 : _b.onFocusOut(event);
+        }
     }
-  }
 }
 
 export { Modal as M, isPreventScrollSupported as i };

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,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}
+{"file":"modal.js","mappings":"AAAA;AACA;AACA;MACa,wBAAwB,GAAG;IACtC,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,KAAK;QACX,OAAO,CAAC,KAAK,CAAC;YACZ,IAAI,aAAa;gBACf,SAAS,GAAG,IAAI,CAAC;gBACjB,OAAO,KAAK,CAAC;aACd;SACF,CAAC,CAAC;IAEL,OAAO,SAAS,CAAC;AACnB;;ACZA,IAAI,YAAY,GAAkB,EAAE,CAAC;MAEhB,KAAK;IAIxB,YAAY,OAAoB,EAAE,OAAsB;QACtD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpD;IAED,QAAQ;QACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1D;IAED,UAAU;QACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;QACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC7D;IAED,QAAQ;;QAEN,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;KAC/D;IAED,aAAa,CAAC,KAAY;;QACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;QAGnD,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;YACjH,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SACjC;KACF;;;;;","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}