@indice/ng-components 0.4.0 → 0.4.2

package/src/assets/styles/list-view.css

@@ -1,63 +1,62 @@
+.list-view-container {
+  @apply flex flex-col border border-gray-200 rounded-lg;
+}
 
-  .list-view-container {
-    @apply flex flex-col border border-gray-200 rounded-lg;
-  }
+.list-view-container-inner {
+  @apply overflow-y-hidden overflow-x-auto rounded-lg;
+}
 
-  .list-view-container-inner {
-    @apply overflow-y-hidden overflow-x-auto rounded-lg;
-  }
+.list-view-table {
+  @apply min-w-full divide-y divide-gray-200;
+}
 
-  .list-view-table {
-    @apply min-w-full divide-y divide-gray-200;
-  }
+.list-view-thead {
+  @apply bg-gray-50;
+}
 
-  .list-view-thead {
-    @apply bg-gray-50;
-  }
+.list-view-th-details {
+  @apply px-2 py-3 w-6 text-left text-xs font-medium text-gray-500 uppercase;
+}
 
-  .list-view-th-details {
-    @apply px-2 py-3 w-6 text-left text-xs font-medium text-gray-500 uppercase;
-  }
+.list-view-th {
+  @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
+}
 
-  .list-view-th {
-    @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
-  }
+.list-view-th-full {
+  @apply w-full px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
+}
 
-  .list-view-th-full {
-    @apply w-full px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
-  }
+.list-view-th-half {
+  @apply w-full sm:w-1/2 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
+}
 
-  .list-view-th-half {
-    @apply w-full sm:w-1/2 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
-  }
+.list-view-tbody {
+  @apply bg-white divide-y divide-gray-200;
+}
 
-  .list-view-tbody {
-    @apply bg-white divide-y divide-gray-200;
-  }
+.list-view-tr {
+  @apply hover:bg-gray-50;
+}
 
-  .list-view-tr {
-    @apply hover:bg-gray-50;
-  }
+.list-view-td-details {
+  @apply px-2 py-2 whitespace-nowrap items-center;
+}
 
-  .list-view-td-details {
-    @apply px-2 py-2 whitespace-nowrap items-center;
-  }
+.list-view-td {
+  @apply px-4 py-4 whitespace-nowrap;
+}
 
-  .list-view-td {
-    @apply px-4 py-4 whitespace-nowrap;
-  }
+.list-view-td-full {
+  @apply w-full px-4 py-4 break-all;
+}
 
-  .list-view-td-full {
-    @apply w-full px-4 py-4 break-all;
-  }
+.list-view-td-half {
+  @apply w-full sm:w-1/2 px-4 py-4 whitespace-normal break-words;
+}
 
-  .list-view-td-half {
-    @apply w-full sm:w-1/2 px-4 py-4 whitespace-normal break-words;
-  }
+.details-button {
+  @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100;
+}
 
-  .details-button {
-    @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100;
-  }
-
-  .expand-collapse-button {
-    @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100;  }
+.expand-collapse-button {
+  @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100;  }

package/src/assets/styles/modal.css

@@ -1,10 +1,12 @@
 .modal-open {
   overflow: hidden;
 }
+
 .modal-open .modal {
   overflow-x: hidden;
   overflow-y: auto;
 }
+
 .modal {
   position: fixed;
   top: 0;
@@ -16,12 +18,14 @@
   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);
@@ -30,58 +34,72 @@
 .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);
+  max-height: calc(100% - 1rem);
 }
+
 .modal-dialog-scrollable .modal-content {
-  max-height: subtract(100vh, 1rem);
+  max-height: calc(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);
+  min-height: calc(100% - 1rem);
 }
+
 .modal-dialog-centered::before {
   display: block;
-  height: subtract(100vh, 1rem);
+  height: calc(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;
@@ -94,6 +112,7 @@
   border-radius: 0.3rem;
   outline: 0;
 }
+
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -103,12 +122,15 @@
   height: 100vh;
   background-color: #000;
 }
+
 .modal-backdrop.fade {
   opacity: 0;
 }
+
 .modal-backdrop.show {
   opacity: 0.5;
 }
+
 .modal-scrollbar-measure {
   position: absolute;
   top: -9999px;
@@ -116,6 +138,7 @@
   height: 50px;
   overflow: scroll;
 }
