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

package/index.d.ts

@@ -1892,5 +1892,5 @@ declare class IndiceComponentsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<IndiceComponentsModule>;
 }
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepSelectedEvent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 export type { CloseInterceptorFn, IAddress, IAppLanguagesService, IAppLinks, IAppNotifications, IDictionary, IResultSet, IScreenSize, IShellConfig, IValidationProblemDetails, SearchOption, SelectInputOption, Toast, UserSettingKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.4.0-beta.2",
+  "version": "0.4.0-beta.5",
   "description": "Indice common components for Angular v18",
   "repository": {
     "type": "git",
@@ -25,9 +25,10 @@
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
     "@angular/router": ">=20.0.0",
-    "@indice/ng-auth": ">=0.3.5",
+    "@indice/ng-auth": ">=0.3.5 || 0.4.0-beta.4",
     "oidc-client-ts": "^3.0.1",
     "rxjs": ">=7.8.1",
+    "tailwindcss": "^4.1.16",
     "uuid": ">=13.0.0"
   },
   "module": "fesm2022/indice-ng-components.mjs",

package/src/assets/styles/advanced-search.css

@@ -0,0 +1,57 @@
+
+
+  .advanced-search-container {
+
+  }
+
+  .advanced-search-filter {
+    @apply flex gap-6 mb-2 pr-2;
+  }
+
+  .advanced-search-filter-field-container {
+
+  }
+
+  .advanced-search-filter-value-container {
+    @apply flex gap-6 mb-6;
+  }
+
+  .advanced-search-filter-field-label {
+
+  }
+
+  .advanced-search-filter-value-label {
+    @apply block;
+  }
+
+  .advanced-search-filter-operator-container {
+
+  }
+
+  .advanced-search-filter-operator-label {
+    @apply block;
+  }
+
+  .advanced-search-filter-value-input {
+    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  }
+
+  .advanced-search-filter-value-input-daterange-from {
+    @apply  mt-6 p-2;
+  }
+
+  .advanced-search-filter-value-input-daterange-to {
+    @apply  mt-6 p-2;
+  }
+
+  .advanced-search-chips {
+    @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
+  }
+
+  .advanced-search-chips-remove-filter {
+    @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
+  }
+
+  .advanced-search-chips.disabled .advanced-search-chips-remove-filter:active {
+    @apply transform-none;
+  }

package/src/assets/styles/avatar-initials.css

@@ -0,0 +1,37 @@
+
+
+  .avatar-container {
+    @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
+  }
+
+  .avatar-container-large {
+    @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
+  }
+
+  .avatar-text {
+    @apply text-sm font-medium leading-none text-blue-300;
+  }
+
+  .avatar-text-large {
+    @apply text-xl font-medium leading-none text-white;
+  }
+
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.circle img {
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+}
+
+.circle .initials {
+  color: #FFFFFF;
+  font-size: 20px;
+  line-height: 19px;
+  letter-spacing: 0.2625px;
+}

package/src/assets/styles/base.css

@@ -0,0 +1,36 @@
+@reference tailwindcss;
+
+@layer base {
+  html {
+    scroll-behavior: smooth !important;
+  }
+  
+  input {
+    outline: none;
+  }
+  
+  input[type=number] {
+    outline: none;
+  }
+  
+  textarea {
+    outline: none;
+  }
+  
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply text-gray-600;
+  }
+   
+}

package/src/assets/styles/cards.css

@@ -0,0 +1,85 @@
+
+  .card-deck-busy{
+    @apply animate-pulse;
+  }
+  
+  .cards-deck-1 {
+    @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
+  }
+
+  .cards-deck-2 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
+  }
+
+  .cards-deck-3 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
+  }
+
+  .cards-deck-4 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
+  }
+
+  .card {
+    @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
+  }
+
+  .card-body {
+    @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
+  }
+
+  .card-img-top {
+    @apply object-cover w-full h-48;
+  }
+
+  .card-header {
+    @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
+  }
+
+  .card-footer {
+    @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
+  }
+
+  .kpi-tile-title-container {
+    @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
+  }
+
+  .kpi-tile-action {
+    @apply hover:text-gray-500;
+  }
+
+  .kpi-tile-value {
+    @apply text-6xl font-thin my-6;
+  }
+
+  .gallery-deck-1 {
+    @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
+  }
+
+  .gallery-deck-2 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
+  }
+  
+  .gallery-deck-3 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
+  }
+  
+  .gallery-deck-4 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
+  }
+
+  .tile-card-footer {
+    @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4;
+  }
+
+  .tile-card-item-btn {
+    @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none;
+  }
+  
+  .tile-card-item-btn-selected {
+    @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1;
+  }
+
+  .tile-card-item-btn-available {
+    @apply bg-slate-500 hover:bg-slate-700 ring-0;
+  }
+

package/src/assets/styles/collapsible-panel.css

@@ -0,0 +1,24 @@
+
+  .collapsible-panel-container {
+    @apply bg-white border border-gray-200 mb-2;
+  }
+
+  .collapsible-panel-container-shadow {
+    @apply shadow-sm;
+  }
+
+  .collapsible-panel-container-inner {
+    @apply relative border-b border-gray-200;
+  }
+
+  .collapsible-panel-button {
+    @apply w-full px-8 py-6 text-left;
+  }
+
+  .collapsible-panel-button-content-container {
+    @apply flex items-center justify-between;
+  }
+
+  .collapsible-panel-content-container {
+    @apply relative overflow-hidden transition-all duration-700;
+  }

