@elderbyte/ngx-starter 14.4.0-beta.2 → 14.4.0-beta.20

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,68 +1,52 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '../../../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../elder-select-base' as elder-select-base;
 
-@mixin theme($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
+@mixin typography($typography-config) {
+  $config: mat.private-typography-to-2014-config($typography-config);
+  // The unit-less line-height from the font config.
+  $line-height: mat.line-height($config, input);
+  $font-size: mat.font-size($config, input);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
+  @include elder-select-base.typography($typography-config);
 
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
+  .elder-multi-select {
+    font-family: mat.font-family($config);
 
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
+    .elder-select-input {
+      height: $line-height-em
     }
 
-    &.mat-form-field-invalid .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
+    .elder-prefix-icon {
+      margin-left: 3px;
     }
 
-    &.mat-form-field-disabled .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
+    .elder-chip-input {
+      width: 144px;
+      min-width: 80px; // 180 - (prefix-icon) - (browser-icon)
+      max-width: 100%;
     }
+
   }
 }
 
-.small-icon-button {
-  width: 24px !important;
-  height: 24px !important;
-  line-height: 24px !important;
+@mixin theme($config-or-theme) {
+  $color: mat.get-color-config($config-or-theme);
+  $typography: mat.get-typography-config($config-or-theme);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.define-typography-config();
+  }
 
-  .mat-icon {
-    width: 16px !important;
-    height: 16px !important;
-    line-height: 16px !important;
+  @if $color != null {
+    @include elder-select-base.color($color);
   }
-  .material-icons {
-    font-size: 16px !important;
+
+  @if $typography != null {
+    @include typography($typography);
   }
 }
 

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -1,60 +1,50 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '../../../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../elder-select-base' as elder-select-base;
 
-@mixin theme($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
+@mixin typography($typography-config) {
+  $config: mat.private-typography-to-2014-config($typography-config);
+  // The unit-less line-height from the font config.
+  $line-height: mat.line-height($config, input);
+  $font-size: mat.font-size($config, input);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
+  @include elder-select-base.typography($typography-config);
 
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
+  .elder-select {
+    font-family: mat.font-family($config);
 
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
+    .elder-input-prefix-icon-container {
+      padding-right: 3px;
     }
+  }
 
-    &.mat-form-field-invalid .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
+  .elder-select-input {
+    height: $line-height-em
+  }
 
-    &.mat-form-field-disabled .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
+  .elder-select-arrow {
+    cursor: pointer;
   }
 }
 
+@mixin theme($config-or-theme) {
+  $color: mat.get-color-config($config-or-theme);
+  $typography: mat.get-typography-config($config-or-theme);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.define-typography-config();
+  }
 
-.prefix-container {
-  width: 24px;
-  height: 16px;
+  @if $color != null {
+    @include elder-select-base.color($color);
+  }
+
+  @if $typography != null {
+    @include typography($typography);
+  }
 }
 
 @keyframes shrink {
@@ -71,28 +61,6 @@
   -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
 }
 
-.prefix-padding {
-  padding-right: 4px;
-}
-
-.leading-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-}
-
-.suffix-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  // padding-left: 4px;
-  .mat-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-  }
-}
-
 .clickable-icon {
   cursor: pointer;
 }
@@ -101,14 +69,9 @@
   width: 100%;
 }
 
-.elder-select-dropdown-input {
-  cursor: pointer;
-  // width: 162px;
+.elder-select-control {
 }
 
-.elder-select-arrow {
-  font-size: 18px;
-  width: 18px;
-  height: 18px;
+.elder-select-dropdown-input {
   cursor: pointer;
 }

package/theming/_elder-common.scss

@@ -71,6 +71,10 @@
     }
     .mat-form-field-infix {
       border: 0;
+      padding: 0 0 8px;
+    }
+    .mat-form-field-flex {
+      padding: 0;
     }
   }
 
@@ -87,44 +91,6 @@
   Material Form Controls
   *******************************/
 
