@getflip/swirl-components 0.436.1 → 0.437.0

package/dist/cjs/{swirl-action-list_2.cjs.entry.js → swirl-action-list-item.cjs.entry.js}

@@ -1,106 +1,9 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
-var utils = require('./utils-UfZG-xPD.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
-
-const swirlActionListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
-
-const SwirlActionList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.onKeyDown = (event) => {
-            if (event.code === "ArrowDown" || event.code === "ArrowRight") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusNextItem();
-            }
-            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusPreviousItem();
-            }
-        };
-        this.onFocusOut = (event) => {
-            if (this.isInsidePopover) {
-                return;
-            }
-            const elementReceivingFocus = event.relatedTarget;
-            const elementLosingFocus = event.target;
-            const losingElementIsListItem = elementLosingFocus?.tagName === "SWIRL-ACTION-LIST-ITEM";
-            const receivingElementIsOutsideActionList = elementReceivingFocus === null ||
-                !this.el.contains(elementReceivingFocus);
-            if (!this.isInsidePopover &&
-                receivingElementIsOutsideActionList &&
-                losingElementIsListItem) {
-                this.container.setAttribute("tabindex", "0");
-            }
-        };
-        this.onFocus = () => {
-            if (this.isInsidePopover) {
-                return;
-            }
-            this.container.removeAttribute("tabindex");
-            const items = this.getItems();
-            const activeItemIndex = this.getActiveItemIndex();
-            if (activeItemIndex > -1) {
-                items[activeItemIndex]?.focus();
-            }
-            else {
-                items[0]?.focus();
-            }
-        };
-    }
-    componentDidLoad() {
-        queueMicrotask(() => {
-            this.isInsidePopover = this.el.closest("swirl-popover") !== null;
-            if (!this.isInsidePopover) {
-                this.container.setAttribute("tabindex", "0");
-            }
-        });
-        this.setSectionSeparator();
-    }
-    getItems() {
-        return utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
-    }
-    focusNextItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = (activeItemIndex + 1) % items.length;
-        items[newIndex].focus();
-    }
-    focusPreviousItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
-        items[newIndex]?.focus();
-    }
-    getActiveItemIndex() {
-        const items = this.getItems();
-        const activeElement = utils.getActiveElement();
-        return items.findIndex((item) => item === activeElement ||
-            item === activeElement?.querySelector('[role="menuitem"]'));
-    }
-    setSectionSeparator() {
-        if (!this.el) {
-            return;
-        }
-        const sections = Array.from(this.el.querySelectorAll("swirl-action-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-ACTION-LIST-ITEM") {
-                section.hasSeparator = false;
-            }
-        });
-    }
-    render() {
-        return (index.h(index.Host, { key: '66aff3b846f78442de2998bbd86aee98a3da9b6d' }, index.h("div", { key: 'ca22773ef8f1853509cc70de59d4129f11807057', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: 'c3e20e6cb457f8bdb5dbb7b7c3dfc27971db67ab', onSlotchange: this.setSectionSeparator }))));
-    }
-    get el() { return index.getElement(this); }
-};
-SwirlActionList.style = swirlActionListCss;
+require('./utils-UfZG-xPD.js');
 
 const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-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}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{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){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}";
 
@@ -142,5 +45,4 @@ const SwirlActionListItem = class {
 };
 SwirlActionListItem.style = swirlActionListItemCss;
 
-exports.swirl_action_list = SwirlActionList;
 exports.swirl_action_list_item = SwirlActionListItem;

package/dist/cjs/{swirl-icon-add_6.cjs.entry.js → swirl-action-list_7.cjs.entry.js}

