@elderbyte/ngx-starter 19.0.2 → 19.1.0-beta.0

package/theming/style-tweaks/_elder-form.scss

@@ -0,0 +1,368 @@
+@use './elder-style-tweak-mixins' as mixins;
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin elder-form-styles($theme) {
+  $common-sizes: map.get($theme, elder, common-sizes);
+  $form-field-density: map.get($theme, elder, density, form-field);
+
+  $xs: map.get($common-sizes, xs);
+  $sm: map.get($common-sizes, sm);
+  $md: map.get($common-sizes, md);
+  $lg: map.get($common-sizes, lg);
+  $xl: map.get($common-sizes, xl);
+  $xxl: map.get($common-sizes, xxl);
+
+  /******************************
+  elder-form-field-host fix
+  *******************************/
+  .elder-form-field-host {
+    // This class should be applied to "controls" which themselves contain a mat-form-field.
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  /******************************
+  mdc form field fixes
+  *******************************/
+  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
+    display: block !important;
+  }
+
+  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+    padding-left: 0 !important;
+  }
+
+  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
+    padding-right: 0 !important;
+  }
+
+  .mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
+    $density: map.get($theme, elder, density, form-field);
+
+    /******************************
+    Fix big paddings for dense form fields
+    *******************************/
+
+    .mat-mdc-text-field-wrapper {
+      padding-left: calc-side-paddings($density);
+      padding-right: calc-side-paddings($density);
+    }
+
+    /******************************
+    Fix icon size and placement in mat label
+    *******************************/
+
+    @include mixins.form-field-icons($density);
+
+    /******************************
+    Fix text and hover placement of small filled form fields
+    *******************************/
+
+    $mat-mdc-form-field-label-transform: 0.75;
+    $mat-mdc-form-field-label-offset-x: -16px;
+    $form-field-density: map.get($theme, elder, density, form-field);
+
+    @if $form-field-density < -1 {
+      .mdc-text-field--filled {
+        .mdc-floating-label--float-above {
+          transform: var(
+            $mat-mdc-form-field-label-transform,
+            translateY(-50%)
+              translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))
+          ) !important;
+        }
+
+        .mat-mdc-form-field-infix {
+          padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
+          padding-bottom: 2px !important;
+          min-height: 40px; // (24 + 2*16) = 56px by default
+        }
+      }
+    }
+
+    /******************************
+    Material Form Field Label stealing clicks
+    *******************************/
+
+    .mat-mdc-floating-label.mdc-floating-label {
+      pointer-events: none !important;
+
+      mat-label {
+        pointer-events: none !important;
+      }
+    }
+
+    .mdc-notched-outline__notch {
+      pointer-events: none !important;
+
+      .mdc-floating-label {
+        pointer-events: none !important;
+
+        mat-label {
+          pointer-events: none !important;
+        }
+      }
+    }
+
+    .mat-mdc-form-field-error-wrapper {
+      display: flex;
+      padding-right: 0;
+    }
+  }
+
+  // A legacy styled form field with class 'elder-form-field-label' will get these styles
+  .mat-form-field-appearance-legacy.elder-form-field-label {
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+    .mat-form-field-underline {
+      display: none;
+    }
+  }
+
+  /******************************************************************
+  Icon button size
+  ******************************************************************/
+
+  $control-button-size: var(--mdc-typography-body1-line-height, 24px);
+  $control-icon-size: 20px;
+  .elder-mdc-input-fix {
+    max-height: $control-button-size;
+  }
+  .mat-mdc-icon-button.elder-control-icon-button {
+    @include mixins.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
+  }
+  .mat-datepicker-toggle.elder-control-icon-button {
+    max-height: $control-button-size;
+    max-width: $control-button-size;
+    .mat-mdc-icon-button {
+      @include mixins.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
+    }
+  }
+
+  /***************************************************************************
+  Form field dense styling
+  **************************************************************************/
+
+  .mat-mdc-form-field.elder-dense {
+    .mat-mdc-text-field-wrapper {
+      // padding left / right 16 by default
+      padding-left: $sm !important;
+      padding-right: $sm !important;
+    }
+
+    .mat-mdc-form-field-flex {
+      padding: 0;
+    }
+
+    .mdc-text-field--outlined {
+      .mat-mdc-form-field-infix {
+        padding-top: $sm !important; // 16px by default
+        padding-bottom: $sm !important; // 16px by default
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    .mdc-text-field--filled {
+      .mdc-floating-label--float-above {
+        transform: translateY(-100%) scale(0.75);
+      }
+      .mat-mdc-form-field-infix {
+        padding-top: 14px !important; // 16px by default
+        padding-bottom: 2px;
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    @include mixins.form-field-icons($form-field-density);
+  }
+
+  .mat-mdc-form-field.elder-no-hint {
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+    }
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+    .mat-form-field-underline {
+      bottom: 0;
+    }
+  }
+
+  /***************************************************************************
+  Possibly for elder excpetion detail
+  **************************************************************************/
+  .mat-mdc-form-field.mat-form-field-appearance-outline {
+    .mat-mdc-form-field-textarea-control {
+      &.stacktrace {
+        font-size: 11px;
+        font-family: monospace;
+        line-height: normal;
+        white-space: pre;
+        overflow-wrap: normal;
+        overflow-x: scroll;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+      }
+    }
+  }
+
+  /***************************************************************************
+  Form field time
+  **************************************************************************/
+  .mat-mdc-form-field-type-day-time-range .mat-mdc-form-field-infix {
+    width: 224px;
+  }
+
+  .mat-mdc-form-field-type-date-time-range .mat-mdc-form-field-infix {
+    width: 320px;
+  }
+
+  .mat-mdc-form-field-type-single-day .mat-mdc-form-field-infix {
+    width: 180px;
+  }
+
+  .mat-mdc-form-field-type-date-range .mat-mdc-form-field-infix {
+    width: 224px;
+  }
+
+  .mdc-text-field__input .mat-date-range-input-separator {
+    color: inherit;
+  }
+
+  /******************************
+  Material Form Controls
+  *******************************/
+
+  .elder-form-control {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-flex-control {
+    flex: 1 1 180px;
+    overflow: hidden;
+  }
+
+  /******************************
+  Material Form Field
+  *******************************/
+
+  .elder-form-field-gap {
+    width: 12px;
+  }
+
+  // two fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-small {
+    width: 84px;
+  }
+
+  // three fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-tiny {
+    width: 52px;
+  }
+
+  .elder-std-form-field {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-form-field-large {
+    width: 244px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xl {
+    width: 276px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xxl {
+    width: 372px;
+    overflow: hidden;
+  }
+
+  /**
+   * mat-form-field style shorthands
+   */
+  mat-form-field {
+    // three fields plus 12px gap add up to elder-std-form-field width
+    .tiny {
+      width: 52px; // (180-(2*12)) / 3
+    }
+
+    // two fields plus 12px gap add up to elder-std-form-field width
+    .small {
+      width: 84px; // (180-(1*12)) / 2
+    }
+
+    .standard {
+      width: 180px;
+      overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+    }
+
+    // one and a half plus 12px gap 180 + 52 + 12
+    .large {
+      width: 244px;
+      overflow: hidden;
+    }
+
+    // one and a half plus 12px gap 180 + 84 + 12
+    .xl {
+      width: 276px;
+      overflow: hidden;
+    }
+
+    // two standard fields plus 12px gap (180 + 180 + 12)
+    .xxl {
+      width: 372px;
+      overflow: hidden;
+    }
+  }
+
+  /***************************************************************************
+  Rounded m3 style input fields
+  **************************************************************************/
+  .elder-round-form-field {
+    border: none;
+    border-radius: 24px;
+    background-color: var(--md-sys-color-surface-container-low);
+
+    .mdc-notched-outline .mat-mdc-notch-piece {
+      border: none !important;
+    }
+    &:hover {
+      outline: solid 1px var(--md-sys-color-primary-container);
+    }
+    &.mat-focused {
+      outline: solid 1px var(--md-sys-color-primary);
+    }
+  }
+}
+
+@function calc-side-paddings($density) {
+  $paddingDensityNeg4: 8px;
+  $paddingDensityNeg3: 10px;
+  $paddingDensityNeg2: 12px;
+  $paddingDensityNeg1: 14px;
+  $paddingDensity0: 16px;
+
+  @if $density == -4 {
+    @return $paddingDensityNeg4;
+  } @else if $density == -3 {
+    @return $paddingDensityNeg3;
+  } @else if $density == -2 {
+    @return $paddingDensityNeg2;
+  } @else if $density == -1 {
+    @return $paddingDensityNeg1;
+  } @else if $density == 0 {
+    @return $paddingDensity0;
+  }
+}
+
+@function calc-padding-top-form-field-inflix($density) {
+  @if $density > -3 {
+    @return 20px;
+  } @else {
+    @return 14px;
+  }
+}

package/theming/style-tweaks/_elder-reset.scss

@@ -0,0 +1,13 @@
+/***************************************************************************
+ *                                                                         *
+ * CSS reset                                                               *
+ *                                                                         *
+ **************************************************************************/
+
+@mixin elder-reset() {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}