@indice/ng-components 0.4.0 → 0.4.2

package/src/assets/styles/toast.css

@@ -1,70 +1,70 @@
-  .toast {
-    @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-50;
-    animation: move 400ms ease-in;
-  }
+.toast {
+  @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-50;
+  animation: move 400ms ease-in;
+}
 
-  .toast-closed {
-    @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start;
-    animation: close 100ms ease-out;
-  }
+.toast-closed {
+  @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start;
+  animation: close 100ms ease-out;
+}
 
-  .toast-container {
-    @apply w-full flex flex-col items-center space-y-4 sm:items-end z-50;
-  }
+.toast-container {
+  @apply w-full flex flex-col items-center space-y-4 sm:items-end z-50;
+}
 
-  .toast-pill {
-    @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-black/5 overflow-hidden;
-  }
+.toast-pill {
+  @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-black/5 overflow-hidden;
+}
 
-  .toast-context-padding {
-    @apply p-4;
-  }
+.toast-context-padding {
+  @apply p-4;
+}
 
-  .toast-context {
-    @apply flex items-start;
-  }
+.toast-context {
+  @apply flex items-start;
+}
 
-  .toast-icon {
-    @apply flex-shrink-0;
-  }
+.toast-icon {
+  @apply flex-shrink-0;
+}
 
-  .toast-close-icon {
-    @apply ml-4 flex-shrink-0 flex;
-  }
+.toast-close-icon {
+  @apply ml-4 flex-shrink-0 flex;
+}
 
-  .toast-close-button {
-    @apply bg-white rounded-sm inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
-  }
+.toast-close-button {
+  @apply bg-white rounded-sm inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
+}
 
-  .toast-title {
-    @apply mb-1 text-sm font-medium text-gray-900;
-  }
+.toast-title {
+  @apply mb-1 text-sm font-medium text-gray-900;
+}
 
-  .toast-body {
-    @apply text-sm text-gray-500 whitespace-normal;
-    word-break: break-word;
-  }
+.toast-body {
+  @apply text-sm text-gray-500 whitespace-normal;
+  word-break: break-word;
+}
 
