@getflip/swirl-components 0.379.0 → 0.379.1
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/components.json +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +3 -2
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +5 -4
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +2 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +4 -3
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +89 -64
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +2 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-image-grid-item.js +5 -4
- package/dist/components/swirl-resource-list-item2.js +3 -2
- package/dist/esm/swirl-app-layout_5.entry.js +3 -2
- package/dist/esm/swirl-image-grid-item.entry.js +5 -4
- package/dist/swirl-components/{p-17497c9a.entry.js → p-3f6d068c.entry.js} +1 -1
- package/dist/swirl-components/p-e872b698.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-b55d330d.entry.js +0 -1
package/components.json
CHANGED
|
@@ -645,7 +645,7 @@ const SwirlResourceList = class {
|
|
|
645
645
|
};
|
|
646
646
|
SwirlResourceList.style = swirlResourceListCss;
|
|
647
647
|
|
|
648
|
-
const swirlResourceListItemCss = ".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}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .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.sc-swirl-resource-list-item{position:relative;width:100%}.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)}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@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--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.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;width:auto}.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;width: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--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.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);position:relative;display:flex;width:100%;min-width:0;margin:0;padding:var(--s-space-12) var(--s-space-8);align-items:flex-start;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-sm);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);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.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{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;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{align-self:center}.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;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{white-space:nowrap}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.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)}";
|
|
648
|
+
const swirlResourceListItemCss = ".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}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .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.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default)}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--s-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content: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--interactive.sc-swirl-resource-list-item{cursor:pointer}.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.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--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:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--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{--swirl-badge-border-color:var(--swirl-resource-list-item-background-hovered);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)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@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--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.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;position:static;transform:none}.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{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.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;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 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-12) * 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--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.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:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;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{align-self:center}.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;justify-content:center;min-height:3rem;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.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: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)}";
|
|
649
649
|
|
|
650
650
|
const SwirlResourceListItem = class {
|
|
651
651
|
constructor(hostRef) {
|
|
@@ -687,6 +687,7 @@ const SwirlResourceListItem = class {
|
|
|
687
687
|
}
|
|
688
688
|
};
|
|
689
689
|
this.onControlClick = (event) => {
|
|
690
|
+
event.preventDefault();
|
|
690
691
|
event.stopPropagation();
|
|
691
692
|
};
|
|
692
693
|
}
|
|
@@ -783,7 +784,7 @@ const SwirlResourceListItem = class {
|
|
|
783
784
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
784
785
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
785
786
|
});
|
|
786
|
-
return (index.h(index.Host, { key: '
|
|
787
|
+
return (index.h(index.Host, { key: '7cb12be3a9a09b71dc24bc8f981d1d61b8f254e9', role: hostRole }, index.h("div", { key: '7014fcad197a4f7eb245af6a46a29378bb857750', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '8e673d4ffbd706c06804aa6ee55a380fd53f3099', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '1172de33f197a865c39bc1f7dc394de5d1a4d89e', class: "resource-list-item__media" }, index.h("slot", { key: '1768bf905bda828888aab82ede57fb62d58615de', name: "media" }))), index.h("span", { key: '39789664f9eab1eeb4801ec2509c54d2fa0eaa2c', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '880f0d472efda294324a74ab8a2c1bccf794d870', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '6e43920e4516b750136e810a6ab305586607b291', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: '256f16e58f88275cc84b9eb2cdb5c58a6726f7a9', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '93fa4dfe68c08d3f60d3f891df2cc40008495607', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'e86f4921242fc80e32f0a067aa244a5a9a911022' }))))), showMeta && (index.h("span", { key: '8396dff56b5f7911f9ebd05da7f209dfae9f01db', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: 'bbd1d2b8892dce6e938f9a9aa5fa18b9bcc4d998', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '1c73a5c08c17218c3e38073094865634b2405079', class: "resource-list-item__badges" }, index.h("slot", { key: '7b4da3575ca6dbc89305fbe65bd453428df40423', name: "badges" })))), index.h("span", { key: '5be12310c2a0b842ae5b3817da98162759c86628', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: '0fdbf28efd85b9a130ccef446a7f7c0d02b8e532', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: 'e6cfdb5108d171a427e6af540a237227ae0b158f', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'de40fbe74fc9f17a68a3fd5b4387f745b74c09ad', "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 && (index.h("button", { key: '2a6917be30e0a20c277532152507273c5e72aa62', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: '510a758ef7a8c8e317416a5fb654f86691eac6d5', size: this.iconSize })))));
|
|
787
788
|
}
|
|
788
789
|
get el() { return index.getElement(this); }
|
|
789
790
|
};
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DM-IG6w2.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-CllbYlRY.js');
|
|
6
6
|
|
|
7
|
-
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;opacity:0;transition:opacity 0.3s ease-in}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);opacity:0;transition:opacity 0.2s}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button{opacity:1}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
|
|
7
|
+
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;opacity:0;transition:opacity 0.3s ease-in}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);opacity:0;transition:opacity 0.2s}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
|
|
8
8
|
|
|
9
9
|
const SwirlImageGridItem = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -132,15 +132,16 @@ const SwirlImageGridItem = class {
|
|
|
132
132
|
"image-grid-item--has-error": this.error,
|
|
133
133
|
"image-grid-item--has-overlay": this.overlay,
|
|
134
134
|
"image-grid-item--loaded": this.loaded,
|
|
135
|
+
"image-grid-item--gif-paused": this.gifPaused,
|
|
135
136
|
});
|
|
136
|
-
return (index.h(index.Host, { key: '
|
|
137
|
+
return (index.h(index.Host, { key: 'c595a810db82a96ed51868460646d1d3d01d28a6', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: 'bac59ad6a06114cab19ab63ccecebdf89143abd0', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '050d0ed9ef48a86296e5fcf6a4c6dea9fd4a292b', class: "image-grid-item__background", style: {
|
|
137
138
|
backgroundImage: showImage
|
|
138
139
|
? `url(${this.computedSrc})`
|
|
139
140
|
: undefined,
|
|
140
|
-
} }), showImage ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" }, index.h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (index.h("swirl-button", { key: '
|
|
141
|
+
} }), showImage ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" }, index.h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (index.h("swirl-button", { key: '3650d5d43f155faba65beac12431cf658d60af01', class: "image-grid-item__gif-control-button", label: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, icon: "<swirl-icon-gif></swirl-icon-gif>", variant: "on-image", pill: true, hideLabel: true, swirlAriaLabel: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, onClick: this.handleControlClick })), this.loaded &&
|
|
141
142
|
!this.error &&
|
|
142
143
|
this.icon &&
|
|
143
|
-
!Boolean(this.overlay) && (index.h("div", { key: '
|
|
144
|
+
!Boolean(this.overlay) && (index.h("div", { key: '29ef9266c4380482f411b02e1c15b2d10273cfec', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: '88d1a20e899ea69ed70926d87986e89ed33f8b90', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("swirl-skeleton-box", { key: 'ae8b6d14556f8df8350d937c943ff915445ab92c', class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" })), this.loaded && this.error && (index.h("div", { key: '12a12b173baa67f099cca696733429d8f4cf8a7c', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: 'ff1543844f7c4dae09e03880e9517fb9fee96fd5', color: "critical" }))))));
|
|
144
145
|
}
|
|
145
146
|
get el() { return index.getElement(this); }
|
|
146
147
|
static get watchers() { return {
|
|
@@ -176,7 +176,8 @@ button.image-grid-item:focus-visible:after {
|
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
.image-grid-item:hover > .image-grid-item__gif-control-button,
|
|
179
|
-
.image-grid-item:focus-within > .image-grid-item__gif-control-button
|
|
179
|
+
.image-grid-item:focus-within > .image-grid-item__gif-control-button,
|
|
180
|
+
.image-grid-item--gif-paused > .image-grid-item__gif-control-button {
|
|
180
181
|
opacity: 1;
|
|
181
182
|
}
|
|
182
183
|
|
|
@@ -122,15 +122,16 @@ export class SwirlImageGridItem {
|
|
|
122
122
|
"image-grid-item--has-error": this.error,
|
|
123
123
|
"image-grid-item--has-overlay": this.overlay,
|
|
124
124
|
"image-grid-item--loaded": this.loaded,
|
|
125
|
+
"image-grid-item--gif-paused": this.gifPaused,
|
|
125
126
|
});
|
|
126
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: 'c595a810db82a96ed51868460646d1d3d01d28a6', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'bac59ad6a06114cab19ab63ccecebdf89143abd0', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '050d0ed9ef48a86296e5fcf6a4c6dea9fd4a292b', class: "image-grid-item__background", style: {
|
|
127
128
|
backgroundImage: showImage
|
|
128
129
|
? `url(${this.computedSrc})`
|
|
129
130
|
: undefined,
|
|
130
|
-
} }), showImage ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-button", { key: '
|
|
131
|
+
} }), showImage ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-button", { key: '3650d5d43f155faba65beac12431cf658d60af01', class: "image-grid-item__gif-control-button", label: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, icon: "<swirl-icon-gif></swirl-icon-gif>", variant: "on-image", pill: true, hideLabel: true, swirlAriaLabel: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, onClick: this.handleControlClick })), this.loaded &&
|
|
131
132
|
!this.error &&
|
|
132
133
|
this.icon &&
|
|
133
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
134
|
+
!Boolean(this.overlay) && (h("div", { key: '29ef9266c4380482f411b02e1c15b2d10273cfec', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '88d1a20e899ea69ed70926d87986e89ed33f8b90', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("swirl-skeleton-box", { key: 'ae8b6d14556f8df8350d937c943ff915445ab92c', class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" })), this.loaded && this.error && (h("div", { key: '12a12b173baa67f099cca696733429d8f4cf8a7c', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'ff1543844f7c4dae09e03880e9517fb9fee96fd5', color: "critical" }))))));
|
|
134
135
|
}
|
|
135
136
|
static get is() { return "swirl-image-grid-item"; }
|
|
136
137
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,6 +22,28 @@
|
|
|
22
22
|
.resource-list-item {
|
|
23
23
|
position: relative;
|
|
24
24
|
width: 100%;
|
|
25
|
+
display: flex;
|
|
26
|
+
padding: var(--s-space-12) var(--s-space-8);
|
|
27
|
+
gap: var(--s-space-12);
|
|
28
|
+
border-radius: var(--s-border-radius-sm);
|
|
29
|
+
background-color: var(--swirl-resource-list-item-background-default);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.resource-list-item:has(.resource-list-item__content:focus-visible) {
|
|
33
|
+
background-color: var(--s-background-hovered);
|
|
34
|
+
outline-color: var(--s-focus-default);
|
|
35
|
+
outline-style: solid;
|
|
36
|
+
outline-width: 0.125rem;
|
|
37
|
+
z-index: 1;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.resource-list-item:has(.resource-list-item__content:focus-visible) .resource-list-item__media {
|
|
41
|
+
--swirl-avatar-group-border-color: var(--s-background-hovered);
|
|
42
|
+
--swirl-badge-border-color: var(--s-background-hovered);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.resource-list-item--interactive {
|
|
46
|
+
cursor: pointer;
|
|
25
47
|
}
|
|
26
48
|
|
|
27
49
|
.resource-list-item--interactive:hover {
|
|
@@ -36,37 +58,39 @@
|
|
|
36
58
|
cursor: default;
|
|
37
59
|
}
|
|
38
60
|
|
|
39
|
-
.resource-list-item--interactive
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
61
|
+
.resource-list-item--interactive.resource-list-item--disabled {
|
|
62
|
+
cursor: default;
|
|
63
|
+
}
|
|
43
64
|
|
|
44
|
-
.resource-list-item--interactive
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
--swirl-avatar-background-color: var(--s-surface-raised-hovered);
|
|
49
|
-
--swirl-avatar-group-border-color: var(--s-background-hovered);
|
|
50
|
-
--swirl-badge-border-color: var(--s-background-hovered);
|
|
51
|
-
}
|
|
65
|
+
.resource-list-item--interactive:hover:not(.resource-list-item--disabled),
|
|
66
|
+
.resource-list-item--interactive:focus:not(.resource-list-item--disabled) {
|
|
67
|
+
background-color: var(--swirl-resource-list-item-background-hovered);
|
|
68
|
+
}
|
|
52
69
|
|
|
53
|
-
.resource-list-item--interactive
|
|
54
|
-
|
|
70
|
+
.resource-list-item--interactive:hover:not(.resource-list-item--disabled) .resource-list-item__media,
|
|
71
|
+
.resource-list-item--interactive:hover:not(.resource-list-item--disabled) .resource-list-item__meta,
|
|
72
|
+
.resource-list-item--interactive:focus:not(.resource-list-item--disabled) .resource-list-item__media,
|
|
73
|
+
.resource-list-item--interactive:focus:not(.resource-list-item--disabled) .resource-list-item__meta {
|
|
74
|
+
--swirl-avatar-background-color: var(--s-surface-raised-hovered);
|
|
75
|
+
--swirl-avatar-group-border-color: var(--s-background-hovered);
|
|
76
|
+
--swirl-badge-border-color: var(--s-background-hovered);
|
|
55
77
|
}
|
|
56
78
|
|
|
57
|
-
.resource-list-item--interactive
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--swirl-badge-border-color: var(--s-background-pressed);
|
|
61
|
-
}
|
|
79
|
+
.resource-list-item--interactive:active:not(.resource-list-item--disabled) {
|
|
80
|
+
background-color: var(--swirl-resource-list-item-background-pressed);
|
|
81
|
+
}
|
|
62
82
|
|
|
63
|
-
.resource-list-item--active .resource-list-
|
|
64
|
-
--
|
|
65
|
-
--swirl-
|
|
66
|
-
|
|
83
|
+
.resource-list-item--interactive:active:not(.resource-list-item--disabled) .resource-list-item__media,
|
|
84
|
+
.resource-list-item--interactive:active:not(.resource-list-item--disabled) .resource-list-item__meta {
|
|
85
|
+
--swirl-avatar-group-border-color: var(--s-background-pressed);
|
|
86
|
+
--swirl-badge-border-color: var(--s-background-pressed);
|
|
87
|
+
}
|
|
67
88
|
|
|
68
|
-
|
|
69
|
-
|
|
89
|
+
.resource-list-item--active {
|
|
90
|
+
--swirl-badge-border-color: var(--swirl-resource-list-item-background-hovered);
|
|
91
|
+
|
|
92
|
+
background-color: var(--swirl-resource-list-item-background-hovered);
|
|
93
|
+
}
|
|
70
94
|
|
|
71
95
|
.resource-list-item--checked .resource-list-item__checkbox {
|
|
72
96
|
border-color: var(--s-icon-highlight);
|
|
@@ -74,16 +98,16 @@
|
|
|
74
98
|
background-color: var(--s-icon-highlight);
|
|
75
99
|
}
|
|
76
100
|
|
|
77
|
-
.resource-list-item--compact
|
|
78
|
-
|
|
79
|
-
|
|
101
|
+
.resource-list-item--compact {
|
|
102
|
+
padding: var(--s-space-8);
|
|
103
|
+
}
|
|
80
104
|
|
|
81
105
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
82
106
|
|
|
83
|
-
.resource-list-item--compact
|
|
84
|
-
|
|
107
|
+
.resource-list-item--compact {
|
|
108
|
+
padding: var(--s-space-8)
|
|
109
|
+
}
|
|
85
110
|
}
|
|
86
|
-
}
|
|
87
111
|
|
|
88
112
|
.resource-list-item--compact .resource-list-item__label-container {
|
|
89
113
|
min-height: 2.5rem;
|
|
@@ -131,23 +155,39 @@
|
|
|
131
155
|
.resource-list-item--show-control-on-focus:hover .resource-list-item__control, .resource-list-item--show-control-on-focus:focus .resource-list-item__control, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__control {
|
|
132
156
|
pointer-events: auto;
|
|
133
157
|
opacity: 1;
|
|
134
|
-
|
|
158
|
+
position: static;
|
|
159
|
+
transform: none;
|
|
135
160
|
}
|
|
136
161
|
|
|
162
|
+
.resource-list-item--show-control-on-focus:hover .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__meta {
|
|
163
|
+
margin-right: 0;
|
|
164
|
+
padding-right: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.resource-list-item--show-control-on-focus .resource-list-item__meta {
|
|
168
|
+
margin-right: calc(-1 * var(--s-space-16));
|
|
169
|
+
padding-right: var(--s-space-16);
|
|
170
|
+
transition: margin 0.1s;
|
|
171
|
+
}
|
|
172
|
+
|
|
137
173
|
.resource-list-item--show-control-on-focus .resource-list-item__control {
|
|
138
174
|
pointer-events: none;
|
|
139
175
|
opacity: 0;
|
|
140
|
-
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: 50%;
|
|
178
|
+
right: var(--s-space-8);
|
|
179
|
+
transform: translateY(-50%);
|
|
180
|
+
transition: opacity 0.1s;
|
|
141
181
|
}
|
|
142
182
|
|
|
143
183
|
.resource-list-item--draggable .resource-list-item__content {
|
|
144
|
-
padding-left: calc(var(--s-space-
|
|
184
|
+
padding-left: calc(var(--s-space-12) * 2 + 1.5rem);
|
|
145
185
|
}
|
|
146
186
|
|
|
147
187
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
148
188
|
|
|
149
189
|
.resource-list-item--draggable .resource-list-item__content {
|
|
150
|
-
padding-left: calc(var(--s-space-
|
|
190
|
+
padding-left: calc(var(--s-space-12) * 2 + 1rem)
|
|
151
191
|
}
|
|
152
192
|
}
|
|
153
193
|
|
|
@@ -188,18 +228,15 @@
|
|
|
188
228
|
.resource-list-item__content {
|
|
189
229
|
--swirl-avatar-group-border-color: var(--s-background-default);
|
|
190
230
|
--swirl-badge-border-color: var(--s-background-default);
|
|
191
|
-
|
|
192
|
-
position: relative;
|
|
193
231
|
display: flex;
|
|
194
232
|
width: 100%;
|
|
195
233
|
min-width: 0;
|
|
196
234
|
margin: 0;
|
|
197
|
-
padding:
|
|
235
|
+
padding: 0;
|
|
198
236
|
align-items: flex-start;
|
|
199
237
|
border: none;
|
|
200
|
-
border-radius: var(--s-border-radius-sm);
|
|
201
238
|
color: var(--s-text-default);
|
|
202
|
-
background
|
|
239
|
+
background: none;
|
|
203
240
|
font: inherit;
|
|
204
241
|
line-height: var(--s-line-height-sm);
|
|
205
242
|
text-align: left;
|
|
@@ -207,32 +244,11 @@
|
|
|
207
244
|
gap: var(--s-space-12);
|
|
208
245
|
}
|
|
209
246
|
|
|
210
|
-
.resource-list-item__content:focus
|
|
247
|
+
.resource-list-item__content:focus,
|
|
248
|
+
.resource-list-item__content:focus-visible {
|
|
211
249
|
outline: none;
|
|
212
250
|
}
|
|
213
251
|
|
|
214
|
-
.resource-list-item__content:focus-visible {
|
|
215
|
-
background-color: var(--s-background-hovered);
|
|
216
|
-
outline-color: var(--s-focus-default);
|
|
217
|
-
outline-style: solid;
|
|
218
|
-
outline-width: 0.125rem;
|
|
219
|
-
z-index: 1;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.resource-list-item__content:focus-visible .resource-list-item__media {
|
|
223
|
-
--swirl-avatar-group-border-color: var(--s-background-hovered);
|
|
224
|
-
--swirl-badge-border-color: var(--s-background-hovered);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.resource-list-item__content:disabled {
|
|
228
|
-
color: var(--s-text-disabled);
|
|
229
|
-
cursor: default;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.resource-list-item__content:disabled .resource-list-item__description {
|
|
233
|
-
color: var(--s-text-disabled);
|
|
234
|
-
}
|
|
235
|
-
|
|
236
252
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
237
253
|
|
|
238
254
|
.resource-list-item__content {
|
|
@@ -329,6 +345,8 @@
|
|
|
329
345
|
.resource-list-item__meta {
|
|
330
346
|
display: flex;
|
|
331
347
|
align-items: flex-end;
|
|
348
|
+
justify-content: center;
|
|
349
|
+
min-height: 3rem;
|
|
332
350
|
color: var(--s-text-subdued);
|
|
333
351
|
font-size: var(--s-font-size-sm);
|
|
334
352
|
flex-direction: column;
|
|
@@ -341,9 +359,17 @@
|
|
|
341
359
|
}
|
|
342
360
|
|
|
343
361
|
.resource-list-item__meta-text {
|
|
362
|
+
line-height: var(--s-line-height-base);
|
|
344
363
|
white-space: nowrap;
|
|
345
364
|
}
|
|
346
365
|
|
|
366
|
+
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
367
|
+
|
|
368
|
+
.resource-list-item__meta-text {
|
|
369
|
+
line-height: var(--s-line-height-sm)
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
|
|
347
373
|
.resource-list-item__badges {
|
|
348
374
|
display: inline-flex;
|
|
349
375
|
width: -webkit-max-content;
|
|
@@ -358,7 +384,6 @@
|
|
|
358
384
|
left: var(--s-space-4);
|
|
359
385
|
display: inline-flex;
|
|
360
386
|
margin: 0;
|
|
361
|
-
padding: 0;
|
|
362
387
|
padding: var(--s-space-8);
|
|
363
388
|
flex-shrink: 0;
|
|
364
389
|
border: none;
|
|
@@ -44,6 +44,7 @@ export class SwirlResourceListItem {
|
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
this.onControlClick = (event) => {
|
|
47
|
+
event.preventDefault();
|
|
47
48
|
event.stopPropagation();
|
|
48
49
|
};
|
|
49
50
|
}
|
|
@@ -140,7 +141,7 @@ export class SwirlResourceListItem {
|
|
|
140
141
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
141
142
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
142
143
|
});
|
|
143
|
-
return (h(Host, { key: '
|
|
144
|
+
return (h(Host, { key: '7cb12be3a9a09b71dc24bc8f981d1d61b8f254e9', role: hostRole }, h("div", { key: '7014fcad197a4f7eb245af6a46a29378bb857750', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '8e673d4ffbd706c06804aa6ee55a380fd53f3099', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '1172de33f197a865c39bc1f7dc394de5d1a4d89e', class: "resource-list-item__media" }, h("slot", { key: '1768bf905bda828888aab82ede57fb62d58615de', name: "media" }))), h("span", { key: '39789664f9eab1eeb4801ec2509c54d2fa0eaa2c', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '880f0d472efda294324a74ab8a2c1bccf794d870', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '6e43920e4516b750136e810a6ab305586607b291', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '256f16e58f88275cc84b9eb2cdb5c58a6726f7a9', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '93fa4dfe68c08d3f60d3f891df2cc40008495607', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'e86f4921242fc80e32f0a067aa244a5a9a911022' }))))), showMeta && (h("span", { key: '8396dff56b5f7911f9ebd05da7f209dfae9f01db', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'bbd1d2b8892dce6e938f9a9aa5fa18b9bcc4d998', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '1c73a5c08c17218c3e38073094865634b2405079', class: "resource-list-item__badges" }, h("slot", { key: '7b4da3575ca6dbc89305fbe65bd453428df40423', name: "badges" })))), h("span", { key: '5be12310c2a0b842ae5b3817da98162759c86628', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '0fdbf28efd85b9a130ccef446a7f7c0d02b8e532', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'e6cfdb5108d171a427e6af540a237227ae0b158f', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'de40fbe74fc9f17a68a3fd5b4387f745b74c09ad', "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", { key: '2a6917be30e0a20c277532152507273c5e72aa62', "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", { key: '510a758ef7a8c8e317416a5fb654f86691eac6d5', size: this.iconSize })))));
|
|
144
145
|
}
|
|
145
146
|
static get is() { return "swirl-resource-list-item"; }
|
|
146
147
|
static get encapsulation() { return "scoped"; }
|