@getflip/swirl-components 0.12.0 → 0.13.0

package/dist/cjs/swirl-icon-check-small_3.cjs.entry.js

@@ -1,261 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-72831c5f.js');
-const index$1 = require('./index-e038b0f7.js');
-const utils = require('./utils-9c9476b4.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const swirlIconCss = ":host{display:inline-flex}";
-
-const SwirlIconCheckSmall = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (index.h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z", fill: "currentColor" })))));
-  }
-};
-SwirlIconCheckSmall.style = swirlIconCss;
-
-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.valueChange = index.createEvent(this, "valueChange", 7);
-    this.value = [];
-    this.onFocus = () => {
-      if (Boolean(this.focusedItem)) {
-        this.focusItem(this.getActiveItemIndex());
-      }
-      else {
-        this.focusItem(0);
-      }
-    };
-    this.onClick = (event) => {
-      event.preventDefault();
-      const target = event.target;
-      const item = target === null || target === void 0 ? void 0 : target.closest("swirl-option-list-item");
-      if (!Boolean(item)) {
-        return;
-      }
-      this.selectItem(this.items.findIndex((i) => i.value === item.value));
-    };
-    this.onKeyDown = (event) => {
-      if (event.code === "ArrowDown") {
-        event.preventDefault();
-        this.focusNextItem();
-      }
-      else if (event.code === "ArrowUp") {
-        event.preventDefault();
-        this.focusPreviousItem();
-      }
-      else if (event.code === "Space" || event.code === "Enter") {
-        event.preventDefault();
-        this.selectFocusedItem();
-      }
-      else if (event.code === "Home") {
-        event.preventDefault();
-        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();
-      }
-    };
-  }
-  componentDidLoad() {
-    this.updateItems();
-    this.observeSlotChanges();
-    this.setItemDisabledState();
-    this.setItemContext();
-    this.syncItemsWithValue();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  watchDisabled() {
-    this.setItemDisabledState();
-  }
-  watchMultiSelect() {
-    this.setItemContext();
-  }
-  watchValue() {
-    this.syncItemsWithValue();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems();
-    });
-    this.observer.observe(this.listboxEl, { childList: true });
-  }
-  updateItems() {
-    this.items = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
-  }
-  setItemDisabledState() {
-    this.items.forEach((item) => (item.disabled = this.disabled));
-  }
-  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]]);
-      }
-    }
-  }
-  selectItem(index) {
-    if (this.disabled) {
-      return;
-    }
-    const item = this.items[index];
-    if (item.disabled) {
-      return;
-    }
-    const itemIsAlreadySelected = this.value.includes(item.value);
-    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.items.forEach((item) => item.shadowRoot
-      .querySelector('[role="option"]')
-      .removeAttribute("tabIndex"));
-    const item = this.items[index].shadowRoot.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();
-    const newIndex = Math.max(activeItemIndex - 1, 0);
-    this.focusItem(newIndex);
-  }
-  getActiveItemIndex() {
-    return this.items
-      .map((item) => item.shadowRoot.querySelector('[role="option"]'))
-      .findIndex((item) => item === this.focusedItem);
-  }
-  render() {
-    const ariaMultiselectable = this.multiSelect ? "true" : undefined;
-    const tabIndex = this.disabled ? -1 : 0;
-    return (index.h(index.Host, null, index.h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "disabled": ["watchDisabled"],
-    "multiSelect": ["watchMultiSelect"],
-    "value": ["watchValue"]
-  }; }
-};
-SwirlOptionList.style = swirlOptionListCss;
-
-const swirlOptionListItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item:focus{outline:none}.option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--selected .option-list-item__label{color:var(--s-text-highlight)}.option-list-item--selected .option-list-item__icon{color:var(--s-icon-highlight)}.option-list-item--selected .option-list-item__checkbox-box{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled{cursor:default}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon{color:var(--s-text-on-status)}.option-list-item--disabled .option-list-item__label{color:var(--s-text-disabled)}.option-list-item--disabled .option-list-item__icon,.option-list-item--disabled .option-list-item__selection-icon,.option-list-item--disabled .option-list-item__checkbox-icon{color:var(--s-icon-disabled)}.option-list-item--disabled .option-list-item__checkbox-box{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label{flex-grow:1;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{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}.option-list-item__checkbox-box{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{display:inline-flex}";
-
-const SwirlOptionListItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.context = "single-select";
-    this.selected = false;
-    this.iconSize = 24;
-    this.desktopMediaQuery = utils.getDesktopMediaQuery();
-    this.desktopMediaQueryHandler = (event) => {
-      this.forceIconProps(event.matches);
-      this.updateIconSize(event.matches);
-    };
-  }
-  componentDidLoad() {
-    var _a, _b;
-    this.forceIconProps(this.desktopMediaQuery.matches);
-    this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
-  }
-  forceIconProps(smallIcon) {
-    var _a;
-    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
-  }
-  updateIconSize(smallIcon) {
-    this.iconSize = smallIcon ? 20 : 24;
-  }
-  render() {
-    const ariaDisabled = this.disabled ? "true" : undefined;
-    const ariaSelected = String(this.selected);
-    const showCheckbox = this.context === "multi-select";
-    const showIcon = Boolean(this.icon) && this.context === "single-select";
-    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--selected": this.selected,
-    });
-    return (index.h(index.Host, null, index.h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, part: "option-list-item", role: "option" }, showIcon && (index.h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (index.h("span", { class: "option-list-item__checkbox" }, index.h("span", { class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (index.h("span", { class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { size: this.iconSize }))))));
-  }
-};
-SwirlOptionListItem.style = swirlOptionListItemCss;
-
-exports.swirl_icon_check_small = SwirlIconCheckSmall;
-exports.swirl_option_list = SwirlOptionList;
-exports.swirl_option_list_item = SwirlOptionListItem;

package/dist/components/_commonjsHelpers.js

@@ -1,36 +0,0 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, commonjsRequire as d, getDefaultExportFromCjs as g };

package/dist/esm/swirl-icon-check-small_3.entry.js

@@ -1,255 +0,0 @@
-import { r as registerInstance, h, F as Fragment, c as createEvent, H as Host, g as getElement } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import { q as querySelectorAllDeep, g as getDesktopMediaQuery } from './utils-7efaa1c6.js';
-import './_commonjsHelpers-44457d8d.js';
-
-const swirlIconCss = ":host{display:inline-flex}";
-
-const SwirlIconCheckSmall = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z", fill: "currentColor" })))));
-  }
-};
-SwirlIconCheckSmall.style = swirlIconCss;
-
-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) {
-    registerInstance(this, hostRef);
-    this.valueChange = createEvent(this, "valueChange", 7);
-    this.value = [];
-    this.onFocus = () => {
-      if (Boolean(this.focusedItem)) {
-        this.focusItem(this.getActiveItemIndex());
-      }
-      else {
-        this.focusItem(0);
-      }
-    };
-    this.onClick = (event) => {
-      event.preventDefault();
-      const target = event.target;
-      const item = target === null || target === void 0 ? void 0 : target.closest("swirl-option-list-item");
-      if (!Boolean(item)) {
-        return;
-      }
-      this.selectItem(this.items.findIndex((i) => i.value === item.value));
-    };
-    this.onKeyDown = (event) => {
-      if (event.code === "ArrowDown") {
-        event.preventDefault();
-        this.focusNextItem();
-      }
-      else if (event.code === "ArrowUp") {
-        event.preventDefault();
-        this.focusPreviousItem();
-      }
-      else if (event.code === "Space" || event.code === "Enter") {
-        event.preventDefault();
-        this.selectFocusedItem();
-      }
-      else if (event.code === "Home") {
-        event.preventDefault();
-        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();
-      }
-    };
-  }
-  componentDidLoad() {
-    this.updateItems();
-    this.observeSlotChanges();
-    this.setItemDisabledState();
-    this.setItemContext();
-    this.syncItemsWithValue();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  watchDisabled() {
-    this.setItemDisabledState();
-  }
-  watchMultiSelect() {
-    this.setItemContext();
-  }
-  watchValue() {
-    this.syncItemsWithValue();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems();
-    });
-    this.observer.observe(this.listboxEl, { childList: true });
-  }
-  updateItems() {
-    this.items = querySelectorAllDeep(this.el, "swirl-option-list-item");
-  }
-  setItemDisabledState() {
-    this.items.forEach((item) => (item.disabled = this.disabled));
-  }
-  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]]);
-      }
-    }
-  }
-  selectItem(index) {
-    if (this.disabled) {
-      return;
-    }
-    const item = this.items[index];
-    if (item.disabled) {
-      return;
-    }
-    const itemIsAlreadySelected = this.value.includes(item.value);
-    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.items.forEach((item) => item.shadowRoot
-      .querySelector('[role="option"]')
-      .removeAttribute("tabIndex"));
-    const item = this.items[index].shadowRoot.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();
-    const newIndex = Math.max(activeItemIndex - 1, 0);
-    this.focusItem(newIndex);
-  }
-  getActiveItemIndex() {
-    return this.items
-      .map((item) => item.shadowRoot.querySelector('[role="option"]'))
-      .findIndex((item) => item === this.focusedItem);
-  }
-  render() {
-    const ariaMultiselectable = this.multiSelect ? "true" : undefined;
-    const tabIndex = this.disabled ? -1 : 0;
-    return (h(Host, null, h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "disabled": ["watchDisabled"],
-    "multiSelect": ["watchMultiSelect"],
-    "value": ["watchValue"]
-  }; }
-};
-SwirlOptionList.style = swirlOptionListCss;
-
-const swirlOptionListItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item:focus{outline:none}.option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--selected .option-list-item__label{color:var(--s-text-highlight)}.option-list-item--selected .option-list-item__icon{color:var(--s-icon-highlight)}.option-list-item--selected .option-list-item__checkbox-box{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled{cursor:default}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon{color:var(--s-text-on-status)}.option-list-item--disabled .option-list-item__label{color:var(--s-text-disabled)}.option-list-item--disabled .option-list-item__icon,.option-list-item--disabled .option-list-item__selection-icon,.option-list-item--disabled .option-list-item__checkbox-icon{color:var(--s-icon-disabled)}.option-list-item--disabled .option-list-item__checkbox-box{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label{flex-grow:1;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{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}.option-list-item__checkbox-box{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{display:inline-flex}";
-
-const SwirlOptionListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.context = "single-select";
-    this.selected = false;
-    this.iconSize = 24;
-    this.desktopMediaQuery = getDesktopMediaQuery();
-    this.desktopMediaQueryHandler = (event) => {
-      this.forceIconProps(event.matches);
-      this.updateIconSize(event.matches);
-    };
-  }
-  componentDidLoad() {
-    var _a, _b;
-    this.forceIconProps(this.desktopMediaQuery.matches);
-    this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
-  }
-  forceIconProps(smallIcon) {
-    var _a;
-    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
-  }
-  updateIconSize(smallIcon) {
-    this.iconSize = smallIcon ? 20 : 24;
-  }
-  render() {
-    const ariaDisabled = this.disabled ? "true" : undefined;
-    const ariaSelected = String(this.selected);
-    const showCheckbox = this.context === "multi-select";
-    const showIcon = Boolean(this.icon) && this.context === "single-select";
-    const showSelectionIcon = this.selected && this.context === "single-select";
-    const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
-      "option-list-item--disabled": this.disabled,
-      "option-list-item--selected": this.selected,
-    });
-    return (h(Host, null, h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, part: "option-list-item", role: "option" }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize }))))));
-  }
-};
-SwirlOptionListItem.style = swirlOptionListItemCss;
-
-export { SwirlIconCheckSmall as swirl_icon_check_small, SwirlOptionList as swirl_option_list, SwirlOptionListItem as swirl_option_list_item };

