@getflip/swirl-components 0.518.0 → 0.519.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/components.json +3 -3
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/swirl-avatar-group.cjs.entry.js +1 -1
  4. package/dist/cjs/swirl-avatar.cjs.entry.js +2 -2
  5. package/dist/cjs/swirl-components.cjs.js +1 -1
  6. package/dist/cjs/swirl-resource-list-item.cjs.entry.js +4 -4
  7. package/dist/collection/components/swirl-avatar/swirl-avatar.css +30 -51
  8. package/dist/collection/components/swirl-avatar/swirl-avatar.js +3 -3
  9. package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +3 -3
  10. package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +13 -0
  11. package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +6 -10
  12. package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +3 -3
  13. package/dist/components/swirl-avatar-group.js +1 -1
  14. package/dist/components/swirl-avatar.js +1 -1
  15. package/dist/components/swirl-resource-list-item.js +1 -1
  16. package/dist/esm/loader.js +1 -1
  17. package/dist/esm/swirl-avatar-group.entry.js +1 -1
  18. package/dist/esm/swirl-avatar.entry.js +2 -2
  19. package/dist/esm/swirl-components.js +1 -1
  20. package/dist/esm/swirl-resource-list-item.entry.js +4 -4
  21. package/dist/swirl-components/p-49710fa6.entry.js +1 -0
  22. package/dist/swirl-components/{p-551338d0.entry.js → p-9b8bf427.entry.js} +1 -1
  23. package/dist/swirl-components/p-e0208125.entry.js +1 -0
  24. package/dist/swirl-components/swirl-components.esm.js +1 -1
  25. package/dist/types/components/swirl-avatar-group/swirl-avatar-group.stories.d.ts +1 -0
  26. package/package.json +2 -2
  27. package/dist/swirl-components/p-2ddb8ae8.entry.js +0 -1
  28. package/dist/swirl-components/p-50897889.entry.js +0 -1
package/dist/cjs/swirl-resource-list-item.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
5
5
  var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
6
6
  require('./utils-UfZG-xPD.js');
7
7
 
8
- 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.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.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.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;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);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-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:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.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{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-visible: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-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-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--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:2rem}@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)}@media (hover: hover){.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;margin:calc(-1 * var(--s-space-4)) 0}.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-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 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-state-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--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;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;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);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),.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{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);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);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;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)}`;
8
+ 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.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.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.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;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);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-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:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.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{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-visible: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-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-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--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:2rem}.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) + 0.75rem + var(--s-space-12))}@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:var(--s-space-8)}@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)}@media (hover: hover){.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;margin:calc(-1 * var(--s-space-4)) 0}.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-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 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-state-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--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;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;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);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%;left:calc(var(--s-space-16) - var(--s-space-2));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}.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),.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{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);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);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;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)}`;
9
9
 
