@getflip/swirl-components 0.61.0 → 0.62.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-25T08:01:07",
+  "timestamp": "2023-05-25T08:49:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.0.0",
@@ -4033,7 +4033,32 @@
       "encapsulation": "shadow",
       "tag": "swirl-console-layout",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "content - The main content"
+        },
+        {
+          "name": "slot",
+          "text": "content-header-tools - Button positioned next to the heading"
+        },
+        {
+          "name": "slot",
+          "text": "heading - The main content's heading (only rendered if \"heading\" prop is not set)."
+        },
+        {
+          "name": "slot",
+          "text": "navigation - The main navigation"
+        },
+        {
+          "name": "slot",
+          "text": "overlays - Overlays like dialogs, modals and toasts"
+        },
+        {
+          "name": "slot",
+          "text": "user - The signed in user information at the bottom of the sidebar"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -4082,8 +4107,8 @@
               "type": "string"
             }
           ],
-          "optional": false,
-          "required": true
+          "optional": true,
+          "required": false
         },
         {
           "name": "helpButonLabel",
@@ -4283,7 +4308,32 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "content",
+          "docs": "The main content"
+        },
+        {
+          "name": "content-header-tools",
+          "docs": "Button positioned next to the heading"
+        },
+        {
+          "name": "heading",
+          "docs": "The main content's heading (only rendered if \"heading\" prop is not set)."
+        },
+        {
+          "name": "navigation",
+          "docs": "The main navigation"
+        },
+        {
+          "name": "overlays",
+          "docs": "Overlays like dialogs, modals and toasts"
+        },
+        {
+          "name": "user",
+          "docs": "The signed in user information at the bottom of the sidebar"
+        }
+      ],
       "parts": [],
       "dependents": [],
       "dependencies": [

package/dist/cjs/swirl-console-layout.cjs.entry.js

@@ -122,7 +122,7 @@ const SwirlConsoleLayout = class {
         ? "<swirl-icon-close></swirl-icon-close>"
         : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
         ? this.hideNavigationButtonLabel
-        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, index.h("header", { class: "console-layout__content-header" }, this.showBackButton && (index.h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), index.h("div", { class: "console-layout__heading-container" }, index.h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), index.h("div", { class: "console-layout__content-header-tools" }, index.h("slot", { name: "content-header-tools" }))), index.h("div", { class: "console-layout__integration" }, index.h("slot", { name: "content" }))), index.h("div", { class: "console-layout__overlays" }, index.h("slot", { name: "overlays" }))))));
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, index.h("header", { class: "console-layout__content-header" }, this.showBackButton && (index.h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (index.h("div", { class: "console-layout__heading-container" }, index.h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (index.h("div", { class: "console-layout__heading-container" }, index.h("slot", { name: "heading" }))), index.h("div", { class: "console-layout__content-header-tools" }, index.h("slot", { name: "content-header-tools" }))), index.h("div", { class: "console-layout__integration" }, index.h("slot", { name: "content" }))), index.h("div", { class: "console-layout__overlays" }, index.h("slot", { name: "overlays" }))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/components/swirl-console-layout/swirl-console-layout.js

@@ -1,6 +1,14 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { isMobileViewport } from "../../utils";
+/**
+ * @slot content - The main content
+ * @slot content-header-tools - Button positioned next to the heading
+ * @slot heading - The main content's heading (only rendered if "heading" prop is not set).
+ * @slot navigation - The main navigation
+ * @slot overlays - Overlays like dialogs, modals and toasts
+ * @slot user - The signed in user information at the bottom of the sidebar
+ */
 export class SwirlConsoleLayout {
   constructor() {
     this.onBackButtonClick = (event) => {
@@ -112,7 +120,7 @@ export class SwirlConsoleLayout {
         ? "<swirl-icon-close></swirl-icon-close>"
         : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
         ? this.hideNavigationButtonLabel
-        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), h("div", { class: "console-layout__heading-container" }, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), h("div", { class: "console-layout__content-header-tools" }, h("slot", { name: "content-header-tools" }))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { class: "console-layout__heading-container" }, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { class: "console-layout__heading-container" }, h("slot", { name: "heading" }))), h("div", { class: "console-layout__content-header-tools" }, h("slot", { name: "content-header-tools" }))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
   }
   static get is() { return "swirl-console-layout"; }
   static get encapsulation() { return "shadow"; }
@@ -171,8 +179,8 @@ export class SwirlConsoleLayout {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""