@yesilyazilim/web.spa 1.0.83 → 1.0.85

package/index.css

@@ -3414,6 +3414,7 @@ span {
 .tabulator {
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
+  transform: none;
   background-color: var(--background-color) !important;
   font-size: var(--font-size) !important;
 }
@@ -6309,6 +6310,11 @@ app-dt > .dt-header > .dt-table-actions .dt-tbl-ab:hover {
   box-shadow: 0px 2px 2px -1px var(--primary-gray-light);
 }
 
+app-dt > .dt-header > .dt-table-actions .dt-tbl-ab app-dropdown {
+  cursor: auto;
+  width: min-content;
+}
+
 app-dt > .dt-header > .dt-table-actions > .col-select-btn-container {
   display: flex;
 }
@@ -6369,6 +6375,231 @@ app-dt > .dt-footer {
   grid-area: dt_footer;
 }
 
+app-dt .dt-allfilter-dialog {
+  gap: var(--spacing-half, 8px);
+  width: 330px;
+  height: 400px;
+  padding: var(--spacing-half, 8px);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  box-shadow: var(--box-shadow);
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr 1fr;
+  min-width: fit-content;
+  max-height: 220px;
+  display: grid;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-left {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  flex-direction: column;
+  grid-area: 1 / 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 120px;
+  min-width: fit-content;
+  display: flex;
+  overflow: auto;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-left .dt-allfilter-label {
+  cursor: pointer;
+  border-bottom: var(--zinc-300) solid;
+  border-width: var(--border-width);
+  width: 100%;
+  padding: var(--spacing-half);
+  margin-bottom: 0;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-left .dt-allfilter-label:hover {
+  background-color: var(--primary-gray-ghost);
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-left .dt-allfilter-label[selected="true"] {
+  background-color: var(--primary-50) !important;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right {
+  grid-area: 1 / 2;
+  justify-content: flex-start;
+  width: 210px;
+  display: flex;
+  overflow: auto;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-allfilter-label {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  gap: var(--spacing-half, 8px);
+  padding: var(--spacing-half, 8px);
+  margin: var(--spacing-half, 8px);
+  text-align: center;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter-buttons {
+  gap: var(--spacing-half);
+  justify-content: flex-end;
+  display: flex;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter-buttons .filter-button {
+  padding: var(--spacing-quarter, 4px) var(--spacing, 12px);
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter-buttons .filter-button i {
+  font-size: .8em;
+}
+
+@media (width <= 480px) {
+  app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter-buttons .date-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter {
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr;
+  align-items: start;
+  width: 100%;
+  display: grid;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter .dt-filter-rows {
+  grid-area: 1 / 1;
+  width: 100%;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter multi-combo-box {
+  width: 100%;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter .dt-filter-buttons {
+  gap: var(--spacing-half);
+  justify-content: flex-end;
+  display: flex;
+  grid-area: 3 / 1 !important;
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter .dt-filter-buttons .filter-button {
+  padding: var(--spacing-quarter, 4px) var(--spacing, 12px);
+}
+
+app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter .dt-filter-buttons .filter-button i {
+  font-size: .8em;
+}
+
+@media (width <= 480px) {
+  app-dt .dt-allfilter-dialog .dt-allfilter-right .dt-filter .dt-filter-buttons .date-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+app-dt .dt-allfilter-dialog .dt-filter-filter-button {
+  grid-area: 2 / 1 !important;
+}
+
+app-dt .dt-allfilter-dialog .dt-filter-buttons {
+  gap: var(--spacing-half, 8px);
+  justify-content: flex-end;
+  display: flex;
+  grid-area: 2 / 2 !important;
+}
+
+app-dt .dt-allfilter-dialog .dt-filter-buttons .filter-button {
+  padding: var(--spacing-quarter, 4px) var(--spacing, 12px);
+}
+
+app-dt .dt-allfilter-dialog .dt-filter-buttons .filter-button i {
+  font-size: .8em;
+}
+
+@media (width <= 480px) {
+  app-dt .dt-allfilter-dialog .dt-filter-buttons .date-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+app-dt .dt-filter-range {
+  gap: var(--spacing-half);
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+app-dt .dt-filter-range > * {
+  margin: 0;
+}
+
+app-dt .dt-filter {
+  gap: var(--spacing-half, 8px);
+  padding: var(--spacing-half, 8px);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  box-shadow: var(--box-shadow);
+  flex-direction: column;
+  min-width: fit-content;
+  font-weight: normal;
+  display: flex;
+}
+
+app-dt .dt-filter .dt-filter-rows {
+  gap: var(--spacing-half);
+  flex-direction: column;
+  display: flex;
+}
+
+app-dt .dt-filter .dt-filter-buttons {
+  gap: var(--spacing-half);
+  justify-content: flex-end;
+  display: flex;
+}
+
+app-dt .dt-filter .dt-filter-buttons .filter-button {
+  padding: var(--spacing-quarter, 4px) var(--spacing, 12px);
+}
+
+app-dt .dt-filter .dt-filter-buttons .filter-button i {
+  font-size: .8em;
+}
+
+@media (width <= 480px) {
+  app-dt .dt-filter .dt-filter-buttons .date-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+app-dt .dt-filter .date-range-container {
+  flex-direction: column;
+  display: flex;
+}
+
+app-dt app-dt-flt-header {
+  display: block;
+}
+
+app-dt app-dt-flt-header > .dt-custom-header {
+  justify-content: flex-end;
+  gap: var(--spacing-half);
+  flex-direction: row-reverse;
+  display: flex;
+}
+
+app-dt app-dt-flt-header > .dt-custom-header > .dt-filter-icon {
+  opacity: .7;
+}
+
+app-dt app-dt-flt-header > .dt-custom-header > .dt-filter-icon:hover {
+  opacity: 1;
+}
+
 date-range {
   font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   display: block;
@@ -6769,6 +7000,119 @@ dropdown-date-range > app-dropdown > .ddBody date-range {
   }
 }
 
+app-drawer-contanier {
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "drleft drmain drright";
+  width: 100%;
+  height: 100%;
+  display: grid;
+}
+
+app-drawer-contanier > .dr-main {
+  grid-area: drmain;
+  width: 100%;
+  height: 100%;
+}
+
+app-drawer-contanier > app-drawer {
+  z-index: 10;
+  display: block;
+  position: absolute;
+}
+
+app-drawer-contanier > app-drawer > .open-button {
+  z-index: 1;
+  padding: var(--spacing-half) var(--spacing);
+  white-space: nowrap;
+  position: absolute;
+}
+
+app-drawer-contanier > app-drawer > .action-list {
+  right: var(--spacing-half);
+  top: var(--spacing-half);
+  z-index: 1;
+  gap: var(--spacing-half);
+  flex-direction: row-reverse;
+  display: none;
+  position: absolute;
+}
+
+app-drawer-contanier > app-drawer > .action-list > button {
+  opacity: .5;
+  background-color: var(--primary-inverse);
+  border: none;
+  padding: 1px;
+  transition: opacity .5s;
+}
+
+app-drawer-contanier > app-drawer > .action-list > button:hover {
+  opacity: 1;
+}
+
+app-drawer-contanier > app-drawer > .item-container {
+  height: 100%;
+  display: none;
+}
+
+app-drawer-contanier > app-drawer.dr-left {
+  grid-area: drleft;
+  width: min-content;
+  height: 100%;
+  left: 0;
+}
+
+app-drawer-contanier > app-drawer.dr-left > .open-button {
+  transform-origin: 0;
+  left: 0;
+  transform: rotate(90deg)translate(0, -1rem);
+}
+
+app-drawer-contanier > app-drawer.dr-right {
+  grid-area: drright;
+  width: min-content;
+  height: 100%;
+  right: 0;
+}
+
+app-drawer-contanier > app-drawer.dr-right > .open-button {
+  transform-origin: 100%;
+  right: 0;
+  transform: rotate(90deg)translate(100%, 1rem);
+}
+
+app-drawer-contanier > app-drawer.opened > .item-container {
+  display: inherit;
+  box-shadow: var(--drop-shadow);
+}
+
+app-drawer-contanier > app-drawer.opened.dr-left {
+  border-right: 1px solid var(--border-color);
+}
+
+app-drawer-contanier > app-drawer.opened.dr-right {
+  border-left: 1px solid var(--border-color);
+}
+
+app-drawer-contanier > app-drawer.opened > .action-list {
+  display: flex;
+}
+
+app-drawer-contanier > app-drawer.pinned {
+  position: relative;
+}
+
+app-drawer-contanier > app-drawer.pinned > .item-container {
+  box-shadow: none;
+}
+
+app-drawer-contanier > app-drawer.pinned.dr-left > .item-container {
+  border-right: 1px solid var(--border-color);
+}
+
+app-drawer-contanier > app-drawer.pinned.dr-right > .item-container {
+  border-left: 1px solid var(--border-color);
+}
+
 app-dropdown-tree {
   border: 1px solid var(--form-element-border-color);
   border-radius: var(--border-radius);