10
10
  const SwirlResourceListItem = class {
11
11
  constructor(hostRef) {
@@ -73,7 +73,7 @@ const SwirlResourceListItem = class {
73
73
  return Boolean(this.el.querySelector("[slot='badges']"));
74
74
  }
75
75
  get showMeta() {
76
- return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
76
+ return Boolean(this.meta) || this.hasBadges;
77
77
  }
78
78
  forceIconProps(smallIcon) {
79
79
  const icon = this.iconEl?.children[0];
@@ -137,7 +137,7 @@ const SwirlResourceListItem = class {
137
137
  const labelContainerStyles = {
138
138
  minHeight: this.labelMinHeight ?? undefined,
139
139
  };
140
- const renderLabel = () => (index.h("span", { key: 'fea2fbcf10c2a9e64069f904dffd961f1780f1b8', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
140
+ const renderLabel = () => (index.h("span", { key: '1f67d8ed97b7f7b3aa595f619a76bfcf5a21b13e', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
141
141
  "-webkit-line-clamp": !!this.labelWrapMaxLines
142
142
  ? String(this.labelWrapMaxLines)
143
143
  : undefined,
@@ -160,7 +160,7 @@ const SwirlResourceListItem = class {
160
160
  "resource-list-item--wrap-label": this.labelWrap,
161
161
  "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
162
162
  });
163
- return (index.h(index.Host, { key: 'eba42053a04ca3e1fe0face5b24eef4406507596', role: hostRole }, index.h("div", { key: '4e75ad4c78923d92db15f48db2d44679de292426', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: 'a57ab79971b52955c83e537d05bbed19d17b5050', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "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, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, 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: 'f66ad2d1e5afe8bdf41bc71eae85eea5dc3364d5', class: "resource-list-item__media" }, index.h("slot", { key: 'f3994e3e365997a84943f274b4a144d38315d235', name: "media" }))), index.h("span", { key: 'd8abd040fc127d46372c3deb05482efe9c2f6a2f', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '46d49a9a0072e663a774fcd2c9b460e3ff4423f1', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: '9b9f68101452845479b6d30f6d4d5a554ceade74', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '5d100d299916fe134c80ceaf5dfce1492eca3f8d', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'fcb68d92aa83cea7d9169c6e692f00a220b7f6c6' }))))), showMeta && (index.h("span", { key: '8923f797499082f6d3cabb4313345b1ff5cc1fa8', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: '38732e13f6f345170f78449356f032edc0b6a804', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '26de116b2a0a462139f29f67dfe986ee6cb1816b', class: "resource-list-item__badges" }, index.h("slot", { key: '905302daa83a1e8691cf00415d5d1f12a1aad858', name: "badges" })))), index.h("span", { key: 'dc2597525e453848011cde15c3db223dad8b210b', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: 'a5532a9baed0164df451231fac9109f3248c89e8', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: 'fc852865fca4a77e081c0f42a2ff3db975c4c9c8', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'b913d4287648880d76fc81879eee61d7a6f51ffd', "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: '865b8967d043f7e0d3a59936f162070842526d04', "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: 'fdb31d1617a0d3f0a539c72c98a8179a06ed92f2', size: this.iconSize })))));
163
+ return (index.h(index.Host, { key: '2fc1a90e9b27fdbc94d5b157950d769cdd5e6cdd', role: hostRole }, index.h("div", { key: 'ca9508c49bb972c2ff46b7f0d2968f91b513e9d6', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: 'f8112676e7a9eb884d209848d0f1464df593bcce', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "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, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, 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: '6b538fd96785489c1bc6b1c6b3332670d5c6504d', class: "resource-list-item__media" }, index.h("slot", { key: 'ab038965e8bc744c5fa2ed838562daaa9bdef5e6', name: "media" }))), index.h("span", { key: '8eae083e40c5f5091cdd0dd6ed1141059d39f00e', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '38ff401318fa5cf91050e84f186a0f7fec21da88', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: 'b5f0f1e0f07d0163ce76b1b6e19b17b5f82ebf41', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '22f06ed865c8867f7b5ae05f5b5b507ca80692bd', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'd93bd1b797679e9cd71d391a9535d220e1b5708b' }))))), showMeta && (index.h("span", { key: 'd03584fca25f42a0c1733f7f179af19826964e07', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: 'b811428b62519b8cd6c6aabb58aacdf563e8e65a', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '3f25698b0fa5033c3b40250fa9267ff86c3e157d', class: "resource-list-item__badges" }, index.h("slot", { key: 'd1902a6b48285b6f024aa56b2fb78b5e049be657', name: "badges" })))), index.h("span", { key: 'e3afc63364298cd5ed0210dd500185a83a86c8ec', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: '9d9a0ec4551f9f416d8f26eeaad1ccb68a15a943', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '73223a669f45ced7e12c6cb4eca2b2c147a84ba1', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '06c8c6fb5f9c9c28ef17d7ea2f09535465c3ee93', "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: 'f2afffb20ffdb601b586889ed8ada11a8a708aa3', "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: 'd5481c0a38e95ad60c0f619d6d5fe68ed3d8ffd5', size: this.iconSize })))));
164
164
  }
165
165
  get el() { return index.getElement(this); }
166
166
  };
package/dist/collection/components/swirl-avatar/swirl-avatar.css CHANGED
@@ -3,18 +3,45 @@
3
3
  flex-shrink: 0;
4
4
  align-items: center;
5
5
  flex-direction: column;
6
+ --swirl-avatar-radius: 50%;
6
7
  }
7
8
 
8
9
  :host * {
9
10
  box-sizing: border-box;
10
11
  }
11
12
 
13
+ :host([variant="square"][size="3xs"]),
14
+ :host([variant="square"][size="2xs"]) {
15
+ --swirl-avatar-radius: 0.25rem;
16
+ }
17
+
18
+ :host([variant="square"][size="xs"]),
19
+ :host([variant="square"][size="s"]) {
20
+ --swirl-avatar-radius: 0.5rem;
21
+ }
22
+
23
+ :host([variant="square"][size="m"]) {
24
+ --swirl-avatar-radius: 0.625rem;
25
+ }
26
+
27
+ :host([variant="square"][size="l"]) {
28
+ --swirl-avatar-radius: 0.75rem;
29
+ }
30
+
31
+ :host([variant="square"][size="xl"]) {
32
+ --swirl-avatar-radius: 1rem;
33
+ }
34
+
35
+ :host([variant="square"][size="2xl"]) {
36
+ --swirl-avatar-radius: 1.25rem;
37
+ }
38
+
12
39
  .avatar {
13
40
  position: relative;
14
41
  display: inline-flex;
15
42
  justify-content: center;
16
43
  align-items: center;
17
- border-radius: 50%;
44
+ border-radius: var(--swirl-avatar-radius);
18
45
  border: var(--swirl-avatar-border-width, 0) solid
19
46
  var(--swirl-avatar-border-color, transparent);
20
47
  }
@@ -56,12 +83,6 @@
56
83
  padding-left: 0.125rem;
57
84
  }
58
85
 
59
- .avatar--size-3xs.avatar--variant-square,
60
- .avatar--size-3xs.avatar--variant-square .avatar__image,
61
- .avatar--size-3xs.avatar--variant-square .avatar__initials {
62
- border-radius: 0.25rem;
63
- }
64
-
65
86
  .avatar--size-2xs {
66
87
  width: 1.5rem;
67
88
  height: 1.5rem;
@@ -76,12 +97,6 @@
76
97
  padding-left: 0.125rem;
77
98
  }
78
99
 
79
- .avatar--size-2xs.avatar--variant-square,
80
- .avatar--size-2xs.avatar--variant-square .avatar__image,
81
- .avatar--size-2xs.avatar--variant-square .avatar__initials {
82
- border-radius: 0.25rem;
83
- }
84
-
85
100
  .avatar--size-xs {
86
101
  width: 1.75rem;
87
102
  height: 1.75rem;
@@ -96,12 +111,6 @@
96
111
  padding-left: 0.4375rem;
97
112
  }
98
113
 
99
- .avatar--size-xs.avatar--variant-square,
100
- .avatar--size-xs.avatar--variant-square .avatar__image,
101
- .avatar--size-xs.avatar--variant-square .avatar__initials {
102
- border-radius: 0.5rem;
103
- }
104
-
105
114
  .avatar--size-s {
106
115
  width: 2rem;
107
116
  height: 2rem;
@@ -116,12 +125,6 @@
116
125
  padding-left: var(--s-space-8);
117
126
  }
118
127
 
119
- .avatar--size-s.avatar--variant-square,
120
- .avatar--size-s.avatar--variant-square .avatar__image,
121
- .avatar--size-s.avatar--variant-square .avatar__initials {
122
- border-radius: 0.5rem;
123
- }
124
-
125
128
  .avatar--size-m {
126
129
  width: 2.5rem;
127
130
  height: 2.5rem;
@@ -136,12 +139,6 @@
136
139
  padding-left: 0.625rem;
137
140
  }
138
141
 
139
- .avatar--size-m.avatar--variant-square,
140
- .avatar--size-m.avatar--variant-square .avatar__image,
141
- .avatar--size-m.avatar--variant-square .avatar__initials {
142
- border-radius: 0.625rem;
143
- }
144
-
145
142
  .avatar--size-l {
146
143
  width: 3rem;
147
144
  height: 3rem;
@@ -156,12 +153,6 @@
156
153
  padding-left: var(--s-space-12);
157
154
  }
158
155
 
159
- .avatar--size-l.avatar--variant-square,
160
- .avatar--size-l.avatar--variant-square .avatar__image,
161
- .avatar--size-l.avatar--variant-square .avatar__initials {
162
- border-radius: 0.75rem;
163
- }
164
-
165
156
  .avatar--size-xl {
166
157
  width: 4rem;
167
158
  height: 4rem;
@@ -176,12 +167,6 @@
176
167
  padding-left: var(--s-space-16);
177
168
  }
178
169
 
179
- .avatar--size-xl.avatar--variant-square,
180
- .avatar--size-xl.avatar--variant-square .avatar__image,
181
- .avatar--size-xl.avatar--variant-square .avatar__initials {
182
- border-radius: 1rem;
183
- }
184
-
185
170
  .avatar--size-2xl {
186
171
  width: 9rem;
187
172
  height: 9rem;
@@ -196,12 +181,6 @@
196
181
  padding-left: var(--s-space-32);
197
182
  }
198
183
 
199
- .avatar--size-2xl.avatar--variant-square,
200
- .avatar--size-2xl.avatar--variant-square .avatar__image,
201
- .avatar--size-2xl.avatar--variant-square .avatar__initials {
202
- border-radius: 1.25rem;
203
- }
204
-
205
184
  .avatar--size-2xl .avatar__tool {
206
185
  transform: translate3d(-25%, -25%, 0px);
207
186
  }
@@ -254,7 +233,7 @@
254
233
  overflow: hidden;
255
234
  width: 100%;
256
235
  height: 100%;
257
- border-radius: 50%;
236
+ border-radius: var(--swirl-avatar-radius);
258
237
  }
259
238
 
260
239
  .avatar__image > img {
@@ -288,7 +267,7 @@
288
267
  padding-left: 0.0625rem;
289
268
  justify-content: center;
290
269
  align-items: center;
291
- border-radius: 50%;
270
+ border-radius: var(--swirl-avatar-radius);
292
271
  font-weight: var(--s-font-weight-medium);
293
272
  inset: 0;
294
273
  }
package/dist/collection/components/swirl-avatar/swirl-avatar.js CHANGED
@@ -113,7 +113,7 @@ export class SwirlAvatar {
113
113
  });
114
114
  const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
115
115
  const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
116
- return (h(Host, { key: 'b3d8e85dff3421e87ab9dca84ec15fdaf039afce', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '4335f190575f73cdf79861888dc5f8647a402b32', class: className, part: "avatar" }, showImage && (h("span", { key: '022ae94eb5a02e8fc41c1616294d4e6d5a647358', class: "avatar__image" }, h("img", { key: '282f880e1448ce6db97baa5127d7b83b642e15cc', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'aeffe97abbe40c527dba455267ea2840d6c02f78', class: "avatar__initials" }, h("span", { key: '8d902047feecfd8447e8cf0bcfaccff4cc2bd56d' }, this.initials))), showIcon && h("span", { key: '6dab8a144035877ea3e2ed9c223343bd6542d802', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '37a926ce3051ea237dd2eb434b323982c6d88b73', class: "avatar__icon" }, h("swirl-icon-person", { key: '21f5c0a3679ce465c5fb9ac3baac62d912a6427a' }))), showBadge && (h("span", { key: '6cb5c012f4ad1b149804148c3403022daa034d44', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'a954b65d8bf20390ccfe7444b00a6bba94d76965', class: toolClassName }, h("slot", { key: '06f2fa1ef610567be0072c1b4937af2164e794de', name: "tool" }))), this.showLabel && (h("span", { key: '2c6772b4e302dde8c58507bd89ab221e91e0b810', "aria-hidden": true, class: "avatar__label" }, this.label))));
116
+ return (h(Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, h("img", { key: '4636819fb2a365ed239fe765a4efcb347186ca06', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '87a4741931e8a7057764618f4164df8c3286fa15', class: "avatar__initials" }, h("span", { key: 'ac5d4393d9bfaa22391e3414e0a02d3831c8c137' }, this.initials))), showIcon && h("span", { key: '29690e49b2882761d26dd548bbdd59d3eb458d5d', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '28cba2cb26c839a0f368bf7312039cfc36cd60ab', class: "avatar__icon" }, h("swirl-icon-person", { key: 'e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9' }))), showBadge && (h("span", { key: 'd88cc696f910bd1105811d0d07636f7ed686d11b', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'eeb86573ed228297fba743a2327aea481cf05e03', class: toolClassName }, h("slot", { key: '121f539afb9e2ef8adac562c05c1f62fba280e87', name: "tool" }))), this.showLabel && (h("span", { key: 'b73d9b0e724038fa345e081ec3761fcd964ea95f', "aria-hidden": true, class: "avatar__label" }, this.label))));
117
117
  }
118
118
  static get is() { return "swirl-avatar"; }
119
119
  static get encapsulation() { return "shadow"; }
@@ -344,7 +344,7 @@ export class SwirlAvatar {
344
344
  },
345
345
  "getter": false,
346
346
  "setter": false,
347
- "reflect": false,
347
+ "reflect": true,
348
348
  "attribute": "size",
349
349
  "defaultValue": "\"m\""
350
350
  },
@@ -415,7 +415,7 @@ export class SwirlAvatar {
415
415
  },
416
416
  "getter": false,
417
417
  "setter": false,
418
- "reflect": false,
418
+ "reflect": true,
419
419
  "attribute": "variant",
420
420
  "defaultValue": "\"round\""
421
421
  }
package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css CHANGED
@@ -19,7 +19,7 @@
19
19
  .avatar-group--diagonal-stack ::slotted(*:first-child) {
20
20
  z-index: 1;
21
21
  display: inline-flex;
22
- border-radius: 50%;
22
+ border-radius: var(--swirl-avatar-radius, 50%);
23
23
  box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
24
24
  background-color: var(--swirl-avatar-group-border-color);
25
25
  grid-column-start: 1;
@@ -31,7 +31,7 @@
31
31
  .avatar-group--diagonal-stack ::slotted(*:nth-child(2)) {
32
32
  z-index: 0;
33
33
  display: inline-flex;
34
- border-radius: 50%;
34
+ border-radius: var(--swirl-avatar-radius, 50%);
35
35
  grid-column-start: 4;
36
36
  grid-column-end: 10;
37
37
  grid-row-start: 1;
@@ -59,7 +59,7 @@
59
59
  .avatar-group--horizontal-stack ::slotted(*) {
60
60
  z-index: 1;
61
61
  display: inline-flex;
62
- border-radius: 50%;
62
+ border-radius: var(--swirl-avatar-radius, 50%);
63
63
  box-shadow: 0 0 0 0.125rem var(--swirl-avatar-group-border-color);
64
64
  background-color: var(--swirl-avatar-group-border-color);
65
65
  }
package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js CHANGED
@@ -47,3 +47,16 @@ export const WithHorizontalLayout = TemplateWithHorizontalLayout.bind({});
47
47
  WithHorizontalLayout.args = {
48
48
  layout: "horizontal",
49
49
  };
50
+ const TemplateWithSquareAvatars = (args) => {
51
+ const element = generateStoryElement("swirl-avatar-group", args);
52
+ element.innerHTML = `
53
+ <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="xs" variant="square"></swirl-avatar>
54
+ <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="xs" variant="square"></swirl-avatar>
55
+ <swirl-avatar label="Jack Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="xs" variant="square"></swirl-avatar>
56
+ `;
57
+ return element;
58
+ };
59
+ export const WithSquareAvatars = TemplateWithSquareAvatars.bind({});
60
+ WithSquareAvatars.args = {
61
+ layout: "horizontal",
62
+ };
package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css CHANGED
@@ -107,6 +107,10 @@
107
107
  min-height: 2rem;
108
108
  }
109
109
 
110
+ .resource-list-item--selectable .resource-list-item__content {
111
+ padding-left: calc(var(--s-space-16) + 0.75rem + var(--s-space-12));
112
+ }
113
+
110
114
  @media (min-width: 768px) {
111
115
 
112
116
  .resource-list-item--selectable .resource-list-item__content {
@@ -115,7 +119,7 @@
115
119
  }
116
120
 
117
121
  .resource-list-item--selectable .resource-list-item__label-container {
118
- padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));
122
+ padding-right: var(--s-space-8);
119
123
  }
120
124
 
121
125
  @media (min-width: 768px) {
@@ -305,7 +309,7 @@
305
309
  .resource-list-item__checkbox {
306
310
  position: absolute;
307
311
  top: 50%;
308
- right: var(--s-space-16);
312
+ left: calc(var(--s-space-16) - var(--s-space-2));
309
313
  display: flex;
310
314
  width: 1.125rem;
311
315
  height: 1.125rem;
@@ -317,14 +321,6 @@
317
321
  pointer-events: none;
318
322
  }
319
323
 
320
- @media (min-width: 768px) {
321
-
322
- .resource-list-item__checkbox {
323
- right: auto;
324
- left: calc(var(--s-space-16) - var(--s-space-2))
325
- }
326
- }
327
-
328
324
  .resource-list-item__checkbox-icon {
329
325
  display: inline-flex;
330
326
  width: 1.0625rem;
package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js CHANGED
@@ -69,7 +69,7 @@ export class SwirlResourceListItem {
69
69
  return Boolean(this.el.querySelector("[slot='badges']"));
70
70
  }
71
71
  get showMeta() {
72
- return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
72
+ return Boolean(this.meta) || this.hasBadges;
73
73
  }
74
74
  forceIconProps(smallIcon) {
75
75
  const icon = this.iconEl?.children[0];
@@ -133,7 +133,7 @@ export class SwirlResourceListItem {
133
133
  const labelContainerStyles = {
134
134
  minHeight: this.labelMinHeight ?? undefined,
135
135
  };
136
- const renderLabel = () => (h("span", { key: 'fea2fbcf10c2a9e64069f904dffd961f1780f1b8', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
136
+ const renderLabel = () => (h("span", { key: '1f67d8ed97b7f7b3aa595f619a76bfcf5a21b13e', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
137
137
  "-webkit-line-clamp": !!this.labelWrapMaxLines
138
138
  ? String(this.labelWrapMaxLines)
139
139
  : undefined,
@@ -156,7 +156,7 @@ export class SwirlResourceListItem {
156
156
  "resource-list-item--wrap-label": this.labelWrap,
157
157
  "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
158
158
  });
159
- return (h(Host, { key: 'eba42053a04ca3e1fe0face5b24eef4406507596', role: hostRole }, h("div", { key: '4e75ad4c78923d92db15f48db2d44679de292426', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: 'a57ab79971b52955c83e537d05bbed19d17b5050', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "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, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, 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: 'f66ad2d1e5afe8bdf41bc71eae85eea5dc3364d5', class: "resource-list-item__media" }, h("slot", { key: 'f3994e3e365997a84943f274b4a144d38315d235', name: "media" }))), h("span", { key: 'd8abd040fc127d46372c3deb05482efe9c2f6a2f', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '46d49a9a0072e663a774fcd2c9b460e3ff4423f1', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '9b9f68101452845479b6d30f6d4d5a554ceade74', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '5d100d299916fe134c80ceaf5dfce1492eca3f8d', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'fcb68d92aa83cea7d9169c6e692f00a220b7f6c6' }))))), showMeta && (h("span", { key: '8923f797499082f6d3cabb4313345b1ff5cc1fa8', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '38732e13f6f345170f78449356f032edc0b6a804', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '26de116b2a0a462139f29f67dfe986ee6cb1816b', class: "resource-list-item__badges" }, h("slot", { key: '905302daa83a1e8691cf00415d5d1f12a1aad858', name: "badges" })))), h("span", { key: 'dc2597525e453848011cde15c3db223dad8b210b', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'a5532a9baed0164df451231fac9109f3248c89e8', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'fc852865fca4a77e081c0f42a2ff3db975c4c9c8', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'b913d4287648880d76fc81879eee61d7a6f51ffd', "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: '865b8967d043f7e0d3a59936f162070842526d04', "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: 'fdb31d1617a0d3f0a539c72c98a8179a06ed92f2', size: this.iconSize })))));
159
+ return (h(Host, { key: '2fc1a90e9b27fdbc94d5b157950d769cdd5e6cdd', role: hostRole }, h("div", { key: 'ca9508c49bb972c2ff46b7f0d2968f91b513e9d6', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: 'f8112676e7a9eb884d209848d0f1464df593bcce', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "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, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, 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: '6b538fd96785489c1bc6b1c6b3332670d5c6504d', class: "resource-list-item__media" }, h("slot", { key: 'ab038965e8bc744c5fa2ed838562daaa9bdef5e6', name: "media" }))), h("span", { key: '8eae083e40c5f5091cdd0dd6ed1141059d39f00e', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '38ff401318fa5cf91050e84f186a0f7fec21da88', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: 'b5f0f1e0f07d0163ce76b1b6e19b17b5f82ebf41', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '22f06ed865c8867f7b5ae05f5b5b507ca80692bd', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'd93bd1b797679e9cd71d391a9535d220e1b5708b' }))))), showMeta && (h("span", { key: 'd03584fca25f42a0c1733f7f179af19826964e07', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'b811428b62519b8cd6c6aabb58aacdf563e8e65a', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '3f25698b0fa5033c3b40250fa9267ff86c3e157d', class: "resource-list-item__badges" }, h("slot", { key: 'd1902a6b48285b6f024aa56b2fb78b5e049be657', name: "badges" })))), h("span", { key: 'e3afc63364298cd5ed0210dd500185a83a86c8ec', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '9d9a0ec4551f9f416d8f26eeaad1ccb68a15a943', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '73223a669f45ced7e12c6cb4eca2b2c147a84ba1', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '06c8c6fb5f9c9c28ef17d7ea2f09535465c3ee93', "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: 'f2afffb20ffdb601b586889ed8ada11a8a708aa3', "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: 'd5481c0a38e95ad60c0f619d6d5fe68ed3d8ffd5', size: this.iconSize })))));
160
160
  }
161
161
  static get is() { return "swirl-resource-list-item"; }
162
162
  static get encapsulation() { return "scoped"; }
package/dist/components/swirl-avatar-group.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as a,HTMLElement as r,h as t,Host as o,transformTag as e}from"@stencil/core/internal/client";import{c as i}from"./index2.js";const s=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("diagonal"===this.layout?a=>{a.style.position="",a.style.zIndex=""}:(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""})}render(){const a=i("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge}),r=i("avatar-group__badge");return t(o,{key:"db0fba81fc616434e7efa68534fdb940cedad7d6"},t("div",{key:"d8c744147498c6d6980980abfef224480037010e","aria-label":this.label,class:a,role:this.semantics},t("slot",{key:"44c853fedcf3db8d6869b9dd5ba0a8cc06fcbce5",onSlotchange:this.onSlotChange}),this.badge&&t("span",{key:"4c47557ac791b9d62312fac213a053263a56ae40",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),d=s,l=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))};export{d as SwirlAvatarGroup,l as defineCustomElement}
1
+ import{proxyCustomElement as a,HTMLElement as r,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as s}from"./index2.js";const e=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("diagonal"===this.layout?a=>{a.style.position="",a.style.zIndex=""}:(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""})}render(){const a=s("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge}),r=s("avatar-group__badge");return t(o,{key:"db0fba81fc616434e7efa68534fdb940cedad7d6"},t("div",{key:"d8c744147498c6d6980980abfef224480037010e","aria-label":this.label,class:a,role:this.semantics},t("slot",{key:"44c853fedcf3db8d6869b9dd5ba0a8cc06fcbce5",onSlotchange:this.onSlotChange}),this.badge&&t("span",{key:"4c47557ac791b9d62312fac213a053263a56ae40",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),d=e,l=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(i(a))||customElements.define(i(a),e))}))};export{d as SwirlAvatarGroup,l as defineCustomElement}
package/dist/components/swirl-avatar.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as a,HTMLElement as t,createEvent as i,h as r,Host as e,transformTag as s}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-icon-person2.js";const v={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},l=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.imageError=i(this,"imageError",7),this.imageLoad=i(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),t=!(a&&(this.loaded||this.loadingError)||!this.initials),i=!a&&!t&&!!this.icon,s=!a&&!t&&!i,n=!!this.badge&&"m"===this.size,l=this.interactive?"button":void 0,d=o("avatar","avatar--color-"+this.color,"avatar--size-"+this.size,"avatar--variant-"+this.variant,{"avatar--has-icon":i||s,"avatar--has-initials":t,"avatar--interactive":this.interactive}),c=o("avatar__badge","avatar__badge--position-"+this.badgePosition),h=o("avatar__tool","avatar__tool--position-"+this.toolPosition);return r(e,{key:"b3d8e85dff3421e87ab9dca84ec15fdaf039afce","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:l,tabIndex:this.interactive?0:void 0},r("span",{key:"4335f190575f73cdf79861888dc5f8647a402b32",class:d,part:"avatar"},a&&r("span",{key:"022ae94eb5a02e8fc41c1616294d4e6d5a647358",class:"avatar__image"},r("img",{key:"282f880e1448ce6db97baa5127d7b83b642e15cc",alt:"",height:v[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:v[this.size]})),t&&r("span",{key:"aeffe97abbe40c527dba455267ea2840d6c02f78",class:"avatar__initials"},r("span",{key:"8d902047feecfd8447e8cf0bcfaccff4cc2bd56d"},this.initials)),i&&r("span",{key:"6dab8a144035877ea3e2ed9c223343bd6542d802",class:"avatar__icon",innerHTML:this.icon}),s&&r("span",{key:"37a926ce3051ea237dd2eb434b323982c6d88b73",class:"avatar__icon"},r("swirl-icon-person",{key:"21f5c0a3679ce465c5fb9ac3baac62d912a6427a"})),n&&r("span",{key:"6cb5c012f4ad1b149804148c3403022daa034d44",class:c,innerHTML:this.badge}),r("span",{key:"a954b65d8bf20390ccfe7444b00a6bba94d76965",class:h},r("slot",{key:"06f2fa1ef610567be0072c1b4937af2164e794de",name:"tool"}))),this.showLabel&&r("span",{key:"2c6772b4e302dde8c58507bd89ab221e91e0b810","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;border:var(--swirl-avatar-border-width, 0) solid var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}"}},[257,"swirl-avatar",{badge:[1],badgePosition:[1,"badge-position"],color:[1],icon:[1],initials:[1],interactive:[4],label:[1],loading:[1],showLabel:[4,"show-label"],size:[1],src:[1],toolPosition:[1,"tool-position"],variant:[1],loadingError:[32],loaded:[32],imageAvailable:[32],inViewport:[32]},void 0,{src:[{watchSrcProp:0}]}]),d=l,c=function(){"undefined"!=typeof customElements&&["swirl-avatar","swirl-icon-person"].forEach((a=>{switch(a){case"swirl-avatar":customElements.get(s(a))||customElements.define(s(a),l);break;case"swirl-icon-person":customElements.get(s(a))||n()}}))};export{d as SwirlAvatar,c as defineCustomElement}
1
+ import{proxyCustomElement as a,HTMLElement as t,createEvent as i,h as r,Host as s,transformTag as e}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-icon-person2.js";const d={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},l=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.imageError=i(this,"imageError",7),this.imageLoad=i(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),t=!(a&&(this.loaded||this.loadingError)||!this.initials),i=!a&&!t&&!!this.icon,e=!a&&!t&&!i,n=!!this.badge&&"m"===this.size,l=this.interactive?"button":void 0,c=o("avatar","avatar--color-"+this.color,"avatar--size-"+this.size,"avatar--variant-"+this.variant,{"avatar--has-icon":i||e,"avatar--has-initials":t,"avatar--interactive":this.interactive}),h=o("avatar__badge","avatar__badge--position-"+this.badgePosition),v=o("avatar__tool","avatar__tool--position-"+this.toolPosition);return r(s,{key:"507321c143bd3a7bd96727522250a32a0bddfda9","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:l,tabIndex:this.interactive?0:void 0},r("span",{key:"41c06e0e9a91b7012a898a19c7d2ff66b93a3584",class:c,part:"avatar"},a&&r("span",{key:"4026f68212a7026dfdb236bffacc210a7dfd7b30",class:"avatar__image"},r("img",{key:"4636819fb2a365ed239fe765a4efcb347186ca06",alt:"",height:d[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:d[this.size]})),t&&r("span",{key:"87a4741931e8a7057764618f4164df8c3286fa15",class:"avatar__initials"},r("span",{key:"ac5d4393d9bfaa22391e3414e0a02d3831c8c137"},this.initials)),i&&r("span",{key:"29690e49b2882761d26dd548bbdd59d3eb458d5d",class:"avatar__icon",innerHTML:this.icon}),e&&r("span",{key:"28cba2cb26c839a0f368bf7312039cfc36cd60ab",class:"avatar__icon"},r("swirl-icon-person",{key:"e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9"})),n&&r("span",{key:"d88cc696f910bd1105811d0d07636f7ed686d11b",class:h,innerHTML:this.badge}),r("span",{key:"eeb86573ed228297fba743a2327aea481cf05e03",class:v},r("slot",{key:"121f539afb9e2ef8adac562c05c1f62fba280e87",name:"tool"}))),this.showLabel&&r("span",{key:"b73d9b0e724038fa345e081ec3761fcd964ea95f","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return':host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column;--swirl-avatar-radius:50%}:host *{box-sizing:border-box}:host([variant="square"][size="3xs"]),:host([variant="square"][size="2xs"]){--swirl-avatar-radius:0.25rem}:host([variant="square"][size="xs"]),:host([variant="square"][size="s"]){--swirl-avatar-radius:0.5rem}:host([variant="square"][size="m"]){--swirl-avatar-radius:0.625rem}:host([variant="square"][size="l"]){--swirl-avatar-radius:0.75rem}:host([variant="square"][size="xl"]){--swirl-avatar-radius:1rem}:host([variant="square"][size="2xl"]){--swirl-avatar-radius:1.25rem}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);border:var(--swirl-avatar-border-width, 0) solid var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-s{width:2rem;height:2rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-m{width:2.5rem;height:2.5rem}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-l{width:3rem;height:3rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-xl{width:4rem;height:4rem}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-2xl{width:9rem;height:9rem}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:var(--swirl-avatar-radius)}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}'}},[257,"swirl-avatar",{badge:[1],badgePosition:[1,"badge-position"],color:[1],icon:[1],initials:[1],interactive:[4],label:[1],loading:[1],showLabel:[4,"show-label"],size:[513],src:[1],toolPosition:[1,"tool-position"],variant:[513],loadingError:[32],loaded:[32],imageAvailable:[32],inViewport:[32]},void 0,{src:[{watchSrcProp:0}]}]),c=l,h=function(){"undefined"!=typeof customElements&&["swirl-avatar","swirl-icon-person"].forEach((a=>{switch(a){case"swirl-avatar":customElements.get(e(a))||customElements.define(e(a),l);break;case"swirl-icon-person":customElements.get(e(a))||n()}}))};export{c as SwirlAvatar,h as defineCustomElement}
package/dist/components/swirl-resource-list-item.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";const h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta||this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId||c,n=this.interactive&&this.href?this.href:void 0,m=c&&(!!this.meta||o),u=!!this.menuTriggerId&&!this.meta&&!this.selectable,d=this.showMeta,h=this.swirlAriaLabel?this.swirlAriaLabel:this.label,w=this.selectable?this.checked+"":void 0,b=this.interactive&&this.selectable?"checkbox":void 0,p=this.el.closest('[role="grid"]')?"row":"listitem",g="row"===p?"gridcell":void 0,f={minHeight:this.labelMinHeight??void 0},v=()=>r("span",{key:"fea2fbcf10c2a9e64069f904dffd961f1780f1b8",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),_=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":m,"resource-list-item--show-meta":d,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"eba42053a04ca3e1fe0face5b24eef4406507596",role:p},r("div",{key:"4e75ad4c78923d92db15f48db2d44679de292426",class:_,role:g,onClick:this.onClick},r(e,{key:"a57ab79971b52955c83e537d05bbed19d17b5050","aria-checked":w,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":h,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:n,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:b,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"f66ad2d1e5afe8bdf41bc71eae85eea5dc3364d5",class:"resource-list-item__media"},r("slot",{key:"f3994e3e365997a84943f274b4a144d38315d235",name:"media"})),r("span",{key:"d8abd040fc127d46372c3deb05482efe9c2f6a2f",class:"resource-list-item__label-container",style:f},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},v()):v(),this.description&&r("span",{key:"46d49a9a0072e663a774fcd2c9b460e3ff4423f1",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"9b9f68101452845479b6d30f6d4d5a554ceade74","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"5d100d299916fe134c80ceaf5dfce1492eca3f8d",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"fcb68d92aa83cea7d9169c6e692f00a220b7f6c6"}))),d&&r("span",{key:"8923f797499082f6d3cabb4313345b1ff5cc1fa8",class:"resource-list-item__meta"},this.meta&&r("span",{key:"38732e13f6f345170f78449356f032edc0b6a804",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"26de116b2a0a462139f29f67dfe986ee6cb1816b",class:"resource-list-item__badges"},r("slot",{key:"905302daa83a1e8691cf00415d5d1f12a1aad858",name:"badges"}))),r("span",{key:"dc2597525e453848011cde15c3db223dad8b210b",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"a5532a9baed0164df451231fac9109f3248c89e8",name:"control"})),u&&r("swirl-popover-trigger",{key:"fc852865fca4a77e081c0f42a2ff3db975c4c9c8",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"b913d4287648880d76fc81879eee61d7a6f51ffd","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"865b8967d043f7e0d3a59936f162070842526d04","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"fdb31d1617a0d3f0a539c72c98a8179a06ed92f2",size:this.iconSize})))}get el(){return this}static get style(){return'.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.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.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.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;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);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-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:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.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{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-visible: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-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-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--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:2rem}@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)}@media (hover: hover){.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;margin:calc(-1 * var(--s-space-4)) 0}.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-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 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-state-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--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;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;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);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),.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{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);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);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;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)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),w=h,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),h);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{w as SwirlResourceListItem,b as defineCustomElement}
1
+ import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";const h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return!!this.meta||this.hasBadges}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId||c,n=this.interactive&&this.href?this.href:void 0,m=c&&(!!this.meta||o),u=!!this.menuTriggerId&&!this.meta&&!this.selectable,d=this.showMeta,h=this.swirlAriaLabel?this.swirlAriaLabel:this.label,w=this.selectable?this.checked+"":void 0,b=this.interactive&&this.selectable?"checkbox":void 0,p=this.el.closest('[role="grid"]')?"row":"listitem",g="row"===p?"gridcell":void 0,f={minHeight:this.labelMinHeight??void 0},v=()=>r("span",{key:"1f67d8ed97b7f7b3aa595f619a76bfcf5a21b13e",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),_=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":m,"resource-list-item--show-meta":d,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"2fc1a90e9b27fdbc94d5b157950d769cdd5e6cdd",role:p},r("div",{key:"ca9508c49bb972c2ff46b7f0d2968f91b513e9d6",class:_,role:g,onClick:this.onClick},r(e,{key:"f8112676e7a9eb884d209848d0f1464df593bcce","aria-checked":w,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":h,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:n,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:b,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"6b538fd96785489c1bc6b1c6b3332670d5c6504d",class:"resource-list-item__media"},r("slot",{key:"ab038965e8bc744c5fa2ed838562daaa9bdef5e6",name:"media"})),r("span",{key:"8eae083e40c5f5091cdd0dd6ed1141059d39f00e",class:"resource-list-item__label-container",style:f},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},v()):v(),this.description&&r("span",{key:"38ff401318fa5cf91050e84f186a0f7fec21da88",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"b5f0f1e0f07d0163ce76b1b6e19b17b5f82ebf41","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"22f06ed865c8867f7b5ae05f5b5b507ca80692bd",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"d93bd1b797679e9cd71d391a9535d220e1b5708b"}))),d&&r("span",{key:"d03584fca25f42a0c1733f7f179af19826964e07",class:"resource-list-item__meta"},this.meta&&r("span",{key:"b811428b62519b8cd6c6aabb58aacdf563e8e65a",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"3f25698b0fa5033c3b40250fa9267ff86c3e157d",class:"resource-list-item__badges"},r("slot",{key:"d1902a6b48285b6f024aa56b2fb78b5e049be657",name:"badges"}))),r("span",{key:"e3afc63364298cd5ed0210dd500185a83a86c8ec",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"9d9a0ec4551f9f416d8f26eeaad1ccb68a15a943",name:"control"})),u&&r("swirl-popover-trigger",{key:"73223a669f45ced7e12c6cb4eca2b2c147a84ba1",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"06c8c6fb5f9c9c28ef17d7ea2f09535465c3ee93","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"f2afffb20ffdb601b586889ed8ada11a8a708aa3","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"d5481c0a38e95ad60c0f619d6d5fe68ed3d8ffd5",size:this.iconSize})))}get el(){return this}static get style(){return'.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.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.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.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;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);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-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:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.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{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-visible: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-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-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--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:2rem}.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) + 0.75rem + var(--s-space-12))}@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:var(--s-space-8)}@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)}@media (hover: hover){.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;margin:calc(-1 * var(--s-space-4)) 0}.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-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 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-state-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--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;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;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);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%;left:calc(var(--s-space-16) - var(--s-space-2));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}.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),.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{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);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);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;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)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),w=h,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),h);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{w as SwirlResourceListItem,b as defineCustomElement}