npm - @getflip/swirl-components - Versions diffs - 0.0.0-new-shell-20231128124118 - Mend

@getflip/swirl-components 0.0.0-new-shell-20231128124118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2580) hide show

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js ADDED Viewed

@@ -0,0 +1,580 @@
+import { h, Host, } from "@stencil/core";
+import classnames from "classnames";
+import { isMobileViewport } from "../../utils";
+/**
+ * @slot content - Main content area
+ * @slot navigation - The navigation area content
+ * @slot navigation-controls - Controls for the navigation header
+ * @slot navigation-mobile-menu-button - Used to add a mobile shell layout menu button to navigation
+ * @slot app-bar - The app bar contents
+ * @slot custom-app-bar-back-button - Replaces the mobile default back button of the content app bar
+ * @slot app-bar-mobile-menu-button - Used to add a mobile shell layout menu button to the app bar
+ * @slot banner - Used to show a banner below the app bar
+ * @slot sidebar - Content of the right sidebar
+ */
+export class SwirlAppLayout {
+  constructor() {
+    this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    };
+    this.onCtaClick = (event) => {
+      this.ctaClick.emit(event);
+    };
+    this.onNavigationBackButtonClick = (event) => {
+      this.navigationBackButtonClick.emit(event);
+    };
+    this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    };
+    this.appName = undefined;
+    this.backToNavigationViewButtonLabel = "Back to navigation";
+    this.ctaIcon = undefined;
+    this.ctaLabel = undefined;
+    this.hideAppBar = undefined;
+    this.navigationBackButtonLabel = "Go back";
+    this.navigationLabel = undefined;
+    this.showNavigationBackButton = undefined;
+    this.sidebarCloseButtonLabel = "Close sidebar";
+    this.sidebarHeading = undefined;
+    this.transitionStyle = "slides";
+    this.hasCustomAppBarBackButton = undefined;
+    this.hasNavigation = undefined;
+    this.hasSidebar = undefined;
+    this.mobileView = "navigation";
+    this.sidebarActive = undefined;
+    this.sidebarClosing = undefined;
+    this.transitioningFrom = undefined;
+    this.transitioningTo = undefined;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCustomAppBarBackButtonStatus();
+      this.updateNavigationStatus();
+      this.updateSidebarStatus();
+    });
+    this.mutationObserver.observe(this.el, { childList: true });
+    queueMicrotask(() => {
+      this.updateCustomAppBarBackButtonStatus();
+      this.updateSidebarStatus();
+      this.updateNavigationStatus();
+      this.checkMobileView();
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.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;
+    let delay = 0;
+    if (this.transitionStyle === "slides") {
+      delay = 400;
+    }
+    else if (this.transitionStyle === "dialog") {
+      delay = 300;
+    }
+    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"]'));
+  }
+  updateCustomAppBarBackButtonStatus() {
+    this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
+  }
+  updateSidebarStatus() {
+    this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+  }
+  render() {
+    const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+      this.hasNavigation &&
+      !this.hasCustomAppBarBackButton;
+    const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+    const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
+    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-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
+      "app-layout--has-app-bar-controls": hasAppBarControls,
+      "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--hide-app-bar": this.hideAppBar,
+      "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" }, h("span", { class: "app-layout__navigation-mobile-menu-button" }, h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, 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": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { class: "app-layout__app-bar" }, h("span", { class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
+        ? "<swirl-icon-close></swirl-icon-close>"
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+  }
+  static get is() { return "swirl-app-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-app-layout.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-app-layout.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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
+      },
+      "hideAppBar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-app-bar",
+        "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
+      },
+      "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 {
+      "hasCustomAppBarBackButton": {},
+      "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": "SwirlAppLayoutMobileView",
+          "resolved": "\"body\" | \"navigation\" | \"sidebar\"",
+          "references": {
+            "SwirlAppLayoutMobileView": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx"
+            }
+          }
+        }
+      }, {
+        "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: SwirlAppLayoutMobileView, transition?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "mobileView"
+                }],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SwirlAppLayoutMobileView": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx"
+            }
+          },
+          "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"
+      }];
+  }
+}