@getflip/swirl-components 0.120.0 → 0.120.2

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.
@@ -28,6 +28,12 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
28
28
  this.checked = !this.checked;
29
29
  this.valueChange.emit(this.checked);
30
30
  };
31
+ this.onBlur = () => {
32
+ this.makeControlUnfocusable();
33
+ };
34
+ this.onFocus = () => {
35
+ this.makeControlFocusable();
36
+ };
31
37
  this.onMenuTriggerClick = (event) => {
32
38
  if (this.disabled && !Boolean(this.href)) {
33
39
  event.stopPropagation();
@@ -67,6 +73,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
67
73
  this.forceIconProps(this.desktopMediaQuery.matches);
68
74
  this.updateIconSize(this.desktopMediaQuery.matches);
69
75
  this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
76
+ this.makeControlUnfocusable();
70
77
  if (Boolean(this.menuTriggerId)) {
71
78
  console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
72
79
  }
@@ -88,6 +95,23 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
88
95
  this.hasMedia = hasMedia;
89
96
  }
90
97
  }
98
+ getControl() {
99
+ return this.el.querySelector('[slot="control"] button');
100
+ }
101
+ makeControlFocusable() {
102
+ const control = this.getControl();
103
+ if (!Boolean(control)) {
104
+ return;
105
+ }
106
+ control.tabIndex = 0;
107
+ }
108
+ makeControlUnfocusable() {
109
+ const control = this.getControl();
110
+ if (!Boolean(control)) {
111
+ return;
112
+ }
113
+ control.tabIndex = -1;
114
+ }
91
115
  render() {
92
116
  const Tag = !this.interactive && !this.selectable
93
117
  ? "div"
@@ -116,7 +140,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
116
140
  "resource-list-item--show-control-on-focus": showControlOnFocus,
117
141
  "resource-list-item--show-meta": showMeta,
118
142
  });
119
- 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, 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" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, 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" }, 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 })))));
143
+ 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" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, 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" }, 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 })))));
120
144
  }
121
145
  get el() { return this; }
122
146
  static get style() { return swirlResourceListItemCss; }
@@ -113,7 +113,7 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
113
113
  "shell-layout--navigation-collapsed": this.navigationCollapsed,
114
114
  "shell-layout--sidebar-active": this.sidebarActive,
115
115
  });
116
- return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar" }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
116
+ return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
117
117
  }
118
118
  static get watchers() { return {
119
119
  "mobileNavigationActive": ["watchMobileNavigationState"],
@@ -475,6 +475,12 @@ const SwirlResourceListItem = class {
475
475
  this.checked = !this.checked;
476
476
  this.valueChange.emit(this.checked);
477
477
  };
478
+ this.onBlur = () => {
479
+ this.makeControlUnfocusable();
480
+ };
481
+ this.onFocus = () => {
482
+ this.makeControlFocusable();
483
+ };
478
484
  this.onMenuTriggerClick = (event) => {
479
485
  if (this.disabled && !Boolean(this.href)) {
480
486
  event.stopPropagation();
@@ -514,6 +520,7 @@ const SwirlResourceListItem = class {
514
520
  this.forceIconProps(this.desktopMediaQuery.matches);
515
521
  this.updateIconSize(this.desktopMediaQuery.matches);
516
522
  this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
523
+ this.makeControlUnfocusable();
517
524
  if (Boolean(this.menuTriggerId)) {
518
525
  console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
519
526
  }
@@ -535,6 +542,23 @@ const SwirlResourceListItem = class {
535
542
  this.hasMedia = hasMedia;
536
543
  }
537
544
  }
545
+ getControl() {
546
+ return this.el.querySelector('[slot="control"] button');
547
+ }
548
+ makeControlFocusable() {
549
+ const control = this.getControl();
550
+ if (!Boolean(control)) {
551
+ return;
552
+ }
553
+ control.tabIndex = 0;
554
+ }
555
+ makeControlUnfocusable() {
556
+ const control = this.getControl();
557
+ if (!Boolean(control)) {
558
+ return;
559
+ }
560
+ control.tabIndex = -1;
561
+ }
538
562
  render() {
539
563
  const Tag = !this.interactive && !this.selectable
540
564
  ? "div"
@@ -563,7 +587,7 @@ const SwirlResourceListItem = class {
563
587
  "resource-list-item--show-control-on-focus": showControlOnFocus,
564
588
  "resource-list-item--show-meta": showMeta,
565
589
  });
566
- 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, 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" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, 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" }, 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 })))));
590
+ 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" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, 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" }, 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 })))));
567
591
  }
568
592
  get el() { return getElement(this); }
569
593
  };
@@ -104,7 +104,7 @@ const SwirlShellLayout = class {
104
104
  "shell-layout--navigation-collapsed": this.navigationCollapsed,
105
105
  "shell-layout--sidebar-active": this.sidebarActive,
106
106
  });
107
- return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar" }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
107
+ return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
108
108
  }
