@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-resource-list-item2.js

@@ -1,236 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as defineCustomElement$5 } from './swirl-button2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-check-strong2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-drag-handle2.js';
-import { d as defineCustomElement$2 } from './swirl-popover-trigger2.js';
-import { d as defineCustomElement$1 } from './swirl-tooltip2.js';
-import { v as v4 } from './v4.js';
-
-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(\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{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)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;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-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: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){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:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
-
-const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResourceListItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.toggleDrag = createEvent(this, "toggleDrag", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.checked = false;
-        this.dragHandleDescription = "Press spacebar to toggle grab";
-        this.dragHandleLabel = "Move item";
-        this.interactive = true;
-        this.labelWeight = "medium";
-        this.labelTooltipPosition = "top";
-        this.menuTriggerLabel = "Options";
-        this.hasMedia = false;
-        this.iconSize = 24;
-        this.elementId = v4();
-        this.mediaQueryUnsubscribe = () => { };
-        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.preventDefault();
-            event.stopPropagation();
-        };
-    }
-    componentWillLoad() {
-        this.updateMediaState();
-    }
-    componentDidLoad() {
-        this.parentSemantics = this.el.closest("swirl-resource-list")?.semantics;
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-            this.updateIconSize(isDesktop);
-        });
-        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');
-        }
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    get hasBadges() {
-        return Boolean(this.el.querySelector("[slot='badges']"));
-    }
-    get showMeta() {
-        return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
-    }
-    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;
-        }
-    }
-    getControl() {
-        return this.el.querySelector('[slot="control"] button');
-    }
-    makeControlFocusable() {
-        if (this.parentSemantics !== "grid") {
-            return;
-        }
-        const control = this.getControl();
-        if (!Boolean(control)) {
-            return;
-        }
-        control.tabIndex = 0;
-    }
-    makeControlUnfocusable() {
-        if (this.parentSemantics !== "grid") {
-            return;
-        }
-        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 = this.hasBadges;
-        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 = this.showMeta;
-        const ariaLabel = Boolean(this.swirlAriaLabel)
-            ? this.swirlAriaLabel
-            : this.label;
-        const ariaChecked = this.selectable ? String(this.checked) : undefined;
-        const role = this.interactive && this.selectable ? "checkbox" : undefined;
-        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
-        const containerRole = hostRole === "row" ? "gridcell" : undefined;
-        const labelContainerStyles = {
-            minHeight: this.labelMinHeight ?? undefined,
-        };
-        const renderLabel = () => (h("span", { key: '37c85747056a39da4bae4c738509399648f3d736', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
-        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-control": hasControl,
-            "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: 'ca338b580e9a4a0b9516d3391d0aeeae4ea1a654', role: hostRole }, h("div", { key: 'dffac16c5ecfb85b556f92cfdcef17e69f81cc70', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '1365aa82443f7377e4e3c989bf44cf22d354d6dd', "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, 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: '82efa5ce45e4e221eaf709c8784684e5413933b7', class: "resource-list-item__media" }, h("slot", { key: '81896485ba4dd4805c9fee22df235458230fbb3f', name: "media" }))), h("span", { key: '42c7ef04acf577e9a9549e99b2299efd5040eb40', 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: '011b264b8906faa3d6b671ead50e3c1a3ccf1567', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '6ca551c7ad81601df78e94eece8c0d72bb89adeb', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'eddf677da7c6b606c76649bf4f4a06eb5ffd0b94', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '384628edf729e8e3214af4007e3acdbae190e3b1' }))))), showMeta && (h("span", { key: 'efad9e9c3d1c7fb68cfd6f45268d2d511dac8d23', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '6c654ea6eb33af529908885e13b15a60a25c6996', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'f1aba6b5a08158a3d1830b8a3e55831fbc658334', class: "resource-list-item__badges" }, h("slot", { key: 'c53cc549305d4b1b338357a4c6e6ff04a877d70b', name: "badges" })))), h("span", { key: '2fb88347d7c809a4a66ca2887f86267ab1daaa96', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '8d2c303b222c5714fd2c18a9449ab621ee729e3c', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '81a43da61e282fb76de74d0d0b99526501d8907f', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '0b71d4831ca2126ca233a19c932654dc11343e76', "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: '933b327f60287bbd3c22f41106322724fa18a8f6', "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: 'da629f0be562d793985940781af6c829556ab918', size: this.iconSize })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlResourceListItemCss; }
-}, [6, "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"],
-        "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],
-        "selectable": [4],
-        "swirlAriaCurrent": [1, "swirl-aria-current"],
-        "swirlAriaLabel": [1, "swirl-aria-label"],
-        "value": [1],
-        "alignItems": [1, "align-items"],
-        "hasMedia": [32],
-        "iconSize": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-resource-list-item", "swirl-button", "swirl-icon-check-strong", "swirl-icon-drag-handle", "swirl-popover-trigger", "swirl-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-resource-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlResourceListItem);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-icon-check-strong":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-icon-drag-handle":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-popover-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlResourceListItem as S, defineCustomElement as d };

