cax-design-system 2.8.5 → 3.0.1

package/fesm2022/cax-design-system-styleclass.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-styleclass.mjs","sources":["../../src/app/components/styleclass/styleclass.ts","../../src/app/components/styleclass/cax-design-system-styleclass.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Directive, ElementRef, HostListener, Input, NgModule, NgZone, OnDestroy, Renderer2, booleanAttribute } from '@angular/core';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { VoidListener } from 'cax-design-system/ts-helpers';\n/**\n * StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.\n * @group Components\n */\n@Directive({\n    selector: '[pStyleClass]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class StyleClass implements OnDestroy {\n    constructor(\n        public el: ElementRef,\n        public renderer: Renderer2,\n        private zone: NgZone\n    ) {}\n    /**\n     * Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.\n     * @group Props\n     */\n    @Input('pStyleClass') selector: string | undefined;\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     * @deprecated Use enterFromClass instead\n     */\n    @Input() set enterClass(value: string) {\n        this._enterClass = value;\n        console.warn('enterClass is deprecated, use enterFromClass instead');\n    }\n    get enterClass() {\n        return this._enterClass;\n    }\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     */\n    @Input() enterFromClass: string | undefined;\n    /**\n     * Style class to add during enter animation.\n     * @group Props\n     */\n    @Input() enterActiveClass: string | undefined;\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     */\n    @Input() enterToClass: string | undefined;\n    /**\n     * Style class to add when item begins to get hidden.\n     * @group Props\n     * @deprecated Use leaveFromClass instead\n     */\n    @Input() set leaveClass(value: string) {\n        this._leaveClass = value;\n        console.warn('leaveClass is deprecated, use leaveFromClass instead');\n    }\n    get leaveClass() {\n        return this._leaveClass;\n    }\n    /**\n     * Style class to add when item begins to get hidden.\n     * @group Props\n     */\n    @Input() leaveFromClass: string | undefined;\n    /**\n     * Style class to add during leave animation.\n     * @group Props\n     */\n    @Input() leaveActiveClass: string | undefined;\n    /**\n     * Style class to add when leave animation is completed.\n     * @group Props\n     */\n    @Input() leaveToClass: string | undefined;\n    /**\n     * Whether to trigger leave animation when outside of the element is clicked.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) hideOnOutsideClick: boolean | undefined;\n    /**\n     * Adds or removes a class when no enter-leave animation is required.\n     * @group Props\n     */\n    @Input() toggleClass: string | undefined;\n    /**\n     * Whether to trigger leave animation when escape key pressed.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) hideOnEscape: boolean | undefined;\n\n    eventListener: VoidListener;\n\n    documentClickListener: VoidListener;\n\n    documentKeydownListener: VoidListener;\n\n    target: HTMLElement | null | undefined;\n\n    enterListener: VoidListener;\n\n    leaveListener: VoidListener;\n\n    animating: boolean | undefined;\n\n    _enterClass: string | undefined;\n\n    _leaveClass: string | undefined;\n\n    @HostListener('click', ['$event'])\n    clickListener() {\n        this.target = this.resolveTarget();\n\n        if (this.toggleClass) {\n            this.toggle();\n        } else {\n            if ((this.target as HTMLElement).offsetParent === null) this.enter();\n            else this.leave();\n        }\n    }\n\n    toggle() {\n        if (DomHandler.hasClass(this.target, this.toggleClass as string)) DomHandler.removeClass(this.target, this.toggleClass as string);\n        else DomHandler.addClass(this.target, this.toggleClass as string);\n    }\n\n    enter() {\n        if (this.enterActiveClass) {\n            if (!this.animating) {\n                this.animating = true;\n\n                if (this.enterActiveClass === 'slidedown') {\n                    (this.target as HTMLElement).style.height = '0px';\n                    DomHandler.removeClass(this.target, 'hidden');\n                    (this.target as HTMLElement).style.maxHeight = (this.target as HTMLElement).scrollHeight + 'px';\n                    DomHandler.addClass(this.target, 'hidden');\n                    (this.target as HTMLElement).style.height = '';\n                }\n\n                DomHandler.addClass(this.target, this.enterActiveClass);\n                if (this.enterClass || this.enterFromClass) {\n                    DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);\n                }\n\n                this.enterListener = this.renderer.listen(this.target, 'animationend', () => {\n                    DomHandler.removeClass(this.target, this.enterActiveClass as string);\n                    if (this.enterToClass) {\n                        DomHandler.addClass(this.target, this.enterToClass);\n                    }\n                    this.enterListener && this.enterListener();\n\n                    if (this.enterActiveClass === 'slidedown') {\n                        (this.target as HTMLElement).style.maxHeight = '';\n                    }\n                    this.animating = false;\n                });\n            }\n        } else {\n            if (this.enterClass || this.enterFromClass) {\n                DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);\n            }\n\n            if (this.enterToClass) {\n                DomHandler.addClass(this.target, this.enterToClass);\n            }\n        }\n\n        if (this.hideOnOutsideClick) {\n            this.bindDocumentClickListener();\n        }\n\n        if (this.hideOnEscape) {\n            this.bindDocumentKeydownListener();\n        }\n    }\n\n    leave() {\n        if (this.leaveActiveClass) {\n            if (!this.animating) {\n                this.animating = true;\n                DomHandler.addClass(this.target, this.leaveActiveClass);\n                if (this.leaveClass || this.leaveFromClass) {\n                    DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);\n                }\n\n                this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {\n                    DomHandler.removeClass(this.target, this.leaveActiveClass as string);\n                    if (this.leaveToClass) {\n                        DomHandler.addClass(this.target, this.leaveToClass);\n                    }\n                    this.leaveListener && this.leaveListener();\n                    this.animating = false;\n                });\n            }\n        } else {\n            if (this.leaveClass || this.leaveFromClass) {\n                DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);\n            }\n\n            if (this.leaveToClass) {\n                DomHandler.addClass(this.target, this.leaveToClass);\n            }\n        }\n\n        if (this.hideOnOutsideClick) {\n            this.unbindDocumentClickListener();\n        }\n\n        if (this.hideOnEscape) {\n            this.unbindDocumentKeydownListener();\n        }\n    }\n\n    resolveTarget() {\n        if (this.target) {\n            return this.target;\n        }\n\n        switch (this.selector) {\n            case '@next':\n                return this.el.nativeElement.nextElementSibling;\n\n            case '@prev':\n                return this.el.nativeElement.previousElementSibling;\n\n            case '@parent':\n                return this.el.nativeElement.parentElement;\n\n            case '@grandparent':\n                return this.el.nativeElement.parentElement.parentElement;\n\n            default:\n                return document.querySelector(this.selector as string);\n        }\n    }\n\n    bindDocumentClickListener() {\n        if (!this.documentClickListener) {\n            this.documentClickListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', (event) => {\n                if (!this.isVisible() || getComputedStyle(this.target as HTMLElement).getPropertyValue('position') === 'static') this.unbindDocumentClickListener();\n                else if (this.isOutsideClick(event)) this.leave();\n            });\n        }\n    }\n\n    bindDocumentKeydownListener() {\n        if (!this.documentKeydownListener) {\n            this.zone.runOutsideAngular(() => {\n                this.documentKeydownListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'keydown', (event) => {\n                    const { key, keyCode, which, type } = event;\n                    if (!this.isVisible() || getComputedStyle(this.target as HTMLElement).getPropertyValue('position') === 'static') this.unbindDocumentKeydownListener();\n                    if (this.isVisible() && key === 'Escape' && keyCode === 27 && which === 27) this.leave();\n                });\n            });\n        }\n    }\n\n    isVisible() {\n        return (this.target as HTMLElement).offsetParent !== null;\n    }\n\n    isOutsideClick(event: MouseEvent) {\n        return !this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !(this.target as HTMLElement).contains(<HTMLElement>event.target);\n    }\n\n    unbindDocumentClickListener() {\n        if (this.documentClickListener) {\n            this.documentClickListener();\n            this.documentClickListener = null;\n        }\n    }\n\n    unbindDocumentKeydownListener() {\n        if (this.documentKeydownListener) {\n            this.documentKeydownListener();\n            this.documentKeydownListener = null;\n        }\n    }\n\n    ngOnDestroy() {\n        this.target = null;\n        if (this.eventListener) {\n            this.eventListener();\n        }\n        this.unbindDocumentClickListener();\n        this.unbindDocumentKeydownListener();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [StyleClass],\n    declarations: [StyleClass]\n})\nexport class StyleClassModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-styleclass.mjs","sources":["../../src/app/components/styleclass/styleclass.ts","../../src/app/components/styleclass/cax-design-system-styleclass.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Directive, ElementRef, HostListener, Input, NgModule, NgZone, OnDestroy, Renderer2, booleanAttribute } from '@angular/core';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { VoidListener } from 'cax-design-system/ts-helpers';\n/**\n * StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.\n * @group Components\n */\n@Directive({\n    selector: '[pStyleClass]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class StyleClass implements OnDestroy {\n    constructor(\n        public el: ElementRef,\n        public renderer: Renderer2,\n        private zone: NgZone\n    ) {}\n    /**\n     * Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.\n     * @group Props\n     */\n    @Input('pStyleClass') selector: string | undefined;\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     * @deprecated Use enterFromClass instead\n     */\n    @Input() set enterClass(value: string) {\n        this._enterClass = value;\n        console.warn('enterClass is deprecated, use enterFromClass instead');\n    }\n    get enterClass() {\n        return this._enterClass;\n    }\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     */\n    @Input() enterFromClass: string | undefined;\n    /**\n     * Style class to add during enter animation.\n     * @group Props\n     */\n    @Input() enterActiveClass: string | undefined;\n    /**\n     * Style class to add when item begins to get displayed.\n     * @group Props\n     */\n    @Input() enterToClass: string | undefined;\n    /**\n     * Style class to add when item begins to get hidden.\n     * @group Props\n     * @deprecated Use leaveFromClass instead\n     */\n    @Input() set leaveClass(value: string) {\n        this._leaveClass = value;\n        console.warn('leaveClass is deprecated, use leaveFromClass instead');\n    }\n    get leaveClass() {\n        return this._leaveClass;\n    }\n    /**\n     * Style class to add when item begins to get hidden.\n     * @group Props\n     */\n    @Input() leaveFromClass: string | undefined;\n    /**\n     * Style class to add during leave animation.\n     * @group Props\n     */\n    @Input() leaveActiveClass: string | undefined;\n    /**\n     * Style class to add when leave animation is completed.\n     * @group Props\n     */\n    @Input() leaveToClass: string | undefined;\n    /**\n     * Whether to trigger leave animation when outside of the element is clicked.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) hideOnOutsideClick: boolean | undefined;\n    /**\n     * Adds or removes a class when no enter-leave animation is required.\n     * @group Props\n     */\n    @Input() toggleClass: string | undefined;\n    /**\n     * Whether to trigger leave animation when escape key pressed.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) hideOnEscape: boolean | undefined;\n\n    eventListener: VoidListener;\n\n    documentClickListener: VoidListener;\n\n    documentKeydownListener: VoidListener;\n\n    target: HTMLElement | null | undefined;\n\n    enterListener: VoidListener;\n\n    leaveListener: VoidListener;\n\n    animating: boolean | undefined;\n\n    _enterClass: string | undefined;\n\n    _leaveClass: string | undefined;\n\n    @HostListener('click', ['$event'])\n    clickListener() {\n        this.target = this.resolveTarget();\n\n        if (this.toggleClass) {\n            this.toggle();\n        } else {\n            if ((this.target as HTMLElement).offsetParent === null) this.enter();\n            else this.leave();\n        }\n    }\n\n    toggle() {\n        if (DomHandler.hasClass(this.target, this.toggleClass as string)) DomHandler.removeClass(this.target, this.toggleClass as string);\n        else DomHandler.addClass(this.target, this.toggleClass as string);\n    }\n\n    enter() {\n        if (this.enterActiveClass) {\n            if (!this.animating) {\n                this.animating = true;\n\n                if (this.enterActiveClass === 'slidedown') {\n                    (this.target as HTMLElement).style.height = '0px';\n                    DomHandler.removeClass(this.target, 'hidden');\n                    (this.target as HTMLElement).style.maxHeight = (this.target as HTMLElement).scrollHeight + 'px';\n                    DomHandler.addClass(this.target, 'hidden');\n                    (this.target as HTMLElement).style.height = '';\n                }\n\n                DomHandler.addClass(this.target, this.enterActiveClass);\n                if (this.enterClass || this.enterFromClass) {\n                    DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);\n                }\n\n                this.enterListener = this.renderer.listen(this.target, 'animationend', () => {\n                    DomHandler.removeClass(this.target, this.enterActiveClass as string);\n                    if (this.enterToClass) {\n                        DomHandler.addClass(this.target, this.enterToClass);\n                    }\n                    this.enterListener && this.enterListener();\n\n                    if (this.enterActiveClass === 'slidedown') {\n                        (this.target as HTMLElement).style.maxHeight = '';\n                    }\n                    this.animating = false;\n                });\n            }\n        } else {\n            if (this.enterClass || this.enterFromClass) {\n                DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);\n            }\n\n            if (this.enterToClass) {\n                DomHandler.addClass(this.target, this.enterToClass);\n            }\n        }\n\n        if (this.hideOnOutsideClick) {\n            this.bindDocumentClickListener();\n        }\n\n        if (this.hideOnEscape) {\n            this.bindDocumentKeydownListener();\n        }\n    }\n\n    leave() {\n        if (this.leaveActiveClass) {\n            if (!this.animating) {\n                this.animating = true;\n                DomHandler.addClass(this.target, this.leaveActiveClass);\n                if (this.leaveClass || this.leaveFromClass) {\n                    DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);\n                }\n\n                this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {\n                    DomHandler.removeClass(this.target, this.leaveActiveClass as string);\n                    if (this.leaveToClass) {\n                        DomHandler.addClass(this.target, this.leaveToClass);\n                    }\n                    this.leaveListener && this.leaveListener();\n                    this.animating = false;\n                });\n            }\n        } else {\n            if (this.leaveClass || this.leaveFromClass) {\n                DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);\n            }\n\n            if (this.leaveToClass) {\n                DomHandler.addClass(this.target, this.leaveToClass);\n            }\n        }\n\n        if (this.hideOnOutsideClick) {\n            this.unbindDocumentClickListener();\n        }\n\n        if (this.hideOnEscape) {\n            this.unbindDocumentKeydownListener();\n        }\n    }\n\n    resolveTarget() {\n        if (this.target) {\n            return this.target;\n        }\n\n        switch (this.selector) {\n            case '@next':\n                return this.el.nativeElement.nextElementSibling;\n\n            case '@prev':\n                return this.el.nativeElement.previousElementSibling;\n\n            case '@parent':\n                return this.el.nativeElement.parentElement;\n\n            case '@grandparent':\n                return this.el.nativeElement.parentElement.parentElement;\n\n            default:\n                return document.querySelector(this.selector as string);\n        }\n    }\n\n    bindDocumentClickListener() {\n        if (!this.documentClickListener) {\n            this.documentClickListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', (event) => {\n                if (!this.isVisible() || getComputedStyle(this.target as HTMLElement).getPropertyValue('position') === 'static') this.unbindDocumentClickListener();\n                else if (this.isOutsideClick(event)) this.leave();\n            });\n        }\n    }\n\n    bindDocumentKeydownListener() {\n        if (!this.documentKeydownListener) {\n            this.zone.runOutsideAngular(() => {\n                this.documentKeydownListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'keydown', (event) => {\n                    const { key, keyCode, which, type } = event;\n                    if (!this.isVisible() || getComputedStyle(this.target as HTMLElement).getPropertyValue('position') === 'static') this.unbindDocumentKeydownListener();\n                    if (this.isVisible() && key === 'Escape' && keyCode === 27 && which === 27) this.leave();\n                });\n            });\n        }\n    }\n\n    isVisible() {\n        return (this.target as HTMLElement).offsetParent !== null;\n    }\n\n    isOutsideClick(event: MouseEvent) {\n        return !this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !(this.target as HTMLElement).contains(<HTMLElement>event.target);\n    }\n\n    unbindDocumentClickListener() {\n        if (this.documentClickListener) {\n            this.documentClickListener();\n            this.documentClickListener = null;\n        }\n    }\n\n    unbindDocumentKeydownListener() {\n        if (this.documentKeydownListener) {\n            this.documentKeydownListener();\n            this.documentKeydownListener = null;\n        }\n    }\n\n    ngOnDestroy() {\n        this.target = null;\n        if (this.eventListener) {\n            this.eventListener();\n        }\n        this.unbindDocumentClickListener();\n        this.unbindDocumentKeydownListener();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [StyleClass],\n    declarations: [StyleClass]\n})\nexport class StyleClassModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-subscriptioncard.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import * as i1 from 'cax-design-system/button';
+import { Button, ButtonModule } from 'cax-design-system/button';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from 'cax-design-system/api';
+import { BadgeModule } from 'cax-design-system/badge';
+
+class SubscriptionCardComponent {
+    /** Title of the card */
+    header = 'Label';
+    /** Body text of the card */
+    description = 'Body will have 2 lines at max so I am writing this to have the enough space.';
+    /** Optional image URL */
+    imageUrl;
+    /** Optional icon class (used when imageUrl is not provided) */
+    iconClass;
+    /** Tag text (like CMS or DM) */
+    badgeLabel;
+    /** Button 1 label */
+    primaryButtonLabel = 'Button Label';
+    /** Button 2 label */
+    secondaryButtonLabel = 'Button Label';
+    /** Button severity (color theme) */
+    buttonSeverity = 'primary';
+    primaryButtonIcon = 'cax cax-check';
+    /** Whether card is active (blue border or checkmark shown) */
+    active = false;
+    /** Emits when the primary button is clicked */
+    primaryClick = new EventEmitter();
+    /** Emits when the secondary button is clicked */
+    secondaryClick = new EventEmitter();
+    buttonClick = new EventEmitter();
+    onPrimaryClick() {
+        this.primaryClick.emit();
+    }
+    onSecondaryClick() {
+        this.secondaryClick.emit();
+    }
+    onButtonClick() {
+        this.buttonClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SubscriptionCardComponent, isStandalone: false, selector: "subscription-card", inputs: { header: "header", description: "description", imageUrl: "imageUrl", iconClass: "iconClass", badgeLabel: "badgeLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonLabel: "secondaryButtonLabel", buttonSeverity: "buttonSeverity", primaryButtonIcon: "primaryButtonIcon", active: "active" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick", buttonClick: "buttonClick" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"cax-subscription-card\" [ngClass]=\"{ active: active }\">\n    <!-- Image or Icon -->\n    <div class=\"media-container\">\n        <ng-container *ngIf=\"imageUrl; else iconBlock\">\n            <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-subscription-card-img\" />\n        </ng-container>\n\n        <ng-template #iconBlock>\n            <i *ngIf=\"iconClass\" [class]=\"iconClass\" class=\"cax-subscription-card-icon\"></i>\n        </ng-template>\n\n        <span *ngIf=\"badgeLabel\" class=\"cax-badgeLabel\">{{ badgeLabel }}</span>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <div class=\"cax-subscard-header\">\n            <h3 class=\"cax-subscard-title\">{{ header }}</h3>\n            <i class=\"cax cax-pen-square\"></i>\n        </div>\n        <p class=\"cax-subscard-description\">{{ description }}</p>\n\n        <div class=\"button-group\">\n            <cax-button [icon]=\"primaryButtonIcon\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onButtonClick()\"></cax-button>\n\n            <cax-button [label]=\"primaryButtonLabel\" [style]=\"{ width: '100%' }\" [severity]=\"buttonSeverity\" [size]=\"'medium'\" (click)=\"onPrimaryClick()\"></cax-button>\n\n            <cax-button [label]=\"secondaryButtonLabel\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onSecondaryClick()\"></cax-button>\n        </div>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-subscription-card{width:386px;border-radius:16px;padding:16px}.cax-subscription-card .media-container{position:relative}.cax-subscription-card .media-container img.cax-subscription-card-img{width:100%;height:164px;border-radius:16px;object-fit:cover}.cax-subscription-card .media-container .cax-subscription-card-icon{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:16px;font-size:48px}.cax-subscription-card .media-container .cax-badgeLabel{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600}.cax-subscription-card .cax-card-content{padding-top:1rem}.cax-subscription-card .cax-card-content .cax-subscard-title{font-weight:700;font-size:16px;margin:0 0 .25rem}.cax-subscription-card .cax-card-content .cax-subscard-header{display:flex;align-items:center;gap:6px}.cax-subscription-card .cax-card-content .cax-subscard-description{font-size:400;font-size:12px;margin:0 0 1rem;line-height:16px}.cax-subscription-card .cax-card-content .button-group{display:flex;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'subscription-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cax-element' }, standalone: false, template: "<div class=\"cax-subscription-card\" [ngClass]=\"{ active: active }\">\n    <!-- Image or Icon -->\n    <div class=\"media-container\">\n        <ng-container *ngIf=\"imageUrl; else iconBlock\">\n            <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-subscription-card-img\" />\n        </ng-container>\n\n        <ng-template #iconBlock>\n            <i *ngIf=\"iconClass\" [class]=\"iconClass\" class=\"cax-subscription-card-icon\"></i>\n        </ng-template>\n\n        <span *ngIf=\"badgeLabel\" class=\"cax-badgeLabel\">{{ badgeLabel }}</span>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <div class=\"cax-subscard-header\">\n            <h3 class=\"cax-subscard-title\">{{ header }}</h3>\n            <i class=\"cax cax-pen-square\"></i>\n        </div>\n        <p class=\"cax-subscard-description\">{{ description }}</p>\n\n        <div class=\"button-group\">\n            <cax-button [icon]=\"primaryButtonIcon\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onButtonClick()\"></cax-button>\n\n            <cax-button [label]=\"primaryButtonLabel\" [style]=\"{ width: '100%' }\" [severity]=\"buttonSeverity\" [size]=\"'medium'\" (click)=\"onPrimaryClick()\"></cax-button>\n\n            <cax-button [label]=\"secondaryButtonLabel\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onSecondaryClick()\"></cax-button>\n        </div>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-subscription-card{width:386px;border-radius:16px;padding:16px}.cax-subscription-card .media-container{position:relative}.cax-subscription-card .media-container img.cax-subscription-card-img{width:100%;height:164px;border-radius:16px;object-fit:cover}.cax-subscription-card .media-container .cax-subscription-card-icon{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:16px;font-size:48px}.cax-subscription-card .media-container .cax-badgeLabel{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600}.cax-subscription-card .cax-card-content{padding-top:1rem}.cax-subscription-card .cax-card-content .cax-subscard-title{font-weight:700;font-size:16px;margin:0 0 .25rem}.cax-subscription-card .cax-card-content .cax-subscard-header{display:flex;align-items:center;gap:6px}.cax-subscription-card .cax-card-content .cax-subscard-description{font-size:400;font-size:12px;margin:0 0 1rem;line-height:16px}.cax-subscription-card .cax-card-content .button-group{display:flex;justify-content:space-between}}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], badgeLabel: [{
+                type: Input
+            }], primaryButtonLabel: [{
+                type: Input
+            }], secondaryButtonLabel: [{
+                type: Input
+            }], buttonSeverity: [{
+                type: Input
+            }], primaryButtonIcon: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], secondaryClick: [{
+                type: Output
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class SubscriptionCardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardModule, declarations: [SubscriptionCardComponent], imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule], exports: [SubscriptionCardComponent, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardModule, imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SubscriptionCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],
+                    declarations: [SubscriptionCardComponent],
+                    exports: [SubscriptionCardComponent, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SubscriptionCardComponent, SubscriptionCardModule };
+//# sourceMappingURL=cax-design-system-subscriptioncard.mjs.map

package/fesm2022/cax-design-system-subscriptioncard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-subscriptioncard.mjs","sources":["../../src/app/components/subscriptioncard/subscriptioncard.component.ts","../../src/app/components/subscriptioncard/subscriptioncard.component.html","../../src/app/components/subscriptioncard/subscriptioncard.module.ts","../../src/app/components/subscriptioncard/cax-design-system-subscriptioncard.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\n\n@Component({\n    selector: 'subscription-card',\n    templateUrl: './subscriptioncard.component.html',\n    styleUrls: ['./subscriptioncard.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: { class: 'cax-element' },\n    standalone: false\n})\nexport class SubscriptionCardComponent {\n    /** Title of the card */\n    @Input() header: string = 'Label';\n\n    /** Body text of the card */\n    @Input() description: string = 'Body will have 2 lines at max so I am writing this to have the enough space.';\n\n    /** Optional image URL */\n    @Input() imageUrl?: string;\n\n    /** Optional icon class (used when imageUrl is not provided) */\n    @Input() iconClass?: string;\n\n    /** Tag text (like CMS or DM) */\n    @Input() badgeLabel?: string;\n\n    /** Button 1 label */\n    @Input() primaryButtonLabel: string = 'Button Label';\n\n    /** Button 2 label */\n    @Input() secondaryButtonLabel: string = 'Button Label';\n\n    /** Button severity (color theme) */\n    @Input() buttonSeverity: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' = 'primary';\n\n    @Input() primaryButtonIcon: string = 'cax cax-check';\n\n    /** Whether card is active (blue border or checkmark shown) */\n    @Input() active: boolean = false;\n\n    /** Emits when the primary button is clicked */\n    @Output() primaryClick = new EventEmitter<void>();\n\n    /** Emits when the secondary button is clicked */\n    @Output() secondaryClick = new EventEmitter<void>();\n\n    @Output() buttonClick = new EventEmitter<void>();\n\n    onPrimaryClick() {\n        this.primaryClick.emit();\n    }\n\n    onSecondaryClick() {\n        this.secondaryClick.emit();\n    }\n\n    onButtonClick() {\n        this.buttonClick.emit();\n    }\n}\n","<div class=\"cax-subscription-card\" [ngClass]=\"{ active: active }\">\n    <!-- Image or Icon -->\n    <div class=\"media-container\">\n        <ng-container *ngIf=\"imageUrl; else iconBlock\">\n            <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-subscription-card-img\" />\n        </ng-container>\n\n        <ng-template #iconBlock>\n            <i *ngIf=\"iconClass\" [class]=\"iconClass\" class=\"cax-subscription-card-icon\"></i>\n        </ng-template>\n\n        <span *ngIf=\"badgeLabel\" class=\"cax-badgeLabel\">{{ badgeLabel }}</span>\n    </div>\n\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <div class=\"cax-subscard-header\">\n            <h3 class=\"cax-subscard-title\">{{ header }}</h3>\n            <i class=\"cax cax-pen-square\"></i>\n        </div>\n        <p class=\"cax-subscard-description\">{{ description }}</p>\n\n        <div class=\"button-group\">\n            <cax-button [icon]=\"primaryButtonIcon\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onButtonClick()\"></cax-button>\n\n            <cax-button [label]=\"primaryButtonLabel\" [style]=\"{ width: '100%' }\" [severity]=\"buttonSeverity\" [size]=\"'medium'\" (click)=\"onPrimaryClick()\"></cax-button>\n\n            <cax-button [label]=\"secondaryButtonLabel\" [severity]=\"buttonSeverity\" [style]=\"{ width: '100%' }\" [size]=\"'medium'\" (click)=\"onSecondaryClick()\"></cax-button>\n        </div>\n    </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { SubscriptionCardComponent } from './subscriptioncard.component';\nimport { Button, ButtonModule } from 'cax-design-system/button';\nimport { BadgeModule } from 'cax-design-system/badge';\n\n@NgModule({\n    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],\n    declarations: [SubscriptionCardComponent],\n    exports: [SubscriptionCardComponent, SharedModule]\n})\nexport class SubscriptionCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-table-paginator.mjs

@@ -0,0 +1,128 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
+import * as i1 from 'cax-design-system/button';
+import { ButtonModule } from 'cax-design-system/button';
+import { CommonModule } from '@angular/common';
+
+class TablePaginatorComponent {
+    totalRecords = 0;
+    rows = 10;
+    get rowsPerPageOptions() {
+        return this._rowsPerPageOptions;
+    }
+    set rowsPerPageOptions(val) {
+        if (val && val.length > 0) {
+            this._rowsPerPageOptions = val;
+        }
+    }
+    _rowsPerPageOptions = [5, 10, 20];
+    first = 0;
+    showPrevNext = true;
+    showResultsPerPage = true;
+    alignment = 'right';
+    onPerPageChange = new EventEmitter();
+    onPrevClick = new EventEmitter();
+    onNextClick = new EventEmitter();
+    get currentPage() {
+        return Math.floor(this.first / this.rows);
+    }
+    get pageCount() {
+        return Math.ceil(this.totalRecords / this.rows);
+    }
+    get isFirstPage() {
+        return this.currentPage === 0;
+    }
+    get isLastPage() {
+        return this.currentPage >= this.pageCount - 1;
+    }
+    changePage(page) {
+        const newFirst = page * this.rows;
+        if (newFirst >= 0 && newFirst < this.totalRecords) {
+            this.first = newFirst;
+        }
+    }
+    changePageToPrev() {
+        if (!this.isFirstPage) {
+            this.changePage(this.currentPage - 1);
+            this.onPrevClick.emit({
+                first: this.first,
+                rows: this.rows,
+                page: this.currentPage,
+                pageCount: this.pageCount
+            });
+        }
+    }
+    changePageToNext() {
+        if (!this.isLastPage) {
+            this.changePage(this.currentPage + 1);
+            this.onNextClick.emit({
+                first: this.first,
+                rows: this.rows,
+                page: this.currentPage,
+                pageCount: this.pageCount
+            });
+        }
+    }
+    onRowsPerPageChange(newRows) {
+        this.rows = newRows;
+        this.first = 0; // always reset to page 1
+        this.emitPageChange();
+    }
+    emitPageChange() {
+        this.onPerPageChange.emit({
+            first: this.first,
+            rows: this.rows,
+            page: this.currentPage,
+            pageCount: this.pageCount
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TablePaginatorComponent, isStandalone: false, selector: "cax-tablePaginator", inputs: { totalRecords: "totalRecords", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", first: "first", showPrevNext: "showPrevNext", showResultsPerPage: "showResultsPerPage", alignment: "alignment" }, outputs: { onPerPageChange: "onPerPageChange", onPrevClick: "onPrevClick", onNextClick: "onNextClick" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"cax-tablepaginator\" [class.align-center]=\"alignment === 'center'\" [class.align-right]=\"alignment === 'right'\">\n    <!-- PREV / NEXT -->\n    @if (showPrevNext) {\n        <div class=\"cax-tablepaginator-left\">\n            <!-- PREV -->\n            <!-- <i class=\"cax cax-alt-arrow-left\" [class.disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"> </i>\n\n                <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isFirstPage\"> Prev </span> -->\n\n            <cax-button severity=\"secondary\" label=\"Prev\" leftIcon=\"cax cax-arrow-left\" link=\"true\" [disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"></cax-button>\n\n            <!-- NEXT -->\n            <!-- <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isLastPage\"> Next </span>\n\n                <i class=\"cax cax-alt-arrow-right\" [class.disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"> </i> -->\n\n            <cax-button severity=\"secondary\" label=\"Next\" rightIcon=\"cax cax-arrow-right\" link=\"true\" [disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"></cax-button>\n        </div>\n    }\n\n    <!-- ROWS PER PAGE -->\n    @if (showResultsPerPage) {\n        <div class=\"cax-tablepaginator-right\">\n            <div class=\"cax-tablepaginator-results\">\n                <span class=\"cax-tablepaginator-label cax-text-action-md-medium\">Results per page</span>\n\n                <div class=\"cax-tablepaginator-dropdown\">\n                    @for (option of rowsPerPageOptions; track option) {\n                        <div class=\"cax-tablepaginator-option\" [class]=\"option == rows ? 'cax-text-action-lg-semibold' : 'cax-text-action-lg-regular'\" [class.active]=\"rows === option\" (click)=\"onRowsPerPageChange(option)\">\n                            {{ option }}\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: ["@layer cax{.cax-tablepaginator{display:flex;align-items:center;gap:32px;width:100%;padding:8px 16px}.cax-tablepaginator.align-center{justify-content:center}.cax-tablepaginator.align-right{justify-content:flex-end}.cax-tablepaginator-left{display:flex;align-items:center;gap:8px}.cax-tablepaginator-text{font-size:16px;font-weight:400}.cax-tablepaginator-text.disabled{opacity:.4}.cax-tablepaginator-right{display:flex;align-items:center;gap:1rem}.cax-tablepaginator-dropdown{display:flex;gap:8px}.cax-tablepaginator-option{padding:14px;width:42px;height:42px;font-size:16px;font-weight:400;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.cax-tablepaginator-option.active{font-weight:600;font-size:16px}.cax-tablepaginator-results{display:flex;align-items:center;gap:24px}.cax-tablepaginator-results .cax-tablepaginator-label{font-size:16px;font-weight:400}}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-tablePaginator', standalone: false, host: {
+                        class: 'cax-element'
+                    }, template: "<div class=\"cax-tablepaginator\" [class.align-center]=\"alignment === 'center'\" [class.align-right]=\"alignment === 'right'\">\n    <!-- PREV / NEXT -->\n    @if (showPrevNext) {\n        <div class=\"cax-tablepaginator-left\">\n            <!-- PREV -->\n            <!-- <i class=\"cax cax-alt-arrow-left\" [class.disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"> </i>\n\n                <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isFirstPage\"> Prev </span> -->\n\n            <cax-button severity=\"secondary\" label=\"Prev\" leftIcon=\"cax cax-arrow-left\" link=\"true\" [disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"></cax-button>\n\n            <!-- NEXT -->\n            <!-- <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isLastPage\"> Next </span>\n\n                <i class=\"cax cax-alt-arrow-right\" [class.disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"> </i> -->\n\n            <cax-button severity=\"secondary\" label=\"Next\" rightIcon=\"cax cax-arrow-right\" link=\"true\" [disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"></cax-button>\n        </div>\n    }\n\n    <!-- ROWS PER PAGE -->\n    @if (showResultsPerPage) {\n        <div class=\"cax-tablepaginator-right\">\n            <div class=\"cax-tablepaginator-results\">\n                <span class=\"cax-tablepaginator-label cax-text-action-md-medium\">Results per page</span>\n\n                <div class=\"cax-tablepaginator-dropdown\">\n                    @for (option of rowsPerPageOptions; track option) {\n                        <div class=\"cax-tablepaginator-option\" [class]=\"option == rows ? 'cax-text-action-lg-semibold' : 'cax-text-action-lg-regular'\" [class.active]=\"rows === option\" (click)=\"onRowsPerPageChange(option)\">\n                            {{ option }}\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: ["@layer cax{.cax-tablepaginator{display:flex;align-items:center;gap:32px;width:100%;padding:8px 16px}.cax-tablepaginator.align-center{justify-content:center}.cax-tablepaginator.align-right{justify-content:flex-end}.cax-tablepaginator-left{display:flex;align-items:center;gap:8px}.cax-tablepaginator-text{font-size:16px;font-weight:400}.cax-tablepaginator-text.disabled{opacity:.4}.cax-tablepaginator-right{display:flex;align-items:center;gap:1rem}.cax-tablepaginator-dropdown{display:flex;gap:8px}.cax-tablepaginator-option{padding:14px;width:42px;height:42px;font-size:16px;font-weight:400;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.cax-tablepaginator-option.active{font-weight:600;font-size:16px}.cax-tablepaginator-results{display:flex;align-items:center;gap:24px}.cax-tablepaginator-results .cax-tablepaginator-label{font-size:16px;font-weight:400}}\n"] }]
+        }], propDecorators: { totalRecords: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], showPrevNext: [{
+                type: Input
+            }], showResultsPerPage: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], onPerPageChange: [{
+                type: Output
+            }], onPrevClick: [{
+                type: Output
+            }], onNextClick: [{
+                type: Output
+            }] } });
+
+class TablePaginatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorModule, declarations: [TablePaginatorComponent], imports: [CommonModule, ButtonModule], exports: [TablePaginatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorModule, imports: [CommonModule, ButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TablePaginatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ButtonModule],
+                    exports: [TablePaginatorComponent],
+                    declarations: [TablePaginatorComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TablePaginatorComponent, TablePaginatorModule };
+//# sourceMappingURL=cax-design-system-table-paginator.mjs.map

package/fesm2022/cax-design-system-table-paginator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-table-paginator.mjs","sources":["../../src/app/components/table-paginator/table-paginator.component.ts","../../src/app/components/table-paginator/table-paginator.component.html","../../src/app/components/table-paginator/table-paginator.module.ts","../../src/app/components/table-paginator/cax-design-system-table-paginator.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PaginatorState } from './table-paginator.interface';\n\n@Component({\n    selector: 'cax-tablePaginator',\n    standalone: false,\n    templateUrl: './table-paginator.component.html',\n    styleUrl: './table-paginator.component.scss',\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class TablePaginatorComponent {\n    @Input() totalRecords: number = 0;\n    @Input() rows: number = 10;\n    @Input() get rowsPerPageOptions(): number[] {\n        return this._rowsPerPageOptions;\n    }\n    set rowsPerPageOptions(val: number[] | undefined) {\n        if (val && val.length > 0) {\n            this._rowsPerPageOptions = val;\n        }\n    }\n    private _rowsPerPageOptions: number[] = [5, 10, 20];\n\n    @Input() first: number = 0;\n\n    @Input() showPrevNext: boolean = true;\n    @Input() showResultsPerPage: boolean = true;\n    @Input() alignment: 'center' | 'right' = 'right';\n\n    @Output() onPerPageChange = new EventEmitter<PaginatorState>();\n    @Output() onPrevClick = new EventEmitter<PaginatorState>();\n    @Output() onNextClick = new EventEmitter<PaginatorState>();\n\n    get currentPage(): number {\n        return Math.floor(this.first / this.rows);\n    }\n\n    get pageCount(): number {\n        return Math.ceil(this.totalRecords / this.rows);\n    }\n\n    get isFirstPage(): boolean {\n        return this.currentPage === 0;\n    }\n\n    get isLastPage(): boolean {\n        return this.currentPage >= this.pageCount - 1;\n    }\n\n    private changePage(page: number): void {\n        const newFirst = page * this.rows;\n\n        if (newFirst >= 0 && newFirst < this.totalRecords) {\n            this.first = newFirst;\n        }\n    }\n\n    changePageToPrev(): void {\n        if (!this.isFirstPage) {\n            this.changePage(this.currentPage - 1);\n\n            this.onPrevClick.emit({\n                first: this.first,\n                rows: this.rows,\n                page: this.currentPage,\n                pageCount: this.pageCount\n            });\n        }\n    }\n\n    changePageToNext(): void {\n        if (!this.isLastPage) {\n            this.changePage(this.currentPage + 1);\n\n            this.onNextClick.emit({\n                first: this.first,\n                rows: this.rows,\n                page: this.currentPage,\n                pageCount: this.pageCount\n            });\n        }\n    }\n\n    onRowsPerPageChange(newRows: number): void {\n        this.rows = newRows;\n        this.first = 0; // always reset to page 1\n        this.emitPageChange();\n    }\n\n    private emitPageChange(): void {\n        this.onPerPageChange.emit({\n            first: this.first,\n            rows: this.rows,\n            page: this.currentPage,\n            pageCount: this.pageCount\n        });\n    }\n}\n","<div class=\"cax-tablepaginator\" [class.align-center]=\"alignment === 'center'\" [class.align-right]=\"alignment === 'right'\">\n    <!-- PREV / NEXT -->\n    @if (showPrevNext) {\n        <div class=\"cax-tablepaginator-left\">\n            <!-- PREV -->\n            <!-- <i class=\"cax cax-alt-arrow-left\" [class.disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"> </i>\n\n                <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isFirstPage\"> Prev </span> -->\n\n            <cax-button severity=\"secondary\" label=\"Prev\" leftIcon=\"cax cax-arrow-left\" link=\"true\" [disabled]=\"isFirstPage\" (click)=\"!isFirstPage && changePageToPrev()\" aria-label=\"Previous page\"></cax-button>\n\n            <!-- NEXT -->\n            <!-- <span class=\"cax-tablepaginator-text\" [class.disabled]=\"isLastPage\"> Next </span>\n\n                <i class=\"cax cax-alt-arrow-right\" [class.disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"> </i> -->\n\n            <cax-button severity=\"secondary\" label=\"Next\" rightIcon=\"cax cax-arrow-right\" link=\"true\" [disabled]=\"isLastPage\" (click)=\"!isLastPage && changePageToNext()\" aria-label=\"Next page\"></cax-button>\n        </div>\n    }\n\n    <!-- ROWS PER PAGE -->\n    @if (showResultsPerPage) {\n        <div class=\"cax-tablepaginator-right\">\n            <div class=\"cax-tablepaginator-results\">\n                <span class=\"cax-tablepaginator-label cax-text-action-md-medium\">Results per page</span>\n\n                <div class=\"cax-tablepaginator-dropdown\">\n                    @for (option of rowsPerPageOptions; track option) {\n                        <div class=\"cax-tablepaginator-option\" [class]=\"option == rows ? 'cax-text-action-lg-semibold' : 'cax-text-action-lg-regular'\" [class.active]=\"rows === option\" (click)=\"onRowsPerPageChange(option)\">\n                            {{ option }}\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { TablePaginatorComponent } from './table-paginator.component';\n\n@NgModule({\n    imports: [CommonModule, ButtonModule],\n    exports: [TablePaginatorComponent],\n    declarations: [TablePaginatorComponent]\n})\nexport class TablePaginatorModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}