@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/types/components/xpl-spotlight/spotlight.stories.d.ts

@@ -0,0 +1,197 @@
+interface SpotlightStoryArgs {
+    showActions: boolean;
+    actionLayout: 'default' | 'dual' | 'single';
+    anchorPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    body: string;
+    currentStep: number;
+    heading: string;
+    isDismissible: boolean;
+    isOpen: boolean;
+    primaryActionLabel: string;
+    secondaryActionLabel: string;
+    showImage: boolean;
+    showSteps: boolean;
+    target: string;
+    totalSteps: number;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        showActions: {
+            control: "boolean";
+            description: string;
+        };
+        actionLayout: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            description: string;
+            if: {
+                arg: string;
+            };
+        };
+        anchorPosition: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        body: {
+            control: "text";
+            description: string;
+        };
+        currentStep: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+        heading: {
+            control: "text";
+            description: string;
+        };
+        isDismissible: {
+            control: "boolean";
+            description: string;
+        };
+        isOpen: {
+            control: "boolean";
+            description: string;
+        };
+        primaryActionLabel: {
+            control: "text";
+            description: string;
+        };
+        secondaryActionLabel: {
+            control: "text";
+            description: string;
+        };
+        showImage: {
+            control: "boolean";
+            description: string;
+        };
+        showSteps: {
+            control: "boolean";
+            description: string;
+        };
+        target: {
+            control: "text";
+            description: string;
+        };
+        totalSteps: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Spotlight: {
+    ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, target, totalSteps, }: SpotlightStoryArgs): string;
+    args: {
+        showActions: true;
+        actionLayout: "default";
+        anchorPosition: "top-left";
+        body: string;
+        currentStep: number;
+        heading: string;
+        isDismissible: true;
+        isOpen: true;
+        primaryActionLabel: string;
+        secondaryActionLabel: string;
+        showImage: true;
+        showSteps: true;
+        target: string;
+        totalSteps: number;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+    };
+};
+export declare const WithMediaSlot: {
+    ({ showActions, actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showImage, showSteps, target, totalSteps, }: SpotlightStoryArgs): string;
+    args: {
+        showActions: true;
+        actionLayout: "default";
+        anchorPosition: "top-left";
+        body: string;
+        currentStep: number;
+        heading: string;
+        isDismissible: true;
+        isOpen: true;
+        primaryActionLabel: string;
+        secondaryActionLabel: string;
+        showImage: true;
+        showSteps: true;
+        target: string;
+        totalSteps: number;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+    };
+};
+export declare const TargetClickToggle: {
+    ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, totalSteps, }: SpotlightStoryArgs): string;
+    args: {
+        showActions: true;
+        actionLayout: "single";
+        anchorPosition: "bottom-right";
+        body: string;
+        currentStep: number;
+        heading: string;
+        isDismissible: true;
+        isOpen: false;
+        primaryActionLabel: string;
+        secondaryActionLabel: string;
+        showImage: false;
+        showSteps: false;
+        target: string;
+        totalSteps: number;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+    };
+};

