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

package/src/assets/styles/side-pane.css

@@ -0,0 +1,50 @@
+
+
+  .side-pane-outer-container {
+    @apply fixed inset-0 overflow-hidden z-40;
+  }
+
+  .side-pane-overlay {
+    @apply absolute bg-gray-500 bg-black/25 inset-0;
+  }
+
+  .side-pane-overlay-opacity-0 {
+    @apply absolute bg-gray-500 bg-black/0 inset-0;
+  }
+
+  .side-pane-overlay-opacity-50 {
+    @apply absolute bg-gray-500 bg-black/50 inset-0;
+  }
+
+  .side-pane-container {
+    @apply fixed inset-y-0 right-0 max-w-full flex transition-all duration-200 ease-in-out;
+  }
+
+  .side-pane-container-inner {
+    @apply w-screen max-w-md;
+  }
+
+  .side-pane-box-size {
+    @apply w-screen max-w-2xl;
+  }
+
+  .side-pane-box-size-25 {
+    @apply w-screen max-w-2xl;
+  }
+
+  .side-pane-box-size-50 {
+    @apply w-screen max-w-3xl;
+  }
+
+  .side-pane-box-size-75 {
+    @apply w-screen max-w-4xl;
+  }
+
+  
+  .side-pane-box-size-100 {
+    @apply w-screen max-w-full;
+  }
+
+  .side-pane {
+    @apply flex flex-col bg-white shadow-xl overflow-y-hidden;
+  }

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

@@ -0,0 +1,57 @@
+
+  .side-view-layout-size-box {
+    @apply h-screen;
+  }
+
+  .side-view-layout-container {
+    @apply h-full flex flex-col shadow-xl bg-gray-900;
+  }
+
+  .side-view-layout-container-inner {
+    @apply min-h-0 flex-1 flex flex-col pt-6 overflow-y-hidden;
+  }
+
+  .side-view-layout-header-margins {
+    @apply px-4 sm:px-6;
+  }
+
+  .side-view-layout-header-container {
+    @apply flex items-start justify-between;
+  }
+
+  .side-view-layout-header-title {
+    @apply text-lg font-medium text-white;
+  }
+
+  .side-view-layout-close-button-container {
+    @apply ml-3 h-7 flex items-center;
+  }
+
+  .side-view-layout-close-button {
+    @apply rounded-sm text-white hover:text-gray-200 focus:outline-none focus:ring-1 focus:ring-gray-300;
+  }
+
+  .side-view-layout-close-button-icon {
+    @apply h-6 w-6;
+  }
+
+  .side-view-layout-content-container {
+    @apply bg-white mt-6 relative flex-1 px-6 overflow-y-auto;
+  }
+
+  .side-view-layout-actions-container {
+    @apply flex-shrink-0 px-4 py-4 flex bg-gray-100 justify-end;
+  }
+
+  .side-view-layout-action-button-cancel {
+    @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500;
+  }
+
+  .side-view-layout-action-button-submit {
+    @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500;
+  }
+
+  .side-view-layout-action-button-submit:disabled {
+    @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 cursor-not-allowed;
+  }
+

package/src/assets/styles/stepper.css

@@ -0,0 +1,170 @@
+
+    /* 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;
+    }

package/src/assets/styles/tab-group.css

@@ -0,0 +1,28 @@
+
+    .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-gray-500 text-gray-900 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;
+    }

package/src/assets/styles/toast.css

@@ -0,0 +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-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-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 {
+    @apply flex items-start;
+  }
+
+  .toast-icon {
+    @apply flex-shrink-0;
+  }
+
+  .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-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;
+  }
+
+  @keyframes move {
+    from {
+      opacity: 0;
+      --tw-translate-y: 0.5rem;
+      transform: translateY(0.5rem);
+    }
+
+    to {
+      --tw-translate-y: 0;
+      transform: translateY(0);
+      opacity: 100;
+    }
+  }
+
+  @keyframes close {
+    from {
+      opacity: 100;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }

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

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

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

@@ -0,0 +1,45 @@
+
+    .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

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

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

@@ -0,0 +1,89 @@
+@reference tailwindcss;
+
+  .view-container {
+    @apply mt-4 sm:mt-5 flex flex-col;
+  }
+
+  .view-container-fluid {
+    @apply sm:px-0 ;
+  }
+
+  .view-layout-paddings {
+    @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-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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+  
+  .sidebar .meta-container {
+    @apply text-gray-900;
+  }
+
+  .meta-item-container {
+    @apply flex items-center mr-2;
+  }
+
+  .meta-icon {
+    @apply text-sm 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-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-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

@@ -0,0 +1,51 @@
+@import './tailwindcss.css';
+@import './assets/styles/base.css';
+
+@import './assets/styles/avatar-initials.css';
+@import './assets/styles/toggle.css';
+@import './assets/styles/modal.css';
+@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';
+@import './assets/styles/language-selection.component.css';
+@import './assets/styles/cards.css';
+@import './assets/styles/collapsible-panel.css';
+@import './assets/styles/components.css';
+@import './assets/styles/date-picker.component.css';
+@import './assets/styles/drop-down-menu.css';
+@import './assets/styles/form-layout.css';
+@import './assets/styles/indice-ng-icons-inline.css';
+@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';
+@import './assets/styles/side-pane.css';
+@import './assets/styles/side-view-layout.css';
+@import './assets/styles/stepper.css';
+@import './assets/styles/tab-group.css';
+@import './assets/styles/toast.css';
+@import './assets/styles/toggle.css';
+@import './assets/styles/view-layout.css';
+@import './assets/styles/combobox.css';
+@import './assets/styles/toggle-button.component.css';
+@import './assets/styles/toggle-buttons-list.component.css';
+@import './assets/styles/progress-bar.component.css';
+
+.modal-active {
+  overflow: hidden;
+}
+
+button:active {
+  transform: translateY(2px);
+}
+
+a:active {
+  transform: translateY(2px);
+}

package/src/tailwindcss.css

@@ -0,0 +1 @@
+@import 'tailwindcss';