@indice/ng-components 0.2.167-beta.4 → 0.2.167-beta.40

package/_styles.css

@@ -1,3 +1,54 @@
+/*** IMPORTED FILE NOT FOUND ***/
+@import 'tailwindcss/base';/*** --- ***/
+/*** IMPORTED FILE NOT FOUND ***/
+@import 'tailwindcss/components';/*** --- ***/
+/*** IMPORTED FILE NOT FOUND ***/
+@import 'tailwindcss/utilities';/*** --- ***/
+
+@layer base {
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply text-gray-600;
+  }
+
+  select {
+    @apply max-w-lg block focus:ring-gray-300 ring-opacity-25 focus:border-gray-300 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-200 rounded-sm;
+  }
+
+  input[type=text] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=password] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=email] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=number] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  textarea {
+    @apply shadow-sm focus:ring-gray-500 focus:border-gray-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm;
+  }
+
+}
+
+
 @layer components {
 
   .avatar-container {
@@ -278,13 +329,9 @@
     .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;
+        @apply pt-4;
     }
 
 }
@@ -331,9 +378,13 @@
     @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;
@@ -343,6 +394,7 @@
     @apply flex-shrink-0 w-14;
   }
 
+  /* in mobile view the static menu container is always hidden - off-canvas container is visible */
   .sidebar-static-menu-outer-container {
     @apply hidden md:flex;
   }
@@ -356,15 +408,15 @@
   }
 
   .sidebar-static-menu-container-not-active {
-    @apply hidden;
+    @apply flex w-20;
   }
 
   .sidebar-static-menu-container-inner {
-    @apply flex-1 flex flex-col min-h-0 bg-gray-800 shadow-lg;
+    @apply flex-1 flex items-center 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;
+    @apply flex items-center h-16 flex-shrink-0;
   }
 
   .sidebar-static-menu-header-app-logo-container {
@@ -373,25 +425,31 @@
 
   /* !!!! malakai onoma !!!! */
   .sidebar-static-menu-wrapper {
-    @apply flex flex-col;
+    @apply flex flex-col md:pl-20;
   }
 
-  .sidebar-static-menu-wrapper-active {
-    @apply sm:pl-64;
+  .sidebar-static-menu-wrapper-expanded {
+    @apply md:pl-64;
   }
 
   .sidebar-static-menu-sticky-header-container {
-    @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-900 shadow;
+    @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-900 shadow-2xl;
   }
 
   .sidebar-static-menu-toggle-button {
-    @apply px-4 text-white bg-gray-800 focus:outline-none;
+    @apply px-4 text-white focus:outline-none;
+  }
+
+  .sidebar-static-menu-toggle-button-md {
+    @apply px-4 text-white focus:outline-none md:hidden;
   }
 
   .sidebar-static-menu-header-container {
     @apply flex-1 px-4 flex justify-between;
   }
 
+  /* fix names  */
+
   .sidebar-static-menu-header-near-container  {
     @apply flex-1 flex;
   }
@@ -444,55 +502,6 @@
   cursor: pointer;
   /* or add it to the track */
 }
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/base';/*** --- ***/
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/components';/*** --- ***/
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/utilities';/*** --- ***/
-
-@layer base {
-  h1 {
-    @apply text-2xl;
-  }
-
-  h2 {
-    @apply text-xl;
-  }
-
-  h3 {
-    @apply text-lg;
-  }
-
-  a {
-    @apply text-gray-600;
-  }
-
-  select {
-    @apply max-w-lg block focus:ring-gray-300 ring-opacity-25 focus:border-gray-300 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-200 rounded-sm;
-  }
-
-  input[type=text] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=password] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=email] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=number] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  textarea {
-    @apply shadow-sm focus:ring-gray-500 focus:border-gray-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm;
-  }
-
-}
 
 @layer components {
   .card-deck-busy{
@@ -608,12 +617,12 @@
 
 
   .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-900;
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
   }
 
 
   .sidebar .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-900 hover:text-white;
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
   }
 
   .btn-form-view-header {
@@ -708,11 +717,11 @@
   }
 
   .dropdown-selected-text {
-    @apply block truncate;
+    @apply truncate inline-flex items-center;
   }
 
   .dropdown-button-icon {
-    @apply absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none;
+    @apply absolute inset-y-0 right-0 flex items-center pointer-events-none;
   }
 
   .dropdown-arrow {
@@ -732,11 +741,11 @@
   }
 
   .dropdown-li-text {
-    @apply font-normal block truncate;
+    @apply font-normal truncate inline-flex items-center ;
   }
 
   .dropdown-li-selected-text {
-    @apply font-semibold block truncate;
+    @apply font-semibold truncate inline-flex items-center ;
   }
 
   .dropdown-li-selected-indicator-container {
@@ -3318,7 +3327,7 @@
   }
 
   .model-view-aside {
-    @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-4 md:col-span-3;
+    @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3;
   }
 
   .model-view-aside-header-section {
@@ -3377,7 +3386,11 @@
   }
 
   .sidebar .nav-link-list-container-inner {
-    @apply flex-1 px-2 py-4 space-y-1;
+    @apply flex-1 px-2 py-4 space-y-2;
+  }
+
+  .sidebar .nav-link-list-container-inner .icons-only {
+    @apply flex-1 px-2 py-4 space-y-4;
   }
 
   .nav-link-active {
@@ -3388,6 +3401,14 @@
     @apply cursor-default bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
   }
 
