cax-design-system 2.8.5 → 3.0.1

package/README.md

@@ -1,46 +1,46 @@
-# Cax Design System
-
-You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-dxipdbmqpt.chromatic.com/)
-
-### Installation
-
-You can download cax design system using below command.
-
-```bash
-npm install cax-design-system
-
-```
-
-### Styles
-
-Import styles in your global css
-
-```css
-@import 'cax-design-system/resources/cax.scss';
-```
-
-### Assets
-
-Add assets from library to the assets array in build and test configurations in angular.json file
-
-```json
-{
-    "glob": "**/*",
-    "input": "node_modules/cax-design-system/resources",
-    "output": "/assets/"
-}
-```
-
-### Animations (if required)
-
-Import animations in providers array in app.config.ts
-
-```ts
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-export const appConfig: ApplicationConfig = {
-    providers: [provideAnimations()]
-};
-```
-
-With this setup you will be able to use all the modules from cax design system.
+# Cax Design System
+
+You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-kiqxmrarce.chromatic.com/)
+
+### Installation
+
+You can download cax design system using below command.
+
+```bash
+npm install cax-design-system
+
+```
+
+### Styles
+
+Import styles in your global css
+
+```css
+@import 'cax-design-system/resources/cax.scss';
+```
+
+### Assets
+
+Add assets from library to the assets array in build and test configurations in angular.json file
+
+```json
+{
+    "glob": "**/*",
+    "input": "node_modules/cax-design-system/resources",
+    "output": "/assets/"
+}
+```
+
+### Animations (if required)
+
+Import animations in providers array in app.config.ts
+
+```ts
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+    providers: [provideAnimations()]
+};
+```
+
+With this setup you will be able to use all the modules from cax design system.

package/accordion/index.d.ts

@@ -1,5 +1,288 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, AfterContentInit, OnDestroy, ElementRef, ChangeDetectorRef, EventEmitter, QueryList } from '@angular/core';
+import * as i7 from 'cax-design-system/api';
+import { BlockableUI, Header, CaxTemplate } from 'cax-design-system/api';
+import { Subscription } from 'rxjs';
+import * as i2 from '@angular/common';
+import * as i3 from 'cax-design-system/icons/chevronright';
+import * as i4 from 'cax-design-system/icons/chevrondown';
+import * as i5 from 'cax-design-system/icons/chevronleft';
+import * as i6 from 'cax-design-system/icons/chevronup';
+
 /**
- * Generated bundle index. Do not edit.
+ * Custom tab open event.
+ * @see {@link Accordion.onOpen}
+ * @group Events
  */