@@ -1,8 +1,106 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
+var utils = require('./utils-UfZG-xPD.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
+const swirlActionListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
+
+const SwirlActionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onKeyDown = (event) => {
+            if (event.code === "ArrowDown" || event.code === "ArrowRight") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextItem();
+            }
+            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusPreviousItem();
+            }
+        };
+        this.onFocusOut = (event) => {
+            if (this.isInsidePopover) {
+                return;
+            }
+            const elementReceivingFocus = event.relatedTarget;
+            const elementLosingFocus = event.target;
+            const losingElementIsListItem = elementLosingFocus?.tagName === "SWIRL-ACTION-LIST-ITEM";
+            const receivingElementIsOutsideActionList = elementReceivingFocus === null ||
+                !this.el.contains(elementReceivingFocus);
+            if (!this.isInsidePopover &&
+                receivingElementIsOutsideActionList &&
+                losingElementIsListItem) {
+                this.container.setAttribute("tabindex", "0");
+            }
+        };
+        this.onFocus = () => {
+            if (this.isInsidePopover) {
+                return;
+            }
+            this.container.removeAttribute("tabindex");
+            const items = this.getItems();
+            const activeItemIndex = this.getActiveItemIndex();
+            if (activeItemIndex > -1) {
+                items[activeItemIndex]?.focus();
+            }
+            else {
+                items[0]?.focus();
+            }
+        };
+    }
+    componentDidLoad() {
+        queueMicrotask(() => {
+            this.isInsidePopover = this.el.closest("swirl-popover") !== null;
+            if (!this.isInsidePopover) {
+                this.container.setAttribute("tabindex", "0");
+            }
+        });
+        this.setSectionSeparator();
+    }
+    getItems() {
+        return utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
+    }
+    focusNextItem() {
+        const items = this.getItems();
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = (activeItemIndex + 1) % items.length;
+        items[newIndex].focus();
+    }
+    focusPreviousItem() {
+        const items = this.getItems();
+        const activeItemIndex = this.getActiveItemIndex();
+        const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+        items[newIndex]?.focus();
+    }
+    getActiveItemIndex() {
+        const items = this.getItems();
+        const activeElement = utils.getActiveElement();
+        return items.findIndex((item) => item === activeElement ||
+            item === activeElement?.querySelector('[role="menuitem"]'));
+    }
+    setSectionSeparator() {
+        if (!this.el) {
+            return;
+        }
+        const sections = Array.from(this.el.querySelectorAll("swirl-action-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-ACTION-LIST-ITEM") {
+                section.hasSeparator = false;
+            }
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '66aff3b846f78442de2998bbd86aee98a3da9b6d' }, index.h("div", { key: 'ca22773ef8f1853509cc70de59d4129f11807057', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: 'c3e20e6cb457f8bdb5dbb7b7c3dfc27971db67ab', onSlotchange: this.setSectionSeparator }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlActionList.style = swirlActionListCss;
+
 const swirlIconCss$5 = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}.icon-wrapper{display:inline-flex;justify-content:center;align-items:center;border-radius:var(--s-border-radius-full-round);background-color:var(--s-surface-raised-default)}.icon-wrapper--size-xs{width:16px;height:16px}.icon-wrapper--size-s{width:20px;height:20px}.icon-wrapper--size-m{width:24px;height:24px}.icon-wrapper--size-l{width:28px;height:28px}.icon-wrapper--size-xl{width:32px;height:32px}.icon-wrapper--background-color-neutral{background-color:var(--s-surface-raised-default)}.icon-wrapper--background-color-banana{background-color:var(--s-decorative-banana-surface-subdued)}.icon-wrapper--background-color-blueberry{background-color:var(--s-decorative-blueberry-surface-subdued)}.icon-wrapper--background-color-chilli{background-color:var(--s-decorative-chilli-surface-subdued)}.icon-wrapper--background-color-grape{background-color:var(--s-decorative-grape-surface-subdued)}.icon-wrapper--background-color-kiwi{background-color:var(--s-decorative-kiwi-surface-subdued)}.icon-wrapper--background-color-pumpkin{background-color:var(--s-decorative-pumpkin-surface-subdued)}.icon-wrapper--background-color-radish{background-color:var(--s-decorative-radish-surface-subdued)}";
 
 const SwirlIconAdd = class {
@@ -111,6 +209,7 @@ const SwirlIconRemove = class {
 };
 SwirlIconRemove.style = swirlIconCss;
 
+exports.swirl_action_list = SwirlActionList;
 exports.swirl_icon_add = SwirlIconAdd;
 exports.swirl_icon_file_copy = SwirlIconFileCopy;
 exports.swirl_icon_fullscreen = SwirlIconFullscreen;