@elderbyte/ngx-starter 15.2.4 → 15.3.0

package/lib/components/chips/elder-chip-label.directive.d.ts

@@ -0,0 +1,40 @@
+import { MatChip } from '@angular/material/chips';
+import { ThemePalette } from '@angular/material/core';
+import * as i0 from "@angular/core";
+export declare type StateColor = 'none' | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
+export declare type ElderChipAppearance = 'md3' | 'legacy';
+export declare class ElderChipLabelDirective {
+    private readonly matChip;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly baseClass;
+    themeColor: ThemePalette;
+    stateColor: StateColor;
+    appearance: ElderChipAppearance;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(matChip: MatChip);
+    /***************************************************************************
+     *                                                                         *
+     * Host Bindings                                                           *
+     *                                                                         *
+     **************************************************************************/
+    get classes(): string;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private buildClassesString;
+    private getAppearanceClass;
+    private getStateColorClass;
+    private getThemeColorClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, [{ optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "themeColor": "color"; "stateColor": "stateColor"; "appearance": "appearance"; }, {}, never, never, false, never>;
+}

package/lib/components/chips/elder-chips.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./elder-chip-label.directive";
+import * as i2 from "@angular/common";
+import * as i3 from "@ngx-translate/core";
+import * as i4 from "@angular/material/chips";
+import * as i5 from "@angular/cdk/a11y";
+export { ElderChipLabelDirective } from './elder-chip-label.directive';
+export declare class ElderChipsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderChipsModule, [typeof i1.ElderChipLabelDirective], [typeof i2.CommonModule, typeof i3.TranslateModule, typeof i4.MatChipsModule, typeof i5.A11yModule], [typeof i1.ElderChipLabelDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ElderChipsModule>;
+}

package/lib/components/public_api.d.ts

@@ -10,6 +10,7 @@ export * from './navigation/public_api';
 export * from './shell/elder-shell.module';
 export * from './time/public_api';
 export * from './i18n/public_api';
+export * from './chips/elder-chips.module';
 export * from './select-chip-list/elder-chip-list-select.module';
 export * from './data-transfer/elder-data-transfer.module';
 export * from './overlays/elder-overlay.module';

package/lib/components/time/elder-date-switcher/elder-date-switcher.component.d.ts

@@ -14,6 +14,8 @@ export declare class ElderDateSwitcherComponent extends FormFieldBaseComponent<L
     datePickerEnabled: boolean;
     /** If true, touch optimized mode of date picker is enabled. */
     datePickerTouchUi: boolean;
+    /** If true, elderDense on mat-form-field is enabled. */
+    dense: boolean;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -48,5 +50,5 @@ export declare class ElderDateSwitcherComponent extends FormFieldBaseComponent<L
      **************************************************************************/
     protected valuesEquals(a: LocalDate, b: LocalDate): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderDateSwitcherComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderDateSwitcherComponent, "elder-date-switcher", never, { "datePickerEnabled": "datePickerEnabled"; "datePickerTouchUi": "datePickerTouchUi"; "date": "date"; }, { "dateChange": "dateChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderDateSwitcherComponent, "elder-date-switcher", never, { "datePickerEnabled": "datePickerEnabled"; "datePickerTouchUi": "datePickerTouchUi"; "dense": "dense"; "date": "date"; }, { "dateChange": "dateChange"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.2.4",
+  "version": "15.3.0",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -7,6 +7,7 @@
   $typography: mat.get-typography-config($config-or-theme);
 
   @include _interval-form-field-sizing();
+  @include _interval-form-field-color();
 }
 
 @mixin _interval-form-field-sizing(){
@@ -26,3 +27,9 @@
     width: 224px;
   }
 }
+
+@mixin _interval-form-field-color(){
+  .mdc-text-field__input .mat-date-range-input-separator {
+    color: inherit;
+  }
+}

package/theming/_elder-chip-theme.scss