package/dist/types/components/xpl-spotlight/xpl-spotlight.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SpotlightAnchorPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type SpotlightActionLayout = 'default' | 'dual' | 'single';
+export declare class Spotlight {
+    private cleanupAutoUpdate;
+    private enterVisibleFrameId;
+    private focusAbort;
+    private focusFrameId;
+    private hasCompletedInitialLoad;
+    private readonly headingId;
+    private pendingEnterTransitionAfterAnchor;
+    private pendingEnterVisible;
+    private positioningGeneration;
+    private previousFocus;
+    private referenceEl;
+    private shouldMoveFocusOnRender;
+    private shouldReinitializeAfterReconnect;
+    private slotContentObserver;
+    el: HTMLXplSpotlightElement;
+    private hasBodySlotContent;
+    private hasFloatingPosition;
+    private hasImageSlotContent;
+    private hasTitleSlotContent;
+    private isVisible;
+    private resolvedAnchorPosition;
+    actionLayout: SpotlightActionLayout;
+    anchorPosition: SpotlightAnchorPosition;
+    onAnchorPositionChange(): void;
+    body?: string;
+    currentStep: number;
+    heading?: string;
+    isDismissible: boolean;
+    isOpen: boolean;
+    onIsOpenChange(isOpen: boolean): void;
+    primaryActionLabel: string;
+    secondaryActionLabel: string;
+    showActions: boolean;
+    showImage: boolean;
+    showSteps: boolean;
+    target?: string;
+    onTargetChange(): void;
+    totalSteps: number;
+    dismiss: EventEmitter<void>;
+    primaryAction: EventEmitter<void>;
+    secondaryAction: EventEmitter<void>;
+    targetClick: EventEmitter<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    handleKeyDown(ev: KeyboardEvent): void;
+    private emitDismiss;
+    private handleDismissClick;
+    private handlePrimaryClick;
+    private handleSecondaryClick;
+    private handleTargetClick;
+    private get effectiveTotalSteps();
+    private get effectiveCurrentStep();
+    private get isDismissibleEnabled();
+    private get isOpenEnabled();
+    private get isSingleActionLayout();
+    private get usesHiddenEdgeActions();
+    private get isPrimaryStepActionDisabled();
+    private get isSecondaryStepActionDisabled();
+    private get shouldShowPrimaryAction();
+    private get shouldShowSecondaryAction();
+    private get hasRenderableFocusChrome();
+    private get showActionsEnabled();
+    private get showImageEnabled();
+    private get showStepsEnabled();
+    private get headingPropHasText();
+    private get bodyPropHasText();
+    private focusInitial;
+    private shouldHandleDismissKeyboardEvent;
+    private restoreFocus;
+    private cancelPendingFocusWait;
+    private cancelEnterTransition;
+    private scheduleEnterTransition;
+    private getFirstTitleSlottedElement;
+    private syncTitleSlotIds;
+    private getDialogLabelId;
+    private handleBodySlotChange;
+    private handleTitleSlotChange;
+    private refreshBodySlotState;
+    private refreshTitleSlotState;
+    private handleImageSlotChange;
+    private handleSlotContentMutation;
+    private static coerceBoolean;
+    private refreshImageSlotState;
+    private startSlotContentObserver;
+    private stopSlotContentObserver;
+    private hasSlottedContent;
+    private startPositioning;
+    private detachFloatingUiListeners;
+    private resetFloatingHostPosition;
+    private clearFloatingHostCoordinates;
+    private stopPositioning;
+    private updatePosition;
+    render(): any;
+}

package/dist/types/components/xpl-tab/xpl-tab.d.ts

@@ -1,8 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Tab {
-    target: string;
+    el: HTMLElement;
+    disabled: boolean;
+    fullWidth: boolean;
+    groupDisabled: boolean;
+    icon?: string;
+    iconPosition: 'start' | 'end';
     selected: boolean;
+    target: string;
+    variant: 'tabs' | 'segment';
     tabChange: EventEmitter<string>;
+    getFocusableElement(): Promise<HTMLButtonElement | null>;
+    setTabIndex(value: number): Promise<void>;
+    focusTrigger(): Promise<void>;
+    private get a11yIds();
+    private get effectivelyDisabled();
+    private get isSegment();
     private handleTabClick;
     render(): any;
 }

package/dist/types/components/xpl-tab-panel/xpl-tab-panel.d.ts

@@ -1,5 +1,6 @@
 export declare class TabPanel {
-    target: string;
+    el: HTMLElement;
     selected: boolean;
+    target: string;
     render(): any;
 }

package/dist/types/components/xpl-tabs/segment-control.stories.d.ts