package/dist/components/swirl-resource-list2.js

@@ -1,327 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { S as Sortable } from './sortable.esm.js';
-import { d as defineCustomElement$3 } from './swirl-box2.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.js';
-import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-import { v as v4 } from './v4.js';
-
-const swirlResourceListCss = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";
-
-const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.itemDrop = createEvent(this, "itemDrop", 7);
-        this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
-        this.assistiveTextItemMoving = "Current position:";
-        this.assistiveTextItemMoved = "Item moved. New position:";
-        this.semantics = "grid";
-        this.spacing = "0";
-        this.listId = v4();
-        this.focusedIndex = 0;
-        this.toggleDrag = (event) => {
-            const item = event.detail;
-            if (Boolean(this.dragging)) {
-                this.stopDrag(item);
-            }
-            else {
-                this.startDrag(item);
-            }
-        };
-        this.startDrag = (item) => {
-            this.dragging = item;
-            this.draggingStartIndex = this.getItemIndex(this.dragging);
-            item.setAttribute("dragging", "true");
-            const index = this.getItemIndex(this.dragging);
-            this.focusItemAtIndex(index);
-            this.assistiveText = this.assistiveTextItemGrabbed;
-        };
-        this.stopDrag = (item) => {
-            const newIndex = this.getItemIndex(this.dragging);
-            this.dragging = undefined;
-            item.removeAttribute("dragging");
-            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
-            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
-            this.draggingStartIndex = undefined;
-        };
-        this.onKeyDown = (event) => {
-            if (this.semantics === "grid" && !Boolean(this.dragging)) {
-                if (event.code === "ArrowDown") {
-                    event.preventDefault();
-                    this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
-                }
-                else if (event.code === "ArrowUp") {
-                    event.preventDefault();
-                    const prevIndex = this.focusedIndex === 0
-                        ? this.items.length - 1
-                        : this.focusedIndex - 1;
-                    this.focusItemAtIndex(prevIndex);
-                }
-                else if (event.code === "Enter" && Boolean(this.controllingElement)) {
-                    const item = this.items[this.focusedIndex];
-                    if (!Boolean(item) || !item.isConnected) {
-                        return;
-                    }
-                    event.stopPropagation();
-                    event.preventDefault();
-                    item.click();
-                }
-                else if (event.code === "Home") {
-                    event.preventDefault();
-                    this.focusItemAtIndex(0);
-                }
-                else if (event.code === "End") {
-                    event.preventDefault();
-                    this.focusItemAtIndex(this.items.length - 1);
-                }
-            }
-            if (Boolean(this.dragging)) {
-                if (event.code === "ArrowDown") {
-                    event.preventDefault();
-                    this.moveDraggedItemDown();
-                }
-                else if (event.code === "ArrowUp") {
-                    event.preventDefault();
-                    this.moveDraggedItemUp();
-                }
-                else if (event.code === "Space" || event.code === "Enter") {
-                    const target = event.composedPath()[0];
-                    if (!target?.classList.contains("resource-list-item__drag-handle")) {
-                        event.preventDefault();
-                        this.stopDrag(this.dragging);
-                    }
-                }
-            }
-        };
-    }
-    componentDidLoad() {
-        this.observeSlotChanges();
-        this.collectItems();
-        this.setupControllingElement();
-        this.setItemAllowDragState();
-        this.setupDragDrop();
-        this.setSectionSpacingAndSeparator();
-    }
-    componentDidRender() {
-        this.setupDragDrop();
-    }
-    disconnectedCallback() {
-        this.sortable?.destroy();
-        this.observer?.disconnect();
-        this.controllingElement?.removeEventListener("keydown", this.onKeyDown);
-    }
-    observeSlotChanges() {
-        this.observer = new MutationObserver(() => {
-            this.collectItems();
-            this.setItemAllowDragState();
-            this.setSectionSpacingAndSeparator();
-        });
-        this.observer.observe(this.el, {
-            childList: true,
-            characterData: true,
-            subtree: true,
-        });
-    }
-    watchAllowDrag() {
-        this.setItemAllowDragState();
-        this.setupDragDrop();
-    }
-    async resetFocus() {
-        this.focusedIndex = 0;
-        this.removeItemsFromTabOrder();
-        this.enableItemFocus(this.items[0]);
-        if (Boolean(this.controllingElement)) {
-            this.items[0]?.setAttribute("aria-selected", "true");
-        }
-    }
-    collectItems() {
-        this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((el) => el.isConnected);
-        this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((el) => el.isConnected);
-        this.removeItemsFromTabOrder();
-        this.enableItemFocus(this.items[this.focusedIndex]);
-        if (Boolean(this.controllingElement)) {
-            this.items[0]?.setAttribute("aria-selected", "true");
-        }
-    }
-    setupControllingElement() {
-        if (!Boolean(this.controllingElement)) {
-            return;
-        }
-        this.controllingElement.setAttribute("aria-controls", this.listId);
-        this.controllingElement.setAttribute("role", "combobox");
-        this.controllingElement.setAttribute("aria-autocomplete", "list");
-        this.controllingElement.addEventListener("keydown", this.onKeyDown);
-    }
-    getItemIndex(item) {
-        return this.items.map((i) => i).findIndex((i) => i === item);
-    }
-    removeItemsFromTabOrder() {
-        if (this.semantics !== "grid") {
-            return;
-        }
-        this.items.forEach((item) => {
-            const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
-            const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
-            if (Boolean(this.controllingElement)) {
-                item.setAttribute("aria-selected", "false");
-            }
-            focusableEl?.setAttribute("tabIndex", "-1");
-            dragHandle?.setAttribute("tabIndex", "-1");
-        });
-    }
-    setItemAllowDragState() {
-        if (this.allowDrag) {
-            // Dragging items inside a `swirl-resource-list-section` is not currently allowed
-            this.items
-                .filter((item) => this.sections.every((section) => !section.contains(item)))
-                .forEach((item) => {
-                item.setAttribute("allow-drag", "true");
-                item.addEventListener("toggleDrag", this.toggleDrag);
-            });
-        }
-        else {
-            this.items.forEach((item) => {
-                item.removeAttribute("allow-drag");
-                item.removeEventListener("toggleDrag", this.toggleDrag);
-            });
-        }
-    }
-    setupDragDrop() {
-        if (Boolean(this.sortable)) {
-            this.sortable.destroy();
-        }
-        if (!this.allowDrag) {
-            return;
-        }
-        this.sortable = Sortable.create(this.gridEl, {
-            animation: 150,
-            draggable: "swirl-resource-list-item",
-            dragClass: "swirl-resource-list-item--drag",
-            handle: ".resource-list-item__drag-handle",
-            onEnd: (event) => {
-                this.itemDrop.emit({
-                    item: event.item,
-                    oldIndex: event.oldDraggableIndex,
-                    newIndex: event.newDraggableIndex,
-                });
-            },
-        });
-    }
-    enableItemFocus(item, focus) {
-        if (!Boolean(item) || Boolean(this.controllingElement)) {
-            return;
-        }
-        const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
-        const dragHandle = item.querySelector(".resource-list-item__drag-handle");
-        if (Boolean(dragHandle)) {
-            dragHandle.setAttribute("tabIndex", "0");
-        }
-        if (!Boolean(interactiveElement)) {
-            return;
-        }
-        interactiveElement.setAttribute("tabIndex", "0");
-        if (focus && !Boolean(this.controllingElement)) {
-            interactiveElement.focus();
-        }
-    }
-    focusItemAtIndex(index) {
-        this.removeItemsFromTabOrder();
-        const item = this.items[index];
-        if (!Boolean(item) || !item.isConnected) {
-            return;
-        }
-        this.enableItemFocus(item, !Boolean(this.controllingElement));
-        if (Boolean(this.controllingElement)) {
-            item.setAttribute("aria-selected", "true");
-            item.scrollIntoView({ block: "nearest" });
-        }
-        this.focusedIndex = index;
-    }
-    moveDraggedItemDown() {
-        const nextSibling = this.dragging.nextElementSibling;
-        if (!Boolean(nextSibling)) {
-            return;
-        }
-        nextSibling.after(this.dragging);
-        this.collectItems();
-        this.focusItemAtIndex(this.getItemIndex(this.dragging));
-        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
-    }
-    moveDraggedItemUp() {
-        const prevSibling = this.dragging.previousElementSibling;
-        if (!Boolean(prevSibling)) {
-            return;
-        }
-        prevSibling.before(this.dragging);
-        this.collectItems();
-        this.focusItemAtIndex(this.getItemIndex(this.dragging));
-        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
-    }
-    setSectionSpacingAndSeparator() {
-        this.sections.forEach((section, index) => {
-            // First section should not have a separator if there are no items above
-            if (index === 0 &&
-                section.previousElementSibling?.tagName !== "SWIRL-RESOURCE-LIST-ITEM") {
-                section.hasSeparator = false;
-            }
-            section.spacing = this.spacing;
-        });
-    }
-    render() {
-        return (h(Host, { key: 'b8173414857dcd04150eb2f9ff305108af1f428b', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '5ec2c80b568c7b6fec1777d981b88dd4fc33ffeb', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'a68c87583107f12587255efbe776665df8575dac', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '3b8f876c84d53781cdcba2b2e814fe1288f7b676', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: 'b67eef9af984270fb52d4e036cab5b38115efcde' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "allowDrag": ["watchAllowDrag"]
-    }; }
-    static get style() { return swirlResourceListCss; }
-}, [6, "swirl-resource-list", {
-        "allowDrag": [4, "allow-drag"],
-        "assistiveTextItemGrabbed": [1, "assistive-text-item-grabbed"],
-        "assistiveTextItemMoving": [1, "assistive-text-item-moving"],
-        "assistiveTextItemMoved": [1, "assistive-text-item-moved"],
-        "controllingElement": [16, "controlling-element"],
-        "label": [1],
-        "padding": [1],
-        "paddingBlockEnd": [1, "padding-block-end"],
-        "paddingBlockStart": [1, "padding-block-start"],
-        "paddingInlineEnd": [1, "padding-inline-end"],
-        "paddingInlineStart": [1, "padding-inline-start"],
-        "semantics": [1],
-        "spacing": [1],
-        "assistiveText": [32],
-        "listId": [32],
-        "resetFocus": [64]
-    }, undefined, {
-        "allowDrag": ["watchAllowDrag"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-resource-list", "swirl-box", "swirl-stack", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-resource-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlResourceList);
-            }
-            break;
-        case "swirl-box":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SwirlResourceList as S, defineCustomElement as d };

package/dist/esm/file-manager.entry.js

@@ -1,62 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-9hghByCV.js';
-
-const FileManagerMockData = {
-    directories: [
-        {
-            name: "Development",
-            description: "Updated 2 days ago.",
-            children: [
-                {
-                    description: "1.02 MB, updated 2 days ago.",
-                    name: "sample.pdf",
-                    type: "application/pdf",
-                    url: "/sample.pdf",
-                },
-                {
-                    description: "124 KB, updated a month ago.",
-                    name: "sample.jpg",
-                    type: "image/jpeg",
-                    url: "/sample.jpg",
-                },
-            ],
-        },
-        {
-            name: "People",
-            description: "Updated just now.",
-            children: [],
-        },
-    ],
-};
-const FileManager = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selectItem = (item) => {
-            if ("type" in item) {
-                this.selectedFile = item;
-                this.layout.changeMobileView("body");
-            }
-            else {
-                this.selectedDirectory = item;
-            }
-        };
-        this.resetSelectedDirectory = () => {
-            this.selectedDirectory = undefined;
-        };
-        this.toggleSidebar = () => {
-            this.layout?.toggleSidebar();
-        };
-    }
-    renderNavigation() {
-        const items = Boolean(this.selectedDirectory)
-            ? this.selectedDirectory.children
-            : FileManagerMockData.directories;
-        return items.length > 0 ? (items.map((item) => (h("swirl-resource-list-item", { description: item.description, key: item.name, label: item.name,
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
-    }
-    render() {
-        return (h(Host, { key: 'b7d725d87c05e9d858c30989bc811b365ec28e0a' }, h("swirl-app-layout", { key: 'b21d2e588da898780111825a01e0b99adee0b482', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '49e5e60f8cb1b051258f2694938f87ddece9a72b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '4d5175a546cb17deb342ca04ad1703e1af6fd537', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '8a4c5402eb0c629d7cfd3a3cc61d6be5717b6db8', label: "Sort items" })), h("swirl-stack", { key: '27be28058e769a00e1c21691b3731ca8e80babdc', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0ae2418193ef8fa8bedc8dd23ec540a3499d73c6' }, h("swirl-heading", { key: '1902070226fa0b97d184d5b25182fa84ba22caee', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '6ced885f868028bb013c0cd882003e2a64b2bf0d', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'af9881b4ba2da8859d6dddf75e327df9c9517734', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'bfddbfd1305a95c337546ed43e1e57f4e96e03f2', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '11f23d99b1cd428b6833ce390b26f0ee3291adad', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '0dc205a2a1c073a61a30bc7b4dc762893be2e952', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'b22940d19a183192cbe76a2de61242354ca5bb03', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '8e9c168e52f0ac8aa75fde180a741957931e9d6f', value: ["ascending"] }, h("swirl-option-list-item", { key: '36cbe37e54f79af5b0d9c62e8ecb8f5292139762', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f46d3b99b4ff6e421cc3dc2492ba2c962504a7e8', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'e902f75a1ff18b13b5ef98641fb2608bba764031', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
-    }
-};
-
-export { FileManager as file_manager };