@indice/ng-components 0.2.161 → 0.2.162

package/_styles.css

@@ -1,11 +1,11 @@
 @layer components {
 
   .avatar-container {
-    @apply inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-800;
+    @apply inline-flex items-center justify-center h-8 w-8 rounded-full ;
   }
 
   .avatar-container-large {
-    @apply inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-500;
+    @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
   }
 
   .avatar-text {
@@ -36,6 +36,414 @@
   letter-spacing: 0.2625px;
 }
 
+@layer components {
+  .toggle-button {
+    @apply mt-3 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
+  }
+
+  .toggle-span {
+    @apply translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200
+  }
+
+  .enabled {
+    @apply bg-indigo-600
+  }
+
+  .enabled-anim {
+    @apply translate-x-5
+  }
+
+  .disabled {
+    @apply bg-gray-200
+  }
+
+  .disabled-anim {
+    @apply translate-x-0
+  }
+}
+  
+.modal-open {
+  overflow: hidden;
+}
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  outline: 0;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
+}
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
+}
+.modal.show .modal-dialog {
+  transform: none;
+}
+.modal.modal-static .modal-dialog {
+  transform: scale(1.02);
+}
+.modal-dialog-scrollable {
+  display: flex;
+  max-height: subtract(100%, 1rem);
+}
+.modal-dialog-scrollable .modal-content {
+  max-height: subtract(100vh, 1rem);
+  overflow: hidden;
+}
+.modal-dialog-scrollable .modal-header,
+.modal-dialog-scrollable .modal-footer {
+  flex-shrink: 0;
+}
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
+}
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: subtract(100%, 1rem);
+}
+.modal-dialog-centered::before {
+  display: block;
+  height: subtract(100vh, 1rem);
+  height: -webkit-min-content;
+  height: min-content;
+  content: "";
+}
+.modal-dialog-centered.modal-dialog-scrollable {
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+.modal-dialog-centered.modal-dialog-scrollable .modal-content {
+  max-height: none;
+}
+.modal-dialog-centered.modal-dialog-scrollable::before {
+  content: none;
+}
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop.show {
+  opacity: 0.5;
+}
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
+
+  .modal-dialog-scrollable {
+    max-height: subtract(100%, 3.5rem);
+  }
+  .modal-dialog-scrollable .modal-content {
+    max-height: subtract(100vh, 3.5rem);
+  }
+
+  .modal-dialog-centered {
+    min-height: subtract(100%, 3.5rem);
+  }
+  .modal-dialog-centered::before {
+    height: subtract(100vh, 3.5rem);
+    height: -webkit-min-content;
+    height: min-content;
+  }
+
+  .modal-sm {
+    max-width: 300px;
+  }
+}
+@media (min-width: 992px) {
+  .modal-lg,
+  .modal-xl {
+    max-width: 800px;
+  }
+}
+@media (min-width: 1200px) {
+  .modal-xl {
+    max-width: 1140px;
+  }
+}
+
+/*# sourceMappingURL=styles.css.map*/
+
+@layer components {
+    .tab-group-select-hidden {
+        @apply sm:hidden;
+    }
+
+    .tab-group-select {
+        @apply block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md;
+    }
+
+    .tab-active {
+        @apply border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
+    }
+
+    .tab {
+        @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
+    }
+
+    .tab-group-container-nav {
+        @apply -mb-px flex space-x-8;
+    }
+
+    .tab-group-container-hidden {
+        @apply hidden sm:block;
+    }
+
+    .tab-group-container {
+        @apply border-b border-gray-200;
+    }
+}
+
+@layer components {
+    .shell-sidebar-container-fixed {
+        @apply fixed w-0 sm:w-64 flex-col inset-y-0 bg-gray-800;
+    }
+
+    .shell-sidebar-toggle-button {
+        @apply hidden sm:block px-4 border-0 text-white focus:outline-none;
+    }
+
+    .shell-sidebar-container-hidden {
+        @apply hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800;
+    }
+
+    .shell-sidebar-content-container {
+        @apply flex flex-col;
+    }
+
+    .shell-sidebar-content-container-inner {
+        @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800;
+    }
+
+    .shell-sidebar-header-container {
+        @apply flex-1;
+    }
+
+    .shell-sidebar-component-container {
+        @apply flex w-full flex-col h-full min-h-0 bg-gray-800;
+    }
+
+    .shell-sidebar-component-container-inner {
+        @apply flex items-center h-16 flex-shrink-0 px-4 bg-gray-900;
+    }
+    
+    .shell-sidebar-component-links-container {
+        @apply pt-4 px-2;
+    }
+
+}
+@layer components {
+}
+@layer components {
+
+  .sidebar-off-canvas-menu-container {
+    @apply relative z-40 md:hidden;
+  }
+
+  
+  
+  .sidebar-off-canvas-menu-backdrop {
+    @apply fixed inset-0 transition-opacity ease-linear opacity-0 duration-300 pointer-events-none bg-gray-600 bg-opacity-75;
+  }
+
+  .sidebar-off-canvas-menu-backdrop-opacity-100 {
+    @apply fixed inset-0 transition-opacity ease-linear duration-300 pointer-events-none bg-gray-600 bg-opacity-75 opacity-100;
+  }
+
+  .sidebar-off-canvas-menu-container-inner {
+    @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform translate-x-0;
+  }
+
+  .sidebar-off-canvas-menu-container-inner-active {
+    @apply translate-x-0;
+  }
+
+  .sidebar-off-canvas-menu-container-inner-not-active {
+    @apply -translate-x-full;
+  }
+
+
+  .sidebar-off-canvas-menu-container-inner-translate-x-full {
+    @apply fixed inset-0 flex z-40 transition ease-in-out duration-300 transform -translate-x-full;
+  }
+
+  .sidebar-off-canvas-layout-container {
+    @apply relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800;
+  }
+
+  .sidebar-off-canvas-toggle-button-container {
+    @apply absolute top-0 right-0 -mr-12 pt-2;
+  }
+
+  .sidebar-off-canvas-toggle-button {
+    @apply ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none;
+  }
+  
+  .sidebar-off-canvas-app-logo-container {
+    @apply flex-shrink-0 flex items-center px-4;
+  }
+
+  .sidebar-dummy-element {
+    @apply flex-shrink-0 w-14;
+  }
+
+  .sidebar-static-menu-outer-container {
+    @apply hidden md:flex;
+  }
+
+  .sidebar-static-menu-container {
+    @apply flex-col w-64 fixed inset-y-0;
+  }
+
+  .sidebar-static-menu-container-active {
+    @apply flex;
+  }
+
+  .sidebar-static-menu-container-not-active {
+    @apply hidden;
+  }
+
+  .sidebar-static-menu-container-inner {
+    @apply flex-1 flex flex-col min-h-0 bg-gray-800 shadow-lg;
+  }
+
+  .sidebar-static-menu-app-logo-container {
+    @apply flex items-center h-16 flex-shrink-0 px-4 bg-gray-900;
+  }
+
+  .sidebar-static-menu-header-app-logo-container {
+    @apply flex items-center h-16 flex-shrink-0 ;
+  }
+
+  /* !!!! malakai onoma !!!! */
+  .sidebar-static-menu-wrapper {
+    @apply flex flex-col;
+  }
+
+  .sidebar-static-menu-wrapper-active {
+    @apply sm:pl-64;
+  }
+
+  .sidebar-static-menu-toggle-button-container {
+    @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-900 shadow;
+  }
+
+  .sidebar-static-menu-toggle-button {
+    @apply px-4 text-white bg-gray-800 focus:outline-none;
+  }
+
+  .sidebar-static-menu-header-container {
+    @apply flex-1 px-4 flex justify-between;
+  }
+
+  .sidebar-static-menu-header-near-container  {
+    @apply flex-1 flex;
+  }
+
+  .sidebar-static-menu-header-far-container {
+    @apply ml-4 flex items-center md:ml-6;
+  }
+
+}
+
+
+
+
+@layer components {
+
+  .notifications-nav-link {
+    @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
+  }
+
+  .header-notifications {
+    @apply flex gap-3 items-center;
+  }
+
+  .header-notifications-dropdown-button {
+    @apply max-w-xs focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1
+    focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;
+  }
+
+  .header-notifications-dropdown {
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  }
+
+  .header-notifications-dropdown-with-username {
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  }
+
+  .header-notifications-dropdown-view-all-button{
+    @apply items-center align-text-bottom font-medium w-full px-2.5 py-2.5 text-xs text-gray-600 focus:outline-none;
+  }
+
+  .notification-messages::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 hover:bg-gray-700;
+  }
+}
+
+.notification-messages::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  background: transparent;
+  cursor: pointer;
+  /* or add it to the track */
+}
 /*** IMPORTED FILE NOT FOUND ***/
 @import 'tailwindcss/base';/*** --- ***/
 /*** IMPORTED FILE NOT FOUND ***/
