@wavemaker/app-runtime-wm-build 12.0.0-next.45076 → 12.0.0-next.45078

app-runtime-wm-build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/app-runtime-wm-build",
-    "version": "12.0.0-next.45076",
+    "version": "12.0.0-next.45078",
     "description": "All modules required for a wavemaker application.",
     "main": "index.js",
     "scripts": {

app-runtime-wm-build/wmapp/styles/foundation/foundation.css

@@ -965,16 +965,22 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-message-container-loading-background: var(--wm-color-primary);
   --wm-message-container-loading-color: var(--wm-color-on-primary);
   --wm-message-container-loading-border-color: var(--wm-color-primary);
+  --wm-modal-margin: var(--wm-space-6);
   --wm-modal-backdrop-opacity: 50%;
   --wm-modal-backdrop-background: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
   --wm-modal-backdrop-z-index: 999;
   --wm-modal-z-index: 1000;
   --wm-modal-width: 600px;
+  --wm-modal-height: auto;
   --wm-modal-xs-width: 440px;
   --wm-modal-sm-width: 600px;
   --wm-modal-md-width: 900px;
   --wm-modal-lg-width: 1200px;
   --wm-modal-xl-width: 1536px;
+  --wm-modal-full-screen-width: 100%;
+  --wm-modal-full-screen-height: 100%;
+  --wm-modal-full-screen-margin: var(--wm-space-0);
+  --wm-modal-full-screen-radius: var(--wm-radius-none);
   --wm-modal-background: var(--wm-color-surface-container-high);
   --wm-modal-radius: var(--wm-radius-lg);
   --wm-modal-header-padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-4);
@@ -987,6 +993,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-modal-body-padding: var(--wm-space-6) var(--wm-space-6);
   --wm-modal-footer-padding: var(--wm-space-6) var(--wm-space-6);
   --wm-modal-footer-gap: var(--wm-space-3);
+  --wm-modal-sheet-width: 400px;
+  --wm-modal-sheet-radius: var(--wm-radius-none);
+  --wm-modal-sheet-margin: var(--wm-space-0);
   /*--Nav--*/
   --wm-nav-min-height: var(--wm-nav-item-min-height);
   --wm-nav-background: var(--wm-color-surface-container-low);
@@ -1325,6 +1334,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-search-dropdown-menu-item-focus-state-layer-opacity: var(--wm-opacity-focus);
   --wm-search-dropdown-menu-item-active-state-layer-opacity: var(--wm-opacity-active);
   --wm-search-dropdown-menu-item-img-radius: var(--wm-radius-circle);
+  --wm-search-dropdown-menu-group-item-color: var(--wm-color-on-surface);
+  --wm-search-dropdown-menu-group-item-background: var(--wm-color-surface-container-low);
+  --wm-search-dropdown-menu-group-item-gap: var(--wm-space-2);
+  --wm-search-dropdown-menu-group-item-padding: var(--wm-space-2) var(--wm-space-4);
+  --wm-search-dropdown-menu-group-item-header-font-family: var(--wm-h4-font-family);
+  --wm-search-dropdown-menu-group-item-header-font-size: var(--wm-h4-font-size);
+  --wm-search-dropdown-menu-group-item-header-line-height: var(--wm-h4-line-height);
+  --wm-search-dropdown-menu-group-item-header-font-weight: var(--wm-h4-font-weight);
+  --wm-search-dropdown-menu-group-item-header-letter-spacing: var(--wm-h4-letter-spacing);
   --wm-search-status-background: var(--wm-color-surface-dim);
   --wm-search-status-padding: var(--wm-space-2);
   --wm-spinner-min-height: 6rem;
@@ -15076,12 +15094,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   margin-left: 2px;
 }
 .wm-app .form-control {
+  width: 100%;
+  height: var(--wm-form-control-height);
   color: var(--wm-form-control-color);
   background: var(--wm-form-control-background);
   border: var(--wm-form-control-border-width) var(--wm-form-control-border-style) var(--wm-form-control-border-color);
   border-radius: var(--wm-form-control-radius);
-  height: var(--wm-form-control-height);
-  width: 100%;
   padding: var(--wm-form-control-padding);
   font-family: var(--wm-form-control-font-family);
   font-size: var(--wm-form-control-font-size);
@@ -15131,6 +15149,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   align-items: center;
   justify-content: center;
   gap: var(--wm-space-1);
+  padding: 0;
+  border: none;
+  width: auto;
+  background: none;
 }
 .wm-app .input-group:not(.app-currency) .input-group-btn .btn,
 .wm-app .input-group:not(.app-currency) .input-group-addon .btn,
@@ -15167,7 +15189,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) button + .btn {
   margin: 0;
 }
+.wm-app .input-group:not(.app-currency) .input-group .form-control:first-child,
+.wm-app .input-group:not(.app-currency) .input-group-addon:first-child,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn-group > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .dropdown-toggle,
+.wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .wm-app .input-group:not(.app-currency) .form-control {
+  border-radius: var(--wm-form-control-radius);
   padding-right: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
 }
 .wm-app .input-group:not(.app-currency).app-datetime .form-control {
@@ -16097,35 +16127,36 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   display: flex !important;
 }
 .wm-app .modal-dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: var(--wm-modal-backdrop-background);
-  padding: var(--wm-space-6);
+  padding: var(--wm-modal-margin);
   margin: var(--wm-space-0);
 }