package/src/assets/styles/combobox.css

@@ -0,0 +1,28 @@
+
+    .combobox-wrapper {
+        @apply relative mt-1;
+    }
+
+    .combobox-input {
+        @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+    }
+
+    .combobox-icons {
+        @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
+    }
+
+    .combobox-results {
+        @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm;
+    }
+
+    .combobox-default-item-template {
+        @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
+    }
+
+    .combobox-selected-item-wrapper {
+        @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
+    }
+
+    .combobox-selected-item-remove-btn {
+        @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
+    }

package/src/assets/styles/components.css

@@ -0,0 +1,36 @@
+
+
+  .md-visible {
+    @apply hidden md:block;
+  }
+
+  .btn-outline {
+    @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
+  }
+
+  .btn-outline:disabled {
+    @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
+  }
+
+
+  .btn-view-header {
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
+  }
+
+
+  .sidebar .btn-view-header {
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
+  }
+
+  .btn-form-view-header {
+    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+  }
+
+  .btn-form-view-header-search {
+    @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+  }
+
+  .selected-view-indicator {
+    @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
+  }
+

package/src/assets/styles/date-picker.component.css

@@ -0,0 +1,68 @@
+.datepicker-container {
+    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 border border-gray-300;
+}
+
+.datepicker-input {
+    @apply w-full 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;
+}
+
+.datepicker-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;
+}
+
+.datepicker-background {
+    @apply bg-gray-100 mt-10 rounded-lg shadow-md p-4 left-0 z-50 w-full;
+}
+.datepicker-btn-wrapper {
+    @apply flex justify-between items-center mb-2;
+}
+
+.datepicker-selected-month {
+    @apply text-lg font-bold text-gray-800;
+}
+.datepicker-selected-year {
+    @apply ml-1 text-lg text-gray-600 font-normal;
+}
+.datepicker-nav-btn {
+    @apply transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25;
+}
+.datepicker-nav-btn svg {
+    @apply h-6 w-6 text-gray-500 inline-flex;
+}
+.datepicker-wrapper {
+    @apply flex flex-wrap mb-3 -mx-1;
+}
+.datepicker-day-name {
+    @apply text-gray-800 font-medium text-center text-sm uppercase;
+}
+.datepicker-content-wrapper {
+    @apply flex flex-wrap -mx-1 items-center;
+}
+.datepicker-year {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
+.datepicker-year.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-year.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
+
+.datepicker-blank-days {
+    @apply text-center border p-1 border-transparent text-sm opacity-50;
+}
+
+.datepicker-days {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
+
+.datepicker-days.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-days.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
+
+.datepicker-days.out-of-range{
+    @apply cursor-not-allowed opacity-25;
+}

package/src/assets/styles/drop-down-menu.css

@@ -0,0 +1,49 @@
+
+  .dropdown-container {
+    @apply relative w-auto;
+  }
+
+  .dropdown-button {
+    @apply bg-white block w-full rounded-lg border pl-3 py-1.5 pr-10 ring-0 placeholder:text-gray-300 focus:border-gray-500 hover:border-gray-400
+    text-sm leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-300;
+  }
+
+  .dropdown-selected-text {
+    @apply truncate w-full inline-flex items-start place-items-center;
+  }
+
+  .dropdown-button-icon {
+    @apply absolute inset-y-0 right-1 flex items-center pointer-events-none;
+  }
+
+  .dropdown-arrow {
+    @apply h-5 w-5 text-gray-600;
+  }
+
+  .dropdown-ul {
+    @apply absolute z-50 mt-1 w-auto bg-white shadow max-h-60 rounded-lg py-1 text-xs ring-1 ring-gray-300 ring-black/5 focus:outline-none overflow-x-hidden;
+  }
+
+  .dropdown-li {
+    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max;
+  }
+
+  .dropdown-li-selected {
+    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max;
+  }
+
+  .dropdown-li-text {
+    @apply font-normal truncate inline-flex items-center ;
+  }
+
+  .dropdown-li-selected-text {
+    @apply font-semibold truncate inline-flex items-center ;
+  }
+
+  .dropdown-li-selected-indicator-container {
+    @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4;
+  }
+
+  .dropdown-li-selected-indicator {
+    @apply h-5 w-5;
+  }

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

@@ -0,0 +1,52 @@
+
+  .form-layout-container {
+    @apply bg-white shadow-sm border border-gray-200 rounded-xl;
+  }
+
+  .form-header {
+    @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between;
+  }
+
+  .form-header-inner {
+    @apply flex-1 min-w-0;
+  }
+
+  .form-header-image {
+    @apply w-12 h-12;
+  }
+
+  .form-title {
+    @apply text-lg leading-6 font-medium text-gray-900;
+  }
+
+  .form-subtitle {
+    @apply mt-1 max-w-2xl text-sm text-gray-500;
+  }
+
+  .form-header-actions {
+    @apply mt-4 flex md:mt-0 md:ml-4;
+  }
+
+  .form-content-container {
+    @apply px-4 py-4;
+  }
+
+  .form-content-container-inner {
+    @apply flex flex-col pt-4;
+  }
+
+  .form-header-search-input {
+    @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none;
+  }
+
+  .field-label {
+    @apply block text-sm py-2 font-medium text-gray-500;
+  }
+
+  .field-info {
+    @apply mt-2 text-xs text-gray-400 py-2;
+  }
+
+  .form-actions {
+    @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl;
+  }