@coolon/angular-ui-powerups 12.4.0-alpha.36 → 12.4.0-alpha.38

package/assets/interaction/editor/inline-string-editor.scss

@@ -1,65 +1,86 @@
 @use "../../forms/mixins";
-@use "~@angular/material/core/typography/typography-utils";
+@use "~@angular/material/theming";
 
 @mixin apply-theme($color-config, $typography-config) {
 
   aup-inline-string-editor {
-    display: inline-block;
-
-    .content {
-      position: relative;
-      display: grid;
-      grid-template-areas: "label edit-control" "content edit-control";
-      grid-template-columns: 1fr auto;
-      grid-template-rows: auto;
-
-      font-size: typography-utils.font-size($typography-config, input);
-
-      //box-sizing: border-box;
-      // copied from mat input...
-      border-top: 0.84375em solid transparent;
-      padding-bottom: 1.34375em;
-
-      $top-padding-tweak: 1px;
-      padding-top: $top-padding-tweak;
-
-      > label {
-        position: absolute;
-        transform: translateY(-100%);
-        @include mixins.floating-label-style();
-      }
-
-      > p {
-        grid-area: content;
-        @include typography-utils.typography-level($typography-config, input);
-
-        // copied from mat input...
-        padding: 0.5em 0;
-        margin: -0.0625em 0 0 0;
-
-        box-sizing: border-box;
-        flex: 1;
-
-        &.editing-enabled {
-          cursor: pointer;
+    display: block;
+
+    .container {
+      mat-form-field {
+        &:not(.empty) {
+          input {
+            color: currentColor;
+            //color: theming.mat-color($color-config, text);
+          }
         }
-
-        &.place-holder {
-          color: rgba(0,0,0,0.5); // TODO: get the angular theme value for disabled form elements...
+        &.editable {
+          .mat-form-field-flex, input {
+            cursor: pointer;
+          }
+        }
+        .mat-form-field-infix {
+          width: auto;
+        }
+        .mat-form-field-underline {
+          //opacity: 0; // hide the underline...
         }
-
-      }
-
-      &:hover {
-        //background-color: rgba(0, 0, 0, 0.03);
-      }
-
-      > aup-command {
-        grid-area: edit-control;
-        align-self: end;
-        transform: translateY(3px); // hack to line up with activity actions...!
       }
     }
+    //.content {
+    //  position: relative;
+    //  display: grid;
+    //  grid-template-areas: "label edit-control" "content edit-control";
+    //  grid-template-columns: 1fr auto;
+    //  grid-template-rows: auto;
+    //
+    //  font-size: typography-utils.font-size($typography-config, input);
+    //
+    //  //box-sizing: border-box;
+    //  // copied from mat input...
+    //  border-top: 0.84375em solid transparent;
+    //  padding-bottom: 1.34375em;
+    //
+    //  $top-padding-tweak: 1px;
+    //  padding-top: $top-padding-tweak;
+    //
+    //  > label {
+    //    position: absolute;
+    //    transform: translateY(-100%);
+    //    @include mixins.floating-label-style();
+    //  }
+    //
+    //  > p {
+    //    grid-area: content;
+    //    @include typography-utils.typography-level($typography-config, input);
+    //
+    //    // copied from mat input...
+    //    padding: 0.5em 0;
+    //    margin: -0.0625em 0 0 0;
+    //
+    //    box-sizing: border-box;
+    //    flex: 1;
+    //
+    //    &.editing-enabled {
+    //      cursor: pointer;
+    //    }
+    //
+    //    &.place-holder {
+    //      color: rgba(0,0,0,0.5); // TODO: get the angular theme value for disabled form elements...
+    //    }
+    //
+    //  }
+    //
+    //  &:hover {
+    //    //background-color: rgba(0, 0, 0, 0.03);
+    //  }
+    //
+    //  > aup-command {
+    //    grid-area: edit-control;
+    //    align-self: end;
+    //    transform: translateY(3px); // hack to line up with activity actions...!
+    //  }
+    //}
   }
 }
 

package/assets/styles.scss

@@ -12,18 +12,7 @@
 @use "./icons";
 @use "./empty-state";
 
-@mixin apply-light-theme($primary, $accent, $warn:ng.mat-palette(ng.$mat-red), $typography: ng.mat-typography-config()) {
-
-  $theme: ng.mat-light-theme((
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn,
-    )
-  ));
-
-  @include ng.mat-core($typography);
-  @include ng.angular-material-theme($theme);
+@mixin apply-light-theme($theme, $typography) {
 
   $color-config: ng.mat-get-color-config($theme);
 

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

@@ -6923,7 +6923,7 @@
     exports.InlineStringEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-inline-string-editor',
-                    template: "<ng-container *ngIf=\"!editorModel.isEditing()\">\n  <div class=\"content\" [class.editable]=\"editCommand.enabled.value\">\n    <label>{{label}}</label>\n    <p [class.place-holder]=\"empty.value\" [class.editing-enabled]=\"editingEnabled.value\" (click)=\"startEdit()\">{{displayValue.value}}</p>\n    <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n  </div>\n</ng-container>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n"
+                    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"
                 },] }
     ];
     exports.InlineStringEditorComponent.ctorParameters = function () { return [
@@ -6990,7 +6990,10 @@
                         DirectivesModule,
                         flexLayout.FlexModule,
                         flexLayout.GridModule,
-                        ComponentsModule
+                        ComponentsModule,
+                        forms.FormsModule,
+                        input.MatInputModule,
+                        formField.MatFormFieldModule,
                     ],
                     declarations: [
                         ActivityContainerComponent,
@@ -8581,7 +8584,7 @@
         };
         Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
             get: function () {
-                return this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []);
+                return ___namespace.uniq(this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []));
             },
             enumerable: false,
             configurable: true
@@ -10050,13 +10053,13 @@
                             }
                             _a.label = 2;
                         case 2: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
-                                var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                var navigationSession, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
+                                            navigationSession = this.placeRouter.navigationSession;
                                             params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
                                             parsedParams = placeDefinition_1.parseRouteParams(params);
-                                            navigationSession = this.placeRouter.navigationSession;
                                             initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, parsedParams);
                                             sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                                             return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];