@getflip/swirl-components 0.4.0 → 0.5.0

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

@@ -0,0 +1,592 @@
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch, } from "@stencil/core";
+import classnames from "classnames";
+import { isMobileViewport } from "../../utils";
+export class FlipAppLayout {
+  constructor() {
+    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" })))))));
+  }
+  static get is() { return "flip-app-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-app-layout.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-app-layout.css"]
+  }; }
+  static get properties() { return {
+    "appBarMedia": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "app-bar-media",
+      "reflect": false
+    },
+    "appName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "app-name",
+      "reflect": false
+    },
+    "backToNavigationViewButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "back-to-navigation-view-button-label",
+      "reflect": false,
+      "defaultValue": "\"Back to navigation\""
+    },
+    "ctaIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cta-icon",
+      "reflect": false
+    },
+    "ctaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cta-label",
+      "reflect": false
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "navigationBackButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "navigation-back-button-label",
+      "reflect": false,
+      "defaultValue": "\"Go back\""
+    },
+    "navigationLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "navigation-label",
+      "reflect": false
+    },
+    "showNavigationBackButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-navigation-back-button",
+      "reflect": false
+    },
+    "sidebarCloseButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-close-button-label",
+      "reflect": false,
+      "defaultValue": "\"Close sidebar\""
+    },
+    "sidebarHeading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-heading",
+      "reflect": false
+    },
+    "subheading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subheading",
+      "reflect": false
+    },
+    "transitionStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "transition-style",
+      "reflect": false,
+      "defaultValue": "\"slides\""
+    }
+  }; }
+  static get states() { return {
+    "hasNavigation": {},
+    "hasSidebar": {},
+    "mobileView": {},
+    "sidebarActive": {},
+    "sidebarClosing": {},
+    "transitioningFrom": {},
+    "transitioningTo": {}
+  }; }
+  static get events() { return [{
+      "method": "ctaClick",
+      "name": "ctaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "mobileViewChange",
+      "name": "mobileViewChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FlipAppLayoutMobileView",
+        "resolved": "\"body\" | \"navigation\" | \"sidebar\"",
+        "references": {
+          "FlipAppLayoutMobileView": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "navigationBackButtonClick",
+      "name": "navigationBackButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "sidebarToggle",
+      "name": "sidebarToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "showSidebar": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Show the sidebar",
+        "tags": []
+      }
+    },
+    "hideSidebar": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hide the sidebar",
+        "tags": []
+      }
+    },
+    "toggleSidebar": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle the sidebar",
+        "tags": []
+      }
+    },
+    "changeMobileView": {
+      "complexType": {
+        "signature": "(mobileView: FlipAppLayoutMobileView, transition?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "mobileView"
+              }],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipAppLayoutMobileView": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Change the currently displayed view on mobile viewports",
+        "tags": [{
+            "name": "param",
+            "text": "mobileView"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "mobileView",
+      "methodName": "watchMobileView"
+    }]; }
+}

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

@@ -0,0 +1,72 @@
+import { fullscreenStoryDecorator, generateStoryElement } from "../../utils";
+import Docs from "./flip-app-layout.mdx";
+export default {
+  argTypes: {
+    appBarMedia: {
+      description: "Displayed above the content area, if the navigation area is present. Otherwise replaced by the app name.",
+    },
+    appName: {
+      description: "Displayed above the navigation area, if present. Otherwise displayed above the content area.",
+    },
+    heading: {
+      description: "Displayed above the content area, if the navigation area is present. Otherwise replaced by the app name.",
+    },
+    subheading: {
+      description: "Displayed above the content area, if the navigation area is present. Otherwise replaced by the app name.",
+    },
+    transitionStyle: {
+      control: "select",
+      options: ["none", "slides", "dialog"],
+    },
+  },
+  component: "flip-app-layout",
+  decorators: [fullscreenStoryDecorator],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+    layout: "fullscreen",
+  },
+  title: "Components/FlipAppLayout",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-app-layout", args);
+  element.innerHTML = `
+    <flip-resource-list label="Items" slot="navigation">
+      <flip-resource-list-item description="With a description" label="This is a resource item" class="item" media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></flip-avatar>"></flip-resource-list-item>
+      <flip-resource-list-item description="With a description" label="This is a resource item" class="item" media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></flip-avatar>"></flip-resource-list-item>
+      <flip-resource-list-item description="With a description" label="This is a resource item" class="item" media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/1027/144/144&quot;></flip-avatar>"></flip-resource-list-item>
+    </flip-resource-list>
+    <flip-button
+      hide-label
+      icon="<flip-icon-settings></flip-icon-settings>"
+      label="Settings"
+      slot="navigation-controls"
+    ></flip-button>
+    <div slot="app-bar-controls">
+      <flip-button hide-label class="info-button" icon="<flip-icon-info></flip-icon-info>" label="More information"></flip-button>
+    </div>
+    <div slot="content"></div>
+    <div slot="sidebar"></div>
+  `;
+  element.querySelector(".info-button").addEventListener("click", () => {
+    element.changeMobileView("sidebar");
+  });
+  element.querySelectorAll(".item").forEach((el) => {
+    el.addEventListener("click", () => {
+      element.changeMobileView("body");
+    });
+  });
+  return element;
+};
+export const FlipAppLayout = Template.bind({});
+FlipAppLayout.args = {
+  appBarMedia: '<flip-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" variant="square"></flip-avatar>',
+  appName: "App Name",
+  ctaIcon: "<flip-icon-add></flip-icon-add>",
+  ctaLabel: "Call to action",
+  heading: "Heading",
+  navigationLabel: "Items",
+  sidebarHeading: "Sidebar Heading",
+  subheading: "Subheading",
+};

package/dist/collection/components/flip-autocomplete/flip-autocomplete.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.autocomplete--inactive .autocomplete__listbox-container {
+    display: none;
+  }
+
+.autocomplete__listbox-container {
+  position: fixed;
+  z-index: var(--s-z-40);
+  overflow: hidden;
+  border-radius: var(--s-border-radius-sm);
+  background-color: var(--s-surface-overlay-default);
+  box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);
+}
+
+.autocomplete__spinner {
+  display: flex;
+  padding: var(--s-space-16);
+  justify-content: center;
+  align-items: center;
+}