@getflip/swirl-components 0.363.6 → 0.365.0

package/dist/cjs/swirl-option-list_2.cjs.entry.js

@@ -0,0 +1,514 @@
+'use strict';
+
+var index = require('./index-DM-IG6w2.js');
+var sortable_esm = require('./sortable.esm-B1ZNencO.js');
+var utils = require('./utils-Br2wWntR.js');
+var v4 = require('./v4-Bq3ldsQe.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
+
+const swirlOptionListCss = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";
+
+const SwirlOptionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemDrop = index.createEvent(this, "itemDrop", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.allowDeselect = true;
+        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.selectAllLabel = "Select all";
+        this.value = [];
+        this.selectAllState = false;
+        this.selectAllValue = v4.v4();
+        this.onClick = (event) => {
+            event.preventDefault();
+            const target = event.target;
+            const item = target?.closest("swirl-option-list-item");
+            const composedTarget = event.composedPath()[0];
+            const clickedOption = Boolean(utils.closestPassShadow(composedTarget, '[role="option"]'));
+            if (!Boolean(item) || !clickedOption) {
+                event.preventDefault();
+                return;
+            }
+            if (item.value === this.selectAllValue) {
+                this.selectAllChanged();
+            }
+            else {
+                const index = this.items.findIndex((i) => i.value === item.value);
+                this.focusItem(index);
+                this.selectItem(index);
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (event.code === "ArrowDown") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    this.focusNextItem();
+                }
+                else {
+                    this.moveDraggedItemDown();
+                }
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                if (!Boolean(this.dragging)) {
+                    this.focusPreviousItem();
+                }
+                else {
+                    this.moveDraggedItemUp();
+                }
+            }
+            else if (event.code === "Space" || event.code === "Enter") {
+                const startingDrag = event.target.classList.contains("option-list-item__drag-handle");
+                if (!startingDrag && Boolean(this.dragging)) {
+                    event.preventDefault();
+                    this.stopDrag(this.dragging);
+                    return;
+                }
+                const target = event.composedPath()[0];
+                const optionFocused = Boolean(utils.closestPassShadow(target, '[role="option"]'));
+                const selectAllFocused = target?.closest("swirl-option-list-item")?.value ===
+                    this.selectAllValue;
+                if (!optionFocused && !selectAllFocused) {
+                    return;
+                }
+                event.preventDefault();
+                if (Boolean(this.dragging)) {
+                    this.stopDrag(this.dragging);
+                }
+                else if (selectAllFocused) {
+                    this.selectAllChanged();
+                }
+                else {
+                    this.selectFocusedItem();
+                }
+            }
+            else if (event.code === "Home") {
+                event.preventDefault();
+                if (this.showSelectAll) {
+                    this.focusSelectAll();
+                }
+                else {
+                    this.focusItem(0);
+                }
+            }
+            else if (event.code === "End") {
+                event.preventDefault();
+                this.focusItem(this.items.length - 1);
+            }
+            else if (event.code === "KeyA" &&
+                (event.metaKey || event.ctrlKey) &&
+                this.multiSelect) {
+                event.preventDefault();
+                this.selectAllItems();
+            }
+            else if (event.code === "Tab") {
+                if (Boolean(this.dragging)) {
+                    event.preventDefault();
+                }
+            }
+        };
+        this.resetTabIndex = () => {
+            this.removeItemsTabIndex();
+            this.focusedItem = undefined;
+            const item = this.items[0]?.querySelector('[role="option"]');
+            const selectAllItem = this.selectAllEl?.querySelector('[role="option"]');
+            (selectAllItem || item)?.setAttribute("tabIndex", "0");
+        };
+        this.selectAllChanged = () => {
+            if (this.disabled) {
+                return;
+            }
+            const total = this.items?.length || 0;
+            const selectedCount = this.value?.length || 0;
+            if (selectedCount === total) {
+                this.updateValue([]);
+            }
+            else {
+                this.updateValue(this.items.map((item) => item.value));
+            }
+        };
+        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.focusItem(index);
+            this.assistiveText = this.assistiveTextItemGrabbed;
+        };
+        this.stopDrag = (item) => {
+            this.dragging = undefined;
+            item.removeAttribute("dragging");
+            const newIndex = this.getActiveItemIndex();
+            this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+            this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+            this.draggingStartIndex = undefined;
+            this.focusItem(newIndex);
+        };
+    }
+    componentDidLoad() {
+        this.updateItems();
+        this.observeSlotChanges();
+        this.setItemAllowDragState();
+        this.setItemDisabledState();
+        this.setItemContext();
+        this.syncItemsWithValue();
+        this.setupDragDrop();
+        this.setSectionSeparator();
+        this.setSelectAllState();
+        this.subscribeToSwirlPopover();
+    }
+    componentDidRender() {
+        this.setupDragDrop();
+    }
+    disconnectedCallback() {
+        this.unsubscribeFromSwirlPopover();
+        this.observer?.disconnect();
+        this.sortable?.destroy();
+    }
+    watchAllowDrag() {
+        this.setItemAllowDragState();
+        this.setupDragDrop();
+    }
+    watchDisabled() {
+        this.setItemDisabledState();
+    }
+    watchMultiSelect() {
+        this.setItemContext();
+    }
+    watchValue() {
+        this.syncItemsWithValue();
+        this.setSelectAllState();
+    }
+    observeSlotChanges() {
+        this.observer = new MutationObserver(() => {
+            this.updateItems();
+            this.setItemAllowDragState();
+            this.setItemDisabledState();
+            this.setItemContext();
+            this.syncItemsWithValue();
+            this.setSelectAllState();
+        });
+        this.observer.observe(this.listboxEl, { childList: true, subtree: true });
+    }
+    setSelectAllState() {
+        const total = this.items?.length || 0;
+        const selectedCount = this.value?.length || 0;
+        this.selectAllState =
+            total === 0 || selectedCount === 0
+                ? false
+                : selectedCount === total
+                    ? true
+                    : "indeterminate";
+    }
+    updateItems() {
+        this.items = utils.querySelectorAllDeep(this.el, "swirl-option-list-item").filter((item) => item.value !== this.selectAllValue);
+        const hasTabIndexElement = this.selectAllEl?.querySelector('[tabindex="0"]') ||
+            this.items.some((item) => item.querySelector('[tabindex="0"]'));
+        if (hasTabIndexElement) {
+            return;
+        }
+        this.resetTabIndex();
+    }
+    removeItemsTabIndex() {
+        this.selectAllEl
+            ?.querySelector('[role="option"]')
+            ?.removeAttribute("tabIndex");
+        this.items.forEach((item) => item.querySelector('[role="option"]')?.removeAttribute("tabIndex"));
+    }
+    setItemDisabledState() {
+        if (this.disabled) {
+            this.items.forEach((item) => (item.disabled = true));
+        }
+    }
+    setItemContext() {
+        if (this.multiSelect) {
+            this.items.forEach((item) => (item.context = "multi-select"));
+        }
+        else {
+            this.items.forEach((item) => (item.context = "single-select"));
+            if (this.value.length > 1) {
+                this.updateValue([this.value[0]]);
+            }
+        }
+    }
+    setupDragDrop() {
+        if (Boolean(this.sortable)) {
+            this.sortable.destroy();
+        }
+        if (!this.allowDrag) {
+            return;
+        }
+        this.sortable = sortable_esm.Sortable.create(this.listboxEl, {
+            animation: 150,
+            draggable: 'swirl-option-list-item[allow-drag="true"]',
+            handle: ".option-list-item__drag-handle",
+            onEnd: (event) => {
+                this.itemDrop.emit({
+                    item: event.item,
+                    oldIndex: event.oldIndex,
+                    newIndex: event.newIndex,
+                });
+            },
+        });
+    }
+    setItemAllowDragState() {
+        if (this.allowDrag && !this.multiSelect) {
+            console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
+            return;
+        }
+        const sections = utils.querySelectorAllDeep(this.el, "swirl-option-list-section");
+        if (this.allowDrag && sections.length > 0) {
+            console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
+            return;
+        }
+        if (this.allowDrag) {
+            this.items.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);
+            });
+        }
+    }
+    selectItem(index) {
+        if (this.disabled) {
+            return;
+        }
+        const item = this.items[index];
+        if (item.disabled) {
+            return;
+        }
+        const itemIsAlreadySelected = this.value.includes(item.value);
+        if (itemIsAlreadySelected && !this.allowDeselect) {
+            return;
+        }
+        if (!this.multiSelect) {
+            this.value = [];
+        }
+        if (!itemIsAlreadySelected) {
+            this.updateValue([...this.value, item.value]);
+        }
+        else {
+            this.updateValue(this.value.filter((v) => v !== item.value));
+        }
+    }
+    updateValue(value) {
+        this.value = value;
+        this.valueChange.emit(this.value);
+    }
+    selectFocusedItem() {
+        if (this.disabled || this.getActiveItemIndex() === -1) {
+            return;
+        }
+        this.selectItem(this.getActiveItemIndex());
+    }
+    selectAllItems() {
+        if (this.disabled) {
+            return;
+        }
+        const alreadySelected = this.items.every((item) => this.value.includes(item.value));
+        if (alreadySelected) {
+            this.updateValue([]);
+        }
+        else {
+            this.updateValue(this.items.map((item) => item.value));
+        }
+    }
+    syncItemsWithValue() {
+        this.items?.forEach((item) => (item.selected = this.value.includes(item.value)));
+    }
+    focusItem(index) {
+        if (this.disabled) {
+            return;
+        }
+        this.removeItemsTabIndex();
+        const item = this.items[index]?.querySelector('[role="option"]');
+        if (!Boolean(item)) {
+            return;
+        }
+        item.setAttribute("tabIndex", "0");
+        item.focus();
+        this.focusedItem = item;
+    }
+    focusNextItem() {
+        if (this.disabled) {
+            return;
+        }
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
+        this.focusItem(newIndex);
+    }
+    focusPreviousItem() {
+        const activeItemIndex = this.getActiveItemIndex();
+        if (activeItemIndex <= 0 && this.showSelectAll) {
+            this.focusSelectAll();
+        }
+        else {
+            const newIndex = Math.max(activeItemIndex - 1, 0);
+            this.focusItem(newIndex);
+        }
+    }
+    focusSelectAll() {
+        const selectAllItem = this.selectAllEl?.querySelector('[role="option"]');
+        if (!selectAllItem) {
+            return;
+        }
+        this.removeItemsTabIndex();
+        selectAllItem.setAttribute("tabIndex", "0");
+        selectAllItem.focus();
+        this.focusedItem = undefined;
+    }
+    getActiveItemIndex() {
+        return Boolean(this.focusedItem)
+            ? this.items
+                .map((item) => item.querySelector('[role="option"]'))
+                .findIndex((item) => item === this.focusedItem)
+            : Boolean(this.selectAllEl)
+                ? -1
+                : 0;
+    }
+    getItemIndex(item) {
+        return this.items.map((i) => i).findIndex((i) => i === item);
+    }
+    moveDraggedItemDown() {
+        const nextSibling = this.dragging.nextElementSibling;
+        if (!Boolean(nextSibling)) {
+            return;
+        }
+        nextSibling.after(this.dragging);
+        this.updateItems();
+        this.listboxEl.focus();
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`;
+    }
+    moveDraggedItemUp() {
+        const prevSibling = this.dragging.previousElementSibling;
+        if (!Boolean(prevSibling) || prevSibling === this.selectAllEl) {
+            return;
+        }
+        prevSibling.before(this.dragging);
+        this.updateItems();
+        this.listboxEl.focus();
+        this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+    }
+    setSectionSeparator() {
+        if (!this.el) {
+            return;
+        }
+        const sections = Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((el) => el.isConnected);
+        sections.forEach((section, index) => {
+            // First section should not have a separator if there are no items above
+            if (index === 0 &&
+                section.previousElementSibling?.tagName !== "SWIRL-OPTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
+    subscribeToSwirlPopover() {
+        this.swirlPopover = utils.closestPassShadow(this.el, "swirl-popover");
+        this.swirlPopover?.addEventListener("popoverClose", this.resetTabIndex);
+    }
+    unsubscribeFromSwirlPopover() {
+        this.swirlPopover?.removeEventListener("popoverClose", this.resetTabIndex);
+    }
+    render() {
+        const ariaMultiselectable = this.multiSelect ? "true" : undefined;
+        const tabIndex = Boolean(this.dragging) ? 0 : undefined;
+        const showSelectAll = this.multiSelect && this.showSelectAll;
+        return (index.h(index.Host, { key: 'dc839e74fa61ebdabed7a45b3a18baa0590619c1' }, index.h("swirl-visually-hidden", { key: '402e838878530233b777b84b3822243296d80bbe', role: "alert" }, this.assistiveText), index.h("div", { key: 'ddb631f22720b1bf280c0f535eddd58d1fc427fa', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: 'afe709f7e20fe7b21ea398ecb2d7a46387143072', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: '601783bf809b026143e3b5743ad9b0a032b470ea', onSlotchange: this.setSectionSeparator }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "allowDrag": ["watchAllowDrag"],
+        "disabled": ["watchDisabled"],
+        "multiSelect": ["watchMultiSelect"],
+        "value": ["watchValue"]
+    }; }
+};
+SwirlOptionList.style = swirlOptionListCss;
+
+const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-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)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+
+const SwirlOptionListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
+        this.context = "single-select";
+        this.dragHandleDescription = "Press spacebar to toggle grab";
+        this.dragHandleLabel = "Move option";
+        this.selected = false;
+        this.indeterminate = false;
+        this.swirlAriaRole = "option";
+        this.iconSize = 24;
+        this.elementId = v4.v4();
+        this.mediaQueryUnsubscribe = () => { };
+        this.onDragHandleKeyDown = (event) => {
+            if (event.code === "Space" || event.code === "Enter") {
+                event.preventDefault();
+                this.toggleDrag.emit(this.el);
+            }
+        };
+        this.onBlur = () => {
+            this.focused = false;
+        };
+        this.onFocus = () => {
+            this.focused = true;
+        };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    updateIconSize(smallIcon) {
+        this.iconSize = smallIcon ? 20 : 24;
+    }
+    render() {
+        const ariaDisabled = this.disabled ? "true" : undefined;
+        const ariaSelected = this.indeterminate ? undefined : String(this.selected);
+        const showCheckbox = this.context === "multi-select";
+        const showIcon = Boolean(this.icon) && this.context === "single-select";
+        const showIconBadge = Boolean(this.iconBadge);
+        const showAvatar = this.el.querySelector('[slot="avatar"]');
+        const showSelectionIcon = this.selected && this.context === "single-select";
+        const className = index$1.classnames("option-list-item", `option-list-item--context-${this.context}`, {
+            "option-list-item--disabled": this.disabled,
+            "option-list-item--draggable": this.allowDrag,
+            "option-list-item--dragging": this.dragging,
+            "option-list-item--selected": this.selected,
+            "option-list-item--indeterminate": this.indeterminate && !this.selected,
+            "option-list-item--show-avatar": showAvatar,
+        });
+        return (index.h(index.Host, { key: '7c8908b57d34b0b2b3f653c95e0d2e0f51718e5d' }, index.h("div", { key: '43d37288ae18d491525a11bcca3e290a2cfe8032', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+                ? `option-list-item-${this.elementId}-description`
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { key: '30033c6dc6a039513bd2af36d906d2b525a95342', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '895240689aae388704b648d07e58084a5f8b519a', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: '55be7b715077761e58a5858983567114b5792f3c', class: "option-list-item__checkbox" }, index.h("span", { key: 'def941684a7c545f67ee1ae7bbf28ab68a1d7eda', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '09b98b73dee9c9d56ef8d485099e008366db185c', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (index.h("span", { key: '27fc967fc1444071f0f2a836fc3a2279d2d29336', class: "option-list-item__checkbox-indeterminate-icon" }))))), index.h("span", { key: '2af33cf8bfecfdb469fc34e9d5cd7e6b50dbf934', class: "option-list-item__avatar" }, index.h("slot", { key: '20b173de4a6859f68d0fa5461b2834c56adab911', name: "avatar" })), index.h("span", { key: '422666ffc17ba76eb144bb051e4a556b415681b8', class: "option-list-item__label-container" }, index.h("span", { key: '6eccae90d8ac2b0bbf4352afa09505d41155ddb9', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (index.h("span", { key: 'b3145c6e0b24b60ae80917fdbd74b6f776dcc0f4', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: '6e9f153d01c83bdf5ed2ff6ec6263b2aa790b9c8', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: 'f087458bf5ff0a5bfed119d72819f2c36bfdac1c', size: this.iconSize })))), this.allowDrag && (index.h("button", { key: '82c37e9d5a8bb8cf2406800e1fa31684234e2793', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, index.h("swirl-icon-drag-handle", { key: '8b61a793b26fd7573521e2064a9bd9fa8b8aa31d', size: this.iconSize })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlOptionListItem.style = swirlOptionListItemCss;
+
+exports.swirl_option_list = SwirlOptionList;
+exports.swirl_option_list_item = SwirlOptionListItem;

package/dist/cjs/swirl-pagination.cjs.entry.js

@@ -85,7 +85,7 @@ const SwirlPagination = class {
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
         const className = index$1.classnames("pagination", `pagination--variant-${this.variant}`);
-        return (index.h(index.Host, { key: '20382f45fe6041f7a8d4d93ebce9f2cebeb4f041' }, index.h("nav", { key: '26b6d22fc4bc9fc2ffe5ae6ebf30c6ce5e9b6c59', "aria-label": this.label, class: className }, index.h("ul", { key: '47d749d57262eb5b277193d3b1fbb1e6a1194db0', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (index.h("li", { key: 'e4d2bd569b832060cccc9ba569ac313a651037c5', class: "pagination__list-item" }, index.h("label", { key: '92384d3dfdc9e7ca611dbb2a954482e1873d00ab', class: "pagination__page-size-selection" }, index.h("swirl-text", { key: 'a0dc7bfdb41296cb754b97810e7ab906ee4ab892', whiteSpace: "inherit" }, this.pageSizeSelectLabel), index.h("swirl-stack", { key: 'a67eedd2ec7b81a8e3a9e4ea476a4dfa33429c51', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, index.h("select", { key: '9286a300f6e37e68cb848a7098402298443204c0', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (index.h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), index.h("swirl-icon-expand-more", { key: '63de1a3653e7d3ec598db18a33336f48ab7c28fb', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), index.h("li", { key: '11c71a54bdbd566dec5222f89886fabe476dfe9c', class: "pagination__list-item" }, index.h("swirl-button", { key: '708f9488dc91520ab2b07849cc04f95aa59335d2', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), index.h("li", { key: '0e8c718593af2b3af7c2983daec8097741463645', class: "pagination__list-item" }, index.h("swirl-button", { key: '24bba36488d9e99de8073624d8fcef9e04c3f29b', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { key: '9591e1c1a1ac1d7af9beb171605fadcac5620259', class: "pagination__list-item" }, index.h("swirl-button", { key: '9af551b80cbcefdd1c7e392f1191954e44aa0db6', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), index.h("li", { key: '6a397b8f7ce772e315d9c194dd35dd70cf371d64', class: "pagination__list-item" }, index.h("swirl-button", { key: '778016987fccd52955ff6abf3f7baa66a3028f77', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
+        return (index.h(index.Host, { key: 'b704ed67ac28dce5806c06cb25a07dd084c5548c' }, index.h("nav", { key: '2f28d2cd07d9f6bdc754391645e416bcb7c70a57', "aria-label": this.label, class: className }, index.h("ul", { key: '7ed5dce860b61314e2162e0cf0ad59ca70e3bacd', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (index.h("li", { key: 'd89fdb1d02f3fb1545006185b8333fc46e5e5086', class: "pagination__list-item" }, index.h("label", { key: 'e346431a8a3c3fc4fe4ade7ae80840ab2562f7cb', class: "pagination__page-size-selection" }, index.h("swirl-text", { key: 'dea7818337eea41ee40b9c0aa971020556b2734b', whiteSpace: "inherit" }, this.pageSizeSelectLabel), index.h("swirl-stack", { key: 'c672c813cd313fe0d44a83e964e40ccf2e0b1b38', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, index.h("select", { key: '645590e84b94957f3f8e24ada246836ad930ca54', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (index.h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), index.h("swirl-icon-expand-more", { key: '6e9d135be6206cf2aaaac8825394e33f6573ff3c', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), index.h("li", { key: '80f4f41c6d945f81887e04f47564c583e6f683d2', class: "pagination__list-item" }, index.h("swirl-button", { key: '9955da23dea56f6e7ed30cd7f95739454ec7b89f', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), index.h("li", { key: 'a1d3e6b188c72ae40aa6b84d2d7d1a06ba22726c', class: "pagination__list-item" }, index.h("swirl-button", { key: '9c0e5c0b0f8f8ef871bd223ed8b624d59752fe12', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { key: '12502f89d5407005dbe5943ae55207c8651c0e46', class: "pagination__list-item" }, index.h("swirl-button", { key: 'acc9845b16a0ff100fd92958987ea6951c3b467d', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), index.h("li", { key: 'cd5f32bed27caac1acd8794fddc2afb755cd6011', class: "pagination__list-item" }, index.h("swirl-button", { key: 'e20a1e9c05f70a5a85380951611b13d661eeda87', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
     }
 };
 SwirlPagination.style = swirlPaginationCss;

package/dist/cjs/swirl-pdf-reader.cjs.entry.js

@@ -182,15 +182,15 @@ const SwirlPdfReader = class {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (index.h(index.Host, { key: 'f87b2b3a17aaf552e6f0dbc835b088eb536039ea' }, index.h("section", { key: '25b0731720226bed4184a5af5c71cf1e788ce48c', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'e92243994384e1f64b4d2428cac74b2530e758d7', class: "pdf-reader__body", role: "document" }, index.h("header", { key: 'ee43973e95458e858327f6aff41604960ef62b55', class: "pdf-reader__header" }, index.h("span", { key: 'd99b29226ab193058a2e0fff1c040ccf659afea2', class: "pdf-reader__header-left" }, index.h("swirl-button", { key: '8b8e4d8f98389f941ceac90cac49776411856ea2', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { key: '5e7997697d19d70423b2f165f91de9b16cb35caf', class: "pdf-reader__label" }, this.label)), index.h("span", { key: '9bcfde5a3c1a6b97cb43cc1ab927429684641a55', class: "pdf-reader__header-center" }, index.h("span", { key: '6c0132c6acc1e70364e821c1f739113b1cf522d3', class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { key: 'd9ea9812f4733a4e3277c82116f68edfc53738a3', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), index.h("swirl-button", { key: '11be2b56eee7d28c084f4e037cf2145a1faa9a51', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), index.h("span", { key: 'bc9c90a84d42e856e12bbb0b8d3cb548779d8e86', class: "pdf-reader__zoom-select-container" }, index.h("select", { key: '181fcc00c792b3f3555eade3b54ef90d60c35857', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { key: '3e98415364654611fd51e09ab695116bbc7f35ef', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { key: 'b423b9a5539bbb92ee274a71c58bf52b4f0301e6', class: "pdf-reader__zoom-select-icon" }))), index.h("span", { key: '77b0e060f06432b6e6bbb5772e5639e14ea49e9a', class: "pdf-reader__header-right" }, index.h("swirl-popover-trigger", { key: '5a19c37fd2a0ad433dc3d4afe6a5ac42986b09b2', swirlPopover: this.menu }, index.h("swirl-button", { key: 'ae1142188d599d6356af3d0b4e95b83c5caa7c45', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), index.h("span", { key: '7acbbf877cd39623ec955d327e261b701f1d8ab4', class: "pdf-reader__floating-tools" }, index.h("button", { key: '70d0d3747756f09f3e11ea6ddf65c4babede31ec', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, index.h("swirl-icon-menu-book", { key: 'e27fffb208d9833dc8e24bd3e04bd0fe0f8c0589' })), index.h("button", { key: 'e17bd59764ff227e1b8ff134246290cda9cfba7f', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, index.h("swirl-icon-file-copy", { key: 'c58d3a80e58a10ce7632ce7ac28bcea58eccc224' })))), index.h("div", { key: '74d8c2e1ee69ad32af9b73ac2a496a764fadf477', class: "pdf-reader__content" }, index.h("nav", { key: '737e42464d5d2c6ba1efff03b3d03bdfff038f59', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && index.h("swirl-spinner", { key: '63b14085da166d9564ca9d6ccbf46d6561e90623' }), !this.loadingThumbnails &&
+        return (index.h(index.Host, { key: '9e8a3d546a41e01381cecfb02236bc865db84739' }, index.h("section", { key: '4af740352f2ef2387c70135ab6132255ea491aa2', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '3e4d83b498be2592ac7095b0e66a765d886cdb03', class: "pdf-reader__body", role: "document" }, index.h("header", { key: 'db77f92b53161e95a9336983849664b48edc5066', class: "pdf-reader__header" }, index.h("span", { key: '47a29a3039bba6524bb8f426cea89042f356a4b5', class: "pdf-reader__header-left" }, index.h("swirl-button", { key: '8e734c700a8ce05c9ca13a850ce8d54a9182b0aa', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { key: '5c44edc063b8d0217b3ec78e73eef8add363dfb1', class: "pdf-reader__label" }, this.label)), index.h("span", { key: 'b88550973259f337ee3d2c03a908c0b5a5d21300', class: "pdf-reader__header-center" }, index.h("span", { key: 'c08c305791e6f055059a4147dd0e73dc5bf1aed3', class: "pdf-reader__zoom-button-container" }, index.h("swirl-button", { key: '5580cc0e35272364fce3315f78d3fc0119619aa2', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), index.h("swirl-button", { key: '01c162c8a2674f20af2ea155a7d8ffb433118dec', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), index.h("span", { key: '66e0f3796c0e8318b52a04d979bf6ac8c524dedf', class: "pdf-reader__zoom-select-container" }, index.h("select", { key: '316b9ac9f55d20a89d4dff74e5e53d9d5076fc99', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { key: '15aed459c87044baf4f3264f5ad890cf31ab4c68', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { key: '667fbba1283314dfb5760a8557b257eae0ab7dca', class: "pdf-reader__zoom-select-icon" }))), index.h("span", { key: 'f074673f883a33ad2a7223748bb302667e1fa0dd', class: "pdf-reader__header-right" }, index.h("swirl-popover-trigger", { key: 'b7fd3f69fd4ca87c224fe0ca104983d0d6ae5a48', swirlPopover: this.menu }, index.h("swirl-button", { key: 'bffd358441d6a2cd0877cc0c25caac961e5bc6d0', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), index.h("span", { key: '9eed85785db4443fe6c219d3294eedd1ca78c7d3', class: "pdf-reader__floating-tools" }, index.h("button", { key: 'c605677f7dfbbdf38dd6ea0a20dfccac5781a484', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, index.h("swirl-icon-menu-book", { key: 'daa1131a66112a6590c2e2072123db2153bd75ea' })), index.h("button", { key: '5b121366287dc4ec958c9e3605b038c59e4d8510', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, index.h("swirl-icon-file-copy", { key: '4d5e22bc86273f86b8af31052ae7d51b990d9b48' })))), index.h("div", { key: 'b85b3e0cada7ba5370120c8721ad1a85b2ebab99', class: "pdf-reader__content" }, index.h("nav", { key: '77f0ccb1204567bec1287fd39825b129980ecf46', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && index.h("swirl-spinner", { key: '4527e39c49d53ff8189ec4de1845d046340d0abc' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index$2) => {
                 const thumbnailClassName = index$1.classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index$2 + 1,
                 });
                 return (index.h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index$2 + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index$2), type: "button" }, index.h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), index.h("swirl-file-viewer", { key: '3858c868032472c3a59d514e91f58a5e460c0266', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), index.h("div", { key: '4242e07f8f5c8af6c93212aedb33af817914b65b', class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { key: '3b08e227ea2cc3ea9aae3d380f90f861f55184bb', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { key: 'ae351989ba28399ca41152f20cfaa3e1438b5600', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", { key: 'c2b553e026fd580505dbd37c97f96a1a937db5db' })), index.h("button", { key: '0ee23b8b2ded7e117a7493ccb6c9dd2a90269bc2', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", { key: 'c6c9373b8fef486199d6c6f0c40c30103d08dabc' }))))), index.h("swirl-popover", { key: '7c0b07d01e9e7fdc5df8f782b4c1f221ebd6b0dd', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: 'c735b038b60fd8a425057bbc745ba19600a28c68' }, index.h("div", { key: 'de929823da14fe898ca4f5f015677ec086432a58', class: "pdf-reader__meta" }, index.h("div", { key: '9c8d9abd3df26e0035521aa54199684c5e9b2865', class: "pdf-reader__file-icon" }, index.h("svg", { key: '2e01364248ea1b4f8baf4cb2f138927ee69e2406', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { key: 'b63ff107183509cea5c72ad8cdac419a61ac7492', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: '993a8ebba103b08a1b3cb328516fb4a76da87d9b', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: '70757211830be3d8ecb71b2729245238c22e6504', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { key: 'e17060418e5b6e4a9f55a7a071a0c5fdff893e33', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), index.h("path", { key: '1c91b39fe992a45c49af2c1a3df633e19dd6ace1', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), index.h("path", { key: 'a7d1b7d3ab97344a73a3ebef3c8e181d6e0099ac', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: '5973e0b9ce3693c651f54716ba7e52f7bedda0d4', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: 'e3996205518df8bd5383db2c405f07fa45b80d30', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { key: '33adf23b10eb44545baf003aeabd35b1ef53cc82', class: "pdf-reader__file-info" }, index.h("swirl-text", { key: 'c62b9ed3fc735956c07bf51554e85c2c3569d311', truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { key: '3f70a4750bf19d4a673f08f076ce95dae77228eb', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && index.h("swirl-separator", { key: 'a02b99f40ab20f2a6e90eacf4640e752ed595033' }), index.h("swirl-action-list", { key: '7b5e86ff8b0fbd6c80646141e88b59c904651878', class: "pdf-reader__menu" }, this.printButtonEnabled && (index.h("swirl-action-list-item", { key: 'db5d97aa1d4840357e18ecd20147c6e86d5a64f1', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '4ded273871f452184b41d9bd37b5292a8df6dcde', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), index.h("swirl-file-viewer", { key: 'f158431d3a55d41226f0642f87db68a1df6c3076', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), index.h("div", { key: '39767a81de5c43b376b820844c86b2fd25c13f4d', class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { key: 'bc07c0222f6f40cd1aa6195c0066b1efd894ab32', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.h("button", { key: '24254152fa7984b596b2c6179fff7b914ad74d39', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, index.h("swirl-icon-add", { key: '6b4f6608f1567be2a0297de253921e4072b2c3fd' })), index.h("button", { key: '23a573b32e33f198f856c2767f9b7bf911f6cb5e', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", { key: 'a4a8a69f6285f9bdc84245cbe646951844e0faae' }))))), index.h("swirl-popover", { key: '803bac80cc9e4327d901820c843b776801b1236a', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", { key: 'b776892fb562df4df16e141fd42ba3df0d62fa61' }, index.h("div", { key: '2639c95d403172e04ed311ea118f04f6f32b171a', class: "pdf-reader__meta" }, index.h("div", { key: 'ee441b3900a004c86204dca124661c3661972a68', class: "pdf-reader__file-icon" }, index.h("svg", { key: '32955c585d904f9fbdec30480d2710cad0160f32', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, index.h("path", { key: 'cbec57d772a823507f1b3df1a27ea817fcfc306b', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: '5593cece20c9c7c81321891753a6bb015f52aee4', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: '35b5dea94ba13bc7b583884e7c49b86e9ec2d673', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), index.h("path", { key: 'e3755c744b162c26343aaf5a9142b875a41e8e04', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), index.h("path", { key: '0d353cee8daf0db0a55c24f6d112d82eb13ff57a', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), index.h("path", { key: 'ef4ed4836dd5e65e901328eeda5348bb9f894cdf', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), index.h("path", { key: '2af4aeeec123149bd07653a68c709022da765707', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), index.h("path", { key: '1d1ef250b0451afb4875a460c6efe2c6bac9462e', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), index.h("div", { key: '09f87c85b90c708cbff2504cf3713494998a8c4a', class: "pdf-reader__file-info" }, index.h("swirl-text", { key: 'b87007f21a0640165667aa38e32a0c577474587b', truncate: true, weight: "semibold" }, this.label), index.h("swirl-text", { key: 'dff6cce013116fbf31e35a16c7be8a38ecf9d99f', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && index.h("swirl-separator", { key: '6f98a48563daaecd481a84e0c25f584c2f537b23' }), index.h("swirl-action-list", { key: '113acbbb7cc058145c43650721a22fa7d35826a7', class: "pdf-reader__menu" }, this.printButtonEnabled && (index.h("swirl-action-list-item", { key: 'ab2ad55ee4d9bd2294086855632502732aeb0a73', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: 'f95ac835bbc22953acb38dc813752b847a11f415', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '186ede09cf84da2c4065d5aa3d554b617a3ee68b', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '1bb122ee41214133b35356baeb6ebae464a14c9b', name: "menu-items" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {