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

package/lib/components/cards/abstract-card-container.component.d.ts

@@ -0,0 +1,11 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { Command } from '@coolon/pectin';
+import { CommandFace } from '../commands/command-face';
+import { DisposableComponent } from '../disposable-component';
+export declare class AbstractCardContainerComponent extends DisposableComponent implements OnInit {
+    addCardCommand: Command<any>;
+    addCardFace: CommandFace;
+    addCardTemplate: TemplateRef<any>;
+    constructor();
+    ngOnInit(): void;
+}

package/lib/components/{card-container → cards/card-container}/card-container.component.d.ts

@@ -1,7 +1,4 @@
-import { OnInit, TemplateRef } from '@angular/core';
-import { Command } from '@coolon/pectin';
-import { CommandFace } from '../commands/command-face';
-import { DisposableComponent } from '../disposable-component';
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
 /**
  * @example
  * // basic usage
@@ -63,10 +60,5 @@ import { DisposableComponent } from '../disposable-component';
  *   --card-background: var(--card-background, #fcfcfb);
  * }
  */
-export declare class CardContainerComponent extends DisposableComponent implements OnInit {
-    addCardCommand: Command<any>;
-    addCardFace: CommandFace;
-    addCardTemplate: TemplateRef<any>;
-    constructor();
-    ngOnInit(): void;
+export declare class CardContainerComponent extends AbstractCardContainerComponent {
 }

package/lib/components/cards/card-stack/card-stack.component.d.ts

@@ -0,0 +1,63 @@
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
+/**
+ * @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);
+ * }
+ */
+export declare class CardStackComponent extends AbstractCardContainerComponent {
+}

package/lib/components/exports.d.ts

@@ -8,7 +8,9 @@ export * from "./focusable.component";
 export * from "./resize-aware.component";
 export * from "./track-by";
 export * from "./busy-overlay/busy-overlay.component";
-export * from "./card-container/card-container.component";
+export * from "./cards/abstract-card-container.component";
+export * from "./cards/card-container/card-container.component";
+export * from "./cards/card-stack/card-stack.component";
 export * from "./commands/command-face";
 export * from "./commands/flex.component";
 export * from "./commands/separator.component";

package/lib/interaction/components/add-card-activity/add-card-activity.component.d.ts

@@ -1,5 +1,6 @@
 import { OnInit } from '@angular/core';
 import { ListModelChain } from '@coolon/pectin';
+import { Enum } from 'typescript-string-enums';
 import { CommandFace } from '../../../components/commands/command-face';
 import { InteractionContext } from '../../interaction-context';
 import { InteractionService } from '../../services/interaction.service';
@@ -10,8 +11,8 @@ import { AbstractActivityTriggerComponent } from '../activity-triggers/abstract-
 export declare class AddCardActivityComponent extends AbstractActivityTriggerComponent implements OnInit {
     private modalInteractionContext;
     inlineInteractionContext: InteractionContext;
-    type: 'inline' | 'modal';
-    renderAs: 'card' | 'button';
+    interactionStyle: AddCardActivityComponent.InteractionType;
+    renderAs: AddCardActivityComponent.RenderAs;
     readonly faceList: ListModelChain<CommandFace>;
     get renderAsClass(): string;
     get activityTypeClass(): string;
@@ -23,3 +24,15 @@ export declare class AddCardActivityComponent extends AbstractActivityTriggerCom
     isModal(): boolean;
     isInline(): boolean;
 }
+export declare namespace AddCardActivityComponent {
+    const InteractionType: {
+        MODAL: "modal";
+        INLINE: "inline";
+    };
+    type InteractionType = Enum<typeof InteractionType>;
+    const RenderAs: {
+        CARD: "card";
+        BUTTON: "button";
+    };
+    type RenderAs = Enum<typeof RenderAs>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coolon/angular-ui-powerups",
-  "version": "12.4.0-alpha.27",
+  "version": "12.4.0-alpha.28",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "@coolon/typescript-utilities": "^2.2.0",

package/schematics/activity/templates/component/__name@dasherize__.component.html.template

@@ -1,4 +1,4 @@
-<aup-activity-title><%=name%></aup-activity-title>
+<aup-activity-title>{{i18n.title()}}</aup-activity-title>
 <aup-activity-body>
   <p><%=name%> works!</p>
 </aup-activity-body>

package/schematics/activity/templates/component/__name@dasherize__.component.ts.template

@@ -8,11 +8,11 @@ import { I18n } from '<%=pathToRoot%>/i18n';
   templateUrl: './<%=dasherize(name)%>.component.html',
   styleUrls: ['./<%=dasherize(name)%>.component.scss'],
 })