+
 @media (min-width: 576px) {
   .modal-dialog {
     max-width: 500px;
@@ -123,17 +146,19 @@
   }
 
   .modal-dialog-scrollable {
-    max-height: subtract(100%, 3.5rem);
+    max-height: calc(100% - 3.5rem);
   }
+
   .modal-dialog-scrollable .modal-content {
-    max-height: subtract(100vh, 3.5rem);
+    max-height: calc(100vh - 3.5rem);
   }
 
   .modal-dialog-centered {
-    min-height: subtract(100%, 3.5rem);
+    min-height: calc(100% - 3.5rem);
   }
+
   .modal-dialog-centered::before {
-    height: subtract(100vh, 3.5rem);
+    height: calc(100vh - 3.5rem);
     height: -webkit-min-content;
     height: min-content;
   }
@@ -142,12 +167,14 @@
     max-width: 300px;
   }
 }
+
 @media (min-width: 992px) {
   .modal-lg,
   .modal-xl {
     max-width: 800px;
   }
 }
+
 @media (min-width: 1200px) {
   .modal-xl {
     max-width: 1140px;

package/src/assets/styles/model-view-layout.css

@@ -1,48 +1,47 @@
+.model-view-container {
+  @apply mt-5 min-w-full min-h-screen;
+}
 
-  .model-view-container {
-    @apply mt-5 min-w-full min-h-screen;
-  }
+.model-view-container-inner {
+  @apply lg:grid lg:grid-cols-12 lg:gap-x-5;
+}
 
-  .model-view-container-inner {
-    @apply lg:grid lg:grid-cols-12 lg:gap-x-5;
-  }
+.model-view-aside {
+  @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3;
+}
 
-  .model-view-aside {
-    @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3;
-  }
+.model-view-aside-header-section {
+  @apply min-w-full;
+}
 
-  .model-view-aside-header-section {
-    @apply min-w-full;
-  }
+.model-view-aside-header-container {
+  @apply bg-white shadow-sm border border-gray-200 rounded-xl;
+}
 
-  .model-view-aside-header-container {
-    @apply bg-white shadow-sm border border-gray-200 rounded-xl;
-  }
+.model-view-aside-header-container-inner {
+  @apply flex flex-col bg-gray-50 justify-self-stretch rounded-t-xl h-24;
+}
 
-  .model-view-aside-header-container-inner {
-    @apply flex flex-col bg-gray-50 justify-self-stretch rounded-t-xl h-24;
-  }
+.model-view-menu-container {
+  @apply bg-white px-4 py-4 flow-root hidden sm:block rounded-b-xl;
+}
 
-  .model-view-menu-container {
-    @apply bg-white px-4 py-4 flow-root hidden sm:block rounded-b-xl;
-  }
+.model-view-menu-container-mobile {
+  @apply mt-2 px-4 py-2 flow-root sm:hidden;
+}
 
-  .model-view-menu-container-mobile {
-    @apply mt-2 px-4 py-2 flow-root sm:hidden;
-  }
+.model-view-menu-nav {
+  @apply h-full flex flex-col;
+}
 
-  .model-view-menu-nav {
-    @apply h-full flex flex-col;
-  }
+.model-view-menu-item {
+  @apply space-y-1;
+}
 
-  .model-view-menu-item {
-    @apply space-y-1;
-  }
+.model-view-menu-item-far {
+  @apply mt-auto pt-10 space-y-1;
+}
 
-  .model-view-menu-item-far {
-    @apply mt-auto pt-10 space-y-1;
-  }
-
-  .model-view-details-container {
-    @apply sm:px-6 lg:px-2 lg:col-span-9 md:col-span-10;
-  }
+.model-view-details-container {
+  @apply sm:px-6 lg:px-2 lg:col-span-9 md:col-span-10;
+}

package/src/assets/styles/nav-links.css

@@ -1,66 +1,64 @@
+.nav-link {
+  @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
 
+.sidebar .nav-link {
+  @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+}
 
-  .nav-link {
-    @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.nav-link-profile {
+  @apply flex items-center cursor-pointer px-4 py-2 rounded-md text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
 
-  .sidebar .nav-link {
-    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
-  }
+.nav-link-mobile {
+  @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
 
-  .nav-link-profile {
-    @apply flex items-center cursor-pointer px-4 py-2 rounded-md text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.sidebar .nav-link-list-container {
+  @apply flex-1 flex flex-col overflow-y-auto;
+}
 
-  .nav-link-mobile {
-    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.sidebar .nav-link-list-container-inner {
+  @apply flex-1 px-2 py-4 space-y-2;
+}
 
-  .sidebar .nav-link-list-container {
-    @apply flex-1 flex flex-col overflow-y-auto;
-  }
+.sidebar .nav-link-list-container-inner .icons-only {
+  @apply flex-1 px-2 py-4 space-y-4;
+}
 
-  .sidebar .nav-link-list-container-inner {
-    @apply flex-1 px-2 py-4 space-y-2;
-  }
+.nav-link-active {
+  @apply cursor-default text-sky-600 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-lg text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
 
-  .sidebar .nav-link-list-container-inner .icons-only {
-    @apply flex-1 px-2 py-4 space-y-4;
-  }
+.sidebar .nav-link-active {
+  @apply cursor-default bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+}
 
-  .nav-link-active {
-    @apply cursor-default text-sky-600 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-lg text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.sidebar .nav-link-active-b {
+  @apply cursor-default bg-gray-900 border-b border-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+}
 
-  .sidebar .nav-link-active {
-    @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-l {
+  @apply cursor-default  bg-gray-900 border-l border-sky-400 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-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
-  }
+.nav-link-profile-active {
+  @apply cursor-default rounded-md block px-4 py-2 text-xs text-sky-900 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
 
-  .sidebar .nav-link-active-l {
-    @apply cursor-default  bg-gray-900 border-l border-sky-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
-  }
-
-  .nav-link-profile-active {
-    @apply cursor-default rounded-md block px-4 py-2 text-xs text-sky-900 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
-
-  .nav-link-mobile-active {
-    @apply cursor-default bg-gray-900 text-sky-300 block px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.nav-link-mobile-active {
+  @apply cursor-default bg-gray-900 text-sky-300 block px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
   
-  .view-nav-link {
-    @apply cursor-pointer rounded-md text-gray-600 hover:border-gray-50 border-transparent border-l-2 hover:bg-gray-50 hover:text-gray-900 py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
-  }
+.view-nav-link {
+  @apply cursor-pointer rounded-md text-gray-600 hover:border-gray-50 border-transparent border-l-2 hover:bg-gray-50 hover:text-gray-900 py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
   
-  .view-nav-link-active {
-    @apply cursor-default bg-gray-100 border-gray-600 hover:border-gray-600 text-gray-900;
-  }
+.view-nav-link-active {
+  @apply cursor-default bg-gray-100 border-gray-600 hover:border-gray-600 text-gray-900;
+}
   
 
-  .min-nav-link-text-width {
-    width: 220px;
-  }
+.min-nav-link-text-width {
+  width: 220px;
+}

package/src/assets/styles/notifications-indicator.component.css

@@ -1,33 +1,31 @@
+.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;
+}
 
-  .notifications-nav-link {
-    @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
-  }
+.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 {
-    @apply flex gap-3 items-center;
-  }
+.header-notifications-dropdown {
+  @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+}
 
-  .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-with-username {
+  @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+}
 
-  .header-notifications-dropdown {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/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;
+}
 
-  .header-notifications-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/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-thumb {
+  @apply bg-gray-600 hover:bg-gray-700;
+}
 
 
 .notification-messages::-webkit-scrollbar {
@@ -36,4 +34,4 @@
   background: transparent;
   cursor: pointer;
   /* or add it to the track */
-}
+}

package/src/assets/styles/pager.css

@@ -1,32 +1,31 @@
+.pager-container {
+  @apply flex flex-col sm:flex-row mb-2 justify-start;
+}
 
-  .pager-container {
-    @apply flex flex-col sm:flex-row mb-2 justify-start;
-  }
+.pager-container-near {
+  @apply sm:flex-1 justify-start items-center mb-1 sm:mb-0;
+}
 
-  .pager-container-near {
-    @apply sm:flex-1 justify-start items-center mb-1 sm:mb-0;
-  }
+.pager-container-far {
+  @apply justify-start flex-nowrap items-center;
+}
 
-  .pager-container-far {
-    @apply justify-start flex-nowrap items-center;
-  }
+.pager-icon-button {
+  @apply inline-flex relative ml-1 mr-2 items-center px-2 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
+}
 
-  .pager-icon-button {
-    @apply inline-flex relative ml-1 mr-2 items-center px-2 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
-  }
+.pager-pages-container {
+  @apply relative inline-flex rounded-sm;
+}
 
-  .pager-pages-container {
-    @apply relative inline-flex rounded-sm;
-  }
+.pager-button {
+  @apply relative ml-1 inline-flex items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
+}
 
-  .pager-button {
-    @apply relative ml-1 inline-flex items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
-  }
+.pager-arrow-button-left {
+  @apply inline-flex relative ml-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
+}
 
-  .pager-arrow-button-left {
-    @apply inline-flex relative ml-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
-  }
-
-  .pager-arrow-button-right {
-    @apply inline-flex relative mr-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
-  }
+.pager-arrow-button-right {
+  @apply inline-flex relative mr-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
+}