bpm-core 0.0.14 → 0.0.15

package/src/lib/assets/scss/_main-sidenav.scss

@@ -0,0 +1,350 @@
+.main-sidenav {
+  --sidenav-footer-bc: var(--white);
+  --sidenav-title-fs: 1.3rem;
+  --sidenav-title-height: 70px;
+  --sidenav-title-padding: 1.5rem;
+
+  line-height: 1.2;
+
+  @media (min-width: 768px) {
+    --sidenav-width: 550px;
+  }
+
+  @media (max-width: 768px) {
+    --sidenav-width: calc(100vw - 0rem) !important;
+    --sidenav-title-fs: 1rem;
+    z-index: 100;
+    position: relative;
+  }
+
+  &.main-sidenav-full {
+    --sidenav-footer-bc: var(--white);
+    --sidenav-width: 100% !important;
+    //min-width: calc(100vw - 2rem);
+    --sidenav-title-padding: 1rem;
+    --sidenav-title-position: sticky;
+    //max-height: calc(100vh - var(--main-toolbar-height));
+    //height: calc(100vh - var(--main-toolbar-height));
+
+    max-height: initial;
+    min-height: calc(100vh - var(--main-toolbar-height));
+    height: auto;
+
+    &.main-sidenav--has-steps {
+      @media (max-width: 576px) {
+        --sidenav-title-position: static;
+      }
+      @media (max-height: 576px) {
+        --sidenav-title-position: static;
+        .mat-stepper-horizontal {
+          --steps-sticky-position: calc(var(--sidenav-title-height));
+        }
+      }
+    }
+
+    .sidenav-action-container {
+      @media (min-width: 991px) {
+        //max-width: 1400px;
+        //margin: 0 auto;
+        padding: 0 calc(70px - 1rem);
+        width: 100%;
+      }
+    }
+
+    .sidenav-title {
+      //box-shadow: var(--box-shadow);
+      border-bottom: 1px solid var(--gray);
+      position: var(--sidenav-title-position);
+      top: var(--main-toolbar-height);
+      z-index: 6;
+    }
+
+    .sidenav-body {
+      overflow: visible;
+    }
+
+    .sidenav-footer {
+      box-shadow: var(--box-shadow);
+      position: sticky;
+      bottom: 0;
+      z-index: 4;
+    }
+
+    .mat-stepper-horizontal {
+      background-color: var(--body-bg);
+      --steps-bc: var(--white);
+      --steps-padding: 1rem;
+      --steps-justify: space-evenly;
+      --steps-container-bc: transparent;
+
+      @media (min-width: 991px) {
+        --steps-direction: column !important;
+        --steps-sticky-position: calc(1.5rem + var(--main-toolbar-height) + var(--sidenav-title-height));
+        --steps-width: 275px;
+        --steps-radius: 4px;
+        --steps-margin: 0;
+        --steps-container-padding: 0;
+        --steps-padding: 1.5rem;
+
+        --steps-label-fs: 0.875rem;
+        --steps-label-fc-active: var(--purple);
+        --steps-label-fc-done: var(--black);
+        --steps-label-fw: var(--font-regular);
+        --steps-label-fw-active: var(--font-regular);
+        --steps-label-fw-done: var(--font-medium);
+        --steps-icon-bc: var(--white);
+        --steps-icon-bc-active: var(--purple);
+        --steps-icon-bc-done: var(--green);
+        --steps-icon-fs: 0.85rem;
+        --steps-icon-fw: var(--font-medium);
+        --steps-icon-fc: var(--black);
+        --steps-icon-fc-active: var(--white);
+        --steps-icon-fc-done: var(--white);
+
+        --steps-icon-border-color: var(--gray);
+        --steps-icon-border-color-active: var(--purple);
+        --steps-icon-border-color-done: var(--green);
+
+        --steps-icon-size: 28px;
+        --steps-icon-radius: 50%;
+        --steps-icon-gap: 0.75rem;
+        --steps-line-content: none;
+        --steps-line: 1px dashed var(--dark-gray);
+        --steps-line-active: 1px solid var(--green);
+        --steps-line-done: 0;
+        --steps-line-width: 80px;
+        --steps-line-top: 0;
+        --steps-line-margin: 0;
+
+        .mat-horizontal-stepper-wrapper {
+          flex-direction: row;
+          align-items: flex-start;
+          gap: 1rem;
+
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 70px;
+          width: 100%;
+
+          .mat-horizontal-stepper-header-container {
+            align-items: flex-start;
+            background-color: var(--white);
+            box-shadow: 0 7px 10px rgba(var(--rgb-black), 0.03);
+            margin-top: 1.5rem;
+            &:after {
+              content: none;
+              //bottom: auto;
+              //top: 0;
+            }
+          }
+
+          .mat-horizontal-content-container {
+            max-width: calc(100% - var(--steps-width));
+            width: 100%;
+            margin: 0 auto;
+            .default-box {
+              box-shadow: 0 7px 10px rgba(var(--rgb-black), 0.03);
+              border: 0;
+              border-radius: var(--steps-radius);
+            }
+          }
+        }
+
+        .mat-stepper-horizontal-line {
+          display: block !important;
+          flex: auto;
+          margin: 0 1rem;
+          min-width: 2px;
+          align-self: flex-start;
+          height: 30px;
+          border: 0;
+          background: var(--gray);
+        }
+      }
+
+      @media (max-width: 991px) {
+        --steps-icon-size: 24px;
+        --steps-icon-fs: 0.8125rem;
+        --steps-icon-gap: 0.5rem;
+        --steps-sticky-position: calc(var(--main-toolbar-height) + var(--sidenav-title-height));
+
+        .mat-horizontal-stepper-header-container {
+          overflow: auto;
+          --steps-justify: space-between;
+        }
+
+        .mat-step-header {
+          overflow: visible;
+        }
+
+        .mat-step-label {
+          min-width: auto;
+          overflow: visible;
+        }
+      }
+
+      .mat-horizontal-content-container {
+        // @extend .hub-container-mini;
+
+        @media (max-width: 991px) {
+          max-width: 1000px;
+          margin: 0 auto;
+          padding: 0 70px;
+          width: 100%;
+        }
+
+        @media (max-width: 991px) {
+          padding: 0 16px;
+        }
+      }
+
+      .mat-step-label {
+        &.mat-step-label-active {
+          color: var(--steps-label-fc-done);
+        }
+        &.mat-step-label-selected {
+          color: var(--steps-label-fc-active);
+        }
+      }
+
+      .mat-horizontal-stepper-header-container {
+        box-shadow: 0 7px 10px rgb(0 0 0 / 3%);
+        z-index: 4;
+      }
+
+      .mat-step-icon-content {
+        line-height: 1;
+      }
+    }
+  }
+
+  --sidenav-title-bc: var(--white);
+
+  .sidenav-body {
+    border-top: 1px solid var(--light-gray);
+  }
+
+  .sidenav-footer {
+    background-color: var(--sidenav-footer-bc);
+    //padding: 1.5rem;
+    @media (max-width: 576px) {
+      padding: 1rem;
+    }
+    @media (max-height: 576px) {
+      padding: 1rem;
+      ds-button::part(base) {
+        --default-size: var(--default-size-sm);
+      }
+    }
+  }
+
+  .mat-stepper-horizontal {
+    --steps-progress-width: 0;
+
+    .mat-horizontal-stepper-header-container {
+      &:after {
+        content: '';
+        height: 2px;
+        width: var(--steps-progress-width);
+        position: absolute;
+        bottom: 0;
+        background-color: var(--purple);
+        inset-inline-start: 0;
+      }
+    }
+  }
+
+  .info-section {
+    --name-width: 200px;
+  }
+
+  .mat-mdc-tab-group,
+  .mat-mdc-tab-nav-bar {
+    --tab-fs: 1rem;
+    --tab-fs-active: 1rem;
+    --tab-label-padding: 1.3rem 1rem;
+
+    padding: 0 1rem;
+    background-color: var(--white);
+    border-bottom: 1px solid var(--light-gray);
+  }
+
+  .default-box {
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+    box-shadow: var(--box-shadow);
+  }
+
+  .primary-accordion {
+    --accordion-border-active: 1px solid transparent;
+    //--accordion-shadow: var(--box-shadow);
+    --accordion-shadow-active: var(--box-shadow);
+    --panel-body-padding: 0 1rem 1rem;
+  }
+}
+
+.close-sidenav {
+  &::part(base) {
+    --btn-bg-color: var(--white);
+    --btn-border-color: var(--white);
+  }
+}
+/*
+.main-sidenav {
+  @media (min-width: 768px) {
+    --sidenav-width: 550px;
+  }
+
+  @media (max-width: 768px) {
+    --sidenav-width: calc(100vw - 0rem) !important;
+  }
+
+  &.main-sidenav-full {
+    --sidenav-width: 100% !important;
+    min-width: calc(100vw - 2rem);
+
+    .mat-stepper-horizontal {
+      background-color: var(--light-gray);
+      --steps-direction: column !important;
+      //--steps-line-content: "" !important;
+      --steps-width: 350px;
+      --steps-radius: 4px;
+      --steps-margin: 0;
+
+      .mat-horizontal-stepper-wrapper {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 1rem;
+
+        .mat-horizontal-stepper-header-container {
+          align-items: flex-start;
+          background-color: var(--white);
+          box-shadow: none !important;
+        }
+
+        .mat-horizontal-content-container {
+          //align-items: flex-start;
+          border-radius: 4px;
+          background-color: var(--white);
+
+          mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select.white-input {
+            --input-bg: var(--off-white);
+            --input-border: var(--off-white);
+          }
+        }
+      }
+
+      .mat-stepper-horizontal-line {
+        display: block !important;
+        flex: auto;
+        margin: 0 1rem;
+        min-width: 2px;
+        align-self: flex-start;
+        height: 50px;
+        border: 0;
+        background: var(--gray);
+      }
+    }
+  }
+}
+*/