-  @keyframes move {
-    from {
-      opacity: 0;
-      --tw-translate-y: 0.5rem;
-      transform: translateY(0.5rem);
-    }
+@keyframes move {
+  from {
+    opacity: 0;
+    --tw-translate-y: 0.5rem;
+    transform: translateY(0.5rem);
+  }
 
-    to {
-      --tw-translate-y: 0;
-      transform: translateY(0);
-      opacity: 100;
-    }
+  to {
+    --tw-translate-y: 0;
+    transform: translateY(0);
+    opacity: 100;
   }
+}
 
-  @keyframes close {
-    from {
-      opacity: 100;
-    }
+@keyframes close {
+  from {
+    opacity: 100;
+  }
 
-    to {
-      opacity: 0;
-    }
+  to {
+    opacity: 0;
   }
+}

package/src/assets/styles/toggle-button.component.css

@@ -1,52 +1,51 @@
+.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 {
-        @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-button-disabled {
-        @apply opacity-75;
-    }
+.toggle-button-bg-false {
+    @apply bg-gray-200;
+}
 
-    .toggle-button-bg-false {
-        @apply bg-gray-200;
-    }
+.toggle-button-bg-true {
+    @apply bg-gray-600;
+}
 
-    .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 {
-        @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-true {
-        @apply translate-x-5;
-    }
+.toggle-button-icon-container-false {
+    @apply translate-x-0;
+}
 
-    .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-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-true {
-        @apply opacity-0 ease-out duration-100;
-    }
+.toggle-button-container-inner-false {
+    @apply opacity-100 ease-in duration-200;
+}
 
-    .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-icon {
-        @apply h-3 w-3 text-gray-600;
-    }
+.toggle-button-text {
+    @apply text-sm font-medium text-gray-900;
+}
 
-    .toggle-button-text {
-        @apply text-sm font-medium text-gray-900;
-    }
-
-    .toggle-button-description {
-        @apply text-xs mt-1 text-gray-500;
-    }
+.toggle-button-description {
+    @apply text-xs mt-1 text-gray-500;
+}

package/src/assets/styles/toggle-buttons-list.component.css

@@ -1,45 +1,44 @@
-
-    .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-container {
-        @apply block lg:hidden z-10;
-    }
-
-    .toggle-buttons-list-drop-down-compact-container {
-        @apply block 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-lg last:rounded-r-lg 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; 
-    }
+.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-container {
+    @apply block lg:hidden z-10;
+}
+
+.toggle-buttons-list-drop-down-compact-container {
+    @apply block 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-lg last:rounded-r-lg 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; 
+}

package/src/assets/styles/toggle.css

@@ -1,24 +1,23 @@
+.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-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;
+}
 
-  .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 {
-    @apply bg-indigo-600
-  }
+.enabled-anim {
+  @apply translate-x-5;
+}
 
-  .enabled-anim {
-    @apply translate-x-5
-  }
+.disabled {
+  @apply bg-gray-200;
+}
 
-  .disabled {
-    @apply bg-gray-200
-  }
-
-  .disabled-anim {
-    @apply translate-x-0
-  }
+.disabled-anim {
+  @apply translate-x-0;
+}

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

@@ -1,89 +1,89 @@
 @reference tailwindcss;
 
-  .view-container {
-    @apply mt-4 sm:mt-5 flex flex-col;
-  }
+.view-container {
+  @apply mt-4 sm:mt-5 flex flex-col;
+}
 
-  .view-container-fluid {
-    @apply sm:px-0 ;
-  }
+.view-container-fluid {
+  @apply sm:px-0 ;
+}
 
-  .view-layout-paddings {
-    @apply py-4 sm:py-6;
-  }
+.view-layout-paddings {
+  @apply py-4 sm:py-6;
+}
 
-  .sidebar .view-layout-paddings {
-    @apply py-2 sm:py-4;
-  }
+.sidebar .view-layout-paddings {
+  @apply py-2 sm:py-4;
+}
 
-  .view-layout-title-container {
-    @apply flex text-white flex-col md:flex-row justify-start;
-  }
+.view-layout-title-container {
+  @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-inner {
+  @apply flex-1 min-w-0;
+}
 
-  .view-layout-title-container-far {
-    @apply flex items-center justify-start sm:justify-end;
-  }
+.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;
-  }
+.title-icon {
+  @apply text-2xl md:text-xl text-white font-thin mr-1;
+}
 
-  .sidebar .title-icon {
-    @apply text-2xl md:text-xl font-thin mr-1 text-gray-900;
-  }
+.sidebar .title-icon {
+  @apply text-2xl md:text-xl font-thin mr-1 text-gray-900;
+}
 
-  .view-layout-title {
-    @apply inline text-xl md:text-3xl text-white;
-  }
+.view-layout-title {
+  @apply inline text-xl md:text-3xl text-white;
+}
 
-  .sidebar .view-layout-title {
-    @apply inline text-xl md:text-3xl text-gray-900;
-  }
+.sidebar .view-layout-title {
+  @apply inline text-xl md:text-3xl text-gray-900;
+}
 
-  .view-layout-title-busy {
-    @apply animate-pulse inline text-xl md:text-3xl text-gray-200;
-  }
+.view-layout-title-busy {
+  @apply animate-pulse inline text-xl md:text-3xl text-gray-200;
+}
 
-  .sidebar .view-layout-title-busy {
-    @apply animate-pulse inline text-xl md:text-3xl text-gray-400;
-  }
+.sidebar .view-layout-title-busy {
+  @apply animate-pulse inline text-xl md:text-3xl text-gray-400;
+}
 
-  .meta-container {
-    @apply mt-1 ml-1 hidden h-0 w-0 md:w-full md:flex md:flex-wrap opacity-75;
-  }
+.meta-container {
+  @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;
-  }
+.sidebar .meta-container {
+  @apply text-gray-900;
+}
 
-  .meta-item-container {
-    @apply flex items-center mr-2;
-  }
+.meta-item-container {
+  @apply flex items-center mr-2;
+}
 
-  .meta-icon {
-    @apply text-sm mr-1;
-  }
+.meta-icon {
+  @apply text-sm mr-1;
+}
 
-  .meta-text {
-    @apply text-xs mr-1;
-  }
+.meta-text {
+  @apply text-xs mr-1;
+}
 
-  .search-container {
-    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 focus:shadow hover:shadow border border-gray-300;
-  }
+.search-container {
+  @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 focus:shadow hover:shadow border border-gray-300;
+}
 /* 
-  .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 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 w-64 rounded-lg 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-input {
+  @apply w-64 rounded-lg 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;
-  }
+.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;
+}

package/src/styles.css

@@ -7,7 +7,6 @@
 @import './assets/styles/tab-group.css';
 
 @import './assets/styles/shell-sidebar.css';
-@import './assets/styles/shell-sidebar-header.css';
 @import './assets/styles/shell-sidebar-layout.css';
 
 @import './assets/styles/notifications-indicator.component.css';
@@ -22,7 +21,6 @@
 @import './assets/styles/list-view.css';
 @import './assets/styles/model-view-layout.css';
 @import './assets/styles/nav-links.css';
-@import './assets/styles/notifications-indicator.component.css';
 @import './assets/styles/pager.css';
 @import './assets/styles/advanced-search.css';
 @import './assets/styles/shell-layout.css';

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

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