@getflip/swirl-components 0.185.1 → 0.188.0

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 (88) hide show
  1. package/components.json +17 -17
  2. package/dist/cjs/file-manager.cjs.entry.js +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/swirl-accordion-item.cjs.entry.js +1 -1
  5. package/dist/cjs/swirl-app-layout_6.cjs.entry.js +2 -2
  6. package/dist/cjs/swirl-color-input.cjs.entry.js +2 -2
  7. package/dist/cjs/swirl-components.cjs.js +1 -1
  8. package/dist/cjs/swirl-date-input.cjs.entry.js +1 -1
  9. package/dist/cjs/swirl-icon-check-small_3.cjs.entry.js +1 -1
  10. package/dist/cjs/swirl-lightbox.cjs.entry.js +1 -1
  11. package/dist/cjs/swirl-pdf-reader.cjs.entry.js +1 -1
  12. package/dist/cjs/swirl-popover_2.cjs.entry.js +8 -6
  13. package/dist/cjs/swirl-select.cjs.entry.js +1 -1
  14. package/dist/cjs/swirl-shell-layout.cjs.entry.js +1 -1
  15. package/dist/cjs/v4-c23234d2.js +68 -0
  16. package/dist/cjs/wc-datepicker.cjs.entry.js +1 -1
  17. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  18. package/dist/collection/components/swirl-color-input/swirl-color-input.js +2 -2
  19. package/dist/collection/components/swirl-color-input/swirl-color-input.spec.js +1 -1
  20. package/dist/collection/components/swirl-date-input/swirl-date-input.js +1 -1
  21. package/dist/collection/components/swirl-date-input/swirl-date-input.spec.js +2 -2
  22. package/dist/collection/components/swirl-lightbox/swirl-lightbox.js +1 -1
  23. package/dist/collection/components/swirl-menu/swirl-menu.spec.js +2 -2
  24. package/dist/collection/components/swirl-menu/swirl-menu.stories.js +1 -1
  25. package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js +1 -1
  26. package/dist/collection/components/swirl-popover/swirl-popover.spec.js +2 -2
  27. package/dist/collection/components/swirl-popover/swirl-popover.stories.js +1 -1
  28. package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js +28 -26
  29. package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.spec.js +2 -2
  30. package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.stories.js +2 -2
  31. package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +5 -5
  32. package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.stories.js +1 -1
  33. package/dist/collection/components/swirl-select/swirl-select.js +2 -2
  34. package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +1 -2
  35. package/dist/collection/prototypes/file-manager/file-manager.js +1 -1
  36. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  37. package/dist/components/file-manager.js +1 -1
  38. package/dist/components/swirl-color-input.js +1 -1
  39. package/dist/components/swirl-date-input.js +1 -1
  40. package/dist/components/swirl-lightbox.js +1 -1
  41. package/dist/components/swirl-pdf-reader.js +1 -1
  42. package/dist/components/swirl-popover-trigger2.js +10 -8
  43. package/dist/components/swirl-resource-list-item2.js +1 -1
  44. package/dist/components/swirl-select.js +1 -1
  45. package/dist/components/swirl-shell-layout.js +1 -1
  46. package/dist/components/v4.js +21 -30
  47. package/dist/components/wc-datepicker2.js +1 -1
  48. package/dist/esm/file-manager.entry.js +1 -1
  49. package/dist/esm/loader.js +1 -1
  50. package/dist/esm/swirl-accordion-item.entry.js +1 -1
  51. package/dist/esm/swirl-app-layout_6.entry.js +2 -2
  52. package/dist/esm/swirl-color-input.entry.js +2 -2
  53. package/dist/esm/swirl-components.js +1 -1
  54. package/dist/esm/swirl-date-input.entry.js +1 -1
  55. package/dist/esm/swirl-icon-check-small_3.entry.js +1 -1
  56. package/dist/esm/swirl-lightbox.entry.js +1 -1
  57. package/dist/esm/swirl-pdf-reader.entry.js +1 -1
  58. package/dist/esm/swirl-popover_2.entry.js +8 -6
  59. package/dist/esm/swirl-select.entry.js +1 -1
  60. package/dist/esm/swirl-shell-layout.entry.js +1 -1
  61. package/dist/esm/v4-23648a96.js +66 -0
  62. package/dist/esm/wc-datepicker.entry.js +1 -1
  63. package/dist/swirl-components/{p-11886515.entry.js → p-04969f21.entry.js} +1 -1
  64. package/dist/swirl-components/{p-703f1075.entry.js → p-0faff2bc.entry.js} +1 -1
  65. package/dist/swirl-components/p-14616bce.js +1 -0
  66. package/dist/swirl-components/p-2e35b2b1.entry.js +1 -0
  67. package/dist/swirl-components/{p-d0be5bf2.entry.js → p-346653d4.entry.js} +1 -1
  68. package/dist/swirl-components/{p-0fb68fa4.entry.js → p-679fd8e4.entry.js} +1 -1
  69. package/dist/swirl-components/{p-ae0b305d.entry.js → p-829dc2e3.entry.js} +1 -1
  70. package/dist/swirl-components/{p-3485cf5d.entry.js → p-8c6e6625.entry.js} +1 -1
  71. package/dist/swirl-components/p-9c5878f6.entry.js +1 -0
  72. package/dist/swirl-components/{p-178aa1bb.entry.js → p-ac721109.entry.js} +1 -1
  73. package/dist/swirl-components/{p-ff15c52e.entry.js → p-cac3cd93.entry.js} +1 -1
  74. package/dist/swirl-components/{p-bbdbc3ed.entry.js → p-df8f0b77.entry.js} +1 -1
  75. package/dist/swirl-components/{p-9a1c32ff.entry.js → p-eed0048b.entry.js} +1 -1
  76. package/dist/swirl-components/swirl-components.esm.js +1 -1
  77. package/dist/types/components/swirl-popover-trigger/swirl-popover-trigger.d.ts +1 -1
  78. package/dist/types/components/swirl-popover-trigger/swirl-popover-trigger.stories.d.ts +1 -1
  79. package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +1 -1
  80. package/dist/types/components/swirl-select/swirl-select.d.ts +1 -1
  81. package/dist/types/components.d.ts +2 -2
  82. package/package.json +1 -1
  83. package/vscode-data.json +2 -2
  84. package/dist/cjs/v4-8e8d6fbc.js +0 -77
  85. package/dist/esm/v4-fa4bb814.js +0 -75
  86. package/dist/swirl-components/p-19b890a3.js +0 -1
  87. package/dist/swirl-components/p-34e94b6a.entry.js +0 -1
  88. package/dist/swirl-components/p-f934f4be.entry.js +0 -1
