@getflip/swirl-components 0.197.1 → 0.199.0

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

@@ -8,594 +8,596 @@ import { getDesktopMediaQuery } from "../../utils";
  * @slot media - Media displayed inside the item (e.g. swirl-avatar)
  */
 export class SwirlResourceListItem {
-  constructor() {
-    this.desktopMediaQuery = getDesktopMediaQuery();
-    this.id = uuid();
-    this.desktopMediaQueryHandler = (event) => {
-      this.forceIconProps(event.matches);
-      this.updateIconSize(event.matches);
-    };
-    this.onClick = () => {
-      if (!this.selectable) {
-        return;
-      }
-      this.checked = !this.checked;
-      this.valueChange.emit(this.checked);
-    };
-    this.onBlur = () => {
-      this.makeControlUnfocusable();
-    };
-    this.onFocus = () => {
-      this.makeControlFocusable();
-    };
-    this.onMenuTriggerClick = (event) => {
-      if (this.disabled && !Boolean(this.href)) {
-        event.stopPropagation();
-      }
-    };
-    this.onDragHandleKeyDown = (event) => {
-      if (event.code === "Space" || event.code === "Enter") {
-        event.preventDefault();
-        this.toggleDrag.emit(this.el);
-      }
-    };
-    this.onControlClick = (event) => {
-      event.stopPropagation();
-    };
-    this.active = undefined;
-    this.allowDrag = undefined;
-    this.allowHtml = true;
-    this.checked = false;
-    this.compact = undefined;
-    this.description = undefined;
-    this.descriptionWrap = undefined;
-    this.disabled = undefined;
-    this.dragging = undefined;
-    this.dragHandleDescription = "Press spacebar to toggle grab";
-    this.dragHandleLabel = "Move item";
-    this.hideDivider = undefined;
-    this.href = undefined;
-    this.interactive = true;
-    this.label = undefined;
-    this.labelWeight = "medium";
-    this.labelWrap = undefined;
-    this.menuTriggerId = undefined;
-    this.menuTriggerLabel = "Options";
-    this.meta = undefined;
-    this.selectable = undefined;
-    this.value = undefined;
-    this.hasMedia = false;
-    this.iconSize = 24;
-  }
-  async componentWillLoad() {
-    this.updateMediaState();
-  }
-  componentDidLoad() {
-    this.forceIconProps(this.desktopMediaQuery.matches);
-    this.updateIconSize(this.desktopMediaQuery.matches);
-    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
-    this.makeControlUnfocusable();
-    if (Boolean(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');
+    constructor() {
+        this.desktopMediaQuery = getDesktopMediaQuery();
+        this.elementId = uuid();
+        this.desktopMediaQueryHandler = (event) => {
+            this.forceIconProps(event.matches);
+            this.updateIconSize(event.matches);
+        };
+        this.onClick = () => {
+            if (!this.selectable) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.valueChange.emit(this.checked);
+        };
+        this.onBlur = () => {
+            this.makeControlUnfocusable();
+        };
+        this.onFocus = () => {
+            this.makeControlFocusable();
+        };
+        this.onMenuTriggerClick = (event) => {
+            if (this.disabled && !Boolean(this.href)) {
+                event.stopPropagation();
+            }
+        };
+        this.onDragHandleKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                event.preventDefault();
+                this.toggleDrag.emit(this.el);
+            }
+        };
+        this.onControlClick = (event) => {
+            event.stopPropagation();
+        };
+        this.active = undefined;
+        this.allowDrag = undefined;
+        this.allowHtml = true;
+        this.checked = false;
+        this.compact = undefined;
+        this.description = undefined;
+        this.descriptionWrap = undefined;
+        this.disabled = undefined;
+        this.dragging = undefined;
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move item";
+        this.hideDivider = undefined;
+        this.href = undefined;
+        this.interactive = true;
+        this.label = undefined;
+        this.labelWeight = "medium";
+        this.labelWrap = undefined;
+        this.menuTriggerId = undefined;
+        this.menuTriggerLabel = "Options";
+        this.meta = undefined;
+        this.selectable = undefined;
+        this.value = undefined;
+        this.hasMedia = false;
+        this.iconSize = 24;
     }
-  }
-  disconnectedCallback() {
-    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
-  }
-  forceIconProps(smallIcon) {
-    const icon = this.iconEl?.children[0];
-    icon?.setAttribute("size", smallIcon ? "20" : "24");
-  }
-  updateIconSize(smallIcon) {
-    this.iconSize = smallIcon ? 20 : 24;
-  }
-  updateMediaState() {
-    const mediaContainer = this.el.querySelector('[slot="media"]');
-    const hasMedia = Boolean(mediaContainer);
-    if (hasMedia !== this.hasMedia) {
-      this.hasMedia = hasMedia;
+    componentWillLoad() {
+        this.updateMediaState();
     }
-  }
-  getControl() {
-    return this.el.querySelector('[slot="control"] button');
-  }
-  makeControlFocusable() {
-    const control = this.getControl();
-    if (!Boolean(control)) {
-      return;
+    componentDidLoad() {
+        this.forceIconProps(this.desktopMediaQuery.matches);
+        this.updateIconSize(this.desktopMediaQuery.matches);
+        this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+        this.makeControlUnfocusable();
+        if (Boolean(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');
+        }
     }
-    control.tabIndex = 0;
-  }
-  makeControlUnfocusable() {
-    const control = this.getControl();
-    if (!Boolean(control)) {
-      return;
+    disconnectedCallback() {
+        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
     }
-    control.tabIndex = -1;
-  }
-  render() {
-    const Tag = !this.interactive && !this.selectable
-      ? "div"
-      : Boolean(this.href) && !this.selectable
-        ? "a"
-        : "button";
-    const disabled = this.disabled && !Boolean(this.href);
-    const hasBadges = Boolean(this.el.querySelector("[slot='badges']"));
-    const hasControl = this.el.querySelector("[slot='control']");
-    const hasMenu = Boolean(this.menuTriggerId) || hasControl;
-    const href = this.interactive && Boolean(this.href) ? this.href : undefined;
-    const showControlOnFocus = hasControl && (Boolean(this.meta) || hasBadges);
-    const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
-    const showMeta = (Boolean(this.meta) || hasBadges) && !this.selectable;
-    const ariaChecked = this.selectable ? String(this.checked) : undefined;
-    const role = this.interactive && this.selectable ? "checkbox" : undefined;
-    const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
-      ? {
-        paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
-      }
-      : undefined;
-    const className = classnames("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-menu": hasMenu,
-      "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": showControlOnFocus,
-      "resource-list-item--show-meta": showMeta,
-      "resource-list-item--wrap-description": this.descriptionWrap,
-      "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", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && 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", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { swirlPopover: 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 })))));
-  }
-  static get is() { return "swirl-resource-list-item"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["swirl-resource-list-item.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["swirl-resource-list-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false
-      },
-      "allowDrag": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "allow-drag",
-        "reflect": false
-      },
-      "allowHtml": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "allow-html",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "checked",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "compact": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "compact",
-        "reflect": false
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "descriptionWrap": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "description-wrap",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "dragging": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dragging",
-        "reflect": false
-      },
-      "dragHandleDescription": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "drag-handle-description",
-        "reflect": false,
-        "defaultValue": "\"Press spacebar to toggle grab\""
-      },
-      "dragHandleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "drag-handle-label",
-        "reflect": false,
-        "defaultValue": "\"Move item\""
-      },
-      "hideDivider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-divider",
-        "reflect": false
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "interactive": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "interactive",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelWeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SwirlResourceListItemLabelWeight",
-          "resolved": "\"medium\" | \"regular\"",
-          "references": {
-            "SwirlResourceListItemLabelWeight": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-resource-list-item/swirl-resource-list-item.tsx"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-weight",
-        "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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-trigger-id",
-        "reflect": false
-      },
-      "menuTriggerLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "menu-trigger-label",
-        "reflect": false,
-        "defaultValue": "\"Options\""
-      },
-      "meta": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "meta",
-        "reflect": false
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selectable",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasMedia": {},
-      "iconSize": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "toggleDrag",
-        "name": "toggleDrag",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "HTMLSwirlResourceListItemElement",
-          "resolved": "HTMLSwirlResourceListItemElement",
-          "references": {
-            "HTMLSwirlResourceListItemElement": {
-              "location": "global"
-            }
-          }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    updateMediaState() {
+        const mediaContainer = this.el.querySelector('[slot="media"]');
+        const hasMedia = Boolean(mediaContainer);
+        if (hasMedia !== this.hasMedia) {
+            this.hasMedia = hasMedia;
         }
-      }, {
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+    }
+    getControl() {
+        return this.el.querySelector('[slot="control"] button');
+    }
+    makeControlFocusable() {
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
+        control.tabIndex = 0;
+    }
+    makeControlUnfocusable() {
+        const control = this.getControl();
+        if (!Boolean(control)) {
+            return;
+        }
+        control.tabIndex = -1;
+    }
+    render() {
+        const Tag = !this.interactive && !this.selectable
+            ? "div"
+            : Boolean(this.href) && !this.selectable
+                ? "a"
+                : "button";
+        const disabled = this.disabled && !Boolean(this.href);
+        const hasBadges = Boolean(this.el.querySelector("[slot='badges']"));
+        const hasControl = this.el.querySelector("[slot='control']");
+        const hasMenu = Boolean(this.menuTriggerId) || hasControl;
+        const href = this.interactive && Boolean(this.href) ? this.href : undefined;
+        const showControlOnFocus = hasControl && (Boolean(this.meta) || hasBadges);
+        const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
+        const showMeta = (Boolean(this.meta) || hasBadges) && !this.selectable;
+        const ariaChecked = this.selectable ? String(this.checked) : undefined;
+        const role = this.interactive && this.selectable ? "checkbox" : undefined;
+        const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
+            ? {
+                paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
+            }
+            : undefined;
+        const className = classnames("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-menu": hasMenu,
+            "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": showControlOnFocus,
+            "resource-list-item--show-meta": showMeta,
+            "resource-list-item--wrap-description": this.descriptionWrap,
+            "resource-list-item--wrap-label": this.labelWrap,
+        });
+        return (h(Host, { key: '65de45c6f1b2e814c181d14c7718ce9facdba2b4', role: "row" }, h("div", { key: '27b7975b8c9d3f829f9b876a258e01a728010de7', class: className, role: "gridcell" }, h(Tag, { key: '4d0dd035d55fd777b89592ccc4313e6a39b2811b', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": 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: '623184a8bf39d95d55daf1c0c73f5b84e9d507c9', class: "resource-list-item__media" }, h("slot", { key: 'cfc8ed03ae602566822d2c93b7ea2029b3ffb440', name: "media" }))), h("span", { key: 'd5d0d1e29135742ce8a6b48570b3d3ea628083fb', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '59280c630d28f56312b317389d8421ac83a3e97a', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '7cd4a798340b46c1c5e428b3f6b61346a8a59700', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '545a8080d2266ae7ccf37aafdc01dd227a364bc9', class: "resource-list-item__meta" }, h("span", { key: 'eb0059c448afbfe23f4da04eccf9667b70a4123d', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '52c77f4fa84d8b464cac63298d1cbd205d8389d0', class: "resource-list-item__badges" }, h("slot", { key: '943ca2932df39769826c385824416cfc6221cbea', name: "badges" }))))), this.selectable && (h("span", { key: 'd6ba61f5818ad98e378b04adde3e0ec823ae75dd', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '631d841cefde94f598a5ea0d088282ae805e216a', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '9889d6b6ba4c4439c33001700a62586ce9f0b083' }))))), h("span", { key: '36e0b65120eb325e0a6691fb2120a8237d5ce868', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '82a1b86901c6eac56b6e57c37b7972541480e426', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '68063b35294b8ffa12ea673c434d38113121d35f', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'cb00660ea3fb9fdebc4f28c2623e4c9f2afc4877', "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: '9cca689ba73576abfebcb163b2b6af0306b98d2d', "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: '6dd9f13b0fb45dff00b689564f2360eb573923d7', size: this.iconSize })))));
+    }
+    static get is() { return "swirl-resource-list-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-resource-list-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-resource-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false
+            },
+            "allowDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-drag",
+                "reflect": false
+            },
+            "allowHtml": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-html",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "compact",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "descriptionWrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "description-wrap",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "dragging": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dragging",
+                "reflect": false
+            },
+            "dragHandleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drag-handle-description",
+                "reflect": false,
+                "defaultValue": "\"Press spacebar to toggle grab\""
+            },
+            "dragHandleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drag-handle-label",
+                "reflect": false,
+                "defaultValue": "\"Move item\""
+            },
+            "hideDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-divider",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "interactive",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlResourceListItemLabelWeight",
+                    "resolved": "\"medium\" | \"regular\"",
+                    "references": {
+                        "SwirlResourceListItemLabelWeight": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-resource-list-item/swirl-resource-list-item.tsx",
+                            "id": "src/components/swirl-resource-list-item/swirl-resource-list-item.tsx::SwirlResourceListItemLabelWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-weight",
+                "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,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-trigger-id",
+                "reflect": false
+            },
+            "menuTriggerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "menu-trigger-label",
+                "reflect": false,
+                "defaultValue": "\"Options\""
+            },
+            "meta": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "meta",
+                "reflect": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selectable",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasMedia": {},
+            "iconSize": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleDrag",
+                "name": "toggleDrag",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLSwirlResourceListItemElement",
+                    "resolved": "HTMLSwirlResourceListItemElement",
+                    "references": {
+                        "HTMLSwirlResourceListItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLSwirlResourceListItemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
 }