@getflip/swirl-components 0.12.0 → 0.14.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 const FileManagerMockData = {
   directories: [
     {
@@ -44,6 +44,8 @@ export class FileManager {
       var _a;
       (_a = this.layout) === null || _a === void 0 ? void 0 : _a.toggleSidebar();
     };
+    this.selectedDirectory = undefined;
+    this.selectedFile = undefined;
   }
   renderNavigation() {
     const items = Boolean(this.selectedDirectory)
@@ -51,32 +53,20 @@ export class FileManager {
       : FileManagerMockData.directories;
     return items.length > 0 ? (items.map((item) => (h("swirl-resource-list-item", { description: item.description, key: item.name, label: item.name, media: "type" in item
         ? "<swirl-icon-file></swirl-icon-file>"
-        : "<swirl-icon-folder-shared></swirl-icon-folder-shared>", 
+        : "<swirl-icon-folder-shared></swirl-icon-folder-shared>",
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.selectItem(item) })))) : (h("swirl-box", { padding: "16" },
-      h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
+      onClick: () => this.selectItem(item) })))) : (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", heading: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name, navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), subheading: (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description, transitionStyle: "dialog" },
-        h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()),
-        h("swirl-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }),
-        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", popoverId: "sort-menu", trigger: "sort-button" },
-        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", heading: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name, navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), subheading: (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description, transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }), 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", popoverId: "sort-menu", trigger: "sort-button" }, 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"; }
-  static get states() { return {
-    "selectedDirectory": {},
-    "selectedFile": {}
-  }; }
+  static get states() {
+    return {
+      "selectedDirectory": {},
+      "selectedFile": {}
+    };
+  }
 }

package/dist/collection/utils.js

@@ -1,3 +1,20 @@
+export function closestPassShadow(node, selector) {
+  if (!node) {
+    return null;
+  }
+  if (node instanceof ShadowRoot) {
+    return closestPassShadow(node.host, selector);
+  }
+  if (node instanceof HTMLElement) {
+    if (node.matches(selector)) {
+      return node;
+    }
+    else {
+      return closestPassShadow(node.parentNode, selector);
+    }
+  }
+  return closestPassShadow(node.parentNode, selector);
+}
 export const getDesktopMediaQuery = () => document.documentElement.classList.contains("disable-desktop-style-tweaks")
   ? window.matchMedia(null)
   : window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");