@@ -0,0 +1,160 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+$colorStateNone: rgb(143, 143, 143);
+$colorStateOpen: rgb(199, 199, 199);
+$colorStateInProgress: rgb(33, 150, 243);
+$colorStateCompleted: rgb(4, 170, 109);
+$colorStateWarn: rgb(255, 145, 0);
+$colorStateError: rgb(255, 0, 0);
+$colorStateOther: rgb(121, 73, 252);
+
+@mixin theme($config-or-theme) {
+
+  $primary: map-get($config-or-theme, primary);
+  $accent: map-get($config-or-theme, accent);
+  $warn: map-get($config-or-theme, warn);
+
+  $color-config: mat.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($color-config, is-dark);
+
+  // override state colors for cases where base color needs adjustment for either dark or light theme
+  //$colorStateInProgress: mix(black, $colorStateInProgress, if($is-dark-theme, 0%, 30%));
+  //$colorStateWarn: mix(black, $colorStateWarn, if($is-dark-theme, 0%, 30%));
+  //$colorStateWarn: mat-comat-color($primary, lighter);
+
+  .mat-mdc-chip.elderChipLabel {
+
+    &.md3 {
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    &.colorPrimary {
+      &.legacy {
+        background-color: mat.get-color-from-palette($primary, default);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: if(
+              $is-dark-theme,
+              mdc-theme-color.prop-value(text-primary-on-light),
+              mdc-theme-color.prop-value(text-primary-on-dark)
+          );
+        }
+      }
+      &.md3 {
+        background-color: mat.get-color-from-palette($primary, default, 0.2);
+        border-color: mat.get-color-from-palette($primary);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: mat.get-color-from-palette($primary);
+        }
+      }
+    }
+
+    &.colorAccent {
+      &.legacy {
+        background-color: mat.get-color-from-palette($accent, default);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: if(
+              $is-dark-theme,
+              mdc-theme-color.prop-value(text-primary-on-light),
+              mdc-theme-color.prop-value(text-primary-on-dark)
+          );
+        }
+      }
+      &.md3 {
+        background-color: mat.get-color-from-palette($accent, default, 0.2);
+        border-color: mat.get-color-from-palette($accent);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: mat.get-color-from-palette($accent);
+        }
+      }
+
+    }
+
+    &.colorWarn {
+      &.legacy {
+        background-color: mat.get-color-from-palette($warn, default);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: if(
+              $is-dark-theme,
+              mdc-theme-color.prop-value(text-primary-on-light),
+              mdc-theme-color.prop-value(text-primary-on-dark)
+          );
+        }
+      }
+      &.md3 {
+        background-color: mat.get-color-from-palette($warn, default, 0.2);
+        border-color: mat.get-color-from-palette($warn);
+        .mat-mdc-chip-action-label,
+        .mat-mdc-chip-avatar {
+          color: mat.get-color-from-palette($warn);
+        }
+      }
+    }
+
+    &.stateNone {
+      background-color: rgba($colorStateNone, 0.2);
+      border-color: $colorStateNone;
+    }
+
+    &.stateOpen {
+      background-color: rgba($colorStateOpen, 0.2);
+      border-color: $colorStateOpen;
+      .mat-mdc-chip-avatar {
+        color: $colorStateOpen;
+      }
+    }
+
+    &.stateInProgress {
+      background-color: rgba($colorStateInProgress, 0.2);
+      border-color: $colorStateInProgress;
+      .mat-mdc-chip-action-label,
+      .mat-mdc-chip-avatar {
+        color: $colorStateInProgress
+      }
+    }
+
+    &.stateCompleted {
+      background-color: rgba($colorStateCompleted, 0.2);
+      border-color: $colorStateCompleted;
+      .mat-mdc-chip-action-label,
+      .mat-mdc-chip-avatar{
+        color: $colorStateCompleted;
+      }
+    }
+
+    &.stateWarn {
+      background-color: rgba($colorStateWarn, 0.2);
+      border-color: $colorStateWarn;
+      .mat-mdc-chip-action-label,
+      .mat-mdc-chip-avatar{
+        color: $colorStateWarn;
+      }
+    }
+
+    &.stateError {
+      background-color: rgba($colorStateError, 0.2);
+      border-color: $colorStateError;
+      .mat-mdc-chip-action-label,
+      .mat-mdc-chip-avatar{
+        color: $colorStateError;
+      }
+    }
+
+    &.stateOther {
+      background-color: rgba($colorStateOther, 0.2);
+      border-color: $colorStateOther;
+      .mat-mdc-chip-action-label,
+      .mat-mdc-chip-avatar{
+        color: $colorStateOther;
+      }
+    }
+  }
+
+}

package/theming/_elder-mdc-support.scss

@@ -126,31 +126,38 @@
 
   .mat-mdc-form-field {
     &.mat-focused {
-      &.mat-primary .elder-mdc-control-icon {
-        color: mat.get-color-from-palette($primary, text);
+      &.mat-primary {
+        .elder-mdc-control-icon, .elder-control-icon-button {
+          color: mat.get-color-from-palette($primary, text);
+        }
       }
 
-      &.mat-accent .elder-mdc-control-icon {
-        color: mat.get-color-from-palette($accent, text);
+      &.mat-accent {
+        .elder-mdc-control-icon, .elder-control-icon-button {
+          color: mat.get-color-from-palette($accent, text);
+        }
       }
 
-      &.mat-warn .elder-mdc-control-icon {
-        color: mat.get-color-from-palette($warn, text);
+      &.mat-warn {
+        .elder-mdc-control-icon, .elder-control-icon-button {
+          color: mat.get-color-from-palette($warn, text);
+        }
       }
     }
 
     &.mat-form-field-invalid {
-      .elder-mdc-control-icon {
+      .elder-mdc-control-icon, .elder-control-icon-button {
         color: mat.get-color-from-palette($warn, text);
       }
     }
 
     &.mat-form-field-disabled {
-      .elder-mdc-control-icon {
+      .elder-mdc-control-icon, .elder-control-icon-button {
         color: mat.get-color-from-palette($foreground, disabled-text);
       }
     }
   }
+
 }
 
 @mixin _form-field-palette($palette) {
@@ -168,16 +175,16 @@
     color: $contrast-color;
 
     .mdc-text-field__input {
-      background: mat.get-color-from-palette($palette);
-      color: $contrast-color;
-      caret-color: currentColor;
+        background: mat.get-color-from-palette($palette);
+        color: $contrast-color;
+        caret-color: currentColor;
     }
 
     ::placeholder, .mat-mdc-select-placeholder {
       color: $contrast-color-inactive;
     }
 
-    .elder-mdc-control-icon, .mat-mdc-select-arrow {
+    .elder-mdc-control-icon, .elder-control-icon-button, .mat-mdc-select-arrow {
       color: $contrast-color-inactive;
     }
 
@@ -197,7 +204,7 @@
     }
 
     &.mat-focused {
-      .mat-mdc-select-arrow, .elder-mdc-control-icon {
+      .mat-mdc-select-arrow, .elder-mdc-control-icon, .elder-control-icon-button {
         color: $contrast-color;
       }
     }