@elderbyte/ngx-starter 15.13.0 → 15.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/card-organizer/card-stack/elder-card-stack.component.mjs +2 -2
- package/fesm2015/elderbyte-ngx-starter.mjs +2 -2
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +2 -2
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss +4 -0
|
@@ -160,10 +160,10 @@ export class ElderCardStackComponent {
|
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
ElderCardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
163
|
-
ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
163
|
+
ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
164
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderCardStackComponent, decorators: [{
|
|
165
165
|
type: Component,
|
|
166
|
-
args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
166
|
+
args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
167
167
|
}], ctorParameters: function () { return []; }, propDecorators: { stackId: [{
|
|
168
168
|
type: Input
|
|
169
169
|
}], headerEnabled: [{
|
|
@@ -11443,10 +11443,10 @@ class ElderCardStackComponent {
|
|
|
11443
11443
|
}
|
|
11444
11444
|
}
|
|
11445
11445
|
ElderCardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11446
|
-
ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11446
|
+
ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11447
11447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderCardStackComponent, decorators: [{
|
|
11448
11448
|
type: Component,
|
|
11449
|
-
args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
11449
|
+
args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n <!-- Header -->\n <header *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n\n <div class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n cdkDrag [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\">\n\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"canRemove\" class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n <mat-icon>close</mat-icon>\n </button>\n\n </div>\n\n </elder-card>\n\n </div>\n\n </div>\n\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{card}}</p>\n </div>\n </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.card.cdk-drag-disabled{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
11450
11450
|
}], ctorParameters: function () { return []; }, propDecorators: { stackId: [{
|
|
11451
11451
|
type: Input
|
|
11452
11452
|
}], headerEnabled: [{
|