package/dist/components/file-manager.js CHANGED
@@ -89,7 +89,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
89
89
  onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
90
90
  }
91
91
  render() {
92
- return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
92
+ return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
93
93
  }
94
94
  }, [1, "file-manager", {
95
95
  "selectedDirectory": [32],
package/dist/components/swirl-color-input.js CHANGED
@@ -457,7 +457,7 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
457
457
  const className = classnames("color-input", {
458
458
  "color-input--inline": this.inline,
459
459
  });
460
- return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { popover: this.pickerId }, h("button", { "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
460
+ return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { swirlPopover: this.pickerId }, h("button", { "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
461
461
  backgroundColor: this.disabled
462
462
  ? "var(--s-border-subdued)"
463
463
  : this.value,
package/dist/components/swirl-date-input.js CHANGED
@@ -157,7 +157,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
157
157
  const className = classnames("date-input", {
158
158
  "date-input--inline": this.inline,
159
159
  });
160
- return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
160
+ return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { swirlPopover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
161
161
  }
162
162
  get el() { return this; }
163
163
  static get watchers() { return {
package/dist/components/swirl-lightbox.js CHANGED
@@ -257,7 +257,7 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
257
257
  "lightbox--closing": this.closing,
258
258
  "lightbox--hide-menu": !hasMenuItems,
259
259
  });
260
- return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), !this.hideMenu && (h("swirl-popover-trigger", { popover: this.menu }, h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", null))))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", null), h("swirl-action-list", null, this.downloadButtonEnabled && (h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { name: "menu-items" }))))))));
260
+ return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), !this.hideMenu && (h("swirl-popover-trigger", { swirlPopover: this.menu }, h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", null))))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", null), h("swirl-action-list", null, this.downloadButtonEnabled && (h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { name: "menu-items" }))))))));
261
261
  }
262
262
  get el() { return this; }
263
263
  static get style() { return swirlLightboxCss; }
package/dist/components/swirl-pdf-reader.js CHANGED
@@ -214,7 +214,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
214
214
  "pdf-reader--hide-menu": !hasMenuItems,
215
215
  "pdf-reader--show-thumbnails": this.showThumbnails,
216
216
  });
