@elderbyte/ngx-starter 14.3.2 → 14.4.0-beta.11

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

@@ -1,34 +1,61 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../elder-select-base' as elder-select-base;
 
-.prefix-padding {
-  padding-right: 4px;
-}
+@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);
 
-.leading-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-}
+  @include elder-select-base.typography($typography-config);
+
+  .elder-multi-select {
+    font-family: mat.font-family($config);
+
+    .elder-select-input {
+      height: $line-height-em
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      width: 144px;
+      min-width: 80px; // 180 - (prefix-icon) - (browser-icon)
+      max-width: 100%;
+    }
 
-.elder-chip-input {
-  width: 120px!important;
-  max-width: 120px!important;
+  }
 }
 
-.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);
   }
 }
 
 .clickable-chip {
   cursor: pointer;
 }
+
+.elder-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,77 @@
+@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 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);
+
+  .elder-select {
+    font-family: mat.font-family($config);
+
+    .elder-input-prefix-icon-container {
+      padding-right: 3px;
+    }
+  }
+
+  .elder-select-input {
+    height: $line-height-em
+  }
+
+  .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();
+  }
+
+  @if $color != null {
+    @include elder-select-base.color($color);
+  }
+
+  @if $typography != null {
+    @include typography($typography);
+  }
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(0.75);
+  }
+}
+
+.loading {
+  animation: shrink 0.3s ease-in-out infinite alternate;
+  -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
+}
+
+.clickable-icon {
+  cursor: pointer;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.elder-select-control {
+}
+
+.elder-select-dropdown-input {
+  cursor: pointer;
+}

package/theming/_elder-common.scss

@@ -83,6 +83,16 @@
     }
   }
 
+  /******************************
+  Material Form Controls
+  *******************************/
+
+  .elder-form-control {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+
   /******************************
   Material Form Field
   *******************************/

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/select/elder-entity-value-accessor.mjs

@@ -1,13 +0,0 @@
-export function isElderEntityValueAccessor(object) {
-    if (!object) {
-        return false;
-    }
-    const vac = object;
-    return 'entity' in vac // This might be undefined
-        && 'entityId' in vac // This might be undefined
-        && vac.entityIdChange !== undefined
-        && vac.entityChange !== undefined
-        && vac.updateValueByEntity !== undefined
-        && vac.entityToValue !== undefined;
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxkZXItZW50aXR5LXZhbHVlLWFjY2Vzc29yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWxkZXJieXRlL25neC1zdGFydGVyL3NyYy9saWIvY29tcG9uZW50cy9zZWxlY3QvZWxkZXItZW50aXR5LXZhbHVlLWFjY2Vzc29yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDQSxNQUFNLFVBQVUsMEJBQTBCLENBQUMsTUFBVztJQUVwRCxJQUFJLENBQUMsTUFBTSxFQUFFO1FBQUUsT0FBTyxLQUFLLENBQUM7S0FBRTtJQUU5QixNQUFNLEdBQUcsR0FBRyxNQUFrRCxDQUFDO0lBRS9ELE9BQU8sUUFBUSxJQUFJLEdBQUcsQ0FBQywwQkFBMEI7V0FDNUMsVUFBVSxJQUFJLEdBQUcsQ0FBQywwQkFBMEI7V0FDNUMsR0FBRyxDQUFDLGNBQWMsS0FBSyxTQUFTO1dBQ2hDLEdBQUcsQ0FBQyxZQUFZLEtBQUssU0FBUztXQUM5QixHQUFHLENBQUMsbUJBQW1CLEtBQUssU0FBUztXQUNyQyxHQUFHLENBQUMsYUFBYSxLQUFLLFNBQVMsQ0FBQztBQUN2QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcblxuZXhwb3J0IGludGVyZmFjZSBJRWxkZXJFbnRpdHlWYWx1ZUFjY2Vzc29yPFRFbnRpdHksIFRJZCwgVFZhbHVlPiB7XG5cbiAgLyoqXG4gICAqIEdldHMgb3Igc2V0cyB0aGUgZW50aXR5XG4gICAqL1xuICBlbnRpdHk6IFRFbnRpdHk7XG5cbiAgLyoqXG4gICAqIEdldHMgb3Igc2V0cyB0aGUgZW50aXR5IGlkXG4gICAqL1xuICBlbnRpdHlJZDogVElkO1xuXG4gIC8qKlxuICAgKiBFbWl0cyB3aGVuIHRoZSBlbnRpdHkgaWQgaGFzIGNoYW5nZWQuXG4gICAqL1xuICBlbnRpdHlJZENoYW5nZTogT2JzZXJ2YWJsZTxUSWQ+O1xuXG4gIC8qKlxuICAgKiBFbWl0cyB3aGVuIHRoZSBlbnRpdHkgaGFzIGNoYW5nZWQuXG4gICAqL1xuICBlbnRpdHlDaGFuZ2U6IE9ic2VydmFibGU8VEVudGl0eT47XG5cbiAgLyoqXG4gICAqIFVwZGF0ZSB0aGUgY29udHJvbCB2YWx1ZSBieSB0aGUgZ2l2ZW4gZW50aXR5XG4gICAqIGFuZCBlbWl0IGEgdmFsdWUtdXBkYXRlZCBldmVudCB3aGljaCBzaW11bGF0ZXNcbiAgICogYSB1c2VyIGFjdGlvbi5cbiAgICogQHBhcmFtIGVudGl0eVxuICAgKi9cbiAgdXBkYXRlVmFsdWVCeUVudGl0eShlbnRpdHk6IFRFbnRpdHkpOiB2b2lkO1xuXG4gIC8qKlxuICAgKiBDb252ZXJ0IGFuIGVudGl0eSB0byBhIHZhbHVlIGZvciB0aGlzIGNvbnRyb2wuXG4gICAqIEBwYXJhbSBlbnRpdHlcbiAgICovXG4gIGVudGl0eVRvVmFsdWUoZW50aXR5OiBURW50aXR5KTogVFZhbHVlO1xuXG59XG5cblxuZXhwb3J0IGZ1bmN0aW9uIGlzRWxkZXJFbnRpdHlWYWx1ZUFjY2Vzc29yKG9iamVjdDogYW55KTogb2JqZWN0IGlzIElFbGRlckVudGl0eVZhbHVlQWNjZXNzb3I8YW55LCBhbnksIGFueT4ge1xuXG4gIGlmICghb2JqZWN0KSB7IHJldHVybiBmYWxzZTsgfVxuXG4gIGNvbnN0IHZhYyA9IG9iamVjdCBhcyBJRWxkZXJFbnRpdHlWYWx1ZUFjY2Vzc29yPGFueSwgYW55LCBhbnk+O1xuXG4gIHJldHVybiAnZW50aXR5JyBpbiB2YWMgLy8gVGhpcyBtaWdodCBiZSB1bmRlZmluZWRcbiAgICAmJiAnZW50aXR5SWQnIGluIHZhYyAvLyBUaGlzIG1pZ2h0IGJlIHVuZGVmaW5lZFxuICAgICYmIHZhYy5lbnRpdHlJZENoYW5nZSAhPT0gdW5kZWZpbmVkXG4gICAgJiYgdmFjLmVudGl0eUNoYW5nZSAhPT0gdW5kZWZpbmVkXG4gICAgJiYgdmFjLnVwZGF0ZVZhbHVlQnlFbnRpdHkgIT09IHVuZGVmaW5lZFxuICAgICYmIHZhYy5lbnRpdHlUb1ZhbHVlICE9PSB1bmRlZmluZWQ7XG59XG4iXX0=