@getflip/swirl-components-react 0.17.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{file-manager.entry.1c3ef48d.js → file-manager.entry.91e047d0.js} +2 -3
- package/dist/{index.332a8127.js → index.4bf401f3.js} +4 -3
- package/dist/stencil-generated/index.d.ts +1 -0
- package/dist/{swirl-action-list-section.entry.35003473.js → swirl-action-list-section.entry.09f9362e.js} +1 -1
- package/dist/{swirl-action-list_3.entry.1157367a.js → swirl-action-list_3.entry.e25d53f4.js} +1 -1
- package/dist/{swirl-app-layout_5.entry.d2ec5635.js → swirl-app-layout_7.entry.89ad9c5a.js} +72 -53
- package/dist/{swirl-autocomplete.entry.13426556.js → swirl-autocomplete.entry.d6475cca.js} +1 -1
- package/dist/{swirl-avatar-group.entry.d873376f.js → swirl-avatar-group.entry.73f0cd07.js} +1 -1
- package/dist/{swirl-avatar.entry.b7b4836f.js → swirl-avatar.entry.903139a8.js} +1 -1
- package/dist/{swirl-badge.entry.d2fbeffa.js → swirl-badge.entry.716ca7a7.js} +1 -1
- package/dist/{swirl-banner.entry.e10d40e9.js → swirl-banner.entry.33d3bdc3.js} +1 -1
- package/dist/{swirl-button-group.entry.c9df9009.js → swirl-button-group.entry.7d949abb.js} +1 -1
- package/dist/{swirl-button.entry.35a701ab.js → swirl-button.entry.dc25fe0d.js} +1 -1
- package/dist/{swirl-card.entry.ab72e842.js → swirl-card.entry.0ba1923d.js} +1 -1
- package/dist/{swirl-checkbox.entry.e03fbc98.js → swirl-checkbox.entry.90325b95.js} +1 -1
- package/dist/{swirl-chip.entry.924a0587.js → swirl-chip.entry.4d02ce4d.js} +1 -1
- package/dist/swirl-columns.entry.84a934a0.js +18 -0
- package/dist/swirl-components-react.js +165 -164
- package/dist/swirl-components-react.umd.cjs +45 -45
- package/dist/{swirl-console-layout.entry.3de2ac6f.js → swirl-console-layout.entry.46d261e2.js} +1 -1
- package/dist/{swirl-date-input.entry.823ea869.js → swirl-date-input.entry.bb9ec2eb.js} +1 -1
- package/dist/{swirl-date-picker_2.entry.b401e4c3.js → swirl-date-picker_2.entry.4f5054db.js} +1 -1
- package/dist/{swirl-description-list-item.entry.09a297df.js → swirl-description-list-item.entry.b949d50b.js} +1 -1
- package/dist/{swirl-description-list.entry.f5ec5fc1.js → swirl-description-list.entry.6dc5fd4a.js} +1 -1
- package/dist/{swirl-dialog.entry.33d2ed55.js → swirl-dialog.entry.0f599a26.js} +1 -1
- package/dist/{swirl-file-uploader.entry.0814319c.js → swirl-file-uploader.entry.4da96fa3.js} +1 -1
- package/dist/{swirl-file-viewer_7.entry.82126dd4.js → swirl-file-viewer_7.entry.6a34624d.js} +1 -1
- package/dist/{swirl-form-control.entry.b59ade44.js → swirl-form-control.entry.86e31d55.js} +1 -1
- package/dist/{swirl-form-group.entry.04bb5ecd.js → swirl-form-group.entry.1a266f95.js} +1 -1
- package/dist/{swirl-heading.entry.5be42646.js → swirl-heading.entry.5c274ec2.js} +1 -1
- package/dist/{swirl-icon-add-photo.entry.9825a289.js → swirl-icon-add-photo.entry.e6ce2b5e.js} +1 -1
- package/dist/{swirl-icon-add_6.entry.5b057eda.js → swirl-icon-add_6.entry.06903f84.js} +1 -1
- package/dist/{swirl-icon-admin-panel-settings.entry.62e58680.js → swirl-icon-admin-panel-settings.entry.f5aaece2.js} +1 -1
- package/dist/{swirl-icon-arrow-back.entry.9be70369.js → swirl-icon-arrow-back.entry.9d6e60d3.js} +1 -1
- package/dist/{swirl-icon-arrow-downward_2.entry.acd1734a.js → swirl-icon-arrow-downward_2.entry.39305fda.js} +1 -1
- package/dist/{swirl-icon-arrow-forward.entry.43dbb71d.js → swirl-icon-arrow-forward.entry.13c5a807.js} +1 -1
- package/dist/{swirl-icon-arrow-left_4.entry.8dfb839c.js → swirl-icon-arrow-left_4.entry.47e83d29.js} +1 -1
- package/dist/{swirl-icon-arrow-right-small.entry.74c3d4ba.js → swirl-icon-arrow-right-small.entry.a2099885.js} +1 -1
- package/dist/{swirl-icon-attachment.entry.02c71814.js → swirl-icon-attachment.entry.45fbeb9d.js} +1 -1
- package/dist/{swirl-icon-block.entry.66d7cfd3.js → swirl-icon-block.entry.4cee0f12.js} +1 -1
- package/dist/{swirl-icon-bookmark.entry.8808c6fe.js → swirl-icon-bookmark.entry.ea2b796b.js} +1 -1
- package/dist/{swirl-icon-cancel_4.entry.b4cc84d0.js → swirl-icon-cancel_4.entry.04b967fc.js} +1 -1
- package/dist/{swirl-icon-chat-bubble.entry.b8df2fb0.js → swirl-icon-chat-bubble.entry.a403174d.js} +1 -1
- package/dist/{swirl-icon-chats-filled.entry.d8f2b6e6.js → swirl-icon-chats-filled.entry.bc79c691.js} +1 -1
- package/dist/{swirl-icon-chats-outlined.entry.de025fbe.js → swirl-icon-chats-outlined.entry.f32125bf.js} +1 -1
- package/dist/{swirl-icon-check-circle.entry.82e3eaa1.js → swirl-icon-check-circle.entry.0c6fc0ac.js} +1 -1
- package/dist/{swirl-icon-check-small_4.entry.23c52acd.js → swirl-icon-check-small_4.entry.c3c930f5.js} +1 -1
- package/dist/{swirl-icon-check-strong.entry.a6391d7c.js → swirl-icon-check-strong.entry.24dc0f4f.js} +1 -1
- package/dist/{swirl-icon-check.entry.75bba879.js → swirl-icon-check.entry.7ff1e001.js} +1 -1
- package/dist/{swirl-icon-chevron-left.entry.c9e21be1.js → swirl-icon-chevron-left.entry.66d62eec.js} +1 -1
- package/dist/{swirl-icon-chevron-right.entry.854a5e72.js → swirl-icon-chevron-right.entry.97fd54f2.js} +1 -1
- package/dist/{swirl-icon-close-small.entry.d752d265.js → swirl-icon-close-small.entry.d96cc6f8.js} +1 -1
- package/dist/{swirl-icon-close.entry.2a686870.js → swirl-icon-close.entry.cc9f64a8.js} +1 -1
- package/dist/{swirl-icon-cloud-upload.entry.1e0868a1.js → swirl-icon-cloud-upload.entry.a8460adb.js} +1 -1
- package/dist/{swirl-icon-column.entry.6701c0ef.js → swirl-icon-column.entry.ffc1dd82.js} +1 -1
- package/dist/{swirl-icon-comment.entry.fb9119b9.js → swirl-icon-comment.entry.192a1c02.js} +1 -1
- package/dist/{swirl-icon-copy.entry.d3209b15.js → swirl-icon-copy.entry.257024b1.js} +1 -1
- package/dist/{swirl-icon-date-range.entry.e86575f3.js → swirl-icon-date-range.entry.0903192f.js} +1 -1
- package/dist/{swirl-icon-delete.entry.9acb6844.js → swirl-icon-delete.entry.2f1d6a0f.js} +1 -1
- package/dist/{swirl-icon-description.entry.a4bb21d1.js → swirl-icon-description.entry.08557048.js} +1 -1
- package/dist/{swirl-icon-double-arrow-left.entry.07055fb6.js → swirl-icon-double-arrow-left.entry.948ee0cd.js} +1 -1
- package/dist/{swirl-icon-double-arrow-right.entry.b85ed28c.js → swirl-icon-double-arrow-right.entry.9fd39735.js} +1 -1
- package/dist/{swirl-icon-download.entry.005671ef.js → swirl-icon-download.entry.50c7659f.js} +1 -1
- package/dist/{swirl-icon-edit.entry.58d237be.js → swirl-icon-edit.entry.3a36928d.js} +1 -1
- package/dist/{swirl-icon-emoji-mood.entry.65a2a805.js → swirl-icon-emoji-mood.entry.ede61cd3.js} +1 -1
- package/dist/{swirl-icon-emoji-satisfied.entry.99f5b6cb.js → swirl-icon-emoji-satisfied.entry.ae004373.js} +1 -1
- package/dist/{swirl-icon-error_3.entry.378eefb9.js → swirl-icon-error_3.entry.80ab8d9c.js} +1 -1
- package/dist/{swirl-icon-expand-more.entry.ec6612f1.js → swirl-icon-expand-more.entry.324bf2d2.js} +1 -1
- package/dist/{swirl-icon-filter.entry.4a82e7bc.js → swirl-icon-filter.entry.c2178b89.js} +1 -1
- package/dist/{swirl-icon-folder.entry.e3f5c70e.js → swirl-icon-folder.entry.b7dd5d5e.js} +1 -1
- package/dist/{swirl-icon-group-assign.entry.ab2a1429.js → swirl-icon-group-assign.entry.421642cd.js} +1 -1
- package/dist/{swirl-icon-groups-custom.entry.577729bb.js → swirl-icon-groups-custom.entry.19cb7c80.js} +1 -1
- package/dist/{swirl-icon-groups-filled.entry.3e4de24a.js → swirl-icon-groups-filled.entry.adf7c8e0.js} +1 -1
- package/dist/{swirl-icon-groups-outlined.entry.71ee4e38.js → swirl-icon-groups-outlined.entry.f2357faa.js} +1 -1
- package/dist/{swirl-icon-groups.entry.faaafc56.js → swirl-icon-groups.entry.a3d7fa19.js} +1 -1
- package/dist/{swirl-icon-help.entry.0604849b.js → swirl-icon-help.entry.fd402f1d.js} +1 -1
- package/dist/{swirl-icon-image.entry.de2fa7b0.js → swirl-icon-image.entry.b9d555c5.js} +1 -1
- package/dist/{swirl-icon-info.entry.74d9bee0.js → swirl-icon-info.entry.9bcd48d2.js} +1 -1
- package/dist/{swirl-icon-inventory.entry.7cd79782.js → swirl-icon-inventory.entry.bc168492.js} +1 -1
- package/dist/{swirl-icon-like.entry.b5fa49ed.js → swirl-icon-like.entry.90ac31a7.js} +1 -1
- package/dist/{swirl-icon-link.entry.8115cdae.js → swirl-icon-link.entry.39b47ca7.js} +1 -1
- package/dist/{swirl-icon-lock.entry.483f3c58.js → swirl-icon-lock.entry.d0c22f47.js} +1 -1
- package/dist/{swirl-icon-logout.entry.af2792ac.js → swirl-icon-logout.entry.a4c2a839.js} +1 -1
- package/dist/{swirl-icon-mail.entry.f094ef07.js → swirl-icon-mail.entry.7b24e9dc.js} +1 -1
- package/dist/{swirl-icon-manage-accounts.entry.8c4dfa4e.js → swirl-icon-manage-accounts.entry.838968a7.js} +1 -1
- package/dist/{swirl-icon-mention.entry.5d8a6646.js → swirl-icon-mention.entry.83c4132b.js} +1 -1
- package/dist/{swirl-icon-menu-filled.entry.2845cb53.js → swirl-icon-menu-filled.entry.40586ada.js} +1 -1
- package/dist/{swirl-icon-menu-outlined.entry.81a6cbaa.js → swirl-icon-menu-outlined.entry.8692ba75.js} +1 -1
- package/dist/{swirl-icon-menu.entry.f286e86b.js → swirl-icon-menu.entry.c5f49a0c.js} +1 -1
- package/dist/{swirl-icon-message.entry.ac92d707.js → swirl-icon-message.entry.c1fc3eff.js} +1 -1
- package/dist/{swirl-icon-more-horizontal.entry.6e289d2c.js → swirl-icon-more-horizontal.entry.c0c83c8a.js} +1 -1
- package/dist/{swirl-icon-news-filled.entry.c0e5b307.js → swirl-icon-news-filled.entry.0d67c480.js} +1 -1
- package/dist/{swirl-icon-news-outlined.entry.abb5118e.js → swirl-icon-news-outlined.entry.4ea16b06.js} +1 -1
- package/dist/{swirl-icon-notifications-active.entry.d727f6d7.js → swirl-icon-notifications-active.entry.b45fbe4c.js} +1 -1
- package/dist/{swirl-icon-notifications-off.entry.cd737f62.js → swirl-icon-notifications-off.entry.08632bd2.js} +1 -1
- package/dist/{swirl-icon-notifications.entry.2f084fcb.js → swirl-icon-notifications.entry.b9a9a43b.js} +1 -1
- package/dist/{swirl-icon-open-in-new.entry.354f1414.js → swirl-icon-open-in-new.entry.a113fe06.js} +1 -1
- package/dist/{swirl-icon-people-alt.entry.26ba792f.js → swirl-icon-people-alt.entry.816c7edd.js} +1 -1
- package/dist/{swirl-icon-person-off.entry.1acfce05.js → swirl-icon-person-off.entry.79faa969.js} +1 -1
- package/dist/{swirl-icon-person.entry.3cf987fd.js → swirl-icon-person.entry.05fa32c0.js} +1 -1
- package/dist/{swirl-icon-phone.entry.49cd2cbb.js → swirl-icon-phone.entry.0d89d581.js} +1 -1
- package/dist/{swirl-icon-poll.entry.b71cc625.js → swirl-icon-poll.entry.8f9e7d67.js} +1 -1
- package/dist/{swirl-icon-print.entry.a2bf48d8.js → swirl-icon-print.entry.6349a5ca.js} +1 -1
- package/dist/{swirl-icon-recieved.entry.3011c690.js → swirl-icon-recieved.entry.0bb53e48.js} +1 -1
- package/dist/{swirl-icon-search-strong.entry.1100c429.js → swirl-icon-search-strong.entry.c883c95c.js} +1 -1
- package/dist/{swirl-icon-search.entry.89dcfedd.js → swirl-icon-search.entry.d6cd469d.js} +1 -1
- package/dist/{swirl-icon-send.entry.204b0f32.js → swirl-icon-send.entry.f84f1601.js} +1 -1
- package/dist/{swirl-icon-settings.entry.1061e46e.js → swirl-icon-settings.entry.5ba9ac37.js} +1 -1
- package/dist/{swirl-icon-sync.entry.09345e9e.js → swirl-icon-sync.entry.7207ead5.js} +1 -1
- package/dist/{swirl-icon-tasks-filled.entry.93ff607b.js → swirl-icon-tasks-filled.entry.42f38269.js} +1 -1
- package/dist/{swirl-icon-tasks-outlined.entry.d3293a2a.js → swirl-icon-tasks-outlined.entry.2803aae7.js} +1 -1
- package/dist/{swirl-icon-time-filled.entry.a64aa825.js → swirl-icon-time-filled.entry.63010131.js} +1 -1
- package/dist/{swirl-icon-time-outlined.entry.b58d6dfb.js → swirl-icon-time-outlined.entry.66126d65.js} +1 -1
- package/dist/{swirl-icon-user-assign.entry.0ce556c4.js → swirl-icon-user-assign.entry.f5537e3f.js} +1 -1
- package/dist/{swirl-icon-video-camera.entry.893601fb.js → swirl-icon-video-camera.entry.e5b3a867.js} +1 -1
- package/dist/{swirl-icon-warning.entry.5acf61f1.js → swirl-icon-warning.entry.1637be36.js} +1 -1
- package/dist/{swirl-lightbox.entry.9169f180.js → swirl-lightbox.entry.de9a7193.js} +1 -1
- package/dist/{swirl-link.entry.c1a53326.js → swirl-link.entry.d322c6cc.js} +1 -1
- package/dist/{swirl-list.entry.f81defcc.js → swirl-list.entry.abf8cf6a.js} +1 -1
- package/dist/{swirl-modal.entry.e1e7c191.js → swirl-modal.entry.ab9fe9a3.js} +2 -2
- package/dist/{swirl-option-list-section.entry.10143ed9.js → swirl-option-list-section.entry.8897f081.js} +1 -1
- package/dist/{swirl-pagination.entry.f93c40e9.js → swirl-pagination.entry.52ac14bc.js} +1 -1
- package/dist/{swirl-pdf-reader.entry.e930b358.js → swirl-pdf-reader.entry.483fc561.js} +1 -1
- package/dist/{swirl-popover.entry.31c7c575.js → swirl-popover.entry.54fb5879.js} +1 -1
- package/dist/{swirl-progress-indicator.entry.b9d7bbc6.js → swirl-progress-indicator.entry.2767a481.js} +1 -1
- package/dist/{swirl-radio-group.entry.74bb1439.js → swirl-radio-group.entry.c1bc1404.js} +1 -1
- package/dist/{swirl-radio.entry.54377c18.js → swirl-radio.entry.6fc51ce5.js} +1 -1
- package/dist/{swirl-resource-list-file-item.entry.bb72393e.js → swirl-resource-list-file-item.entry.3757aced.js} +1 -1
- package/dist/{swirl-search.entry.efdafd14.js → swirl-search.entry.556a00bc.js} +1 -1
- package/dist/{swirl-select.entry.9ba470ca.js → swirl-select.entry.7a55b5fb.js} +1 -1
- package/dist/{swirl-shell-layout.entry.9521218e.js → swirl-shell-layout.entry.fc7df852.js} +7 -7
- package/dist/{swirl-shell-navigation-item.entry.acb148ce.js → swirl-shell-navigation-item.entry.240daea6.js} +1 -1
- package/dist/{swirl-skeleton-box.entry.891d5cd8.js → swirl-skeleton-box.entry.98c4698e.js} +1 -1
- package/dist/{swirl-skeleton-text.entry.ce500235.js → swirl-skeleton-text.entry.46c6e31d.js} +1 -1
- package/dist/{swirl-stack.entry.0d5cea3c.js → swirl-stack.entry.c3bf26e5.js} +1 -1
- package/dist/{swirl-switch.entry.fea25aad.js → swirl-switch.entry.78a62b6c.js} +1 -1
- package/dist/{swirl-tab.entry.64855f4f.js → swirl-tab.entry.730f30b4.js} +1 -1
- package/dist/{swirl-table-cell.entry.a392a49d.js → swirl-table-cell.entry.0ec5ad04.js} +1 -1
- package/dist/{swirl-table-column.entry.4eb4dd95.js → swirl-table-column.entry.d9128109.js} +1 -1
- package/dist/{swirl-table-row-group.entry.96f0a162.js → swirl-table-row-group.entry.9444971c.js} +1 -1
- package/dist/{swirl-table-row.entry.419fdcfb.js → swirl-table-row.entry.ea8241e6.js} +1 -1
- package/dist/{swirl-table.entry.9a1663e8.js → swirl-table.entry.aac160bb.js} +1 -1
- package/dist/{swirl-tabs.entry.61ac48c0.js → swirl-tabs.entry.964f21d5.js} +1 -1
- package/dist/{swirl-tag.entry.68e7520c.js → swirl-tag.entry.d5951443.js} +1 -1
- package/dist/{swirl-text-input.entry.21054cb3.js → swirl-text-input.entry.ad0a9f63.js} +1 -1
- package/dist/{swirl-text.entry.8bdc313a.js → swirl-text.entry.028b7cd9.js} +1 -1
- package/dist/{swirl-theme-provider.entry.ba4ab374.js → swirl-theme-provider.entry.4195daa4.js} +1 -1
- package/dist/{swirl-toast-provider.entry.475a24e7.js → swirl-toast-provider.entry.21d50189.js} +1 -1
- package/dist/{swirl-toast.entry.fa6dced5.js → swirl-toast.entry.0bb8fb20.js} +1 -1
- package/dist/{swirl-tooltip.entry.63f2c997.js → swirl-tooltip.entry.56c2faa4.js} +1 -1
- package/dist/{swirl-tree-navigation-item.entry.ab054328.js → swirl-tree-navigation-item.entry.92ed8136.js} +1 -1
- package/dist/{swirl-video-thumbnail.entry.57bf93ed.js → swirl-video-thumbnail.entry.4385ad95.js} +1 -1
- package/dist/{swirl-visually-hidden.entry.d4035fe6.js → swirl-visually-hidden.entry.c5c28d4d.js} +1 -1
- package/dist/{wc-datepicker.entry.609a698a.js → wc-datepicker.entry.21d00449.js} +1 -1
- package/package.json +2 -2
- package/dist/swirl-icon-file.entry.e991b4b1.js +0 -17
- package/dist/swirl-icon-folder-shared.entry.f621d5a0.js +0 -17
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { r as
|
|
2
|
-
import { c as
|
|
3
|
-
import { i as
|
|
1
|
+
import { r as o, c as r, h as a, H as l, g as p, F as s } from "./index.4bf401f3.js";
|
|
2
|
+
import { c as d } from "./index-d280dafb.186cdb0e.js";
|
|
3
|
+
import { i as u } from "./utils-61f188cc.4a43deab.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import "react-dom";
|
|
6
|
-
const
|
|
6
|
+
const m = `: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:4rem 1fr;grid-template-areas:"body"
|
|
7
7
|
"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--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"
|
|
8
8
|
"navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:"header body"
|
|
9
9
|
"navigation body"}}@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"
|
|
@@ -14,13 +14,13 @@ const h = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
|
|
|
14
14
|
"navigation body"}}@media (min-width: 768px) and (max-width: 1439px){.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"
|
|
15
15
|
"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"
|
|
16
16
|
"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"
|
|
17
|
-
"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{-webkit-animation:app-layout-sidebar-overlay-slide-out 0.3s;animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:none;animation:none}}.app-layout__header{z-index:1;display:flex;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);align-items:center;background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}@media (min-width: 992px){.app-layout__header{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__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;background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;
|
|
18
|
-
"content";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}@media (min-width: 992px){.app-layout__app-bar{padding-left:var(--s-space-16)}}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;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}.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%;
|
|
19
|
-
"sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 992px){.app-layout__sidebar-header{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"
|
|
17
|
+
"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{-webkit-animation:app-layout-sidebar-overlay-slide-out 0.3s;animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:none;animation:none}}.app-layout__header{z-index:1;display:flex;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);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-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__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:4rem 1fr;grid-template-areas:"app-bar"
|
|
18
|
+
"content";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);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)}@media (min-width: 992px){.app-layout__app-bar{padding-left:var(--s-space-16)}}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;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}.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:4rem 1fr;grid-template-areas:"sidebar-header"
|
|
19
|
+
"sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);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: 992px){.app-layout__sidebar-header{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"
|
|
20
20
|
"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"
|
|
21
|
-
"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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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:"";-webkit-animation:app-layout-fade-in 0.4s;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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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:"";-webkit-animation:app-layout-fade-in 0.4s;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{-webkit-animation:app-layout-scale-in 0.3s;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{-webkit-animation:app-layout-scale-in 0.3s;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}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-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-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)}}@-webkit-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-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-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-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}`,
|
|
21
|
+
"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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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:"";-webkit-animation:app-layout-fade-in 0.4s;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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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:"";-webkit-animation:app-layout-fade-in 0.4s;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{-webkit-animation:app-layout-scale-in 0.3s;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{-webkit-animation:app-layout-scale-in 0.3s;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}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-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-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)}}@-webkit-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-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-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-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}`, g = class {
|
|
22
22
|
constructor(i) {
|
|
23
|
-
|
|
23
|
+
o(this, i), this.ctaClick = r(this, "ctaClick", 7), this.mobileViewChange = r(this, "mobileViewChange", 7), this.navigationBackButtonClick = r(this, "navigationBackButtonClick", 7), this.sidebarToggle = r(this, "sidebarToggle", 7), this.onBackToNavigationViewButtonClick = () => {
|
|
24
24
|
this.changeMobileView("navigation");
|
|
25
25
|
}, this.onCtaClick = (t) => {
|
|
26
26
|
this.ctaClick.emit(t);
|
|
@@ -51,7 +51,7 @@ const h = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
|
|
|
51
51
|
if (!this.sidebarActive || !this.hasSidebar)
|
|
52
52
|
return;
|
|
53
53
|
Boolean(this.sidebarClosingTimeout) && clearTimeout(this.sidebarClosingTimeout), this.sidebarClosing = !0;
|
|
54
|
-
const i =
|
|
54
|
+
const i = u() ? 0 : 300;
|
|
55
55
|
this.sidebarClosingTimeout = setTimeout(() => {
|
|
56
56
|
this.sidebarActive = !1, this.sidebarClosing = !1, this.changeMobileView("body"), this.sidebarToggle.emit(!1);
|
|
57
57
|
}, i);
|
|
@@ -62,15 +62,15 @@ const h = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
|
|
|
62
62
|
async changeMobileView(i, t = !0) {
|
|
63
63
|
if (this.mobileView === i || i === "navigation" && !this.hasNavigation || i === "sidebar" && !this.hasSidebar)
|
|
64
64
|
return;
|
|
65
|
-
if (!
|
|
65
|
+
if (!u() || !t) {
|
|
66
66
|
this.mobileView = i, this.mobileViewChange.emit(this.mobileView);
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
69
|
Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = i;
|
|
70
|
-
let
|
|
71
|
-
this.transitionStyle === "slides" ?
|
|
70
|
+
let n = 0;
|
|
71
|
+
this.transitionStyle === "slides" ? n = 400 : this.transitionStyle === "dialog" && (n = 300), this.transitionTimeout = setTimeout(() => {
|
|
72
72
|
this.mobileView = i, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
|
|
73
|
-
},
|
|
73
|
+
}, n);
|
|
74
74
|
}
|
|
75
75
|
checkMobileView() {
|
|
76
76
|
if (this.mobileView === "navigation" && !this.hasNavigation || this.mobileView === "sidebar" && !this.hasSidebar) {
|
|
@@ -87,16 +87,16 @@ const h = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
|
|
|
87
87
|
this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
|
|
88
88
|
}
|
|
89
89
|
render() {
|
|
90
|
-
const i = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, t =
|
|
90
|
+
const i = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, t = d("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}`, {
|
|
91
91
|
"app-layout--has-navigation": this.hasNavigation,
|
|
92
92
|
"app-layout--has-sidebar": this.hasSidebar,
|
|
93
93
|
"app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
|
|
94
94
|
"app-layout--sidebar-closing": this.sidebarClosing
|
|
95
95
|
});
|
|
96
|
-
return a(
|
|
96
|
+
return a(l, null, a("section", { "aria-labelledby": "app-name", class: t, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, 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": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? a("header", { class: "app-layout__app-bar" }, i && a("span", { class: "app-layout__back-to-navigation-button" }, a("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.appBarMedia && a("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia }), a("div", { class: "app-layout__app-bar-heading" }, this.heading && a("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading }), this.subheading && a("span", { class: "app-layout__app-bar-subheading" }, this.subheading)), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))) : a("header", { class: "app-layout__app-bar" }, a("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, 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" })))));
|
|
97
97
|
}
|
|
98
98
|
get el() {
|
|
99
|
-
return
|
|
99
|
+
return p(this);
|
|
100
100
|
}
|
|
101
101
|
static get watchers() {
|
|
102
102
|
return {
|
|
@@ -104,38 +104,59 @@ const h = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
|
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
|
-
|
|
108
|
-
const
|
|
107
|
+
g.style = m;
|
|
108
|
+
const v = ":host{display:block;width:100%}:host *{box-sizing:border-box}.box--bordered{border:var(--s-border-width-default) solid var(--s-border-default)}.box--center-block{display:flex;align-items:center}.box--center-inline{display:flex;justify-content:center}.box--cover{width:100%;height:100%}", _ = class {
|
|
109
109
|
constructor(i) {
|
|
110
|
-
|
|
110
|
+
o(this, i), this.as = "div", this.bordered = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.maxWidth = void 0, this.overflow = "visible", this.padding = "0";
|
|
111
111
|
}
|
|
112
112
|
render() {
|
|
113
113
|
const i = this.as, t = {
|
|
114
|
+
maxWidth: this.maxWidth,
|
|
114
115
|
overflow: this.overflow,
|
|
115
116
|
padding: `var(--s-space-${this.padding})`,
|
|
116
117
|
position: Boolean(this.overflow) ? "relative" : ""
|
|
117
|
-
}, e =
|
|
118
|
+
}, e = d("box", {
|
|
118
119
|
"box--bordered": this.bordered,
|
|
119
120
|
"box--center-block": this.centerBlock,
|
|
120
121
|
"box--center-inline": this.centerInline,
|
|
121
122
|
"box--cover": this.cover
|
|
122
123
|
});
|
|
123
|
-
return a(
|
|
124
|
+
return a(l, { style: this.cover ? { width: "100%", height: "100%" } : void 0 }, a(i, { class: e, style: t }, a("slot", null)));
|
|
124
125
|
}
|
|
125
126
|
};
|
|
126
|
-
|
|
127
|
-
const
|
|
127
|
+
_.style = v;
|
|
128
|
+
const f = ":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)}", w = class {
|
|
128
129
|
constructor(i) {
|
|
129
|
-
|
|
130
|
+
o(this, i), this.heading = void 0, this.illustration = void 0;
|
|
130
131
|
}
|
|
131
132
|
render() {
|
|
132
|
-
return a(
|
|
133
|
+
return a(l, 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", text: this.heading }), a("div", { class: "empty-state__content" }, a("swirl-text", { align: "center", color: "subdued" }, a("slot", null))))));
|
|
133
134
|
}
|
|
134
135
|
};
|
|
135
|
-
|
|
136
|
-
const
|
|
136
|
+
w.style = f;
|
|
137
|
+
const x = ":host{display:inline-flex}", k = class {
|
|
137
138
|
constructor(i) {
|
|
138
|
-
|
|
139
|
+
o(this, i), this.size = 24;
|
|
140
|
+
}
|
|
141
|
+
render() {
|
|
142
|
+
const i = this.size === 20 ? 24 : this.size, t = d("swirl-icon", `swirl-icon--size-${this.size}`);
|
|
143
|
+
return a("svg", { class: t, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && 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" })), (this.size === 20 || this.size === 24) && 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" })), this.size === 28 && 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" })));
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
k.style = x;
|
|
147
|
+
const C = ":host{display:inline-flex}", B = class {
|
|
148
|
+
constructor(i) {
|
|
149
|
+
o(this, i), this.size = 24;
|
|
150
|
+
}
|
|
151
|
+
render() {
|
|
152
|
+
const i = this.size === 20 ? 24 : this.size, t = d("swirl-icon", `swirl-icon--size-${this.size}`);
|
|
153
|
+
return a("svg", { class: t, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && 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" })), (this.size === 20 || this.size === 24) && 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" })), this.size === 28 && 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" })));
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
B.style = C;
|
|
157
|
+
const S = ":host{display:block;width:100%}:host *{box-sizing:border-box}", I = class {
|
|
158
|
+
constructor(i) {
|
|
159
|
+
o(this, i), this.focusedIndex = 0, this.onFocus = () => {
|
|
139
160
|
this.focusItemAtIndex(this.focusedIndex);
|
|
140
161
|
}, this.onKeyDown = (t) => {
|
|
141
162
|
if (t.key === "ArrowDown")
|
|
@@ -169,50 +190,48 @@ const w = ":host{display:block;width:100%}:host *{box-sizing:border-box}", x = c
|
|
|
169
190
|
e.setAttribute("tabIndex", "0"), e.focus(), this.focusedIndex = i;
|
|
170
191
|
}
|
|
171
192
|
render() {
|
|
172
|
-
return a(
|
|
193
|
+
return a(l, { onKeyDown: this.onKeyDown }, a("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", null)));
|
|
173
194
|
}
|
|
174
195
|
get el() {
|
|
175
|
-
return
|
|
196
|
+
return p(this);
|
|
176
197
|
}
|
|
177
198
|
};
|
|
178
|
-
|
|
179
|
-
const
|
|
199
|
+
I.style = S;
|
|
200
|
+
const z = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;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(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{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: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{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{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{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', L = class {
|
|
180
201
|
constructor(i) {
|
|
181
|
-
|
|
202
|
+
o(this, i), this.valueChange = r(this, "valueChange", 7), this.onClick = () => {
|
|
182
203
|
!this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
|
|
183
204
|
}, this.onMenuTriggerClick = (t) => {
|
|
184
205
|
this.disabled && !Boolean(this.href) && t.stopPropagation();
|
|
185
|
-
}, this.checked = !1, this.description = void 0, this.disabled = void 0, this.hideDivider = void 0, this.href = void 0, this.label = void 0, this.
|
|
186
|
-
}
|
|
187
|
-
componentDidLoad() {
|
|
188
|
-
this.forceAvatarProps(), this.forceThumbnailProps();
|
|
206
|
+
}, this.checked = !1, this.description = void 0, this.disabled = void 0, this.hideDivider = void 0, this.href = void 0, this.label = void 0, this.menuTriggerId = void 0, this.menuTriggerLabel = "Options", this.meta = void 0, this.selectable = void 0, this.value = void 0, this.hasMedia = !1;
|
|
189
207
|
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
!Boolean(i) || (i.removeAttribute("interactive"), i.removeAttribute("show-label"), i.removeAttribute("variant"), i.setAttribute("size", "l"));
|
|
208
|
+
async componentWillLoad() {
|
|
209
|
+
this.updateMediaState();
|
|
193
210
|
}
|
|
194
|
-
|
|
195
|
-
const i = this.el.querySelector("
|
|
196
|
-
|
|
211
|
+
updateMediaState() {
|
|
212
|
+
const i = this.el.querySelector('[slot="media"]'), t = Boolean(i);
|
|
213
|
+
t !== this.hasMedia && (this.hasMedia = t);
|
|
197
214
|
}
|
|
198
215
|
render() {
|
|
199
|
-
const i = Boolean(this.href) && !this.selectable ? "a" : "button", t = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId),
|
|
216
|
+
const i = Boolean(this.href) && !this.selectable ? "a" : "button", t = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId), n = e && !Boolean(this.meta) && !this.selectable, c = Boolean(this.meta) && !this.selectable, b = this.selectable ? String(this.checked) : void 0, h = this.selectable ? "checkbox" : void 0, y = d("resource-list-item", {
|
|
200
217
|
"resource-list-item--checked": this.checked,
|
|
201
218
|
"resource-list-item--has-menu": e,
|
|
202
219
|
"resource-list-item--hide-divider": this.hideDivider,
|
|
203
220
|
"resource-list-item--selectable": this.selectable
|
|
204
221
|
});
|
|
205
|
-
return a(
|
|
222
|
+
return a(l, { role: "row" }, a("div", { class: y, role: "gridcell" }, a(i, { "aria-checked": b, "aria-disabled": t ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: t, onClick: this.onClick, part: "resource-list-item__content", role: h, tabIndex: 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: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), 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))), c && a("span", { class: "resource-list-item__meta" }, this.meta), n && a("swirl-button", { "aria-disabled": t ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: t, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
|
|
206
223
|
}
|
|
207
224
|
get el() {
|
|
208
|
-
return
|
|
225
|
+
return p(this);
|
|
209
226
|
}
|
|
210
227
|
};
|
|
211
|
-
|
|
228
|
+
L.style = z;
|
|
212
229
|
export {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
B as
|
|
230
|
+
g as swirl_app_layout,
|
|
231
|
+
_ as swirl_box,
|
|
232
|
+
w as swirl_empty_state,
|
|
233
|
+
k as swirl_icon_file,
|
|
234
|
+
B as swirl_icon_folder_shared,
|
|
235
|
+
I as swirl_resource_list,
|
|
236
|
+
L as swirl_resource_list_item
|
|
218
237
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as n, c as r, h as o, H as u, g as c } from "./index.
|
|
1
|
+
import { r as n, c as r, h as o, H as u, g as c } from "./index.4bf401f3.js";
|
|
2
2
|
import { a as h, c as d, o as p } from "./floating-ui.dom.esm-b9f28f6d.15013ef7.js";
|
|
3
3
|
import { c as m } from "./index-d280dafb.186cdb0e.js";
|
|
4
4
|
import { d as b } from "./utils-61f188cc.4a43deab.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as o, c as r, h as t, H as c, g as l } from "./index.
|
|
1
|
+
import { r as o, c as r, h as t, H as c, g as l } from "./index.4bf401f3.js";
|
|
2
2
|
import { c as d } from "./index-d280dafb.186cdb0e.js";
|
|
3
3
|
import { a as b } from "./utils-61f188cc.4a43deab.js";
|
|
4
4
|
import "react";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { r as t, h as s, H as i } from "./index.4bf401f3.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
const l = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", r = class {
|
|
5
|
+
constructor(o) {
|
|
6
|
+
t(this, o), this.columns = "repeat(3, minmax(0, 1fr))", this.spacing = void 0;
|
|
7
|
+
}
|
|
8
|
+
render() {
|
|
9
|
+
return s(i, null, s("div", { class: "columns", style: {
|
|
10
|
+
gridTemplateColumns: this.columns,
|
|
11
|
+
gap: `var(--s-space-${this.spacing})`
|
|
12
|
+
} }, s("slot", null)));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
r.style = l;
|
|
16
|
+
export {
|
|
17
|
+
r as swirl_columns
|
|
18
|
+
};
|