@life-cockpit/angular-ui-kit 2.6.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -58,7 +58,7 @@ export class MyComponent {}
|
|
|
58
58
|
|
|
59
59
|
| Component | Selector | Description |
|
|
60
60
|
|-----------|----------|-------------|
|
|
61
|
-
| Accordion | `lc-accordion` | Expandable/collapsible
|
|
61
|
+
| Accordion | `lc-accordion` | Expandable/collapsible panels with optional rich header template (`lcAccordionHeader`) and lazy/deferred body (`lcAccordionContent` + `[lazy]`/`[destroyOnClose]`) |
|
|
62
62
|
| Button | `lc-button` | Primary, secondary, and text buttons |
|
|
63
63
|
| Card | `lc-card` | Content container with elevation |
|
|
64
64
|
| Chat | `lc-chat` | Conversational UI with streaming, custom message templates |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2,
|
|
3
|
-
import { isPlatformBrowser, NgClass, CommonModule,
|
|
2
|
+
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, TemplateRef, Directive, model, contentChild, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, ContentChildren, ContentChild, linkedSignal, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
3
|
+
import { isPlatformBrowser, NgTemplateOutlet, NgClass, CommonModule, NgStyle, SlicePipe } from '@angular/common';
|
|
4
4
|
import * as i1$4 from '@angular/platform-browser';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
6
|
import { HttpClient } from '@angular/common/http';
|
|
@@ -684,6 +684,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
684
684
|
args: [{ selector: 'lc-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [class]=\"computedClasses()\"\n [innerHTML]=\"svgContent()\"\n [style.width]=\"sizeInPixels()\"\n [style.height]=\"sizeInPixels()\"\n></div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.icon-container{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container ::ng-deep svg{width:100%;height:100%;display:block}\n"] }]
|
|
685
685
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
|
|
686
686
|
|
|
687
|
+
/**
|
|
688
|
+
* Marks an `<ng-template>` as the rich header content for an `<lc-accordion>`.
|
|
689
|
+
*
|
|
690
|
+
* When present, the projected template is rendered inside the header button
|
|
691
|
+
* instead of the plain `title` string. The accordion still owns the disclosure
|
|
692
|
+
* chevron, click/keyboard handling and focus ring — the consumer only supplies
|
|
693
|
+
* the (non-interactive) inner content.
|
|
694
|
+
*
|
|
695
|
+
* A11y constraint: the header is itself a `<button>`, so the template must not
|
|
696
|
+
* contain nested interactive elements (no button/link/input). Text, badges and
|
|
697
|
+
* other non-interactive nodes only.
|
|
698
|
+
*
|
|
699
|
+
* @example
|
|
700
|
+
* ```html
|
|
701
|
+
* <lc-accordion variant="flat" chevronPosition="leading">
|
|
702
|
+
* <ng-template lcAccordionHeader>
|
|
703
|
+
* <span class="title">Item label</span>
|
|
704
|
+
* <lc-badge variant="success" size="sm">Done</lc-badge>
|
|
705
|
+
* <span style="margin-left: auto;">12:04</span>
|
|
706
|
+
* </ng-template>
|
|
707
|
+
* <div>Body…</div>
|
|
708
|
+
* </lc-accordion>
|
|
709
|
+
* ```
|
|
710
|
+
*/
|
|
711
|
+
class AccordionHeaderDirective {
|
|
712
|
+
template = inject((TemplateRef));
|
|
713
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
714
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AccordionHeaderDirective, isStandalone: true, selector: "[lcAccordionHeader]", ngImport: i0 });
|
|
715
|
+
}
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
|
|
717
|
+
type: Directive,
|
|
718
|
+
args: [{
|
|
719
|
+
selector: '[lcAccordionHeader]',
|
|
720
|
+
standalone: true,
|
|
721
|
+
}]
|
|
722
|
+
}] });
|
|
723
|
+
|
|
724
|
+
/**
|
|
725
|
+
* Marks an `<ng-template>` as the (optionally lazy) body content for an
|
|
726
|
+
* `<lc-accordion>`.
|
|
727
|
+
*
|
|
728
|
+
* Unlike default `<ng-content>` projection — which Angular always instantiates
|
|
729
|
+
* eagerly — a template referenced through this directive is only stamped out
|
|
730
|
+
* when the accordion decides to render its body. That is what makes
|
|
731
|
+
* `[lazy]="true"` and `[destroyOnClose]="true"` possible: expensive children
|
|
732
|
+
* (HTTP-backed panels, charts, live-polling views) are not created until the
|
|
733
|
+
* panel is first opened.
|
|
734
|
+
*
|
|
735
|
+
* @example
|
|
736
|
+
* ```html
|
|
737
|
+
* <lc-accordion [lazy]="true">
|
|
738
|
+
* <ng-template lcAccordionContent>
|
|
739
|
+
* <expensive-panel [id]="id" />
|
|
740
|
+
* </ng-template>
|
|
741
|
+
* </lc-accordion>
|
|
742
|
+
* ```
|
|
743
|
+
*/
|
|
744
|
+
class AccordionContentDirective {
|
|
745
|
+
template = inject((TemplateRef));
|
|
746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
747
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AccordionContentDirective, isStandalone: true, selector: "[lcAccordionContent]", ngImport: i0 });
|
|
748
|
+
}
|
|
749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionContentDirective, decorators: [{
|
|
750
|
+
type: Directive,
|
|
751
|
+
args: [{
|
|
752
|
+
selector: '[lcAccordionContent]',
|
|
753
|
+
standalone: true,
|
|
754
|
+
}]
|
|
755
|
+
}] });
|
|
756
|
+
|
|
757
|
+
/** Unique id source for header/panel wiring (aria-controls / aria-labelledby). */
|
|
758
|
+
let accordionUid = 0;
|
|
687
759
|
/**
|
|
688
760
|
* Accordion component for collapsible content sections.
|
|
689
761
|
*
|
|
@@ -691,19 +763,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
691
763
|
* - Expandable/collapsible content panels
|
|
692
764
|
* - Two-way binding for expanded state
|
|
693
765
|
* - Animated expand/collapse transitions
|
|
694
|
-
* -
|
|
695
|
-
* -
|
|
766
|
+
* - Plain-string `title` **or** a rich projected header (`lcAccordionHeader`)
|
|
767
|
+
* - Eager `<ng-content>` body **or** lazy/destroyable template body
|
|
768
|
+
* (`lcAccordionContent` + `[lazy]` / `[destroyOnClose]`)
|
|
769
|
+
* - Accessible: header is a real `<button>` with `aria-expanded` /
|
|
770
|
+
* `aria-controls`, keyboard support, and a visible focus ring
|
|
696
771
|
*
|
|
697
|
-
* @example
|
|
772
|
+
* @example Plain (unchanged, fully backward compatible)
|
|
698
773
|
* ```html
|
|
699
774
|
* <lc-accordion title="Section Title" [(expanded)]="isOpen">
|
|
700
775
|
* <p>Collapsible content here</p>
|
|
701
776
|
* </lc-accordion>
|
|
702
777
|
* ```
|
|
778
|
+
*
|
|
779
|
+
* @example Rich header + lazy body
|
|
780
|
+
* ```html
|
|
781
|
+
* <lc-accordion variant="flat" chevronPosition="leading" [lazy]="true">
|
|
782
|
+
* <ng-template lcAccordionHeader>
|
|
783
|
+
* <span class="title">Item label</span>
|
|
784
|
+
* <lc-badge variant="success" size="sm">Done</lc-badge>
|
|
785
|
+
* <span style="margin-left: auto;">12:04</span>
|
|
786
|
+
* </ng-template>
|
|
787
|
+
* <ng-template lcAccordionContent>
|
|
788
|
+
* <expensive-panel />
|
|
789
|
+
* </ng-template>
|
|
790
|
+
* </lc-accordion>
|
|
791
|
+
* ```
|
|
703
792
|
*/
|
|
704
793
|
class AccordionComponent {
|
|
705
|
-
/**
|
|
706
|
-
|
|
794
|
+
/**
|
|
795
|
+
* Title displayed in the accordion header. Optional: when a
|
|
796
|
+
* `lcAccordionHeader` template is projected it takes precedence, and `title`
|
|
797
|
+
* (if set) becomes the header's accessible label fallback.
|
|
798
|
+
*/
|
|
799
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
800
|
+
/**
|
|
801
|
+
* Explicit accessible label for the header button. Use this when the header
|
|
802
|
+
* is a rich template with no meaningful plain-text title. Falls back to
|
|
803
|
+
* `title` when omitted.
|
|
804
|
+
*/
|
|
805
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
707
806
|
/** Whether the accordion is expanded (two-way binding) */
|
|
708
807
|
expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
709
808
|
/** Visual variant */
|
|
@@ -712,9 +811,65 @@ class AccordionComponent {
|
|
|
712
811
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
713
812
|
/** Whether the accordion is disabled */
|
|
714
813
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
814
|
+
/**
|
|
815
|
+
* Where the disclosure chevron sits. `'trailing'` (default) preserves the
|
|
816
|
+
* original layout. `'leading'` puts the chevron first so a right-aligned
|
|
817
|
+
* header element (e.g. a timestamp using `margin-left: auto`) stays pinned to
|
|
818
|
+
* the right edge.
|
|
819
|
+
*/
|
|
820
|
+
chevronPosition = input('trailing', ...(ngDevMode ? [{ debugName: "chevronPosition" }] : /* istanbul ignore next */ []));
|
|
821
|
+
/**
|
|
822
|
+
* When `true`, a `lcAccordionContent` body is not instantiated until the
|
|
823
|
+
* panel is first expanded; once created it is kept in the DOM on collapse.
|
|
824
|
+
* Default `false` = today's behavior (projected immediately). Has no effect
|
|
825
|
+
* on default `<ng-content>` bodies, which Angular always projects eagerly.
|
|
826
|
+
*/
|
|
827
|
+
lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
|
|
828
|
+
/**
|
|
829
|
+
* When `true`, a `lcAccordionContent` body is destroyed on collapse and
|
|
830
|
+
* recreated on the next open. Takes precedence over {@link lazy}.
|
|
831
|
+
*/
|
|
832
|
+
destroyOnClose = input(false, ...(ngDevMode ? [{ debugName: "destroyOnClose" }] : /* istanbul ignore next */ []));
|
|
833
|
+
/** Rich header template, if projected via `lcAccordionHeader`. */
|
|
834
|
+
headerTemplate = contentChild(AccordionHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
|
|
835
|
+
/** Lazy/deferred body template, if projected via `lcAccordionContent`. */
|
|
836
|
+
contentTemplate = contentChild(AccordionContentDirective, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
|
|
837
|
+
/** Stable ids wiring the header button to its panel for screen readers. */
|
|
838
|
+
headerId = `lc-accordion-header-${accordionUid}`;
|
|
839
|
+
panelId = `lc-accordion-panel-${accordionUid++}`;
|
|
840
|
+
/** Latches to `true` the first time the panel is opened (for lazy bodies). */
|
|
841
|
+
hasBeenOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenOpened" }] : /* istanbul ignore next */ []));
|
|
842
|
+
constructor() {
|
|
843
|
+
// Record the first open so lazy bodies can render (and stay) afterwards.
|
|
844
|
+
effect(() => {
|
|
845
|
+
if (this.expanded()) {
|
|
846
|
+
this.hasBeenOpened.set(true);
|
|
847
|
+
}
|
|
848
|
+
});
|
|
849
|
+
}
|
|
850
|
+
/** Accessible label for the header button (explicit override, else title). */
|
|
851
|
+
headerAriaLabel = computed(() => this.ariaLabel() || this.title() || null, ...(ngDevMode ? [{ debugName: "headerAriaLabel" }] : /* istanbul ignore next */ []));
|
|
852
|
+
/**
|
|
853
|
+
* Whether the `lcAccordionContent` body should currently be in the DOM.
|
|
854
|
+
* - `destroyOnClose`: only while expanded.
|
|
855
|
+
* - `lazy`: from the first open onward.
|
|
856
|
+
* - otherwise: always (eager).
|
|
857
|
+
*/
|
|
858
|
+
shouldRenderBody = computed(() => {
|
|
859
|
+
if (this.destroyOnClose())
|
|
860
|
+
return this.expanded();
|
|
861
|
+
if (this.lazy())
|
|
862
|
+
return this.hasBeenOpened();
|
|
863
|
+
return true;
|
|
864
|
+
}, ...(ngDevMode ? [{ debugName: "shouldRenderBody" }] : /* istanbul ignore next */ []));
|
|
715
865
|
/** Computed CSS classes */
|
|
716
866
|
accordionClasses = computed(() => {
|
|
717
|
-
const classes = [
|
|
867
|
+
const classes = [
|
|
868
|
+
'lc-accordion',
|
|
869
|
+
`lc-accordion--${this.variant()}`,
|
|
870
|
+
`lc-accordion--${this.size()}`,
|
|
871
|
+
`lc-accordion--chevron-${this.chevronPosition()}`,
|
|
872
|
+
];
|
|
718
873
|
if (this.expanded())
|
|
719
874
|
classes.push('lc-accordion--expanded');
|
|
720
875
|
if (this.disabled())
|
|
@@ -737,12 +892,12 @@ class AccordionComponent {
|
|
|
737
892
|
}
|
|
738
893
|
}
|
|
739
894
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
740
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AccordionComponent, isStandalone: true, selector: "lc-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronPosition: { classPropertyName: "chevronPosition", publicName: "chevronPosition", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, destroyOnClose: { classPropertyName: "destroyOnClose", publicName: "destroyOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: AccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: AccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"accordionClasses()\">\n <button\n class=\"lc-accordion__header\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <span class=\"lc-accordion__header-content\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n aria-hidden=\"true\"\n ></lc-icon>\n </button>\n\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text-primary);background:transparent;border:none;border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.625rem .875rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.875rem 1.125rem;font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:1.125rem 1.375rem;font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--expanded .lc-accordion__body{padding:.875rem 1.125rem 1rem;opacity:1;transform:translateY(0);transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:.625rem .875rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:1rem 1.375rem 1.25rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
741
896
|
}
|
|
742
897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
743
898
|
type: Component,
|
|
744
|
-
args: [{ selector: 'lc-accordion', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses()\"
|
|
745
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
899
|
+
args: [{ selector: 'lc-accordion', standalone: true, imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses()\">\n <button\n class=\"lc-accordion__header\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <span class=\"lc-accordion__header-content\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n aria-hidden=\"true\"\n ></lc-icon>\n </button>\n\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text-primary);background:transparent;border:none;border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.625rem .875rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.875rem 1.125rem;font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:1.125rem 1.375rem;font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--expanded .lc-accordion__body{padding:.875rem 1.125rem 1rem;opacity:1;transform:translateY(0);transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:.625rem .875rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:1rem 1.375rem 1.25rem}\n"] }]
|
|
900
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronPosition", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], destroyOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "destroyOnClose", required: false }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionHeaderDirective), { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionContentDirective), { isSignal: true }] }] } });
|
|
746
901
|
|
|
747
902
|
class AccordionGroupComponent {
|
|
748
903
|
/** When false (default), only one accordion can be expanded at a time. */
|
|
@@ -15538,5 +15693,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
15538
15693
|
* Generated bundle index. Do not edit.
|
|
15539
15694
|
*/
|
|
15540
15695
|
|
|
15541
|
-
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
15696
|
+
export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
15542
15697
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|