@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/utils/forms/start-container-controller.js

@@ -0,0 +1,132 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { raf } from "../helpers";
+import { isRTL } from "../rtl/index";
+/**
+ * Applied to the host while the label is being repositioned. The
+ * component stylesheets style this class, so it must stay in sync with
+ * the `skip-label-transition` selector in those files. Renaming it here
+ * requires renaming it there too.
+ */
+export const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
+/**
+ * Set on the host as an inline style. The component stylesheets declare
+ * this property and read it with `var()`, so it must stay in sync with
+ * the `--internal-start-container-adjustment` references in those files.
+ * Renaming it here requires renaming it there too.
+ */
+export const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
+/**
+ * A utility to measure and update the start container width adjustment
+ * for form components (input, textarea, select) with `fill="outline"`.
+ * This adjustment compensates for the start container width when
+ * positioning floating/stacked labels within the outline border.
+ *
+ * Measurement is deferred with raf() to avoid forcing layout during
+ * component updates, and a ResizeObserver watches for dynamic width
+ * changes (e.g., when web fonts load or async content changes).
+ *
+ * @internal
+ * @param el - The host element (ion-input, ion-textarea, or ion-select).
+ * @param getStartContainer - A callback that returns the start container element.
+ * @param shouldApplyAdjustment - A callback that determines whether the adjustment should be applied.
+ */
+export const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+    let resizeObserver;
+    let observedContainer;
+    let measurementRaf;
+    let transitionRaf;
+    let appliedAdjustment;
+    const calculateAdjustment = () => {
+        const startSlot = getStartContainer();
+        if (!startSlot || !shouldApplyAdjustment()) {
+            return '';
+        }
+        /*
+         * Round to one decimal place so fractional widths produce a stable
+         * label offset when the start container is added, removed, or resized.
+         */
+        const startContainerWidth = startSlot.getBoundingClientRect().width;
+        const roundedWidth = Math.round(startContainerWidth * 10) / 10;
+        const sign = isRTL(el) ? '' : '-';
+        return roundedWidth ? `${sign}${roundedWidth}px` : '0px';
+    };
+    const scheduleAdjustmentUpdate = () => {
+        // Return if there is already a measurement queued to avoid a flicker
+        if (measurementRaf !== undefined) {
+            return;
+        }
+        /*
+         * Defer the measurement until the next animation frame so layout
+         * is measured after the current update has been applied.
+         */
+        measurementRaf = raf(() => {
+            measurementRaf = undefined;
+            const adjustment = calculateAdjustment();
+            // Only suppress the label transition when the label has to move
+            if (adjustment !== appliedAdjustment) {
+                // Discard a removal queued by an earlier change
+                if (transitionRaf !== undefined) {
+                    cancelAnimationFrame(transitionRaf);
+                }
+                el.classList.add(SKIP_LABEL_TRANSITION_CLASS);
+                el.style.setProperty(START_CONTAINER_ADJUSTMENT_VAR, adjustment);
+                appliedAdjustment = adjustment;
+                // Re-enable the transition once the new offset has been painted
+                transitionRaf = raf(() => {
+                    transitionRaf = undefined;
+                    el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+                });
+            }
+            setupResizeObserver();
+        });
+    };
+    const disconnectResizeObserver = () => {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
+            observedContainer = undefined;
+        }
+    };
+    const setupResizeObserver = () => {
+        const startSlot = getStartContainer();
+        // Stop watching once the adjustment no longer applies
+        if (!startSlot || !shouldApplyAdjustment()) {
+            disconnectResizeObserver();
+            return;
+        }
+        // Return when prerendering or already watching this container
+        if (typeof ResizeObserver !== 'function' || (resizeObserver && observedContainer === startSlot)) {
+            return;
+        }
+        disconnectResizeObserver();
+        resizeObserver = new ResizeObserver(() => {
+            scheduleAdjustmentUpdate();
+        });
+        observedContainer = startSlot;
+        resizeObserver.observe(startSlot);
+    };
+    const calculateStartContainerWidth = () => {
+        scheduleAdjustmentUpdate();
+    };
+    const destroy = () => {
+        disconnectResizeObserver();
+        if (measurementRaf !== undefined) {
+            cancelAnimationFrame(measurementRaf);
+            measurementRaf = undefined;
+        }
+        // Tearing down mid-toggle would leave the transition disabled
+        if (transitionRaf !== undefined) {
+            cancelAnimationFrame(transitionRaf);
+            transitionRaf = undefined;
+            el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+        }
+        // Re-apply from scratch if the element is connected again
+        appliedAdjustment = undefined;
+    };
+    return {
+        calculateStartContainerWidth,
+        destroy,
+    };
+};