-/// <amd-module name="cax-design-system/accordion" />
-export * from './public_api';
+interface AccordionTabOpenEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+/**
+ * Custom tab close event.
+ * @see {@link Accordion.onClose}
+ * @extends {AccordionTabOpenEvent}
+ * @group Events
+ */
+interface AccordionTabCloseEvent extends AccordionTabOpenEvent {
+}
+/**
+ * Defines valid templates in Accordion.
+ * @group Templates
+ */
+interface AccordionTemplates {
+    /**
+     * Custom template of content.
+     */
+    content(): TemplateRef<any>;
+    /**
+     * Custom template of header.
+     */
+    header(): TemplateRef<any>;
+    /**
+     * Custom template of icon.
+     */
+    icon(context: {
+        /**
+         * Data of the selected.
+         */
+        $implicit: any;
+    }): TemplateRef<{
+        $implicit: any;
+    }>;
+}
+
+/**
+ * AccordionTab is a helper component for Accordion.
+ * @group Components
+ */
+declare class AccordionTab implements AfterContentInit, OnDestroy {
+    el: ElementRef;
+    changeDetector: ChangeDetectorRef;
+    extraLabel: string;
+    extraLabelStyle: {
+        [klass: string]: any;
+    };
+    /**
+     * Current id state as a string.
+     * @group Props
+     */
+    id: string | undefined;
+    /**
+     * Used to define the header of the tab.
+     * @group Props
+     */
+    header: string | undefined;
+    /**
+     * Inline style of the tab header.
+     * @group Props
+     */
+    headerStyle: {
+        [klass: string]: any;
+    } | null | undefined;
+    /**
+     * Inline style of the tab.
+     * @group Props
+     */
+    tabStyle: {
+        [klass: string]: any;
+    } | null | undefined;
+    /**
+     * Inline style of the tab content.
+     * @group Props
+     */
+    contentStyle: {
+        [klass: string]: any;
+    } | null | undefined;
+    /**
+     * Style class of the tab.
+     * @group Props
+     */
+    tabStyleClass: string | undefined;
+    /**
+     * Style class of the tab header.
+     * @group Props
+     */
+    headerStyleClass: string | undefined;
+    /**
+     * Style class of the tab content.
+     * @group Props
+     */
+    contentStyleClass: string | undefined;
+    /**
+     * Whether the tab is disabled.
+     * @group Props
+     */
+    disabled: boolean | undefined;
+    /**
+     * Whether a lazy loaded panel should avoid getting loaded again on reselection.
+     * @group Props
+     */
+    cache: boolean;
+    /**
+     * Transition options of the animation.
+     * @group Props
+     */
+    transitionOptions: string;
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    iconPos: 'end' | 'start';
+    /**
+     * The value that returns the selection.
+     * @group Props
+     */
+    get selected(): boolean;
+    accordionIconPosition: 'left' | 'right' | 'none';
+    set selected(val: boolean);
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    headerAriaLevel: number;
+    /**
+     * Event triggered by changing the choice.
+     * @param {boolean} value - Boolean value indicates that the option is changed.
+     * @group Emits
+     */
+    selectedChange: EventEmitter<boolean>;
+    headerFacet: QueryList<Header>;
+    templates: QueryList<CaxTemplate>;
+    private _selected;
+    get iconClass(): "cax-accordion-toggle-icon-end" | "cax-accordion-toggle-icon";
+    contentTemplate: TemplateRef<any> | undefined;
+    headerTemplate: TemplateRef<any> | undefined;
+    iconTemplate: TemplateRef<any> | undefined;
+    loaded: boolean;
+    accordion: Accordion;
+    constructor(accordion: Accordion, el: ElementRef, changeDetector: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    toggle(event?: MouseEvent | KeyboardEvent): boolean;
+    findTabIndex(): number;
+    get hasHeaderFacet(): boolean;
+    onKeydown(event: KeyboardEvent): void;
+    getTabHeaderActionId(tabId: any): string;
+    getTabContentId(tabId: any): string;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionTab, "cax-accordionTab", never, { "extraLabel": { "alias": "extraLabel"; "required": false; }; "extraLabelStyle": { "alias": "extraLabelStyle"; "required": false; }; "id": { "alias": "id"; "required": false; }; "header": { "alias": "header"; "required": false; }; "headerStyle": { "alias": "headerStyle"; "required": false; }; "tabStyle": { "alias": "tabStyle"; "required": false; }; "contentStyle": { "alias": "contentStyle"; "required": false; }; "tabStyleClass": { "alias": "tabStyleClass"; "required": false; }; "headerStyleClass": { "alias": "headerStyleClass"; "required": false; }; "contentStyleClass": { "alias": "contentStyleClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "cache": { "alias": "cache"; "required": false; }; "transitionOptions": { "alias": "transitionOptions"; "required": false; }; "iconPos": { "alias": "iconPos"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "accordionIconPosition": { "alias": "accordionIconPosition"; "required": false; }; "headerAriaLevel": { "alias": "headerAriaLevel"; "required": false; }; }, { "selectedChange": "selectedChange"; }, ["headerFacet", "templates"], ["cax-header", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_cache: unknown;
+    static ngAcceptInputType_headerAriaLevel: unknown;
+}
+/**
+ * Accordion groups a collection of contents in tabs.
+ * @group Components
+ */
+declare class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
+    el: ElementRef;
+    changeDetector: ChangeDetectorRef;
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     * @group Props
+     */
+    multiple: boolean;
+    /**
+     * Inline style of the tab header and content.
+     * @group Props
+     */
+    style: {
+        [klass: string]: any;
+    } | null | undefined;
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    styleClass: string | undefined;
+    /**
+     * Icon of a collapsed tab.
+     * @group Props
+     */
+    expandIcon: string | undefined;
+    /**
+     * Icon of an expanded tab.
+     * @group Props
+     */
+    collapseIcon: string | undefined;
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     * @group Props
+     */
+    get activeIndex(): number | number[] | null | undefined;
+    set activeIndex(val: number | number[] | null | undefined);
+    /**
+     * When enabled, the focused tab is activated.
+     * @group Props
+     */
+    selectOnFocus: boolean;
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    get headerAriaLevel(): number;
+    set headerAriaLevel(val: number);
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {AccordionTabCloseEvent} event - Custom tab close event.
+     * @group Emits
+     */
+    onClose: EventEmitter<AccordionTabCloseEvent>;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {AccordionTabOpenEvent} event - Custom tab open event.
+     * @group Emits
+     */
+    onOpen: EventEmitter<AccordionTabOpenEvent>;
+    /**
+     * Returns the active index.
+     * @param {number | number[]} value - New index.
+     * @group Emits
+     */
+    activeIndexChange: EventEmitter<number | number[]>;
+    tabList: QueryList<AccordionTab> | undefined;
+    tabListSubscription: Subscription | null;
+    private _activeIndex;
+    private _headerAriaLevel;
+    preventActiveIndexPropagation: boolean;
+    tabs: AccordionTab[];
+    constructor(el: ElementRef, changeDetector: ChangeDetectorRef);
+    onKeydown(event: any): void;
+    focusedElementIsAccordionHeader(): boolean;
+    onTabArrowDownKey(event: any): void;
+    onTabArrowUpKey(event: any): void;
+    onTabHomeKey(event: any): void;
+    changeFocusedTab(element: any): void;
+    findNextHeaderAction(tabElement: any, selfCheck?: boolean): any;
+    findPrevHeaderAction(tabElement: any, selfCheck?: boolean): any;
+    findFirstHeaderAction(): any;
+    findLastHeaderAction(): any;
+    onTabEndKey(event: any): void;
+    ngAfterContentInit(): void;
+    initTabs(): void;
+    getBlockableElement(): HTMLElement;
+    updateSelectionState(): void;
+    isTabActive(index: any): boolean;
+    getTabProp(tab: any, name: any): any;
+    updateActiveIndex(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Accordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Accordion, "cax-accordion", never, { "multiple": { "alias": "multiple"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "headerAriaLevel": { "alias": "headerAriaLevel"; "required": false; }; }, { "onClose": "onClose"; "onOpen": "onOpen"; "activeIndexChange": "activeIndexChange"; }, ["tabList"], ["*"], false, never>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_selectOnFocus: unknown;
+}
+
+declare class AccordionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AccordionModule, [typeof Accordion, typeof AccordionTab], [typeof i2.CommonModule, typeof i3.ChevronRightIcon, typeof i4.ChevronDownIcon, typeof i5.ChevronLeftIcon, typeof i6.ChevronUpIcon], [typeof Accordion, typeof AccordionTab, typeof i7.SharedModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AccordionModule>;
+}
+
+export { Accordion, AccordionModule, AccordionTab };
+export type { AccordionTabCloseEvent, AccordionTabOpenEvent, AccordionTemplates };

package/animate/index.d.ts

@@ -1,5 +1,43 @@
+import * as i0 from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import * as i1 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
+ * @group Components
  */
-/// <amd-module name="cax-design-system/animate" />
-export * from './public_api';
+declare class Animate implements OnInit, AfterViewInit {
+    private host;
+    el: ElementRef;
+    renderer: Renderer2;
+    /**
+     * Selector to define the CSS class for enter animation.
+     * @group Props
+     */
+    enterClass: string | undefined;
+    /**
+     * Selector to define the CSS class for leave animation.
+     * @group Props
+     */
+    leaveClass: string | undefined;
+    observer: IntersectionObserver | undefined;
+    timeout: any;
+    constructor(host: ElementRef, el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    bindIntersectionObserver(): void;
+    isVisible(element: IntersectionObserverEntry[]): void;
+    enter(): void;
+    leave(): void;
+    unbindIntersectionObserver(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Animate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Animate, "[pAnimate]", never, { "enterClass": { "alias": "enterClass"; "required": false; }; "leaveClass": { "alias": "leaveClass"; "required": false; }; }, {}, never, never, false, never>;
+}
+declare class AnimateModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimateModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AnimateModule, [typeof Animate], [typeof i1.CommonModule], [typeof Animate]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AnimateModule>;
+}
+
+export { Animate, AnimateModule };

package/animateonscroll/index.d.ts

@@ -1,5 +1,77 @@
+import * as i0 from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import * as i1 from '@angular/common';
+
+interface AnimateOnScrollOptions {
+    root?: HTMLElement;
+    rootMargin?: string;
+    threshold?: number;
+}
 /**
- * Generated bundle index. Do not edit.
+ * AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
+ * @group Components
  */
-/// <amd-module name="cax-design-system/animateonscroll" />
-export * from './public_api';
+declare class AnimateOnScroll implements OnInit, AfterViewInit {
+    private document;
+    private platformId;
+    private host;
+    el: ElementRef;
+    renderer: Renderer2;
+    /**
+     * Selector to define the CSS class for enter animation.
+     * @group Props
+     */
+    enterClass: string | undefined;
+    /**
+     * Selector to define the CSS class for leave animation.
+     * @group Props
+     */
+    leaveClass: string | undefined;
+    /**
+     * Specifies the root option of the IntersectionObserver API.
+     * @group Props
+     */
+    root: HTMLElement | undefined | null;
+    /**
+     * Specifies the rootMargin option of the IntersectionObserver API.
+     * @group Props
+     */
+    rootMargin: string | undefined;
+    /**
+     * Specifies the threshold option of the IntersectionObserver API
+     * @group Props
+     */
+    threshold: number | undefined;
+    /**
+     * Whether the scroll event listener should be removed after initial run.
+     * @group Props
+     */
+    once: boolean;
+    observer: IntersectionObserver | undefined;
+    resetObserver: any;
+    isObserverActive: boolean;
+    animationState: any;
+    animationEndListener: VoidFunction | undefined;
+    constructor(document: Document, platformId: any, host: ElementRef, el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    get options(): AnimateOnScrollOptions;
+    bindIntersectionObserver(): void;
+    enter(): void;
+    leave(): void;
+    bindAnimationEvents(): void;
+    unbindAnimationEvents(): void;
+    unbindIntersectionObserver(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimateOnScroll, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnimateOnScroll, "[pAnimateOnScroll]", never, { "enterClass": { "alias": "enterClass"; "required": false; }; "leaveClass": { "alias": "leaveClass"; "required": false; }; "root": { "alias": "root"; "required": false; }; "rootMargin": { "alias": "rootMargin"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "once": { "alias": "once"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_threshold: unknown;
+    static ngAcceptInputType_once: unknown;
+}
+declare class AnimateOnScrollModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimateOnScrollModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AnimateOnScrollModule, [typeof AnimateOnScroll], [typeof i1.CommonModule], [typeof AnimateOnScroll]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AnimateOnScrollModule>;
+}
+
+export { AnimateOnScroll, AnimateOnScrollModule };