@coolon/angular-ui-powerups 12.4.0-alpha.39 → 12.4.0-alpha.40
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/assets/cards.scss +4 -0
- package/bundles/coolon-angular-ui-powerups.umd.js +68 -10
- package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
- package/coolon-angular-ui-powerups.metadata.json +1 -1
- package/esm2015/lib/components/cards/card-container/card-container.component.js +47 -3
- package/esm2015/lib/components/cards/card-container/card-container.component.js.map +1 -1
- package/esm2015/lib/components/cards/card-container/card-container.component.metadata.json +1 -1
- package/esm2015/lib/components/cards/card-stack/card-stack.component.js +6 -0
- package/esm2015/lib/components/cards/card-stack/card-stack.component.js.map +1 -1
- package/esm2015/lib/components/cards/card-stack/card-stack.component.metadata.json +1 -1
- package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
- package/esm2015/lib/interaction/components/add-card-activity/add-card-activity.component.js +3 -1
- package/esm2015/lib/interaction/components/add-card-activity/add-card-activity.component.js.map +1 -1
- package/esm2015/lib/interaction/components/add-card-activity/add-card-activity.component.metadata.json +1 -1
- package/esm2015/lib/interaction/interaction.module.ngfactory.js.map +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +55 -5
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/cards/card-container/card-container.component.d.ts +18 -1
- package/lib/components/cards/card-stack/card-stack.component.d.ts +2 -0
- package/lib/interaction/components/add-card-activity/add-card-activity.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
1
|
+
import { Component, ElementRef, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { lang } from '@coolon/typescript-utilities';
|
|
3
|
+
import * as _ from 'lodash';
|
|
2
4
|
import { AbstractCardContainerComponent } from '../abstract-card-container.component';
|
|
3
5
|
/**
|
|
4
6
|
* @example
|
|
@@ -56,18 +58,60 @@ import { AbstractCardContainerComponent } from '../abstract-card-container.compo
|
|
|
56
58
|
* aup-card-container {
|
|
57
59
|
* --card-gap: var(--card-gap, 16px);
|
|
58
60
|
* --card-width: var(--card-width, 300px);
|
|
61
|
+
* --card-width-max: auto;
|
|
59
62
|
* --card-height: var(--card-height, auto);
|
|
60
63
|
* --card-min-height: var(--card-min-height, auto);
|
|
61
64
|
* --card-background: var(--card-background, #fcfcfb);
|
|
62
65
|
* }
|
|
63
66
|
*/
|
|
64
67
|
export class CardContainerComponent extends AbstractCardContainerComponent {
|
|
68
|
+
constructor(elementRef) {
|
|
69
|
+
super();
|
|
70
|
+
this.elementRef = elementRef;
|
|
71
|
+
}
|
|
72
|
+
set columnCount(count) {
|
|
73
|
+
if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {
|
|
74
|
+
lang.illegalState('columnCount must be a positive integer or nil');
|
|
75
|
+
}
|
|
76
|
+
this._columnCount = count;
|
|
77
|
+
this.updateColumnCountStyles();
|
|
78
|
+
}
|
|
79
|
+
get columnCount() {
|
|
80
|
+
return this._columnCount;
|
|
81
|
+
}
|
|
82
|
+
ngOnInit() {
|
|
83
|
+
super.ngOnInit();
|
|
84
|
+
this.updateColumnCountStyles();
|
|
85
|
+
}
|
|
86
|
+
get isAutoColumns() {
|
|
87
|
+
return _.isNil(this._columnCount);
|
|
88
|
+
}
|
|
89
|
+
get isSingleColumn() {
|
|
90
|
+
return this._columnCount === 1;
|
|
91
|
+
}
|
|
92
|
+
updateColumnCountStyles() {
|
|
93
|
+
const el = this.elementRef.nativeElement;
|
|
94
|
+
if (_.isNil(this._columnCount)) {
|
|
95
|
+
el.style.setProperty('--aup-card-container-column-count', '');
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
el.style.setProperty('--aup-card-container-column-count', this._columnCount);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
65
101
|
}
|
|
66
102
|
CardContainerComponent.decorators = [
|
|
67
103
|
{ type: Component, args: [{
|
|
68
104
|
selector: 'aup-card-container',
|
|
69
|
-
template: "<div class=\"card-container\">\n <ng-content></ng-content>\n\n
|
|
70
|
-
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
|
|
105
|
+
template: "<div class=\"header-container\">\n <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n<aup-scroll-container>\n <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</aup-scroll-container>\n<div class=\"footer-container\">\n <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
|
|
106
|
+
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-width-max:var(--card-width-max,auto);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),auto));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))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container{flex:1}.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}"]
|
|
71
107
|
},] }
|
|
72
108
|
];
|
|
109
|
+
CardContainerComponent.ctorParameters = () => [
|
|
110
|
+
{ type: ElementRef }
|
|
111
|
+
];
|
|
112
|
+
CardContainerComponent.propDecorators = {
|
|
113
|
+
columnCount: [{ type: Input }],
|
|
114
|
+
isAutoColumns: [{ type: HostBinding, args: ['class.auto-columns',] }],
|
|
115
|
+
isSingleColumn: [{ type: HostBinding, args: ['class.single-column',] }]
|
|
116
|
+
};
|
|
73
117
|
//# sourceMappingURL=card-container.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-container/card-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-container/card-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,8BAA8B;IAiBxE,YAA6B,UAAsB;QACjD,KAAK,EAAE,CAAC;QADmB,eAAU,GAAV,UAAU,CAAY;IAEnD,CAAC;IAfD,IACI,WAAW,CAAC,KAAyB;QACvC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;YACzD,IAAI,CAAC,YAAY,CAAC,+CAA+C,CAAC,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAMD,QAAQ;QACN,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,IACI,aAAa;QACf,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACpC,CAAC;IAED,IACI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;IACjC,CAAC;IAES,uBAAuB;QAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YAC9B,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,EAAE,CAAC,CAAC;SAC/D;aAAM;YACL,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC9E;IACH,CAAC;;;YAhDF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,2xBAA8C;;aAE/C;;;YAxEmB,UAAU;;;0BA6E3B,KAAK;4BAsBL,WAAW,SAAC,oBAAoB;6BAKhC,WAAW,SAAC,qBAAqB","sourcesContent":["import { Component, ElementRef, HostBinding, Input, OnInit } from '@angular/core';\nimport { lang } from '@coolon/typescript-utilities';\nimport * as _ from 'lodash';\nimport { AbstractCardContainerComponent } from '../abstract-card-container.component';\n\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-width-max: auto;\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 AbstractCardContainerComponent implements OnInit {\n\n private _columnCount: number | undefined;\n\n @Input()\n set columnCount(count: number | undefined) {\n if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {\n lang.illegalState('columnCount must be a positive integer or nil');\n }\n this._columnCount = count;\n this.updateColumnCountStyles();\n }\n\n get columnCount() {\n return this._columnCount;\n }\n\n constructor(private readonly elementRef: ElementRef) {\n super();\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.updateColumnCountStyles();\n }\n\n @HostBinding('class.auto-columns')\n get isAutoColumns() {\n return _.isNil(this._columnCount);\n }\n\n @HostBinding('class.single-column')\n get isSingleColumn() {\n return this._columnCount === 1;\n }\n\n protected updateColumnCountStyles() {\n const el = this.elementRef.nativeElement;\n if (_.isNil(this._columnCount)) {\n el.style.setProperty('--aup-card-container-column-count', '');\n } else {\n el.style.setProperty('--aup-card-container-column-count', this._columnCount);\n }\n }\n\n}\n\nexport namespace CardContainerComponent {\n export interface ColumnConfiguration {\n count: number;\n stretchToFill: boolean;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":73,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"aup-card-container","template":"<div class=\"card-container\">\n <ng-content></ng-content>\n\n
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":73,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"aup-card-container","template":"<div class=\"header-container\">\n <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n<aup-scroll-container>\n <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</aup-scroll-container>\n<div class=\"footer-container\">\n <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n","styles":[":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-width-max:var(--card-width-max,auto);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),auto));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))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container{flex:1}.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":{"columnCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":43}]}],"ngOnInit":[{"__symbolic":"method"}],"isAutoColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":99,"character":3},"arguments":["class.auto-columns"]}]}],"isSingleColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":104,"character":3},"arguments":["class.single-column"]}]}],"updateColumnCountStyles":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Component } from '@angular/core';
|
|
2
2
|
import { AbstractCardContainerComponent } from '../abstract-card-container.component';
|
|
3
3
|
/**
|
|
4
|
+
* @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
|
|
4
5
|
* @example
|
|
5
6
|
* // basic usage
|
|
6
7
|
* <aup-card-stack>
|
|
@@ -61,6 +62,10 @@ import { AbstractCardContainerComponent } from '../abstract-card-container.compo
|
|
|
61
62
|
* }
|
|
62
63
|
*/
|
|
63
64
|
export class CardStackComponent extends AbstractCardContainerComponent {
|
|
65
|
+
constructor() {
|
|
66
|
+
super();
|
|
67
|
+
console.warn('<aup-card-stack></aup-card-stack> is deprecated. Use <aup-card-container [columnCount]="1"> instead.');
|
|
68
|
+
}
|
|
64
69
|
}
|
|
65
70
|
CardStackComponent.decorators = [
|
|
66
71
|
{ type: Component, args: [{
|
|
@@ -69,4 +74,5 @@ CardStackComponent.decorators = [
|
|
|
69
74
|
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}"]
|
|
70
75
|
},] }
|
|
71
76
|
];
|
|
77
|
+
CardStackComponent.ctorParameters = () => [];
|
|
72
78
|
//# sourceMappingURL=card-stack.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-stack.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-stack/card-stack.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"card-stack.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-stack/card-stack.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAMH,MAAM,OAAO,kBAAmB,SAAQ,8BAA8B;IAEpE;QACE,KAAK,EAAE,CAAC;QACR,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAA;IACvH,CAAC;;;YAVF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,8lBAA0C;;aAE3C","sourcesContent":["import { Component } from '@angular/core';\nimport { AbstractCardContainerComponent } from '../abstract-card-container.component';\n\n/**\n * @deprecated deprecated, use `aup-card-container [columnCount]=\"1\"` instead.\n * @example\n * // basic usage\n * <aup-card-stack>\n * <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\n *\n * // adds an add button with a the '+' icon to the end of the card list.\n * <aup-card-stack [addCardCommand]=\"addCard\">\n * <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\n *\n * // adds an add button with the specified face\n * <aup-card-stack [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n * <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\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-stack [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-stack>\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-stack>\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-stack>\n *\n * // sing the default new card styles for your template\n * @import \"../../../../assets/styles\";\n * .my-new-card {\n * @include aup-card-stack-new-card-style();\n * // OR\n * @include aup-card-stack-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-stack>\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-stack>\n *\n * // CSS Vars\n * aup-card-stack {\n * --card-gap: var(--card-gap, 16px);\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-stack',\n templateUrl: './card-stack.component.html',\n styleUrls: ['./card-stack.component.scss']\n})\nexport class CardStackComponent extends AbstractCardContainerComponent {\n\n constructor() {\n super();\n console.warn('<aup-card-stack></aup-card-stack> is deprecated. Use <aup-card-container [columnCount]=\"1\"> instead.')\n }\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"CardStackComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"CardStackComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":69,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":64,"character":1},"arguments":[{"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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}}}}]
|