@coolon/angular-ui-powerups 13.0.3 → 13.1.0

package/fesm2020/coolon-angular-ui-powerups.mjs

@@ -60,6 +60,7 @@ import * as i1$e from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import * as i1$c from '@angular/router';
 import { UrlSegment, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterModule, ActivatedRouteSnapshot } from '@angular/router';
+import { isEmpty as isEmpty$1 } from 'lodash-es';
 import * as i1$d from '@angular/cdk/overlay';
 import * as i2$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -1757,7 +1758,7 @@ class AbstractListInputComponent extends AbstractInputComponent {
             this.valueChange.emit(is);
             this.onValueEditedListeners.fire(l => l(is, was));
         }, {
-            initialValue: 'ignore',
+            initialValue: "ignore",
             // we never fire events during an external changes to the value. This allows
             // the component to behave when used in the conventional angular
             // fashion, i.e. [(value)]="..."
@@ -1781,14 +1782,14 @@ class AbstractListInputComponent extends AbstractInputComponent {
     }
 }
 AbstractListInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractListInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractListInputComponent, selector: "ng-component", inputs: { listModel: "listModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractListInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractListInputComponent, selector: "ng-component", inputs: { listModel: "listModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
 __decorate([
-    TrackExternal({ delegateTo: 'formValueModel' }),
+    TrackExternal({ delegateTo: "formValueModel" }),
     __metadata("design:type", Object)
 ], AbstractListInputComponent.prototype, "listModel", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractListInputComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ template: "" }]
         }], ctorParameters: function () { return []; }, propDecorators: { listModel: [{
                 type: Input
             }], value: [{
@@ -5107,13 +5108,13 @@ class InteractionService {
      */
     createModalInteractionContextDisposedWith(disposable) {
         // TODO: look at making the registry the factory..
-        return this.modelInteractionContextFactory.createInteractionContext('modal', new InteractionService.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
+        return this.modelInteractionContextFactory.createInteractionContext("modal", new InteractionService.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
     }
     registerInplaceInteractionContext(interactionContext) {
         // TODO: look at making the registry the factory..
         // Todo: check for double registration.
         // Todo: allow multiple inplace interactions..
-        interactionContext.initialise(`ip${++inplaceMonitorCount}`, new InteractionService.ApiAdapter(this.placeRouter, this.inPlaceInteractionRegistry));
+        interactionContext.onInplaceInteractionContextRegistered(`ip${++inplaceMonitorCount}`, new InteractionService.ApiAdapter(this.placeRouter, this.inPlaceInteractionRegistry));
     }
     /**
      * Creates an interaction context that will prevent any other contexts from starting an
@@ -5128,16 +5129,16 @@ class InteractionService {
         this._navigationInProgress.setDelegate(this.placeRouter.navigationInProgress$);
         const self = this;
         return new InteractionServiceRoutingAdapter(this.activeInteractionContextIds, this.activeModalContext, () => {
-            return self.modelInteractionContextFactory.createInteractionContext('exclusive', new InteractionService.ApiAdapter(this.placeRouter, this.exclusiveInteractionRegistry));
+            return self.modelInteractionContextFactory.createInteractionContext("exclusive", new InteractionService.ApiAdapter(this.placeRouter, this.exclusiveInteractionRegistry));
         });
     }
 }
 InteractionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, deps: [{ token: ModalInteractionContextFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, providedIn: 'root' });
+InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: "root"
                 }]
         }], ctorParameters: function () { return [{ type: ModalInteractionContextFactory }]; } });
 (function (InteractionService) {
@@ -6239,7 +6240,7 @@ class Visit {
 }
 
 function extractPrimarySegments(urlTree) {
-    return urlTree.root.children.primary.segments;
+    return urlTree.root.children.primary?.segments ?? [];
 }
 class UrlSnapshot {
     // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -6579,7 +6580,10 @@ class PlaceRouter extends GarbageCollector {
     }
     navigate(visit, options) {
         const commands = asArray(visit).reduce((result, v) => {
-            return [...result, v.placeDefinition.path, ...this.createRouteParameters(v)];
+            const path = v.placeDefinition.path;
+            return isEmpty$1(path) ?
+                [...result, path] : // Angular doesn't support route params on empty path segments
+                [...result, path, ...this.createRouteParameters(v)];
         }, []);
         return this.doNavigation(visit, async (router) => {
             await this.angularRouter.navigate(commands, {
@@ -7362,6 +7366,12 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
          * the activity will replace the existing content immediately.
          */
         this.animateFirstActivity = true;
+        /**
+         * If true the activity will sync with the router to enable back button support.  This is a work around for
+         * deeply nested activities that can't be linked with the root place interactionContext hook for cancelling
+         * active interactions.
+         */
+        this.syncWithRoutes = true;
     }
     get animationDuration() {
         return this.animateFirstActivity ? (this.tabConfig?.animationDuration || "500ms") : "0ms";
@@ -7370,9 +7380,24 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         return this.isActive();
     }
     ngAfterViewInit() {
-        this.interactionService.registerInplaceInteractionContext(this);
+        // NOTE: this is a temp work around to detach inplace contexts from the router until AUP-88 is implemented.
+        // https://coolon.atlassian.net/browse/AUP-88?atlOrigin=eyJpIjoiOTg5YjEzZGUzZjRmNDg0NmExOWU3ZGJmMzJiNTRmNGYiLCJwIjoiaiJ9
+        if (this.syncWithRoutes) {
+            this.interactionService.registerInplaceInteractionContext(this);
+        }
+        else {
+            this.activityContainerComponent.initialise("dont-care", {
+                async notifyActive(interactionContext) {
+                    return undefined;
+                },
+                async notifyFinished(interactionContext) {
+                    return undefined;
+                }
+            });
+        }
     }
-    initialise(id, api) {
+    // this is a regsitration callback from the interaction service
+    onInplaceInteractionContextRegistered(id, api) {
         this.activityContainerComponent.initialise(id, api);
     }
     get identifier() {
@@ -7404,7 +7429,7 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
     }
 }
 InPlaceInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InPlaceInteractionContextComponent, deps: [{ token: InteractionService }, { token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-InPlaceInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], components: [{ type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
+InPlaceInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity", syncWithRoutes: "syncWithRoutes" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], components: [{ type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InPlaceInteractionContextComponent, decorators: [{
             type: Component,
             args: [{ selector: "aup-in-place-interaction-context", template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"] }]
@@ -7418,6 +7443,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 args: ["activityContainer", { static: true }]
             }], animateFirstActivity: [{
                 type: Input
+            }], syncWithRoutes: [{
+                type: Input
             }], active: [{
                 type: HostBinding,
                 args: ["class.active"]
@@ -7466,7 +7493,7 @@ class AddCardActivityComponent extends AbstractActivityTriggerComponent {
     }
 }
 AddCardActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCardActivityComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-AddCardActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddCardActivityComponent, selector: "aup-add-card-activity", inputs: { interactionStyle: "interactionStyle", renderAs: "renderAs" }, host: { properties: { "class": "this.activityTypeClass", "class.not-card": "this.notCard" } }, viewQueries: [{ propertyName: "inlineInteractionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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){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:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{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:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}: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}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AddCardActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddCardActivityComponent, selector: "aup-add-card-activity", inputs: { interactionStyle: "interactionStyle", renderAs: "renderAs" }, host: { properties: { "class": "this.activityTypeClass", "class.not-card": "this.notCard" } }, viewQueries: [{ propertyName: "inlineInteractionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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){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:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{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:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}: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}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCardActivityComponent, decorators: [{
             type: 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){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:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{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:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}: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}\n"] }]
@@ -7536,7 +7563,7 @@ class AddItemInteractionContextComponent extends DisposableComponent {
     }
 }
 AddItemInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddItemInteractionContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AddItemInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddItemInteractionContextComponent, selector: "aup-add-item-interaction-context", inputs: { label: "label", icon: "icon", activityClass: "activityClass", activityData: "activityData", addCommand: "addCommand" }, host: { properties: { "class.interaction-active": "this.active", "tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n", styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+AddItemInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddItemInteractionContextComponent, selector: "aup-add-item-interaction-context", inputs: { label: "label", icon: "icon", activityClass: "activityClass", activityData: "activityData", addCommand: "addCommand" }, host: { properties: { "class.interaction-active": "this.active", "tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n", styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -7574,7 +7601,7 @@ class InlineActivityTriggerComponent extends AbstractActivityTriggerComponent {
     }
 }
 InlineActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InlineActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineActivityTriggerComponent, selector: "aup-inline-activity-trigger", viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
+InlineActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineActivityTriggerComponent, selector: "aup-inline-activity-trigger", viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineActivityTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-inline-activity-trigger', template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"] }]
@@ -8205,7 +8232,7 @@ class InlineStringEditorComponent extends DisposableComponent {
     }
 }
 InlineStringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineStringEditorComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-InlineStringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolderModel: "placeHolderModel" }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\n    >\n    <!--    <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>-->\n    <!--    <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>-->\n    <!--    <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>-->\n  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n", components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+InlineStringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolderModel: "placeHolderModel" }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\n    >\n    <!--    <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>-->\n    <!--    <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>-->\n    <!--    <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>-->\n  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n", components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", InlineEditorModel)