package/src/lib/assets/scss/_settings.scss

@@ -0,0 +1,93 @@
+mat-tab-group.vertical {
+    flex-direction: row;
+    @media (max-width: 999px) {
+        flex-direction: column;
+    }
+    min-height: calc(100vh - 80px);
+    --tab-width: 233px;
+    --tab-bg: var(--white);
+    --tabs-gap: 12px;
+    --tab-fs: 12px;
+    --tab-fc-active: var(--black);
+    --tab-fs-active: 12px;
+    --tab-label-padding: 10px;
+    --mdc-tab-indicator-active-indicator-color: transparent;
+    --tab-bt: 0px;
+
+    .mdc-tab-indicator__content--underline {
+        display: none;
+    }
+    .mat-mdc-tab-header {
+        border-right: 1px solid var(--gray);
+        .mdc-tab {
+            margin: 0px 12px;
+            justify-content: start;
+            &:first-child.mat-mdc-tab-disabled {
+                margin: 0px 0 10px;
+                border-bottom: 1px solid var(--gray);
+                @media (max-width: 999px) {
+                    border-bottom: 0px;
+                    margin: 0;
+                }
+                padding: 10px 12px;
+                cursor: auto;
+                opacity: 1;
+            }
+            &.mdc-tab--active {
+                border-radius: 6px;
+                background-color: var(--light-gray) !important;
+            }
+        }
+        .mat-mdc-tab-labels {
+            flex-direction: column;
+            @media (max-width: 999px) {
+                flex-direction: row;
+            }
+        }
+    }
+    .mat-mdc-tab-body-wrapper {
+        width: 100%;
+        padding: 23px 32px;
+    }
+}
+.mat-form-content {
+    width: 100%;
+}
+
+app-title {
+    mat-form-field {
+        --input-height: 35px;
+        --input-fs: 12px;
+    }
+
+    .mat-mdc-select-trigger {
+        gap: 15px;
+    }
+    .search {
+      //  width: 287px;
+        @media (max-width: 999px) {
+            width: auto;
+        }
+    }
+}
+
+.search {
+    mat-form-field {
+      --input-width: 35px;
+      transition: var(--default-transition);
+      width: 35px !important;
+      .mat-form-field-flex {
+        border-radius: 3px;
+      }
+    }
+    &.active {
+      mat-form-field {
+        --input-width: auto;
+        width: auto !important;
+      }
+    }
+    mat-form-field.mat-mdc-form-field .mat-mdc-form-field-flex {
+  
+        gap: 5px;
+    }
+  }

