@coolon/angular-ui-powerups 12.4.0-alpha.39 → 12.4.0-alpha.40

package/assets/cards.scss

@@ -1,6 +1,10 @@
 @use "~@angular/material" as mat;
 @use "sass:map";
 
+:root {
+  --aup-card-container-default-background-color: #fcfcfb;
+}
+
 @mixin apply-theme($color-config, $typography-config) {
   aup-add-card-activity {
     aup-command-face {

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('resize-observer-polyfill'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', '@coolon/typescript-utilities', 'resize-observer-polyfill', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.typescriptUtilities, global.ResizeObserver, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, typescriptUtilities, ResizeObserver, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.typescriptUtilities, global.src, global.typescriptStringEnums, global.ResizeObserver, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, typescriptUtilities, src, typescriptStringEnums, ResizeObserver, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -850,6 +850,7 @@
      * aup-card-container {
      *   --card-gap: var(--card-gap, 16px);
      *   --card-width: var(--card-width, 300px);
+     *   --card-width-max: auto;
      *   --card-height: var(--card-height, auto);
      *   --card-min-height: var(--card-min-height, auto);
      *   --card-background: var(--card-background, #fcfcfb);
@@ -857,20 +858,72 @@
      */
     var CardContainerComponent = /** @class */ (function (_super) {
         __extends(CardContainerComponent, _super);
-        function CardContainerComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function CardContainerComponent(elementRef) {
+            var _this = _super.call(this) || this;
+            _this.elementRef = elementRef;
+            return _this;
         }
+        Object.defineProperty(CardContainerComponent.prototype, "columnCount", {
+            get: function () {
+                return this._columnCount;
+            },
+            set: function (count) {
+                if (!___namespace.isNil(count) && (!___namespace.isInteger(count) || count < 1)) {
+                    typescriptUtilities.lang.illegalState('columnCount must be a positive integer or nil');
+                }
+                this._columnCount = count;
+                this.updateColumnCountStyles();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CardContainerComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.updateColumnCountStyles();
+        };
+        Object.defineProperty(CardContainerComponent.prototype, "isAutoColumns", {
+            get: function () {
+                return ___namespace.isNil(this._columnCount);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CardContainerComponent.prototype, "isSingleColumn", {
+            get: function () {
+                return this._columnCount === 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CardContainerComponent.prototype.updateColumnCountStyles = function () {
+            var el = this.elementRef.nativeElement;
+            if (___namespace.isNil(this._columnCount)) {
+                el.style.setProperty('--aup-card-container-column-count', '');
+            }
+            else {
+                el.style.setProperty('--aup-card-container-column-count', this._columnCount);
+            }
+        };
         return CardContainerComponent;
     }(AbstractCardContainerComponent));
     CardContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     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</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}"]
+                    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}"]
                 },] }
     ];
+    CardContainerComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    CardContainerComponent.propDecorators = {
+        columnCount: [{ type: i0.Input }],
+        isAutoColumns: [{ type: i0.HostBinding, args: ['class.auto-columns',] }],
+        isSingleColumn: [{ type: i0.HostBinding, args: ['class.single-column',] }]
+    };
 
     /**
+     * @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
      * @example
      * // basic usage
      * <aup-card-stack>
@@ -933,7 +986,9 @@
     var CardStackComponent = /** @class */ (function (_super) {
         __extends(CardStackComponent, _super);
         function CardStackComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.call(this) || this;
+            console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
+            return _this;
         }
         return CardStackComponent;
     }(AbstractCardContainerComponent));
@@ -944,6 +999,7 @@
                     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}"]
                 },] }
     ];
+    CardStackComponent.ctorParameters = function () { return []; };
 
     exports.CommandFace = void 0;
     (function (CommandFace) {
@@ -6121,6 +6177,7 @@
             var _this = _super.call(this) || this;
             _this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
             _this.renderAs = AddCardActivityComponent.RenderAs.CARD;
+            _this.notCard = true;
             var chain = pectin.Dsl.disposeWith(_this).chain;
             _this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(_this);
             _this.faceList = chain(_this.faceModel).mapToList(function (face) { return [face]; });
@@ -6172,7 +6229,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-add-card-activity',
                     template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n",
-                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=inline][renderas=card]:not(.active):hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}:host[interactionStyle=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=modal][renderas=card]:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=inline][renderas=card]:not(.active):hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}:host[interactionStyle=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=modal][renderas=card]:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}:host-context(aup-card-container)[renderas=button]{align-self:start}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
                 },] }
     ];
     exports.AddCardActivityComponent.ctorParameters = function () { return [
@@ -6182,6 +6239,7 @@
         inlineInteractionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
         interactionStyle: [{ type: i0.Input }],
         renderAs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class',] }],
+        notCard: [{ type: i0.HostBinding, args: ['class.not-card',] }],
         renderAsClass: [{ type: i0.HostBinding, args: ['class',] }],
         activityTypeClass: [{ type: i0.HostBinding, args: ['class',] }]
     };