+  .sidebar .nav-link-active-b {
+    @apply cursor-default bg-gray-900 border-b border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+  }
+
+  .sidebar .nav-link-active-l {
+    @apply cursor-default bg-gray-900 border-l border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+  }
+
   .nav-link-profile-active {
     @apply cursor-default block px-4 py-2 text-xs text-blue-300 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
@@ -3404,6 +3425,9 @@
     @apply cursor-default bg-gray-50 border-gray-600 text-gray-900 border-l-4 py-2 px-3 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
+  .min-nav-link-text-width {
+    width: 220px;
+  }
 }
 
 @layer components {
@@ -3459,7 +3483,7 @@
   }
 
   .pager-pages-container {
-    @apply relative z-30 inline-flex rounded-sm;
+    @apply relative inline-flex rounded-sm;
   }
 
   .pager-button {
@@ -3554,7 +3578,7 @@
   }
 
   .shell-content-container {
-    @apply mx-auto -mt-28;
+    @apply mx-auto -mt-24;
   }
 
   .sidebar .shell-content-container {
@@ -3567,11 +3591,11 @@
   }
 
   .sidebar .shell-content-container-inner {
-    @apply max-w-full px-4 min-h-screen;
+    @apply max-w-full px-4 pb-2 min-h-screen;
   }
 
   .shell-content-container-inner {
-    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen;
+    @apply max-w-7xl mx-auto px-4 pb-2 sm:px-6 lg:px-8 min-h-screen;
   }
 
   .shell-content-container-inner-fluid {
@@ -4187,7 +4211,7 @@
 @layer components {
 
   .view-container {
-    @apply mt-8 sm:mt-5 flex flex-col;
+    @apply mt-4 sm:mt-5 flex flex-col;
   }
 
   .view-container-fluid {
@@ -4195,17 +4219,25 @@
   }
 
   .view-layout-paddings {
-    @apply pt-6 pb-4 sm:py-6;
+    @apply py-4 sm:py-6;
+  }
+
+  .sidebar .view-layout-paddings {
+    @apply py-2 sm:py-4;
   }
 
   .view-layout-title-container {
-    @apply flex text-white flex-row justify-start ;
+    @apply flex text-white flex-col md:flex-row justify-start;
   }
 
   .view-layout-title-container-inner {
     @apply flex-1 min-w-0;
   }
 
+  .view-layout-title-container-far {
+    @apply flex items-center justify-start sm:justify-end;
+  }
+
   .title-icon {
     @apply text-2xl md:text-xl text-white font-thin mr-1;
   }
@@ -4231,15 +4263,15 @@
   }
 
   .meta-container {
-    @apply ml-1 mt-2 flex flex-row sm:flex-row sm:flex-wrap space-x-2 sm:space-x-4;
+    @apply mt-1 ml-1 hidden h-0 w-0 md:w-full md:flex md:flex-wrap opacity-75;
   }
-
+  
   .sidebar .meta-container {
     @apply text-gray-900;
   }
 
   .meta-item-container {
-    @apply flex items-center;
+    @apply flex items-center mr-2;
   }
 
   .meta-icon {
@@ -4251,14 +4283,146 @@
   }
 
   .search-container {
-    @apply relative text-gray-400 focus-within:text-gray-600 ml-2 hover:shadow-sm hover:bg-gray-900;
+    @apply relative inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 hover:shadow-sm border border-gray-200;
   }
 
+  /* .search-input {
+    @apply pl-10 pr-20 w-60 bg-gray-50 rounded-sm text-sm text-gray-900 border-gray-400 placeholder-gray-500 outline-none focus:shadow focus:outline-none z-0;
+  } */
+
   .search-input {
-    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
+    @apply w-60 rounded-sm text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
+  }
+
+  .search-button {
+    @apply mr-1 text-xs focus:outline-none inline-flex items-center justify-center w-6 h-6 text-gray-800 hover:text-gray-900;
   }
 }
 
