@coolon/angular-ui-powerups 12.4.0-alpha.35 → 12.4.0-alpha.37

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

@@ -1,54 +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;
+    display: block;
 
-    .content {
-
-      display: grid;
-      grid-template-areas: "label edit-control" "content edit-control";
-      grid-template-columns: 1fr auto;
-      grid-template-rows: 26px 24px;
-
-      font-size: typography-utils.font-size($typography-config, input);
-
-      > label {
-        grid-area: label;
-        align-self: end;
-        @include mixins.floating-label-style();
-      }
-
-      > p {
-        grid-area: content;
-        @include typography-utils.typography-level($typography-config, input);
-        box-sizing: border-box;
-        flex: 1;
-        padding: 0.2857em 0 0 0; // bump our top padding to align with the text input padding (it's a guess at this point...)
-        margin: 0;
-
-        &.editing-enabled {
-          cursor: pointer;
+    .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/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,