@indice/ng-components 0.2.139 → 0.2.141

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

@@ -1,232 +0,0 @@
-@layer components {
-
-  .app-logo {
-    @apply h-8 w-8;
-  }
-
-  .shell-container {
-    @apply antialiased font-sans bg-gray-100;
-  }
-
-  .shell-header-container {
-    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
-  }
-
-  .shell-header-container-inner {
-    @apply max-w-7xl mx-auto;
-  }
-
-  .shell-header-container-inner-fluid {
-    @apply w-full mx-auto;
-  }
-
-  .shell-content-container {
-    @apply mx-auto -mt-28;
-  }
-
-  .shell-content-container-no-header {
-    /* overide this style in your app  */
-    @apply mx-auto ;
-  }
-
-  .shell-content-container-inner {
-    @apply max-w-7xl mx-auto px-4 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;
-  }
-
-  .shell-header-border {
-    @apply border-b border-gray-700;
-  }
-
-  .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 gap-3 items-center;
-  }
-
-  .shell-header-profile .shell-header-profile-userName {
-    @apply 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-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
-  }
-
-  .shell-header-profile-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-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-sm 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/side-pane.css

@@ -1,46 +0,0 @@
-@layer components {
-
-  .side-pane-outer-container {
-    @apply fixed inset-0 overflow-hidden z-40;
-  }
-
-  .side-pane-overlay {
-    @apply absolute bg-gray-500 bg-opacity-25 inset-0;
-  }
-
-  .side-pane-overlay-opacity-0 {
-    @apply absolute bg-gray-500 bg-opacity-0 inset-0;
-  }
-
-  .side-pane-overlay-opacity-50 {
-    @apply absolute bg-gray-500 bg-opacity-50 inset-0;
-  }
-
-  .side-pane-container {
-    @apply fixed inset-y-0 right-0 sm:pl-10 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-xl;
-  }
-
-  .side-pane-box-size-50 {
-    @apply w-screen max-w-3xl;
-  }
-
-  .side-pane-box-size-75 {
-    @apply w-screen max-w-4xl;
-  }
-
-  .side-pane {
-    @apply flex flex-col bg-white shadow-xl overflow-y-hidden;
-  }
-}

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

@@ -1,58 +0,0 @@
-@layer components {
-  .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/toast.css

@@ -1,72 +0,0 @@
-@layer components {
-  .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-sm pointer-events-auto ring-1 ring-black ring-opacity-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.css

@@ -1,26 +0,0 @@
-@layer components {
-  .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

@@ -1,58 +0,0 @@
-@layer components {
-
-  .view-container {
-    @apply mt-8 sm:mt-5 flex flex-col;
-  }
-
-  .view-container-fluid {
-    @apply sm:px-0 ;
-  }
-
-  .view-layout-paddings {
-    @apply pt-6 pb-4 sm:py-6;
-  }
-
-  .view-layout-title-container {
-    @apply flex text-white flex-row justify-start ;
-  }
-
-  .view-layout-title-container-inner {
-    @apply flex-1 min-w-0;
-  }
-
-  .title-icon {
-    @apply text-2xl md:text-xl text-white font-thin mr-1;
-  }
-
-  .view-layout-title {
-    @apply inline text-xl md:text-3xl text-white;
-  }
-
-  .view-layout-title-busy {
-    @apply animate-pulse inline text-xl md:text-3xl text-gray-200;
-  }
-
-  .meta-container {
-    @apply ml-1 mt-2 flex flex-row sm:flex-row sm:flex-wrap space-x-2 sm:space-x-4;
-  }
-
-  .meta-item-container {
-    @apply flex items-center;
-  }
-
-  .meta-icon {
-    @apply text-sm mr-1;
-  }
-
-  .meta-text {
-    @apply text-xs mr-1;
-  }
-
-  .search-container {
-    @apply relative text-gray-400 focus-within:text-gray-600 ml-2 hover:shadow-sm hover:bg-gray-900;
-  }
-
-  .search-input {
-    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
-  }
-}

package/src/lib/controls/avatar-initials/avatar-initials.component.html

@@ -1,3 +0,0 @@
-<div [ngClass]="large ? 'avatar-container-large': 'avatar-container'">
-    <span [ngClass]="large ? 'avatar-text-large': 'avatar-text'">{{ initials }}</span>
-</div>

package/src/lib/controls/avatar-initials/avatar-initials.component.ts

@@ -1,47 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-avatar-initials',
-  templateUrl: './avatar-initials.component.html'
-})
-export class AvatarInitialsComponent implements OnInit {
-  @Input()
-  public name: string | null | undefined;
-  @Input()
-  public large = false;
-  public initials?: string;
-  public circleColor!: string;
-  private colors = [
-    '#EB7181', // red
-    '#468547', // green
-    '#FFD558', // yellow
-    '#3670B2', // blue
-  ];
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.createInititals();
-    const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
-    // assign this to a class if you want to randomly change background colors of the circle.
-    this.circleColor = this.colors[randomIndex];
-  }
-
-  private createInititals(): void {
-    if (this.name) {
-      let initials = '';
-      for (let i = 0; i < this.name.length; i++) {
-        if (this.name.charAt(i) === ' ') {
-          continue;
-        }
-        if (this.name.charAt(i) === this.name.charAt(i).toUpperCase()) {
-          initials += this.name.charAt(i);
-          if (initials.length === 2) {
-            break;
-          }
-        }
-      }
-      this.initials = initials;
-    }
-  }
-}

package/src/lib/controls/collapsible-panel/collapsible-panel.component.html

@@ -1,15 +0,0 @@
-<div class="collapsible-panel-container">
-  <div class="collapsible-panel-container-shadow">
-    <div class="collapsible-panel-container-inner">
-      <button type="button" class="collapsible-panel-button" (click)="visible = !visible">
-        <div class="collapsible-panel-button-content-container">
-          <span>{{ title }} </span>
-          <span class="ico-plus"></span>
-        </div>
-      </button>
-      <div class="collapsible-panel-content-container" *ngIf="visible">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/controls/collapsible-panel/collapsible-panel.component.ts

@@ -1,16 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-collapsible-panel',
-  templateUrl: './collapsible-panel.component.html'
-})
-export class CollapsiblePanelComponent implements OnInit {
-  @Input() title: string | null = null;
-  public visible = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}