@indice/ng-components 0.5.0-beta.0 → 0.5.0-beta.10

package/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, NgZone, SimpleChanges, QueryList, TemplateRef, AfterContentInit, AfterContentChecked, AfterViewChecked, ChangeDetectorRef, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Type, StaticProvider, AfterViewInit, PipeTransform, InjectionToken, Renderer2, RendererFactory2, ModuleWithProviders } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import * as i60 from '@angular/router';
-import { Route, Params, Router, ActivatedRoute, Event as Event$1 } from '@angular/router';
+import { ActivatedRouteSnapshot, Route, Params, Router, ActivatedRoute, Event as Event$1 } from '@angular/router';
 import * as i62 from '@angular/forms';
 import { ControlValueAccessor, AbstractControl } from '@angular/forms';
 import * as _indice_ng_components from '@indice/ng-components';
@@ -174,7 +174,12 @@ interface IShellConfig {
     showPictureOnHeader?: boolean;
 }
 interface IBreadcrumbLabelProcessor {
-    process(route: Route): string;
+    process(context: BreadcrumbContext): string | Observable<string>;
+}
+interface BreadcrumbContext {
+    routeSnapshot?: ActivatedRouteSnapshot;
+    route?: Route;
+    defaultValue?: string;
 }
 declare enum ShellLayoutType {
     Stacked = "Stacked",
@@ -300,9 +305,9 @@ declare class PagerComponent implements OnInit, OnChanges {
 }
 
 declare class BreadcrumbItem {
-    title?: string | undefined;
+    title?: (string | Observable<string>) | undefined;
     url?: string | undefined;
-    constructor(title?: string | undefined, url?: string | undefined);
+    constructor(title?: (string | Observable<string>) | undefined, url?: string | undefined);
     level: number;
     get urlSegments(): string[] | undefined;
 }
@@ -347,6 +352,7 @@ declare class BreadcrumbComponent implements OnInit {
     private _breadcrumbService;
     constructor(_breadcrumbService: BreadcrumbService);
     ngOnInit(): void;
+    isAsync(value: any): boolean;
     breadcrumb: BreadcrumbItem[];
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "lib-breadcrumb", never, {}, {}, never, never, false, never>;
@@ -1906,4 +1912,4 @@ declare class IndiceComponentsModule {
 }
 
 export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BREADCRUMB_LABEL_RESOLVER, 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, IBreadcrumbLabelProcessor, IDictionary, IResultSet, IScreenSize, IShellConfig, IValidationProblemDetails, SearchOption, SelectInputOption, Toast, UserSettingKey };
+export type { BreadcrumbContext, CloseInterceptorFn, IAddress, IAppLanguagesService, IAppLinks, IAppNotifications, IBreadcrumbLabelProcessor, IDictionary, IResultSet, IScreenSize, IShellConfig, IValidationProblemDetails, SearchOption, SelectInputOption, Toast, UserSettingKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.5.0-beta.0",
+  "version": "0.5.0-beta.10",
   "description": "Indice common components for Angular v20",
   "repository": {
     "type": "git",

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

@@ -1,39 +1,39 @@
-.advanced-search-filter {
-  @apply flex gap-6 mb-2 pr-2;
-}
-
-.advanced-search-filter-value-container {
-  @apply flex gap-6 mb-6;
-}
-
-.advanced-search-filter-value-label {
-  @apply block;
-}
-
-.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;
-}
+.advanced-search-filter {
+  @apply flex gap-6 mb-2 pr-2;
+}
+
+.advanced-search-filter-value-container {
+  @apply flex gap-6 mb-6;
+}
+
+.advanced-search-filter-value-label {
+  @apply block;
+}
+
+.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

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

@@ -1,36 +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;
-  }
-   
-}
+@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

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

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

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

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