bpm-core 0.0.14 → 0.0.16

package/src/lib/assets/scss/_upgrade.scss

@@ -0,0 +1,279 @@
+//_toggle-slide
+
+mat-slide-toggle.mat-mdc-slide-toggle.mat-accent .mdc-switch__handle {
+  border-radius: 100%;
+}
+
+//_popover
+.mat-mdc-elevation-specific {
+  --select-panel-bg-even: var(--white);
+  --select-panel-bg-odd: var(--white);
+  --select-panel-border: 1px solid var(--light-gray);
+  --select-panel-fs: 0.85rem;
+  --select-panel-fc: var(--black);
+  --select-panel-fc-active: var(--black);
+  --select-panel-fw: var(--font-regular);
+  --select-panel-fw-active: var(--font-medium);
+  --select-panel-min-height: 3.125rem;
+  --select-panel-min-width: inherit;
+  --select-panel-width: 100%;
+  --select-line-height: inherit;
+  --mdc-theme-primary: var(--select-panel-fc-active);
+  border-radius: var(--box-radius) !important;
+  box-shadow: var(--box-shadow) !important;
+  margin-top: 0.3rem;
+  padding: 0 !important;
+  .mat-mdc-menu-content {
+    padding: 0 !important;
+  }
+  .mat-mdc-menu-item {
+    font-weight: var(--select-panel-fw);
+    font-size: var(--select-panel-fs) !important;
+    white-space: normal;
+    height: auto;
+    line-height: var(--select-line-height);
+    min-height: var(--select-panel-min-height);
+    min-width: var(--select-panel-min-width);
+    width: var(--select-panel-width);
+    color: var(--select-panel-fc) !important;
+    background: var(--select-panel-bg-odd) !important;
+    border-bottom: var(--select-panel-border);
+    transition: var(--default-transition);
+    &:last-child {
+      border-bottom: 0px;
+    }
+  }
+}
+
+//mat sidenav
+
+.mat-drawer-backdrop.ng-star-inserted.mat-drawer-shown {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+mat-error {
+  --mat-form-field-error-text-color: var(--red);
+  font-size: 12px;
+}
+
+mat-form-field.mat-mdc-form-field .mdc-text-field--invalid.mat-mdc-text-field-wrapper {
+  border: 1px solid var(--red) !important;
+}
+
+mat-slide-toggle {
+  --mdc-switch-disabled-unselected-track-color: var(--dark-gray);
+  --mdc-switch-disabled-track-opacity: 0.4;
+}
+
+// disable input
+.mat-form-field-disabled {
+  --mdc-filled-text-field-disabled-container-color: red;
+  .mdc-text-field {
+    border: 0px !important;
+  }
+}
+
+.mat-mdc-checkbox.mat-accent .mdc-checkbox {
+  transform: initial;
+}
+
+// datepicker
+.mat-datepicker-content-container {
+  background: #fff;
+}
+.mat-calendar-body tr[aria-hidden="true"] {
+  display: none;
+}
+.mat-datepicker-content .mat-calendar {
+  height: auto;
+}
+
+//checkbox
+
+.mat-mdc-checkbox.mat-accent {
+  --mdc-checkbox-disabled-selected-checkmark-color: white;
+
+  .mdc-checkbox__background {
+    border: 3px solid currentColor;
+    border-radius: 4px;
+  }
+  &.mdc-checkbox--disabled {
+    opacity: 0.3 !important;
+  }
+}
+.mat-mdc-dialog-title {
+  &::before {
+    display: none !important;
+  }
+}
+
+.mat-calendar-body-cell-content {
+  border-width: 0px !important;
+  &.mat-calendar-body-today {
+    border-width: 1px !important;
+  }
+}
+
+.mat-mdc-tab-label-container {
+  border-bottom: 0 !important;
+}
+.mat-button-toggle .mat-pseudo-checkbox {
+  margin-right: 12px;
+  display: none;
+}
+.mat-mdc-checkbox.mat-accent {
+  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"])
+    ~ .mdc-checkbox__background {
+    border-color: transparent !important;
+    background-color: #f3f3f1 !important;
+  }
+  &.white {
+    .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"])
+      ~ .mdc-checkbox__background {
+      background-color: #fff !important;
+      border-color: var(--light-gray) !important;
+    }
+  }
+ 
+}
+app-autocomplete,
+app-time-picker {
+  mat-form-field.mat-mdc-form-field .mat-mdc-form-field-icon-suffix {
+    // padding: 0 10px;
+  }
+}
+
+.info-section.header-info-section,
+.form-section {
+  --info-item-bg-striped: transparent;
+  --info-item-padding: 0;
+  --name-width: auto;
+  --disc-width: auto;
+  --info-gap: 2px;
+  .info-item {
+    @media (min-width: 768px) {
+      &::after {
+        content: "";
+        width: 5px;
+        height: 5px;
+        background-color: var(--black);
+        border-radius: 100%;
+        margin: 0 12px;
+      }
+    }
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+.info-section.main-info-section,
+.form-section {
+  --info-item-bg-striped: transparent;
+  --name-width: 100%;
+  --disc-width: 100%;
+  --info-gap: 4px;
+  --name-fs: 12px;
+  --file-width: 230px;
+  --info-item-padding: 0;
+}
+ds-button[shape="text"]::part(base) {
+  padding: 0;
+  text-decoration: none;
+}
+
+.upload-excel {
+  input {
+    visibility: hidden;
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+.mdc-switch__track::before,
+.mdc-switch__track::after {
+  border: none !important;
+}
+
+.primary-tab,
+.mat-mdc-tab-group {
+  --tab-label-padding: 20px;
+  --tab-fs: 1rem;
+  --tab-fs-active: 1rem;
+  .mat-mdc-tab.mdc-tab {
+    flex-grow: 0 !important;
+  }
+  mat-tab-body {
+    padding: 1.5rem;
+    background: var(--off-white);
+  }
+}
+
+.hadPadding {
+  padding: 1.5rem;
+}
+@media (min-width: 875px) {
+  .main-sidenav {
+    &.large-sidenav {
+      --sidenav-width: 875px;
+    }
+    &.medium-sidenav {
+      --sidenav-width: 740px;
+    }
+  }
+}
+.main-button-toggle.secondary-button-toggle {
+  --toggle-height: 35px;
+  --toggle-width: 44px;
+  --toggle-color: var(--dark-gray: );
+  --toggle-color-active: var(--white);
+  --toggle-bg: var(--light-gray);
+  --toggle-bg-active: var(--purple);
+  --toggle-border: 0px solid var(--gray);
+  --box-radius: 3px;
+  --toggle-fw: var(--font-regular);
+  --toggle-gap: 0.5rem;
+  padding: 1px;
+}
+
+mat-form-field.mat-mdc-form-field.mat-form-field-number .mat-mdc-form-field-icon-suffix {
+  min-width: auto;
+  width: auto;
+}
+.progress-container {
+  height: 8px;
+  min-width: 195px;
+  border: 0px;
+  box-shadow: none;
+
+  // .progress-bar {
+  //     --progress-width: 195px;
+  //     width: 100%;
+  //
+  //   }
+  &::after {
+    display: none;
+  }
+}
+mat-progress-bar {
+  --progress-height: 8px;
+  --progress-width: 195px;
+  --mdc-linear-progress-active-indicator-color: var(--green);
+  --mdc-linear-progress-active-indicator-height: 8px;
+  --mdc-linear-progress-track-height: 8px;
+  .mdc-linear-progress__bar-inner {
+    border-radius: 5px;
+  }
+}
+
+.mat-mdc-checkbox.mat-accent
+  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"])
+  ~ .mdc-checkbox__background {
+  border-color: transparent !important;
+  background-color: #fff !important;
+}
+
+mat-form-field.mat-mdc-form-field.input-disabled {
+  --input-bg: var(--light-gray);
+}

package/src/lib/assets/scss/_user-list.scss

@@ -0,0 +1,40 @@
+.user-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 1rem;
+  &--item {
+    min-width: auto;
+    border-radius: 4px;
+    //box-shadow: 0 7px 10px rgba(var(--rgb-black), .03);
+    background-color: var(--light-gray);
+  }
+  &--item::part(base) {
+    --user-card-align: center;
+    --user-card-padding: 0.5rem 1rem;
+
+    --user-card-gap: 0.5rem;
+  }
+  &--item::part(details) {
+    max-width: calc(100% - 50px - 0.6rem);
+    width: 100%;
+    overflow: hidden;
+
+    --user-details-gap: 0;
+  }
+  &--item::part(name) {
+    --user-fs: 0.75rem;
+    margin-bottom: 0.2rem;
+  }
+  &--item::part(name),
+  &--item::part(title) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    text-align: start;
+  }
+
+  ds-avatar::part(base) {
+    min-width: var(--default-size, 45px) !important;
+  }
+}

package/src/lib/assets/scss/input-telephone.scss

@@ -0,0 +1,160 @@
+app-mobile-number-input {
+  &.ng-touched.ng-invalid {
+    .input-telephone {
+      --input-border: var(--input-border-invalid);
+    }
+  }
+}
+
+.input-telephone {
+  display: block;
+  height: var(--input-height);
+  border: var(--input-border);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bc);
+  font-size: var(--input-fs);
+  //margin-bottom: 1rem;
+  transition: all 0.2s linear;
+
+  &.has-value {
+    --input-border: var(--input-border-active);
+  }
+
+  &.input-focused {
+    --input-border: var(--input-border-focuse);
+  }
+
+  &.input-disabled {
+    --input-bc: var(--input-bg-gray);
+    --input-border: var(--input-border-disabled);
+  }
+
+  &.ng-touched.ng-invalid,
+  &.input-invalid {
+    --input-border: var(--input-border-invalid);
+  }
+
+  .form-control {
+    border: 0;
+    font-size: var(--input-fs);
+    font-weight: var(--input-fw);
+    color: var(--input-fc);
+    padding: var(--input-padding) !important;
+    width: 100%;
+    border-radius: var(--input-radius);
+
+    [dir='rtl'] & {
+      direction: ltr;
+      text-align: right;
+    }
+
+    &::placeholder {
+      font-size: var(--placeholder-fs);
+      font-weight: var(--placeholder-fw);
+      color: var(--placeholder-fc);
+    }
+  }
+
+  .iti {
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    .iti__flag-container {
+      background-color: transparent !important;
+      padding: 0;
+      border-right: var(--input-border);
+      position: static;
+
+      [dir='rtl'] & {
+        border-left: var(--input-border);
+        border-right: 0;
+      }
+
+      .iti__selected-flag {
+        background-color: transparent !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        padding: 0 0.5rem;
+        gap: 0.3rem;
+        z-index: 3;
+
+        .iti__arrow {
+          width: 10px;
+          height: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 0;
+          margin: 0;
+
+          &:before {
+            content: '\ea2c';
+            font-family: 'stc-font-icons';
+            font-size: 0.7rem;
+            color: var(--dark-gray);
+          }
+
+          &.iti__arrow--up {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+
+    .mat-input-element {
+      height: calc(100%);
+      margin: 0;
+      padding: 0 10px;
+
+      [dir='rtl'] & {
+        // margin: 0 3px;
+      }
+    }
+
+    .iti__country-list {
+      //max-width: 260px;
+      font-size: 0.8rem;
+      border-radius: 0 !important;
+      box-shadow: -1px 3px 14px rgba(0, 0, 0, 0.08) !important;
+      border: 1px solid var(--off-white);
+      //white-space: normal;
+      //margin: 0 -16px;
+      z-index: 4;
+
+      .iti__divider {
+        display: none !important;
+      }
+
+      .iti__country {
+        border-bottom: 1px solid var(--light-gray);
+        background: transparent;
+        display: flex;
+        gap: 0.5rem;
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        &.iti__highlight {
+          background-color: var(--light-gray);
+        }
+
+        .iti__flag-box,
+        .iti__country-name,
+        .iti__dial-code {
+          margin: 0;
+          direction: ltr;
+        }
+      }
+    }
+  }
+  .country-dropdown {
+    [dir='rtl'] & {
+      right: 0 !important;
+      left: auto !important;
+    }
+  }
+}