@indice/ng-components 0.4.0-beta.2 → 0.4.0-beta.5

package/src/assets/styles/language-selection.component.css

@@ -0,0 +1,11 @@
+.langs-button {
+    @apply text-blue-300 hover:text-blue-400;
+}
+
+.langs-menu-expanded {
+    @apply transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+}
+
+.langs-menu-collapsed {
+    @apply hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+}

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

@@ -0,0 +1,63 @@
+
+  .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-table {
+    @apply min-w-full divide-y divide-gray-200;
+  }
+
+  .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 {
+    @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-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-tr {
+    @apply hover:bg-gray-50;
+  }
+
+  .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-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;
+  }
+
+  .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;  }

package/{modal.css → src/assets/styles/modal.css}

@@ -153,5 +153,3 @@
     max-width: 1140px;
   }
 }
-
-/*# sourceMappingURL=styles.css.map*/

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

@@ -0,0 +1,48 @@
+
+  .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-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-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-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-nav {
+    @apply h-full flex flex-col;
+  }
+
+  .model-view-menu-item {
+    @apply 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;
+  }

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

@@ -0,0 +1,66 @@
+
+
+  .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-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;
+  }
+
+  .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 {
+    @apply flex-1 flex flex-col overflow-y-auto;
+  }
+
+  .sidebar .nav-link-list-container-inner {
+    @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 {
+    @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 {
+    @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-sky-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-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;
+  }
+  
+  .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;
+  }
+  
+
+  .min-nav-link-text-width {
+    width: 220px;
+  }

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

@@ -0,0 +1,39 @@
+
+
+  .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-lg shadow-lg bg-white ring-1 ring-black ring-black/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-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 {
+  width: 7px;
+  height: 7px;
+  background: transparent;
+  cursor: pointer;
+  /* or add it to the track */
+}

package/src/assets/styles/pager.css

@@ -0,0 +1,32 @@
+
+  .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-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-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-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;
+  }

package/src/assets/styles/progress-bar.component.css

@@ -0,0 +1,15 @@
+.progress-bar-container {
+    @apply flex grid grid-cols-1;
+}
+
+.progress-bar-label {
+    @apply text-xs mt-2 truncate text-ellipsis;
+}
+
+.progress-bar-backdrop {
+    @apply flex mt-1 h-4 rounded-md backdrop-blur-sm bg-slate-200/25;
+}
+
+.progress-bar-inner {
+    @apply h-2 m-1 rounded-md bg-sky-200 transition-[width] ease-in-out duration-300 transform;
+}

package/src/assets/styles/shell-layout.css

