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

package/assets/forms/mixins.scss

@@ -1,6 +1,6 @@
 @mixin floating-label-style() {
   font-weight: 400;
-  font-size: calc(14px * .75);
+  font-size: calc(1em * .75);
   color: rgba(0, 0, 0, 0.57);
   white-space: nowrap;
 }

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

@@ -1,50 +1,67 @@
 @use "../../forms/mixins";
+@use "~@angular/material/core/typography/typography-utils";
 
-aup-inline-string-editor {
-  display: inline-block;
+@mixin apply-theme($color-config, $typography-config) {
 
-  .content {
+  aup-inline-string-editor {
+    display: inline-block;
 
-    display: grid;
-    grid-template-areas: "label edit-control" "content edit-control";
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 26px 24px;
+    .content {
+      position: relative;
+      display: grid;
+      grid-template-areas: "label edit-control" "content edit-control";
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto;
 
-    > label {
-      grid-area: label;
-      align-self: end;
-      @include mixins.floating-label-style();
-    }
+      font-size: typography-utils.font-size($typography-config, input);
 
-    > p {
-      grid-area: content;
-      //height: 42px;
-      box-sizing: border-box;
-      font-size: 14px;
-      font-weight: 400;
-      flex: 1;
-      padding: 1px 0 0 0;
-      margin: 0;
-
-      &.editing-enabled {
-        cursor: pointer;
-      }
+      //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;
 
-      &.place-holder {
-        color: rgba(0,0,0,0.5); // TODO: get the angular theme value for disabled form elements...
+      > 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;
 
-    &:hover {
+        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...!
+      > aup-command {
+        grid-area: edit-control;
+        align-self: end;
+        transform: translateY(3px); // hack to line up with activity actions...!
+      }
     }
   }
-
 }
+
+
+

package/assets/interaction.scss

@@ -3,6 +3,11 @@
 @use "./interaction/editor/inline-string-editor";
 @use "./interaction/input-activity";
 
+@mixin apply-theme($color-config, $typography-config) {
+  @include inline-string-editor.apply-theme($color-config, $typography-config)
+}
+
+
 .dialog-interaction-context {
   max-width: 95vw !important;
   max-height: 95vh !important;

package/assets/styles.scss

@@ -29,6 +29,7 @@
 
   @include activities.apply-theme($color-config, $typography);
   @include cards.apply-theme($color-config, $typography);
+  @include interaction.apply-theme($color-config, $typography);
 
   :root {
     --aup-default-padding: var(--default-padding, 16px);

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)=\"editCommand.execute()\">{{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 #interactionContext [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n\n"
+                    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"
                 },] }
     ];
     exports.InlineStringEditorComponent.ctorParameters = function () { return [