+@layer components {
+    .combobox-wrapper {
+        @apply relative mt-1;
+    }
+
+    .combobox-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;
+    }
+
+    .combobox-icons {
+        @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
+    }
+
+    .combobox-results {
+        @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
+    }
+
+    .combobox-default-item-template {
+        @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
+    }
+
+    .combobox-selected-item-wrapper {
+        @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
+    }
+
+    .combobox-selected-item-remove-btn {
+        @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
+    }
+}
+@layer components {
+    .toggle-button-button {
+        @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1;
+    }
+
+    .toggle-button-button-disabled {
+        @apply opacity-75;
+    }
+
+    .toggle-button-bg-false {
+        @apply bg-gray-200;
+    }
+
+    .toggle-button-bg-true {
+        @apply bg-gray-600;
+    }
+
+    .toggle-button-icon-container {
+        @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
+    }
+
+    .toggle-button-icon-container-true {
+        @apply translate-x-5;
+    }
+
+    .toggle-button-icon-container-false {
+        @apply translate-x-0;
+    }
+
+    .toggle-button-icon-container-inner {
+        @apply opacity-100 ease-in duration-200 absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
+    }
+
+    .toggle-button-container-inner-true {
+        @apply opacity-0 ease-out duration-100;
+    }
+
+    .toggle-button-container-inner-false {
+        @apply opacity-100 ease-in duration-200;
+    }
+
+    .toggle-button-icon {
+        @apply h-3 w-3 text-gray-600;
+    }
+
+    .toggle-button-text {
+        @apply text-sm font-medium text-gray-900;
+    }
+
+    .toggle-button-description {
+        @apply text-xs mt-1 text-gray-500;
+    }
+}
+@layer components {
+    .toggle-buttons-list-container {
+        @apply relative items-center inline-flex;
+    }
+
+    .toggle-buttons-list-icon-container {
+        @apply flex-none mr-2;
+    }
+
+    .toggle-buttons-list-drop-down-contaner {
+        @apply block lg:hidden z-10;
+    }
+
+    /* mw-40 not supported*/
+    .toggle-buttons-list-drop-down {
+        @apply w-full;
+    }
+
+    .toggle-buttons-list {
+        @apply hidden lg:block;
+    }
+
+    .toggle-buttons-list-button {
+        @apply relative inline-flex items-center p-2 first:border-l first:rounded-l-sm last:rounded-r-sm border-t border-b border-r border-gray-300 bg-white text-xs text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none;
+    }
+
+    .toggle-buttons-list-button-selected {
+        @apply bg-gray-100;
+    }
+
+    .toggle-buttons-list-button-icon-container {
+        @apply flex-none mr-2;
+    }
+
+    .toggle-buttons-list-button-button-text {
+        @apply mr-2 block overflow-ellipsis overflow-hidden;
+    }
+
+    .toggle-buttons-list-button-button-count {
+       @apply ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs text-gray-700 tabular-nums; 
+    }
+}
 
 .modal-active {
   overflow: hidden;