@coolon/angular-ui-powerups 3.4.1 → 3.4.3

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/assets/mixins.scss +1 -1
  3. package/bundles/coolon-angular-ui-powerups.umd.js +75 -9
  4. package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
  5. package/bundles/coolon-angular-ui-powerups.umd.min.js +1 -1
  6. package/bundles/coolon-angular-ui-powerups.umd.min.js.map +1 -1
  7. package/coolon-angular-ui-powerups.metadata.json +1 -1
  8. package/esm2015/lib/components/card-container/card-container.component.js +47 -9
  9. package/esm2015/lib/components/card-container/card-container.component.js.map +1 -1
  10. package/esm2015/lib/components/card-container/card-container.component.metadata.json +1 -1
  11. package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
  12. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js +29 -0
  13. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js.map +1 -1
  14. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.metadata.json +1 -1
  15. package/fesm2015/coolon-angular-ui-powerups.js +113 -47
  16. package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
  17. package/lib/components/card-container/card-container.component.d.ts +45 -7
  18. package/lib/interaction/components/activity-actions/activity-actions.component.d.ts +29 -0
  19. package/package.json +1 -1
  20. package/schematics/collection.json +2 -2
  21. package/schematics/place-add/index.js +1 -1
  22. package/schematics/place-add/index.js.map +1 -1
  23. package/schematics/place-add/templates/component/__name@dasherize__.component.spec.ts.template +1 -1
package/esm2015/lib/components/card-container/card-container.component.js CHANGED
@@ -1,9 +1,53 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
2
  import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
3
3
  import { Command, TrackExternal } from '@coolon/pectin';
4
+ import { CommandFace } from '../commands/command-face';
4
5
  import { DisposableComponent } from '../disposable-component';
5
6
  /**
6
7
  * @example
8
+ * // basic usage
9
+ * <aup-card-container>
10
+ * <my-card *ngFor="..."></my-card>
11
+ * </aup-card-container>
12
+ *
13
+ * // adds an add button with a the '+' icon to the end of the card list.
14
+ * <aup-card-container [addCardCommand]="addCard">
15
+ * <my-card *ngFor="..."></my-card>
16
+ * </aup-card-container>
17
+ *
18
+ * // adds an add button with the specified face
19
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
20
+ * <my-card *ngFor="..."></my-card>
21
+ * </aup-card-container>
22
+ *
23
+ * // adds an add card component using the specified template. The template
24
+ * // will fill it's container in the grid.
25
+ * <aup-card-container>
26
+ * <my-card *ngFor="..."></my-card>
27
+ * <ng-template #addCardTemplate>
28
+ * <div>This is a new card template, it will the the size of the other cards.</div>
29
+ * </ng-template>
30
+ * </aup-card-container>
31
+ *
32
+ * // sing the default new card styles for your template
33
+ * @import "../../../../assets/styles";
34
+ * .my-new-card {
35
+ * @include aup-card-container-new-card-style();
36
+ * // OR
37
+ * @include aup-card-container-new-card-style(
38
+ * $color: rgba(0,0,0,0.54),
39
+ * $background-color: rgba(255,255,255,0.8),
40
+ * $hover-color: $color,
41
+ * $background-hover-color: white
42
+ * )
43
+ * }
44
+ * <aup-card-container>
45
+ * <my-card *ngFor="..."></my-card>
46
+ * <ng-template #addCardTemplate>
47
+ * <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
48
+ * </ng-template>
49
+ * </aup-card-container>
50
+ *
7
51
  * // CSS Vars
8
52
  * aup-card-container {
9
53
  * --card-gap: var(--card-gap, 16px);
@@ -12,13 +56,6 @@ import { DisposableComponent } from '../disposable-component';
12
56
  * --card-min-height: var(--card-min-height, auto);
13
57
  * --card-background: var(--card-background, #fcfcfb);
14
58
  * }
15
- *
16
- * // Content Templates:
17
- * #addCardTemplate
18
- * <ng-template #addCardTemplate>
19
- * This is a new card template, it will the the size of the other cards.
20
- * </nav-template>
21
- *
22
59
  */
23
60
  export class CardContainerComponent extends DisposableComponent {
24
61
  constructor() {
@@ -30,13 +67,14 @@ export class CardContainerComponent extends DisposableComponent {
30
67
  CardContainerComponent.decorators = [
31
68
  { type: Component, args: [{
32
69
  selector: 'aup-card-container',
33
- 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-icon 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",
34
- styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
70
+ 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\" [face]=\"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",
71
+ styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
35
72
  },] }
36
73
  ];
37
74
  CardContainerComponent.ctorParameters = () => [];
38
75
  CardContainerComponent.propDecorators = {
39
76
  addCardCommand: [{ type: Input }],
77
+ addCardFace: [{ type: Input }],
40
78
  addCardTemplate: [{ type: ContentChild, args: ["addCardTemplate",] }]
41
79
  };
42
80
  __decorate([
package/esm2015/lib/components/card-container/card-container.component.js.map CHANGED
@@ -1 +1 @@
1
- {"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,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,mBAAmB;IAS7D;QACE,KAAK,EAAE,CAAA;IACT,CAAC;IAED,QAAQ;IACR,CAAC;;;YAnBF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,gZAA8C;;aAE/C;;;;6BAGE,KAAK;8BAIL,YAAY,SAAC,iBAAiB;;AAF/B;IADC,aAAa,EAAE;8BACA,OAAO;8DAAM","sourcesContent":["import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';\nimport { Command, TrackExternal } from '@coolon/pectin';\nimport { DisposableComponent } from '../disposable-component';\n\n/**\n * @example\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 * // Content Templates:\n * #addCardTemplate\n * <ng-template #addCardTemplate>\n * This is a new card template, it will the the size of the other cards.\n * </nav-template>\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 @ContentChild(\"addCardTemplate\")\n addCardTemplate: TemplateRef<any>;\n\n constructor() {\n super()\n }\n\n ngOnInit() {\n }\n\n}\n"]}
1
+ {"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;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,+fAA8C;;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 * // 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 CHANGED
@@ -1 +1 @@
1
- [{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":27,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"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-icon 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":[":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":30,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":33,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
1
+ [{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":64,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":59,"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\" [face]=\"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":[":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":67,"character":3}}]}],"addCardFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":73,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]