@coolon/angular-ui-powerups 12.4.0-alpha.26 → 12.4.0-alpha.28

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -768,6 +768,32 @@
         __metadata("design:type", Boolean)
     ], BusyOverlayComponent.prototype, "busy", void 0);
 
+    var AbstractCardContainerComponent = /** @class */ (function (_super) {
+        __extends(AbstractCardContainerComponent, _super);
+        function AbstractCardContainerComponent() {
+            return _super.call(this) || this;
+        }
+        AbstractCardContainerComponent.prototype.ngOnInit = function () {
+        };
+        return AbstractCardContainerComponent;
+    }(DisposableComponent));
+    AbstractCardContainerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-card-container',
+                    template: ''
+                },] }
+    ];
+    AbstractCardContainerComponent.ctorParameters = function () { return []; };
+    AbstractCardContainerComponent.propDecorators = {
+        addCardCommand: [{ type: i0.Input }],
+        addCardFace: [{ type: i0.Input }],
+        addCardTemplate: [{ type: i0.ContentChild, args: ['addCardTemplate',] }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+
     /**
      * @example
      * // basic usage
@@ -832,29 +858,92 @@
     var CardContainerComponent = /** @class */ (function (_super) {
         __extends(CardContainerComponent, _super);
         function CardContainerComponent() {
-            return _super.call(this) || this;
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        CardContainerComponent.prototype.ngOnInit = function () {
-        };
         return CardContainerComponent;
-    }(DisposableComponent));
+    }(AbstractCardContainerComponent));
     CardContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
-                    template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
+                    template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n</div>\n",
                     styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
                 },] }
     ];
