ecabs-components 0.0.1

package/styles/scss/modules/_datepicker.scss

@@ -0,0 +1,422 @@
+@import "../utilities/index";
+
+app-form-datepicker {
+  .dateTimeWrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+
+    .datePart {
+      flex: 2;
+    }
+
+    .timePart {
+      flex: 1;
+      padding-left: 10px;
+      vertical-align: top;
+      max-width: calc-rem(160);
+
+      app-form-timepicker .timeInputWrapper {
+        display: block;
+      }
+
+      app-form-timepicker {
+        width: 100%;
+
+        .inputWrapper {
+          display: block;
+        }
+      }
+    }
+
+    .dateInputWrapper {
+      position: relative;
+    }
+
+    input {
+      min-height: 42px;
+      width: 100%;
+      display: block;
+      box-sizing: border-box;
+      font-size: 14px;
+      font-weight: 500;
+      padding-left: 10px;
+      border-radius: 4px;
+      border: 1px solid rgb(107, 109, 115);
+      outline: none;
+      transition: all 300ms ease-in-out;
+
+      &:disabled {
+        border-bottom-width: 1px;
+        background-color: var(--color-white-opacity-05);
+      }
+    }
+
+    input[type='date']::-webkit-calendar-picker-indicator,
+    input[type='date']::-webkit-inner-spin-button {
+      display: none;
+    }
+
+    input[type='date']::-webkit-clear-button {
+      display: none;
+    }
+
+    .calendar-icon {
+      float: right;
+      margin-top: -38px;
+      padding: 5px 10px 5px 5px;
+      display: block;
+      font-size: 13px;
+      line-height: 20px;
+      color: var(--color-gray-500);
+      position: relative;
+      width: 40px;
+      height: 30px;
+      cursor: pointer;
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: calc-rem(22);
+
+      &.disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .app-element-wrapper {
+    &.focused {
+      label {
+        color: #376bfb;
+      }
+
+      input {
+        border-bottom-width: 2px;
+        border-bottom-color: #376bfb;
+      }
+    }
+
+    &.validationError {
+      label {
+        color: #ff4c4c;
+      }
+
+      input {
+        border-bottom-color: #ff4c4c;
+        border-bottom-width: 2px;
+      }
+    }
+  }
+}
+
+// ------------------------ datepicker component css override --------------
+
+.ng-mydp {
+  .myDpSelector {
+    border: 0;
+    padding: 0;
+    box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
+    0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
+    border-radius: 0 0 4px 4px;
+    background: white;
+
+    &:focus {
+      box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
+      0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
+    }
+
+    .myDpWeekDayTitle {
+      background-color: white;
+      font-weight: 500;
+      font-size: 11px;
+      color: rgba(22, 42, 76, 0.7);
+    }
+
+    .myDpNextBtn {
+      margin-left: auto;
+      margin-right: 16px;
+
+      .myDpIconRightArrow {
+        line-height: 26px;
+        height: 25px;
+
+        &::before {
+          color: #376bfb;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .myDpPrevBtn {
+      margin-left: 16px;
+
+      .myDpIconLeftArrow {
+        line-height: 26px;
+        height: 25px;
+
+        &::before {
+          color: #376bfb;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .myDpMonthYearSelBar {
+      height: 52px;
+      padding-top: 10px;
+      border: 0;
+    }
+
+    .myDpMonthYearText {
+      button {
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 20px;
+        color: #376bfb;
+      }
+
+      .myDpMonthBtn {
+        padding-right: 7px;
+        position: relative;
+        margin-right: 15px;
+
+        &::after {
+          position: absolute;
+          content: '';
+          height: 14px;
+          width: 1px;
+          right: -7px;
+          top: 6px;
+          background: rgba(22, 42, 76, 0.5);
+        }
+      }
+
+      .myDpYearBtn {
+        padding-left: 6px;
+      }
+    }
+
+    .myDpCalTable {
+      height: calc(100% - 54px);
+      width: calc(100% - 20px);
+      margin: 0 10px;
+    }
+
+    //---------------- days table -------------------------------
+    table.myDpCalTable {
+      td {
+        .myDpDayValue {
+          border-radius: 4px;
+          background: #f0f2f5;
+          display: inline-block;
+          box-sizing: border-box;
+          width: 32px;
+          height: 28px;
+          font-size: 13px;
+          line-height: 28px;
+          text-align: center;
+          color: rgba(22, 42, 76, 0.9);
+
+          &.myDpMarkCurrDay {
+            border-bottom: 0;
+            color: #376bfb;
+          }
+        }
+
+        &.myDpSelectedDay {
+          .myDpDayValue {
+            color: white !important;
+            background: #6ab72a !important;
+          }
+        }
+
+        &.myDpDisabled {
+          background: unset;
+
+          .myDpDayValue {
+            background: unset !important;
+            color: rgba(22, 42, 76, 0.5);
+            cursor: not-allowed;
+
+            &:hover {
+              background: unset !important;
+            }
+          }
+        }
+
+        &.myDpRangeColor {
+          background-color: white;
+
+          .myDpDayValue {
+            background: #bee39d !important;
+          }
+
+          &.myDpSelectedDay {
+            .myDpDayValue {
+              color: white !important;
+              background: #6ab72a !important;
+            }
+          }
+        }
+
+        &.myDpDaycell:focus {
+          box-shadow: unset;
+          outline: unset;
+        }
+
+        &.myDpPrevMonth,
+        &.myDpNextMonth {
+          .myDpDayValue {
+            background: #f6f7f9;
+            color: rgba(22, 42, 76, 0.5);
+          }
+        }
+
+        .myDpDimDay {
+          opacity: 1;
+        }
+      }
+
+      .myDpTableSingleDay:hover {
+        background-color: white;
+
+        .myDpDayValue {
+          background: #bee39d;
+          color: rgba(22, 42, 76, 0.9);
+        }
+      }
+
+      .myDpSelectedDay,
+      .myDpSelectedMonth,
+      .myDpSelectedYear {
+        background-color: white;
+        border-radius: 0;
+      }
+    }
+
+    //================== months table =====================
+    .myDpMonthTable {
+      height: 128px;
+      width: calc(100% - 20px);
+      margin: 0 10px;
+
+      td {
+        .myDpMonthValue {
+          display: inline-block;
+          height: 28px;
+          width: 80px;
+          background: #f0f2f5;
+          vertical-align: middle;
+          text-align: center;
+          line-height: 28px;
+          font-weight: normal;
+          font-size: 13px;
+          color: rgba(22, 42, 76, 0.9);
+          border-radius: 4px;
+
+          &.myDpMarkCurrMonth {
+            border: 0;
+            color: #376bfb;
+          }
+
+          &:hover {
+            background: #bee39d;
+          }
+        }
+
+        &.myDpDisabled {
+          background: unset;
+
+          .myDpMonthValue {
+            background: unset !important;
+            color: rgba(22, 42, 76, 0.5) !important;
+            cursor: not-allowed;
+          }
+        }
+
+        &.myDpSelectedMonth {
+          background-color: white;
+
+          .myDpMonthValue {
+            background: #6ab72a !important;
+            color: white !important;
+          }
+        }
+
+        &.myDpTableSingleMonth:hover {
+          background-color: white;
+        }
+      }
+    }
+
+    //================== years table =====================
+
+    .myDpYearTable {
+      height: 160px;
+      width: calc(100% - 20px);
+      margin: 0 10px;
+
+      td {
+        .myDpYearValue {
+          display: inline-block;
+          height: 28px;
+          width: 46px;
+          background: #f0f2f5;
+          vertical-align: middle;
+          text-align: center;
+          line-height: 28px;
+          font-weight: normal;
+          font-size: 13px;
+          color: rgba(22, 42, 76, 0.9);
+          border-radius: 4px;
+
+          &.myDpMarkCurrYear {
+            border: 0;
+            color: #376bfb;
+          }
+
+          &:hover {
+            background: #bee39d;
+          }
+        }
+
+        &.myDpDisabled {
+          background: unset;
+
+          .myDpYearValue {
+            background: unset !important;
+            color: rgba(22, 42, 76, 0.5) !important;
+            cursor: not-allowed;
+          }
+        }
+
+        &.myDpSelectedYear {
+          background-color: white;
+
+          .myDpYearValue {
+            background: #6ab72a !important;
+            color: white !important;
+          }
+        }
+
+        &.myDpTableSingleYear:hover {
+          background-color: white;
+        }
+      }
+    }
+  }
+
+  .myDpSelectorArrow {
+    height: 272px !important;
+    width: 268px !important;
+    margin-top: -12px;
+
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+}

package/styles/scss/modules/_dialog.scss

@@ -0,0 +1,14 @@
+.dialog {
+  @include e(title) {
+    @include fontSize($font-heading-xs);
+
+    font-weight: $font-weight-semibold;
+    color: var(--color-brand-dark);
+  }
+
+  @include m(maps) {
+    padding: 1px;
+    border-radius: $border-radius-base * 2;
+    background: #9cc0f9;
+  }
+}

package/styles/scss/modules/_divider.scss

@@ -0,0 +1,3 @@
+.divider {
+  border-top-color: var(--color-gray-300);
+}

package/styles/scss/modules/_form.scss

@@ -0,0 +1,221 @@
+$form-input-icon-size: 18px;
+
+.form,
+form {
+  &-field {
+    margin-bottom: 1rem;
+    position: relative;
+    // #Label
+    @include e(label) {
+      @include fontSize($font-size-xs);
+
+      display: inline-block;
+      margin-bottom: 0.25rem;
+      color: var(--color-gray-500);
+      cursor: pointer;
+
+
+      .icon {
+        @include fontSize($font-size-base);
+
+        display: inline;
+        vertical-align: middle;
+        margin-left: calc-rem(6px);
+      }
+    }
+
+    // #Input
+    @include e(input) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8) calc-rem(16);
+      border-radius: $border-radius-base;
+      border: 1px solid var(--color-gray-500);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16);
+        color: var(--color-gray-500);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        border-color: transparent;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error);
+        color: var(--color-error);
+      }
+    }
+
+    // #Textarea
+    @include e(textarea) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(16);
+      border-radius: $border-radius-base;
+      border: 1px solid var(--color-gray-500);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16);
+        color: var(--color-gray-500);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        border-color: transparent;
+      }
+    }
+
+    // #Invalid
+    @include m(invalid) {
+      .form-field__input,
+      .form-field__textarea {
+        color: var(--color-error);
+        border-color: var(--color-error);
+      }
+    }
+
+    // #Required
+    @include m(required) {
+      .form-field__label {
+        &:after {
+          @extend %pseudos;
+
+          content: '*';
+          margin-left: 0.2rem;
+          margin-top: 2px;
+          color: var(--color-error);
+        }
+      }
+    }
+
+    // #Validation
+    @include e(validation) {
+      padding-top: 0.5rem;
+      @include fontSize($font-size-xs);
+      color: var(--color-error);
+      @include m(item) {
+        padding-bottom: 0.6rem;
+
+        &:last-of-type {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    // #Subscript
+    @include e(subscript) {
+      @include m(wrapper) {
+        @extend %pseudos;
+
+        margin-top: 1.2rem;
+      }
+    }
+
+    &.disabled input,
+    .disabled textarea {
+      background-color: var(--color-white-opacity-05);
+    }
+
+    .spinner {
+      position: absolute;
+      right: 0.25rem;
+      bottom: 0.5rem;
+    }
+
+    .hint {
+      font-size: 10px;
+      text-align: right;
+      margin-right: calc-rem(17px);
+      transform: translateY(-1rem);
+      margin-bottom: -1rem;
+    }
+  }
+
+  // ==========================================================================
+  // #OVERRIDES
+  // ==========================================================================
+  .mat-form-field-appearance-standard .mat-form-field-flex {
+    padding-top: 0;
+  }
+
+  .mat-form-field-infix {
+    border-top: 0;
+  }
+}
+
+.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
+  width: auto;
+}