217
- return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "pdf-reader__body", role: "document" }, h("header", { class: "pdf-reader__header" }, h("span", { class: "pdf-reader__header-left" }, h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { class: "pdf-reader__label" }, this.label)), h("span", { class: "pdf-reader__header-center" }, h("span", { class: "pdf-reader__zoom-button-container" }, h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { class: "pdf-reader__zoom-select-container" }, h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), h("span", { class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { popover: this.menu }, h("swirl-button", { class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { class: "pdf-reader__floating-tools" }, h("button", { "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", null)), h("button", { "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", null)))), h("div", { class: "pdf-reader__content" }, h("nav", { "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", null), !this.loadingThumbnails &&
217
+ return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "pdf-reader__body", role: "document" }, h("header", { class: "pdf-reader__header" }, h("span", { class: "pdf-reader__header-left" }, h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { class: "pdf-reader__label" }, this.label)), h("span", { class: "pdf-reader__header-center" }, h("span", { class: "pdf-reader__zoom-button-container" }, h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { class: "pdf-reader__zoom-select-container" }, h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), h("span", { class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { swirlPopover: this.menu }, h("swirl-button", { class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { class: "pdf-reader__floating-tools" }, h("button", { "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", null)), h("button", { "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", null)))), h("div", { class: "pdf-reader__content" }, h("nav", { "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", null), !this.loadingThumbnails &&
218
218
  this.thumbnails.map((thumbnail, index) => {
219
219
  const thumbnailClassName = classnames("pdf-reader__thumbnail", {
220
220
  "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
package/dist/components/swirl-popover-trigger2.js CHANGED
@@ -35,7 +35,9 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
35
35
  if (!Boolean(triggerEl)) {
36
36
  return;
37
37
  }
38
- const popoverId = typeof this.popover === "string" ? this.popover : this.popover?.id;
38
+ const popoverId = typeof this.swirlPopover === "string"
39
+ ? this.swirlPopover
40
+ : this.swirlPopover?.id;
39
41
  if (triggerEl.tagName.startsWith("SWIRL-")) {
40
42
  triggerEl.setAttribute("swirl-aria-controls", popoverId);
41
43
  triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
@@ -49,8 +51,8 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
49
51
  };
50
52
  this.hidePopoverWhenInvisible = true;
51
53
  this.parentScrollContainer = undefined;
52
- this.popover = undefined;
53
54
  this.setAriaAttributes = true;
55
+ this.swirlPopover = undefined;
54
56
  }
55
57
  componentDidLoad() {
56
58
  this.updateTriggerElAriaAttributes();
@@ -73,9 +75,9 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
73
75
  this.updateTriggerElAriaAttributes();
74
76
  }
75
77
  getPopoverEl() {
76
- return typeof this.popover === "string"
77
- ? document.querySelector(`#${this.popover}`)
78
- : this.popover;
78
+ return typeof this.swirlPopover === "string"
79
+ ? document.querySelector(`#${this.swirlPopover}`)
80
+ : this.swirlPopover;
79
81
  }
80
82
  getTriggerEl() {
81
83
  if (this.el.children.length !== 1) {
@@ -99,14 +101,14 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
99
101
  }
100
102
  get el() { return this; }
101
103
  static get watchers() { return {
102
- "popover": ["watchPopover"]
104
+ "swirlPopover": ["watchPopover"]
103
105
  }; }
104
106
  static get style() { return swirlPopoverTriggerCss; }
105
107
  }, [6, "swirl-popover-trigger", {
106
108
  "hidePopoverWhenInvisible": [4, "hide-popover-when-invisible"],
107
109
  "parentScrollContainer": [16],
108
- "popover": [1],
109
- "setAriaAttributes": [4, "set-aria-attributes"]
110
+ "setAriaAttributes": [4, "set-aria-attributes"],
111
+ "swirlPopover": [1, "swirl-popover"]
110
112
  }]);
111
113
  function defineCustomElement() {
112
114
  if (typeof customElements === "undefined") {
package/dist/components/swirl-resource-list-item2.js CHANGED
@@ -156,7 +156,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
156
156
  "resource-list-item--wrap-description": this.descriptionWrap,
157
157
  "resource-list-item--wrap-label": this.labelWrap,
158
158
  });
159
- return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
159
+ return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { swirlPopover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
160
160
  }
161
161
  get el() { return this; }
162
162
  static get style() { return swirlResourceListItemCss; }
package/dist/components/swirl-select.js CHANGED
@@ -136,7 +136,7 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
136
136
  "select--multi": this.multiSelect,
137
137
  "select--search-loading": this.searchLoading,
138
138
  });
139
- return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
139
+ return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { swirlPopover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
140
140
  ?.map((value) => this.options.find((option) => option.value === value))
141
141
  ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
142
142
  // eslint-disable-next-line react/jsx-no-bind
package/dist/components/swirl-shell-layout.js CHANGED
@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './swirl-icon-dock-left2.js';
9
9
  import { d as defineCustomElement$3 } from './swirl-icon-double-arrow-left2.js';
10
10
  import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
11
11
 
12
- const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);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:\"header header header\"\n \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n --swirl-shell-sidebar-width\n )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n --swirl-shell-sidebar-width\n )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.2s;animation-fill-mode:forwards}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);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}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow: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;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
12
+ const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);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:\"header header header\"\n \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n --swirl-shell-sidebar-width\n )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n --swirl-shell-sidebar-width\n )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.2s;animation-fill-mode:forwards}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);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}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow: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;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
13
13
 
14
14
  const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
15
15
  const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
package/dist/components/v4.js CHANGED
@@ -1,14 +1,13 @@
1
1
  // Unique ID creation requires a high quality random # generator. In the browser we therefore
2
2
  // require the crypto API and do not support built-in fallback to lower quality random number
3
3
  // generators (like Math.random()).
4
- var getRandomValues;
5
- var rnds8 = new Uint8Array(16);
4
+ let getRandomValues;
5
+ const rnds8 = new Uint8Array(16);
6
6
  function rng() {
7
7
  // lazy load so that environments that need to polyfill have a chance to do so
8
8
  if (!getRandomValues) {
9
- // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
10
- // find the complete implementation of crypto (msCrypto) on IE11.
11
- getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
9
+ // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
10
+ getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
12
11
 
13
12
  if (!getRandomValues) {
14
13
  throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
@@ -18,43 +17,35 @@ function rng() {
18
17
  return getRandomValues(rnds8);
19
18
  }
20
19
 
21
- const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
22
-
23
- function validate(uuid) {
24
- return typeof uuid === 'string' && REGEX.test(uuid);
25
- }
26
-
27
20
  /**
28
21
  * Convert array of 16 byte values to UUID string format of the form:
29
22
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
30
23
  */
31
24
 
32
- var byteToHex = [];
25
+ const byteToHex = [];
33
26
 
34
- for (var i = 0; i < 256; ++i) {
35
- byteToHex.push((i + 0x100).toString(16).substr(1));
27
+ for (let i = 0; i < 256; ++i) {
28
+ byteToHex.push((i + 0x100).toString(16).slice(1));
36
29
  }
37
30
 
38
- function stringify(arr) {
39
- var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
31
+ function unsafeStringify(arr, offset = 0) {
40
32
  // Note: Be careful editing this code! It's been tuned for performance
41
33
  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
42
- var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one
43
- // of the following:
44
- // - One or more input array values don't map to a hex octet (leading to
45
- // "undefined" in the uuid)
46
- // - Invalid input values for the RFC `version` or `variant` fields
47
-
48
- if (!validate(uuid)) {
49
- throw TypeError('Stringified UUID is invalid');
50
- }
51
-
52
- return uuid;
34
+ return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
53
35
  }
54
36
 
37
+ const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
38
+ const native = {
39
+ randomUUID
40
+ };
41
+
55
42
  function v4(options, buf, offset) {
43
+ if (native.randomUUID && !buf && !options) {
44
+ return native.randomUUID();
45
+ }
46
+
56
47
  options = options || {};
57
- var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
48
+ const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
58
49
 
59
50
  rnds[6] = rnds[6] & 0x0f | 0x40;
60
51
  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
@@ -62,14 +53,14 @@ function v4(options, buf, offset) {
62
53
  if (buf) {
63
54
  offset = offset || 0;
64
55
 
65
- for (var i = 0; i < 16; ++i) {
56
+ for (let i = 0; i < 16; ++i) {
66
57
  buf[offset + i] = rnds[i];
67
58
  }
68
59
 
69
60
  return buf;
70
61
  }
71
62
 
72
- return stringify(rnds);
63
+ return unsafeStringify(rnds);
73
64
  }
74
65
 
75
66
  export { v4 as v };
package/dist/components/wc-datepicker2.js CHANGED
@@ -141,7 +141,7 @@ function subDays(date, days) {
141
141
  return newDate;
142
142
  }
143
143
 
144
- const wcDatepickerCss = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}";
144
+ const wcDatepickerCss = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}";
145
145
 
146
146
  const defaultLabels = {
147
147
  clearButton: 'Clear value',
package/dist/esm/file-manager.entry.js CHANGED
@@ -58,7 +58,7 @@ const FileManager = class {
58
58
  onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
59
59
  }
60
60
  render() {
61
- return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
61
+ return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
62
62
  }
63
63
  };
64
64