@energycap/components 0.42.4-esbuild.20250131-1105 → 0.42.4-esbuild.20250131-1219

package/src/styles/mixins/_dialog-base.scss

@@ -1,96 +0,0 @@
-////
-/// @deprecated These styles are not guaranteed to be available in the future.
-////
-
-@import '../core';
-
-// These duration values need to be kept in sync with dialog.component.ts
-$dialog-open-duration: 125;
-$dialog-close-duration: 100;
-$panel-open-duration: 250;
-$panel-close-duration: 225;
-
-$dialog-min-height: 9rem;
-$dialog-max-width: 90vw;
-$dialog-max-height: 90vh;
-$dialog-widths: (
-  xsmall: 20rem,
-  small: 30rem,
-  medium: 40rem,
-  large: 50rem,
-  xlarge: 60rem,
-  full: $dialog-max-width
-);
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@mixin dialog-overlay {
-  align-items: center;
-  background-color: var(--ec-dialog-background-color);
-  justify-content: center;
-  position: fixed;
-  z-index: var(--ec-z-index-dialog);
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@mixin dialog-window {
-  background-color: var(--ec-background-color-body);
-  background-clip: padding-box;
-  box-shadow: 0 0 0.625rem rgba($black, .2);
-  border-radius: var(--ec-border-radius-dialog);
-  overflow: hidden;
-  display: flex;
-  flex: none;
-  min-height: $dialog-min-height;
-  max-height: $dialog-max-height;
-  max-width: $dialog-max-width;
-  width: var(--ec-dialog-width);
-}
-
-@mixin dialog-open {
-  display: flex;
-}
-
-@mixin dialog-fade-in {
-  animation-name: fadeIn;
-  animation-duration: #{$dialog-open-duration}ms;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in-out;
-}
-
-@mixin dialog-fade-out {
-  animation-name: fadeIn;
-  animation-duration: #{$dialog-close-duration}ms;
-  animation-direction: reverse;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in-out;
-}
-
-@mixin dialog-sizes($selector-prefix) {
-  @each $width, $value in $dialog-widths {
-    #{$selector-prefix}-#{$width} {
-      --ec-dialog-width: #{$value};
-    }
-  }
-}

package/src/styles/mixins/_form-control-base.scss

