@coolon/angular-ui-powerups 12.4.0-alpha.44 → 12.4.0-alpha.45
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/bundles/coolon-angular-ui-powerups.umd.js +2 -2
- 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 +2 -2
- 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/fesm2015/coolon-angular-ui-powerups.js +2 -2
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/cards/card-container/card-container.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -58,7 +58,7 @@ import { AbstractCardContainerComponent } from '../abstract-card-container.compo
|
|
|
58
58
|
* aup-card-container {
|
|
59
59
|
* --card-gap: var(--card-gap, 16px);
|
|
60
60
|
* --card-width: var(--card-width, 300px);
|
|
61
|
-
* --card-width
|
|
61
|
+
* --card-max-width: auto;
|
|
62
62
|
* --card-height: var(--card-height, auto);
|
|
63
63
|
* --card-min-height: var(--card-min-height, auto);
|
|
64
64
|
* --card-background: var(--card-background, #fcfcfb);
|
|
@@ -108,7 +108,7 @@ CardContainerComponent.decorators = [
|
|
|
108
108
|
{ type: Component, args: [{
|
|
109
109
|
selector: 'aup-card-container',
|
|
110
110
|
template: "<div class=\"header-container\">\n <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\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</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
|
|
111
|
-
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-max-width:var(--card-max-width,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),
|
|
111
|
+
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-max-width:var(--card-max-width,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),var(--resolved-card-max-width)));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)}.no-scroll-container,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;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);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)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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}"]
|
|
112
112
|
},] }
|
|
113
113
|
];
|
|
114
114
|
CardContainerComponent.ctorParameters = () => [
|
|
@@ -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,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;IAwBxE,YAA6B,UAAsB;QACjD,KAAK,EAAE,CAAC;QADmB,eAAU,GAAV,UAAU,CAAY;QAPnD;;;WAGG;QAEH,kBAAa,GAAG,KAAK,CAAC;IAItB,CAAC;IAtBD,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;IAaD,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;;;YAvDF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,2iCAA8C;;aAE/C;;;YAxEmB,UAAU;;;0BA6E3B,KAAK;4BAiBL,KAAK;4BAYL,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
|
|
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;IAwBxE,YAA6B,UAAsB;QACjD,KAAK,EAAE,CAAC;QADmB,eAAU,GAAV,UAAU,CAAY;QAPnD;;;WAGG;QAEH,kBAAa,GAAG,KAAK,CAAC;IAItB,CAAC;IAtBD,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;IAaD,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;;;YAvDF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,2iCAA8C;;aAE/C;;;YAxEmB,UAAU;;;0BA6E3B,KAAK;4BAiBL,KAAK;4BAYL,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-max-width: 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 /**\n * Enable scrolling. If true the container will have height==0 so you must set it's height explicitly\n * or place in a layout that will stretch it such as a grid or flex layout.\n */\n @Input()\n enabledScroll = false;\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=\"header-container\">\n <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\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</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\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-max-width:var(--card-max-width,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),
|
|
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\n<ng-template #content>\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</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\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-max-width:var(--card-max-width,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),var(--resolved-card-max-width)));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)}.no-scroll-container,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;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);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)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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}}]}],"enabledScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":97,"character":43}]}],"ngOnInit":[{"__symbolic":"method"}],"isAutoColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":106,"character":3},"arguments":["class.auto-columns"]}]}],"isSingleColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":111,"character":3},"arguments":["class.single-column"]}]}],"updateColumnCountStyles":[{"__symbolic":"method"}]}}}}]
|
|
@@ -608,7 +608,7 @@ __decorate([
|
|
|
608
608
|
* aup-card-container {
|
|
609
609
|
* --card-gap: var(--card-gap, 16px);
|
|
610
610
|
* --card-width: var(--card-width, 300px);
|
|
611
|
-
* --card-width
|
|
611
|
+
* --card-max-width: auto;
|
|
612
612
|
* --card-height: var(--card-height, auto);
|
|
613
613
|
* --card-min-height: var(--card-min-height, auto);
|
|
614
614
|
* --card-background: var(--card-background, #fcfcfb);
|
|
@@ -658,7 +658,7 @@ CardContainerComponent.decorators = [
|
|
|
658
658
|
{ type: Component, args: [{
|
|
659
659
|
selector: 'aup-card-container',
|
|
660
660
|
template: "<div class=\"header-container\">\n <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\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</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
|
|
661
|
-
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-max-width:var(--card-max-width,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),
|
|
661
|
+
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-max-width:var(--card-max-width,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),var(--resolved-card-max-width)));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)}.no-scroll-container,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;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);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)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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}"]
|
|
662
662
|
},] }
|
|
663
663
|
];
|
|
664
664
|
CardContainerComponent.ctorParameters = () => [
|