@@ -0,0 +1,112 @@
+import { type TabsStoryArgs, type TabsStoryRenderContext } from './tabs.shared';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        type: {
+            table: {
+                disable: true;
+            };
+            options: string[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        disabled: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        fullWidth: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        value: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        tabCount: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        tabDisabled: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        icon: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        iconPosition: {
+            table: {
+                category: string;
+            };
+            options: string[];
+            control: {
+                type: "radio";
+            };
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const SegmentControl: {
+    (args: TabsStoryArgs, context?: TabsStoryRenderContext): string;
+    args: TabsStoryArgs;
+    parameters: {
+        layout: string;
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};

package/dist/types/components/xpl-tabs/tabs.shared.d.ts

@@ -0,0 +1,156 @@
+export interface TabsStoryArgs {
+    type: 'tabs' | 'segment';
+    disabled: boolean;
+    fullWidth: boolean;
+    value: string;
+    tabCount: number;
+    tabDisabled: boolean;
+    icon: string;
+    iconPosition: 'start' | 'end';
+}
+export declare function escapeHtmlAttr(value: string): string;
+export declare function clampTabCount(n: number): number;
+export declare function coerceTabsStoryValue(args: TabsStoryArgs): string;
+export declare function buildTabsMarkup(args: TabsStoryArgs): string;
+export interface TabsStoryRenderContext {
+    updateArgs?: (next: Partial<TabsStoryArgs>) => void;
+}
+export declare function renderTabsStoryMarkup(args: TabsStoryArgs, context?: TabsStoryRenderContext): string;
+export declare const tabsPlainDomUnderlineStoryHtml = "<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->\n<div class=\"xpl-tabs\" data-tabs-instance-id=\"xpl-tg-1\">\n    <xpl-select class-names=\"xpl-tabs__mobile-select\" selected-values=\"tab0\"></xpl-select>\n    <nav class=\"xpl-tabs__headings\" role=\"tablist\" aria-orientation=\"horizontal\">\n        <div class=\"xpl-tabs__active-bar\"></div>\n        <div class=\"xpl-tab xpl-tab--selected\">\n            <button class=\"xpl-tab__button\" type=\"button\" role=\"tab\" id=\"xpl-tg-1-tab-tab0\" aria-controls=\"xpl-tg-1-panel-tab0\" aria-selected=\"true\">Tab 1</button>\n        </div>\n        <div class=\"xpl-tab\">\n            <button class=\"xpl-tab__button\" type=\"button\" role=\"tab\" id=\"xpl-tg-1-tab-tab1\" aria-controls=\"xpl-tg-1-panel-tab1\" aria-selected=\"false\">Tab 2</button>\n        </div>\n    </nav>\n    <div class=\"xpl-tabs__panels\">\n        <div class=\"xpl-tab-panel xpl-tab-panel--selected\" role=\"tabpanel\" id=\"xpl-tg-1-panel-tab0\" aria-labelledby=\"xpl-tg-1-tab-tab0\">Content for tab 1</div>\n        <div class=\"xpl-tab-panel\" role=\"tabpanel\" id=\"xpl-tg-1-panel-tab1\" aria-labelledby=\"xpl-tg-1-tab-tab1\">Content for tab 2</div>\n    </div>\n</div>";
+export declare const tabsPlainDomSegmentStoryHtml = "<---- Segment (type='segment'): Stencil renders xpl-tab.xpl-tab--segment > xpl-button; xpl-tab assigns id, role, and aria-* on the inner native <button>. Plain buttons below only illustrate tablist \u2194 tabpanel id wiring (not .xpl-tab__button). ---->\n<div class=\"xpl-tabs xpl-tabs--segment\" data-tabs-instance-id=\"xpl-tg-2\">\n    <xpl-select class-names=\"xpl-tabs__mobile-select\" selected-values=\"tab0\"></xpl-select>\n    <nav class=\"xpl-tabs__headings\" role=\"tablist\" aria-orientation=\"horizontal\">\n        <div class=\"xpl-tab xpl-tab--segment xpl-tab--selected\">\n            <button type=\"button\" role=\"tab\" id=\"xpl-tg-2-tab-tab0\" aria-controls=\"xpl-tg-2-panel-tab0\" aria-selected=\"true\">Segment 1</button>\n        </div>\n        <div class=\"xpl-tab xpl-tab--segment\">\n            <button type=\"button\" role=\"tab\" id=\"xpl-tg-2-tab-tab1\" aria-controls=\"xpl-tg-2-panel-tab1\" aria-selected=\"false\">Segment 2</button>\n        </div>\n    </nav>\n    <div class=\"xpl-tabs__panels\">\n        <div class=\"xpl-tab-panel xpl-tab-panel--selected\" role=\"tabpanel\" id=\"xpl-tg-2-panel-tab0\" aria-labelledby=\"xpl-tg-2-tab-tab0\">Content for segment 1</div>\n        <div class=\"xpl-tab-panel\" role=\"tabpanel\" id=\"xpl-tg-2-panel-tab1\" aria-labelledby=\"xpl-tg-2-tab-tab1\">Content for segment 2</div>\n    </div>\n</div>";
+export declare const tabsStoryBaseArgTypes: {
+    type: {
+        options: string[];
+        control: {
+            type: "select";
+        };
+        description: string;
+    };
+    disabled: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    fullWidth: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    value: {
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    tabCount: {
+        control: {
+            type: "number";
+            min: number;
+            max: number;
+            step: number;
+        };
+        description: string;
+    };
+    tabDisabled: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    icon: {
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    iconPosition: {
+        options: string[];
+        control: {
+            type: "radio";
+        };
+        description: string;
+    };
+};
+export declare const segmentControlStoryArgTypes: {
+    type: {
+        table: {
+            disable: true;
+        };
+        options: string[];
+        control: {
+            type: "select";
+        };
+        description: string;
+    };
+    disabled: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    fullWidth: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    value: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    tabCount: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "number";
+            min: number;
+            max: number;
+            step: number;
+        };
+        description: string;
+    };
+    tabDisabled: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    icon: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    iconPosition: {
+        table: {
+            category: string;
+        };
+        options: string[];
+        control: {
+            type: "radio";
+        };
+        description: string;
+    };
+};
+export declare const tabsUnderlineDefaultArgs: TabsStoryArgs;
+export declare const segmentControlDefaultArgs: TabsStoryArgs;

package/dist/types/components/xpl-tabs/tabs.stories.d.ts

@@ -1,40 +1,93 @@
+import { type TabsStoryArgs, type TabsStoryRenderContext } from './tabs.shared';
 declare const _default: {
     title: string;
+    component: string;
     parameters: {
         actions: {
             handles: string[];
         };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     argTypes: {
-        tabsLength: {
+        type: {
+            table: {
+                disable: true;
+            };
+            options: string[];
             control: {
-                type: "number";
+                type: "select";
+            };
+            description: string;
+        };
+        icon: {
+            table: {
+                disable: true;
+            };
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        iconPosition: {
+            table: {
+                disable: true;
+            };
+            options: string[];
+            control: {
+                type: "radio";
+            };
+            description: string;
+        };
+        disabled: {
+            control: {
+                type: "boolean";
             };
+            description: string;
         };
         fullWidth: {
             control: {
                 type: "boolean";
             };
+            description: string;
+        };
+        value: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        tabCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        tabDisabled: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
         };
     };
 };
 export default _default;
 export declare const Tabs: {
-    ({ tabsLength, fullWidth }: {
-        tabsLength: any;
-        fullWidth: any;
-    }): string;
-    args: {
-        tabsLength: number;
-        fullWidth: boolean;
-    };
+    (args: TabsStoryArgs, context?: TabsStoryRenderContext): string;
+    args: TabsStoryArgs;
     parameters: {
         layout: string;
         'web-component': {
-            render: string[];
+            render: string;
         };
         html: {
-            render: string[];
+            render: string;
         };
         design: {
             type: string;