package/styles/scss/modules/_icon.scss

@@ -0,0 +1,30 @@
+.icon {
+  color: var(--color-gray-500);
+
+  &:hover {
+    color: var(--color-brand-light);
+  }
+
+  @include e(bordered) {
+    @extend .icon;
+
+    &:after {
+      @extend %pseudos;
+
+      border: 1px solid var(--color-gray-400);
+      border-radius: $border-radius-base;
+      width: calc(100% + 0.8rem);
+      height: calc(100% + 0.8rem);
+      top: -0.4rem;
+      left: -0.4rem;
+    }
+  }
+}
+
+.eyes-icon-label {
+  border-color: var(--color-gray-400);
+  background-color: var(--color-white);
+  color: var(--color-black);
+  padding: 0.125rem;
+  transform: translateY(-1.25rem);
+}

package/styles/scss/modules/_img.scss

@@ -0,0 +1,32 @@
+.aspect-ratio {
+  position: relative;
+  display: inline-block;
+  background-color: inherit;
+  line-height: 1;
+  overflow: hidden;
+
+  // ***************************
+  // #Content
+  // ***************************/
+  &__content { //** Fallback
+    position: absolute;
+    top: 50%;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    max-width: 100%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+
+    @supports (object-fit: cover) {
+      &--cover { // cover
+        position: static;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        object-fit: cover;
+        transform: none;
+      }
+    }
+  }
+}