package/src/lib/assets/scss/_stepper.scss

@@ -0,0 +1,39 @@
+.stepper {
+  .mat-horizontal-stepper-header-container {
+    @media (max-width: 576px) {
+      display: none !important;
+    }
+  }
+}
+.stepper-indicator-container {
+  --stepper-indicator-bc: var(--light-gray);
+  --stepper-indicator-bc-active: var(--purple);
+  position: sticky;
+  top: var(--main-toolbar-height);
+  z-index: 4;
+  background-color: var(--white);
+  display: none;
+  flex-direction: column;
+  gap: var(--steper-indicator-gap, 0.5rem);
+  padding: 1rem;
+  border-bottom: 1px solid var(--light-gray);
+  &:not(.hiddenStepper) {
+    @media (max-width: 576px) {
+      display: flex;
+    }
+  }
+
+  .stepper-indicator-items {
+    display: flex;
+    gap: var(--steper-indicator-gap, 0.5rem);
+    .stepper-indicator-item {
+      width: 100%;
+      height: var(--stepper-indicator-height, 5px);
+      border-radius: var(--stepper-indicator-radius, 2px);
+      background-color: var(--stepper-indicator-bc);
+      &.active {
+        --stepper-indicator-bc: var(--stepper-indicator-bc-active);
+      }
+    }
+  }
+}