@@ -1,641 +0,0 @@
-@use "sass:math";
-
-@import '../icons';
-
-$form-control-icon-size: 1rem;
-$form-control-font-size: 1rem;
-$form-control-icon-position: .5rem center;
-$form-control-label-size: var(--ec-font-size-label);
-$form-control-height: 2rem;
-$form-control-line-height: 1.25rem;
-$form-control-padding-x: .5rem;
-$form-control-spacing-y: 1rem;
-$form-control-padding-y: .3125rem;
-
-$checkbox-indicator-size: $form-control-icon-size;
-
-@mixin form-control-input-base {
-  &::selection {
-    background-color: var(--ec-form-control-background-color-selection);
-    color: var(--ec-form-control-color-selection);
-  }
-  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: var(--ec-form-control-color-placeholder);
-  }
-  &::-moz-placeholder { /* Firefox 19+ */
-    color: var(--ec-form-control-color-placeholder);
-    opacity: 1;
-  }
-  &:-ms-input-placeholder { /* IE 10+ */
-    color: var(--ec-form-control-color-placeholder);
-  }
-  &:-moz-placeholder { /* Firefox 18- */
-    color: var(--ec-form-control-color-placeholder);
-    opacity: 1;
-  }
-}
-
-@mixin form-control-input-group-invalid {
-  .textbox-group-input ::ng-deep .control input.ng-invalid,
-  .textbox-group-input ::ng-deep .control input.ng-valid {
-    @include form-control-state(invalid, input);
-
-    background-image: none;
-
-    & ~ .icon-invalid {
-      display: inline-flex;
-      position: absolute;
-      left: .5rem;
-      top: .5rem;
-      z-index: 1;
-    }
-
-    & ~ .icon-required {
-      display: none
-    }
-  }
-
-  &:not(.open) {
-    .textbox-group-btn-right ::ng-deep button{
-      &:not(:focus) {
-        border-color: var(--ec-form-control-border-color-invalid);
-      }
-      background-color: var(--ec-form-control-background-color-invalid);
-    }
-  }
-}
-
-/// Calculate the background properties for an input icon
-/// @param {string} $icon - The classname of the icon (matches the filename)
-/// @param {number} $width [$form-control-icon-size] - The width of the icon, converted to ems
-/// @param {number} $height [$form-control-icon-size] - The height of the icon, converted to ems
-/// @param {string|number|list} $position [$form-control-icon-position] - The background-position of the icon
-/// @param {number} $indent [$form-control-icon-size] - The amount to indent the text to allow room for the icon
-@mixin form-control-input-icon(
-  $icon,
-  $width: $form-control-icon-size,
-  $height: $form-control-icon-size,
-  $position: $form-control-icon-position,
-  $indent: $form-control-icon-size + .25rem,
-) {
-  $size: $width, $height;
-  @include icon-bg-image($icon, $position, $size);
-  padding-left: ($indent + $form-control-padding-x);
-}
-
-@mixin form-control-state($state, $selector) {
-  $icon-position: $form-control-icon-position;
-
-  @if $selector == textarea {
-    $icon-position: .5rem .5rem;
-  }
-
-  /// Required
-  @if $state == required {
-    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
-    @include form-control-input-icon($required-icon, $position: $icon-position);
-
-  /// Pending
-  } @else if $state == pending {
-
-    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
-    @include form-control-input-icon(pending-icon(), $position: $icon-position);
-
-  /// Invalid
-  } @else if $state == invalid {
-    background-color: var(--ec-form-control-background-color-invalid);
-    border-color: var(--ec-form-control-border-color-invalid);
-    
-    &:focus {
-      border-color: var(--ec-form-control-background-color-invalid);
-    }
-
-    // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
-    @include form-control-input-icon($invalid-icon, $position: $icon-position);
-
-  /// Focus
-  } @else if $state == focus {
-    border-color: var(--ec-form-control-border-color-focus);
-    box-shadow: var(--ec-form-control-box-shadow-focus);
-    position: relative;
-    z-index: 1;
-
-  /// Disabled
-  } @else if $state == disabled {
-    background-color: var(--ec-form-control-background-color-disabled);
-    border-color: var(--ec-form-control-border-color-disabled);
-    color: var(--ec-form-control-color-disabled);
-    opacity: var(--ec-form-control-opacity-disabled);
-
-    &:required,
-    &:required.is-empty {
-      background-image: none;
-      padding-left: $form-control-padding-x;
-
-      // We need to define these again because the :required styles override
-      // the background-color and border-color we set above
-      background-color: var(--ec-form-control-background-color-disabled);
-      border-color: var(--ec-form-control-border-color-disabled);
-
-      & + .icon-required {
-        display: none;
-      }
-    }
-  }
-}
-
-/// A form control label
-@mixin form-control-label {
-  color: var(--ec-form-control-label-color, var(--ec-color-secondary-dark));
-  display: block;
-  font-size: $form-control-label-size;
-  line-height: 1;
-  margin: calc(#{$form-control-label-size} / 2) 0;
-}
-
-/// The default form control element in the control component
-/// @param {string} $tag [input] - The HTML tag name of the input element (e.g. input, textarea)
-@mixin form-control-input($selector: input, $new-state-icons: false) {
-  @include form-control-input-base;
-  background-color: var(--ec-form-control-background-color);
-  border: 1px solid var(--ec-form-control-border-color);
-  border-radius: var(--ec-border-radius);
-  background-image: none;
-  background-clip: padding-box;
-  width: 100%;
-  line-height: $form-control-line-height;
-  padding: $form-control-padding-y $form-control-padding-x;
-
-  @if $selector == input {
-    height: $form-control-height;
-  } @else {
-    height: auto;
-  }
-
-  & ~ .icon-required,
-  & ~ .icon-invalid {
-    color: var(--ec-form-control-border-color-invalid);
-  }
-
-  &:required {
-    &.is-empty {
-      @include form-control-state(required, $selector);
-
-      @if $new-state-icons {
-        background-image: none;
-
-        & ~ .icon-required {
-          display: inline-flex;
-          position: absolute;
-          left: .5rem;
-          top: .5rem;
-          z-index: 1;
-        }
-      }
-    }
-  }
-
-  // Use .ng-invalid because not all Angular validators trigger :invalid
-  &.ng-invalid {
-    &.ng-touched {
-      @include form-control-state(invalid, $selector);
-
-      @if $new-state-icons {
-        background-image: none;
-
-        & ~ .icon-invalid {
-          display: inline-flex;
-          position: absolute;
-          left: .5rem;
-          top: .5rem;
-          z-index: 1;
-        }
-  
-        & ~ .icon-required {
-          display: none
-        }
-      }
-    }
-  }
-
-  &.is-pending {
-    &.ng-valid,
-    &.ng-invalid,
-    &.ng-pending {
-      @include form-control-state(pending, $selector);
-
-      @if $new-state-icons {
-        & ~ .icon-loading {
-          display: inline-flex;
-          position: absolute;
-          left: .5rem;
-          top: .5rem;
-          z-index: 1;
-        }
-
-        & ~ .icon-required,
-        & ~ .icon-invalid {
-          display: none;
-        }
-      }
-    }
-  }
-
-  &:focus,
-  &:focus.is-empty {
-    @include form-control-state(focus, $selector);
-  }
-
-  &:disabled {
-    @include form-control-state(disabled, $selector);
-  }
-
-  &.is-uppercase:not(.is-empty) {
-    text-transform: uppercase;
-  }
-}
-
-/// The base styles of a control component. These styles will be applied to :host
-@mixin form-control-base() {
-  color: var(--ec-form-control-color);
-  // font-family: $control-font-family;
-  font-size: var(--ec-form-control-font-size);
-  display: block;
-  margin-bottom: 1rem;
-  width: 100%;
-
-  :host-context(.form-condensed) {
-   margin-bottom: .5rem;
-  }
-
-  .control {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &.control-label-bottom {
-      flex-direction: column-reverse;
-    }
-
-    &.control-label-left {
-      flex-direction: row;
-      label {
-        margin-right: .25rem;
-      }
-    }
-
-    &.control-label-right {
-      flex-direction: row-reverse;
-      label {
-        margin-left: .25rem;
-      }
-    }
-
-    &.control-label-left,
-    &.control-label-right {
-      align-items: center;
-
-      label {
-        flex: 1 1;
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-      .control-input {
-        flex: 2 2;
-      }
-    }
-
-    &.is-readonly {
-      input,
-      select,
-      textarea {
-        @include form-control-read-only;
-      }
-    }
-
-    &.invalid {
-      @include form-control-input-group-invalid;
-    }
-  }
-
-  .textbox-group {
-    display: flex;
-    position: relative;
-  }
-
-  textarea:focus,
-  input:focus,
-  select:focus {
-    outline: none;
-  }
-}
-
-@mixin checkbox-radio {
-  cursor: pointer;
-  display: inline-flex;
-  margin-bottom: 0;
-  position: relative;
-}
-
-@mixin checkbox-radio-input(
-  $type,
-  $indicator-selector: '.indicator',
-  $label-selector: '.label'
-) {
-  margin-top: .5rem;
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-
-  &:not(:checked) {
-    + #{$indicator-selector} {
-      color: var(--ec-form-control-border-color);
-
-      &::before {
-        display: none;
-      }
-    } 
-  }
-
-  @if $type == 'checkbox' {
-    &.indeterminate,
-    &:indeterminate {
-      + #{$indicator-selector} {
-        color: var(--ec-color-interactive);
-
-        &::before {
-          content: '';
-          background-color: currentColor;
-          display: block;
-          width: 10px;
-          height: 3px;
-        }
-      }
-    }
-  }
-
-  &:focus {
-    + #{$indicator-selector} {
-      color: var(--ec-color-interactive);
-      box-shadow: var(--ec-form-control-box-shadow-focus);
-      border-color: var(--ec-form-control-border-color-focus);
-    }
-  }
-
-  &:disabled {
-    + #{$indicator-selector} {
-      color: var(--ec-form-control-color-disabled);
-      background-color: var(--ec-form-control-background-color-disabled);
-      border-color: var(--ec-form-control-border-color-disabled);
-      opacity: var(--ec-form-control-opacity-disabled);
-    }
-
-    ~ #{$label-selector} {
-      color: var(--ec-form-control-color-disabled);
-      opacity: var(--ec-form-control-opacity-disabled);
-    }
-  }
-}
-
-@mixin checkbox-radio-indicator($type) {
-  background-color: var(--ec-form-control-background-color);
-  background-clip: padding-box;
-  border: 1px solid currentColor;
-  color: var(--ec-color-interactive);
-  margin-top: .5rem;
-  flex: none;
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1em;
-  width: 1em;
-
-  @if $type == 'radio' {
-    border-radius: 50%;
-
-    &::before {
-      background-color: currentColor;
-      content: "";
-      display: block;
-      width: .5em;
-      height: .5em;
-      border-radius: 50%;
-    }
-
-  } @else {
-    border-radius: .125rem;
-
-    &::before {
-      font-size: .6875em;
-    }
-  }
-}
-
-@mixin checkbox-radio-label() {
-  line-height: $form-control-line-height;
-  padding: 0.375rem 0;
-  margin-left: .5rem;
-  min-height: $form-control-height;
-  height: auto;
-}
-
-@mixin checkbox-radio-readonly(
-  $input-selector: '.input',
-  $indicator-selector: '.indicator',
-  $label-selector: '.label'
-) {
-  pointer-events: none;
-
-  #{$input-selector} {
-    opacity: 0;
-  }
-
-  #{$indicator-selector} {
-    background-color: var(--ec-form-control-background-color-readonly);
-    border-color: var(--ec-form-control-border-color-readonly);
-  }
-
-  #{$label-selector},
-  #{$indicator-selector} {
-    opacity: 1;
-    color: var(--ec-form-control-color);
-  }
-}
-
-@mixin toggle() {
-  font-size: var(--ec-form-control-font-size);
-  background-color: var(--ec-border-color);
-  border-radius: var(--ec-border-radius);
-  border: 1px solid var(--ec-border-color);
-  min-height: 2em;
-  position: relative;
-  color: var(--ec-color-secondary-dark);
-  display: flex;
-
-  input {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-
-    &:checked {
-      & + label {
-        color: var(--ec-color-interactive);
-      }
-
-      &:last-of-type {
-        & ~ a {
-          transform: translateX(100%);
-        }
-      }
-    }
-
-    &:focus ~ .toggle-focused {
-      display: block;
-    }
-  }
-
-  .toggle-focused {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    box-shadow: var(--ec-form-control-box-shadow-focus);
-    border-radius: var(--ec-form-control-border-radius);
-    display: none;
-  }
-
-  label {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex: 1 1 0%;
-    justify-content: center;
-    line-height: 1.1em;
-    margin-bottom: 0;
-    padding: 0.375rem .5rem;
-    position: relative;
-    text-align: center;
-    transition: color .3s ease;
-    z-index: 2;
-
-    .ec-icon {
-      color: inherit;
-    }
-  }
-
-  a {
-    border: 0.1875rem solid transparent;
-    border-radius: calc(var(--ec-form-control-border-radius) * .75);
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    transition: transform .25s ease;
-    width: 50%;
-    z-index: 1;
-
-    .toggle-handle {
-      background-color: var(--ec-form-control-background-color);
-      border-radius: calc(var(--ec-form-control-border-radius) * .75);
-      height: 100%;
-    }
-  }
-
-  &.is-disabled {
-    opacity: var(--ec-form-control-opacity-disabled);
-    color: var(--ec-form-control-color-disabled);
-
-    label {
-      color: inherit !important;
-      cursor: default;
-    }
-  }
-}
-
-@mixin toggle-options {
-  @each $count in (3,4,5) {
-    .toggle-options-#{$count} {
-      a {
-        width: percentage(math.div(1, $count));
-      }
-
-      input:checked:last-of-type ~ a {
-        transform: translateX(percentage($count - 1));
-      }
-
-      @while $count > 2 {
-        $count: $count - 1;
-        input:checked:nth-of-type(#{$count}) ~ a {
-          transform: translateX(percentage($count - 1));
-        }
-      }
-    }
-  }
-}
-
-@mixin form-heading() {
-  @include form-control-label;
-  font-weight: bold;
-}
-
-// Override the presentation of children controls when the parent control is
-// untouched
-@mixin form-control-untouched {
-  input {
-    &.ng-invalid.ng-touched {
-      background-image: none;
-      padding-left: $form-control-padding-x;
-
-      &:not(.is-empty) ~ .units-left {
-        left: 0;
-      }
-    }
-    &:required:not(:disabled).is-empty {
-      @include form-control-state(required, input);
-
-      &:focus {
-        @include form-control-state(focus, input);
-      }
-    }
-  }
-}
-
-// Shared styles for controls that include a popup when the popup is open (combobox, dateinput)
-@mixin form-control-open() {
-  .textbox-group {
-    ec-textbox {
-      --ec-form-control-box-shadow-focus: none;
-      --ec-form-control-border-color-focus: var(--ec-form-control-border-color);
-    }
-
-    ec-button {
-      --ec-button-box-shadow-focus-secondary: none;
-      --ec-button-background-color-secondary: var(--ec-background-color-selected);
-    }
-  }
-}
-
-@mixin form-control-read-only {
-  border-color: var(--ec-form-control-border-color-readonly);
-  background-color: var(--ec-form-control-background-color-readonly);
-  background-clip: border-box;
-  background-image: none;
-  color: var(--ec-form-control-color-readonly);
-  opacity: 1;
-  user-select: none;
-  pointer-events: none;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-@mixin form-control-popup {
-  background-color: var(--ec-background-color);
-  border-radius: var(--ec-border-radius-card);
-  box-shadow: var(--ec-box-shadow-overlay);
-  margin-top: .25rem;
-  overflow: hidden;
-  z-index: var(--ec-z-index-popup);
-}