@getflip/swirl-components 0.81.3 → 0.82.0

package/dist/collection/components/swirl-theme-provider/swirl-theme-provider.js

@@ -71,8 +71,11 @@ export class SwirlThemeProvider {
     this.updateAppTheme();
   }
   resolveConfig() {
-    var _a, _b;
-    this.resolvedConfig = Object.assign(Object.assign({}, (this.config || {})), { rootElement: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.rootElement) || document.documentElement, storage: ((_b = this.config) === null || _b === void 0 ? void 0 : _b.storage) || (window === null || window === void 0 ? void 0 : window.localStorage) });
+    this.resolvedConfig = {
+      ...(this.config || {}),
+      rootElement: this.config?.rootElement || document.documentElement,
+      storage: this.config?.storage || window?.localStorage,
+    };
   }
   determineOSTheme() {
     if (!Boolean(window.matchMedia)) {
@@ -111,8 +114,7 @@ export class SwirlThemeProvider {
     }
   }
   updateTenantVariables() {
-    var _a;
-    const tenantTheme = (_a = this.resolvedConfig) === null || _a === void 0 ? void 0 : _a.tenantColors;
+    const tenantTheme = this.resolvedConfig?.tenantColors;
     if (!Boolean(tenantTheme)) {
       this.resetTenantVariables();
       return;
@@ -128,7 +130,15 @@ export class SwirlThemeProvider {
     const secondaryPressed = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1));
     const textHovered = toRgba(hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1));
     const textPressed = toRgba(hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1));
-    const tenantThemeWithGeneratedStateColors = Object.assign(Object.assign({}, tenantTheme), { primaryHovered: primaryHovered, primaryPressed: primaryPressed, secondaryHovered: secondaryHovered, secondaryPressed: secondaryPressed, textHovered: textHovered, textPressed: textPressed });
+    const tenantThemeWithGeneratedStateColors = {
+      ...tenantTheme,
+      primaryHovered: primaryHovered,
+      primaryPressed: primaryPressed,
+      secondaryHovered: secondaryHovered,
+      secondaryPressed: secondaryPressed,
+      textHovered: textHovered,
+      textPressed: textPressed,
+    };
     // set custom properties for tenant theme colors
     Object.entries(tenantColorMapping).forEach(([key, value]) => rootElement.style.setProperty(key, tenantThemeWithGeneratedStateColors[value]));
   }

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -73,11 +73,16 @@ export class SwirlTimeInput {
     this.setupMask();
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
-    (_c = (_b = this.desktopMediaQuery).removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, "change", this.desktopMediaQueryHandler);
+    this.mask?.destroy();
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   watchFormat() {
     this.setupMask();
@@ -92,8 +97,7 @@ export class SwirlTimeInput {
     event.target.select();
   }
   setupMask() {
-    var _a;
-    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.mask?.destroy();
     this.mask = createMask(`#${this.id}`, {
       mask: this.format.replace(/[Hhms]/g, "#"),
     });
@@ -111,7 +115,7 @@ export class SwirlTimeInput {
     const className = classnames("time-input", {
       "time-input--inline": this.inline,
     });
-    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   static get is() { return "swirl-time-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-toast/swirl-toast.js

@@ -27,15 +27,13 @@ export class SwirlToast {
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   forceIconProps(smallIcon) {
-    var _a;
-    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    const icon = this.iconEl?.children[0];
     const dismissIcon = this.dismissIconEl;
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
-    dismissIcon === null || dismissIcon === void 0 ? void 0 : dismissIcon.setAttribute("size", smallIcon ? "20" : "24");
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+    dismissIcon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   startTimer() {
     this.clearTimer();

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -39,14 +39,19 @@ export class SwirlToastProvider {
     else if (this.globalDuration === 0) {
       duration = undefined;
     }
-    const newToastWithId = Object.assign(Object.assign({}, newToast), { createdAt: new Date(), duration, toastId: newToast.toastId || String(Math.round(Math.random() * 10000)) });
+    const newToastWithId = {
+      ...newToast,
+      createdAt: new Date(),
+      duration,
+      toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),
+    };
     this.toasts = [...this.toasts, newToastWithId];
     return newToastWithId;
   }
   render() {
     return (h(Host, { role: "status" }, h("swirl-stack", { spacing: "12" }, this.toasts.map((toast) => {
-      const props = Object.assign(Object.assign({}, toast), { content: undefined });
-      return (h("swirl-toast", Object.assign({ key: toast.toastId, onDismiss: this.onDismiss }, props), toast.content));
+      const props = { ...toast, content: undefined };
+      return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
     }))));
   }
   static get is() { return "swirl-toast-provider"; }

package/dist/collection/components/swirl-tooltip/swirl-tooltip.js

@@ -46,29 +46,28 @@ export class SwirlTooltip {
       };
     };
     this.getArrowStyles = () => {
-      var _a, _b, _c, _d;
-      if (((_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.placement) === "top") {
+      if (this.actualPosition?.placement === "top") {
         return {
           top: "100%",
           left: "50%",
           transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (((_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.placement) === "bottom") {
+      if (this.actualPosition?.placement === "bottom") {
         return {
           bottom: "100%",
           left: "50%",
           transform: "translate3d(-50%, 50%, 0) rotate(45deg)",
         };
       }
-      if (((_c = this.actualPosition) === null || _c === void 0 ? void 0 : _c.placement) === "right") {
+      if (this.actualPosition?.placement === "right") {
         return {
           top: "50%",
           right: "100%",
           transform: "translate3d(50%, -50%, 0) rotate(45deg)",
         };
       }
-      if (((_d = this.actualPosition) === null || _d === void 0 ? void 0 : _d.placement) === "left") {
+      if (this.actualPosition?.placement === "left") {
         return {
           top: "50%",
           left: "100%",
@@ -104,14 +103,13 @@ export class SwirlTooltip {
     this.updateOptions();
   }
   render() {
-    var _a, _b;
     const arrowStyles = this.getArrowStyles();
     return (h(Host, { onKeydown: this.onKeydown }, h("span", { class: "tooltip" }, h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 }, h("slot", null)), h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
         top: Boolean(this.actualPosition)
-          ? `${(_a = this.actualPosition) === null || _a === void 0 ? void 0 : _a.y}px`
+          ? `${this.actualPosition?.y}px`
           : "",
         left: Boolean(this.actualPosition)
-          ? `${(_b = this.actualPosition) === null || _b === void 0 ? void 0 : _b.x}px`
+          ? `${this.actualPosition?.x}px`
           : "",
       } }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { class: "tooltip__content", innerHTML: this.content }), h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
   }

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -41,8 +41,7 @@ export class FileManager {
       this.selectedDirectory = undefined;
     };
     this.toggleSidebar = () => {
-      var _a;
-      (_a = this.layout) === null || _a === void 0 ? void 0 : _a.toggleSidebar();
+      this.layout?.toggleSidebar();
     };
     this.selectedDirectory = undefined;
     this.selectedFile = undefined;
@@ -57,8 +56,7 @@ export class FileManager {
       onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
   }
   render() {
-    var _a, _b;
-    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name }), h("swirl-text", { color: "subdued", truncate: true }, (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
   }
   static get is() { return "file-manager"; }
   static get encapsulation() { return "shadow"; }