@getflip/swirl-components 0.276.0 → 0.278.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +12 -4
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +3 -6
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.js +1 -4
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +6 -0
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +2 -2
- package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.stories.js +7 -5
- package/dist/components/assets/fonts/Inter-italic.var.woff2 +0 -0
- package/dist/components/assets/fonts/Inter.var.woff2 +0 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-resource-list-item2.js +2 -2
- package/dist/components/swirl-resource-list2.js +1 -4
- package/dist/esm/swirl-app-layout_5.entry.js +3 -6
- package/dist/swirl-components/{p-9bfc7113.entry.js → p-c1f55abe.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.css +3 -2
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +1 -1
- package/package.json +1 -1
- package/vscode-data.json +6 -0
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-01-
|
|
2
|
+
"timestamp": "2025-01-14T10:58:16",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.18.1",
|
|
@@ -47034,10 +47034,10 @@
|
|
|
47034
47034
|
},
|
|
47035
47035
|
{
|
|
47036
47036
|
"name": "labelWeight",
|
|
47037
|
-
"type": "\"medium\" | \"regular\"",
|
|
47037
|
+
"type": "\"bold\" | \"medium\" | \"regular\" | \"semibold\"",
|
|
47038
47038
|
"complexType": {
|
|
47039
47039
|
"original": "SwirlResourceListItemLabelWeight",
|
|
47040
|
-
"resolved": "\"medium\" | \"regular\"",
|
|
47040
|
+
"resolved": "\"bold\" | \"medium\" | \"regular\" | \"semibold\"",
|
|
47041
47041
|
"references": {
|
|
47042
47042
|
"SwirlResourceListItemLabelWeight": {
|
|
47043
47043
|
"location": "local",
|
|
@@ -47053,6 +47053,10 @@
|
|
|
47053
47053
|
"docsTags": [],
|
|
47054
47054
|
"default": "\"medium\"",
|
|
47055
47055
|
"values": [
|
|
47056
|
+
{
|
|
47057
|
+
"value": "bold",
|
|
47058
|
+
"type": "string"
|
|
47059
|
+
},
|
|
47056
47060
|
{
|
|
47057
47061
|
"value": "medium",
|
|
47058
47062
|
"type": "string"
|
|
@@ -47060,6 +47064,10 @@
|
|
|
47060
47064
|
{
|
|
47061
47065
|
"value": "regular",
|
|
47062
47066
|
"type": "string"
|
|
47067
|
+
},
|
|
47068
|
+
{
|
|
47069
|
+
"value": "semibold",
|
|
47070
|
+
"type": "string"
|
|
47063
47071
|
}
|
|
47064
47072
|
],
|
|
47065
47073
|
"optional": true,
|
|
@@ -59990,7 +59998,7 @@
|
|
|
59990
59998
|
"path": "src/components/swirl-radio/swirl-radio.tsx"
|
|
59991
59999
|
},
|
|
59992
60000
|
"src/components/swirl-resource-list-item/swirl-resource-list-item.tsx::SwirlResourceListItemLabelWeight": {
|
|
59993
|
-
"declaration": "export type SwirlResourceListItemLabelWeight
|
|
60001
|
+
"declaration": "export type SwirlResourceListItemLabelWeight =\n | \"medium\"\n | \"regular\"\n | \"semibold\"\n | \"bold\";",
|
|
59994
60002
|
"docstring": "",
|
|
59995
60003
|
"path": "src/components/swirl-resource-list-item/swirl-resource-list-item.tsx"
|
|
59996
60004
|
},
|
|
@@ -658,14 +658,11 @@ const SwirlResourceList = class {
|
|
|
658
658
|
section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
|
|
659
659
|
section.hasSeparator = false;
|
|
660
660
|
}
|
|
661
|
-
else {
|
|
662
|
-
section.hasSeparator = true;
|
|
663
|
-
}
|
|
664
661
|
section.spacing = this.spacing;
|
|
665
662
|
});
|
|
666
663
|
}
|
|
667
664
|
render() {
|
|
668
|
-
return (index.h(index.Host, { key: '
|
|
665
|
+
return (index.h(index.Host, { key: '04e410a7eb1df3235d088ae42c0b85114d197d99', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '8656ba56a85b996765ce641034a42f7245ac4228', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '38ada50f222304769a818b6a6ce9040370144cba', paddingInlineEnd: "8", paddingInlineStart: "8" }, index.h("swirl-stack", { key: 'a7e461662c51c1ed429c01676490ae2576892fbd', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, index.h("slot", { key: 'ae905d997b22ed8217a6a4f870bc925ba81a38be' })))));
|
|
669
666
|
}
|
|
670
667
|
get el() { return index.getElement(this); }
|
|
671
668
|
static get watchers() { return {
|
|
@@ -674,7 +671,7 @@ const SwirlResourceList = class {
|
|
|
674
671
|
};
|
|
675
672
|
SwirlResourceList.style = SwirlResourceListStyle0;
|
|
676
673
|
|
|
677
|
-
const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item--interactive.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled),.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);position:relative;display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:flex-start;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12) var(--s-space-8);line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%)}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
|
|
674
|
+
const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item--interactive.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled),.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:focus:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);position:relative;display:flex;width:100%;min-width:0;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:flex-start;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12) var(--s-space-8);line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%)}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
|
|
678
675
|
const SwirlResourceListItemStyle0 = swirlResourceListItemCss;
|
|
679
676
|
|
|
680
677
|
const SwirlResourceListItem = class {
|
|
@@ -827,7 +824,7 @@ const SwirlResourceListItem = class {
|
|
|
827
824
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
828
825
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
829
826
|
});
|
|
830
|
-
return (index.h(index.Host, { key: '
|
|
827
|
+
return (index.h(index.Host, { key: '5be67a17757507369542b8cf618c57d9af7ae4fc', role: "row" }, index.h("div", { key: '69b5a264541dbe67a7bc2fabbbd7fde7c6835065', class: className, role: "gridcell" }, index.h(Tag, { key: '6e9c93a7fefc863ca1b99da52412dc5d6bae7728', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '64753aef4f1d30e0effb97986e7f98be36e82de8', class: "resource-list-item__media" }, index.h("slot", { key: '6d52ff59b03a04b73c15b6ce8e8631895f3ed03f', name: "media" }))), index.h("span", { key: '51b717b469bdaa6ba8b8e0055c32e4b4c5eb8fea', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '8acdd3eebe871b73db99b0fad7694c85c037845e', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '0f321dfadeb9835bc6a09ac372a112d36e7cb421', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '25b59f01033eb7f8b80ea8e392fcc0db43a73f06', class: "resource-list-item__meta" }, index.h("span", { key: 'b820724e36fa983c47c8531e9af69cb34038068b', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: 'ac38fd70bb0d0fecae2506bc625ffbbba2a5f4f7', class: "resource-list-item__badges" }, index.h("slot", { key: 'ce8f0faa8379ec311eaf399334d3830bc199cf3b', name: "badges" }))))), this.selectable && (index.h("span", { key: '136547350810b5f4d34d52acfbc72a3c2c19b497', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'dc7f2ed8cb36e2b8619a1687de3bae98912fd5dd', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '0d002fad41e3eaa731beb5b309040b1b424f6a3a' }))))), index.h("span", { key: 'ddd6000d44dadf4fbcdfe711357920f4ade74039', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: '184bd642b8db3d934ced851972971b339bf1c162', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '6a36758f43da945287da0885b1698a46b72f8afb', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '92a49824aefa712532a781d456bd50ca8d8dca76', "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: 'b6d34584b0ce39db65c0de8a80f2f0f5b4dba4b6', "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: '05416c82b9f79b96b14de3da5244d4e4d49b8665', size: this.iconSize })))));
|
|
831
828
|
}
|
|
832
829
|
get el() { return index.getElement(this); }
|
|
833
830
|
};
|
|
@@ -245,14 +245,11 @@ export class SwirlResourceList {
|
|
|
245
245
|
section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
|
|
246
246
|
section.hasSeparator = false;
|
|
247
247
|
}
|
|
248
|
-
else {
|
|
249
|
-
section.hasSeparator = true;
|
|
250
|
-
}
|
|
251
248
|
section.spacing = this.spacing;
|
|
252
249
|
});
|
|
253
250
|
}
|
|
254
251
|
render() {
|
|
255
|
-
return (h(Host, { key: '
|
|
252
|
+
return (h(Host, { key: '04e410a7eb1df3235d088ae42c0b85114d197d99', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '8656ba56a85b996765ce641034a42f7245ac4228', role: "alert" }, this.assistiveText), h("swirl-box", { key: '38ada50f222304769a818b6a6ce9040370144cba', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: 'a7e461662c51c1ed429c01676490ae2576892fbd', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'ae905d997b22ed8217a6a4f870bc925ba81a38be' })))));
|
|
256
253
|
}
|
|
257
254
|
static get is() { return "swirl-resource-list"; }
|
|
258
255
|
static get encapsulation() { return "scoped"; }
|
|
@@ -110,6 +110,12 @@
|
|
|
110
110
|
.resource-list-item--label-weight-medium .resource-list-item__label {
|
|
111
111
|
font-weight: var(--s-font-weight-medium);
|
|
112
112
|
}
|
|
113
|
+
.resource-list-item--label-weight-semibold .resource-list-item__label {
|
|
114
|
+
font-weight: var(--s-font-weight-semibold);
|
|
115
|
+
}
|
|
116
|
+
.resource-list-item--label-weight-bold .resource-list-item__label {
|
|
117
|
+
font-weight: var(--s-font-weight-bold);
|
|
118
|
+
}
|
|
113
119
|
|
|
114
120
|
.resource-list-item--show-control-on-focus:hover,
|
|
115
121
|
.resource-list-item--show-control-on-focus:focus,
|
|
@@ -154,7 +154,7 @@ export class SwirlResourceListItem {
|
|
|
154
154
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
155
155
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
156
156
|
});
|
|
157
|
-
return (h(Host, { key: '
|
|
157
|
+
return (h(Host, { key: '5be67a17757507369542b8cf618c57d9af7ae4fc', role: "row" }, h("div", { key: '69b5a264541dbe67a7bc2fabbbd7fde7c6835065', class: className, role: "gridcell" }, h(Tag, { key: '6e9c93a7fefc863ca1b99da52412dc5d6bae7728', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '64753aef4f1d30e0effb97986e7f98be36e82de8', class: "resource-list-item__media" }, h("slot", { key: '6d52ff59b03a04b73c15b6ce8e8631895f3ed03f', name: "media" }))), h("span", { key: '51b717b469bdaa6ba8b8e0055c32e4b4c5eb8fea', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '8acdd3eebe871b73db99b0fad7694c85c037845e', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '0f321dfadeb9835bc6a09ac372a112d36e7cb421', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '25b59f01033eb7f8b80ea8e392fcc0db43a73f06', class: "resource-list-item__meta" }, h("span", { key: 'b820724e36fa983c47c8531e9af69cb34038068b', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'ac38fd70bb0d0fecae2506bc625ffbbba2a5f4f7', class: "resource-list-item__badges" }, h("slot", { key: 'ce8f0faa8379ec311eaf399334d3830bc199cf3b', name: "badges" }))))), this.selectable && (h("span", { key: '136547350810b5f4d34d52acfbc72a3c2c19b497', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'dc7f2ed8cb36e2b8619a1687de3bae98912fd5dd', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '0d002fad41e3eaa731beb5b309040b1b424f6a3a' }))))), h("span", { key: 'ddd6000d44dadf4fbcdfe711357920f4ade74039', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '184bd642b8db3d934ced851972971b339bf1c162', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '6a36758f43da945287da0885b1698a46b72f8afb', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '92a49824aefa712532a781d456bd50ca8d8dca76', "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: 'b6d34584b0ce39db65c0de8a80f2f0f5b4dba4b6', "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: '05416c82b9f79b96b14de3da5244d4e4d49b8665', size: this.iconSize })))));
|
|
158
158
|
}
|
|
159
159
|
static get is() { return "swirl-resource-list-item"; }
|
|
160
160
|
static get encapsulation() { return "scoped"; }
|
|
@@ -435,7 +435,7 @@ export class SwirlResourceListItem {
|
|
|
435
435
|
"mutable": false,
|
|
436
436
|
"complexType": {
|
|
437
437
|
"original": "SwirlResourceListItemLabelWeight",
|
|
438
|
-
"resolved": "\"medium\" | \"regular\"",
|
|
438
|
+
"resolved": "\"bold\" | \"medium\" | \"regular\" | \"semibold\"",
|
|
439
439
|
"references": {
|
|
440
440
|
"SwirlResourceListItemLabelWeight": {
|
|
441
441
|
"location": "local",
|
|
@@ -11,15 +11,17 @@ export default {
|
|
|
11
11
|
title: "Components/SwirlResourceListSection",
|
|
12
12
|
};
|
|
13
13
|
const Template = (args) => {
|
|
14
|
-
const container = document.createElement("
|
|
14
|
+
const container = document.createElement("swirl-resource-list");
|
|
15
15
|
container.setAttribute("role", "menu");
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const sectionOne = generateStoryElement("swirl-resource-list-section", args);
|
|
17
|
+
const sectionTwo = generateStoryElement("swirl-resource-list-section", args);
|
|
18
|
+
sectionOne.innerHTML = `
|
|
19
19
|
<swirl-resource-list-item label="Resource list item"></swirl-resource-list-item>
|
|
20
20
|
<swirl-resource-list-item label="Resource list item"></swirl-resource-list-item>
|
|
21
21
|
`;
|
|
22
|
-
|
|
22
|
+
sectionTwo.innerHTML = sectionOne.innerHTML;
|
|
23
|
+
container.append("\n ", sectionOne, "\n");
|
|
24
|
+
container.append("\n ", sectionTwo, "\n");
|
|
23
25
|
return container;
|
|
24
26
|
};
|
|
25
27
|
export const SwirlResourceListSection = Template.bind({});
|
|
Binary file
|
|
Binary file
|