109
109
  static get watchers() { return {
110
110
  "mobileNavigationActive": ["watchMobileNavigationState"],
@@ -0,0 +1 @@
1
+ import{r as l,c as s,h as a,H as e}from"./p-3fca9a05.js";import{c as o}from"./p-b7898321.js";import{c as i}from"./p-c2e1dfdb.js";const t="SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE",r="SWIRL_SHELL_SIDEBAR_STATE",h=class{constructor(a){l(this,a),this.sidebarToggleClick=s(this,"sidebarToggleClick",7),this.skipLinkClick=s(this,"skipLinkClick",7),this.onBrowserBackClick=()=>{history.back()},this.onBrowserForwardClick=()=>{history.forward()},this.onNavigationToggleClick=()=>{this.navigationCollapsed=!this.navigationCollapsed},this.onNavigationClick=()=>{this.hideMobileNavigation()},this.brandedHeader=void 0,this.browserBackButtonLabel="Navigate back",this.browserForwardButtonLabel="Navigate forward",this.hideMobileNavigationButtonLabel="Close navigation",this.navigationLabel="Main",this.navigationToggleLabel="Toggle navigation",this.sidebarActive=void 0,this.sidebarToggleBadge=void 0,this.sidebarToggleBadgeAriaLabel=void 0,this.sidebarToggleIcon="notifications",this.sidebarToggleLabel="Toggle sidebar",this.skipLinkLabel="Skip to main content",this.mobileNavigationActive=void 0,this.navigationCollapsed=void 0}componentWillLoad(){const l="true"===localStorage.getItem(r);this.sidebarActive=void 0===this.sidebarActive?l:this.sidebarActive;const s="true"===localStorage.getItem(t);this.navigationCollapsed=s}componentDidLoad(){this.focusTrap=i(this.navElement,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:l=>l.shadowRoot}})}componentDidRender(){this.focusTrap?.updateContainerElements(this.navElement)}disconnectedCallback(){this.focusTrap?.deactivate()}onWindowKeyDown(l){"Escape"===l.key&&this.mobileNavigationActive&&this.hideMobileNavigation()}watchMobileNavigationState(){this.mobileNavigationActive?setTimeout((()=>{this.focusTrap.activate()}),200):this.focusTrap.deactivate()}watchNavigationCollapsed(){localStorage.setItem(t,String(this.navigationCollapsed))}watchSidebarActive(){localStorage.setItem(r,String(this.sidebarActive))}async showMobileNavigation(){this.mobileNavigationActive=!0}async hideMobileNavigation(){this.mobileNavigationActive=!1}render(){const l=o("shell-layout",{"shell-layout--branded-header":this.brandedHeader,"shell-layout--mobile-navigation-active":this.mobileNavigationActive,"shell-layout--navigation-collapsed":this.navigationCollapsed,"shell-layout--sidebar-active":this.sidebarActive});return a(e,null,a("div",{class:l},a("header",{class:"shell-layout__header","data-tauri-drag-region":"true"},a("button",{class:"shell-layout__skip-link",onClick:this.skipLinkClick.emit,type:"button"},this.skipLinkLabel),a("div",{class:"shell-layout__header-left"},a("button",{class:"shell-layout__header-tool shell-layout__navigation-toggle",onClick:this.onNavigationToggleClick,type:"button"},a("swirl-icon-menu",{size:20}),a("swirl-icon-double-arrow-left",{size:20}),a("swirl-icon-double-arrow-right",{size:20}),a("swirl-visually-hidden",null,this.navigationToggleLabel)),a("button",{class:"shell-layout__header-tool",onClick:this.onBrowserBackClick,type:"button"},a("swirl-icon-arrow-back",{size:20}),a("swirl-visually-hidden",null,this.browserBackButtonLabel)),a("button",{class:"shell-layout__header-tool",onClick:this.onBrowserForwardClick,type:"button"},a("swirl-icon-arrow-forward",{size:20}),a("swirl-visually-hidden",null,this.browserForwardButtonLabel))),a("div",{class:"shell-layout__logo"},a("slot",{name:"logo"})),a("div",{class:"shell-layout__header-right"},a("button",{class:"shell-layout__header-tool shell-layout__sidebar-toggle",onClick:this.sidebarToggleClick.emit,type:"button"},a("swirl-icon",{glyph:this.sidebarToggleIcon,size:20}),a("swirl-visually-hidden",null,this.sidebarToggleLabel),this.sidebarToggleBadge&&a("swirl-badge",{"aria-label":this.sidebarToggleBadgeAriaLabel,label:this.sidebarToggleBadge,size:"xs"})),a("slot",{name:"header-tools"}))),a("div",{class:"shell-layout__mobile-nav-backdrop",onClick:this.onNavigationClick}),a("nav",{"aria-labelledby":"main-navigation-label",class:"shell-layout__nav",onClick:this.onNavigationClick,ref:l=>this.navElement=l},a("div",{class:"shell-layout__mobile-header"},a("slot",{name:"mobile-logo"}),a("div",{class:"shell-layout__mobile-header-tools"},a("slot",{name:"mobile-header-tools"}),a("button",{class:"shell-layout__header-tool",type:"button"},a("swirl-icon-double-arrow-left",{size:20}),a("swirl-visually-hidden",null,this.hideMobileNavigationButtonLabel)))),a("div",{class:"shell-layout__nav-body"},a("swirl-visually-hidden",null,a("span",{id:"main-navigation-label"},this.navigationLabel)),a("slot",{name:"nav"}))),a("main",{class:"shell-layout__main",id:"main-content"},a("slot",null)),a("aside",{class:"shell-layout__sidebar",inert:!this.sidebarActive||void 0},a("div",{class:"shell-layout__sidebar-body"},a("div",{class:"shell-layout__sidebar-app-bar"},a("slot",{name:"sidebar-app-bar"})),a("div",{class:"shell-layout__sidebar-content"},a("slot",{name:"sidebar"}))))))}static get watchers(){return{mobileNavigationActive:["watchMobileNavigationState"],navigationCollapsed:["watchNavigationCollapsed"],sidebarActive:["watchSidebarActive"]}}};h.style='.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:3.75rem;--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)}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-right.sc-swirl-shell-layout{display:inline-flex}@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%}}@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 )}}.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;flex-basis:8rem;flex-shrink:0;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{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>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);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;right:0;bottom:0;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__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-menu.sc-swirl-shell-layout{display:none}.shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:inline-flex}.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-right.sc-swirl-shell-layout,.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.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;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;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;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}@media (min-width: 1440px){.shell-layout__sidebar.sc-swirl-shell-layout{overflow:hidden}}.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}}';export{h as swirl_shell_layout}
@@ -1 +1 @@
1
- import{r as t,c as i,h as a,H as e,g as o,F as s}from"./p-3fca9a05.js";import{c as r}from"./p-b7898321.js";import{i as l,g as n}from"./p-6e4e9ae0.js";import{S as p}from"./p-1486d7ea.js";import{v as d}from"./p-19b890a3.js";const c=class{constructor(a){t(this,a),this.ctaClick=i(this,"ctaClick",7),this.mobileViewChange=i(this,"mobileViewChange",7),this.navigationBackButtonClick=i(this,"navigationBackButtonClick",7),this.sidebarToggle=i(this,"sidebarToggle",7),this.onBackToNavigationViewButtonClick=()=>{this.changeMobileView("navigation")},this.onCtaClick=t=>{this.ctaClick.emit(t)},this.onNavigationBackButtonClick=t=>{this.navigationBackButtonClick.emit(t)},this.onSidebarCloseButtonClick=()=>{this.hideSidebar()},this.appName=void 0,this.backToNavigationViewButtonLabel="Back to navigation",this.ctaIcon=void 0,this.ctaLabel=void 0,this.hideAppBar=void 0,this.navigationBackButtonLabel="Go back",this.navigationLabel=void 0,this.showNavigationBackButton=void 0,this.sidebarCloseButtonLabel="Close sidebar",this.sidebarHeading=void 0,this.transitionStyle="slides",this.hasCustomAppBarBackButton=void 0,this.hasNavigation=void 0,this.hasSidebar=void 0,this.mobileView="navigation",this.sidebarActive=void 0,this.sidebarClosing=void 0,this.transitioningFrom=void 0,this.transitioningTo=void 0}componentWillLoad(){this.mutationObserver=new MutationObserver((()=>{this.updateCustomAppBarBackButtonStatus(),this.updateNavigationStatus(),this.updateSidebarStatus()})),this.mutationObserver.observe(this.el,{childList:!0}),queueMicrotask((()=>{this.updateCustomAppBarBackButtonStatus(),this.updateSidebarStatus(),this.updateNavigationStatus(),this.checkMobileView()}))}disconnectedCallback(){this.mutationObserver?.disconnect()}watchMobileView(){this.checkMobileView()}async showSidebar(){!this.sidebarActive&&this.hasSidebar&&(this.sidebarActive=!0,this.changeMobileView("sidebar"),this.sidebarToggle.emit(!0))}async hideSidebar(){if(!this.sidebarActive||!this.hasSidebar)return;Boolean(this.sidebarClosingTimeout)&&clearTimeout(this.sidebarClosingTimeout),this.sidebarClosing=!0;const t=l()?0:300;this.sidebarClosingTimeout=setTimeout((()=>{this.sidebarActive=!1,this.sidebarClosing=!1,this.changeMobileView("body"),this.sidebarToggle.emit(!1)}),t)}async toggleSidebar(){this.hasSidebar&&(this.sidebarActive?this.hideSidebar():this.showSidebar())}async changeMobileView(t,i=!0){if(this.mobileView===t||"navigation"===t&&!this.hasNavigation||"sidebar"===t&&!this.hasSidebar)return;if(!l()||!i)return this.mobileView=t,void this.mobileViewChange.emit(this.mobileView);Boolean(this.transitionTimeout)&&clearTimeout(this.transitionTimeout),this.transitioningFrom=this.mobileView,this.transitioningTo=t;let a=0;"slides"===this.transitionStyle?a=400:"dialog"===this.transitionStyle&&(a=300),this.transitionTimeout=setTimeout((()=>{this.mobileView=t,this.transitioningFrom=void 0,this.transitioningTo=void 0,this.mobileViewChange.emit(this.mobileView)}),a)}checkMobileView(){if("navigation"===this.mobileView&&!this.hasNavigation||"sidebar"===this.mobileView&&!this.hasSidebar)return void(this.mobileView="body");const t="sidebar"===this.mobileView||this.sidebarActive;t!==this.sidebarActive&&(t?this.showSidebar():this.hideSidebar())}updateNavigationStatus(){this.hasNavigation=Boolean(this.el.querySelector('[slot="navigation"]'))}updateCustomAppBarBackButtonStatus(){this.hasCustomAppBarBackButton=Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'))}updateSidebarStatus(){this.hasSidebar=Boolean(this.el.querySelector('[slot="sidebar"]'))}render(){const t=("body"===this.mobileView||this.transitioningTo)&&this.hasNavigation&&!this.hasCustomAppBarBackButton,i=Boolean(this.el.querySelector('[slot="app-bar-controls"]')),o=Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')),s=Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')),l=r("app-layout",`app-layout--mobile-view-${this.mobileView}`,`app-layout--transitioning-from-${this.transitioningFrom}`,`app-layout--transitioning-to-${this.transitioningTo}`,`app-layout--transition-style-${this.transitionStyle}`,{"app-layout--has-app-bar-mobile-menu-button":o,"app-layout--has-app-bar-controls":i,"app-layout--has-custom-app-bar-back-button":this.hasCustomAppBarBackButton,"app-layout--has-custom-sidebar-header":s,"app-layout--has-navigation":this.hasNavigation,"app-layout--has-sidebar":this.hasSidebar,"app-layout--hide-app-bar":this.hideAppBar,"app-layout--sidebar-active":"sidebar"===this.mobileView||this.sidebarActive,"app-layout--sidebar-closing":this.sidebarClosing});return a(e,null,a("section",{"aria-labelledby":"app-name",class:l,role:"document",tabIndex:0},a("div",{class:"app-layout__grid"},a("header",{class:"app-layout__header"},a("span",{class:"app-layout__navigation-mobile-menu-button"},a("slot",{name:"navigation-mobile-menu-button"})),this.showNavigationBackButton&&a("span",{class:"app-layout__navigation-back-button"},a("swirl-button",{hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),a("swirl-heading",{as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),this.hasNavigation&&a("span",{class:"app-layout__navigation-controls"},a("slot",{name:"navigation-controls"}))),a("nav",{"aria-label":this.navigationLabel,class:"app-layout__navigation"},a("slot",{name:"navigation"})),a("section",{"aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&a("header",{class:"app-layout__app-bar"},a("span",{class:"app-layout__app-bar-mobile-menu-button"},a("slot",{name:"app-bar-mobile-menu-button"})),t&&a("span",{class:"app-layout__back-to-navigation-button"},a("swirl-button",{hideLabel:!0,icon:"dialog"===this.transitionStyle?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backToNavigationViewButtonLabel,onClick:this.onBackToNavigationViewButtonClick})),a("span",{class:"app-layout__custom-app-bar-back-button"},a("slot",{name:"custom-app-bar-back-button"})),a("div",{class:"app-layout__app-bar-content"},a("slot",{name:"app-bar"})),a("div",{class:"app-layout__app-bar-controls"},a("slot",{name:"app-bar-controls"}))),a("div",{class:"app-layout__banner"},a("slot",{name:"banner"})),a("div",{class:"app-layout__content"},a("slot",{name:"content"}))),a("aside",{class:"app-layout__sidebar"},a("header",{class:"app-layout__custom-sidebar-header"},a("slot",{name:"custom-sidebar-header"})),a("header",{class:"app-layout__sidebar-header"},a("swirl-button",{class:"app-layout__sidebar-close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),a("swirl-heading",{as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),a("div",{class:"app-layout__sidebar-content"},a("slot",{name:"sidebar"}))),this.ctaLabel&&a("span",{class:"app-layout__floating-cta"},a("swirl-button",{hideLabel:Boolean(this.ctaIcon),icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"})))))}get el(){return o(this)}static get watchers(){return{mobileView:["watchMobileView"]}}};c.style=':host{position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:3.5625rem 1fr;grid-template-areas:"body"\n "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"\n "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"\n "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"\n "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"\n "navigation body sidebar"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"\n "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"\n "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"\n "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"\n "content"}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5rem, auto) auto 1fr;grid-template-areas:"app-bar"\n "banner"\n "content";will-change:transform}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);will-change:transform;grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:"sidebar-header"\n "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"\n "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"\n "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}';const u=class{constructor(i){t(this,i),this.heading=void 0,this.illustration=void 0}render(){return a(e,null,a("div",{class:"empty-state"},this.illustration&&a("img",{alt:"",class:"empty-state__illustration",src:this.illustration}),a("div",{class:"empty-state__body"},this.heading&&a("swirl-heading",{align:"center",as:"p",level:4,text:this.heading}),a("div",{class:"empty-state__content"},a("swirl-text",{align:"center",color:"subdued"},a("slot",null))))))}};u.style=":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}";const m=class{constructor(i){t(this,i),this.size=24}render(){const t=20===this.size?24:this.size,i=r("swirl-icon",`swirl-icon--size-${this.size}`);return a("svg",{class:i,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${t} ${t}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&a(s,null,a("path",{d:"M3.99999 1.33334C3.26666 1.33334 2.67332 1.93334 2.67332 2.66668L2.66666 13.3333C2.66666 14.0667 3.25999 14.6667 3.99332 14.6667H12C12.7333 14.6667 13.3333 14.0667 13.3333 13.3333V5.88668C13.3333 5.53334 13.1933 5.19334 12.94 4.94668L9.71999 1.72668C9.47332 1.47334 9.13332 1.33334 8.77999 1.33334H3.99999ZM8.66666 5.33334V2.33334L12.3333 6.00001H9.33332C8.96666 6.00001 8.66666 5.70001 8.66666 5.33334Z",fill:"currentColor"})),(20===this.size||24===this.size)&&a(s,null,a("path",{d:"M6 2C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8.83C20 8.3 19.79 7.79 19.41 7.42L14.58 2.59C14.21 2.21 13.7 2 13.17 2H6ZM13 8V3.5L18.5 9H14C13.45 9 13 8.55 13 8Z",fill:"currentColor"})),28===this.size&&a(s,null,a("path",{d:"M6.99999 2.33334C5.71666 2.33334 4.67832 3.38334 4.67832 4.66668L4.66666 23.3333C4.66666 24.6167 5.70499 25.6667 6.98832 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3333V10.3017C23.3333 9.68334 23.0883 9.08834 22.645 8.65668L17.01 3.02168C16.5783 2.57834 15.9833 2.33334 15.365 2.33334H6.99999ZM15.1667 9.33334V4.08334L21.5833 10.5H16.3333C15.6917 10.5 15.1667 9.97501 15.1667 9.33334Z",fill:"currentColor"})))}};m.style=":host{display:inline-flex}";const h=class{constructor(i){t(this,i),this.size=24}render(){const t=20===this.size?24:this.size,i=r("swirl-icon",`swirl-icon--size-${this.size}`);return a("svg",{class:i,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${t} ${t}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&a(s,null,a("path",{d:"M13.3333 3.99996H8.00001L7.06001 3.05996C6.80668 2.80663 6.46668 2.66663 6.11334 2.66663H2.66668C1.93334 2.66663 1.34001 3.26663 1.34001 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66668 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM10 5.99996C10.7333 5.99996 11.3333 6.59996 11.3333 7.33329C11.3333 8.06663 10.7333 8.66663 10 8.66663C9.26668 8.66663 8.66668 8.06663 8.66668 7.33329C8.66668 6.59996 9.26668 5.99996 10 5.99996ZM12.6667 11.3333H7.33334V10.6666C7.33334 9.77996 9.11334 9.33329 10 9.33329C10.8867 9.33329 12.6667 9.77996 12.6667 10.6666V11.3333Z",fill:"currentColor"})),(20===this.size||24===this.size)&&a(s,null,a("path",{d:"M20 6H12L10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM15 9C16.1 9 17 9.9 17 11C17 12.1 16.1 13 15 13C13.9 13 13 12.1 13 11C13 9.9 13.9 9 15 9ZM19 17H11V16C11 14.67 13.67 14 15 14C16.33 14 19 14.67 19 16V17Z",fill:"currentColor"})),28===this.size&&a(s,null,a("path",{d:"M23.3333 6.99996H14L12.355 5.35496C11.9117 4.91163 11.3167 4.66663 10.6983 4.66663H4.66668C3.38334 4.66663 2.34501 5.71663 2.34501 6.99996L2.33334 21C2.33334 22.2833 3.38334 23.3333 4.66668 23.3333H23.3333C24.6167 23.3333 25.6667 22.2833 25.6667 21V9.33329C25.6667 8.04996 24.6167 6.99996 23.3333 6.99996ZM17.5 10.5C18.7833 10.5 19.8333 11.55 19.8333 12.8333C19.8333 14.1166 18.7833 15.1666 17.5 15.1666C16.2167 15.1666 15.1667 14.1166 15.1667 12.8333C15.1667 11.55 16.2167 10.5 17.5 10.5ZM22.1667 19.8333H12.8333V18.6666C12.8333 17.115 15.9483 16.3333 17.5 16.3333C19.0517 16.3333 22.1667 17.115 22.1667 18.6666V19.8333Z",fill:"currentColor"})))}};h.style=":host{display:inline-flex}";const b=class{constructor(a){t(this,a),this.itemDrop=i(this,"itemDrop",7),this.focusedIndex=0,this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItemAtIndex(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const i=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Space"===t.code||"Enter"===t.code){const i=t.composedPath()[0];Boolean(this.dragging)&&!i?.classList.contains("resource-list-item__drag-handle")&&(t.preventDefault(),this.stopDrag(this.dragging))}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1))},this.allowDrag=void 0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.label=void 0,this.assistiveText=void 0}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setItemAllowDragState(),this.setupDragDrop()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}collectItems(){this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex])}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}removeItemsFromTabOrder(){this.items.forEach((t=>{const i=t?.querySelector(".resource-list-item__content, .resource-list-file-item"),a=t?.querySelector(".resource-list-item__drag-handle");i?.setAttribute("tabIndex","-1"),a?.setAttribute("tabIndex","-1")}))}setItemAllowDragState(){this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=p.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,i){if(!Boolean(t))return;const a=t.querySelector(".resource-list-item__content, .resource-list-file-item"),e=t.querySelector(".resource-list-item__drag-handle");Boolean(e)&&e.setAttribute("tabIndex","0"),Boolean(a)&&(a.setAttribute("tabIndex","0"),i&&a.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const i=this.items[t];Boolean(i)&&i.isConnected&&(this.enableItemFocus(i,!0),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}render(){return a(e,{onKeyDown:this.onKeyDown},a("swirl-visually-hidden",{role:"alert"},this.assistiveText),a("swirl-stack",{"aria-label":this.label,class:"resource-list",ref:t=>this.gridEl=t,role:"grid"},a("slot",null)))}get el(){return o(this)}static get watchers(){return{allowDrag:["watchAllowDrag"]}}};b.style=".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";const y=class{constructor(a){t(this,a),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.desktopMediaQuery=n(),this.id=d(),this.desktopMediaQueryHandler=t=>{this.forceIconProps(t.matches),this.updateIconSize(t.matches)},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onMenuTriggerClick=t=>{this.disabled&&!Boolean(this.href)&&t.stopPropagation()},this.onDragHandleKeyDown=t=>{"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),this.toggleDrag.emit(this.el))},this.active=void 0,this.allowDrag=void 0,this.checked=!1,this.description=void 0,this.disabled=void 0,this.dragging=void 0,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.hideDivider=void 0,this.href=void 0,this.interactive=!0,this.label=void 0,this.labelWeight="medium",this.menuTriggerId=void 0,this.menuTriggerLabel="Options",this.meta=void 0,this.selectable=void 0,this.value=void 0,this.hasMedia=!1,this.iconSize=24}async componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.updateIconSize(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler,Boolean(this.menuTriggerId)&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.desktopMediaQuery.removeEventListener?.("change",this.desktopMediaQueryHandler)}forceIconProps(t){const i=this.iconEl?.children[0];i?.setAttribute("size",t?"20":"24")}updateIconSize(t){this.iconSize=t?20:24}updateMediaState(){const t=this.el.querySelector('[slot="media"]'),i=Boolean(t);i!==this.hasMedia&&(this.hasMedia=i)}render(){const t=this.interactive||this.selectable?Boolean(this.href)&&!this.selectable?"a":"button":"div",i=this.disabled&&!Boolean(this.href),o=Boolean(this.el.querySelector("[slot='badges']")),s=Boolean(this.menuTriggerId)||this.el.querySelector("[slot='control']"),l=this.interactive&&Boolean(this.href)?this.href:void 0,n=Boolean(this.meta)||o,p=Boolean(this.menuTriggerId)&&!Boolean(this.meta)&&!this.selectable,d=(Boolean(this.meta)||o)&&!this.selectable,c=this.selectable?String(this.checked):void 0,u=this.interactive&&this.selectable?"checkbox":void 0,m=r("resource-list-item",`resource-list-item--label-weight-${this.labelWeight}`,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-menu":s,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":n,"resource-list-item--show-meta":d});return a(e,{role:"row"},a("div",{class:m,role:"gridcell"},a(t,{"aria-checked":c,"aria-disabled":i?"true":void 0,"aria-labelledby":this.id,class:"resource-list-item__content",href:l,disabled:i,onClick:this.onClick,part:"resource-list-item__content",role:u,tabIndex:0,type:"button"===t?"button":void 0},this.hasMedia&&a("span",{class:"resource-list-item__media"},a("slot",{name:"media"})),a("span",{class:"resource-list-item__label-container"},a("span",{class:"resource-list-item__label",id:this.id,innerHTML:this.label}),this.description&&a("span",{class:"resource-list-item__description"},this.description)),d&&a("span",{class:"resource-list-item__meta"},a("span",{class:"resource-list-item__meta-text"},this.meta),a("span",{class:"resource-list-item__badges"},a("slot",{name:"badges"})))),this.selectable&&a("span",{"aria-hidden":"true",class:"resource-list-item__checkbox"},a("span",{class:"resource-list-item__checkbox-icon"},this.checked&&a("swirl-icon-check-strong",null))),a("span",{class:"resource-list-item__control"},a("slot",{name:"control"})),p&&a("swirl-popover-trigger",{popover:this.menuTriggerId},a("swirl-button",{"aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&a("button",{"aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},a("swirl-icon-drag-handle",{size:this.iconSize})))}get el(){return o(this)}};y.style='.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta){display:flex;align-items:center}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta) .resource-list-item__control.sc-swirl-resource-list-item{position:relative;top:auto;right:auto;transform:none}.resource-list-item--interactive.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled),.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item:after{display:none}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container.sc-swirl-resource-list-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.resource-list-item__label.sc-swirl-resource-list-item b.sc-swirl-resource-list-item,.resource-list-item__label.sc-swirl-resource-list-item strong.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}';export{c as swirl_app_layout,u as swirl_empty_state,m as swirl_icon_file,h as swirl_icon_folder_shared,b as swirl_resource_list,y as swirl_resource_list_item}
1
+ import{r as t,c as i,h as a,H as e,g as o,F as s}from"./p-3fca9a05.js";import{c as r}from"./p-b7898321.js";import{i as l,g as n}from"./p-6e4e9ae0.js";import{S as p}from"./p-1486d7ea.js";import{v as d}from"./p-19b890a3.js";const c=class{constructor(a){t(this,a),this.ctaClick=i(this,"ctaClick",7),this.mobileViewChange=i(this,"mobileViewChange",7),this.navigationBackButtonClick=i(this,"navigationBackButtonClick",7),this.sidebarToggle=i(this,"sidebarToggle",7),this.onBackToNavigationViewButtonClick=()=>{this.changeMobileView("navigation")},this.onCtaClick=t=>{this.ctaClick.emit(t)},this.onNavigationBackButtonClick=t=>{this.navigationBackButtonClick.emit(t)},this.onSidebarCloseButtonClick=()=>{this.hideSidebar()},this.appName=void 0,this.backToNavigationViewButtonLabel="Back to navigation",this.ctaIcon=void 0,this.ctaLabel=void 0,this.hideAppBar=void 0,this.navigationBackButtonLabel="Go back",this.navigationLabel=void 0,this.showNavigationBackButton=void 0,this.sidebarCloseButtonLabel="Close sidebar",this.sidebarHeading=void 0,this.transitionStyle="slides",this.hasCustomAppBarBackButton=void 0,this.hasNavigation=void 0,this.hasSidebar=void 0,this.mobileView="navigation",this.sidebarActive=void 0,this.sidebarClosing=void 0,this.transitioningFrom=void 0,this.transitioningTo=void 0}componentWillLoad(){this.mutationObserver=new MutationObserver((()=>{this.updateCustomAppBarBackButtonStatus(),this.updateNavigationStatus(),this.updateSidebarStatus()})),this.mutationObserver.observe(this.el,{childList:!0}),queueMicrotask((()=>{this.updateCustomAppBarBackButtonStatus(),this.updateSidebarStatus(),this.updateNavigationStatus(),this.checkMobileView()}))}disconnectedCallback(){this.mutationObserver?.disconnect()}watchMobileView(){this.checkMobileView()}async showSidebar(){!this.sidebarActive&&this.hasSidebar&&(this.sidebarActive=!0,this.changeMobileView("sidebar"),this.sidebarToggle.emit(!0))}async hideSidebar(){if(!this.sidebarActive||!this.hasSidebar)return;Boolean(this.sidebarClosingTimeout)&&clearTimeout(this.sidebarClosingTimeout),this.sidebarClosing=!0;const t=l()?0:300;this.sidebarClosingTimeout=setTimeout((()=>{this.sidebarActive=!1,this.sidebarClosing=!1,this.changeMobileView("body"),this.sidebarToggle.emit(!1)}),t)}async toggleSidebar(){this.hasSidebar&&(this.sidebarActive?this.hideSidebar():this.showSidebar())}async changeMobileView(t,i=!0){if(this.mobileView===t||"navigation"===t&&!this.hasNavigation||"sidebar"===t&&!this.hasSidebar)return;if(!l()||!i)return this.mobileView=t,void this.mobileViewChange.emit(this.mobileView);Boolean(this.transitionTimeout)&&clearTimeout(this.transitionTimeout),this.transitioningFrom=this.mobileView,this.transitioningTo=t;let a=0;"slides"===this.transitionStyle?a=400:"dialog"===this.transitionStyle&&(a=300),this.transitionTimeout=setTimeout((()=>{this.mobileView=t,this.transitioningFrom=void 0,this.transitioningTo=void 0,this.mobileViewChange.emit(this.mobileView)}),a)}checkMobileView(){if("navigation"===this.mobileView&&!this.hasNavigation||"sidebar"===this.mobileView&&!this.hasSidebar)return void(this.mobileView="body");const t="sidebar"===this.mobileView||this.sidebarActive;t!==this.sidebarActive&&(t?this.showSidebar():this.hideSidebar())}updateNavigationStatus(){this.hasNavigation=Boolean(this.el.querySelector('[slot="navigation"]'))}updateCustomAppBarBackButtonStatus(){this.hasCustomAppBarBackButton=Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'))}updateSidebarStatus(){this.hasSidebar=Boolean(this.el.querySelector('[slot="sidebar"]'))}render(){const t=("body"===this.mobileView||this.transitioningTo)&&this.hasNavigation&&!this.hasCustomAppBarBackButton,i=Boolean(this.el.querySelector('[slot="app-bar-controls"]')),o=Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')),s=Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')),l=r("app-layout",`app-layout--mobile-view-${this.mobileView}`,`app-layout--transitioning-from-${this.transitioningFrom}`,`app-layout--transitioning-to-${this.transitioningTo}`,`app-layout--transition-style-${this.transitionStyle}`,{"app-layout--has-app-bar-mobile-menu-button":o,"app-layout--has-app-bar-controls":i,"app-layout--has-custom-app-bar-back-button":this.hasCustomAppBarBackButton,"app-layout--has-custom-sidebar-header":s,"app-layout--has-navigation":this.hasNavigation,"app-layout--has-sidebar":this.hasSidebar,"app-layout--hide-app-bar":this.hideAppBar,"app-layout--sidebar-active":"sidebar"===this.mobileView||this.sidebarActive,"app-layout--sidebar-closing":this.sidebarClosing});return a(e,null,a("section",{"aria-labelledby":"app-name",class:l,role:"document",tabIndex:0},a("div",{class:"app-layout__grid"},a("header",{class:"app-layout__header"},a("span",{class:"app-layout__navigation-mobile-menu-button"},a("slot",{name:"navigation-mobile-menu-button"})),this.showNavigationBackButton&&a("span",{class:"app-layout__navigation-back-button"},a("swirl-button",{hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),a("swirl-heading",{as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),this.hasNavigation&&a("span",{class:"app-layout__navigation-controls"},a("slot",{name:"navigation-controls"}))),a("nav",{"aria-label":this.navigationLabel,class:"app-layout__navigation"},a("slot",{name:"navigation"})),a("section",{"aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&a("header",{class:"app-layout__app-bar"},a("span",{class:"app-layout__app-bar-mobile-menu-button"},a("slot",{name:"app-bar-mobile-menu-button"})),t&&a("span",{class:"app-layout__back-to-navigation-button"},a("swirl-button",{hideLabel:!0,icon:"dialog"===this.transitionStyle?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backToNavigationViewButtonLabel,onClick:this.onBackToNavigationViewButtonClick})),a("span",{class:"app-layout__custom-app-bar-back-button"},a("slot",{name:"custom-app-bar-back-button"})),a("div",{class:"app-layout__app-bar-content"},a("slot",{name:"app-bar"})),a("div",{class:"app-layout__app-bar-controls"},a("slot",{name:"app-bar-controls"}))),a("div",{class:"app-layout__banner"},a("slot",{name:"banner"})),a("div",{class:"app-layout__content"},a("slot",{name:"content"}))),a("aside",{class:"app-layout__sidebar"},a("header",{class:"app-layout__custom-sidebar-header"},a("slot",{name:"custom-sidebar-header"})),a("header",{class:"app-layout__sidebar-header"},a("swirl-button",{class:"app-layout__sidebar-close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),a("swirl-heading",{as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),a("div",{class:"app-layout__sidebar-content"},a("slot",{name:"sidebar"}))),this.ctaLabel&&a("span",{class:"app-layout__floating-cta"},a("swirl-button",{hideLabel:Boolean(this.ctaIcon),icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"})))))}get el(){return o(this)}static get watchers(){return{mobileView:["watchMobileView"]}}};c.style=':host{position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:3.5625rem 1fr;grid-template-areas:"body"\n "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"\n "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"\n "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"\n "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"\n "navigation body sidebar"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:"header body"\n "navigation body"}}@media (min-width: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"\n "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"\n "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"\n "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1800px){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"\n "content"}.app-layout__header{z-index:1;display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5rem, auto) auto 1fr;grid-template-areas:"app-bar"\n "banner"\n "content";will-change:transform}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);will-change:transform;grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:"sidebar-header"\n "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"\n "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"\n "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}';const u=class{constructor(i){t(this,i),this.heading=void 0,this.illustration=void 0}render(){return a(e,null,a("div",{class:"empty-state"},this.illustration&&a("img",{alt:"",class:"empty-state__illustration",src:this.illustration}),a("div",{class:"empty-state__body"},this.heading&&a("swirl-heading",{align:"center",as:"p",level:4,text:this.heading}),a("div",{class:"empty-state__content"},a("swirl-text",{align:"center",color:"subdued"},a("slot",null))))))}};u.style=":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}";const m=class{constructor(i){t(this,i),this.size=24}render(){const t=20===this.size?24:this.size,i=r("swirl-icon",`swirl-icon--size-${this.size}`);return a("svg",{class:i,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${t} ${t}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&a(s,null,a("path",{d:"M3.99999 1.33334C3.26666 1.33334 2.67332 1.93334 2.67332 2.66668L2.66666 13.3333C2.66666 14.0667 3.25999 14.6667 3.99332 14.6667H12C12.7333 14.6667 13.3333 14.0667 13.3333 13.3333V5.88668C13.3333 5.53334 13.1933 5.19334 12.94 4.94668L9.71999 1.72668C9.47332 1.47334 9.13332 1.33334 8.77999 1.33334H3.99999ZM8.66666 5.33334V2.33334L12.3333 6.00001H9.33332C8.96666 6.00001 8.66666 5.70001 8.66666 5.33334Z",fill:"currentColor"})),(20===this.size||24===this.size)&&a(s,null,a("path",{d:"M6 2C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8.83C20 8.3 19.79 7.79 19.41 7.42L14.58 2.59C14.21 2.21 13.7 2 13.17 2H6ZM13 8V3.5L18.5 9H14C13.45 9 13 8.55 13 8Z",fill:"currentColor"})),28===this.size&&a(s,null,a("path",{d:"M6.99999 2.33334C5.71666 2.33334 4.67832 3.38334 4.67832 4.66668L4.66666 23.3333C4.66666 24.6167 5.70499 25.6667 6.98832 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3333V10.3017C23.3333 9.68334 23.0883 9.08834 22.645 8.65668L17.01 3.02168C16.5783 2.57834 15.9833 2.33334 15.365 2.33334H6.99999ZM15.1667 9.33334V4.08334L21.5833 10.5H16.3333C15.6917 10.5 15.1667 9.97501 15.1667 9.33334Z",fill:"currentColor"})))}};m.style=":host{display:inline-flex}";const h=class{constructor(i){t(this,i),this.size=24}render(){const t=20===this.size?24:this.size,i=r("swirl-icon",`swirl-icon--size-${this.size}`);return a("svg",{class:i,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${t} ${t}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&a(s,null,a("path",{d:"M13.3333 3.99996H8.00001L7.06001 3.05996C6.80668 2.80663 6.46668 2.66663 6.11334 2.66663H2.66668C1.93334 2.66663 1.34001 3.26663 1.34001 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66668 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM10 5.99996C10.7333 5.99996 11.3333 6.59996 11.3333 7.33329C11.3333 8.06663 10.7333 8.66663 10 8.66663C9.26668 8.66663 8.66668 8.06663 8.66668 7.33329C8.66668 6.59996 9.26668 5.99996 10 5.99996ZM12.6667 11.3333H7.33334V10.6666C7.33334 9.77996 9.11334 9.33329 10 9.33329C10.8867 9.33329 12.6667 9.77996 12.6667 10.6666V11.3333Z",fill:"currentColor"})),(20===this.size||24===this.size)&&a(s,null,a("path",{d:"M20 6H12L10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM15 9C16.1 9 17 9.9 17 11C17 12.1 16.1 13 15 13C13.9 13 13 12.1 13 11C13 9.9 13.9 9 15 9ZM19 17H11V16C11 14.67 13.67 14 15 14C16.33 14 19 14.67 19 16V17Z",fill:"currentColor"})),28===this.size&&a(s,null,a("path",{d:"M23.3333 6.99996H14L12.355 5.35496C11.9117 4.91163 11.3167 4.66663 10.6983 4.66663H4.66668C3.38334 4.66663 2.34501 5.71663 2.34501 6.99996L2.33334 21C2.33334 22.2833 3.38334 23.3333 4.66668 23.3333H23.3333C24.6167 23.3333 25.6667 22.2833 25.6667 21V9.33329C25.6667 8.04996 24.6167 6.99996 23.3333 6.99996ZM17.5 10.5C18.7833 10.5 19.8333 11.55 19.8333 12.8333C19.8333 14.1166 18.7833 15.1666 17.5 15.1666C16.2167 15.1666 15.1667 14.1166 15.1667 12.8333C15.1667 11.55 16.2167 10.5 17.5 10.5ZM22.1667 19.8333H12.8333V18.6666C12.8333 17.115 15.9483 16.3333 17.5 16.3333C19.0517 16.3333 22.1667 17.115 22.1667 18.6666V19.8333Z",fill:"currentColor"})))}};h.style=":host{display:inline-flex}";const b=class{constructor(a){t(this,a),this.itemDrop=i(this,"itemDrop",7),this.focusedIndex=0,this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItemAtIndex(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const i=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Space"===t.code||"Enter"===t.code){const i=t.composedPath()[0];Boolean(this.dragging)&&!i?.classList.contains("resource-list-item__drag-handle")&&(t.preventDefault(),this.stopDrag(this.dragging))}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1))},this.allowDrag=void 0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.label=void 0,this.assistiveText=void 0}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setItemAllowDragState(),this.setupDragDrop()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}collectItems(){this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex])}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}removeItemsFromTabOrder(){this.items.forEach((t=>{const i=t?.querySelector(".resource-list-item__content, .resource-list-file-item"),a=t?.querySelector(".resource-list-item__drag-handle");i?.setAttribute("tabIndex","-1"),a?.setAttribute("tabIndex","-1")}))}setItemAllowDragState(){this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=p.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,i){if(!Boolean(t))return;const a=t.querySelector(".resource-list-item__content, .resource-list-file-item"),e=t.querySelector(".resource-list-item__drag-handle");Boolean(e)&&e.setAttribute("tabIndex","0"),Boolean(a)&&(a.setAttribute("tabIndex","0"),i&&a.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const i=this.items[t];Boolean(i)&&i.isConnected&&(this.enableItemFocus(i,!0),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}render(){return a(e,{onKeyDown:this.onKeyDown},a("swirl-visually-hidden",{role:"alert"},this.assistiveText),a("swirl-stack",{"aria-label":this.label,class:"resource-list",ref:t=>this.gridEl=t,role:"grid"},a("slot",null)))}get el(){return o(this)}static get watchers(){return{allowDrag:["watchAllowDrag"]}}};b.style=".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";const y=class{constructor(a){t(this,a),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.desktopMediaQuery=n(),this.id=d(),this.desktopMediaQueryHandler=t=>{this.forceIconProps(t.matches),this.updateIconSize(t.matches)},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=t=>{this.disabled&&!Boolean(this.href)&&t.stopPropagation()},this.onDragHandleKeyDown=t=>{"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),this.toggleDrag.emit(this.el))},this.active=void 0,this.allowDrag=void 0,this.checked=!1,this.description=void 0,this.disabled=void 0,this.dragging=void 0,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.hideDivider=void 0,this.href=void 0,this.interactive=!0,this.label=void 0,this.labelWeight="medium",this.menuTriggerId=void 0,this.menuTriggerLabel="Options",this.meta=void 0,this.selectable=void 0,this.value=void 0,this.hasMedia=!1,this.iconSize=24}async componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.forceIconProps(this.desktopMediaQuery.matches),this.updateIconSize(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler,this.makeControlUnfocusable(),Boolean(this.menuTriggerId)&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.desktopMediaQuery.removeEventListener?.("change",this.desktopMediaQueryHandler)}forceIconProps(t){const i=this.iconEl?.children[0];i?.setAttribute("size",t?"20":"24")}updateIconSize(t){this.iconSize=t?20:24}updateMediaState(){const t=this.el.querySelector('[slot="media"]'),i=Boolean(t);i!==this.hasMedia&&(this.hasMedia=i)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){const t=this.getControl();Boolean(t)&&(t.tabIndex=0)}makeControlUnfocusable(){const t=this.getControl();Boolean(t)&&(t.tabIndex=-1)}render(){const t=this.interactive||this.selectable?Boolean(this.href)&&!this.selectable?"a":"button":"div",i=this.disabled&&!Boolean(this.href),o=Boolean(this.el.querySelector("[slot='badges']")),s=Boolean(this.menuTriggerId)||this.el.querySelector("[slot='control']"),l=this.interactive&&Boolean(this.href)?this.href:void 0,n=Boolean(this.meta)||o,p=Boolean(this.menuTriggerId)&&!Boolean(this.meta)&&!this.selectable,d=(Boolean(this.meta)||o)&&!this.selectable,c=this.selectable?String(this.checked):void 0,u=this.interactive&&this.selectable?"checkbox":void 0,m=r("resource-list-item",`resource-list-item--label-weight-${this.labelWeight}`,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-menu":s,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":n,"resource-list-item--show-meta":d});return a(e,{role:"row"},a("div",{class:m,role:"gridcell"},a(t,{"aria-checked":c,"aria-disabled":i?"true":void 0,"aria-labelledby":this.id,class:"resource-list-item__content",href:l,disabled:i,onClick:this.onClick,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:u,tabIndex:0,type:"button"===t?"button":void 0},this.hasMedia&&a("span",{class:"resource-list-item__media"},a("slot",{name:"media"})),a("span",{class:"resource-list-item__label-container"},a("span",{class:"resource-list-item__label",id:this.id,innerHTML:this.label}),this.description&&a("span",{class:"resource-list-item__description"},this.description)),d&&a("span",{class:"resource-list-item__meta"},a("span",{class:"resource-list-item__meta-text"},this.meta),a("span",{class:"resource-list-item__badges"},a("slot",{name:"badges"})))),this.selectable&&a("span",{"aria-hidden":"true",class:"resource-list-item__checkbox"},a("span",{class:"resource-list-item__checkbox-icon"},this.checked&&a("swirl-icon-check-strong",null))),a("span",{class:"resource-list-item__control"},a("slot",{name:"control"})),p&&a("swirl-popover-trigger",{popover:this.menuTriggerId},a("swirl-button",{"aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&a("button",{"aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},a("swirl-icon-drag-handle",{size:this.iconSize})))}get el(){return o(this)}};y.style='.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta){display:flex;align-items:center}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--show-meta) .resource-list-item__control.sc-swirl-resource-list-item{position:relative;top:auto;right:auto;transform:none}.resource-list-item--interactive.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled),.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item:after{display:none}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container.sc-swirl-resource-list-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.resource-list-item__label.sc-swirl-resource-list-item b.sc-swirl-resource-list-item,.resource-list-item__label.sc-swirl-resource-list-item strong.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}';export{c as swirl_app_layout,u as swirl_empty_state,m as swirl_icon_file,h as swirl_icon_folder_shared,b as swirl_resource_list,y as swirl_resource_list_item}