Main
Sidebar
-
-
+ (this.headerEl = el)}
+ >
+ {this.collapsibleNavigation && (
+
+ )}
{this.showNavigationBackButton && (
)}
+ {this.collapsibleNavigation &&
+ this.navExpansionState !== "expanded" && (
+
+
+ ;
+
+ componentDidLoad() {
+ this.activate.emit(this.el);
+ }
+
+ download = async (event: Event) => {
+ event.preventDefault();
+
+ const fileName = this.fileName || this.file.split("/").pop();
+ const file = await fetch(this.file);
+
+ saveAs(await file.blob(), fileName);
+ };
+
+ render() {
+ return (
+
+
+
+ {this.fileName}
+
+ )}
+ {!this.disableDownload && (
+
+
+ );
+ }
+}
diff --git a/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.tsx b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.tsx
index 944248c7d..1fbf1fc9a 100644
--- a/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.tsx
+++ b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.tsx
@@ -51,11 +51,11 @@ export class SwirlFileViewerPdf {
@Prop() workerSrc?: string = "/pdfjs/pdf.worker.min.js";
@Prop() zoom?: SwirlFileViewerPdfZoom = 1;
+ @State() currentPage: number = null;
@State() doc: PDFDocumentProxy;
@State() error: boolean;
@State() loading: boolean = true;
@State() renderedPages: number[] = [];
- @State() scrolledDown: boolean = false;
@State() singlePageModePage: number = 1;
@State() visiblePages: number[] = [];
@@ -80,7 +80,6 @@ export class SwirlFileViewerPdf {
componentDidRender() {
this.updateVisiblePages();
- this.determineScrollStatus();
}
disconnectedCallback() {
@@ -92,16 +91,12 @@ export class SwirlFileViewerPdf {
this.visiblePages = [];
this.renderedPages = [];
await this.updateVisiblePages();
-
- this.determineScrollStatus();
}
@Watch("file")
async watchProps() {
await this.getPages();
await this.updateVisiblePages();
-
- this.determineScrollStatus();
}
@Watch("viewMode")
@@ -110,8 +105,6 @@ export class SwirlFileViewerPdf {
this.visiblePages = [];
this.renderedPages = [];
await this.updateVisiblePages();
-
- this.determineScrollStatus();
});
}
@@ -123,8 +116,6 @@ export class SwirlFileViewerPdf {
this.visiblePages = [];
this.renderedPages = [];
await this.updateVisiblePages();
-
- this.determineScrollStatus();
});
}
@@ -337,28 +328,45 @@ export class SwirlFileViewerPdf {
);
let visiblePages: number[] = [];
+ let currentPage = null;
if (this.singlePageMode) {
visiblePages = [this.singlePageModePage];
+ currentPage = this.singlePageModePage;
+ } else if (forPrint) {
+ visiblePages = pages.map((page) => +page.dataset.pageNumber);
} else {
- visiblePages = forPrint
- ? pages.map((page) => +page.dataset.pageNumber)
- : pages
- .filter((page) => getVisibleHeight(page, this.scrollContainer) > 0)
- .map((page) => +page.dataset.pageNumber);
-
- const visiblePagesDidNotChanged =
- this.visiblePages.length === visiblePages.length &&
- this.visiblePages.every((pageNumber) =>
- visiblePages.includes(pageNumber)
+ const visiblePagesVisibleHeight = pages
+ .map((page) => ({
+ pageNumber: +page.dataset.pageNumber,
+ visibleHeight: getVisibleHeight(page, this.scrollContainer),
+ }))
+ .filter(({ visibleHeight }) => visibleHeight > 0);
+
+ visiblePages = visiblePagesVisibleHeight.map((page) => page.pageNumber);
+
+ if (visiblePagesVisibleHeight.length > 0) {
+ const firstMostVisiblePage = visiblePagesVisibleHeight.reduce(
+ (previous, current) =>
+ current.visibleHeight > previous.visibleHeight ? current : previous
);
- if (visiblePagesDidNotChanged) {
- return;
+ currentPage = firstMostVisiblePage.pageNumber;
}
}
+ const visiblePagesDidNotChanged =
+ this.visiblePages.length === visiblePages.length &&
+ this.visiblePages.every((pageNumber) =>
+ visiblePages.includes(pageNumber)
+ );
+
+ if (visiblePagesDidNotChanged && this.currentPage === currentPage) {
+ return;
+ }
+
this.visiblePages = visiblePages;
+ this.currentPage = currentPage;
await this.renderVisiblePages(forPrint);
@@ -466,17 +474,6 @@ export class SwirlFileViewerPdf {
this.recentScrollPosition.x * this.scrollContainer?.scrollWidth;
}
- private determineScrollStatus = () => {
- const scrolledDown =
- Math.ceil(
- this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight
- ) >= this.scrollContainer?.scrollHeight;
-
- if (scrolledDown !== this.scrolledDown) {
- this.scrolledDown = scrolledDown;
- }
- };
-
private storeRecentScrollPosition = () => {
this.recentScrollPosition = {
x:
@@ -496,7 +493,6 @@ export class SwirlFileViewerPdf {
private onScroll = debounce(() => {
this.updateVisiblePages();
- this.determineScrollStatus();
this.storeRecentScrollPosition();
}, 60);
@@ -504,11 +500,6 @@ export class SwirlFileViewerPdf {
const showPagination =
!this.error && !this.loading && this.visiblePages.length > 0;
- const currentPage =
- this.scrolledDown && !this.singlePageMode
- ? this.pages.length - 1
- : this.visiblePages[0];
-
const showSpinner = this.loading;
const className = classnames(
@@ -578,7 +569,8 @@ export class SwirlFileViewerPdf {
id="pagination"
part="file-viewer-pdf__pagination"
>
- {currentPage} / {this.doc.numPages}
+ {this.currentPage} /{" "}
+ {this.doc.numPages}
)}
{showSpinner && (
diff --git a/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.css b/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.css
index 351567e1c..7b4a804d2 100644
--- a/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.css
+++ b/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.css
@@ -42,6 +42,26 @@
line-height: var(--s-line-height-sm);
}
}
+
+ .form-control--font-size-sm {
+ & .form-control__label-text {
+ font-size: var(--s-font-size-sm);
+ }
+
+ & .form-control__description {
+ font-size: var(--s-font-size-sm);
+ }
+ }
+
+ &.form-control--font-size-base {
+ & .form-control__label-text {
+ font-size: var(--s-font-size-base);
+
+ @media (--from-desktop-without-touch) {
+ font-size: var(--s-font-size-base);
+ }
+ }
+ }
}
&:not(.form-control--has-value).form-control--is-select {
@@ -62,6 +82,16 @@
line-height: var(--s-line-height-sm);
}
}
+
+ &.form-control--font-size-base {
+ & .form-control__label-text {
+ font-size: var(--s-font-size-base);
+
+ @media (--from-desktop-without-touch) {
+ font-size: var(--s-font-size-base);
+ }
+ }
+ }
}
@media (--from-desktop-without-touch) {
@@ -123,6 +153,16 @@
max-width: calc(100% - 6rem);
}
+ &.form-control--font-size-base {
+ & .form-control__label-text {
+ font-size: var(--s-font-size-base);
+
+ @media (--from-desktop-without-touch) {
+ font-size: var(--s-font-size-base);
+ }
+ }
+ }
+
@media (--from-desktop-without-touch) {
--swirl-text-input-placeholder-size: var(--s-font-size-sm);
}
@@ -135,6 +175,7 @@
& .form-control__tooltip {
display: none;
+ color: var(--s-icon-default);
@media (--from-desktop-without-touch) {
display: flex;
margin-left: var(--s-space-4);
@@ -275,6 +316,12 @@
gap: var(--s-space-2);
}
+.form-control__secondary-label {
+ font-weight: var(--s-font-weight-normal);
+ color: var(--s-text-subdued);
+ margin-left: var(--s-space-4);
+}
+
.form-control__label-text {
position: absolute;
right: var(--s-space-16);
diff --git a/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.spec.tsx b/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.spec.tsx
index 2b9e6c786..a2b894f94 100644
--- a/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.spec.tsx
@@ -20,7 +20,7 @@ describe("swirl-form-control", () => {
expect(page.root).toEqualHtml(`
-
(this.contentEl = el)}
+ >
)}
diff --git a/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.css b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.css
new file mode 100644
index 000000000..f28d40df3
--- /dev/null
+++ b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.css
@@ -0,0 +1,17 @@
+:host {
+ display: inline-flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ pointer-events: auto;
+
+ & * {
+ box-sizing: border-box;
+ }
+}
+
+.file-viewer-fallback__icon::part(icon) {
+ height: 2.875rem;
+ width: 2.875rem;
+}
diff --git a/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.tsx b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.tsx
new file mode 100644
index 000000000..d6ea05ed5
--- /dev/null
+++ b/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.tsx
@@ -0,0 +1,68 @@
+import {
+ Component,
+ Element,
+ Event,
+ EventEmitter,
+ h,
+ Host,
+ Prop,
+} from "@stencil/core";
+import { saveAs } from "file-saver";
+
+@Component({
+ shadow: true,
+ styleUrl: "swirl-file-viewer-fallback.css",
+ tag: "swirl-file-viewer-fallback",
+})
+export class SwirlFileViewerFallback {
+ @Element() el: HTMLElement;
+
+ @Prop() disableDownload?: boolean;
+ @Prop() downloadButtonLabel?: string = "Download";
+ @Prop() fileName?: string;
+ @Prop() file!: string;
+
+ @Event() activate: EventEmitter
+
- {this.loading !== "intersecting" || this.inViewport ? (
+ {this.loading !== "intersecting" ||
+ this.inViewport ||
+ this.gifPaused ? (
![{this.alt}]()
(this.img = el)}
- src={this.src}
+ src={this.computedSrc}
/>
) : (
)}
+
+ {this.showGifControls && (
+
+
+
+ )}
{this.loaded &&
!this.error &&
this.icon &&
diff --git a/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.css b/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.css
index 12f164551..9efc7f59e 100644
--- a/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.css
+++ b/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.css
@@ -25,9 +25,10 @@
}
.image-grid--item-count-3 {
- grid-template-columns: calc(100% / 3 * 2 - var(--space-2) / 2) calc(
+ grid-template-columns: calc(100% / 3 * 2) calc(
100% / 3 - var(--s-space-2) / 2
);
+ grid-template-rows: calc(50% - var(--s-space-2) / 2);
& ::slotted(*:nth-child(1)) {
grid-column-start: 1;
diff --git a/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.stories.ts b/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.stories.ts
index 02b37e4c1..4278b593c 100644
--- a/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.stories.ts
+++ b/packages/swirl-components/src/components/swirl-image-grid/swirl-image-grid.stories.ts
@@ -25,8 +25,8 @@ export const SwirlImageGrid = Template.bind({});
SwirlImageGrid.args = {
aspectRatio: "16 / 9",
slot: `
-
+
+ `,
+ });
+
+ // wait for animation
+ await new Promise((resolve) => setTimeout(resolve, 300));
+
+ const slides = page.rootInstance.slides;
+
+ page.root.shadowRoot
+ .querySelector("#lightbox")
+ .dispatchEvent(
+ new Event("touchStart", { touches: [{ clientX: 0 } as Touch] } as any)
+ );
+
+ page.root.shadowRoot
+ .querySelector("#lightbox")
+ .dispatchEvent(
+ new Event("touchMove", { touches: [{ clientX: -100 } as Touch] } as any)
+ );
+
+ // wait for animation
+ await new Promise((resolve) => setTimeout(resolve, 300));
+
+ expect(slides[0].style.transform).toBe("translate3d(-0%, 0, 0)");
+ });
+
it("fires slide change events", async () => {
const page = await newSpecPage({
components: [SwirlLightbox],
diff --git a/packages/swirl-components/src/components/swirl-lightbox/swirl-lightbox.tsx b/packages/swirl-components/src/components/swirl-lightbox/swirl-lightbox.tsx
index 83c592cdb..376f1812c 100644
--- a/packages/swirl-components/src/components/swirl-lightbox/swirl-lightbox.tsx
+++ b/packages/swirl-components/src/components/swirl-lightbox/swirl-lightbox.tsx
@@ -43,6 +43,7 @@ export class SwirlLightbox {
@State() isOpen = false;
@State() slides: HTMLSwirlFileViewerElement[];
+ private containerObserver: MutationObserver;
private dragging: boolean = false;
private dragStartPosition: number;
private dragDelta: number;
@@ -66,6 +67,7 @@ export class SwirlLightbox {
disconnectedCallback() {
this.focusTrap?.deactivate();
this.unlockBodyScroll();
+ this.containerObserver?.disconnect();
}
@Watch("activeSlideIndex")
@@ -100,6 +102,31 @@ export class SwirlLightbox {
setTimeout(() => {
this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
allowOutsideClick: true,
+ checkCanFocusTrap: (containers) => {
+ this.containerObserver?.disconnect();
+
+ return new Promise((resolve) => {
+ const container = containers[0];
+
+ if (container.tabIndex !== -1) {
+ resolve();
+ return;
+ }
+
+ // wait for container to become focusable
+ this.containerObserver = new MutationObserver(() => {
+ if (container.tabIndex !== -1) {
+ this.containerObserver.disconnect();
+ resolve();
+ }
+ });
+
+ this.containerObserver.observe(container, {
+ attributes: true,
+ attributeFilter: ["tabindex"],
+ });
+ });
+ },
tabbableOptions: {
getShadowRoot: (node) => {
return node.shadowRoot;
@@ -269,6 +296,10 @@ export class SwirlLightbox {
}
private onPointerDown = (event: MouseEvent | TouchEvent) => {
+ if (this.slides.length <= 1) {
+ return;
+ }
+
this.dragging = true;
this.dragStartPosition =
@@ -280,6 +311,10 @@ export class SwirlLightbox {
};
private onPointerMove = async (event: MouseEvent | TouchEvent) => {
+ if (!this.dragging) {
+ return;
+ }
+
const isMultiTouch =
!(event instanceof MouseEvent) && event.touches.length > 1;
@@ -295,28 +330,30 @@ export class SwirlLightbox {
return;
}
- if (this.dragging) {
- event.preventDefault();
+ event.preventDefault();
- const deltaX =
- event instanceof MouseEvent
- ? event.clientX - this.dragStartPosition
- : event.touches[0].clientX - this.dragStartPosition;
+ const deltaX =
+ event instanceof MouseEvent
+ ? event.clientX - this.dragStartPosition
+ : event.touches[0].clientX - this.dragStartPosition;
- this.slides.forEach((slide) => {
- const pixelOffset =
- this.activeSlideIndex * slide.getBoundingClientRect().width;
+ this.slides.forEach((slide) => {
+ const pixelOffset =
+ this.activeSlideIndex * slide.getBoundingClientRect().width;
- this.dragDelta = deltaX;
+ this.dragDelta = deltaX;
- slide.style.transform = `translate3d(${
- (-pixelOffset + this.dragDelta) / 16
- }rem, 0, 0)`;
- });
- }
+ slide.style.transform = `translate3d(${
+ (-pixelOffset + this.dragDelta) / 16
+ }rem, 0, 0)`;
+ });
};
private onPointerUp = () => {
+ if (!this.dragging) {
+ return;
+ }
+
this.dragging = false;
this.dragStartPosition = undefined;
diff --git a/packages/swirl-components/src/components/swirl-menu/swirl-menu.css b/packages/swirl-components/src/components/swirl-menu/swirl-menu.css
index 0369107b9..db4de856d 100644
--- a/packages/swirl-components/src/components/swirl-menu/swirl-menu.css
+++ b/packages/swirl-components/src/components/swirl-menu/swirl-menu.css
@@ -50,7 +50,7 @@
}
}
- &:not(.menu--root) {
+ & :not(.menu--root) {
& .menu__menu {
z-index: 1;
max-width: 22.5rem;
diff --git a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.css b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.css
index a32fdc1df..23184809d 100644
--- a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.css
+++ b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.css
@@ -2,7 +2,7 @@
:host {
position: relative;
- display: inline-flex;
+ display: block;
width: 100%;
& * {
@@ -110,6 +110,16 @@
border-color: var(--s-icon-disabled);
background-color: var(--s-surface-overlay-default);
}
+
+ & .option-list-item__avatar {
+ filter: grayscale(100%);
+ }
+}
+
+.option-list-item--show-avatar {
+ & .option-list-item__avatar {
+ display: inline-flex;
+ }
}
.option-list-item__label-container {
@@ -144,6 +154,13 @@
}
}
+.option-list-item__avatar {
+ display: none;
+ width: 2.5rem;
+ height: 2.5rem;
+ flex-shrink: 0;
+}
+
.option-list-item__icon {
display: inline-flex;
width: 1.5rem;
diff --git a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.spec.tsx b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.spec.tsx
index e4686f1d3..78bd8d6a1 100644
--- a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.spec.tsx
@@ -24,6 +24,7 @@ describe("swirl-option-list-item", () => {
+
+ `,
+ });
+
+ expect(
+ page.root
+ .querySelector(".option-list-item__avatar")
+ .querySelector("swirl-avatar")
+ ).toBeDefined();
+ });
+
it("can be draggable", async () => {
const page = await newSpecPage({
components: [SwirlOptionListItem],
diff --git a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.stories.ts b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.stories.ts
index e5adbb57d..fa01d4ef8 100644
--- a/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.stories.ts
+++ b/packages/swirl-components/src/components/swirl-option-list-item/swirl-option-list-item.stories.ts
@@ -28,6 +28,10 @@ const Template = (args) => {
const element = generateStoryElement("swirl-option-list-item", args);
+ element.innerHTML = `
+
- {this.label && {this.label}}
+ {this.label && (
+
+ {this.label}
+ {this.tooltip && (
+
+
+ )}
+
+ )}
{this.description && (
{
-
+
diff --git a/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx b/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx
index 6436b227c..f396dea4a 100644
--- a/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx
+++ b/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx
@@ -11,6 +11,7 @@ import {
} from "@stencil/core";
import Sortable, { SortableEvent } from "sortablejs";
import { v4 as uuid } from "uuid";
+import { SwirlStackSpacing } from "../swirl-stack/swirl-stack";
@Component({
scoped: true,
@@ -28,6 +29,7 @@ export class SwirlResourceList {
@Prop() assistiveTextItemMoved?: string = "Item moved. New position:";
@Prop() controllingElement?: HTMLElement;
@Prop() label?: string;
+ @Prop() spacing?: SwirlStackSpacing = "0";
@State() assistiveText: string;
@State() listId = uuid();
@@ -355,6 +357,7 @@ export class SwirlResourceList {
id={this.listId}
ref={(el) => (this.gridEl = el)}
role="grid"
+ spacing={this.spacing}
>
diff --git a/packages/swirl-components/src/components/swirl-select/swirl-select.css b/packages/swirl-components/src/components/swirl-select/swirl-select.css
index d2b4a459f..1f71b1b07 100644
--- a/packages/swirl-components/src/components/swirl-select/swirl-select.css
+++ b/packages/swirl-components/src/components/swirl-select/swirl-select.css
@@ -61,12 +61,58 @@
}
}
+.select--standalone {
+ width: fit-content;
+
+ & .select__indicator {
+ position: relative;
+ top: auto;
+ right: auto;
+ cursor: pointer;
+ transform: none;
+ }
+
+ & .select__input {
+ padding-right: var(--s-space-8);
+ font-weight: var(--s-font-weight-medium);
+ cursor: pointer;
+ }
+
+ & .select__value-container {
+ width: min-content;
+ }
+}
+
.select--search-loading {
& .select__search-input {
padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));
}
}
+.select__resize-helper {
+ display: block;
+ width: auto;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ padding-right: calc(1.5rem + var(--s-space-8));
+ padding-right: var(--s-space-8);
+ font: inherit;
+ font-weight: var(--s-font-weight-medium);
+ line-height: var(--s-line-height-base);
+ text-align: left;
+ white-space: pre;
+ white-space: pre;
+ vertical-align: top;
+ user-select: none;
+ opacity: 0;
+
+ @media (--from-desktop-without-touch) {
+ font-size: var(--s-font-size-sm);
+ line-height: var(--s-line-height-sm);
+ }
+}
+
.select__input {
display: block;
overflow: hidden;
diff --git a/packages/swirl-components/src/components/swirl-select/swirl-select.spec.tsx b/packages/swirl-components/src/components/swirl-select/swirl-select.spec.tsx
index c21f210c8..430ef4657 100644
--- a/packages/swirl-components/src/components/swirl-select/swirl-select.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-select/swirl-select.spec.tsx
@@ -31,11 +31,13 @@ describe("swirl-select", () => {
-
+
+
+
-
diff --git a/packages/swirl-components/src/components/swirl-select/swirl-select.tsx b/packages/swirl-components/src/components/swirl-select/swirl-select.tsx
index dce6ecff5..1a60b39b6 100644
--- a/packages/swirl-components/src/components/swirl-select/swirl-select.tsx
+++ b/packages/swirl-components/src/components/swirl-select/swirl-select.tsx
@@ -40,6 +40,7 @@ export class SwirlSelect implements SwirlFormInput {
@Prop() searchLoading?: boolean;
@Prop() searchPlaceholder?: string;
@Prop() selectId?: string = Math.round(Math.random() * 1000000).toString();
+ @Prop() standalone?: boolean;
@Prop() swirlAriaDescribedby?: string;
@Prop({ mutable: true, reflect: true }) value?: string[];
@Prop() withSearch?: boolean;
@@ -94,6 +95,8 @@ export class SwirlSelect implements SwirlFormInput {
}
private select = (event: CustomEvent) => {
+ event.stopPropagation();
+
this.value = event.detail;
this.valueChange.emit(this.value);
@@ -158,8 +161,8 @@ export class SwirlSelect implements SwirlFormInput {
this.searchChange.emit((event.target as HTMLInputElement).value);
};
- render() {
- const label = Boolean(this.value)
+ private getValueLabel() {
+ return Boolean(this.value)
? this.value
?.map(
(value) =>
@@ -167,6 +170,10 @@ export class SwirlSelect implements SwirlFormInput {
)
.join(", ")
: "";
+ }
+
+ render() {
+ const label = this.getValueLabel();
const ariaInvalid =
this.invalid === true || this.invalid === false
@@ -177,10 +184,11 @@ export class SwirlSelect implements SwirlFormInput {
HTMLSwirlFormControlElement | undefined
>("swirl-form-control");
- const offset =
- formControl?.inline || formControl?.labelPosition === "outside"
- ? -12
- : -16;
+ const offset = this.standalone
+ ? [-8, 0]
+ : formControl?.inline || formControl?.labelPosition === "outside"
+ ? [0, -12]
+ : [0, -16];
const className = classnames(
"select",
@@ -190,6 +198,7 @@ export class SwirlSelect implements SwirlFormInput {
"select--inline": this.inline,
"select--multi": this.multiSelect,
"select--search-loading": this.searchLoading,
+ "select--standalone": this.standalone,
}
);
@@ -200,17 +209,24 @@ export class SwirlSelect implements SwirlFormInput {
swirlPopover={this.swirlPopover}
setAriaAttributes={false}
>
- (this.input = el)}
- type="text"
- value={label}
- >
+
+ {this.standalone && (
+
+ )}
+ (this.input = el)}
+ type="text"
+ value={label}
+ >
+
{this.value
@@ -229,9 +245,13 @@ export class SwirlSelect implements SwirlFormInput {
{this.open ? (
- {
class="select__popover"
id={`select-options-${this.selectId}`}
label={this.label}
- offset={[0, offset]}
+ offset={offset}
onPopoverClose={this.onClose}
onPopoverOpen={this.onOpen}
ref={(el) => (this.swirlPopover = el)}
- useContainerWidth="swirl-form-control"
+ useContainerWidth={this.standalone ? false : "swirl-form-control"}
>
{this.withSearch && (
-
+ ;
@Event() skipLinkClick: EventEmitter;
+ @State() isDesktopViewport: boolean = true;
@State() mobileNavigationActive?: boolean;
@State() navigationCollapsed?: boolean;
+ @State() secondaryNavCollapsed?: boolean;
+ @State() secondaryNavView?: SwirlShellLayoutSecondaryNavView = "list";
+ @State() sidebarScrollState = {
+ scrollable: false,
+ scrolledToTop: false,
+ };
private focusTrap: focusTrap.FocusTrap;
+ private mainNavItems: HTMLSwirlShellNavigationItemElement[];
private navElement: HTMLElement;
+ private navMutationObserver: MutationObserver;
+ private secondaryNavItems: HTMLSwirlShellNavigationItemElement[];
+ private sidebarContentEl: HTMLElement;
componentWillLoad() {
+ this.isDesktopViewport = isDesktopViewport();
+ this.collectNavItems();
+
const restoredSidebarState =
localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
@@ -70,6 +100,8 @@ export class SwirlShellLayout {
localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
this.navigationCollapsed = restoredNavigationCollapseState;
+
+ this.restoreSecondaryNavState();
}
componentDidLoad() {
@@ -81,6 +113,22 @@ export class SwirlShellLayout {
},
},
});
+
+ this.collectNavItems();
+
+ this.navMutationObserver = new MutationObserver(() => {
+ this.collectNavItems();
+ this.setSecondaryNavItemsTiled();
+ });
+
+ this.navMutationObserver.observe(this.navElement, {
+ childList: true,
+ subtree: true,
+ });
+
+ queueMicrotask(() => {
+ this.updateSidebarScrollState();
+ });
}
componentDidRender() {
@@ -89,6 +137,7 @@ export class SwirlShellLayout {
disconnectedCallback() {
this.focusTrap?.deactivate();
+ this.navMutationObserver?.disconnect();
}
@Listen("keydown", { target: "window" })
@@ -98,6 +147,11 @@ export class SwirlShellLayout {
}
}
+ @Watch("enableSecondaryNavGridLayout")
+ watchEnableSecondaryNavGridLayout() {
+ this.restoreSecondaryNavState();
+ }
+
@Watch("mobileNavigationActive")
watchMobileNavigationState() {
if (this.mobileNavigationActive) {
@@ -116,6 +170,8 @@ export class SwirlShellLayout {
NAVIGATION_COLLAPSE_STORAGE_KEY,
String(this.navigationCollapsed)
);
+
+ this.toggleNavItemLabels();
}
@Watch("sidebarActive")
@@ -123,20 +179,75 @@ export class SwirlShellLayout {
localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
}
+ @Listen("resize", { target: "window" })
+ onWindowResize() {
+ if (this.isDesktopViewport !== isDesktopViewport()) {
+ this.isDesktopViewport = isDesktopViewport();
+ this.collectNavItems();
+ }
+ }
+
/**
* Opens the mobile navigation.
*/
@Method()
async showMobileNavigation() {
this.mobileNavigationActive = true;
+ this.collectNavItems();
}
+ collectNavItems = () => {
+ this.mainNavItems = Array.from(
+ this.el.querySelectorAll(
+ "swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item"
+ )
+ );
+
+ this.secondaryNavItems = Array.from(
+ this.el.querySelectorAll(
+ "swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"
+ )
+ );
+
+ this.toggleNavItemLabels();
+ this.setSecondaryNavItemsTiled();
+ };
+
+ toggleSecondaryNavView = (event: Event) => {
+ event.stopPropagation();
+
+ if (this.secondaryNavView === "grid") {
+ this.secondaryNavView = "list";
+ } else {
+ this.secondaryNavView = "grid";
+ }
+
+ this.setSecondaryNavItemsTiled();
+
+ localStorage.setItem(
+ SECONDARY_NAVIGATION_VIEW_STORAGE_KEY,
+ String(this.secondaryNavView)
+ );
+ };
+
+ toggleSecondaryNavCollapse = (event: Event) => {
+ event.stopPropagation();
+
+ this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
+
+ localStorage.setItem(
+ SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY,
+ String(this.secondaryNavCollapsed)
+ );
+ };
+
/**
* Hides the mobile navigation.
*/
@Method()
async hideMobileNavigation() {
this.mobileNavigationActive = false;
+ this.toggleNavItemLabels();
}
private onNavigationToggleClick = () => {
@@ -147,15 +258,78 @@ export class SwirlShellLayout {
this.hideMobileNavigation();
};
+ private toggleNavItemLabels() {
+ [...this.secondaryNavItems, ...this.mainNavItems].forEach((item) => {
+ item.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
+ });
+ }
+
+ private setSecondaryNavItemsTiled() {
+ this.secondaryNavItems.forEach((item) => {
+ item.tiled =
+ this.enableSecondaryNavGridLayout &&
+ (this.secondaryNavView === "grid" ||
+ (this.navigationCollapsed && this.isDesktopViewport));
+ });
+ }
+
+ private restoreSecondaryNavState() {
+ if (this.enableSecondaryNavGridLayout) {
+ const restoredSecondaryNavigationCollapseState =
+ localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
+ "true";
+
+ this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
+
+ const restoredSecondaryNavigationViewState = localStorage.getItem(
+ SECONDARY_NAVIGATION_VIEW_STORAGE_KEY
+ );
+
+ this.secondaryNavView =
+ restoredSecondaryNavigationViewState as SwirlShellLayoutSecondaryNavView;
+ }
+ }
+
+ private updateSidebarScrollState() {
+ const newSidebarScrollState = {
+ scrollable:
+ this.sidebarContentEl.scrollHeight > this.sidebarContentEl.clientHeight,
+ scrolledToTop: this.sidebarContentEl.scrollTop === 0,
+ };
+
+ if (
+ Object.keys(newSidebarScrollState).some(
+ (key) => newSidebarScrollState[key] !== this.sidebarScrollState[key]
+ )
+ ) {
+ this.sidebarScrollState = newSidebarScrollState;
+ }
+ }
+
+ private onSidebarScroll = debounce(() => {
+ this.updateSidebarScrollState();
+ }, 16);
+
render() {
const hasSidebarToggleBadgeWithLabel =
this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
+ const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
+
+ const hasSecondaryNav = Boolean(
+ this.el.querySelector("[slot='secondary-nav']")
+ );
+
const className = classnames("shell-layout", {
"shell-layout--branded-header": this.brandedHeader,
+ "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
+ "shell-layout--has-secondary-nav": hasSecondaryNav,
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
- "shell-layout--navigation-collapsed": this.navigationCollapsed,
+ "shell-layout--navigation-collapsed": mainNavCollapsed,
"shell-layout--sidebar-active": this.sidebarActive,
+ "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
+ "shell-layout--sidebar-scrolled-to-top":
+ this.sidebarScrollState.scrolledToTop,
});
return (
@@ -170,16 +344,36 @@ export class SwirlShellLayout {
{this.skipLinkLabel}
@@ -277,7 +531,11 @@ export class SwirlShellLayout {
-
diff --git a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css
index 34fe9ed9f..2ef1d0150 100644
--- a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css
+++ b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css
@@ -12,6 +12,12 @@
}
.shell-navigation-item {
+ --swirl-app-icon-size: 1.5rem;
+ --swirl-shell-navigation-item-gradient: linear-gradient(
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.8)
+ );
+
position: relative;
display: flex;
width: 100%;
@@ -59,21 +65,119 @@
}
&.shell-navigation-item--boxed {
+ --swirl-app-icon-size: 2rem;
+
& .shell-navigation-item__icon {
- background-color: var(--s-background-default);
- border-color: var(--s-border-default);
+ overflow: hidden;
border-radius: var(--s-border-radius-sm);
- border-width: var(--s-border-width-default);
- border-style: solid;
+ background-color: var(--s-background-default);
+ box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);
+ }
+ }
+
+ &.shell-navigation-item--tiled {
+ --swirl-app-icon-size: 100%;
+
+ height: auto;
+ padding: 0;
+ align-items: start;
+ border-radius: var(--s-border-radius-base);
+ flex-direction: column;
+ container-type: inline-size;
+ gap: var(--s-space-8);
+
+ &:hover {
+ background-color: transparent;
+
+ & .shell-navigation-item__label {
+ text-decoration: underline;
+ }
+ }
+
+ & ::slotted(*) {
+ position: absolute;
+ top: var(--s-space-12);
+ left: var(--s-space-12);
+ }
+
+ & ::slotted(swirl-app-icon) {
+ position: inherit;
+ width: 100%;
+ height: 100%;
+ }
+
+ & .shell-navigation-item__icon {
overflow: hidden;
+ width: 100%;
+ min-width: 100%;
+ height: auto;
+ min-height: auto;
+ border-radius: var(--s-border-radius-base);
+ background-color: var(--s-surface-sunken-hovered);
+ aspect-ratio: 1;
}
- --swirl-app-icon-size: 2rem;
+ &.shell-navigation-item--gradient {
+ & .shell-navigation-item__icon {
+ &::after {
+ position: absolute;
+ display: inline-block;
+ width: 100%;
+ border-radius: var(--s-border-radius-base);
+ background-image: var(--swirl-shell-navigation-item-gradient);
+ content: "";
+ aspect-ratio: 1;
+ }
+ }
+ }
+
+ & .shell-navigation-item__badge {
+ position: absolute;
+ top: -0.375rem;
+ right: -0.375rem;
+ padding: var(--s-space-2);
+ }
+
+ & .shell-navigation-item__label {
+ display: -webkit-box;
+ overflow: hidden;
+ color: var(--s-text-default);
+ font-weight: var(--s-font-weight-semibold);
+ text-align: start;
+ white-space: normal;
+ text-overflow: unset;
+ overflow-wrap: anywhere;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ & .shell-navigation-item__label--inline {
+ position: absolute;
+ bottom: var(--s-space-12);
+ left: var(--s-space-12);
+ margin-right: var(--s-space-12);
+
+ &.shell-navigation-item__label--light {
+ color: rgba(242, 242, 242, 1);
+ }
+
+ &.shell-navigation-item__label--dark {
+ color: rgb(25, 25, 25);
+ }
+ }
}
&.shell-navigation-item--active {
background-color: var(--s-surface-sunken-hovered);
+ & .shell-navigation-item__icon {
+ color: var(--s-icon-highlight);
+ }
+
+ & .shell-navigation-item__label {
+ color: var(--s-text-highlight);
+ }
+
& .shell-navigation-item__badge {
--swirl-badge-border-color: var(--s-surface-sunken-hovered);
}
@@ -102,10 +206,10 @@
.shell-navigation-item__icon {
display: inline-flex;
+ width: 2rem;
min-width: 2rem;
- min-height: 2rem;
height: 2rem;
- width: 2rem;
+ min-height: 2rem;
justify-content: center;
align-items: center;
}
@@ -135,6 +239,10 @@
padding: var(--s-space-2);
}
+ .shell-navigation-item--gradient .shell-navigation-item__icon {
+ --swirl-shell-navigation-item-gradient: none;
+ }
+
.shell-navigation-item__badge--dot {
top: var(--s-space-8);
right: var(--s-space-8);
diff --git a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.spec.tsx b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.spec.tsx
index 15bd4650d..8ab25512f 100644
--- a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.spec.tsx
@@ -15,14 +15,16 @@ describe("swirl-shell-navigation-item", () => {
expect(page.root).toMatchInlineSnapshot(`
-
+
+
+
@@ -39,9 +41,9 @@ describe("swirl-shell-navigation-item", () => {
});
expect(
- page.root.shadowRoot.children[0].classList.contains(
- "shell-navigation-item--active"
- )
+ page.root.shadowRoot
+ .querySelector(".shell-navigation-item")
+ .classList.contains("shell-navigation-item--active")
).toBeTruthy();
});
diff --git a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.ts b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.ts
index d18564c40..ff0db7f99 100644
--- a/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.ts
+++ b/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.ts
@@ -16,9 +16,11 @@ const Template = (args) => {
const element = generateStoryElement("swirl-shell-navigation-item", args);
element.innerHTML = `
-
-
-
-
- {this.badgeLabel !== undefined && this.badgeLabel !== null && (
-
+
+
+ {!this.hideLabel ? (
+ {this.label}
+ ) : (
+
+ {this.label}
+
+ )}
+ {this.badgeLabel !== undefined && this.badgeLabel !== null && (
+
+
);
}
diff --git a/packages/swirl-components/src/components/swirl-table-cell/swirl-table-cell.css b/packages/swirl-components/src/components/swirl-table-cell/swirl-table-cell.css
index 71a14bed2..df5f7b7b9 100644
--- a/packages/swirl-components/src/components/swirl-table-cell/swirl-table-cell.css
+++ b/packages/swirl-components/src/components/swirl-table-cell/swirl-table-cell.css
@@ -14,6 +14,18 @@
hyphens: auto;
transition: box-shadow 0.15s;
+ &(.table-cell--is-sticky) {
+ position: sticky;
+ z-index: 1;
+ }
+
+ &(.table-cell--is-sticky-right) {
+ position: sticky;
+ z-index: 1;
+ right: 0;
+ overflow: hidden;
+ }
+
&(.table-cell--has-shadow-right) {
box-shadow: var(--swirl-table-sticky-right-shadow);
}
diff --git a/packages/swirl-components/src/components/swirl-table-column/swirl-table-column.css b/packages/swirl-components/src/components/swirl-table-column/swirl-table-column.css
index 169b99b5a..691571135 100644
--- a/packages/swirl-components/src/components/swirl-table-column/swirl-table-column.css
+++ b/packages/swirl-components/src/components/swirl-table-column/swirl-table-column.css
@@ -21,6 +21,17 @@
transition: box-shadow 0.15s;
gap: var(--s-space-8);
+ &(.table-column--is-sticky) {
+ position: sticky;
+ z-index: 1;
+ }
+
+ &(.table-column--is-sticky-right) {
+ position: sticky;
+ z-index: 1;
+ right: 0;
+ }
+
&(.table-column--has-shadow-right) {
box-shadow: var(--swirl-table-sticky-right-shadow);
}
diff --git a/packages/swirl-components/src/components/swirl-table-row-group/swirl-table-row-group.css b/packages/swirl-components/src/components/swirl-table-row-group/swirl-table-row-group.css
index 9f00bfd86..d4daf7694 100644
--- a/packages/swirl-components/src/components/swirl-table-row-group/swirl-table-row-group.css
+++ b/packages/swirl-components/src/components/swirl-table-row-group/swirl-table-row-group.css
@@ -29,10 +29,8 @@
}
.table-row-group__label {
- @media (--from-tablet) {
- position: sticky;
- left: var(--s-space-16);
- }
+ position: sticky;
+ left: var(--s-space-16);
}
.table-row-group__tooltip {
@@ -51,7 +49,7 @@
}
.table-row-group__rows-container {
- overflow: hidden;
+ display: contents;
transition: height 0.3s ease-out;
}
diff --git a/packages/swirl-components/src/components/swirl-table/swirl-table.css b/packages/swirl-components/src/components/swirl-table/swirl-table.css
index d269053ed..86cc73c7e 100644
--- a/packages/swirl-components/src/components/swirl-table/swirl-table.css
+++ b/packages/swirl-components/src/components/swirl-table/swirl-table.css
@@ -14,17 +14,13 @@
}
.table__container--scrolled {
- --swirl-table-sticky-right-shadow: 0.0625rem 0 0 0 var(--s-border-default),
- -0.0625rem 0 0 0 var(--s-border-default),
- 0 0.25rem 1rem rgba(25, 26, 28, 0.04),
- 0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16);
+ --swirl-table-sticky-right-shadow: 4px 0 16px -4px rgba(23, 23, 23, 0.04),
+ 2px 0 4px -2px rgba(23, 23, 23, 0.04);
}
.table__container--scrollable:not(.table__container--scrolled-to-end) {
- --swirl-table-sticky-left-shadow: 0.0625rem 0 0 0 var(--s-border-default),
- -0.0625rem 0 0 0 var(--s-border-default),
- 0 0.25rem 1rem rgba(25, 26, 28, 0.04),
- 0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16);
+ --swirl-table-sticky-left-shadow: 0px 4px 16px 0px rgba(23, 23, 23, 0.04),
+ 0px 1px 4px 0px rgba(23, 23, 23, 0.04);
}
.table__table {
diff --git a/packages/swirl-components/src/components/swirl-table/swirl-table.spec.tsx b/packages/swirl-components/src/components/swirl-table/swirl-table.spec.tsx
index 0ea7e2cdf..84240bd83 100644
--- a/packages/swirl-components/src/components/swirl-table/swirl-table.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-table/swirl-table.spec.tsx
@@ -2,7 +2,7 @@ import { newSpecPage } from "@stencil/core/testing";
import { SwirlTable } from "./swirl-table";
-(global as any).MutationObserver = class {
+(global as any).IntersectionObserver = class {
constructor() {}
disconnect() {}
observe() {}
diff --git a/packages/swirl-components/src/components/swirl-table/swirl-table.tsx b/packages/swirl-components/src/components/swirl-table/swirl-table.tsx
index 6c602e00f..10d3cde12 100644
--- a/packages/swirl-components/src/components/swirl-table/swirl-table.tsx
+++ b/packages/swirl-components/src/components/swirl-table/swirl-table.tsx
@@ -1,3 +1,5 @@
+import debouncePromise from "debounce-promise";
+
import {
Component,
Element,
@@ -8,8 +10,8 @@ import {
Prop,
State,
} from "@stencil/core";
+
import { debounce, isMobileViewport } from "../../utils";
-import debouncePromise from "debounce-promise";
/**
* @slot columns - Column container, should contain SwirlTableColumns.
@@ -33,17 +35,52 @@ export class SwirlTable {
@State() scrolledToEnd: boolean;
private container: HTMLElement;
+ private intersectionObserver: IntersectionObserver;
+
+ async componentDidLoad() {
+ this.setupIntersectionObserver();
+ }
+
+ disconnectedCallback() {
+ this.intersectionObserver?.disconnect();
+ }
+
+ /**
+ * Set up an Intersection Observer to monitor when the table container becomes visible.
+ * This is important because the table's layout may need updating when it becomes visible,
+ * especially if it is rendered within a modal that opens after rendering.
+ */
+ private setupIntersectionObserver() {
+ this.intersectionObserver = new IntersectionObserver(
+ this.onVisibilityChange.bind(this),
+ {
+ threshold: 0,
+ }
+ );
+
+ this.intersectionObserver.observe(this.container);
+ }
+
+ private async onVisibilityChange(entries: IntersectionObserverEntry[]) {
+ const inViewport = entries.some((entry) => entry.isIntersecting);
+
+ if (inViewport) {
+ // Delay layout update to ensure the container is fully visible,
+ // especially if it was initially rendered in a modal.
+ setTimeout(async () => {
+ await this.updateLayout();
+ }, 100);
+ }
+ }
async componentDidRender() {
await this.updateLayout();
- this.updateScrolledState();
this.updateEmptyState();
}
@Listen("resize", { target: "window" })
async onWindowResize() {
await this.updateLayout();
- this.updateScrolledState();
}
/**
@@ -57,7 +94,6 @@ export class SwirlTable {
private triggerRerender = debounce(
async () => {
await this.updateLayout();
- this.updateScrolledState();
this.updateEmptyState();
},
0,
@@ -99,7 +135,11 @@ export class SwirlTable {
const columns = this.getColumns();
columns.forEach((column) => {
- column.classList.remove("table-column--has-shadow");
+ column.classList.remove(
+ "table-column--has-shadow",
+ "table-column--is-sticky",
+ "table-column--is-sticky-right"
+ );
column.style.right = "";
column.style.left = "";
@@ -112,7 +152,11 @@ export class SwirlTable {
const cells = this.getCells();
cells.forEach((cell) => {
- cell.classList.remove("table-cell--has-shadow");
+ cell.classList.remove(
+ "table-cell--has-shadow",
+ "table-cell--is-sticky",
+ "table-cell--is-sticky-right"
+ );
cell.style.flex = "";
cell.style.left = "";
@@ -124,6 +168,11 @@ export class SwirlTable {
private updateScrolledState() {
const isMobile = isMobileViewport();
+
+ if (this.container === undefined) {
+ return;
+ }
+
const scrollable = this.container.scrollWidth > this.container.clientWidth;
const scrolled = this.container.scrollLeft > 0;
@@ -172,7 +221,8 @@ export class SwirlTable {
this.resetRowGroupStyles();
this.layoutEmptyRow();
this.layoutRowGroups();
- this.layOutCells();
+ this.layOutCellsAndColumns();
+ this.updateScrolledState();
},
16,
{ leading: true }
@@ -217,24 +267,120 @@ export class SwirlTable {
});
}
- private layOutCells() {
+ private layOutCellsAndColumns() {
const columns = this.getColumns();
const cells = this.getCells();
columns.forEach((column, colIndex) => {
- const cellsOfColumn = cells.filter((_, cellIndex) => {
- return (colIndex - cellIndex) % columns.length === 0;
- });
+ const cellsOfColumn = this.getCellsForColumn(cells, columns, colIndex);
+ const columnProperties = this.calculateColumnProperties(
+ column,
+ columns,
+ colIndex
+ );
- const columnWidth =
- column.width || `${column.getBoundingClientRect().width}px`;
+ cellsOfColumn.forEach((cell) =>
+ this.applyCellStyles(cell, column, columnProperties)
+ );
- cellsOfColumn.forEach((cell) => {
- cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
- });
+ this.applyColumnStyles(column, columnProperties);
});
}
+ private getCellsForColumn(cells, columns, colIndex) {
+ return cells.filter(
+ (_, cellIndex) => (colIndex - cellIndex) % columns.length === 0
+ );
+ }
+
+ private calculateColumnProperties(column, columns, colIndex) {
+ const leftOffsetForStickyColumn = column.sticky
+ ? this.getLeftOffsetForStickyColumn(columns, colIndex)
+ : 0;
+ const columnWidth = `${column.getBoundingClientRect().width}px`;
+ const isLastColumnSticky = column.sticky && columns.length === colIndex + 1;
+ const hasShadowRight =
+ column.sticky && !this.hasStickyColumnsToRight(columns, colIndex);
+
+ return {
+ leftOffsetForStickyColumn,
+ columnWidth,
+ isLastColumnSticky,
+ hasShadowRight,
+ };
+ }
+
+ private applyCellStyles(cell, column, columnProperties) {
+ const {
+ leftOffsetForStickyColumn,
+ columnWidth,
+ isLastColumnSticky,
+ hasShadowRight,
+ } = columnProperties;
+
+ cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
+
+ if (isMobileViewport()) {
+ return;
+ }
+
+ if (column.sticky && !isLastColumnSticky) {
+ cell.classList.add("table-cell--is-sticky");
+ cell.style.left = leftOffsetForStickyColumn + "px";
+
+ if (hasShadowRight) {
+ cell.classList.add("table-cell--has-shadow-right");
+ }
+ }
+
+ if (isLastColumnSticky) {
+ cell.classList.add(
+ "table-cell--is-sticky-right",
+ "table-cell--has-shadow-left"
+ );
+ }
+ }
+
+ private applyColumnStyles(column, columnProperties) {
+ if (isMobileViewport()) {
+ return;
+ }
+
+ const { leftOffsetForStickyColumn, isLastColumnSticky, hasShadowRight } =
+ columnProperties;
+
+ if (column.sticky && !isLastColumnSticky) {
+ column.classList.add("table-column--is-sticky");
+ column.style.left = leftOffsetForStickyColumn + "px";
+
+ if (hasShadowRight) {
+ column.classList.add("table-column--has-shadow-right");
+ }
+ }
+
+ if (isLastColumnSticky) {
+ column.classList.add(
+ "table-column--is-sticky-right",
+ "table-column--has-shadow-left"
+ );
+ }
+ }
+
+ private getLeftOffsetForStickyColumn(columns, colIndex) {
+ return columns.slice(0, colIndex).reduce((acc, column) => {
+ if (column.sticky) {
+ acc += column.getBoundingClientRect().width;
+ return acc;
+ }
+ }, 0);
+ }
+
+ private hasStickyColumnsToRight(columns, colIndex) {
+ return columns
+ .slice(colIndex + 1, columns.length - 1)
+ .some((column) => column.sticky);
+ }
+
private updateEmptyState() {
const rowsContainer = this.el.querySelector('[slot="rows"]');
@@ -247,7 +393,6 @@ export class SwirlTable {
private onSlotChange = async () => {
await this.updateLayout();
- this.updateScrolledState();
this.updateEmptyState();
};
diff --git a/packages/swirl-components/src/components/swirl-tag/swirl-tag.css b/packages/swirl-components/src/components/swirl-tag/swirl-tag.css
index 6939b5480..4c5dfb942 100644
--- a/packages/swirl-components/src/components/swirl-tag/swirl-tag.css
+++ b/packages/swirl-components/src/components/swirl-tag/swirl-tag.css
@@ -170,6 +170,16 @@
.tag__icon {
display: inline-flex;
margin-left: calc(-1 * var(--s-space-4));
+ flex-shrink: 0;
+ order: 0;
+}
+
+.tag--icon-position-end {
+ & .tag__icon {
+ margin-right: calc(-1 * var(--s-space-4));
+ margin-left: 0;
+ order: 2;
+ }
}
.tag__label {
@@ -177,6 +187,7 @@
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
+ order: 1;
}
.tag__removal-button {
@@ -187,6 +198,8 @@
color: var(--s-icon-strong);
background-color: transparent;
cursor: pointer;
+ flex-shrink: 0;
+ order: 3;
&:focus:not(:focus-visible) {
outline: none;
diff --git a/packages/swirl-components/src/components/swirl-tag/swirl-tag.spec.tsx b/packages/swirl-components/src/components/swirl-tag/swirl-tag.spec.tsx
index 57c37f76c..afd3c36ba 100644
--- a/packages/swirl-components/src/components/swirl-tag/swirl-tag.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-tag/swirl-tag.spec.tsx
@@ -12,7 +12,7 @@ describe("swirl-tag", () => {
expect(page.root).toEqualHtml(`
-
+
+
+
diff --git a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.css b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.css
index 46bf310d0..47c972a35 100644
--- a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.css
+++ b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.css
@@ -7,7 +7,7 @@
--swirl-shell-header-height: 3.25rem;
--swirl-shell-collapsed-nav-width: 4rem;
- --swirl-shell-extended-nav-width: 14rem;
+ --swirl-shell-extended-nav-width: 18rem;
--swirl-shell-sidebar-width: 21rem;
display: flex;
@@ -25,7 +25,7 @@
width: 100%;
min-height: 100%;
background-color: var(--swirl-shell-background);
- transition: grid-template-columns 0.2s;
+ transition: grid-template-columns 0.1s;
grid-template-columns: 0 1fr 0;
grid-template-rows: 1fr;
grid-template-areas: "nav main";
@@ -37,7 +37,7 @@
@media (--from-desktop) {
padding-right: var(--s-space-8);
padding-bottom: var(--s-space-8);
- gap: var(--s-space-8);
+ column-gap: var(--s-space-8);
grid-template-columns: var(--swirl-shell-extended-nav-width) 1fr 0;
grid-template-rows: var(--swirl-shell-header-height) 1fr;
grid-template-areas:
@@ -73,23 +73,22 @@
.shell-layout--navigation-collapsed {
& .shell-layout__nav {
- &:hover {
- @media (--from-desktop) {
- width: var(--swirl-shell-extended-nav-width);
- padding-right: var(--s-space-12);
+ @media (--from-desktop) {
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ background: transparent;
+ -webkit-appearance: none;
}
}
+ }
- @media (--from-desktop) {
- &:not(:hover) {
- scrollbar-width: none;
-
- &::-webkit-scrollbar {
- width: 0;
- background: transparent;
- -webkit-appearance: none;
- }
- }
+ & .shell-layout__secondary-nav-items--grid-view {
+ & ::slotted(ul > *) {
+ max-width: 100%;
+ max-height: 3rem;
+ flex-basis: 100%;
}
}
@@ -133,11 +132,19 @@
:not(.shell-layout--sidebar-active) {
& .shell-layout__sidebar {
- animation: shell-layout-no-overflow-after-transition 0.2s;
+ animation: shell-layout-no-overflow-after-transition 0.1s;
animation-fill-mode: forwards;
}
}
+.shell-layout--sidebar-scrollable {
+ &:not(.shell-layout--sidebar-scrolled-to-top) {
+ & .shell-layout__sidebar-app-bar {
+ border-bottom-color: var(--s-border-default);
+ }
+ }
+}
+
.shell-layout--mobile-navigation-active {
& .shell-layout__nav {
transform: translate3d(0, 0, 0);
@@ -158,6 +165,18 @@
}
}
+.shell-layout--has-secondary-nav {
+ & .shell-layout__secondary-nav {
+ display: block;
+ }
+}
+
+.shell-layout--secondary-nav-collapsed {
+ & .shell-layout__secondary-nav-items {
+ display: none;
+ }
+}
+
.shell-layout__header {
position: relative;
display: none;
@@ -168,7 +187,6 @@
padding-left: var(--s-space-16);
justify-content: space-between;
align-items: center;
- border-bottom: 0.0625rem solid var(--s-border-default);
color: var(--swirl-shell-text-color);
grid-area: header;
@@ -292,12 +310,13 @@
top: 0;
bottom: 0;
left: 0;
- overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
width: 100%;
max-width: 18.75rem;
color: var(--swirl-shell-text-color);
background-color: var(--s-surface-overlay-default);
- transition: transform 0.2s, box-shadow 0.2s, width 0.2s;
+ transition: transform 0.1s, box-shadow 0.1s, width 0.1s;
transform: translate3d(-100%, 0, 0);
grid-area: nav;
@@ -306,7 +325,7 @@
}
@media (--from-desktop) {
- position: static;
+ position: relative;
max-width: none;
padding-top: 0;
padding-right: var(--s-space-4);
@@ -382,10 +401,36 @@
z-index: 8;
display: none;
background-color: rgba(0, 0, 0, 0.25);
- animation: shell-layout-backdrop-fade-in 0.2s;
+ animation: shell-layout-backdrop-fade-in 0.1s;
inset: 0;
}
+.shell-layout__secondary-nav {
+ display: none;
+}
+
+.shell-layout__secondary-nav-items {
+ & ::slotted(ul) {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-space-2);
+ }
+}
+
+.shell-layout__secondary-nav-items--grid-view {
+ & ::slotted(ul) {
+ flex-wrap: wrap;
+ flex-direction: row;
+ gap: var(--s-space-16);
+ }
+
+ & ::slotted(ul > *) {
+ min-width: 0;
+ max-height: none;
+ flex-basis: calc(50% - var(--s-space-8));
+ }
+}
+
.shell-layout__main {
overflow: hidden;
background-color: var(--s-background-default);
@@ -423,7 +468,7 @@
top: 0;
right: 0;
bottom: 0;
- transition: transform 0.2s;
+ transition: transform 0.1s;
transform: translate3d(calc(100% + var(--s-space-24)), 0, 0);
box-shadow: var(--s-shadow-level-3);
}
@@ -443,7 +488,7 @@
.shell-layout__sidebar-app-bar {
flex-grow: 0;
flex-shrink: 0;
- border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+ border-bottom: var(--s-border-width-default) solid transparent;
}
.shell-layout__sidebar-content {
diff --git a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.spec.tsx b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.spec.tsx
index 6f6067d24..25b4e999c 100644
--- a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.spec.tsx
@@ -2,6 +2,12 @@ import { newSpecPage } from "@stencil/core/testing";
import { SwirlShellLayout } from "./swirl-shell-layout";
+(global as any).MutationObserver = class {
+ constructor() {}
+ disconnect() {}
+ observe() {}
+};
+
describe("swirl-shell-layout", () => {
it("renders its content", async () => {
const page = await newSpecPage({
@@ -18,7 +24,7 @@ describe("swirl-shell-layout", () => {
});
expect(page.root.innerHTML).toMatchInlineSnapshot(
- `" "`
);
});
});
diff --git a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.stories.ts b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.stories.ts
index f2489950e..d4f95d388 100644
--- a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.stories.ts
+++ b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.stories.ts
@@ -1,6 +1,8 @@
import { fullscreenStoryDecorator, generateStoryElement } from "../../utils";
import Docs from "./swirl-shell-layout.mdx";
+const dummyText = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo`;
+
export default {
argTypes: {
sidebarToggleBadge: {
@@ -43,46 +45,82 @@ const Template = (args) => {
+
{
-
-
+ Tools
Sidebar header
"`
+ `" Tools
Sidebar header
Logo
Main
-
- -
-
-
-
- --
+ -
-
- + + -
-
- + + -
-
- + + -
-
- + + -
-
- + +
-
-
+
-
+
+ ++
+ -
+
+ ++
+ -
+
+ ++
+ -
+
+ ++
+
+
+ ${dummyText} ${dummyText} ${dummyText}
+
+
+
+
+ ${dummyText}
+
+
+
+
+ Bottom bar
+
+
+
+ ${dummyText}
+
+
`;
const appLayout = element.querySelector("swirl-app-layout");
diff --git a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx
index ce09b2945..abab079c4 100644
--- a/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx
+++ b/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx
@@ -1,5 +1,6 @@
import {
Component,
+ Element,
Event,
EventEmitter,
h,
@@ -12,10 +13,17 @@ import {
} from "@stencil/core";
import classnames from "classnames";
import * as focusTrap from "focus-trap";
+import { debounce, isDesktopViewport } from "../../utils";
+const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY =
+ "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
+const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY =
+ "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
+export type SwirlShellLayoutSecondaryNavView = "grid" | "list";
+
/**
* @slot logo - Logo shown inside header.
* @slot left-header-tools - Tools positioned on the header's left-hand side.
@@ -35,12 +43,20 @@ const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
tag: "swirl-shell-layout",
})
export class SwirlShellLayout {
+ @Element() el: HTMLElement;
+
@Prop() brandedHeader?: boolean;
@Prop() browserBackButtonLabel?: string = "Navigate back";
@Prop() browserForwardButtonLabel?: string = "Navigate forward";
+ @Prop() collapseNavigationButtonLabel?: string = "Collapse navigation";
+ @Prop() enableSecondaryNavGridLayout?: boolean = true;
+ @Prop() expandNavigationButtonLabel?: string = "Expand navigation";
+ @Prop() gridNavLayoutToggleLabel?: string = "Grid";
@Prop() hideMobileNavigationButtonLabel?: string = "Close navigation";
+ @Prop() listNavLayoutToggleLabel?: string = "List";
@Prop() navigationLabel?: string = "Main";
- @Prop() navigationToggleLabel?: string = "Toggle navigation";
+ @Prop() secondaryNavCollapseLabel?: string = "Show less";
+ @Prop() secondaryNavExpandLabel?: string = "Show more";
@Prop({ mutable: true }) sidebarActive?: boolean;
@Prop() sidebarToggleBadge?: string | boolean;
@Prop() sidebarToggleBadgeAriaLabel?: string;
@@ -51,13 +67,27 @@ export class SwirlShellLayout {
@Event() sidebarToggleClick: EventEmitter