-  .elder-icon-button-small {
-    width: 24px !important;
-    height: 24px !important;
-    line-height: 24px !important;
-
-    .mat-icon {
-      width: 18px !important;
-      height: 18px !important;
-      line-height: 18px !important;
-    }
-    .material-icons {
-      font-size: 18px !important;
-    }
-  }
-
-  .elder-input-prefix-icon-container {
-    height: 18px !important;
-    min-width: 24px !important;
-    padding-right: 3px;
-  }
-
-  .elder-icon-small-container {
-    height: 24px !important;
-    min-width: 24px !important;
-    padding: 3px;
-  }
-
-  .elder-icon-small {
-    width: 18px !important;
-    height: 18px !important;
-    line-height: 18px !important;
-    font-size: 18px !important;
-  }
-
-  /******************************
-  Material Form Controls
-  *******************************/
-
   .elder-form-control {
     width: 180px;
     overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)

package/theming/_elder-typography-utils.scss

@@ -0,0 +1,11 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+/// Coerce a value to `em` if it is a unitless number, otherwise returns
+/// the value provided.
+@function coerce-unitless-to-em($value) {
+  @return if(math.is-unitless($value), 1em * $value, $value);
+}

package/esm2020/lib/components/data-view/base/elder-data-view-base.module.mjs

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ElderDataViewBaseComponent } from './elder-data-view-base';
-import * as i0 from "@angular/core";
-export { ElderDataViewBaseComponent } from './elder-data-view-base';
-export class ElderDataViewBaseModule {
-}
-ElderDataViewBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: ElderDataViewBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderDataViewBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", ngImport: i0, type: ElderDataViewBaseModule, declarations: [ElderDataViewBaseComponent], imports: [CommonModule] });
-ElderDataViewBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: ElderDataViewBaseModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: ElderDataViewBaseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ElderDataViewBaseComponent],
-                    imports: [CommonModule],
-                }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxkZXItZGF0YS12aWV3LWJhc2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWxkZXJieXRlL25neC1zdGFydGVyL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLXZpZXcvYmFzZS9lbGRlci1kYXRhLXZpZXctYmFzZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBRXBFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBTXBFLE1BQU0sT0FBTyx1QkFBdUI7O29IQUF2Qix1QkFBdUI7cUhBQXZCLHVCQUF1QixpQkFIakIsMEJBQTBCLGFBQy9CLFlBQVk7cUhBRWIsdUJBQXVCLFlBRnRCLFlBQVk7MkZBRWIsdUJBQXVCO2tCQUpuQyxRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRSxDQUFDLDBCQUEwQixDQUFDO29CQUMxQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7aUJBQzFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBFbGRlckRhdGFWaWV3QmFzZUNvbXBvbmVudCB9IGZyb20gJy4vZWxkZXItZGF0YS12aWV3LWJhc2UnO1xuXG5leHBvcnQgeyBFbGRlckRhdGFWaWV3QmFzZUNvbXBvbmVudCB9IGZyb20gJy4vZWxkZXItZGF0YS12aWV3LWJhc2UnO1xuXG5ATmdNb2R1bGUoe1xuICAgIGRlY2xhcmF0aW9uczogW0VsZGVyRGF0YVZpZXdCYXNlQ29tcG9uZW50XSxcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgRWxkZXJEYXRhVmlld0Jhc2VNb2R1bGUge31cbiJdfQ==

package/esm2020/lib/components/iframes/iframe-message.mjs

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWZyYW1lLW1lc3NhZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21wb25lbnRzL2lmcmFtZXMvaWZyYW1lLW1lc3NhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIlxuXG5leHBvcnQgdHlwZSBJZnJhbWVBY3Rpb24gPSAnUE9TVCcgfCAnQ0xPU0UnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElmcmFtZU1lc3NhZ2U8VD4ge1xuXG4gIGFjdGlvbj86IElmcmFtZUFjdGlvbjtcbiAgZGF0YT86IFQ7XG5cbn1cbiJdfQ==

package/lib/components/data-view/base/elder-data-view-base.module.d.ts

@@ -1,9 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./elder-data-view-base";
-import * as i2 from "@angular/common";
-export { ElderDataViewBaseComponent } from './elder-data-view-base';
-export declare class ElderDataViewBaseModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewBaseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataViewBaseModule, [typeof i1.ElderDataViewBaseComponent], [typeof i2.CommonModule], never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ElderDataViewBaseModule>;
-}

package/lib/components/iframes/iframe-message.d.ts

@@ -1,5 +0,0 @@
-export declare type IframeAction = 'POST' | 'CLOSE';
-export interface IframeMessage<T> {
-    action?: IframeAction;
-    data?: T;
-}