@leanix/components 0.4.91 → 0.4.93
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/esm2022/lib/tab-ui/components/tab/tab.component.mjs +47 -8
- package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +82 -14
- package/fesm2022/leanix-components.mjs +132 -25
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/tab-ui/components/tab/tab.component.d.ts +18 -5
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +14 -4
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { InjectionToken, Component, Input, ChangeDetectionStrategy, HostBinding,
|
|
|
3
3
|
import * as i1$1 from '@ngx-translate/core';
|
|
4
4
|
import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
5
5
|
import { NgClass, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, CommonModule, formatDate } from '@angular/common';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i3 from '@angular/cdk/portal';
|
|
7
7
|
import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
|
|
8
8
|
import * as i1 from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -30,9 +30,10 @@ import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
|
30
30
|
import * as i1$6 from '@angular/cdk/bidi';
|
|
31
31
|
import * as i1$7 from '@angular/platform-browser';
|
|
32
32
|
import { style, animate, transition, trigger } from '@angular/animations';
|
|
33
|
-
import * as i1$
|
|
33
|
+
import * as i1$8 from '@ncstate/sat-popover';
|
|
34
34
|
import { SatPopover, SatPopoverModule } from '@ncstate/sat-popover';
|
|
35
35
|
import { coerceNumberProperty } from '@angular/cdk/coercion';
|
|
36
|
+
import * as i1$9 from '@angular/router';
|
|
36
37
|
import { RouterLinkActive, RouterLink, RouterModule } from '@angular/router';
|
|
37
38
|
|
|
38
39
|
const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
|
|
@@ -8043,7 +8044,7 @@ class ModalComponent {
|
|
|
8043
8044
|
this.focusTrap.create(hostElement);
|
|
8044
8045
|
}
|
|
8045
8046
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8046
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n </div>\n</ng-template>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type:
|
|
8047
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n </div>\n</ng-template>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
|
|
8047
8048
|
trigger('modal', [
|
|
8048
8049
|
transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
|
|
8049
8050
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
@@ -8315,7 +8316,7 @@ class PopoverComponent {
|
|
|
8315
8316
|
return '';
|
|
8316
8317
|
}
|
|
8317
8318
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$
|
|
8319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$8.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
8319
8320
|
}
|
|
8320
8321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
8321
8322
|
type: Component,
|
|
@@ -8376,7 +8377,7 @@ class PopoverClickDirective {
|
|
|
8376
8377
|
closePopover() {
|
|
8377
8378
|
this.onMouseLeave.next();
|
|
8378
8379
|
}
|
|
8379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$
|
|
8380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8380
8381
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
|
|
8381
8382
|
}
|
|
8382
8383
|
__decorate([
|
|
@@ -8389,7 +8390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8389
8390
|
selector: '[lxPopoverClick]',
|
|
8390
8391
|
standalone: true
|
|
8391
8392
|
}]
|
|
8392
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8393
|
+
}], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
|
|
8393
8394
|
type: Input
|
|
8394
8395
|
}], pinned$: [], closePopover: [{
|
|
8395
8396
|
type: HostListener,
|
|
@@ -8456,7 +8457,7 @@ class PopoverHoverDirective {
|
|
|
8456
8457
|
closePopover(skipDelay = this.skipCloseDelay) {
|
|
8457
8458
|
this.onMouseLeave.next({ skipDelay });
|
|
8458
8459
|
}
|
|
8459
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$
|
|
8460
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8460
8461
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
|
|
8461
8462
|
}
|
|
8462
8463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, decorators: [{
|
|
@@ -8466,7 +8467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8466
8467
|
selector: '[lxPopoverHover]',
|
|
8467
8468
|
standalone: true
|
|
8468
8469
|
}]
|
|
8469
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8470
|
+
}], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
|
|
8470
8471
|
type: Input
|
|
8471
8472
|
}], skipCloseDelay: [{
|
|
8472
8473
|
type: Input
|
|
@@ -8494,7 +8495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8494
8495
|
class TabComponent {
|
|
8495
8496
|
set isActive(value) {
|
|
8496
8497
|
this._isActive = value;
|
|
8497
|
-
this.cd
|
|
8498
|
+
this.cd?.markForCheck();
|
|
8498
8499
|
}
|
|
8499
8500
|
get isActive() {
|
|
8500
8501
|
if (this.routerLinkActive) {
|
|
@@ -8502,7 +8503,9 @@ class TabComponent {
|
|
|
8502
8503
|
}
|
|
8503
8504
|
return this._isActive;
|
|
8504
8505
|
}
|
|
8505
|
-
constructor(cd) {
|
|
8506
|
+
constructor(router, activatedRoute, cd) {
|
|
8507
|
+
this.router = router;
|
|
8508
|
+
this.activatedRoute = activatedRoute;
|
|
8506
8509
|
this.cd = cd;
|
|
8507
8510
|
this.label = '';
|
|
8508
8511
|
this.routerLinkActiveOptions = { exact: true };
|
|
@@ -8512,16 +8515,47 @@ class TabComponent {
|
|
|
8512
8515
|
this.background = 'white';
|
|
8513
8516
|
this.disabled = false;
|
|
8514
8517
|
this.switch = new EventEmitter();
|
|
8518
|
+
this.keyDownAction = new EventEmitter();
|
|
8515
8519
|
this._isActive = false;
|
|
8516
8520
|
this.tabPanelId = uniqueId('panelId');
|
|
8521
|
+
this.tabId = uniqueId('tab');
|
|
8522
|
+
}
|
|
8523
|
+
select() {
|
|
8524
|
+
if (this.tabLink) {
|
|
8525
|
+
const formattedTabLink = typeof this.tabLink === 'string' ? [this.tabLink] : this.tabLink;
|
|
8526
|
+
this.router.navigate(formattedTabLink, { relativeTo: this.activatedRoute }).then(() => {
|
|
8527
|
+
this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
|
|
8528
|
+
});
|
|
8529
|
+
}
|
|
8530
|
+
else {
|
|
8531
|
+
this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
|
|
8532
|
+
}
|
|
8533
|
+
this.isActive = true;
|
|
8534
|
+
}
|
|
8535
|
+
setFocus() {
|
|
8536
|
+
this.tabElement?.nativeElement?.focus();
|
|
8517
8537
|
}
|
|
8518
|
-
|
|
8519
|
-
|
|
8538
|
+
handleKeyDown(event) {
|
|
8539
|
+
switch (event.code) {
|
|
8540
|
+
case 'Enter':
|
|
8541
|
+
case 'Space':
|
|
8542
|
+
/**
|
|
8543
|
+
* We are preventing the default browser behavior when the `SPACE` key is pressed, in which
|
|
8544
|
+
* case the browser would scroll down the page.
|
|
8545
|
+
*/
|
|
8546
|
+
event.preventDefault();
|
|
8547
|
+
this.select();
|
|
8548
|
+
break;
|
|
8549
|
+
}
|
|
8550
|
+
this.keyDownAction.emit(event);
|
|
8551
|
+
}
|
|
8552
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token: i1$9.Router }, { token: i1$9.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }], ngImport: i0, template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n tabindex=\"-1\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8520
8554
|
}
|
|
8521
8555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, decorators: [{
|
|
8522
8556
|
type: Component,
|
|
8523
|
-
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\n
|
|
8524
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
|
|
8557
|
+
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n tabindex=\"-1\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"] }]
|
|
8558
|
+
}], ctorParameters: () => [{ type: i1$9.Router }, { type: i1$9.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
|
|
8525
8559
|
type: Input
|
|
8526
8560
|
}], label: [{
|
|
8527
8561
|
type: Input
|
|
@@ -8545,12 +8579,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8545
8579
|
type: Input
|
|
8546
8580
|
}], switch: [{
|
|
8547
8581
|
type: Output
|
|
8582
|
+
}], keyDownAction: [{
|
|
8583
|
+
type: Output
|
|
8548
8584
|
}], content: [{
|
|
8549
8585
|
type: ViewChild,
|
|
8550
8586
|
args: ['contentTemplate', { static: true }]
|
|
8551
8587
|
}], routerLinkActive: [{
|
|
8552
8588
|
type: ViewChild,
|
|
8553
8589
|
args: [RouterLinkActive]
|
|
8590
|
+
}], tabElement: [{
|
|
8591
|
+
type: ViewChild,
|
|
8592
|
+
args: ['tabElement']
|
|
8554
8593
|
}] } });
|
|
8555
8594
|
|
|
8556
8595
|
class TabGroupComponent {
|
|
@@ -8560,13 +8599,22 @@ class TabGroupComponent {
|
|
|
8560
8599
|
get activeTabPortal() {
|
|
8561
8600
|
return this.tabs[this.selectedIndex]?.content;
|
|
8562
8601
|
}
|
|
8563
|
-
|
|
8602
|
+
get tabIds() {
|
|
8603
|
+
return this.tabs.map((t) => t.tabId);
|
|
8604
|
+
}
|
|
8605
|
+
constructor(cd, ngZone) {
|
|
8564
8606
|
this.cd = cd;
|
|
8607
|
+
this.ngZone = ngZone;
|
|
8565
8608
|
this.isCentered = false;
|
|
8566
8609
|
this.selectedIndex = 0;
|
|
8610
|
+
this.ariaTabPattern = 'manualActivation';
|
|
8567
8611
|
this.indexChange = new EventEmitter();
|
|
8612
|
+
this.focusedIndex = 0;
|
|
8568
8613
|
this.destroyed$ = new Subject();
|
|
8569
8614
|
}
|
|
8615
|
+
ngOnInit() {
|
|
8616
|
+
this.focusedIndex = this.selectedIndex;
|
|
8617
|
+
}
|
|
8570
8618
|
ngOnChanges(changes) {
|
|
8571
8619
|
const tab = this.tabs[this.selectedIndex];
|
|
8572
8620
|
if (changes['selectedIndex'] && !changes['selectedIndex'].isFirstChange() && tab) {
|
|
@@ -8577,45 +8625,104 @@ class TabGroupComponent {
|
|
|
8577
8625
|
if (this.tabs[0]) {
|
|
8578
8626
|
this.tabs[0].noLeftMarginForFirstTab = true;
|
|
8579
8627
|
}
|
|
8580
|
-
|
|
8581
|
-
|
|
8582
|
-
|
|
8583
|
-
|
|
8628
|
+
this.ngZone.runOutsideAngular(() => {
|
|
8629
|
+
// Use setTimeout to let RouterLinkActive enable isActive method (used on tabs)
|
|
8630
|
+
setTimeout(() => {
|
|
8631
|
+
this.navigateToInitialTab();
|
|
8632
|
+
});
|
|
8633
|
+
});
|
|
8584
8634
|
const listenToTabsSwitch = (tabs) => merge(...tabs.map((tab) => tab.switch.asObservable().pipe(map(() => tab))));
|
|
8585
8635
|
this.tabsQueryList?.changes
|
|
8586
8636
|
.pipe(startWith(null), switchMap(() => listenToTabsSwitch(this.tabs)), takeUntil(this.destroyed$))
|
|
8587
8637
|
.subscribe((tab) => {
|
|
8588
8638
|
this.switchTo(tab);
|
|
8589
8639
|
});
|
|
8640
|
+
this.tabs.forEach((tab) => {
|
|
8641
|
+
tab.keyDownAction.pipe(takeUntil(this.destroyed$)).subscribe((event) => {
|
|
8642
|
+
this.handleKeyDown(tab, event);
|
|
8643
|
+
});
|
|
8644
|
+
});
|
|
8590
8645
|
}
|
|
8591
8646
|
ngOnDestroy() {
|
|
8592
8647
|
this.destroyed$.next();
|
|
8648
|
+
this.destroyed$.complete();
|
|
8649
|
+
}
|
|
8650
|
+
onFocusOut(event) {
|
|
8651
|
+
if (!this.tabListElement?.nativeElement?.contains(event.relatedTarget)) {
|
|
8652
|
+
// resync focused index on selected index when leaving tabs
|
|
8653
|
+
this.focusedIndex = this.selectedIndex;
|
|
8654
|
+
}
|
|
8593
8655
|
}
|
|
8594
8656
|
switchTo(tab) {
|
|
8595
8657
|
this.tabsQueryList?.forEach((t, index) => {
|
|
8596
|
-
t.isActive = t === tab;
|
|
8658
|
+
t.isActive = t.tabId === tab.tabId;
|
|
8597
8659
|
if (t.isActive) {
|
|
8598
8660
|
this.selectedIndex = index;
|
|
8661
|
+
this.focusedIndex = index;
|
|
8599
8662
|
this.indexChange.emit(index);
|
|
8600
8663
|
}
|
|
8601
8664
|
});
|
|
8602
8665
|
this.cd.markForCheck();
|
|
8603
8666
|
}
|
|
8604
|
-
|
|
8605
|
-
|
|
8667
|
+
handleKeyDown(_tab, event) {
|
|
8668
|
+
switch (event.code) {
|
|
8669
|
+
case 'ArrowRight':
|
|
8670
|
+
const newTabIndex = (this.focusedIndex + 1) % this.tabs.length;
|
|
8671
|
+
this.navigateToTab(newTabIndex);
|
|
8672
|
+
break;
|
|
8673
|
+
case 'ArrowLeft':
|
|
8674
|
+
const previousTabIndex = this.focusedIndex === 0 ? this.tabs.length - 1 : this.focusedIndex - 1;
|
|
8675
|
+
this.navigateToTab(previousTabIndex);
|
|
8676
|
+
break;
|
|
8677
|
+
case 'Home':
|
|
8678
|
+
event.preventDefault();
|
|
8679
|
+
this.navigateToTab(0);
|
|
8680
|
+
break;
|
|
8681
|
+
case 'End':
|
|
8682
|
+
event.preventDefault();
|
|
8683
|
+
this.navigateToTab(this.tabs.length - 1);
|
|
8684
|
+
break;
|
|
8685
|
+
}
|
|
8686
|
+
}
|
|
8687
|
+
navigateToTab(tabIndex) {
|
|
8688
|
+
const tab = this.tabs[tabIndex];
|
|
8689
|
+
if (!tab) {
|
|
8690
|
+
return;
|
|
8691
|
+
}
|
|
8692
|
+
tab.setFocus();
|
|
8693
|
+
this.focusedIndex = tabIndex;
|
|
8694
|
+
if (this.ariaTabPattern === 'automaticActivation') {
|
|
8695
|
+
tab.select();
|
|
8696
|
+
}
|
|
8697
|
+
}
|
|
8698
|
+
navigateToInitialTab() {
|
|
8699
|
+
const alreadyActivedTabWithLink = this.tabs.find((t) => {
|
|
8700
|
+
return t.tabLink && t.isActive;
|
|
8701
|
+
});
|
|
8702
|
+
// Activated tab by URL takes priority over initial `selectedIndex` input value
|
|
8703
|
+
const initialTab = alreadyActivedTabWithLink || this.tabs[this.selectedIndex];
|
|
8704
|
+
initialTab?.select();
|
|
8705
|
+
}
|
|
8706
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex", ariaTabPattern: "ariaTabPattern" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent, descendants: true }], viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8606
8708
|
}
|
|
8607
8709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
8608
8710
|
type: Component,
|
|
8609
|
-
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul
|
|
8610
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isCentered: [{
|
|
8711
|
+
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"] }]
|
|
8712
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { isCentered: [{
|
|
8611
8713
|
type: Input
|
|
8612
8714
|
}], selectedIndex: [{
|
|
8613
8715
|
type: Input
|
|
8716
|
+
}], ariaTabPattern: [{
|
|
8717
|
+
type: Input
|
|
8614
8718
|
}], indexChange: [{
|
|
8615
8719
|
type: Output
|
|
8616
8720
|
}], tabsQueryList: [{
|
|
8617
8721
|
type: ContentChildren,
|
|
8618
|
-
args: [TabComponent]
|
|
8722
|
+
args: [TabComponent, { descendants: true }]
|
|
8723
|
+
}], tabListElement: [{
|
|
8724
|
+
type: ViewChild,
|
|
8725
|
+
args: ['tabListElement']
|
|
8619
8726
|
}] } });
|
|
8620
8727
|
|
|
8621
8728
|
class LxTabUiModule {
|