@updevs/components 1.0.0-alpha.98 → 1.0.0-beta.1

package/fesm2022/updevs-components-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-popover.mjs","sources":["../../../../libs/components/popover/src/popover.component.ts","../../../../libs/components/popover/src/popover.component.html","../../../../libs/components/popover/src/popover.directive.ts","../../../../libs/components/popover/src/upd-popover.module.ts","../../../../libs/components/popover/src/updevs-components-popover.ts"],"sourcesContent":["import { Component, Input, HostBinding, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';\nimport { TopBottomLeftRightType } from '@updevs/sdk/types';\n\n@Component({\n    selector: 'upd-popover',\n    templateUrl: './popover.component.html',\n    styleUrls: ['./popover.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class PopoverComponent implements OnInit, OnChanges {\n    @HostBinding('class') classes = '';\n    @HostBinding('attr.data-popper-placement') popperPlacement = '';\n    @HostBinding('role') readonly role = 'tooltip';\n\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() titleTemplate?: TemplateRef<any>;\n    @Input() template?: TemplateRef<any>;\n    @Input() placement: TopBottomLeftRightType = 'top';\n    @Input() customClasses?: string;\n\n    get isVisible(): boolean {\n        return this._isVisible;\n    }\n\n    private _isVisible = false;\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(): void {\n        this.updateClasses();\n    }\n\n    setVisible(isVisible: boolean): void {\n        this._isVisible = isVisible;\n        this.updateClasses();\n    }\n\n    private updateClasses(): void {\n        this.popperPlacement = this.placement;\n        this.classes = [\n            'popover',\n            'bs-popover-auto',\n            !this._isVisible ? 'fade' : '',\n            this._isVisible ? 'show' : '',\n            'upd-popover',\n            `-${this.placement}`,\n            ...(this.customClasses?.split(' ') || [])\n        ].join(' ');\n    }\n}\n","<div class=\"popover-arrow upd-popover-arrow -{{placement}}\"></div>\n@if (!!title || !!titleTemplate) {\n    @if (!!title) {\n        <h3 [innerHTML]=\"title\" class=\"popover-header\"></h3>\n    } @else {\n        <div class=\"popover-header\">\n            <ng-template [ngTemplateOutlet]=\"titleTemplate!\"></ng-template>\n        </div>\n    }\n}\n<div class=\"popover-body\">\n    @if (!!text) {\n        <span [innerHTML]=\"text\"></span>\n    } @else {\n        @if (!template) {\n            <ng-content></ng-content>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"template!\"></ng-template>\n        }\n    }\n</div>\n","import {\n    Directive,\n    Input,\n    TemplateRef,\n    ViewContainerRef,\n    Renderer2,\n    ElementRef,\n    Injector,\n    NgZone,\n    ComponentRef,\n    HostListener, inject,\n    afterNextRender\n} from '@angular/core';\nimport { TopBottomLeftRightType } from '@updevs/sdk/types';\nimport { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';\n\nimport { PopoverComponent } from './popover.component';\n\n@Directive({\n    selector: '[updPopover]'\n})\nexport class PopoverDirective {\n    @Input('updPopover') text?: string;\n    @Input('updPopoverTitle') title?: string;\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;\n    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';\n    @Input('updPopoverCustomClasses') customClasses?: string;\n    /**\n     * This makes the popover behave like a tooltip.\n     * It means it'll show/hide depending on whether the mouse is over or not the element.\n     */\n    @Input('updPopoverActAsTooltip') actAsTooltip = false;\n\n    private popoverComponentRef?: ComponentRef<PopoverComponent>;\n\n    private readonly elementRef = inject(ElementRef);\n    private readonly renderer = inject(Renderer2);\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly ngZone = inject(NgZone);\n    private readonly injector = inject(Injector);\n    private readonly positioningService = inject(PositioningService);\n    private readonly dynamicComponentLoaderService = inject(DynamicComponentLoaderService);\n\n    @HostListener('mouseenter')\n    onMouseEnter(): void {\n        if (this.actAsTooltip) {\n            this.initPopover();\n        }\n    }\n\n    @HostListener('mouseleave')\n    onMouseLeave(): void {\n        if (this.actAsTooltip) {\n            this.disposePopover();\n        }\n    }\n\n    @HostListener('click')\n    onClick(): void {\n        if (!this.actAsTooltip) {\n            if (this.popoverComponentRef?.instance.isVisible) {\n                this.disposePopover();\n            } else {\n                this.initPopover();\n            }\n        }\n    }\n\n    private initPopover(): void {\n        this.setupPopover();\n        this.popoverComponentRef!.instance.setVisible(true);\n        this.popoverComponentRef!.changeDetectorRef.detectChanges();\n\n        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');\n\n        afterNextRender(() => {\n            this.ngZone.runOutsideAngular(() =>\n                this.positioningService\n                    .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement }, arrowElement)\n                    .subscribe(resp => this.updatePosition(resp))\n            );\n        }, { injector: this.injector });\n    }\n\n    private disposePopover(): void {\n        this.viewContainerRef.clear();\n        this.popoverComponentRef!.instance.setVisible(false);\n    }\n\n    private setupPopover(): void {\n        this.viewContainerRef.clear();\n\n        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);\n        this.popoverComponentRef!.instance.title = this.title;\n        this.popoverComponentRef!.instance.text = this.text;\n        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;\n        this.popoverComponentRef!.instance.template = this.popoverTemplate;\n        this.popoverComponentRef!.instance.placement = this.placement;\n        this.popoverComponentRef!.instance.customClasses = this.customClasses;\n    }\n\n    private updatePosition(result: ComputePositionResult): void {\n        const nativeElement = this.popoverComponentRef!.location.nativeElement;\n        const arrowElement = nativeElement?.querySelector('.popover-arrow');\n\n        if (!arrowElement) {\n            console.warn('Popover arrow element not found. Positioning may be incorrect.');\n            return;\n        }\n\n        this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);\n        this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);\n\n        if (arrowElement && result.middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = result.middlewareData.arrow;\n            this.renderer.setStyle(arrowElement, 'left', arrowX !== undefined ? `${arrowX}px` : '');\n            this.renderer.setStyle(arrowElement, 'top', arrowY !== undefined ? `${arrowY}px` : '');\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PopoverComponent } from './popover.component';\nimport { PopoverDirective } from './popover.directive';\n\n@NgModule({\n    imports: [\n        CommonModule\n    ],\n    declarations: [\n        PopoverComponent,\n        PopoverDirective\n    ],\n    exports: [\n        PopoverComponent,\n        PopoverDirective\n    ]\n})\nexport class UpdPopoverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"updevs-components-popover.mjs","sources":["../../../../libs/components/popover/src/popover.component.ts","../../../../libs/components/popover/src/popover.component.html","../../../../libs/components/popover/src/popover.directive.ts","../../../../libs/components/popover/src/upd-popover.module.ts","../../../../libs/components/popover/src/updevs-components-popover.ts"],"sourcesContent":["import { Component, Input, HostBinding, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';\nimport { TopBottomLeftRightType } from '@updevs/sdk/types';\n\n@Component({\n    standalone: false,\n    selector: 'upd-popover',\n    templateUrl: './popover.component.html',\n    styleUrls: ['./popover.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class PopoverComponent implements OnInit, OnChanges {\n    @HostBinding('class') classes = '';\n    @HostBinding('attr.data-popper-placement') popperPlacement = '';\n    @HostBinding('attr.role') readonly role = 'tooltip';\n\n    @Input() title?: string;\n    @Input() text?: string;\n    @Input() titleTemplate?: TemplateRef<any>;\n    @Input() template?: TemplateRef<any>;\n    @Input() placement: TopBottomLeftRightType = 'top';\n    @Input() customClasses?: string;\n\n    get isVisible(): boolean {\n        return this._isVisible;\n    }\n\n    private _isVisible = false;\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(): void {\n        this.updateClasses();\n    }\n\n    setVisible(isVisible: boolean): void {\n        this._isVisible = isVisible;\n        this.updateClasses();\n    }\n\n    private updateClasses(): void {\n        this.popperPlacement = this.placement;\n        this.classes = [\n            'popover',\n            'bs-popover-auto',\n            !this._isVisible ? 'fade' : '',\n            this._isVisible ? 'show' : '',\n            'upd-popover',\n            `-${this.placement}`,\n            ...(this.customClasses?.split(' ') || [])\n        ].join(' ');\n    }\n}\n","<div class=\"popover-arrow upd-popover-arrow -{{placement}}\"></div>\n@if (!!title || !!titleTemplate) {\n    @if (!!title) {\n        <h3 [innerHTML]=\"title\" class=\"popover-header\"></h3>\n    } @else {\n        <div class=\"popover-header\">\n            <ng-template [ngTemplateOutlet]=\"titleTemplate!\"></ng-template>\n        </div>\n    }\n}\n<div class=\"popover-body\">\n    @if (!!text) {\n        <span [innerHTML]=\"text\"></span>\n    } @else {\n        @if (!template) {\n            <ng-content></ng-content>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"template!\"></ng-template>\n        }\n    }\n</div>\n","import {\n    Directive,\n    Input,\n    TemplateRef,\n    ViewContainerRef,\n    Renderer2,\n    ElementRef,\n    Injector,\n    NgZone,\n    ComponentRef,\n    HostListener, inject,\n    afterNextRender\n} from '@angular/core';\nimport { TopBottomLeftRightType } from '@updevs/sdk/types';\nimport { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';\n\nimport { PopoverComponent } from './popover.component';\n\n@Directive({\n    standalone: false,\n    selector: '[updPopover]'\n})\nexport class PopoverDirective {\n    @Input('updPopover') text?: string;\n    @Input('updPopoverTitle') title?: string;\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;\n    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';\n    @Input('updPopoverCustomClasses') customClasses?: string;\n    /**\n     * This makes the popover behave like a tooltip.\n     * It means it'll show/hide depending on whether the mouse is over or not the element.\n     */\n    @Input('updPopoverActAsTooltip') actAsTooltip = false;\n\n    private popoverComponentRef?: ComponentRef<PopoverComponent>;\n\n    private readonly elementRef = inject(ElementRef);\n    private readonly renderer = inject(Renderer2);\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly ngZone = inject(NgZone);\n    private readonly injector = inject(Injector);\n    private readonly positioningService = inject(PositioningService);\n    private readonly dynamicComponentLoaderService = inject(DynamicComponentLoaderService);\n\n    @HostListener('mouseenter')\n    onMouseEnter(): void {\n        if (this.actAsTooltip) {\n            this.initPopover();\n        }\n    }\n\n    @HostListener('mouseleave')\n    onMouseLeave(): void {\n        if (this.actAsTooltip) {\n            this.disposePopover();\n        }\n    }\n\n    @HostListener('click')\n    onClick(): void {\n        if (!this.actAsTooltip) {\n            if (this.popoverComponentRef?.instance.isVisible) {\n                this.disposePopover();\n            } else {\n                this.initPopover();\n            }\n        }\n    }\n\n    private initPopover(): void {\n        this.setupPopover();\n        this.popoverComponentRef!.instance.setVisible(true);\n        this.popoverComponentRef!.changeDetectorRef.detectChanges();\n\n        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');\n\n        afterNextRender(() => {\n            this.ngZone.runOutsideAngular(() =>\n                this.positioningService\n                    .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement }, arrowElement)\n                    .subscribe(resp => this.updatePosition(resp))\n            );\n        }, { injector: this.injector });\n    }\n\n    private disposePopover(): void {\n        this.viewContainerRef.clear();\n        this.popoverComponentRef!.instance.setVisible(false);\n    }\n\n    private setupPopover(): void {\n        this.viewContainerRef.clear();\n\n        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);\n        this.popoverComponentRef!.instance.title = this.title;\n        this.popoverComponentRef!.instance.text = this.text;\n        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;\n        this.popoverComponentRef!.instance.template = this.popoverTemplate;\n        this.popoverComponentRef!.instance.placement = this.placement;\n        this.popoverComponentRef!.instance.customClasses = this.customClasses;\n    }\n\n    private updatePosition(result: ComputePositionResult): void {\n        const nativeElement = this.popoverComponentRef!.location.nativeElement;\n        const arrowElement = nativeElement?.querySelector('.popover-arrow');\n\n        if (!arrowElement) {\n            console.warn('Popover arrow element not found. Positioning may be incorrect.');\n            return;\n        }\n\n        this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);\n        this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);\n\n        if (arrowElement && result.middlewareData.arrow) {\n            const { x: arrowX, y: arrowY } = result.middlewareData.arrow;\n            this.renderer.setStyle(arrowElement, 'left', arrowX !== undefined ? `${arrowX}px` : '');\n            this.renderer.setStyle(arrowElement, 'top', arrowY !== undefined ? `${arrowY}px` : '');\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PopoverComponent } from './popover.component';\nimport { PopoverDirective } from './popover.directive';\n\n@NgModule({\n    imports: [\n        CommonModule\n    ],\n    declarations: [\n        PopoverComponent,\n        PopoverDirective\n    ],\n    exports: [\n        PopoverComponent,\n        PopoverDirective\n    ]\n})\nexport class UpdPopoverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAUa,gBAAgB,CAAA;AAP7B,IAAA,WAAA,GAAA;QAQ0B,IAAO,CAAA,OAAA,GAAG,EAAE;QACS,IAAe,CAAA,eAAA,GAAG,EAAE;QAC5B,IAAI,CAAA,IAAA,GAAG,SAAS;QAM1C,IAAS,CAAA,SAAA,GAA2B,KAAK;QAO1C,IAAU,CAAA,UAAA,GAAG,KAAK;AA2B7B;AA/BG,IAAA,IAAI,SAAS,GAAA;QACT,OAAO,IAAI,CAAC,UAAU;;IAK1B,QAAQ,GAAA;QACJ,IAAI,CAAC,aAAa,EAAE;;IAGxB,WAAW,GAAA;QACP,IAAI,CAAC,aAAa,EAAE;;AAGxB,IAAA,UAAU,CAAC,SAAkB,EAAA;AACzB,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;QAC3B,IAAI,CAAC,aAAa,EAAE;;IAGhB,aAAa,GAAA;AACjB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS;QACrC,IAAI,CAAC,OAAO,GAAG;YACX,SAAS;YACT,iBAAiB;YACjB,CAAC,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE;YAC9B,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE;YAC7B,aAAa;YACb,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA;YACpB,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE;AAC3C,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC;;8GAzCN,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,wXCV7B,yoBAqBA,EAAA,MAAA,EAAA,CAAA,iFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDXa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,KAAK,EACP,QAAA,EAAA,aAAa,EAGR,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,yoBAAA,EAAA,MAAA,EAAA,CAAA,iFAAA,CAAA,EAAA;;sBAGpC,WAAW;uBAAC,OAAO;;sBACnB,WAAW;uBAAC,4BAA4B;;sBACxC,WAAW;uBAAC,WAAW;;sBAEvB;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;;MEEQ,gBAAgB,CAAA;AAJ7B,IAAA,WAAA,GAAA;QAWkC,IAAS,CAAA,SAAA,GAA2B,KAAK;AAEvE;;;AAGG;QAC8B,IAAY,CAAA,YAAA,GAAG,KAAK;AAIpC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC3C,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC/C,QAAA,IAAA,CAAA,6BAA6B,GAAG,MAAM,CAAC,6BAA6B,CAAC;AA8EzF;IA3EG,YAAY,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,WAAW,EAAE;;;IAK1B,YAAY,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,cAAc,EAAE;;;IAK7B,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACpB,IAAI,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,SAAS,EAAE;gBAC9C,IAAI,CAAC,cAAc,EAAE;;iBAClB;gBACH,IAAI,CAAC,WAAW,EAAE;;;;IAKtB,WAAW,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;AACnD,QAAA,IAAI,CAAC,mBAAoB,CAAC,iBAAiB,CAAC,aAAa,EAAE;AAE3D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC;QAErG,eAAe,CAAC,MAAK;YACjB,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAC1B,IAAI,CAAC;iBACA,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAoB,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,YAAY;AAChH,iBAAA,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CACpD;SACJ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;IAG3B,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;QAC7B,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC;;IAGhD,YAAY,GAAA;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;AAE7B,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC;QAC1H,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QACrD,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QACnD,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB;QAC5E,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe;QAClE,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;QAC7D,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;AAGjE,IAAA,cAAc,CAAC,MAA6B,EAAA;QAChD,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAoB,CAAC,QAAQ,CAAC,aAAa;QACtE,MAAM,YAAY,GAAG,aAAa,EAAE,aAAa,CAAC,gBAAgB,CAAC;QAEnE,IAAI,CAAC,YAAY,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC;YAC9E;;AAGJ,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAA,EAAA,CAAI,CAAC;AAC9D,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,CAAC,CAAA,EAAA,CAAI,CAAC;QAE7D,IAAI,YAAY,IAAI,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE;AAC7C,YAAA,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK;YAC5D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,GAAG,EAAE,CAAC;YACvF,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,GAAG,EAAE,CAAC;;;8GAlGrF,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAhB,gBAAgB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,YAAA,EAAA,MAAA,CAAA,EAAA,KAAA,EAAA,CAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,oBAAA,EAAA,CAAA,yBAAA,EAAA,sBAAA,CAAA,EAAA,eAAA,EAAA,CAAA,oBAAA,EAAA,iBAAA,CAAA,EAAA,SAAA,EAAA,CAAA,qBAAA,EAAA,WAAA,CAAA,EAAA,aAAA,EAAA,CAAA,yBAAA,EAAA,eAAA,CAAA,EAAA,YAAA,EAAA,CAAA,wBAAA,EAAA,cAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE;AACb,iBAAA;;sBAEI,KAAK;uBAAC,YAAY;;sBAClB,KAAK;uBAAC,iBAAiB;;sBAEvB,KAAK;uBAAC,yBAAyB;;sBAE/B,KAAK;uBAAC,oBAAoB;;sBAC1B,KAAK;uBAAC,qBAAqB;;sBAC3B,KAAK;uBAAC,yBAAyB;;sBAK/B,KAAK;uBAAC,wBAAwB;;sBAY9B,YAAY;uBAAC,YAAY;;sBAOzB,YAAY;uBAAC,YAAY;;sBAOzB,YAAY;uBAAC,OAAO;;;MC1CZ,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBARrB,gBAAgB;YAChB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAJhB,YAAY,CAAA,EAAA,OAAA,EAAA,CAOZ,gBAAgB;YAChB,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAGX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAXrB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAWP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAb5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL;AACH,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACV,gBAAgB;wBAChB;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,gBAAgB;wBAChB;AACH;AACJ,iBAAA;;;AClBD;;AAEG;;;;"}

package/fesm2022/updevs-components-pricing.mjs

@@ -16,29 +16,29 @@ import { UpdPopoverModule } from '@updevs/components/popover';
 
 class PricingCardsComponent {
     constructor() {
-        this.isLoading = input(false);
-        this.items = input.required();
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
         this.selected = output();
         this.textService = inject(TextService);
     }
     selectOption(item) {
         this.selected.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingCardsComponent, selector: "upd-pricing-cards", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n", styles: [":host{display:flex}.row-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}.col-lg{display:flex;flex-direction:column;height:100%;width:100%}upd-card{display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PricingCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PricingCardsComponent, isStandalone: false, selector: "upd-pricing-cards", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n", styles: [":host{display:flex}.row-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}.col-lg{display:flex;flex-direction:column;height:100%;width:100%}upd-card{display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PricingCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n", styles: [":host{display:flex}.row-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}.col-lg{display:flex;flex-direction:column;height:100%;width:100%}upd-card{display:flex;flex-direction:column;height:100%}\n"] }]
-        }] });
+            args: [{ standalone: false, selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n", styles: [":host{display:flex}.row-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}.col-lg{display:flex;flex-direction:column;height:100%;width:100%}upd-card{display:flex;flex-direction:column;height:100%}\n"] }]
+        }], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class PricingTableComponent {
     constructor() {
-        this.isLoading = input(false);
-        this.shouldRemoveCardStyle = input(false);
-        this.title = input();
-        this.description = input();
-        this.items = input.required();
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.shouldRemoveCardStyle = input(false, ...(ngDevMode ? [{ debugName: "shouldRemoveCardStyle" }] : []));
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
         this.selected = output();
         this.tableBodyRows = computed(() => {
             const plans = this.items();
@@ -65,7 +65,7 @@ class PricingTableComponent {
                 }
             }
             return displayRows;
-        });
+        }, ...(ngDevMode ? [{ debugName: "tableBodyRows" }] : []));
         this.textService = inject(TextService);
     }
     selectOption(item) {
@@ -75,17 +75,17 @@ class PricingTableComponent {
         const group = item.groupedFeatures?.find(g => g.name === groupName);
         return group?.features.find(f => f.text === featureText);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingTableComponent, selector: "upd-pricing-table", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, shouldRemoveCardStyle: { classPropertyName: "shouldRemoveCardStyle", publicName: "shouldRemoveCardStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PricingTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PricingTableComponent, isStandalone: false, selector: "upd-pricing-table", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, shouldRemoveCardStyle: { classPropertyName: "shouldRemoveCardStyle", publicName: "shouldRemoveCardStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PricingTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-pricing-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }] });
