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

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

@@ -785,6 +785,13 @@
      *   <my-card *ngFor="..."></my-card>
      * </aup-card-container>
      *
+     * // use the aup-add-card-activity to display as the new card place holder and to run
+     * // the activity inside teh card
+     * <aup-card-container [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-container>
+     *
      * // adds an add card component using the specified template.  The template
      * // will fill it's container in the grid.
      * <aup-card-container>
@@ -5616,6 +5623,13 @@
             });
             return _this;
         }
+        Object.defineProperty(AbstractActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return typescriptUtilities.lang.abstractMethod(this.constructor);
+            },
+            enumerable: false,
+            configurable: true
+        });
         AbstractActivityTriggerComponent.prototype.ngOnInit = function () {
         };
         Object.defineProperty(AbstractActivityTriggerComponent.prototype, "isActive", {
@@ -5857,9 +5871,16 @@
         __extends(ModalActivityTriggerComponent, _super);
         function ModalActivityTriggerComponent(interactionService) {
             var _this = _super.call(this) || this;
-            _this.interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            _this._interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
             return _this;
         }
+        Object.defineProperty(ModalActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ModalActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     ModalActivityTriggerComponent.decorators = [
@@ -5905,6 +5926,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(InPlaceInteractionContextComponent.prototype, "active", {
+            get: function () {
+                return this.isActive();
+            },
+            enumerable: false,
+            configurable: true
+        });
         InPlaceInteractionContextComponent.prototype.ngAfterViewInit = function () {
             this.interactionService.registerInplaceInteractionContext(this);
         };
@@ -5954,7 +5982,82 @@
     ]; };
     InPlaceInteractionContextComponent.propDecorators = {
         activityContainerComponent: [{ type: i0.ViewChild, args: ['activityContainer', { static: true },] }],
-        animateFirstActivity: [{ type: i0.Input }]
+        animateFirstActivity: [{ type: i0.Input }],
+        active: [{ type: i0.HostBinding, args: ["class.active",] }]
+    };
+
+    /**
+     *
+     */
+    var AddCardActivityComponent = /** @class */ (function (_super) {
+        __extends(AddCardActivityComponent, _super);
+        function AddCardActivityComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            _this.type = 'modal';
+            _this.renderAs = 'card';
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            _this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            _this.faceList = chain(_this.faceModel).mapToList(function (face) { return [face]; });
+            return _this;
+        }
+        Object.defineProperty(AddCardActivityComponent.prototype, "renderAsClass", {
+            get: function () {
+                return "render-as-" + this.renderAs;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AddCardActivityComponent.prototype, "activityTypeClass", {
+            get: function () {
+                return this.type + "-activity";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AddCardActivityComponent.prototype.isRenderAsCard = function () {
+            return this.renderAs === 'card';
+        };
+        AddCardActivityComponent.prototype.isRenderAsButton = function () {
+            return this.renderAs === 'button';
+        };
+        AddCardActivityComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(AddCardActivityComponent.prototype, "interactionContext", {
+            get: function () {
+                switch (this.type) {
+                    case 'inline':
+                        return this.inlineInteractionContext;
+                    default:
+                        return this.modalInteractionContext;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AddCardActivityComponent.prototype.isModal = function () {
+            return this.type === 'modal';
+        };
+        AddCardActivityComponent.prototype.isInline = function () {
+            return this.type === 'inline';
+        };
+        return AddCardActivityComponent;
+    }(AbstractActivityTriggerComponent));
+    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}"]
+                },] }
+    ];
+    AddCardActivityComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+    AddCardActivityComponent.propDecorators = {
+        inlineInteractionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
+        type: [{ type: i0.Input }],
+        renderAs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class',] }],
+        renderAsClass: [{ type: i0.HostBinding, args: ['class',] }],
+        activityTypeClass: [{ type: i0.HostBinding, args: ['class',] }]
     };
 
     /**
@@ -6026,6 +6129,13 @@
         function InlineActivityTriggerComponent() {
             return _super.call(this) || this;
         }
+        Object.defineProperty(InlineActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return InlineActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     InlineActivityTriggerComponent.decorators = [
@@ -6037,7 +6147,7 @@
     ];
     InlineActivityTriggerComponent.ctorParameters = function () { return []; };
     InlineActivityTriggerComponent.propDecorators = {
-        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+        _interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
     };
 
     /**
@@ -6443,6 +6553,13 @@
             _this.anchorY = 'bottom';
             return _this;
         }
+        Object.defineProperty(PopupActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return PopupActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     PopupActivityTriggerComponent.decorators = [
@@ -6456,7 +6573,7 @@
     PopupActivityTriggerComponent.propDecorators = {
         anchorX: [{ type: i0.Input }],
         anchorY: [{ type: i0.Input }],
-        interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+        _interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
     };
 
     var InteractionModule = /** @class */ (function () {
@@ -6500,7 +6617,8 @@
                         AbstractActivityTriggerComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent
+                        ModalActivityTriggerComponent,
+                        AddCardActivityComponent,
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6516,7 +6634,8 @@
                         ActivityBodyComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent
+                        ModalActivityTriggerComponent,
+                        AddCardActivityComponent,
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -9820,6 +9939,7 @@
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.ActivityRef = ActivityRef;
     exports.ActivityTitleComponent = ActivityTitleComponent;
+    exports.AddCardActivityComponent = AddCardActivityComponent;
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;