-    CardContainerComponent.ctorParameters = function () { return []; };
-    CardContainerComponent.propDecorators = {
-        addCardCommand: [{ type: i0.Input }],
-        addCardFace: [{ type: i0.Input }],
-        addCardTemplate: [{ type: i0.ContentChild, args: ["addCardTemplate",] }]
-    };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.Command)
-    ], CardContainerComponent.prototype, "addCardCommand", void 0);
+
+    /**
+     * @example
+     * // basic usage
+     * <aup-card-stack>
+     *   <my-card *ngFor="..."></my-card>
+     * </aup-card-stack>
+     *
+     * // adds an add button with a the '+' icon to the end of the card list.
+     * <aup-card-stack [addCardCommand]="addCard">
+     *   <my-card *ngFor="..."></my-card>
+     * </aup-card-stack>
+     *
+     * // adds an add button with the specified face
+     * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+     *   <my-card *ngFor="..."></my-card>
+     * </aup-card-stack>
+     *
+     * // use the aup-add-card-activity to display as the new card place holder and to run
+     * // the activity inside teh card
+     * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+     *   <my-card *ngFor="..."></my-card>
+     *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+     * </aup-card-stack>
+     *
+     * // adds an add card component using the specified template.  The template
+     * // will fill it's container in the grid.
+     * <aup-card-stack>
+     *   <my-card *ngFor="..."></my-card>
+     *   <ng-template #addCardTemplate>
+     *     <div>This is a new card template, it will the the size of the other cards.</div>
+     *   </ng-template>
+     * </aup-card-stack>
+     *
+     * // sing the default new card styles for your template
+     * @import "../../../../assets/styles";
+     * .my-new-card {
+     *   @include aup-card-stack-new-card-style();
+     *   // OR
+     *   @include aup-card-stack-new-card-style(
+     *      $color: rgba(0,0,0,0.54),
+     *      $background-color: rgba(255,255,255,0.8),
+     *      $hover-color: $color,
+     *      $background-hover-color: white
+     *   )
+     * }
+     * <aup-card-stack>
+     *   <my-card *ngFor="..."></my-card>
+     *   <ng-template #addCardTemplate>
+     *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+     *   </ng-template>
+     * </aup-card-stack>
+     *
+     * // CSS Vars
+     * aup-card-stack {
+     *   --card-gap: var(--card-gap, 16px);
+     *   --card-height: var(--card-height, auto);
+     *   --card-min-height: var(--card-min-height, auto);
+     *   --card-background: var(--card-background, #fcfcfb);
+     * }
+     */
+    var CardStackComponent = /** @class */ (function (_super) {
+        __extends(CardStackComponent, _super);
+        function CardStackComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return CardStackComponent;
+    }(AbstractCardContainerComponent));
+    CardStackComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-card-stack',
+                    template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n",
+                    styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container,.footer{display:flex;flex-direction:column}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                },] }
+    ];
 
     exports.CommandFace = void 0;
     (function (CommandFace) {
@@ -4698,6 +4787,28 @@
     }());
     ComponentsModule.decorators = [
         { type: i0.NgModule, args: [{
+                    imports: [
+                        i2.CommonModule,
+                        animations.BrowserAnimationsModule,
+                        forms.FormsModule,
+                        input.MatInputModule,
+                        formField.MatFormFieldModule,
+                        select.MatSelectModule,
+                        tabs.MatTabsModule,
+                        DirectivesModule,
+                        icon.MatIconModule,
+                        button.MatButtonModule,
+                        checkbox.MatCheckboxModule,
+                        table.MatTableModule,
+                        portal.PortalModule,
+                        scrolling.CdkScrollableModule,
+                        angularFontawesome.FontAwesomeModule,
+                        tooltip.MatTooltipModule,
+                        autocomplete.MatAutocompleteModule,
+                        menu.MatMenuModule,
+                        divider.MatDividerModule,
+                        progressSpinner.MatProgressSpinnerModule
+                    ],
                     declarations: [
                         AbstractInputComponent,
                         AbstractValueInputComponent,
@@ -4746,29 +4857,9 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        AbstractTableComponent
-                    ],
-                    imports: [
-                        i2.CommonModule,
-                        animations.BrowserAnimationsModule,
-                        forms.FormsModule,
-                        input.MatInputModule,
-                        formField.MatFormFieldModule,
-                        select.MatSelectModule,
-                        tabs.MatTabsModule,
-                        DirectivesModule,
-                        icon.MatIconModule,
-                        button.MatButtonModule,
-                        checkbox.MatCheckboxModule,
-                        table.MatTableModule,
-                        portal.PortalModule,
-                        scrolling.CdkScrollableModule,
-                        angularFontawesome.FontAwesomeModule,
-                        tooltip.MatTooltipModule,
-                        autocomplete.MatAutocompleteModule,
-                        menu.MatMenuModule,
-                        divider.MatDividerModule,
-                        progressSpinner.MatProgressSpinnerModule
+                        AbstractTableComponent,
+                        AbstractCardContainerComponent,
+                        CardStackComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -4805,6 +4896,7 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
+                        CardStackComponent,
                     ],
                     providers: [
                         FocusBindingFactory
@@ -5989,12 +6081,12 @@
     /**
      *
      */
-    var AddCardActivityComponent = /** @class */ (function (_super) {
+    exports.AddCardActivityComponent = /** @class */ (function (_super) {
         __extends(AddCardActivityComponent, _super);
         function AddCardActivityComponent(interactionService) {
             var _this = _super.call(this) || this;
-            _this.type = 'modal';
-            _this.renderAs = 'card';
+            _this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
+            _this.renderAs = AddCardActivityComponent.RenderAs.CARD;
             var chain = pectin.Dsl.disposeWith(_this).chain;
             _this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(_this);
             _this.faceList = chain(_this.faceModel).mapToList(function (face) { return [face]; });
@@ -6009,7 +6101,7 @@
         });
         Object.defineProperty(AddCardActivityComponent.prototype, "activityTypeClass", {
             get: function () {
-                return this.type + "-activity";
+                return this.interactionStyle + "-activity";
             },
             enumerable: false,
             configurable: true
@@ -6024,7 +6116,7 @@
         };
         Object.defineProperty(AddCardActivityComponent.prototype, "interactionContext", {
             get: function () {
-                switch (this.type) {
+                switch (this.interactionStyle) {
                     case 'inline':
                         return this.inlineInteractionContext;
                     default:
@@ -6035,30 +6127,40 @@
             configurable: true
         });
         AddCardActivityComponent.prototype.isModal = function () {
-            return this.type === 'modal';
+            return this.interactionStyle === 'modal';
         };
         AddCardActivityComponent.prototype.isInline = function () {
-            return this.type === 'inline';
+            return this.interactionStyle === 'inline';
         };
         return AddCardActivityComponent;
     }(AbstractActivityTriggerComponent));
-    AddCardActivityComponent.decorators = [
+    exports.AddCardActivityComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-add-card-activity',
                     template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n",
-                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host[activityContext=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[activityContext=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[activityContext=inline][renderas=card]:not(.active):hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}:host[activityContext=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[activityContext=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[activityContext=modal][renderas=card]:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host[interactionStyle=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=inline][renderas=card]:not(.active):hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}:host[interactionStyle=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=modal][renderas=card]:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
                 },] }
     ];
-    AddCardActivityComponent.ctorParameters = function () { return [
+    exports.AddCardActivityComponent.ctorParameters = function () { return [
         { type: exports.InteractionService }
     ]; };
-    AddCardActivityComponent.propDecorators = {
+    exports.AddCardActivityComponent.propDecorators = {
         inlineInteractionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
-        type: [{ type: i0.Input }],
+        interactionStyle: [{ type: i0.Input }],
         renderAs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class',] }],
         renderAsClass: [{ type: i0.HostBinding, args: ['class',] }],
         activityTypeClass: [{ type: i0.HostBinding, args: ['class',] }]
     };
+    (function (AddCardActivityComponent) {
+        AddCardActivityComponent.InteractionType = typescriptStringEnums.Enum({
+            MODAL: 'modal',
+            INLINE: 'inline'
+        });
+        AddCardActivityComponent.RenderAs = typescriptStringEnums.Enum({
+            CARD: 'card',
+            BUTTON: 'button'
+        });
+    })(exports.AddCardActivityComponent || (exports.AddCardActivityComponent = {}));
 
     /**
      * Css Vars.
@@ -6618,7 +6720,7 @@
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
                         ModalActivityTriggerComponent,
-                        AddCardActivityComponent,
+                        exports.AddCardActivityComponent,
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6635,7 +6737,7 @@
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
                         ModalActivityTriggerComponent,
-                        AddCardActivityComponent,
+                        exports.AddCardActivityComponent,
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -8740,6 +8842,7 @@
          * to be able to capture the back button on the first page.  If we don't then the back click will exit
          * the app directly and we don't get to ask.
          */
+        // @Trace()
         PlaceRouter.prototype.syncInteractionContextIdsWithRouter = function () {
             var _this = this;
             if (this.navigationSession) {
@@ -8783,12 +8886,6 @@
         { type: UrlService },
         { type: exports.PlaceHistory }
     ]; };
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", Promise)
-    ], exports.PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
     (function (PlaceRouter) {
         var State = /** @class */ (function () {
             function State(activeVisits) {
@@ -9922,6 +10019,7 @@
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
+    exports.AbstractCardContainerComponent = AbstractCardContainerComponent;
     exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
@@ -9939,7 +10037,6 @@
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.ActivityRef = ActivityRef;
     exports.ActivityTitleComponent = ActivityTitleComponent;
-    exports.AddCardActivityComponent = AddCardActivityComponent;
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
@@ -9948,6 +10045,7 @@
     exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
     exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
     exports.CardContainerComponent = CardContainerComponent;
+    exports.CardStackComponent = CardStackComponent;
     exports.CellEditorPortalRef = CellEditorPortalRef;
     exports.CellHeaderPortalRef = CellHeaderPortalRef;
     exports.CellPortalRef = CellPortalRef;