bpm-core 0.0.59 → 0.0.61

package/src/lib/assets/scss/components/_fields.scss

@@ -0,0 +1,307 @@
+app-form-label {
+  display: block;
+  margin: 0 0 4px;
+  z-index: 10;
+  .form-label {
+    font-weight: 500;
+    font-size: 12px;
+    color: var(--dark);
+    text-transform: capitalize;
+  }
+}
+
+html mat-form-field.mat-mdc-form-field {
+  --input-border: 1px solid var(--gray);
+  --input-border-default: 1px solid var(--gray);
+  --input-border-active: 1px solid var(--gray);
+  --input-border-focuse: 1px solid var(--dark-gray);
+  --input-border-disabled: 1px solid var(--light-gray);
+  --input-fc-focuse: var(--black);
+  --input-fc-disabled: var(--gray);
+  --input-padding: 10px;
+  --input-radius: 4px;
+  --input-bg: white;
+  --input-height: 40px;
+  --input-fs: 14px;
+  --placeholder-fs: 14px;
+  --placeholder-fc: var(--gray);
+  --select-bg: white;
+  --select-gap: var(--off-white);
+  --mdc-theme-primary: white;
+  box-shadow: none;
+  .mat-mdc-form-field-infix {
+    gap: 5px;
+  }
+  .mat-mdc-input-element.mat-mdc-form-field-input-control.mdc-text-field__input {
+    padding-top: 2px;
+  }
+}
+
+.is--edit {
+  mat-form-field.mat-mdc-form-field {
+    --input-radius: 4px;
+    --input-height: 40px;
+    margin: 0;
+  }
+}
+
+.is--md {
+  mat-form-field.mat-mdc-form-field {
+    --input-height: 40px;
+    --input-radius: 8px;
+  }
+}
+
+.is--search {
+  mat-form-field.mat-mdc-form-field {
+    .mat-mdc-form-field-flex {
+      gap: 7px;
+      flex-direction: row;
+    }
+
+    .mat-mdc-form-field-icon-prefix {
+      padding-top: 3px;
+    }
+  }
+}
+
+.is--search-xs {
+  mat-form-field.mat-mdc-form-field {
+    --input-height: 40px;
+    --input-radius: 8px;
+
+    .mat-mdc-form-field-flex {
+      gap: 7px;
+      flex-direction: row;
+    }
+
+    .mat-mdc-form-field-icon-prefix {
+      padding-top: 3px;
+    }
+  }
+
+  app-form-label {
+    position: relative;
+    background-color: transparent;
+    display: inline-block;
+    margin: 0;
+    top: unset;
+    padding: 0;
+    z-index: 10;
+    margin-bottom: 5px;
+
+    .form-label {
+      color: var(--black);
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+  }
+}
+
+app-textarea {
+  mat-form-field.mat-mdc-form-field.custom-textarea,
+  mat-form-field.mat-mdc-form-field {
+    --input-height: 80px;
+
+    .mat-mdc-input-element.mat-mdc-form-field-input-control.mdc-text-field__input {
+      padding-top: 10px;
+    }
+  }
+}
+
+.mat-mdc-form-field-flex {
+  // flex-direction: row-reverse;
+  gap: 5px;
+}
+
+app-time-picker {
+  .mat-mdc-form-field-flex {
+    flex-direction: row;
+    gap: 5px;
+  }
+}
+
+.datePicker {
+  mat-form-field.mat-mdc-form-field {
+    --input-padding: 10px;
+    min-width: 190px;
+  }
+
+  .mat-mdc-form-field-flex {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .mat-mdc-icon-button.mat-mdc-button-base {
+    --mdc-icon-button-state-layer-size: 40px;
+    width: auto;
+    color: var(--gray);
+
+    &:hover {
+      color: var(--purple);
+      transition: all 250ms ease-in-out;
+    }
+  }
+
+  .mat-mdc-icon-button .mat-mdc-button-touch-target {
+    width: auto;
+    height: 40px;
+  }
+
+  .mdc-icon-button__ripple {
+    display: none;
+  }
+
+  .mat-mdc-icon-button {
+    --mdc-icon-button-icon-size: 20px;
+
+    .datePicker__icon {
+      width: 20px;
+      height: 20px;
+      color: currentColor;
+
+      svg {
+        width: 20px;
+        height: 20px;
+        object-fit: contain;
+        object-position: center;
+        color: currentColor;
+      }
+    }
+  }
+
+  .mat-date-range-input-separator {
+    color: var(--placeholder-fc);
+  }
+
+  .mat-mdc-form-field-error {
+    position: absolute;
+    top: 4px;
+  }
+
+  .mat-date-range-input {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+mat-error {
+  color: var(--red);
+}
+
+.mat-datepicker-content
+  .mat-calendar
+  .mat-calendar-content
+  table.mat-calendar-table
+  .mat-calendar-body
+  tr
+  td
+  .mat-calendar-body-cell-content.mat-calendar-body-today {
+  border-color: var(--purple);
+  background-color: var(--purple);
+  color: white;
+}
+
+.mat-calendar {
+  background: white;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+}
+
+/*
+
+ds-button.button--dropdown {
+  width: 100%;
+
+  &::part(wrapper) {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  &::part(base) {
+    --btn-border: 1px solid var(--light-gray);
+    --btn-fc-focuse: var(--black);
+    --btn-fc-disabled: var(--gray);
+    --btn-padding: 16px;
+    --btn-radius: 4px;
+    --btn-bg: white;
+    --btn-height: 40px;
+    --btn-fs: 14px;
+    --placeholder-fs: 14px;
+    --placeholder-fc: var(--gray);
+    --btn-bg-color: transparent;
+    --btn-color: var(--black);
+    --btn-border-color: var(--light-gray);
+    --btn-overlay-color: transparent;
+  }
+}
+
+.autocomplete__list {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+
+  &-item {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    list-style-type: none;
+
+    &:last-of-type {
+      margin: 0;
+    }
+  }
+
+  &-avatar {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+
+    figure {
+      padding: 0;
+      margin: 0;
+      border-radius: 36px;
+      width: 36px;
+      height: 36px;
+      overflow: hidden;
+
+      img {
+        object-fit: cover;
+        object-position: center;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.Chooses__box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  .right,
+  .wrong {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 36px;
+    border-radius: 4px;
+    min-width: 64px;
+  }
+  .right {
+    background: rgba(0, 196, 140, 0.1);
+  }
+  .wrong {
+    background: rgba(255, 55, 95, 0.1);
+  }
+}
+
+*/

package/src/lib/assets/scss/components/_status.scss

@@ -0,0 +1,29 @@
+ds-status[status="expired"]::part(base) {
+  --status-bg: rgba(var(--rgb-dark-gray), 30%);
+  --status-color: var(--dark-gray);
+}
+
+ds-status[status="canceled"]::part(base) {
+  --status-bg: rgba(var(--rgb-dark-gray), 80%);
+  --status-color: var(--dark-gray);
+  color: var(--black);
+}
+
+ds-status[status="send_back"]::part(base) {
+  --status-bg: rgba(var(--rgb-orange), 10%);
+  --status-color: var(--orange);
+}
+
+ds-status[status="send_back"][no-opacity]::part(base) {
+  --status-bg: var(--orange);
+  --status-color: var(--white);
+}
+
+ds-status[status="queued"]::part(base) {
+  --status-bg: rgba(250, 221, 96, 0.5);
+  --status-color: #1d252d;
+}
+
+ds-status.inbox::part(base) {
+  --status-width: 35px;
+}

package/src/lib/assets/scss/components/_table.scss

@@ -0,0 +1,70 @@
+.table-responsive table,
+.table-responsive .primary-table {
+  --th-height: 32px;
+  --th-bg: var(--purple);
+  --th-fc: var(--white);
+  --td-height: 60px;
+  --td-radius: 0;
+  --border-spacing: 0;
+  --border-collapse: collapse;
+  --tr-even-bc: var(--white);
+  --tr-odd-bc: var(--white);
+  --tr-border: 1px solid var(--light-gray);
+  --th-border: none;
+  --cell-pading: 0 24px;
+  --th-fs: 11px;
+
+  // tr.selected-row,
+  // tr.selected-row:hover {
+  //   background-color: #ecfeff;
+  //   border-inline-start: 3px solid var(--sea-light);
+  // }
+
+  tr {
+    background: white;
+    border-bottom: 1px solid var(--light-gray);
+  }
+
+  td.mat-mdc-cell.mat-mdc-table-sticky {
+    box-shadow: -10px 0px 10px 0px rgb(0 0 0 / 7%);
+  }
+
+  td {
+    text-align: center;
+  }
+
+  mat-form-field,
+  .e-control,
+  .mdc-form-field {
+    --input-height: 35px;
+  }
+}
+
+.mat-mdc-paginator {
+  border: 1px solid #f3f3f1;
+  border-radius: 0;
+  margin: 10px 0;
+  background: white;
+  border-left: 0;
+  border-right: 0;
+  --mat-paginator-container-background-color: white;
+  .mat-mdc-paginator-page-size {
+    display: flex;
+    align-items: center;
+    margin-right: 0;
+    gap: 8px;
+  }
+  mat-form-field.mat-mdc-form-field .mdc-text-field {
+    border: 0 none;
+  }
+  .mat-mdc-paginator-page-size-label {
+    margin: 0;
+    white-space: nowrap;
+  }
+  mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select {
+    --input-bg: white;
+    --placeholder-fc: var(--dark-gray);
+    --input-height: 30px;
+    --input-fs: 12px;
+  }
+}

package/src/lib/assets/scss/components/_toggle.scss

@@ -0,0 +1,27 @@
+.Toggle__buttons {
+  --toggle-height: 40px;
+  --toggle-color: var(--dark-gray);
+  --toggle-color-active: var(--white);
+  --toggle-bg: transparent;
+  --toggle-bg-active: #fbf5ff;
+  --toggle-border: 1px solid var(--gray);
+  --toggle-group-radius: 0;
+  --mat-standard-button-toggle-shape: 0;
+  --toggle-radius: 4px;
+  --toggle-fs: 14px;
+  --toggle-color: #1e252d;
+  --toggle-padding: 2px 24px;
+  .mat-pseudo-checkbox {
+    display: none;
+  }
+  &:hover {
+    --toggle-bg: transparent;
+  }
+  .mat-button-toggle.mat-button-toggle-checked {
+    --toggle-color: #4f018b;
+    --toggle-border: 1px solid rgba(166, 79, 224, 0.8);
+  }
+  .mat-ripple {
+    display: none;
+  }
+}