@firestitch/form 18.0.8 → 18.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firestitch/form",
-  "version": "18.0.8",
+  "version": "18.0.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-form"

package/public_api.d.ts

@@ -3,6 +3,7 @@ export { FsForm } from './app/services/fsform.service';
 export { FsFormGreaterDirective, FsFormGreaterEqualDirective, FsFormLesserEqualDirective, FsFormTemplateDirective } from './app/directives';
 export { FsButtonDirective } from './app/directives/button.directive';
 export { FsFormDialogCloseDirective } from './app/directives/form-dialog-close.directive';
+export { FsFormGroupDirective } from './app/directives/form-group/form-group.directive';
 export { FsFormDirective } from './app/directives/form/form.directive';
 export { FsSubmitButtonDirective } from './app/directives/submit-button.directive';
 export { FsFormCompareDirective } from './app/directives/validators/compare.directive';

package/styles.scss

@@ -6,12 +6,17 @@
     but should not do that for simple matInputs, cuz since Material 18 its already added
     by mat-form-field, this is why first selector is such complicated
    */
-  mat-label:not(:has(+ .mat-mdc-form-field-required-marker)), .fs-form-label {
+  mat-label:not(:has(+ .mat-mdc-form-field-required-marker)), 
+  .fs-form-label {
     &.fs-form-label-required:after {
-      content: " *";
-      white-space: pre-wrap;
+      content: "*";
+      margin-left: 1px;
     }
   }
+  
+  mat-label {
+    display: inline-flex;
+  }
 
   .fs-form-wrapper.ng-invalid.ng-dirty .fs-form-label,
   .ng-invalid.ng-dirty:not(form) .fs-form-label {
@@ -29,39 +34,36 @@
   .mat-placeholder-required {
     display: none;
   }
-  
-  button.submit-success,
-  button.submit-error,
-  button.submit-process {
-    transition: none;
-    cursor: wait;
-    color: transparent !important;
-    pointer-events: none;
-  
-    svg {
-      height: 22px;
-      vertical-align: middle;
-      width: 22px;
-      text-align: center;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      animation: fadein 1s;
-    }
-  }
-  
-  .mdc-button {
-    svg.svg-icon-process {
+}
+
+.fs-form-submit-button-success,
+.fs-form-submit-button-error,
+.fs-form-submit-button-process {
+  transition: none;
+  cursor: wait;
+  color: transparent !important;
+  pointer-events: none;
+
+  svg {
+    height: 22px;
+    vertical-align: middle;
+    width: 22px;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: fadein 1s;
+
+    &.svg-icon-process {
       stroke: #a3a3a3;
     }
-  
-    svg.svg-icon-error path,
-    svg.svg-icon-success path {
+
+    &.svg-icon-error path,
+    &.svg-icon-success path {
       fill: #a3a3a3;
     }
   }
-  
 }
 
 @keyframes fadein {
@@ -85,7 +87,9 @@
     color: map-get($foreground, secondary-text);
   }
 
-  .fs-form button {
+  .fs-form-submit-button-success,
+  .fs-form-submit-button-error,
+  .fs-form-submit-button-process {
     &.mdc-button,
     &.mdc-button--raised:not([color='primary']),
     &.mdc-button--unelevated:not([color='primary']) {