@lowcodeunit/applications-flow-common 1.37.32-new-ent-page → 1.37.35-new-ent-page

package/esm2020/lib/elements/slotted-card/slotted-card.component.mjs

@@ -25,10 +25,10 @@ export class SlottedCardComponent {
     }
 }
 SlottedCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardComponent, deps: [{ token: i1.EaCService }], target: i0.ɵɵFactoryTarget.Component });
-SlottedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SlottedCardComponent, selector: "lcu-slotted-card", inputs: { ActionText: ["action-text", "ActionText"], ActionPath: ["action-path", "ActionPath"], Icon: ["icon", "Icon"], MainSlotDescription: ["main-slot-description", "MainSlotDescription"], MainIcon: ["main-icon", "MainIcon"], ShowMainIcon: ["show-main-icon", "ShowMainIcon"], CardTitle: ["card-title", "CardTitle"], SecondarySlotDescription: ["secondary-slot-description", "SecondarySlotDescription"] }, outputs: { MainActionClicked: "main-action-clicked" }, ngImport: i0, template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}.slotted-card-content{height:inherit}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+SlottedCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SlottedCardComponent, selector: "lcu-slotted-card", inputs: { ActionText: ["action-text", "ActionText"], ActionPath: ["action-path", "ActionPath"], Icon: ["icon", "Icon"], MainSlotDescription: ["main-slot-description", "MainSlotDescription"], MainIcon: ["main-icon", "MainIcon"], ShowMainIcon: ["show-main-icon", "ShowMainIcon"], CardTitle: ["card-title", "CardTitle"], SecondarySlotDescription: ["secondary-slot-description", "SecondarySlotDescription"] }, outputs: { MainActionClicked: "main-action-clicked" }, ngImport: i0, template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lcu-slotted-card', template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}.slotted-card-content{height:inherit}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"] }]
+            args: [{ selector: 'lcu-slotted-card', template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EaCService }]; }, propDecorators: { ActionText: [{
                 type: Input,
                 args: ['action-text']

package/esm2020/lib/elements/slotted-card-lg/slotted-card-lg.component.mjs

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/eac.service";
+import * as i2 from "@angular/material/card";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "@angular/flex-layout/flex";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/material/tooltip";
+import * as i8 from "skeleton-elements/angular";
+export class SlottedCardLgComponent {
+    constructor(eacSvc) {
+        this.eacSvc = eacSvc;
+        this.MainActionClicked = new EventEmitter();
+        this.SkeletonEffect = 'wave';
+        this.MainIcon = 'add';
+        this.ShowMainIcon = true;
+    }
+    get State() {
+        return this.eacSvc.State;
+    }
+    ngOnInit() { }
+    MainActionClickEvent() {
+        this.MainActionClicked.emit({});
+    }
+}
+SlottedCardLgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardLgComponent, deps: [{ token: i1.EaCService }], target: i0.ɵɵFactoryTarget.Component });
+SlottedCardLgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SlottedCardLgComponent, selector: "lcu-slotted-card-lg", inputs: { ActionText: ["action-text", "ActionText"], ActionPath: ["action-path", "ActionPath"], Icon: ["icon", "Icon"], MainSlotDescription: ["main-slot-description", "MainSlotDescription"], MainIcon: ["main-icon", "MainIcon"], ShowMainIcon: ["show-main-icon", "ShowMainIcon"], CardTitle: ["card-title", "CardTitle"], SecondarySlotDescription: ["secondary-slot-description", "SecondarySlotDescription"] }, outputs: { MainActionClicked: "main-action-clicked" }, ngImport: i0, template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}.slotted-card-content{height:430px}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2.MatCardHeader, selector: "mat-card-header" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.SkeletonTextDirective, selector: "[skeleton-text]", inputs: ["effect"] }, { type: i2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SlottedCardLgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lcu-slotted-card-lg', template: "<mat-card class=\"col-info-card\">\n    <mat-card-header\n        class=\"slotted-card-header\"\n        fxLayoutAlign=\"space-between center\"\n    >\n        <!-- mat-card-avatar -->\n        <mat-card-title fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <!-- <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon> -->\n            <div class=\"card-title\">{{ CardTitle }}s</div>\n        </mat-card-title>\n\n        <button\n            mat-raised-button\n            class=\"pointer\"\n            (click)=\"MainActionClickEvent()\"\n            matTooltip=\"Add {{ CardTitle }}\"\n            *ngIf=\"!ActionPath && !State?.Loading && ShowMainIcon\"\n            color=\"accent\"\n        >\n            <!-- <mat-icon>\n                {{ MainIcon }}\n            </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n\n        <button\n            mat-raised-button\n            color=\"accent\"\n            skeleton-text\n            [effect]=\"SkeletonEffect\"\n            class=\"header-icon\"\n            *ngIf=\"State?.Loading\"\n        >\n            <!-- <mat-icon> add </mat-icon> -->\n            <div>Add {{ CardTitle }}</div>\n        </button>\n    </mat-card-header>\n\n    <!-- SKELETON CONTENT -->\n\n    <ng-container *ngIf=\"State?.Loading\">\n        <mat-card-content>\n            <div class=\"slot-main-container\">\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    Descrption text\n                </div>\n\n                <div class=\"slot-main\">\n                    <ng-content\n                        skeleton-block\n                        [effect]=\"SkeletonEffect\"\n                    ></ng-content>\n                </div>\n            </div>\n\n            <div\n                class=\"slot-secondary\"\n                fxLayout=\"row\"\n                fxLayoutAlign=\"space-between center\"\n            >\n                <div class=\"slot-header-container\">\n                    <div class=\"slot-header\">\n                        <div\n                            skeleton-text\n                            [effect]=\"SkeletonEffect\"\n                            class=\"skeleton-item\"\n                        >\n                            Name of the content\n                        </div>\n                    </div>\n\n                    <div\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        Description\n                    </div>\n                </div>\n\n                <div class=\"slot-actions-container\" fxLayout=\"row\">\n                    <mat-icon\n                        skeleton-text\n                        [effect]=\"SkeletonEffect\"\n                        class=\"skeleton-item\"\n                    >\n                        edit\n                    </mat-icon>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div\n                    skeleton-text\n                    [effect]=\"SkeletonEffect\"\n                    class=\"header-description\"\n                >\n                    {{ SecondarySlotDescription }}\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions fxLayoutAlign=\"center center\">\n            <div skeleton-text [effect]=\"SkeletonEffect\" class=\"skeleton-item\">\n                {{ ActionText }}\n            </div>\n        </mat-card-actions>\n    </ng-container>\n    <!-- END SKELETON CONTENT -->\n\n    <!-- ACTUAL CONTENT -->\n\n    <ng-container *ngIf=\"!State?.Loading\">\n        <mat-card-content class=\"slotted-card-content\">\n            <div class=\"slot-main-container\">\n                <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n                <div class=\"slot-main\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n\n            <div\n                *ngIf=\"SecondarySlotDescription\"\n                class=\"slot-secondary-container\"\n            >\n                <div class=\"header-description\">\n                    {{ SecondarySlotDescription }}\n                </div>\n\n                <div class=\"slot-secondary\">\n                    <ng-content select=\"[secondary]\"></ng-content>\n                </div>\n            </div>\n        </mat-card-content>\n\n        <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n            <a\n                mat-button\n                *ngIf=\"ActionPath\"\n                class=\"slotted-card-action-btn\"\n                [href]=\"ActionPath\"\n                color=\"primary\"\n                >{{ ActionText }}\n            </a>\n\n            <a\n                mat-button\n                *ngIf=\"!ActionPath\"\n                class=\"slotted-card-action-btn\"\n                (click)=\"MainActionClickEvent()\"\n                color=\"primary\"\n            >\n                {{ ActionText }}\n            </a>\n        </mat-card-actions>\n    </ng-container>\n</mat-card>\n", styles: [".col-info-card{margin:20px;padding:0;height:inherit;overflow-y:hidden}.slotted-card-header{padding:5px}.slotted-card-content{height:430px}::ng-deep .slotted-card-header .mat-card-header-text{margin:0!important}::ng-deep .slotted-card-header mat-card-title{margin-bottom:0!important}.card-title{font-size:22px;margin-bottom:0!important}.pointer{cursor:pointer}.header-description{background-color:#b9dddd;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{width:100%}.skeleton-item{margin:10px}.mat-card-avatar{width:75%!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.EaCService }]; }, propDecorators: { ActionText: [{
+                type: Input,
+                args: ['action-text']
+            }], ActionPath: [{
+                type: Input,
+                args: ['action-path']
+            }], Icon: [{
+                type: Input,
+                args: ['icon']
+            }], MainSlotDescription: [{
+                type: Input,
+                args: ['main-slot-description']
+            }], MainIcon: [{
+                type: Input,
+                args: ['main-icon']
+            }], ShowMainIcon: [{
+                type: Input,
+                args: ['show-main-icon']
+            }], CardTitle: [{
+                type: Input,
+                args: ['card-title']
+            }], SecondarySlotDescription: [{
+                type: Input,
+                args: ['secondary-slot-description']
+            }], MainActionClicked: [{
+                type: Output,
+                args: ['main-action-clicked']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xvdHRlZC1jYXJkLWxnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbW1vbi9zcmMvbGliL2VsZW1lbnRzL3Nsb3R0ZWQtY2FyZC1sZy9zbG90dGVkLWNhcmQtbGcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tbW9uL3NyYy9saWIvZWxlbWVudHMvc2xvdHRlZC1jYXJkLWxnL3Nsb3R0ZWQtY2FyZC1sZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7O0FBUy9FLE1BQU0sT0FBTyxzQkFBc0I7SUFrQy9CLFlBQXNCLE1BQWtCO1FBQWxCLFdBQU0sR0FBTixNQUFNLENBQVk7UUFDcEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDNUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxNQUFNLENBQUM7UUFFN0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFFdEIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7SUFDN0IsQ0FBQztJQWJELElBQVcsS0FBSztRQUNaLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDN0IsQ0FBQztJQWFNLFFBQVEsS0FBVSxDQUFDO0lBRW5CLG9CQUFvQjtRQUN2QixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7O21IQS9DUSxzQkFBc0I7dUdBQXRCLHNCQUFzQix3Z0JDVG5DLGd5S0FxS0E7MkZENUphLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDSSxxQkFBcUI7aUdBTXhCLFVBQVU7c0JBRGhCLEtBQUs7dUJBQUMsYUFBYTtnQkFJYixVQUFVO3NCQURoQixLQUFLO3VCQUFDLGFBQWE7Z0JBSWIsSUFBSTtzQkFEVixLQUFLO3VCQUFDLE1BQU07Z0JBSU4sbUJBQW1CO3NCQUR6QixLQUFLO3VCQUFDLHVCQUF1QjtnQkFJdkIsUUFBUTtzQkFEZCxLQUFLO3VCQUFDLFdBQVc7Z0JBSVgsWUFBWTtzQkFEbEIsS0FBSzt1QkFBQyxnQkFBZ0I7Z0JBSWhCLFNBQVM7c0JBRGYsS0FBSzt1QkFBQyxZQUFZO2dCQUlaLHdCQUF3QjtzQkFEOUIsS0FBSzt1QkFBQyw0QkFBNEI7Z0JBSTVCLGlCQUFpQjtzQkFEdkIsTUFBTTt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFYUNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvZWFjLnNlcnZpY2UnO1xuaW1wb3J0IHsgQXBwbGljYXRpb25zRmxvd1N0YXRlIH0gZnJvbSAnLi4vLi4vc3RhdGUvYXBwbGljYXRpb25zLWZsb3cuc3RhdGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2xjdS1zbG90dGVkLWNhcmQtbGcnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zbG90dGVkLWNhcmQtbGcuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3Nsb3R0ZWQtY2FyZC1sZy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTbG90dGVkQ2FyZExnQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoJ2FjdGlvbi10ZXh0JylcbiAgICBwdWJsaWMgQWN0aW9uVGV4dDogc3RyaW5nO1xuXG4gICAgQElucHV0KCdhY3Rpb24tcGF0aCcpXG4gICAgcHVibGljIEFjdGlvblBhdGg6IHN0cmluZztcblxuICAgIEBJbnB1dCgnaWNvbicpXG4gICAgcHVibGljIEljb246IHN0cmluZztcblxuICAgIEBJbnB1dCgnbWFpbi1zbG90LWRlc2NyaXB0aW9uJylcbiAgICBwdWJsaWMgTWFpblNsb3REZXNjcmlwdGlvbjogc3RyaW5nO1xuXG4gICAgQElucHV0KCdtYWluLWljb24nKVxuICAgIHB1YmxpYyBNYWluSWNvbjogc3RyaW5nO1xuXG4gICAgQElucHV0KCdzaG93LW1haW4taWNvbicpXG4gICAgcHVibGljIFNob3dNYWluSWNvbjogYm9vbGVhbjtcblxuICAgIEBJbnB1dCgnY2FyZC10aXRsZScpXG4gICAgcHVibGljIENhcmRUaXRsZTogc3RyaW5nO1xuXG4gICAgQElucHV0KCdzZWNvbmRhcnktc2xvdC1kZXNjcmlwdGlvbicpXG4gICAgcHVibGljIFNlY29uZGFyeVNsb3REZXNjcmlwdGlvbjogc3RyaW5nO1xuXG4gICAgQE91dHB1dCgnbWFpbi1hY3Rpb24tY2xpY2tlZCcpXG4gICAgcHVibGljIE1haW5BY3Rpb25DbGlja2VkOiBFdmVudEVtaXR0ZXI8e30+O1xuXG4gICAgcHVibGljIGdldCBTdGF0ZSgpOiBBcHBsaWNhdGlvbnNGbG93U3RhdGUge1xuICAgICAgICByZXR1cm4gdGhpcy5lYWNTdmMuU3RhdGU7XG4gICAgfVxuXG4gICAgcHVibGljIFNrZWxldG9uRWZmZWN0OiBzdHJpbmc7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZWFjU3ZjOiBFYUNTZXJ2aWNlKSB7XG4gICAgICAgIHRoaXMuTWFpbkFjdGlvbkNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gICAgICAgIHRoaXMuU2tlbGV0b25FZmZlY3QgPSAnd2F2ZSc7XG5cbiAgICAgICAgdGhpcy5NYWluSWNvbiA9ICdhZGQnO1xuXG4gICAgICAgIHRoaXMuU2hvd01haW5JY29uID0gdHJ1ZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gICAgcHVibGljIE1haW5BY3Rpb25DbGlja0V2ZW50KCkge1xuICAgICAgICB0aGlzLk1haW5BY3Rpb25DbGlja2VkLmVtaXQoe30pO1xuICAgIH1cbn1cbiIsIjxtYXQtY2FyZCBjbGFzcz1cImNvbC1pbmZvLWNhcmRcIj5cbiAgICA8bWF0LWNhcmQtaGVhZGVyXG4gICAgICAgIGNsYXNzPVwic2xvdHRlZC1jYXJkLWhlYWRlclwiXG4gICAgICAgIGZ4TGF5b3V0QWxpZ249XCJzcGFjZS1iZXR3ZWVuIGNlbnRlclwiXG4gICAgPlxuICAgICAgICA8IS0tIG1hdC1jYXJkLWF2YXRhciAtLT5cbiAgICAgICAgPG1hdC1jYXJkLXRpdGxlIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IGNlbnRlclwiPlxuICAgICAgICAgICAgPCEtLSA8bWF0LWljb24gY2xhc3M9XCJoZWFkZXItaWNvblwiPnt7IEljb24gfX08L21hdC1pY29uPiAtLT5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlXCI+e3sgQ2FyZFRpdGxlIH19czwvZGl2PlxuICAgICAgICA8L21hdC1jYXJkLXRpdGxlPlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICAgICAgICBjbGFzcz1cInBvaW50ZXJcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIk1haW5BY3Rpb25DbGlja0V2ZW50KClcIlxuICAgICAgICAgICAgbWF0VG9vbHRpcD1cIkFkZCB7eyBDYXJkVGl0bGUgfX1cIlxuICAgICAgICAgICAgKm5nSWY9XCIhQWN0aW9uUGF0aCAmJiAhU3RhdGU/LkxvYWRpbmcgJiYgU2hvd01haW5JY29uXCJcbiAgICAgICAgICAgIGNvbG9yPVwiYWNjZW50XCJcbiAgICAgICAgPlxuICAgICAgICAgICAgPCEtLSA8bWF0LWljb24+XG4gICAgICAgICAgICAgICAge3sgTWFpbkljb24gfX1cbiAgICAgICAgICAgIDwvbWF0LWljb24+IC0tPlxuICAgICAgICAgICAgPGRpdj5BZGQge3sgQ2FyZFRpdGxlIH19PC9kaXY+XG4gICAgICAgIDwvYnV0dG9uPlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICAgICAgICBjb2xvcj1cImFjY2VudFwiXG4gICAgICAgICAgICBza2VsZXRvbi10ZXh0XG4gICAgICAgICAgICBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCJcbiAgICAgICAgICAgIGNsYXNzPVwiaGVhZGVyLWljb25cIlxuICAgICAgICAgICAgKm5nSWY9XCJTdGF0ZT8uTG9hZGluZ1wiXG4gICAgICAgID5cbiAgICAgICAgICAgIDwhLS0gPG1hdC1pY29uPiBhZGQgPC9tYXQtaWNvbj4gLS0+XG4gICAgICAgICAgICA8ZGl2PkFkZCB7eyBDYXJkVGl0bGUgfX08L2Rpdj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgPC9tYXQtY2FyZC1oZWFkZXI+XG5cbiAgICA8IS0tIFNLRUxFVE9OIENPTlRFTlQgLS0+XG5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiU3RhdGU/LkxvYWRpbmdcIj5cbiAgICAgICAgPG1hdC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1tYWluLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgc2tlbGV0b24tdGV4dFxuICAgICAgICAgICAgICAgICAgICBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJoZWFkZXItZGVzY3JpcHRpb25cIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgRGVzY3JwdGlvbiB0ZXh0XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1tYWluXCI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250ZW50XG4gICAgICAgICAgICAgICAgICAgICAgICBza2VsZXRvbi1ibG9ja1xuICAgICAgICAgICAgICAgICAgICAgICAgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiXG4gICAgICAgICAgICAgICAgICAgID48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIGNsYXNzPVwic2xvdC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgIGZ4TGF5b3V0PVwicm93XCJcbiAgICAgICAgICAgICAgICBmeExheW91dEFsaWduPVwic3BhY2UtYmV0d2VlbiBjZW50ZXJcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LWhlYWRlci1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtaGVhZGVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc2tlbGV0b24tdGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic2tlbGV0b24taXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgTmFtZSBvZiB0aGUgY29udGVudFxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICAgIHNrZWxldG9uLXRleHRcbiAgICAgICAgICAgICAgICAgICAgICAgIFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIlxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJza2VsZXRvbi1pdGVtXCJcbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgRGVzY3JpcHRpb25cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xvdC1hY3Rpb25zLWNvbnRhaW5lclwiIGZ4TGF5b3V0PVwicm93XCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvblxuICAgICAgICAgICAgICAgICAgICAgICAgc2tlbGV0b24tdGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgW2VmZmVjdF09XCJTa2VsZXRvbkVmZmVjdFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cInNrZWxldG9uLWl0ZW1cIlxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICBlZGl0XG4gICAgICAgICAgICAgICAgICAgIDwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInNsb3Qtc2Vjb25kYXJ5LWNvbnRhaW5lclwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICBza2VsZXRvbi10ZXh0XG4gICAgICAgICAgICAgICAgICAgIFtlZmZlY3RdPVwiU2tlbGV0b25FZmZlY3RcIlxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiXG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7eyBTZWNvbmRhcnlTbG90RGVzY3JpcHRpb24gfX1cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XG5cbiAgICAgICAgPG1hdC1jYXJkLWFjdGlvbnMgZnhMYXlvdXRBbGlnbj1cImNlbnRlciBjZW50ZXJcIj5cbiAgICAgICAgICAgIDxkaXYgc2tlbGV0b24tdGV4dCBbZWZmZWN0XT1cIlNrZWxldG9uRWZmZWN0XCIgY2xhc3M9XCJza2VsZXRvbi1pdGVtXCI+XG4gICAgICAgICAgICAgICAge3sgQWN0aW9uVGV4dCB9fVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbWF0LWNhcmQtYWN0aW9ucz5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8IS0tIEVORCBTS0VMRVRPTiBDT05URU5UIC0tPlxuXG4gICAgPCEtLSBBQ1RVQUwgQ09OVEVOVCAtLT5cblxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhU3RhdGU/LkxvYWRpbmdcIj5cbiAgICAgICAgPG1hdC1jYXJkLWNvbnRlbnQgY2xhc3M9XCJzbG90dGVkLWNhcmQtY29udGVudFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtbWFpbi1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyLWRlc2NyaXB0aW9uXCI+e3sgTWFpblNsb3REZXNjcmlwdGlvbiB9fTwvZGl2PlxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNsb3QtbWFpblwiPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICpuZ0lmPVwiU2Vjb25kYXJ5U2xvdERlc2NyaXB0aW9uXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInNsb3Qtc2Vjb25kYXJ5LWNvbnRhaW5lclwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAgICAgICAgICB7eyBTZWNvbmRhcnlTbG90RGVzY3JpcHRpb24gfX1cbiAgICAgICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbG90LXNlY29uZGFyeVwiPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbc2Vjb25kYXJ5XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XG5cbiAgICAgICAgPG1hdC1jYXJkLWFjdGlvbnMgKm5nSWY9XCJBY3Rpb25UZXh0XCIgZnhMYXlvdXRBbGlnbj1cImNlbnRlclwiPlxuICAgICAgICAgICAgPGFcbiAgICAgICAgICAgICAgICBtYXQtYnV0dG9uXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJBY3Rpb25QYXRoXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInNsb3R0ZWQtY2FyZC1hY3Rpb24tYnRuXCJcbiAgICAgICAgICAgICAgICBbaHJlZl09XCJBY3Rpb25QYXRoXCJcbiAgICAgICAgICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICAgICAgICAgID57eyBBY3Rpb25UZXh0IH19XG4gICAgICAgICAgICA8L2E+XG5cbiAgICAgICAgICAgIDxhXG4gICAgICAgICAgICAgICAgbWF0LWJ1dHRvblxuICAgICAgICAgICAgICAgICpuZ0lmPVwiIUFjdGlvblBhdGhcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwic2xvdHRlZC1jYXJkLWFjdGlvbi1idG5cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJNYWluQWN0aW9uQ2xpY2tFdmVudCgpXCJcbiAgICAgICAgICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt7IEFjdGlvblRleHQgfX1cbiAgICAgICAgICAgIDwvYT5cbiAgICAgICAgPC9tYXQtY2FyZC1hY3Rpb25zPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9tYXQtY2FyZD5cbiJdfQ==