-export class <%=capitalize(camelize(name))%>Component extends Activity<<%=capitalize(camelize(name))%>.Data, void> implements OnInit {
+export class <%=capitalize(camelize(name))%>Component extends Activity<<%=capitalize(camelize(name))%>Component.Data, void> implements OnInit {
 
   readonly i18n = <%=i18nNamespace%>;
 
-  constructor(@Inject(ACTIVITY_DATA) private readonly data: <%=capitalize(camelize(name))%>.Data) {
+  constructor(@Inject(ACTIVITY_DATA) private readonly data: <%=capitalize(camelize(name))%>Component.Data) {
     super();
     const {chain} = Dsl.disposeWith(this);
 
@@ -22,6 +22,8 @@ export class <%=capitalize(camelize(name))%>Component extends Activity<<%=capita
     this.cancelCommand = Command.create(() => {
        this.cancel();
     });
+
+    this.busyWhile(this.confirmCommand.busy);
   }
 
   ngOnInit() {
@@ -29,7 +31,7 @@ export class <%=capitalize(camelize(name))%>Component extends Activity<<%=capita
 
 }
 
-export namespace <%=capitalize(camelize(name))%> {
+export namespace <%=capitalize(camelize(name))%>Component {
   export interface Data {
   }
 }

package/esm2015/lib/components/card-container/card-container.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/card-container/card-container.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,mBAAmB;IAY7D;QACE,KAAK,EAAE,CAAA;IACT,CAAC;IAED,QAAQ;IACR,CAAC;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,kgBAA8C;;aAE/C;;;;6BAGE,KAAK;0BAIL,KAAK;8BAGL,YAAY,SAAC,iBAAiB;;AAL/B;IADC,aAAa,EAAE;8BACA,OAAO;8DAAM","sourcesContent":["import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';\nimport { Command, TrackExternal } from '@coolon/pectin';\nimport { CommandFace } from '../commands/command-face';\nimport { DisposableComponent } from '../disposable-component';\n\n/**\n * @example\n * // basic usage\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // adds an add button with a the '+' icon to the end of the card list.\n * <aup-card-container [addCardCommand]=\"addCard\">\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // adds an add button with the specified face\n * <aup-card-container [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // use the aup-add-card-activity to display as the new card place holder and to run\n * // the activity inside teh card\n * <aup-card-container [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n *   <aup-add-card-activity type=\"inline\" renderAs=\"card\" [face]=\"i18n.commands.addModal\" [activityClass]=\"AddCardActivity\"></aup-add-card-activity>\n * </aup-card-container>\n *\n * // adds an add card component using the specified template.  The template\n * // will fill it's container in the grid.\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div>This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-container>\n *\n * // sing the default new card styles for your template\n * @import \"../../../../assets/styles\";\n * .my-new-card {\n *   @include aup-card-container-new-card-style();\n *   // OR\n *   @include aup-card-container-new-card-style(\n *      $color: rgba(0,0,0,0.54),\n *      $background-color: rgba(255,255,255,0.8),\n *      $hover-color: $color,\n *      $background-hover-color: white\n *   )\n * }\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div class=\"my-new-card\" >This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-container>\n *\n * // CSS Vars\n * aup-card-container {\n *   --card-gap: var(--card-gap, 16px);\n *   --card-width: var(--card-width, 300px);\n *   --card-height: var(--card-height, auto);\n *   --card-min-height: var(--card-min-height, auto);\n *   --card-background: var(--card-background, #fcfcfb);\n * }\n */\n@Component({\n  selector: 'aup-card-container',\n  templateUrl: './card-container.component.html',\n  styleUrls: ['./card-container.component.scss']\n})\nexport class CardContainerComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  addCardCommand: Command<any>;\n\n  @Input()\n  addCardFace: CommandFace;\n\n  @ContentChild(\"addCardTemplate\")\n  addCardTemplate: TemplateRef<any>;\n\n  constructor() {\n    super()\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm2015/lib/components/card-container/card-container.component.metadata.json

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":71,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"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","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}"]}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":74,"character":3}}]}],"addCardFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":80,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/card-container/card-container.component.ngfactory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-container.component.ngfactory.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/card-container/card-container.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/components/card-container/card-container.component.scss.shim.ngstyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-container.component.scss.shim.ngstyle.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/card-container/card-container.component.scss.shim.ngstyle.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}