package/dist/collection/utils/framework-delegate.js

@@ -4,14 +4,13 @@
 import { componentOnReady } from "./helpers";
 // TODO(FW-2832): types
 export const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
-    var _a;
     if (delegate) {
         return delegate.attachViewToDom(container, component, componentProps, cssClasses);
     }
     if (!inline && typeof component !== 'string' && !(component instanceof HTMLElement)) {
         throw new Error('framework delegate is missing');
     }
-    const el = typeof component === 'string' ? (_a = container.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(component) : component;
+    const el = typeof component === 'string' ? container.ownerDocument?.createElement(component) : component;
     if (cssClasses) {
         cssClasses.forEach((c) => el.classList.add(c));
     }
@@ -36,7 +35,6 @@ export const CoreDelegate = () => {
     let BaseComponent;
     let Reference;
     const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
-        var _a, _b;
         BaseComponent = parentElement;
         let ChildComponent;
         /**
@@ -49,7 +47,7 @@ export const CoreDelegate = () => {
              * the element otherwise just get a reference
              * to the component.
              */
-            const el = typeof userComponent === 'string' ? (_a = BaseComponent.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(userComponent) : userComponent;
+            const el = typeof userComponent === 'string' ? BaseComponent.ownerDocument?.createElement(userComponent) : userComponent;
             /**
              * Add any css classes passed in
              * via the cssClasses prop on the overlay.
@@ -81,7 +79,7 @@ export const CoreDelegate = () => {
                  * that the overlay has not been presented yet and we need
                  * to create the containing element with the specified classes.
                  */
-                const el = (_b = BaseComponent.ownerDocument) === null || _b === void 0 ? void 0 : _b.createElement('div');
+                const el = BaseComponent.ownerDocument?.createElement('div');
                 // Add a class to track if the root element was created by the delegate.
                 el.classList.add('ion-delegate-host');
                 cssClasses.forEach((c) => el.classList.add(c));
@@ -121,7 +119,7 @@ export const CoreDelegate = () => {
          * in the event that a modal or popover is presented
          * with no child content.
          */
-        return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
+        return ChildComponent ?? BaseComponent;
     };
     const removeViewFromDom = () => {
         /**

package/dist/collection/utils/gesture/gesture-controller.js

@@ -2,18 +2,16 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 class GestureController {
-    constructor() {
-        this.gestureId = 0;
-        this.requestedStart = new Map();
-        this.disabledGestures = new Map();
-        this.disabledScroll = new Set();
-    }
+    gestureId = 0;
+    requestedStart = new Map();
+    disabledGestures = new Map();
+    disabledScroll = new Set();
+    capturedId;
     /**
      * Creates a gesture delegate based on the GestureConfig passed
      */
     createGesture(config) {
-        var _a;
-        return new GestureDelegate(this, this.newID(), config.name, (_a = config.priority) !== null && _a !== void 0 ? _a : 0, !!config.disableScroll);
+        return new GestureDelegate(this, this.newID(), config.name, config.priority ?? 0, !!config.disableScroll);
     }
     /**
      * Creates a blocker that will block any other gesture events from firing. Set in the ion-gesture component.
@@ -109,6 +107,11 @@ class GestureController {
     }
 }
 class GestureDelegate {
+    id;
+    name;
+    disableScroll;
+    ctrl;
+    priority;
     constructor(ctrl, id, name, priority, disableScroll) {
         this.id = id;
         this.name = name;
@@ -152,6 +155,10 @@ class GestureDelegate {
     }
 }
 class BlockerDelegate {
+    id;
+    disable;
+    disableScroll;
+    ctrl;
     constructor(ctrl, id, disable, disableScroll) {
         this.id = id;
         this.disable = disable;

package/dist/collection/utils/gesture/index.js

@@ -10,7 +10,15 @@ export const createGesture = (config) => {
     let hasStartedPan = false;
     let hasFiredStart = true;
     let isMoveQueued = false;
-    const finalConfig = Object.assign({ disableScroll: false, direction: 'x', gesturePriority: 0, passive: true, maxAngle: 40, threshold: 10 }, config);
+    const finalConfig = {
+        disableScroll: false,
+        direction: 'x',
+        gesturePriority: 0,
+        passive: true,
+        maxAngle: 40,
+        threshold: 10,
+        ...config,
+    };
     const canStart = finalConfig.canStart;
     const onWillStart = finalConfig.onWillStart;
     const onStart = finalConfig.onStart;
@@ -125,7 +133,7 @@ export const createGesture = (config) => {
     const blurActiveElement = () => {
         if (typeof document !== 'undefined') {
             const activeElement = document.activeElement;
-            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) {
+            if (activeElement?.blur) {
                 activeElement.blur();
             }
         }

package/dist/collection/utils/hardware-back-button.js

@@ -28,7 +28,7 @@ export const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher'
  * will still happen.
  */
 export const blockHardwareBackButton = () => {
-    document.addEventListener('backbutton', () => { }); // eslint-disable-line
+    document.addEventListener('backbutton', () => { });
 };
 export const startHardwareBackButton = () => {
     const doc = document;
@@ -50,7 +50,7 @@ export const startHardwareBackButton = () => {
         doc.dispatchEvent(ev);
         const executeAction = async (handlerRegister) => {
             try {
-                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
+                if (handlerRegister?.handler) {
                     const result = handlerRegister.handler(processHandlers);
                     if (result != null) {
                         await result;
@@ -89,7 +89,7 @@ export const startHardwareBackButton = () => {
     if (shouldUseCloseWatcher()) {
         let watcher;
         const configureWatcher = () => {
-            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher?.destroy();
             watcher = new win.CloseWatcher();
             /**
              * Once a close request happens

package/dist/collection/utils/helpers.js

@@ -322,8 +322,8 @@ export const debounce = (func, wait = 0) => {
  * @returns whether the keys are the same and the values are shallow equal.
  */
 export const shallowEqualStringMap = (map1, map2) => {
-    map1 !== null && map1 !== void 0 ? map1 : (map1 = {});
-    map2 !== null && map2 !== void 0 ? map2 : (map2 = {});
+    map1 ??= {};
+    map2 ??= {};
     if (map1 === map2) {
         return true;
     }

package/dist/collection/utils/input-shims/hacks/scroll-assist.js

@@ -94,7 +94,7 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
      */
     const focusOut = () => {
         hasKeyboardBeenPresentedForTextField = false;
-        win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+        win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
         componentEl.removeEventListener('focusout', focusOut);
     };
     /**
@@ -114,13 +114,13 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
             return;
         }
         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
-        win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
+        win?.addEventListener('ionKeyboardDidShow', keyboardShow);
         componentEl.addEventListener('focusout', focusOut);
     };
     componentEl.addEventListener('focusin', focusIn);
     return () => {
         componentEl.removeEventListener('focusin', focusIn);
-        win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+        win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
         componentEl.removeEventListener('focusout', focusOut);
     };
 };
@@ -129,7 +129,6 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
  * focus an input but not have scroll assist run again.
  */
 const setManualFocus = (el) => {
-    var _a;
     /**
      * If element is already focused then
      * a new focusin event will not be dispatched
@@ -154,7 +153,7 @@ const setManualFocus = (el) => {
      */
     const inputId = el.getAttribute('id');
     const label = el.closest(`label[for="${inputId}"]`);
-    const activeElLabel = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`label[for="${inputId}"]`);
+    const activeElLabel = document.activeElement?.closest(`label[for="${inputId}"]`);
     if (label !== null && label === activeElLabel) {
         // If the label is the same as the active element label, then
         // we don't need to set the `SKIP_SCROLL_ASSIST` and reset focus.

package/dist/collection/utils/input-shims/hacks/scroll-data.js

@@ -4,8 +4,7 @@
 import { SCROLL_AMOUNT_PADDING } from "./common";
 const SCROLL_ASSIST_SPEED = 0.3;
 export const getScrollData = (componentEl, contentEl, keyboardHeight, platformHeight) => {
-    var _a;
-    const itemEl = (_a = componentEl.closest('ion-item,[ion-item]')) !== null && _a !== void 0 ? _a : componentEl;
+    const itemEl = componentEl.closest('ion-item,[ion-item]') ?? componentEl;
     return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, platformHeight);
 };
 const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {

package/dist/collection/utils/keyboard/keyboard-controller.js

@@ -26,7 +26,7 @@ const getResizeContainer = (resizeMode) => {
      * we can fall back to `body`.
      */
     const ionApp = doc.querySelector('ion-app');
-    return ionApp !== null && ionApp !== void 0 ? ionApp : doc.body;
+    return ionApp ?? doc.body;
 };
 /**
  * Get the height of ion-app or body.
@@ -74,8 +74,8 @@ export const createKeyboardController = async (keyboardChangeCallback) => {
             keyboardVisible = false;
             fireChangeCallback(keyboardVisible, resizeMode);
         };
-        win === null || win === void 0 ? void 0 : win.addEventListener('keyboardWillShow', keyboardWillShowHandler);
-        win === null || win === void 0 ? void 0 : win.addEventListener('keyboardWillHide', keyboardWillHideHandler);
+        win?.addEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win?.addEventListener('keyboardWillHide', keyboardWillHideHandler);
     };
     const fireChangeCallback = (state, resizeMode) => {
         if (keyboardChangeCallback) {
@@ -152,8 +152,8 @@ export const createKeyboardController = async (keyboardChangeCallback) => {
         });
     };
     const destroy = () => {
-        win === null || win === void 0 ? void 0 : win.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
-        win === null || win === void 0 ? void 0 : win.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
+        win?.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win?.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
         keyboardWillShowHandler = keyboardWillHideHandler = undefined;
     };
     const isKeyboardVisible = () => keyboardVisible;

package/dist/collection/utils/keyboard/keyboard.js

@@ -121,7 +121,7 @@ const fireKeyboardCloseEvent = (win) => {
  * layout viewport states
  */
 export const trackViewportChanges = (win) => {
-    previousVisualViewport = Object.assign({}, currentVisualViewport);
+    previousVisualViewport = { ...currentVisualViewport };
     currentVisualViewport = copyVisualViewport(win.visualViewport);
 };
 /**

package/dist/collection/utils/logging/index.js

@@ -7,7 +7,28 @@ export var LogLevel;
     LogLevel["OFF"] = "OFF";
     LogLevel["ERROR"] = "ERROR";
     LogLevel["WARN"] = "WARN";
+    LogLevel["DEBUG"] = "DEBUG";
 })(LogLevel || (LogLevel = {}));
+/**
+ * Ranks each level so an enabled check is a numeric comparison. A configured
+ * level logs anything whose rank is less than or equal to its own: `OFF` (0)
+ * logs nothing, `ERROR` (1) logs errors, `WARN` (2) logs errors and warnings,
+ * `DEBUG` (3) logs all of the above plus internal diagnostics.
+ */
+const LOG_LEVEL_RANK = {
+    [LogLevel.OFF]: 0,
+    [LogLevel.ERROR]: 1,
+    [LogLevel.WARN]: 2,
+    [LogLevel.DEBUG]: 3,
+};
+/**
+ * Whether the configured level is verbose enough to log `minimum`. Levels set
+ * through a query parameter arrive as raw strings, hence the uppercasing.
+ */
+const isLogLevelEnabled = (minimum) => {
+    const configured = String(config.get('logLevel', LogLevel.WARN)).toUpperCase();
+    return LOG_LEVEL_RANK[configured] >= LOG_LEVEL_RANK[minimum];
+};
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -15,8 +36,7 @@ export var LogLevel;
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', LogLevel.WARN);
-    if ([LogLevel.WARN].includes(logLevel)) {
+    if (isLogLevelEnabled(LogLevel.WARN)) {
         return console.warn(`[Ionic Warning]: ${message}`, ...params);
     }
 };
@@ -28,8 +48,7 @@ export const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 export const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', LogLevel.ERROR);
-    if ([LogLevel.ERROR, LogLevel.WARN].includes(logLevel)) {
+    if (isLogLevelEnabled(LogLevel.ERROR)) {
         return console.error(`[Ionic Error]: ${message}`, ...params);
     }
 };

package/dist/collection/utils/menu-controller/index.js

@@ -49,7 +49,6 @@ const createMenuController = () => {
     const isOpen = async (menu) => {
         if (menu != null) {
             const menuEl = await get(menu);
-            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
             return menuEl !== undefined && menuEl.isOpen();
         }
         else {
@@ -185,7 +184,7 @@ const createMenuController = () => {
     registerAnimation('reveal', menuRevealAnimation);
     registerAnimation('push', menuPushAnimation);
     registerAnimation('overlay', menuOverlayAnimation);
-    doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+    doc?.addEventListener('ionBackButton', (ev) => {
         const openMenu = _getOpenSync();
         if (openMenu) {
             ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {

package/dist/collection/utils/native/haptic.js

@@ -47,7 +47,7 @@ export var NotificationType;
 const HapticEngine = {
     getEngine() {
         const capacitor = getCapacitor();
-        if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('Haptics')) {
+        if (capacitor?.isPluginAvailable('Haptics')) {
             // Capacitor
             return capacitor.Plugins.Haptics;
         }
@@ -68,8 +68,7 @@ const HapticEngine = {
          * the Vibrate API. This check avoids that error
          * if the browser does not support the Vibrate API.
          */
-        if ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.getPlatform()) === 'web') {
-            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+        if (capacitor?.getPlatform() === 'web') {
             return typeof navigator !== 'undefined' && navigator.vibrate !== undefined;
         }
         return true;

package/dist/collection/utils/native/keyboard.js

@@ -36,14 +36,14 @@ export var KeyboardResize;
 export const Keyboard = {
     getEngine() {
         const capacitor = getCapacitor();
-        if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('Keyboard')) {
+        if (capacitor?.isPluginAvailable('Keyboard')) {
             return capacitor.Plugins.Keyboard;
         }
         return undefined;
     },
     getResizeMode() {
         const engine = this.getEngine();
-        if (!(engine === null || engine === void 0 ? void 0 : engine.getResizeMode)) {
+        if (!engine?.getResizeMode) {
             return Promise.resolve(undefined);
         }
         return engine.getResizeMode().catch((e) => {

package/dist/collection/utils/native/status-bar.js

@@ -11,7 +11,7 @@ export var Style;
 export const StatusBar = {
     getEngine() {
         const capacitor = getCapacitor();
-        if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('StatusBar')) {
+        if (capacitor?.isPluginAvailable('StatusBar')) {
             return capacitor.Plugins.StatusBar;
         }
         return undefined;

package/dist/collection/utils/overlay-control-label.js

@@ -0,0 +1,45 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+// TODO(FW-6886, FW-6892, FW-6891): Remove this file in favor of the Modular Ionic component config. Each overlay will be able to select its own defaults for label placement and justify based on the interface and mode, so this utility will no longer be necessary.
+/**
+ * Returns the default `labelPlacement` for a radio or checkbox option
+ * rendered inside an overlay. Defaults follow each mode's established
+ * option-row layout:
+ * - `ios`: `"start"` for radio in `alert` and `popover`. The `modal`
+ *   interface flips iOS radio back to `"end"`. Checkbox is always
+ *   `"end"` on iOS.
+ * - everything else (e.g. `md`): `"end"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `select-popover` and `select-modal` as the fallback when an
+ * option doesn't explicitly set `labelPlacement`.
+ */
+export const getOverlayLabelPlacement = (mode, control, interfaceType) => {
+    if (mode === 'ios' && control === 'radio' && interfaceType !== 'modal') {
+        return 'start';
+    }
+    return 'end';
+};
+/**
+ * Returns the default `justify` for a radio or checkbox option rendered
+ * inside an overlay. Defaults follow each mode's option-row layout:
+ * - `ios`: `"space-between"` for radio in `alert` and `popover`. The
+ *   `modal` interface falls back to `"start"`. Checkbox is always `"start"`
+ *   on iOS.
+ * - everything else (e.g. `md`): `"start"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `select-popover` and `select-modal` as the fallback when an
+ * option doesn't explicitly set `justify`.
+ */
+export const getOverlayLabelJustify = (mode, control, interfaceType) => {
+    if (mode === 'ios' && control === 'radio' && interfaceType !== 'modal') {
+        return 'space-between';
+    }
+    return 'start';
+};