-.wm-app .modal-content {
+.wm-app .modal-dialog .modal-content {
   display: flex;
   flex-direction: column;
   width: var(--wm-modal-width);
+  height: var(--wm-modal-height);
   max-width: 100%;
   max-height: 100%;
   background: var(--wm-modal-background);
   border-radius: var(--wm-modal-radius);
 }
-.wm-app .modal-content .modal-header {
+.wm-app .modal-dialog .modal-content .modal-header {
   padding: var(--wm-modal-header-padding);
 }
-.wm-app .modal-content .modal-header .app-dialog-close {
+.wm-app .modal-dialog .modal-content .modal-header .app-dialog-close {
   position: absolute;
   right: 0;
   top: 0;
 }
-.wm-app .modal-content .modal-header .modal-title {
+.wm-app .modal-dialog .modal-content .modal-header .modal-title {
   width: 100%;
   display: flex;
   align-items: center;
@@ -16133,36 +16164,82 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   gap: var(--wm-modal-title-gap);
   word-break: break-word;
 }
-.wm-app .modal-content .modal-header .modal-title:has(>.app-icon) {
+.wm-app .modal-dialog .modal-content .modal-header .modal-title:has(>.app-icon) {
   flex-direction: column;
   --wm-modal-title-gap: var(--wm-space-4);
 }
-.wm-app .modal-content .modal-header + .modal-body {
+.wm-app .modal-dialog .modal-content .modal-header + .modal-body {
   padding-top: var(--wm-space-0);
 }
-.wm-app .modal-content .modal-body {
+.wm-app .modal-dialog .modal-content .modal-body {
   height: 100%;
   overflow: auto;
   padding: var(--wm-modal-body-padding);
 }
-.wm-app .modal-content .modal-body > .app-grid-layout {
+.wm-app .modal-dialog .modal-content .modal-body > .app-grid-layout {
   padding: 0;
   margin: 0 calc(var(--wm-grid-layout-column-padding) * -1);
   width: calc(100% + calc(var(--wm-grid-layout-column-padding) * 2));
 }
-.wm-app .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
+.wm-app .modal-dialog .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
   padding-bottom: var(--wm-space-0);
 }
-.wm-app .modal-content .modal-footer {
+.wm-app .modal-dialog .modal-content .modal-footer {
   padding: var(--wm-modal-footer-padding);
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: var(--wm-modal-footer-gap);
 }
-.wm-app .modal-content .modal-footer .btn {
+.wm-app .modal-dialog .modal-content .modal-footer .btn {
   margin: 0;
 }
+.wm-app .modal-dialog:not(.modal-sheet).modal-xs {
+  --wm-modal-width: var(--wm-modal-xs-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-sm {
+  --wm-modal-width: var(--wm-modal-sm-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-md {
+  --wm-modal-width: var(--wm-modal-md-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-lg {
+  --wm-modal-width: var(--wm-modal-lg-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-xl {
+  --wm-modal-width: var(--wm-modal-xl-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-full-screen {
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+  --wm-modal-height: var(--wm-modal-full-screen-height);
+  --wm-modal-radius: var(--wm-modal-full-screen-radius);
+  --wm-modal-margin: var(--wm-modal-full-screen-margin);
+}
+.wm-app .modal-dialog.modal-sheet {
+  --wm-modal-width: var(--wm-modal-sheet-width);
+  --wm-modal-radius: var(--wm-modal-sheet-radius);
+  --wm-modal-margin: var(--wm-modal-sheet-margin);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-top {
+  align-items: flex-start;
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-right {
+  justify-content: flex-end;
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-right .modal-content {
+  height: var(--wm-modal-full-screen-height);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-bottom {
+  align-items: flex-end;
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-left {
+  justify-content: flex-start;
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-left .modal-content {
+  height: var(--wm-modal-full-screen-height);
+}
 .wm-app .app-navbar {
   position: relative;
   border: none;
@@ -17440,6 +17517,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   right: auto;
   left: var(--wm-btn-icon-md-margin);
 }
+.wm-app .app-search.input-group .form-control-feedback.clear-btn.show-btn {
+  display: inline-flex;
+}
 .wm-app .app-search.input-group .input-group-addon {
   right: auto;
   left: var(--wm-btn-icon-md-margin);
@@ -17465,10 +17545,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: calc(100dvh - var(--wm-form-control-height)) !important;
   --wm-search-dropdown-menu-height: 100%;
 }
-.wm-app .app-search.input-group[showclear="true"] .form-control-feedback.clear-btn {
-  display: inline-flex;
-}
-.wm-app .app-search.input-group[showclear="false"] .form-control {
+.wm-app .app-search.input-group:has(.clear-btn:not(.show-btn)) .form-control {
   padding-right: var(--wm-form-control-padding);
 }
 .wm-app typeahead-container.dropdown {
@@ -17501,6 +17578,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   letter-spacing: var(--wm-search-dropdown-menu-item-letter-spacing);
 }
 .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a img {
+  aspect-ratio: 1/1;
   border-radius: var(--wm-search-dropdown-menu-item-img-radius);
 }
 .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:before {
@@ -17522,6 +17600,21 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:active:before {
   opacity: var(--wm-search-dropdown-menu-item-active-state-layer-opacity);
 }
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header {
+  display: flex;
+  gap: var(--wm-search-dropdown-menu-group-item-gap);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header .group-title {
+  width: 100%;
+  color: var(--wm-search-dropdown-menu-group-item-color);
+  background: var(--wm-search-dropdown-menu-group-item-background);
+  padding: var(--wm-search-dropdown-menu-group-item-padding);
+  font-family: var(--wm-search-dropdown-menu-group-item-header-font-family);
+  font-weight: var(--wm-search-dropdown-menu-group-item-header-font-weight);
+  font-size: var(--wm-search-dropdown-menu-group-item-header-font-size);
+  line-height: var(--wm-search-dropdown-menu-group-item-header-line-height);
+  letter-spacing: var(--wm-search-dropdown-menu-group-item-header-letter-spacing);
+}
 .wm-app typeahead-container.dropdown .dropdown-menu.app-search .status {
   display: flex;
   align-items: center;