@getflip/swirl-components 0.125.1 → 0.126.0

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -173,6 +173,10 @@
     color: var(--s-text-on-status);
   }
 
+.resource-list-item--wrap-label .resource-list-item__label {
+    white-space: normal;
+  }
+
 .resource-list-item__content {
   --swirl-avatar-group-border-color: var(--s-background-default);
   --swirl-badge-border-color: var(--s-background-default);

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -52,6 +52,7 @@ export class SwirlResourceListItem {
     this.interactive = true;
     this.label = undefined;
     this.labelWeight = "medium";
+    this.labelWrap = undefined;
     this.menuTriggerId = undefined;
     this.menuTriggerLabel = "Options";
     this.meta = undefined;
@@ -134,6 +135,7 @@ export class SwirlResourceListItem {
       "resource-list-item--selectable": this.selectable,
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
+      "resource-list-item--wrap-label": this.labelWrap,
     });
     return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
@@ -382,6 +384,23 @@ export class SwirlResourceListItem {
         "reflect": false,
         "defaultValue": "\"medium\""
       },
+      "labelWrap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-wrap",
+        "reflect": false
+      },
       "menuTriggerId": {
         "type": "string",
         "mutable": false,