@getflip/swirl-components 0.4.0 → 0.5.0

package/dist/components/file-manager.js

@@ -0,0 +1,238 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$q } from './flip-app-layout2.js';
+import { d as defineCustomElement$p } from './flip-box2.js';
+import { d as defineCustomElement$o } from './flip-button2.js';
+import { d as defineCustomElement$n } from './flip-empty-state2.js';
+import { d as defineCustomElement$m } from './flip-file-viewer2.js';
+import { d as defineCustomElement$l } from './flip-file-viewer-audio2.js';
+import { d as defineCustomElement$k } from './flip-file-viewer-csv2.js';
+import { d as defineCustomElement$j } from './flip-file-viewer-image2.js';
+import { d as defineCustomElement$i } from './flip-file-viewer-pdf2.js';
+import { d as defineCustomElement$h } from './flip-file-viewer-text2.js';
+import { d as defineCustomElement$g } from './flip-file-viewer-video2.js';
+import { d as defineCustomElement$f } from './flip-heading2.js';
+import { d as defineCustomElement$e } from './flip-icon-check-small2.js';
+import { d as defineCustomElement$d } from './flip-icon-check-strong2.js';
+import { d as defineCustomElement$c } from './flip-icon-error2.js';
+import { d as defineCustomElement$b } from './flip-inline-error2.js';
+import { d as defineCustomElement$a } from './flip-option-list2.js';
+import { d as defineCustomElement$9 } from './flip-option-list-item2.js';
+import { d as defineCustomElement$8 } from './flip-popover2.js';
+import { d as defineCustomElement$7 } from './flip-resource-list2.js';
+import { d as defineCustomElement$6 } from './flip-resource-list-item2.js';
+import { d as defineCustomElement$5 } from './flip-spinner2.js';
+import { d as defineCustomElement$4 } from './flip-stack2.js';
+import { d as defineCustomElement$3 } from './flip-text2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const FileManagerMockData = {
+  directories: [
+    {
+      name: "Development",
+      description: "Updated 2 days ago.",
+      children: [
+        {
+          description: "1.02 MB, updated 2 days ago.",
+          name: "sample.pdf",
+          type: "application/pdf",
+          url: "/sample.pdf",
+        },
+        {
+          description: "124 KB, updated a month ago.",
+          name: "sample.jpg",
+          type: "image/jpeg",
+          url: "/sample.jpg",
+        },
+      ],
+    },
+    {
+      name: "People",
+      description: "Updated just now.",
+      children: [],
+    },
+  ],
+};
+const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectItem = (item) => {
+      if ("type" in item) {
+        this.selectedFile = item;
+        this.layout.changeMobileView("body");
+      }
+      else {
+        this.selectedDirectory = item;
+      }
+    };
+    this.resetSelectedDirectory = () => {
+      this.selectedDirectory = undefined;
+    };
+    this.toggleSidebar = () => {
+      var _a;
+      (_a = this.layout) === null || _a === void 0 ? void 0 : _a.toggleSidebar();
+    };
+  }
+  renderNavigation() {
+    const items = Boolean(this.selectedDirectory)
+      ? this.selectedDirectory.children
+      : FileManagerMockData.directories;
+    return items.length > 0 ? (items.map((item) => (h("flip-resource-list-item", { description: item.description, key: item.name, label: item.name, media: "type" in item
+        ? "<flip-icon-file></flip-icon-file>"
+        : "<flip-icon-folder-shared></flip-icon-folder-shared>",
+      // eslint-disable-next-line react/jsx-no-bind
+      onClick: () => this.selectItem(item) })))) : (h("flip-box", { padding: "16" }, h("flip-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, null, h("flip-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<flip-icon-add></flip-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("flip-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("flip-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }), Boolean(this.selectedFile) ? (h("flip-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("flip-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("flip-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("flip-button", { "hide-label": true, class: "info-button", icon: "<flip-icon-info></flip-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("flip-box", { padding: "16", slot: "sidebar" }, h("flip-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("flip-popover", { label: "Sort items", popoverId: "sort-menu", trigger: "sort-button" }, h("flip-option-list", { value: ["ascending"] }, h("flip-option-list-item", { icon: "<flip-icon-expand-less></flip-icon-expand-less>", label: "Ascending", value: "ascending" }), h("flip-option-list-item", { icon: "<flip-icon-expand-more></flip-icon-expand-more>", label: "Descending", value: "descending" }), h("flip-option-list-item", { icon: "<flip-icon-time-outlined></flip-icon-time-outlined>", label: "By date", value: "date" })))));
+  }
+}, [1, "file-manager", {
+    "selectedDirectory": [32],
+    "selectedFile": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["file-manager", "flip-app-layout", "flip-box", "flip-button", "flip-empty-state", "flip-file-viewer", "flip-file-viewer-audio", "flip-file-viewer-csv", "flip-file-viewer-image", "flip-file-viewer-pdf", "flip-file-viewer-text", "flip-file-viewer-video", "flip-heading", "flip-icon-check-small", "flip-icon-check-strong", "flip-icon-error", "flip-inline-error", "flip-option-list", "flip-option-list-item", "flip-popover", "flip-resource-list", "flip-resource-list-item", "flip-spinner", "flip-stack", "flip-text", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "file-manager":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FileManager$1);
+      }
+      break;
+    case "flip-app-layout":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "flip-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "flip-empty-state":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "flip-file-viewer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "flip-file-viewer-audio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "flip-file-viewer-csv":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "flip-file-viewer-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "flip-file-viewer-pdf":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "flip-file-viewer-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "flip-file-viewer-video":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "flip-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "flip-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "flip-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "flip-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "flip-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "flip-option-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "flip-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "flip-resource-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "flip-resource-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FileManager = FileManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FileManager, defineCustomElement };

package/dist/components/flip-action-list-item.js

@@ -45,5 +45,3 @@ const FlipActionListItem = FlipActionListItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipActionListItem, defineCustomElement };
-
-//# sourceMappingURL=flip-action-list-item.js.map

package/dist/components/flip-action-list-section.js

@@ -34,5 +34,3 @@ const FlipActionListSection = FlipActionListSection$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipActionListSection, defineCustomElement };
-
-//# sourceMappingURL=flip-action-list-section.js.map

package/dist/components/flip-action-list.js

@@ -65,5 +65,3 @@ const FlipActionList = FlipActionList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipActionList, defineCustomElement };
-
-//# sourceMappingURL=flip-action-list.js.map

package/dist/components/flip-app-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipAppLayout extends Components.FlipAppLayout, HTMLElement {}
+export const FlipAppLayout: {
+  prototype: FlipAppLayout;
+  new (): FlipAppLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-app-layout.js

@@ -0,0 +1,6 @@
+import { F as FlipAppLayout$1, d as defineCustomElement$1 } from './flip-app-layout2.js';
+
+const FlipAppLayout = FlipAppLayout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipAppLayout, defineCustomElement };

package/dist/components/flip-app-layout2.js

@@ -0,0 +1,224 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$2 } from './flip-button2.js';
+import { d as defineCustomElement$1 } from './flip-heading2.js';
+
+const flipAppLayoutCss = ":host{display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;max-width:100rem;height:100%;margin-right:auto;margin-left:auto;border:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default)}@media (min-width: 1440px){.app-layout{border-radius:var(--s-border-radius-base)}}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-template-columns:100%;grid-template-rows:4rem 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-in 0.3s;animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-out 0.3s;animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px) and (max-width: 1439px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:app-layout-sidebar-overlay-slide-out 0.3s;animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:none;animation:none}}.app-layout__header{z-index:1;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{fles-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-area:body;grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;will-change:transform;gap:var(--s-border-width-default);grid-area:sidebar;grid-template-rows:4rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"navigation\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"body\"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{-webkit-animation:app-layout-slide-out 0.4s;animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.4s;animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{-webkit-animation:app-layout-scale-in 0.3s;animation:app-layout-scale-in 0.3s}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@-webkit-keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
+
+const FlipAppLayout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ctaClick = createEvent(this, "ctaClick", 7);
+    this.mobileViewChange = createEvent(this, "mobileViewChange", 7);
+    this.navigationBackButtonClick = createEvent(this, "navigationBackButtonClick", 7);
+    this.sidebarToggle = createEvent(this, "sidebarToggle", 7);
+    this.backToNavigationViewButtonLabel = "Back to navigation";
+    this.navigationBackButtonLabel = "Go back";
+    this.sidebarCloseButtonLabel = "Close sidebar";
+    this.transitionStyle = "slides";
+    this.mobileView = "navigation";
+    this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    };
+    this.onCtaClick = (event) => {
+      this.ctaClick.emit(event);
+    };
+    this.onNavigationBackButtonClick = (event) => {
+      this.navigationBackButtonClick.emit(event);
+    };
+    this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    };
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateNavigationStatus();
+      this.updateSidebarStatus();
+    });
+    this.mutationObserver.observe(this.el, { childList: true });
+    queueMicrotask(() => {
+      this.updateSidebarStatus();
+      this.updateNavigationStatus();
+      this.checkMobileView();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  watchMobileView() {
+    this.checkMobileView();
+  }
+  /**
+   * Show the sidebar
+   */
+  async showSidebar() {
+    if (this.sidebarActive || !this.hasSidebar) {
+      return;
+    }
+    this.sidebarActive = true;
+    this.changeMobileView("sidebar");
+    this.sidebarToggle.emit(true);
+  }
+  /**
+   * Hide the sidebar
+   */
+  async hideSidebar() {
+    if (!this.sidebarActive || !this.hasSidebar) {
+      return;
+    }
+    if (Boolean(this.sidebarClosingTimeout)) {
+      clearTimeout(this.sidebarClosingTimeout);
+    }
+    this.sidebarClosing = true;
+    const delay = isMobileViewport() ? 0 : 300;
+    this.sidebarClosingTimeout = setTimeout(() => {
+      this.sidebarActive = false;
+      this.sidebarClosing = false;
+      this.changeMobileView("body");
+      this.sidebarToggle.emit(false);
+    }, delay);
+  }
+  /**
+   * Toggle the sidebar
+   */
+  async toggleSidebar() {
+    if (!this.hasSidebar) {
+      return;
+    }
+    if (this.sidebarActive) {
+      this.hideSidebar();
+    }
+    else {
+      this.showSidebar();
+    }
+  }
+  /**
+   * Change the currently displayed view on mobile viewports
+   * @param mobileView
+   */
+  async changeMobileView(mobileView, transition = true) {
+    if (this.mobileView === mobileView ||
+      (mobileView === "navigation" && !this.hasNavigation) ||
+      (mobileView === "sidebar" && !this.hasSidebar)) {
+      return;
+    }
+    const mobile = isMobileViewport();
+    if (!mobile || !transition) {
+      this.mobileView = mobileView;
+      this.mobileViewChange.emit(this.mobileView);
+      return;
+    }
+    if (Boolean(this.transitionTimeout)) {
+      clearTimeout(this.transitionTimeout);
+    }
+    this.transitioningFrom = this.mobileView;
+    this.transitioningTo = mobileView;
+    const delay = this.transitionStyle === "slides"
+      ? 400
+      : this.transitionStyle === "dialog"
+        ? 300
+        : 0;
+    this.transitionTimeout = setTimeout(() => {
+      this.mobileView = mobileView;
+      this.transitioningFrom = undefined;
+      this.transitioningTo = undefined;
+      this.mobileViewChange.emit(this.mobileView);
+    }, delay);
+  }
+  checkMobileView() {
+    if ((this.mobileView === "navigation" && !this.hasNavigation) ||
+      (this.mobileView === "sidebar" && !this.hasSidebar)) {
+      this.mobileView = "body";
+      return;
+    }
+    const sidebarActive = this.mobileView === "sidebar" || this.sidebarActive;
+    if (sidebarActive === this.sidebarActive) {
+      return;
+    }
+    if (sidebarActive) {
+      this.showSidebar();
+    }
+    else {
+      this.hideSidebar();
+    }
+  }
+  updateNavigationStatus() {
+    this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
+  }
+  updateSidebarStatus() {
+    this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+  }
+  render() {
+    const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+      this.hasNavigation;
+    const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+      "app-layout--sidebar-closing": this.sidebarClosing,
+    });
+    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("flip-button", { hideLabel: true, icon: "<flip-icon-arrow-back></flip-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("flip-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? (h("header", { class: "app-layout__app-bar" }, showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("flip-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
+        ? "<flip-icon-close></flip-icon-close>"
+        : "<flip-icon-arrow-back></flip-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.appBarMedia && (h("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia })), h("div", { class: "app-layout__app-bar-heading" }, this.heading && (h("flip-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading })), this.subheading && (h("span", { class: "app-layout__app-bar-subheading" }, this.subheading))), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))) : (h("header", { class: "app-layout__app-bar" }, h("flip-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("flip-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("flip-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("flip-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "mobileView": ["watchMobileView"]
+  }; }
+  static get style() { return flipAppLayoutCss; }
+}, [1, "flip-app-layout", {
+    "appBarMedia": [1, "app-bar-media"],
+    "appName": [1, "app-name"],
+    "backToNavigationViewButtonLabel": [1, "back-to-navigation-view-button-label"],
+    "ctaIcon": [1, "cta-icon"],
+    "ctaLabel": [1, "cta-label"],
+    "heading": [1],
+    "navigationBackButtonLabel": [1, "navigation-back-button-label"],
+    "navigationLabel": [1, "navigation-label"],
+    "showNavigationBackButton": [4, "show-navigation-back-button"],
+    "sidebarCloseButtonLabel": [1, "sidebar-close-button-label"],
+    "sidebarHeading": [1, "sidebar-heading"],
+    "subheading": [1],
+    "transitionStyle": [1, "transition-style"],
+    "hasNavigation": [32],
+    "hasSidebar": [32],
+    "mobileView": [32],
+    "sidebarActive": [32],
+    "sidebarClosing": [32],
+    "transitioningFrom": [32],
+    "transitioningTo": [32],
+    "showSidebar": [64],
+    "hideSidebar": [64],
+    "toggleSidebar": [64],
+    "changeMobileView": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-app-layout", "flip-button", "flip-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-app-layout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipAppLayout);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "flip-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipAppLayout as F, defineCustomElement as d };

package/dist/components/flip-autocomplete.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipAutocomplete extends Components.FlipAutocomplete, HTMLElement {}
+export const FlipAutocomplete: {
+  prototype: FlipAutocomplete;
+  new (): FlipAutocomplete;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;