package/dist/swirl-components/p-0dcba8b2.entry.js

@@ -1 +0,0 @@
-import{r as i,h as t,F as s,c as e,H as o,g as l}from"./p-9fe00e8a.js";import{c as n}from"./p-d3d722dc.js";import{q as h,g as r}from"./p-d97d183f.js";import"./p-86bd3473.js";const a=class{constructor(t){i(this,t),this.size=24}render(){const i=20===this.size?24:this.size,e=n("swirl-icon",`swirl-icon--size-${this.size}`);return t("svg",{class:e,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${i} ${i}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z",fill:"currentColor"})),(20===this.size||24===this.size)&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z",fill:"currentColor"})),28===this.size&&t(s,null,t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z",fill:"currentColor"})))}};a.style=":host{display:inline-flex}";const c=class{constructor(t){i(this,t),this.valueChange=e(this,"valueChange",7),this.value=[],this.onFocus=()=>{Boolean(this.focusedItem)?this.focusItem(this.getActiveItemIndex()):this.focusItem(0)},this.onClick=i=>{i.preventDefault();const t=i.target,s=null==t?void 0:t.closest("swirl-option-list-item");Boolean(s)&&this.selectItem(this.items.findIndex((i=>i.value===s.value)))},this.onKeyDown=i=>{"ArrowDown"===i.code?(i.preventDefault(),this.focusNextItem()):"ArrowUp"===i.code?(i.preventDefault(),this.focusPreviousItem()):"Space"===i.code||"Enter"===i.code?(i.preventDefault(),this.selectFocusedItem()):"Home"===i.code?(i.preventDefault(),this.focusItem(0)):"End"===i.code?(i.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===i.code&&(i.metaKey||i.ctrlKey)&&this.multiSelect&&(i.preventDefault(),this.selectAllItems())}}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue()}disconnectedCallback(){var i;null===(i=this.observer)||void 0===i||i.disconnect()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems()})),this.observer.observe(this.listboxEl,{childList:!0})}updateItems(){this.items=h(this.el,"swirl-option-list-item")}setItemDisabledState(){this.items.forEach((i=>i.disabled=this.disabled))}setItemContext(){this.multiSelect?this.items.forEach((i=>i.context="multi-select")):(this.items.forEach((i=>i.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}selectItem(i){if(this.disabled)return;const t=this.items[i];if(t.disabled)return;const s=this.value.includes(t.value);this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((i=>i!==t.value)):[...this.value,t.value])}updateValue(i){this.value=i,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const i=this.items.every((i=>this.value.includes(i.value)));this.updateValue(i?[]:this.items.map((i=>i.value)))}syncItemsWithValue(){this.items.forEach((i=>i.selected=this.value.includes(i.value)))}focusItem(i){if(this.disabled)return;this.items.forEach((i=>i.shadowRoot.querySelector('[role="option"]').removeAttribute("tabIndex")));const t=this.items[i].shadowRoot.querySelector('[role="option"]');Boolean(t)&&(t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=t)}focusNextItem(){if(this.disabled)return;const i=this.getActiveItemIndex(),t=Math.min(i+1,this.items.length-1);this.focusItem(t)}focusPreviousItem(){const i=this.getActiveItemIndex(),t=Math.max(i-1,0);this.focusItem(t)}getActiveItemIndex(){return this.items.map((i=>i.shadowRoot.querySelector('[role="option"]'))).findIndex((i=>i===this.focusedItem))}render(){return t(o,null,t("div",{"aria-label":this.label,"aria-multiselectable":this.multiSelect?"true":void 0,class:"option-list",id:this.optionListId,onClick:this.onClick,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:i=>this.listboxEl=i,role:"listbox",tabIndex:this.disabled?-1:0},t("slot",null)))}get el(){return l(this)}static get watchers(){return{disabled:["watchDisabled"],multiSelect:["watchMultiSelect"],value:["watchValue"]}}};c.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const d=class{constructor(t){i(this,t),this.context="single-select",this.selected=!1,this.iconSize=24,this.desktopMediaQuery=r(),this.desktopMediaQueryHandler=i=>{this.forceIconProps(i.matches),this.updateIconSize(i.matches)}}componentDidLoad(){var i,t;this.forceIconProps(this.desktopMediaQuery.matches),this.updateIconSize(this.desktopMediaQuery.matches),null===(t=(i=this.desktopMediaQuery).addEventListener)||void 0===t||t.call(i,"change",this.desktopMediaQueryHandler)}disconnectedCallback(){var i,t;null===(t=(i=this.desktopMediaQuery).removeEventListener)||void 0===t||t.call(i,"change",this.desktopMediaQueryHandler)}forceIconProps(i){var t;const s=null===(t=this.iconEl)||void 0===t?void 0:t.children[0];null==s||s.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,s=String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,h=this.selected&&"single-select"===this.context,r=n("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--selected":this.selected});return t(o,null,t("div",{"aria-disabled":i,"aria-selected":s,class:r,part:"option-list-item",role:"option"},l&&t("span",{class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),e&&t("span",{class:"option-list-item__checkbox"},t("span",{class:"option-list-item__checkbox-box"},this.selected&&t("swirl-icon-check-strong",{class:"option-list-item__checkbox-icon",size:16}))),t("span",{class:"option-list-item__label",part:"option-list-item__label"},this.label),h&&t("span",{class:"option-list-item__selection-icon"},t("swirl-icon-check-small",{size:this.iconSize}))))}};d.style=":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item:focus{outline:none}.option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--selected .option-list-item__label{color:var(--s-text-highlight)}.option-list-item--selected .option-list-item__icon{color:var(--s-icon-highlight)}.option-list-item--selected .option-list-item__checkbox-box{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled{cursor:default}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon{color:var(--s-text-on-status)}.option-list-item--disabled .option-list-item__label{color:var(--s-text-disabled)}.option-list-item--disabled .option-list-item__icon,.option-list-item--disabled .option-list-item__selection-icon,.option-list-item--disabled .option-list-item__checkbox-icon{color:var(--s-icon-disabled)}.option-list-item--disabled .option-list-item__checkbox-box{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label{flex-grow:1;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{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}.option-list-item__checkbox-box{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{display:inline-flex}";export{a as swirl_icon_check_small,c as swirl_option_list,d as swirl_option_list_item}

package/dist/swirl-components/p-36573727.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as i,H as e,g as o}from"./p-9fe00e8a.js";import{a,c as l,o as h}from"./p-e8bb09e8.js";import{c as n}from"./p-d3d722dc.js";import{d as r}from"./p-d97d183f.js";import"./p-86bd3473.js";const c=class{constructor(i){t(this,i),this.valueChange=s(this,"valueChange",7),this.clearable=!0,this.clearButtonLabel="Clear input",this.generateSuggestions=async()=>[],this.menuLabel="Suggestions",this.active=!1,this.loading=!1,this.suggestions=[],this.onChange=r((async t=>{this.value=t.detail,this.valueChange.emit(this.value),this.updateSuggestions(),this.open()}),250,!1),this.onSelect=t=>{var s;Boolean(t.detail[0])&&(this.value=t.detail[0],this.valueChange.emit(this.value)),null===(s=this.inputEl.querySelector("input"))||void 0===s||s.focus(),this.close()},this.onFocusOut=t=>{const s=t.relatedTarget;Boolean(s)&&!this.el.contains(s)&&this.close()},this.onFocus=()=>{this.updateSuggestions(),this.open()},this.onKeyDown=t=>{"Escape"===t.code&&(t.preventDefault(),this.inputEl.querySelector("input").focus(),this.close())},this.onInputKeyDown=t=>{"ArrowDown"===t.code&&(t.preventDefault(),this.listboxEl.querySelector('[role="listbox"]').focus())}}componentWillLoad(){const t=document.querySelectorAll("swirl-datepicker").length;this.id=`autocomplete-${t}`}onWindowClick(t){this.el.contains(t.target)||this.close()}async close(){this.active&&(this.disableAutoUpdate&&this.disableAutoUpdate(),this.active=!1)}async open(){this.active||(this.active=!0,requestAnimationFrame((async()=>{await this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=a(this.inputEl,this.listboxContainerEl,this.reposition.bind(this)),this.listboxContainerEl.scrollTop=0})))}async reposition(){Boolean(this.listboxContainerEl)&&(this.position=await l(this.inputEl,this.listboxContainerEl,{middleware:[h({crossAxis:-16,mainAxis:16})],placement:"bottom-start",strategy:"fixed"}))}async updateSuggestions(){this.loading=!0,this.suggestions=[],this.suggestions=await this.generateSuggestions(this.value),this.loading=!1}render(){var t,s,o;const a=`${this.id}-suggestions`,l=n("autocomplete",{"autocomplete--inactive":!this.active});return i(e,null,i("div",{class:l,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},i("swirl-text-input",{autoSelect:this.autoSelect,class:"autocomplete__input",clearable:this.clearable,clearButtonLabel:this.clearButtonLabel,disabled:this.disabled,disableDynamicWidth:!0,swirlAriaAutocomplete:"list",swirlAriaControls:a,swirlAriaDescribedby:this.swirlAriaDescribedby,swirlAriaExpanded:String(this.active),swirlRole:"combobox",id:this.id,invalid:this.invalid,onInputFocus:this.onFocus,onKeyDown:this.onInputKeyDown,onValueChange:this.onChange,maxLength:this.maxLength,mode:this.mode,ref:t=>this.inputEl=t,required:this.required,spellCheck:this.spellCheck,value:this.value}),i("div",{class:"autocomplete__listbox-container",ref:t=>this.listboxContainerEl=t,style:{top:Boolean(this.position)?`${null===(t=this.position)||void 0===t?void 0:t.y}px`:"",left:Boolean(this.position)?`${null===(s=this.position)||void 0===s?void 0:s.x}px`:"",width:`${(null===(o=this.inputEl)||void 0===o?void 0:o.getBoundingClientRect().width)+32}px`}},this.loading&&i("div",{class:"autocomplete__spinner"},i("swirl-spinner",null)),this.suggestions.length>0&&i("swirl-option-list",{label:this.menuLabel,onValueChange:this.onSelect,optionListId:a,ref:t=>this.listboxEl=t,value:[this.value]},this.suggestions.map((t=>i("swirl-option-list-item",{selected:this.value===t.label,key:t.id,disabled:t.disabled,label:t.label,value:t.label})))))))}get el(){return o(this)}};c.style=".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}";export{c as swirl_autocomplete}