package/src/lib/assets/scss/_swiper.scss

@@ -0,0 +1,115 @@
+@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
+
+
+
+.swiper-arrow-pagination {
+  .swiper-arrow {
+    position: absolute;
+    top: 50%;
+    --swiper-arrow-bg: var(--white);
+    --swiper-arrow-fc: var(--coral);
+    --swiper-arrow-fc-disabled: var(--dark-gray);
+    --swiper-arrow-size: var(--default-size-sm);
+    --swiper-arrow-position: calc((var(--swiper-arrow-size) + 0.5rem) * -1);
+    --swiper-arrow-shadow: 0 10px 7px rgba(var(--rgb-black), 3%);
+    min-width: var(--swiper-arrow-size);
+    width: var(--swiper-arrow-size);
+    height: var(--swiper-arrow-size);
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: var(--swiper-arrow-bg);
+    color: var(--swiper-arrow-fc);
+    margin-top: calc(0px - (var(--swiper-arrow-size) / 2));
+    box-shadow: var(--swiper-arrow-shadow);
+
+    @media (max-width: 576px) {
+      display: none;
+    }
+
+    [dir='rtl'] & {
+      transform: rotateY(180deg);
+    }
+
+    &.next {
+      right: var(--swiper-arrow-position);
+      left: auto;
+
+      [dir='rtl'] & {
+        left: var(--swiper-arrow-position);
+        right: auto;
+      }
+    }
+
+    &.prev {
+      left: var(--swiper-arrow-position);
+      right: auto;
+
+      [dir='rtl'] & {
+        right: var(--swiper-arrow-position);
+        left: auto;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.9;
+      --swiper-arrow-fc: var(--swiper-arrow-fc-disabled);
+      --swiper-arrow-shadow: none;
+    }
+  }
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  --swiper-navigation-color: var(--coral);
+  background: white;
+  --swiper-navigation-size: 35px;
+  min-width: var(--swiper-navigation-size);
+  border-radius: 50%;
+  //margin: 0 -35px;
+  box-shadow: 0 10px 7px rgba(var(--rgb-black), 3%);
+
+  &:after {
+    font-size: 20px;
+  }
+}
+
+.swiper-horizontal {
+  --swiper-pagination-bullet-width: 14px;
+  --swiper-pagination-bullet-height: 3px;
+  --swiper-pagination-bullet-inactive-color: #ece0ee;
+  --swiper-pagination-color: var(--purple);
+  --swiper-pagination-bullet-inactive-opacity: 1;
+
+  .swiper-pagination-bullets {
+    bottom: 5px;
+  }
+
+  .swiper-pagination-bullet {
+    border-radius: 0;
+    cursor: pointer;
+  }
+}
+
+.noSwiper {
+  .swiper-arrow-pagination {
+    display: none;
+    @media (max-width: 1440px) {
+      display: block;
+    }
+  }
+}
+
+.swiper-slide {
+  @media (max-width: 991px) {
+    max-width: 80%;
+    width: 80% !important;
+    &:last-child {
+      max-width: 100%;
+    }
+  }
+}

package/src/lib/assets/scss/_toaster.scss

@@ -0,0 +1,9 @@
+.toast-container {
+  position: fixed;
+  z-index: 1111000;
+  .ngx-toastr {
+    --toast-postion-top: 0;
+    padding:20px 25px !important;
+    min-height: 88px;
+  }
+}