@@ -0,0 +1,252 @@
+
+
+  .app-logo {
+    @apply h-8 w-8;
+  }
+
+  .shell-container {
+    @apply antialiased font-sans bg-gray-100 h-full;
+  }
+
+  .shell-header-container {
+    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
+  }
+
+  .sidebar .shell-header-container {
+    @apply bg-gradient-to-r from-gray-900 to-gray-800 z-50 pb-0 sm:pb-0 w-full flex justify-end;
+  }
+
+  .shell-header-container-inner {
+    @apply max-w-7xl mx-auto;
+  }
+
+  .sidebar .shell-header-container-inner {
+    @apply max-w-full mx-auto;
+  }
+
+  .shell-header-container-inner-fluid {
+    @apply w-full mx-auto;
+  }
+
+  .shell-content-container {
+    @apply mx-auto -mt-24;
+  }
+
+  .sidebar .shell-content-container {
+    @apply mx-auto mt-0;
+  }
+
+  .shell-content-container-no-header {
+    /* overide this style in your app  */
+    @apply mx-auto ;
+  }
+
+  .sidebar .shell-content-container-inner {
+    @apply max-w-full px-4 pb-2 min-h-screen;
+  }
+
+  .shell-content-container-inner {
+    @apply max-w-7xl mx-auto px-4 pb-2 sm:px-6 lg:px-8 min-h-screen;
+  }
+
+  .shell-content-container-inner-fluid {
+    @apply w-full mx-auto min-h-screen ;
+  }
+
+
+  .shell-header-paddings {
+    @apply mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+
+  .sidebar .shell-header-paddings {
+    @apply mx-auto px-2;
+  }
+
+  .shell-header-border {
+    @apply border-b border-gray-700;
+  }
+
+  .sidebar .shell-header-border {
+    @apply border-0;
+  }
+
+  .shell-header-menu-container {
+    @apply flex items-center justify-between h-16;
+  }
+
+  .shell-header-md-visible {
+    @apply hidden sm:block;
+  }
+
+  .shell-header-link-container {
+    @apply hidden sm:ml-6 sm:block ml-10 flex-grow justify-start flex items-center space-x-4;
+  }
+
+  .shell-header-link-container-inner {
+    @apply flex justify-start;
+  }
+
+  .shell-header-logo-container {
+    @apply flex flex-grow-0 flex-shrink-0 items-center;
+  }
+
+  .shell-header-links-far-container {
+    @apply flex flex-grow-0 flex-shrink-0 items-center ml-2;
+  }
+
+  .shell-header-menu-rounded-button {
+    @apply bg-gray-800 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
+  }
+
+  .shell-header-menu-rounded-button-icon-style {
+    @apply h-6 w-6;
+  }
+
+  .shell-header-profile {
+    @apply flex items-center;
+  }
+
+  .shell-header-profile .shell-header-profile-userName {
+    @apply cursor-pointer text-white text-xs;
+  }
+
+  .shell-header-profile-dropdown-button {
+    @apply max-w-xs outline-none 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;
+  }
+
+  .shell-header-profile-dropdown {
+    @apply z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+  }
+
+  .shell-header-profile-dropdown-with-username {
+    @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-black/5 focus:outline-none;
+  }
+
+
+  .mobile-menu-button-container {
+    @apply -mr-2 grid grid-cols-1 sm:hidden;
+  }
+
+  .mobile-menu-button {
+    @apply inline-flex items-center justify-center p-2 rounded-lg outline-none text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
+  }
+
+  .mobile-menu-container {
+    @apply border-b h-full w-full sm:opacity-75 border-gray-700 md:hidden z-50;
+  }
+
+  .mobile-menu-link-container {
+    @apply px-2 py-3 grid grid-cols-1 space-y-1;
+  }
+
+  .mobile-menu-user-info-container {
+    @apply pt-4 pb-3 border-t border-gray-700;
+  }
+
+  .mobile-menu-user-info-container-inner {
+    @apply flex items-center px-5;
+  }
+
+  .mobile-menu-avatar-container {
+    @apply inline-flex items-center justify-center h-10 w-10 rounded-full ring-1 ring-blue-300;
+  }
+
+  .mobile-menu-avatar-name {
+    @apply text-sm font-medium leading-none text-white;
+  }
+
+  .mobile-menu-user-name {
+    @apply text-base font-medium leading-none text-white;
+  }
+
+  .mobile-menu-user-email {
+    @apply text-sm font-medium leading-none text-gray-400;
+  }
+
+  .mobile-menu-rounded-button {
+    @apply ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white;
+  }
+
+  .mobile-menu-rounded-button-icon-style {
+    @apply h-6 w-6;
+  }
+
+  .shell-footer-container {
+    @apply bg-gradient-to-r from-gray-800 to-gray-900 mt-10 pt-6;
+  }
+
+  .shell-footer-container-inner {
+    @apply max-w-7xl mx-auto;
+  }
+
+  .shell-footer-container-inner-fluid {
+    @apply w-full mx-auto;
+  }
+
+  .shell-footer-component-container {
+    @apply text-gray-300;
+  }
+
+  .shell-footer-paddings {
+    @apply mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  .shell-footer-component-container-inner {
+    @apply w-full mx-auto;
+  }
+
+  .shell-footer-logo-h {
+    @apply h-12;
+  }
+
+  .shell-footer-sections-container {
+    @apply grid grid-cols-8 md:grid-cols-9  lg:grid-cols-8  divide-gray-700 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8;
+  }
+
+  .shell-footer-section {
+    @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
+  }
+
+  .shell-footer-section nav {
+    @apply mt-4;
+  }
+
+  .shell-footer-section ul {
+    @apply space-y-2;
+  }
+
+  .shell-footer-section-links {
+    @apply col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0;
+  }
+
+
+  .shell-footer-section-links ul {
+    @apply grid lg:grid-cols-2;
+  }
+
+  .shell-footer-section-links li {
+    @apply mb-2;
+  }
+
+  .shell-footer-section-title {
+    @apply text-xl font-semibold text-white;
+  }
+
+
+  .shell-footer-social {
+    @apply flex space-x-2 font-normal text-base hover:text-gray-100;
+  }
+
+  .shell-footer-social-icon {
+    @apply h-6 w-6;
+  }
+
+  .shell-footer-link {
+    @apply text-sm text-gray-400 hover:underline transition duration-150 ease-in-out;
+  }
+
+  .shell-footer-copyright {
+    @apply max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-700 py-5;
+  }

package/src/assets/styles/shell-sidebar-header.css

@@ -0,0 +1,2 @@
+@layer components {
+}

package/src/assets/styles/shell-sidebar-layout.css

@@ -0,0 +1,125 @@
+@reference tailwindcss;
+
+  .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-black/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-black/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;
+  }
+
+  /* in mobile view the static menu container is always hidden - off-canvas container is visible */
+  .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 flex w-20;
+  }
+
+  .sidebar-static-menu-container-inner {
+    @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;
+  }
+
+  .sidebar-static-menu-header-app-logo-container {
+    @apply flex items-center h-16 flex-shrink-0 ;
+  }
+
+  .shell-sidebar-logo {
+    @apply h-8 w-auto;
+  }
+
+  /* !!!! malakai onoma !!!! */
+  .sidebar-static-menu-wrapper {
+    @apply flex flex-col md:pl-20;
+  }
+
+  .sidebar-static-menu-wrapper-expanded {
+    @apply md:pl-64;
+  }
+
+  .sidebar-static-menu-sticky-header-container {
+    @apply sticky top-0 z-20 flex-shrink-0 flex h-16 bg-gray-900 shadow-2xl;
+  }
+
+  .sidebar-static-menu-toggle-button {
+    @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;
+  }
+
+  .sidebar-static-menu-header-far-container {
+    @apply ml-4 flex items-center md:ml-6;
+  }
+

package/src/assets/styles/shell-sidebar.css

@@ -0,0 +1,32 @@
+
+    .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-links-container {
+        @apply pt-4;
+    }