+            args: [{ standalone: false, selector: 'upd-pricing-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], shouldRemoveCardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRemoveCardStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class UpdPricingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdPricingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdPricingModule, declarations: [PricingCardsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdPricingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdPricingModule, declarations: [PricingCardsComponent,
             PricingTableComponent], imports: [CommonModule,
             UpdCardModule,
             UpdIconsModule,
@@ -93,14 +93,14 @@ class UpdPricingModule {
             UpdBadgeModule,
             UpdPopoverModule], exports: [PricingCardsComponent,
             PricingTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdPricingModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdPricingModule, imports: [CommonModule,
             UpdCardModule,
             UpdIconsModule,
             UpdButtonModule,
             UpdBadgeModule,
             UpdPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdPricingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdPricingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/updevs-components-pricing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-pricing.mjs","sources":["../../../../libs/components/pricing/src/pricing-cards/pricing-cards.component.ts","../../../../libs/components/pricing/src/pricing-cards/pricing-cards.component.html","../../../../libs/components/pricing/src/pricing-table/pricing-table.component.ts","../../../../libs/components/pricing/src/pricing-table/pricing-table.component.html","../../../../libs/components/pricing/src/upd-pricing.module.ts","../../../../libs/components/pricing/src/updevs-components-pricing.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from '../models/price-item.model';\n\n@Component({\n    selector: 'upd-pricing-cards',\n    templateUrl: './pricing-cards.component.html',\n    styleUrl: './pricing-cards.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingCardsComponent {\n    readonly isLoading = input<boolean>(false);\n    readonly items = input.required<PriceItemModel[]>();\n    readonly selected = output<PriceItemModel>();\n\n    readonly textService = inject(TextService);\n\n    selectOption(item: PriceItemModel): void {\n        this.selected.emit(item);\n    }\n}\n","<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n","import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from '../models/price-item.model';\n\ntype DisplayRow =\n    | { isHeader: true; name: string }\n    | { isHeader: false; text: string; extraInfo?: string; cells: { isIncluded: boolean; itemDescription?: string }[] };\n\n@Component({\n    selector: 'upd-pricing-table',\n    templateUrl: './pricing-table.component.html',\n    styleUrl: './pricing-table.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingTableComponent {\n    readonly isLoading = input<boolean>(false);\n    readonly shouldRemoveCardStyle = input<boolean>(false);\n    readonly title = input<string>();\n    readonly description = input<string>();\n    readonly items = input.required<PriceItemModel[]>();\n    readonly selected = output<PriceItemModel>();\n\n    readonly tableBodyRows = computed<DisplayRow[]>(() => {\n        const plans = this.items();\n\n        if (!plans || plans.length === 0) {\n            return [];\n        }\n\n        const displayRows: DisplayRow[] = [];\n        const featureTemplate = plans[0].groupedFeatures || [];\n\n        for (const group of featureTemplate) {\n            displayRows.push({ isHeader: true, name: group.name });\n\n            for (const feature of group.features) {\n                displayRows.push({\n                    isHeader: false,\n                    text: feature.text,\n                    extraInfo: feature.extraInfo,\n                    cells: plans.map(plan => {\n                        const planFeature = this.findFeature(plan, group.name, feature.text);\n                        return {\n                            isIncluded: !!planFeature?.isIncluded,\n                            itemDescription: planFeature?.itemDescription\n                        };\n                    })\n                });\n            }\n        }\n\n        return displayRows;\n    });\n    readonly textService = inject(TextService);\n\n    selectOption(item: PriceItemModel): void {\n        this.selected.emit(item);\n    }\n\n    private findFeature(item: PriceItemModel, groupName: string, featureText: string) {\n        const group = item.groupedFeatures?.find(g => g.name === groupName);\n        return group?.features.find(f => f.text === featureText);\n    }\n}\n","<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdCardModule } from '@updevs/components/card';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdBadgeModule } from '@updevs/components/badge';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { PricingCardsComponent } from './pricing-cards/pricing-cards.component';\nimport { PricingTableComponent } from './pricing-table/pricing-table.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdCardModule,\n        UpdIconsModule,\n        UpdButtonModule,\n        UpdBadgeModule,\n        UpdPopoverModule\n    ],\n    declarations: [\n        PricingCardsComponent,\n        PricingTableComponent\n    ],\n    exports: [\n        PricingCardsComponent,\n        PricingTableComponent\n    ]\n})\nexport class UpdPricingModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3"],"mappings":"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"}
+{"version":3,"file":"updevs-components-pricing.mjs","sources":["../../../../libs/components/pricing/src/pricing-cards/pricing-cards.component.ts","../../../../libs/components/pricing/src/pricing-cards/pricing-cards.component.html","../../../../libs/components/pricing/src/pricing-table/pricing-table.component.ts","../../../../libs/components/pricing/src/pricing-table/pricing-table.component.html","../../../../libs/components/pricing/src/upd-pricing.module.ts","../../../../libs/components/pricing/src/updevs-components-pricing.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from '../models/price-item.model';\n\n@Component({\n    standalone: false,\n    selector: 'upd-pricing-cards',\n    templateUrl: './pricing-cards.component.html',\n    styleUrl: './pricing-cards.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingCardsComponent {\n    readonly isLoading = input<boolean>(false);\n    readonly items = input.required<PriceItemModel[]>();\n    readonly selected = output<PriceItemModel>();\n\n    readonly textService = inject(TextService);\n\n    selectOption(item: PriceItemModel): void {\n        this.selected.emit(item);\n    }\n}\n","<div class=\"row row-cards\">\n    @for (item of items(); track item.id) {\n        <div class=\"col-lg col-sm-6\">\n            <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n                [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n                <ng-template updCardHeader>\n                    <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n                    <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n                        @for (tag of item.tags; track tag.text.text) {\n                            <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n                        }\n                    </div>\n                </ng-template>\n\n                <div class=\"d-flex flex-column h-100\">\n                    <div>\n                        <div class=\"display-5 fw-bold mb-3\" [class.text-center]=\"item.isPriceCentered\" [innerHTML]=\"item.price\"></div>\n\n                        @if ((item.groupedFeatures?.length || 0) > 0) {\n                            @for (group of item.groupedFeatures; track group.name) {\n                                <div class=\"bg-surface-tertiary\">\n                                    <span class=\"subheader\">{{ group.name }}</span>\n                                </div>\n                                <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                    [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n                            }\n                        } @else {\n                            <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n                                [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n                        }\n                    </div>\n\n                    <div class=\"flex-grow-1\"></div>\n\n                    @if (!!item.description) {\n                        <div class=\"text-secondary mb-3\" [class.text-center]=\"item.isPriceCentered\"\n                            [innerHTML]=\"item.description\"></div>\n                    }\n\n                    <div class=\"text-center mt-4\">\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </div>\n                </div>\n            </upd-card>\n        </div>\n    }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n    <ul class=\"list-unstyled lh-lg\">\n        @for (feature of features; track feature.text) {\n            <li [class.fw-bold]=\"feature.isHighlighted\">\n                @if (feature.isIncluded) {\n                    <upd-icon tablerIcon=\"check\" tablerIconWeight=\"bold\" colorClass=\"text-success\"></upd-icon>\n                } @else {\n                    <upd-icon tablerIcon=\"minus\" tablerIconWeight=\"bold\" colorClass=\"text-secondary\"></upd-icon>\n                }\n\n                <span class=\"ms-2\" [innerHTML]=\"feature.text\" [class.text-secondary]=\"!feature.isIncluded\"></span>\n\n                @if (!!feature.extraInfo) {\n                    <span [updPopover]=\"feature.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                        <upd-icon tablerIcon=\"info-circle\" />\n                    </span>\n                }\n            </li>\n        }\n    </ul>\n</ng-template>\n","import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from '../models/price-item.model';\n\ntype DisplayRow =\n    | { isHeader: true; name: string }\n    | { isHeader: false; text: string; extraInfo?: string; cells: { isIncluded: boolean; itemDescription?: string }[] };\n\n@Component({\n    standalone: false,\n    selector: 'upd-pricing-table',\n    templateUrl: './pricing-table.component.html',\n    styleUrl: './pricing-table.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingTableComponent {\n    readonly isLoading = input<boolean>(false);\n    readonly shouldRemoveCardStyle = input<boolean>(false);\n    readonly title = input<string>();\n    readonly description = input<string>();\n    readonly items = input.required<PriceItemModel[]>();\n    readonly selected = output<PriceItemModel>();\n\n    readonly tableBodyRows = computed<DisplayRow[]>(() => {\n        const plans = this.items();\n\n        if (!plans || plans.length === 0) {\n            return [];\n        }\n\n        const displayRows: DisplayRow[] = [];\n        const featureTemplate = plans[0].groupedFeatures || [];\n\n        for (const group of featureTemplate) {\n            displayRows.push({ isHeader: true, name: group.name });\n\n            for (const feature of group.features) {\n                displayRows.push({\n                    isHeader: false,\n                    text: feature.text,\n                    extraInfo: feature.extraInfo,\n                    cells: plans.map(plan => {\n                        const planFeature = this.findFeature(plan, group.name, feature.text);\n                        return {\n                            isIncluded: !!planFeature?.isIncluded,\n                            itemDescription: planFeature?.itemDescription\n                        };\n                    })\n                });\n            }\n        }\n\n        return displayRows;\n    });\n    readonly textService = inject(TextService);\n\n    selectOption(item: PriceItemModel): void {\n        this.selected.emit(item);\n    }\n\n    private findFeature(item: PriceItemModel, groupName: string, featureText: string) {\n        const group = item.groupedFeatures?.find(g => g.name === groupName);\n        return group?.features.find(f => f.text === featureText);\n    }\n}\n","<div [class.card]=\"!shouldRemoveCardStyle()\">\n    <div class=\"table-responsive\">\n        <table class=\"table table-vcenter table-bordered table-nowrap card-table\">\n            <thead>\n            <tr>\n                <td class=\"w-50\">\n                    @if (!!title() || !!description()) {\n                        @if (!!title()) {\n                            <h2 [innerHTML]=\"title()\"></h2>\n                        }\n\n                        @if (!!description()) {\n                            <div class=\"text-secondary text-wrap\" [innerHTML]=\"description()\"></div>\n                        }\n                    }\n                </td>\n                @for (item of items(); track item.id) {\n                    <td class=\"text-center\">\n                        <div class=\"text-uppercase text-secondary font-weight-medium\" [innerHTML]=\"item.title\"></div>\n                        <div class=\"display-6 fw-bold my-3\" [innerHTML]=\"item.price\"></div>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </thead>\n            <tbody>\n                @for (row of tableBodyRows(); track row.isHeader ? row.name : row.text) {\n                    @if (row.isHeader) {\n                        <tr class=\"bg-surface-tertiary\">\n                            <th [attr.colspan]=\"items().length + 1\" class=\"subheader\" [innerHTML]=\"row.name\"></th>\n                        </tr>\n                    } @else {\n                        <tr>\n                            <td>\n                                <span [innerHTML]=\"row.text\"></span>\n                                @if (!!row.extraInfo) {\n                                    <span [updPopover]=\"row.extraInfo\" [updPopoverActAsTooltip]=\"true\">\n                                        <upd-icon tablerIcon=\"info-circle\" />\n                                    </span>\n                                }\n                            </td>\n                            @for (cell of row.cells; track $index) {\n                                <td class=\"text-center\">\n                                    @if (!cell.itemDescription) {\n                                        <upd-icon [tablerIcon]=\"cell.isIncluded ? 'check' : 'minus'\" tablerIconWeight=\"bold\"\n                                            [colorClass]=\"cell.isIncluded ? 'text-success' : 'text-secondary'\">\n                                        </upd-icon>\n                                    } @else {\n                                        <span [innerHTML]=\"cell.itemDescription\" [class.text-secondary]=\"!cell.isIncluded\"></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                }\n            </tbody>\n            <tfoot>\n            <tr>\n                <td></td>\n                @for (item of items(); track item.id) {\n                    <td>\n                        <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\" [isLoading]=\"isLoading()\"\n                            [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n                            {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n                        </upd-button>\n                    </td>\n                }\n            </tr>\n            </tfoot>\n        </table>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdCardModule } from '@updevs/components/card';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdBadgeModule } from '@updevs/components/badge';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport { PricingCardsComponent } from './pricing-cards/pricing-cards.component';\nimport { PricingTableComponent } from './pricing-table/pricing-table.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdCardModule,\n        UpdIconsModule,\n        UpdButtonModule,\n        UpdBadgeModule,\n        UpdPopoverModule\n    ],\n    declarations: [\n        PricingCardsComponent,\n        PricingTableComponent\n    ],\n    exports: [\n        PricingCardsComponent,\n        PricingTableComponent\n    ]\n})\nexport class UpdPricingModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3"],"mappings":"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"}