@leanix/components 0.4.96 → 0.4.98
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 +9 -44
- package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +15 -80
- package/fesm2022/leanix-components.mjs +28 -128
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/tab-ui/components/tab/tab.component.d.ts +5 -16
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +5 -14
- 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 i1$8 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,10 +30,9 @@ 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$9 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';
|
|
37
36
|
import { RouterLinkActive, RouterLink, RouterModule } from '@angular/router';
|
|
38
37
|
|
|
39
38
|
const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
|
|
@@ -8133,7 +8132,7 @@ class ModalComponent {
|
|
|
8133
8132
|
this.focusTrap.create(hostElement);
|
|
8134
8133
|
}
|
|
8135
8134
|
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 }); }
|
|
8136
|
-
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:
|
|
8135
|
+
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: i1$8.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: [
|
|
8137
8136
|
trigger('modal', [
|
|
8138
8137
|
transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
|
|
8139
8138
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
@@ -8405,7 +8404,7 @@ class PopoverComponent {
|
|
|
8405
8404
|
return '';
|
|
8406
8405
|
}
|
|
8407
8406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8408
|
-
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$
|
|
8407
|
+
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$9.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"] }] }); }
|
|
8409
8408
|
}
|
|
8410
8409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
8411
8410
|
type: Component,
|
|
@@ -8466,7 +8465,7 @@ class PopoverClickDirective {
|
|
|
8466
8465
|
closePopover() {
|
|
8467
8466
|
this.onMouseLeave.next();
|
|
8468
8467
|
}
|
|
8469
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$
|
|
8468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8470
8469
|
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 }); }
|
|
8471
8470
|
}
|
|
8472
8471
|
__decorate([
|
|
@@ -8479,7 +8478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8479
8478
|
selector: '[lxPopoverClick]',
|
|
8480
8479
|
standalone: true
|
|
8481
8480
|
}]
|
|
8482
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8481
|
+
}], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
|
|
8483
8482
|
type: Input
|
|
8484
8483
|
}], pinned$: [], closePopover: [{
|
|
8485
8484
|
type: HostListener,
|
|
@@ -8546,7 +8545,7 @@ class PopoverHoverDirective {
|
|
|
8546
8545
|
closePopover(skipDelay = this.skipCloseDelay) {
|
|
8547
8546
|
this.onMouseLeave.next({ skipDelay });
|
|
8548
8547
|
}
|
|
8549
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$
|
|
8548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8550
8549
|
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 }); }
|
|
8551
8550
|
}
|
|
8552
8551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, decorators: [{
|
|
@@ -8556,7 +8555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8556
8555
|
selector: '[lxPopoverHover]',
|
|
8557
8556
|
standalone: true
|
|
8558
8557
|
}]
|
|
8559
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8558
|
+
}], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
|
|
8560
8559
|
type: Input
|
|
8561
8560
|
}], skipCloseDelay: [{
|
|
8562
8561
|
type: Input
|
|
@@ -8584,7 +8583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8584
8583
|
class TabComponent {
|
|
8585
8584
|
set isActive(value) {
|
|
8586
8585
|
this._isActive = value;
|
|
8587
|
-
this.cd
|
|
8586
|
+
this.cd.markForCheck();
|
|
8588
8587
|
}
|
|
8589
8588
|
get isActive() {
|
|
8590
8589
|
if (this.routerLinkActive) {
|
|
@@ -8592,9 +8591,7 @@ class TabComponent {
|
|
|
8592
8591
|
}
|
|
8593
8592
|
return this._isActive;
|
|
8594
8593
|
}
|
|
8595
|
-
constructor(
|
|
8596
|
-
this.router = router;
|
|
8597
|
-
this.activatedRoute = activatedRoute;
|
|
8594
|
+
constructor(cd) {
|
|
8598
8595
|
this.cd = cd;
|
|
8599
8596
|
this.label = '';
|
|
8600
8597
|
this.routerLinkActiveOptions = { exact: true };
|
|
@@ -8604,47 +8601,20 @@ class TabComponent {
|
|
|
8604
8601
|
this.background = 'white';
|
|
8605
8602
|
this.disabled = false;
|
|
8606
8603
|
this.switch = new EventEmitter();
|
|
8607
|
-
this.keyDownAction = new EventEmitter();
|
|
8608
8604
|
this._isActive = false;
|
|
8609
8605
|
this.tabPanelId = uniqueId$1('panelId');
|
|
8610
8606
|
this.tabId = uniqueId$1('tab');
|
|
8611
8607
|
}
|
|
8612
8608
|
select() {
|
|
8613
|
-
|
|
8614
|
-
const formattedTabLink = typeof this.tabLink === 'string' ? [this.tabLink] : this.tabLink;
|
|
8615
|
-
this.router.navigate(formattedTabLink, { relativeTo: this.activatedRoute }).then(() => {
|
|
8616
|
-
this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
|
|
8617
|
-
});
|
|
8618
|
-
}
|
|
8619
|
-
else {
|
|
8620
|
-
this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
|
|
8621
|
-
}
|
|
8622
|
-
this.isActive = true;
|
|
8623
|
-
}
|
|
8624
|
-
setFocus() {
|
|
8625
|
-
this.tabElement?.nativeElement?.focus();
|
|
8626
|
-
}
|
|
8627
|
-
handleKeyDown(event) {
|
|
8628
|
-
switch (event.code) {
|
|
8629
|
-
case 'Enter':
|
|
8630
|
-
case 'Space':
|
|
8631
|
-
/**
|
|
8632
|
-
* We are preventing the default browser behavior when the `SPACE` key is pressed, in which
|
|
8633
|
-
* case the browser would scroll down the page.
|
|
8634
|
-
*/
|
|
8635
|
-
event.preventDefault();
|
|
8636
|
-
this.select();
|
|
8637
|
-
break;
|
|
8638
|
-
}
|
|
8639
|
-
this.keyDownAction.emit(event);
|
|
8609
|
+
this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
|
|
8640
8610
|
}
|
|
8641
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token:
|
|
8642
|
-
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"
|
|
8611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8612
|
+
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" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\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 (keyup.enter)=\"select()\"\n (keyup.space)=\"select()\"\n [attr.role]=\"tabLink ? 'presentation' : 'tab'\"\n [attr.id]=\"tabLink ? null : tabId\"\n [attr.aria-selected]=\"tabLink ? null : isActive\"\n [attr.aria-controls]=\"tabLink ? null : tabPanelId\"\n [attr.tabindex]=\"tabLink ? null : isActive || disabled || tabLink ? '-1' : '0'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\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;outline:0}.tab:hover,.tab.active{outline:0}.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 a:focus{outline:0}.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: i1$8.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8643
8613
|
}
|
|
8644
8614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, decorators: [{
|
|
8645
8615
|
type: Component,
|
|
8646
|
-
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\n
|
|
8647
|
-
}], ctorParameters: () => [{ type:
|
|
8616
|
+
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\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 (keyup.enter)=\"select()\"\n (keyup.space)=\"select()\"\n [attr.role]=\"tabLink ? 'presentation' : 'tab'\"\n [attr.id]=\"tabLink ? null : tabId\"\n [attr.aria-selected]=\"tabLink ? null : isActive\"\n [attr.aria-controls]=\"tabLink ? null : tabPanelId\"\n [attr.tabindex]=\"tabLink ? null : isActive || disabled || tabLink ? '-1' : '0'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\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;outline:0}.tab:hover,.tab.active{outline:0}.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 a:focus{outline:0}.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"] }]
|
|
8617
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
|
|
8648
8618
|
type: Input
|
|
8649
8619
|
}], label: [{
|
|
8650
8620
|
type: Input
|
|
@@ -8668,17 +8638,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8668
8638
|
type: Input
|
|
8669
8639
|
}], switch: [{
|
|
8670
8640
|
type: Output
|
|
8671
|
-
}], keyDownAction: [{
|
|
8672
|
-
type: Output
|
|
8673
8641
|
}], content: [{
|
|
8674
8642
|
type: ViewChild,
|
|
8675
8643
|
args: ['contentTemplate', { static: true }]
|
|
8676
8644
|
}], routerLinkActive: [{
|
|
8677
8645
|
type: ViewChild,
|
|
8678
8646
|
args: [RouterLinkActive]
|
|
8679
|
-
}], tabElement: [{
|
|
8680
|
-
type: ViewChild,
|
|
8681
|
-
args: ['tabElement']
|
|
8682
8647
|
}] } });
|
|
8683
8648
|
|
|
8684
8649
|
class TabGroupComponent {
|
|
@@ -8688,22 +8653,13 @@ class TabGroupComponent {
|
|
|
8688
8653
|
get activeTabPortal() {
|
|
8689
8654
|
return this.tabs[this.selectedIndex]?.content;
|
|
8690
8655
|
}
|
|
8691
|
-
|
|
8692
|
-
return this.tabs.map((t) => t.tabId);
|
|
8693
|
-
}
|
|
8694
|
-
constructor(cd, ngZone) {
|
|
8656
|
+
constructor(cd) {
|
|
8695
8657
|
this.cd = cd;
|
|
8696
|
-
this.ngZone = ngZone;
|
|
8697
8658
|
this.isCentered = false;
|
|
8698
8659
|
this.selectedIndex = 0;
|
|
8699
|
-
this.ariaTabPattern = 'manualActivation';
|
|
8700
8660
|
this.indexChange = new EventEmitter();
|
|
8701
|
-
this.focusedIndex = 0;
|
|
8702
8661
|
this.destroyed$ = new Subject();
|
|
8703
8662
|
}
|
|
8704
|
-
ngOnInit() {
|
|
8705
|
-
this.focusedIndex = this.selectedIndex;
|
|
8706
|
-
}
|
|
8707
8663
|
ngOnChanges(changes) {
|
|
8708
8664
|
const tab = this.tabs[this.selectedIndex];
|
|
8709
8665
|
if (changes['selectedIndex'] && !changes['selectedIndex'].isFirstChange() && tab) {
|
|
@@ -8714,104 +8670,48 @@ class TabGroupComponent {
|
|
|
8714
8670
|
if (this.tabs[0]) {
|
|
8715
8671
|
this.tabs[0].noLeftMarginForFirstTab = true;
|
|
8716
8672
|
}
|
|
8717
|
-
this.
|
|
8718
|
-
|
|
8719
|
-
|
|
8720
|
-
|
|
8721
|
-
});
|
|
8722
|
-
});
|
|
8673
|
+
const tab = this.tabs[this.selectedIndex];
|
|
8674
|
+
if (tab) {
|
|
8675
|
+
this.switchTo(tab);
|
|
8676
|
+
}
|
|
8723
8677
|
const listenToTabsSwitch = (tabs) => merge(...tabs.map((tab) => tab.switch.asObservable().pipe(map(() => tab))));
|
|
8724
8678
|
this.tabsQueryList?.changes
|
|
8725
8679
|
.pipe(startWith(null), switchMap(() => listenToTabsSwitch(this.tabs)), takeUntil(this.destroyed$))
|
|
8726
8680
|
.subscribe((tab) => {
|
|
8727
8681
|
this.switchTo(tab);
|
|
8728
8682
|
});
|
|
8729
|
-
this.tabs.forEach((tab) => {
|
|
8730
|
-
tab.keyDownAction.pipe(takeUntil(this.destroyed$)).subscribe((event) => {
|
|
8731
|
-
this.handleKeyDown(tab, event);
|
|
8732
|
-
});
|
|
8733
|
-
});
|
|
8734
8683
|
}
|
|
8735
8684
|
ngOnDestroy() {
|
|
8736
8685
|
this.destroyed$.next();
|
|
8737
|
-
this.destroyed$.complete();
|
|
8738
8686
|
}
|
|
8739
|
-
|
|
8740
|
-
|
|
8741
|
-
// resync focused index on selected index when leaving tabs
|
|
8742
|
-
this.focusedIndex = this.selectedIndex;
|
|
8743
|
-
}
|
|
8687
|
+
tabIds() {
|
|
8688
|
+
return this.tabs.map((t) => t.tabId);
|
|
8744
8689
|
}
|
|
8745
8690
|
switchTo(tab) {
|
|
8746
8691
|
this.tabsQueryList?.forEach((t, index) => {
|
|
8747
|
-
t.isActive = t
|
|
8692
|
+
t.isActive = t === tab;
|
|
8748
8693
|
if (t.isActive) {
|
|
8749
8694
|
this.selectedIndex = index;
|
|
8750
|
-
this.focusedIndex = index;
|
|
8751
8695
|
this.indexChange.emit(index);
|
|
8752
8696
|
}
|
|
8753
8697
|
});
|
|
8754
8698
|
this.cd.markForCheck();
|
|
8755
8699
|
}
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
case 'ArrowRight':
|
|
8759
|
-
const newTabIndex = (this.focusedIndex + 1) % this.tabs.length;
|
|
8760
|
-
this.navigateToTab(newTabIndex);
|
|
8761
|
-
break;
|
|
8762
|
-
case 'ArrowLeft':
|
|
8763
|
-
const previousTabIndex = this.focusedIndex === 0 ? this.tabs.length - 1 : this.focusedIndex - 1;
|
|
8764
|
-
this.navigateToTab(previousTabIndex);
|
|
8765
|
-
break;
|
|
8766
|
-
case 'Home':
|
|
8767
|
-
event.preventDefault();
|
|
8768
|
-
this.navigateToTab(0);
|
|
8769
|
-
break;
|
|
8770
|
-
case 'End':
|
|
8771
|
-
event.preventDefault();
|
|
8772
|
-
this.navigateToTab(this.tabs.length - 1);
|
|
8773
|
-
break;
|
|
8774
|
-
}
|
|
8775
|
-
}
|
|
8776
|
-
navigateToTab(tabIndex) {
|
|
8777
|
-
const tab = this.tabs[tabIndex];
|
|
8778
|
-
if (!tab) {
|
|
8779
|
-
return;
|
|
8780
|
-
}
|
|
8781
|
-
tab.setFocus();
|
|
8782
|
-
this.focusedIndex = tabIndex;
|
|
8783
|
-
if (this.ariaTabPattern === 'automaticActivation') {
|
|
8784
|
-
tab.select();
|
|
8785
|
-
}
|
|
8786
|
-
}
|
|
8787
|
-
navigateToInitialTab() {
|
|
8788
|
-
const alreadyActivedTabWithLink = this.tabs.find((t) => {
|
|
8789
|
-
return t.tabLink && t.isActive;
|
|
8790
|
-
});
|
|
8791
|
-
// Activated tab by URL takes priority over initial `selectedIndex` input value
|
|
8792
|
-
const initialTab = alreadyActivedTabWithLink || this.tabs[this.selectedIndex];
|
|
8793
|
-
initialTab?.select();
|
|
8794
|
-
}
|
|
8795
|
-
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 }); }
|
|
8796
|
-
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 }); }
|
|
8700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8701
|
+
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" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"tabs\" role=\"tablist\" [attr.aria-owns]=\"tabIds().join(' ')\" [class.centered]=\"isCentered\">\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: i1$8.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8797
8702
|
}
|
|
8798
8703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
8799
8704
|
type: Component,
|
|
8800
|
-
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul
|
|
8801
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }
|
|
8705
|
+
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul class=\"tabs\" role=\"tablist\" [attr.aria-owns]=\"tabIds().join(' ')\" [class.centered]=\"isCentered\">\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"] }]
|
|
8706
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isCentered: [{
|
|
8802
8707
|
type: Input
|
|
8803
8708
|
}], selectedIndex: [{
|
|
8804
8709
|
type: Input
|
|
8805
|
-
}], ariaTabPattern: [{
|
|
8806
|
-
type: Input
|
|
8807
8710
|
}], indexChange: [{
|
|
8808
8711
|
type: Output
|
|
8809
8712
|
}], tabsQueryList: [{
|
|
8810
8713
|
type: ContentChildren,
|
|
8811
|
-
args: [TabComponent
|
|
8812
|
-
}], tabListElement: [{
|
|
8813
|
-
type: ViewChild,
|
|
8814
|
-
args: ['tabListElement']
|
|
8714
|
+
args: [TabComponent]
|
|
8815
8715
|
}] } });
|
|
8816
8716
|
|
|
8817
8717
|
class LxTabUiModule {
|