@@ -3047,7 +3455,7 @@
   }
 
   .pager-icon-button {
-    @apply inline-flex relative ml-2 inline-flex items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+    @apply inline-flex relative ml-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
   }
 
   .pager-pages-container {
@@ -3067,6 +3475,54 @@
   }
 }
 
+@layer components {
+
+  .advanced-search-container {
+
+  }
+
+  .advanced-search-filter {
+    @apply flex gap-6 mb-2 pr-2;
+  }
+
+  .advanced-search-filter-field-container {
+
+  }
+
+  .advanced-search-filter-value-container {
+    @apply flex gap-6 mb-6;
+  }
+
+  .advanced-search-filter-field-label {
+
+  }
+
+  .advanced-search-filter-value-label {
+    @apply block; 
+  }
+
+  .advanced-search-filter-value-input {
+    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  }
+
+  .advanced-search-filter-value-input-daterange-from {
+    @apply  mt-6 p-2;
+  }
+
+  .advanced-search-filter-value-input-daterange-to {
+    @apply  mt-6 p-2;
+  }
+
+  .advanced-search-chips {
+    @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
+  }
+
+  .advanced-search-chips-remove-filter {
+    @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
+  }
+
+}
+
 @layer components {
 
   .app-logo {
@@ -3429,6 +3885,177 @@
 
 }
 
+@layer components {
+    /* Bullets */
+    .stepper-bullets-container {
+        @apply flex items-center justify-center;
+    }
+    .stepper-bullets-counter {
+        @apply text-sm font-medium;
+    }
+    .stepper-bullets-ol {
+        @apply ml-8 flex items-center space-x-5;
+    }
+    .stepper-bullets-completed-step {
+        @apply block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900;
+    }
+    .stepper-bullets-active-step {
+        @apply relative flex items-center justify-center;
+    }
+    .stepper-bullets-active-step-level1 {
+        @apply absolute w-5 h-5 p-px flex;
+    }
+    .stepper-bullets-active-step-level11 {
+        @apply w-full h-full rounded-full bg-blue-200;
+    }
+    .stepper-bullets-active-step-bullet {
+        @apply relative block w-2.5 h-2.5 bg-blue-600 rounded-full;
+    }
+    .stepper-bullets-upcoming-step {
+        @apply block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400;
+    }
+
+    /* Bullets & Text */
+    .stepper-bullets-and-text-container {
+        @apply flex items-center justify-center;
+    }
+    .stepper-bullets-and-text-ol {
+        @apply space-y-6;
+    }
+    .stepper-bullets-and-text-completed-step {
+        @apply flex items-start;
+    }
+    .stepper-bullets-and-text-completed-step-level1 {
+        @apply flex-shrink-0 relative h-5 w-5 flex items-center justify-center;
+    }
+    .stepper-bullets-and-text-completed-step-container {
+        @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900;
+    }
+    .stepper-bullets-and-text-active-step {
+        @apply flex items-start;
+    }
+    .stepper-bullets-and-text-active-step-level1 {
+        @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center;
+    }
+    .stepper-bullets-and-text-active-step-level11 {
+        @apply absolute h-4 w-4 rounded-full bg-blue-200;
+    }
+    .stepper-bullets-and-text-active-step-level12 {
+        @apply relative block w-2 h-2 bg-blue-600 rounded-full;
+    }
+    .stepper-bullets-and-text-active-step-container {
+        @apply ml-3 text-sm font-medium text-blue-600;
+    }
+    .stepper-bullets-and-text-upcoming-step {
+        @apply flex items-start;
+    }
+    .stepper-bullets-and-text-upcoming-step-level1 {
+        @apply flex-shrink-0 h-5 w-5 relative flex items-center justify-center;
+    }
+    .stepper-bullets-and-text-upcoming-step-level2 {
+        @apply h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400;
+    }
+    .stepper-bullets-and-text-upcoming-step-container {
+        @apply ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900;
+    }
+
+    /* Circles */
+
+    /* Panels With Border */
+    .panels-with-border-container {
+        @apply border-t border-b border-gray-200;
+    }
+    .panels-with-border-nav {
+        @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+    }
+    .panels-with-border-ol {
+        @apply rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none;
+    }
+    .panels-with-border-li {
+        @apply relative overflow-hidden lg:flex-1 cursor-pointer;
+    }
+    .panels-with-border-completed-step {
+        @apply border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0;
+    }
+    .panels-with-border-completed-step-level1 {
+        @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto;
+    }
+    .panels-with-border-completed-step-level2 {
+        @apply px-6 py-5 flex items-start text-sm font-medium;
+    }
+    .panels-with-border-completed-step-level21 {
+        @apply flex-shrink-0;
+    }
+    .panels-with-border-completed-step-level211 {
+        @apply w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full;
+    }
+    .panels-with-border-completed-step-level22 {
+        @apply mt-0.5 ml-4 min-w-0 flex flex-col;
+    }
+    .panels-with-border-completed-step-level221 {
+        @apply text-xs font-semibold tracking-wide uppercase;
+    }
+    .panels-with-border-completed-step-level222 {
+        @apply text-sm font-medium text-gray-500;
+    }
+    .panels-with-border-active-step {
+        @apply border border-gray-200 overflow-hidden lg:border-0;
+    }
+    .panels-with-border-active-step-level1 {
+        @apply absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto;
+    }
+    .panels-with-border-active-step-level2 {
+        @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9;
+    }
+    .panels-with-border-active-step-level21 {
+        @apply flex-shrink-0;
+    }
+    .panels-with-border-active-step-level211 {
+        @apply w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full;
+    }
+    .panels-with-border-active-step-level211-text {
+        @apply text-blue-600;
+    }
+    .panels-with-border-active-step-level22 {
+        @apply mt-0.5 ml-4 min-w-0 flex flex-col;
+    }
+    .panels-with-border-active-step-level221 {
+        @apply text-xs font-semibold text-blue-600 tracking-wide uppercase;
+    }
+    .panels-with-border-active-step-level222 {
+        @apply text-sm font-medium text-gray-500;
+    }
+    .panels-with-border-step-separator {
+        @apply hidden absolute top-0 left-0 w-3 inset-0 lg:block;
+    }
+    .panels-with-border-upcoming-step {
+        @apply border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0;
+    }
+    .panels-with-border-upcoming-step-level1 {
+        @apply absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto;
+    }
+    .panels-with-border-upcoming-step-level2 {
+        @apply px-6 py-5 flex items-start text-sm font-medium lg:pl-9;
+    }
+    .panels-with-border-upcoming-step-level21 {
+        @apply flex-shrink-0;
+    }
+    .panels-with-border-upcoming-step-level211 {
+        @apply w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full;
+    }
+    .panels-with-border-upcoming-step-level211-text {
+        @apply text-gray-500;
+    }
+    .panels-with-border-upcoming-step-level22 {
+        @apply mt-0.5 ml-4 min-w-0 flex flex-col;
+    }
+    .panels-with-border-upcoming-step-level221 {
+        @apply text-xs font-semibold text-gray-500 tracking-wide uppercase;
+    }
+    .panels-with-border-upcoming-step-level222 {
+        @apply text-sm font-medium text-gray-500;
+    }
+}
 @layer components {
     .tab-group-select-hidden {
         @apply sm:hidden;