@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
6,107 lines • 363 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, booleanAttribute, ContentChildren, EventEmitter, Output, HostBinding, ContentChild, ViewChild, forwardRef, ChangeDetectorRef, HostListener, Inject, ViewChildren, Attribute, Optional, Host, Self, Injectable } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgIf, NgTemplateOutlet, DOCUMENT } from '@angular/common';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { Subject, merge, fromEvent, takeUntil, race, BehaviorSubject } from 'rxjs';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { njSemanticMotionEasingLinearOutSlowIn, Tokens, njSemanticMotionEasingFastOutSlowIn } from '@engie-group/fluid-design-tokens';
import { ComponentPortal, DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import * as i1$1 from '@angular/cdk/overlay';
import { RouterLink } from '@angular/router';
import * as i1$2 from '@angular/cdk/dialog';
import * as i1$3 from '@angular/platform-browser';
const ThemeComponentsVariantsArray = ['grey', 'brand', 'teal', 'pink', 'orange', 'red', 'green', 'ultramarine', 'yellow', 'purple', 'blue', 'lime'];
class CustomIconDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomIconDirective, isStandalone: true, selector: "[njCustomIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[njCustomIcon]',
standalone: true
}]
}] });
class EngieTemplateDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EngieTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EngieTemplateDirective, isStandalone: true, selector: "[njTemplate]", inputs: { selector: ["njTemplate", "selector"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EngieTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[njTemplate]',
standalone: true
}]
}], propDecorators: { selector: [{
type: Input,
args: ['njTemplate']
}] } });
class AccordionActionsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccordionActionsComponent, isStandalone: true, selector: "nj-accordion-actions", host: { classAttribute: "nj-accordion__actions" }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-accordion-actions', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
class: 'nj-accordion__actions'
}, template: "<ng-content></ng-content>\n" }]
}] });
class AccordionActionDirective {
constructor() {
this.accordion = inject(AccordionComponent);
}
handleClicked() {
if (this.type === 'expand') {
this.accordion?.expandAllItems();
}
if (this.type === 'collapse') {
this.accordion?.collapseAllItems();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AccordionActionDirective, isStandalone: true, selector: "[njAccordionAction]", inputs: { type: ["njAccordionAction", "type"] }, host: { listeners: { "click": "handleClicked()" }, properties: { "attr.data-accordion-expand": "type === 'expand'", "attr.data-accordion-collapse": "type === 'collapse'" }, classAttribute: "njAccordionAction" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[njAccordionAction]',
standalone: true,
host: {
'class': 'njAccordionAction',
'[attr.data-accordion-expand]': "type === 'expand'",
'[attr.data-accordion-collapse]': "type === 'collapse'",
'(click)': 'handleClicked()'
}
}]
}], propDecorators: { type: [{
type: Input,
args: ['njAccordionAction']
}] } });
class IconBaseComponent {
constructor() {
this.MATERIAL_ICON_CLASS = 'material-icons';
this.ICON_CLASS = 'nj-icon';
/**
* @ignore
*/
this.isEngieIcon = false; //Fixme: Should be inferred by dependency tree. Not being set by input
}
getIconClass() {
if (this.isEngieIcon && !this.name) {
return '';
}
return this.isEngieIcon ? `${this.ICON_CLASS} ${this.ICON_CLASS}-${this.name}` : this.MATERIAL_ICON_CLASS;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconBaseComponent, isStandalone: true, selector: "nj-icon-base", inputs: { isEngieIcon: "isEngieIcon", name: "name", ariaLabel: "ariaLabel", className: "className" }, ngImport: i0, template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n <ng-container *ngIf=\"!isEngieIcon && name\">{{ name }}</ng-container>\n</span>\n", styles: [":host,nj-icon-base{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-base', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n <ng-container *ngIf=\"!isEngieIcon && name\">{{ name }}</ng-container>\n</span>\n", styles: [":host,nj-icon-base{display:inline-flex}\n"] }]
}], propDecorators: { isEngieIcon: [{
type: Input
}], name: [{
type: Input
}], ariaLabel: [{
type: Input
}], className: [{
type: Input
}] } });
class IconComponent extends IconBaseComponent {
constructor() {
super(...arguments);
this.ICON_MATERIAL_CLASS = 'nj-icon-material';
/**
* Icon size
*/
this.size = 'md';
}
getClassName() {
const sizeClass = this.size ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.size, 'size-inherit')}` : '';
const variantClass = this.variant ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.variant, 'color-inherit')}` : '';
const className = this.className ? this.className : '';
return `${this.ICON_MATERIAL_CLASS} ${sizeClass} ${variantClass} ${className}`;
}
classModifier(variant, inheritClass) {
switch (variant) {
case 'inherit':
return inheritClass;
default:
return variant;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconComponent, isStandalone: true, selector: "nj-icon", inputs: { size: "size", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"false\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n", styles: [":host,nj-icon{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconBaseComponent, selector: "nj-icon-base", inputs: ["isEngieIcon", "name", "ariaLabel", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconBaseComponent], template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"false\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n", styles: [":host,nj-icon{display:inline-flex}\n"] }]
}], propDecorators: { size: [{
type: Input
}], variant: [{
type: Input
}] } });
class AccordionItemComponent {
constructor() {
this.element = inject(ElementRef);
this.accordion = inject(AccordionComponent);
}
get classes() {
const classes = ['nj-accordion-item'];
if (this.scale && this.scale !== 'md') {
classes.push(`nj-accordion-item--${this.scale}`);
}
if (this.hasLeadingToggleIcon) {
classes.push('nj-accordion-item--leading-toggle');
}
return classes;
}
ngAfterContentInit() {
this.templateDirectives.forEach((templateDirective) => {
if (templateDirective?.selector === 'icon') {
this.iconTemplate = templateDirective.templateRef;
}
if (templateDirective?.selector === 'header') {
this.headerTemplate = templateDirective.templateRef;
}
});
}
handleClick(event) {
if (this.name && !this.element.nativeElement.open) {
event.preventDefault();
this.accordion.collapseAllItems(this.name);
this.expand();
}
}
/**
* Expand the accordion item programmatically
*/
expand() {
if (this.element) {
this.element.nativeElement.open = true;
}
}
/**
* Collapse the accordion item programmatically
*/
collapse() {
if (this.element) {
this.element.nativeElement.open = false;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionItemComponent, isStandalone: true, selector: "details[nj-accordion-item]", inputs: { scale: "scale", hasLeadingToggleIcon: ["hasLeadingToggleIcon", "hasLeadingToggleIcon", booleanAttribute], useAlternativeToggleIcon: ["useAlternativeToggleIcon", "useAlternativeToggleIcon", booleanAttribute], name: "name", label: "label" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "classes" } }, queries: [{ propertyName: "templateDirectives", predicate: EngieTemplateDirective }], ngImport: i0, template: "<summary *ngIf=\"label || headerTemplate\">\n <ng-container *ngIf=\"iconTemplate\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <span class=\"nj-accordion-item__label\">\n <ng-container *ngIf=\"label; else headerTemplate\">\n {{label}}\n </ng-container>\n </span>\n <nj-icon *ngIf=\"!useAlternativeToggleIcon; else alternativeToggleIcon\" name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</summary>\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\n\n<ng-template #alternativeToggleIcon>\n <nj-icon name=\"add\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n <nj-icon name=\"remove\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</ng-template>\n", styles: ["details[nj-accordion-item][open] nj-icon.nj-accordion-item__toggle.nj-accordion-item__toggle--opened{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'details[nj-accordion-item]', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
IconComponent,
NgIf,
NgTemplateOutlet
], host: {
'[class]': 'classes',
'(click)': 'handleClick($event)',
}, template: "<summary *ngIf=\"label || headerTemplate\">\n <ng-container *ngIf=\"iconTemplate\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <span class=\"nj-accordion-item__label\">\n <ng-container *ngIf=\"label; else headerTemplate\">\n {{label}}\n </ng-container>\n </span>\n <nj-icon *ngIf=\"!useAlternativeToggleIcon; else alternativeToggleIcon\" name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</summary>\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\n\n<ng-template #alternativeToggleIcon>\n <nj-icon name=\"add\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n <nj-icon name=\"remove\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</ng-template>\n", styles: ["details[nj-accordion-item][open] nj-icon.nj-accordion-item__toggle.nj-accordion-item__toggle--opened{display:inline-flex}\n"] }]
}], propDecorators: { scale: [{
type: Input
}], hasLeadingToggleIcon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], useAlternativeToggleIcon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], name: [{
type: Input
}], label: [{
type: Input
}], templateDirectives: [{
type: ContentChildren,
args: [EngieTemplateDirective]
}] } });
// Fixme: remove normal in next major release
const CSSClassesMap$1 = {
'xsmall': 'xs',
'small': 'sm',
'medium': 'md',
'normal': 'md',
'large': 'lg',
'xlarge': 'xl'
};
const buttonSizeToCSS = (size) => {
return CSSClassesMap$1[size];
};
class SpinnerComponent {
constructor() {
/**
* @ignore
*/
this.spinnerClassName = 'nj-spinner';
/**
* Spinner variant
*/
this.variant = 'normal';
/**
* Spinner size
*/
this.size = 'md';
/**
* Whether the spinner is rendered as a block (<div>) or an inline (<span>) element.
*/
this.isBlock = true;
}
/**
* @ignore
*/
getSpinnerVariantClass() {
if (!this.variant || this.variant === 'normal') {
return '';
}
return `${this.spinnerClassName}--${this.variant}`;
}
/**
* @ignore
*/
getSpinnerSizeClass() {
if (!this.size) {
return '';
}
return `${this.spinnerClassName}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpinnerComponent, isStandalone: true, selector: "nj-spinner", inputs: { variant: "variant", size: "size", isLoading: "isLoading", isBlock: "isBlock" }, ngImport: i0, template: "<div *ngIf=\"isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <p *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</p>\n</div>\n\n<span *ngIf=\"!isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <span *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</span>\n</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div *ngIf=\"isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <p *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</p>\n</div>\n\n<span *ngIf=\"!isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <span *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</span>\n</span>\n", styles: [":host{display:contents}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], isLoading: [{
type: Input
}], isBlock: [{
type: Input
}] } });
class ButtonComponent {
constructor() {
/**
* @ignore
*/
this.buttonClassName = 'nj-btn';
/**
* Type of the button. Some values may be submit, reset...
*/
this.type = 'button';
/**
* Button emphasis
*/
this.emphasis = 'bold';
/**
* Button variant theme
*/
this.variant = 'primary';
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
/**
* @ignore
*/
getButtonEmphasisClass() {
if (!this.emphasis || this.emphasis === 'bold') {
return '';
}
return `${this.buttonClassName}--${this.emphasis}`;
}
/**
* @ignore
*/
getButtonVariantClass() {
if (!this.variant || this.variant === 'primary') {
return '';
}
return `${this.buttonClassName}--${this.variant}`;
}
getButtonSizeClass() {
if (!this.size || this.size === 'medium' || this.size === 'normal') {
return '';
}
return `${this.buttonClassName}--${buttonSizeToCSS(this.size)}`;
}
/**
* @ignore
*/
getButtonIsLoadingClass() {
return this.isLoading ? `${this.buttonClassName}--is-loading` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "nj-button", inputs: { type: "type", isDisabled: "isDisabled", isLoading: "isLoading", tabIndex: "tabIndex", emphasis: "emphasis", variant: "variant", size: "size", hasCustomIcon: "hasCustomIcon", icon: "icon", ariaLabel: "ariaLabel" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "nj-spinner", inputs: ["variant", "size", "isLoading", "isBlock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, CommonModule, SpinnerComponent], template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n" }]
}], propDecorators: { type: [{
type: Input
}], isDisabled: [{
type: Input
}], isLoading: [{
type: Input
}], tabIndex: [{
type: Input
}], emphasis: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], ariaLabel: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class AccordionComponent {
get classes() {
const classes = ['nj-accordion'];
if (this.noBorder) {
classes.push('nj-accordion--no-border');
}
if (this.separated) {
classes.push('nj-accordion--separated');
}
return classes;
}
/**
* Expand all children items programmatically
*/
expandAllItems() {
const openedGroup = new Set();
this.accordions.forEach((accordion) => {
// Firefox doesn't currently support grouping accordion items with `name` property.
// So we replicate the behavior here to have it on all browsers.
//
// As explained in the MDN documentation, when the `name` property is set, only the first details
// element with the `open` property should be opened.
if (!accordion.name || !openedGroup.has(accordion.name)) {
accordion.expand();
}
else {
accordion.collapse();
}
if (accordion.name) {
openedGroup.add(accordion.name);
}
});
}
/**
* Collapse all children items programmatically
*/
collapseAllItems(name) {
this.accordions.forEach((accordion) => {
if (name && accordion.name !== name) {
return;
}
accordion.collapse();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionComponent, isStandalone: true, selector: "nj-accordion", inputs: { noBorder: ["noBorder", "noBorder", booleanAttribute], separated: ["separated", "separated", booleanAttribute] }, host: { properties: { "class": "classes" } }, queries: [{ propertyName: "accordions", predicate: AccordionItemComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
AccordionItemComponent,
IconComponent,
EngieTemplateDirective,
AccordionActionsComponent,
ButtonComponent,
AccordionActionDirective
], host: {
'[class]': 'classes'
}, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { noBorder: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], separated: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], accordions: [{
type: ContentChildren,
args: [AccordionItemComponent]
}] } });
const selectAnimations = {
transformList: trigger('transformList', [
state('void', style({
transform: 'scaleY(0.8)',
opacity: 0,
})),
state('*', style({
opacity: 1,
transform: 'scaleY(1)',
})),
transition('void => *', animate(`120ms ${njSemanticMotionEasingLinearOutSlowIn}`)),
transition('* => void', animate(`100ms 25ms ${njSemanticMotionEasingLinearOutSlowIn}`, style({ opacity: 0 }))),
]),
};
// Ignore https://angular.io/guide/angular-compiler-options#strictmetadataemit
// @dynamic
class Utils {
static { this.MAX_UID = 1000000; }
static isUndefinedOrNull(value) {
return typeof value === 'undefined' || value === null;
}
static normalizeString(text) {
return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
static normalizeAndSearchInText(text, search) {
if (Utils.isUndefinedOrNull(text) || Utils.isUndefinedOrNull(search)) {
return false;
}
const normalizedText = Utils.normalizeString(text);
let normalizedSearch = Utils.normalizeString(search)?.replace(/\(|\)|\\/gi, '');
const regExp = new RegExp(normalizedSearch, 'gi');
return normalizedText.search(regExp) !== -1;
}
static getUID(prefix) {
do {
// eslint-disable-next-line no-bitwise
prefix += ~~(Math.random() * Utils.MAX_UID); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix));
return prefix;
}
}
class FormFieldDirective {
constructor(el) {
this.el = el;
this.class = 'nj-form-item__field';
this.setPlaceholder();
}
setPlaceholder() {
if (this.tagName.toLowerCase() === 'select') {
return;
}
const placeholder = this.el?.nativeElement?.placeholder;
this.el.nativeElement.placeholder = Utils.isUndefinedOrNull(placeholder) || placeholder?.trim() === ''
? ' '
: placeholder;
}
get type() {
return this.el?.nativeElement?.type;
}
set type(value) {
if (this.el?.nativeElement) {
this.el.nativeElement.type = value;
}
}
get tagName() {
return this.el?.nativeElement?.tagName;
}
get element() {
return this.el?.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldDirective, isStandalone: true, selector: "input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]", host: { properties: { "class": "this.class" } }, exportAs: ["njFormField"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]',
exportAs: 'njFormField',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class IconButtonComponent {
constructor() {
this.ICON_BUTTON_CLASS_NAME = 'nj-icon-btn';
/**
* Type of the button. Some values may be `button`, `submit`, `reset`
*/
this.type = 'button';
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
/**
* @ignore
*/
getIconButtonVariantClass() {
if (!this.variant || this.variant === 'primary') {
return '';
}
return `${this.ICON_BUTTON_CLASS_NAME}--${this.variant}`;
}
/**
* @ignore
*/
getIconButtonSizeClass() {
if (!this.size || this.size === 'xs') {
return '';
}
return `${this.ICON_BUTTON_CLASS_NAME}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconButtonComponent, isStandalone: true, selector: "nj-icon-button", inputs: { type: "type", ariaPressed: "ariaPressed", ariaDescribedby: "ariaDescribedby", isDisabled: "isDisabled", tabIndex: "tabIndex", variant: "variant", size: "size", hasCustomIcon: "hasCustomIcon", icon: "icon", label: "label", additionalClass: "additionalClass" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"nj-icon-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[\n getIconButtonVariantClass(),\n getIconButtonSizeClass(),\n additionalClass ?? ''\n ]\"\n [title]=\"label\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-pressed]=\"ariaPressed\"\n>\n <span class=\"nj-sr-only\">{{label}}</span>\n <nj-icon class=\"nj-icon-btn__icon\" *ngIf=\"!hasCustomIcon && icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-icon-btn__icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<button class=\"nj-icon-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[\n getIconButtonVariantClass(),\n getIconButtonSizeClass(),\n additionalClass ?? ''\n ]\"\n [title]=\"label\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-pressed]=\"ariaPressed\"\n>\n <span class=\"nj-sr-only\">{{label}}</span>\n <nj-icon class=\"nj-icon-btn__icon\" *ngIf=\"!hasCustomIcon && icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-icon-btn__icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { type: [{
type: Input
}], ariaPressed: [{
type: Input
}], ariaDescribedby: [{
type: Input
}], isDisabled: [{
type: Input
}], tabIndex: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], label: [{
type: Input
}], additionalClass: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class FormItemComponent {
constructor() {
this.formItemClassName = 'nj-form-item';
/**
* @ignore
*/
this.isVisible = false;
/**
* @ignore
*/
this.passwordNotice = '';
/**
* @ignore
*/
this.passwordButtonLabel = '';
/**
* @ignore
*/
this.isMultiline = false;
/**
* Form item size
*/
this.size = 'medium';
/**
* Whether the form-item label is floating
*/
this.isFloatingLabel = true;
/**
* Whether the form-item's icon (or custom icon) is clickable
*/
this.isIconClickable = true;
/**
* Additional form-item css classes
*/
this.additionalClass = '';
/**
* Outputs icon click
*/
this.iconClick = new EventEmitter();
/**
* Outputs icon keydown
*/
this.iconKeydown = new EventEmitter();
/**
* Outputs icon click
*/
this.wrapperClick = new EventEmitter();
}
/**
* Whether form-item is in success state
*/
set hasSuccess(value) {
this._hasSuccess = value;
this.setAriaAttributes();
}
get hasSuccess() {
return this._hasSuccess;
}
/**
* Whether form-item is in error state
*/
set hasError(value) {
this._hasError = value;
this.setAriaAttributes();
}
get hasError() {
return this._hasError;
}
/**
* Whether the form-item has a hint substring
*/
set hasHint(value) {
this._hasHint = value;
this.setAriaAttributes();
}
get hasHint() {
return this._hasHint;
}
ngAfterContentInit() {
const tagName = this.formField?.tagName?.toLowerCase();
this.isPassword = this.formField?.type === 'password';
this.isMultiline = tagName === 'textarea';
this.passwordButtonLabel = this.passwordButtonLabelShow;
this.setAriaAttributes();
if (this.isRequired) {
this.formField.element.setAttribute('required', 'required');
}
}
/**
* @ignore
*/
iconClickHandler(event) {
if (!this.isIconClickable) {
return;
}
this.iconClick.emit(event);
}
/**
* @ignore
*/
iconKeydownHandler(event) {
event?.preventDefault();
if (!this.isIconClickable) {
return;
}
this.iconKeydown.emit(event);
}
/**
* @ignore
*/
toggleVisibility() {
if (this.isVisible) {
this.formField.type = 'password';
this.passwordNotice = this.passwordNoticeIsHidden;
this.passwordButtonLabel = this.passwordButtonLabelShow;
}
else {
this.formField.type = 'text';
this.passwordNotice = this.passwordNoticeIsVisible;
this.passwordButtonLabel = this.passwordButtonLabelHide;
}
this.isVisible = !this.isVisible;
}
/**
* @ignore
*/
getSubscriptId() {
return `${this.inputId}-subscript`;
}
/**
* @ignore
*/
setAriaAttributes() {
if (this.formField?.element) {
if (this.hasError) {
this.formField.element.setAttribute('aria-invalid', 'true');
}
if (this.hasError || this.hasSuccess || this.hasHint) {
this.formField.element.setAttribute('aria-describedby', this.getSubscriptId());
}
}
}
/**
* @ignore
*/
isCustomSelect() {
const type = this.formField?.type;
return this.isSelect && type === 'text';
}
/**
* @ignore
*/
getFormItemSizeClass() {
let sizeModifier;
switch (this.size) {
case 'small':
sizeModifier = 'sm';
break;
case 'large':
sizeModifier = 'lg';
break;
case 'xlarge':
sizeModifier = 'xl';
break;
default:
break;
}
return sizeModifier ? `${this.formItemClassName}--${sizeModifier}` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormItemComponent, isStandalone: true, selector: "nj-form-item", inputs: { inputId: "inputId", size: "size", isFloatingLabel: "isFloatingLabel", isDisabled: "isDisabled", isRequired: "isRequired", hasSuccess: "hasSuccess", hasError: "hasError", hasHint: "hasHint", hasCustomIcon: "hasCustomIcon", isIconClickable: "isIconClickable", iconName: "iconName", additionalClass: "additionalClass", passwordButtonLabelShow: "passwordButtonLabelShow", passwordButtonLabelHide: "passwordButtonLabelHide", passwordNoticeIsVisible: "passwordNoticeIsVisible", passwordNoticeIsHidden: "passwordNoticeIsHidden", isSelect: "isSelect" }, outputs: { iconClick: "iconClick", iconKeydown: "iconKeydown", wrapperClick: "wrapperClick" }, queries: [{ propertyName: "formField", first: true, predicate: FormFieldDirective, descendants: true }], ngImport: i0, template: "<div class=\"nj-form-item\"\n [class.nj-form-item--static]=\"!isFloatingLabel\"\n [class.nj-form-item--disabled]=\"isDisabled\"\n [class.nj-form-item--error]=\"hasError\"\n [class.nj-form-item--success]=\"hasSuccess\"\n [class.nj-form-item--password]=\"isPassword\"\n [class.nj-form-item--select]=\"isSelect\"\n [class.nj-form-item--visible]=\"isVisible\"\n [class.nj-form-item--textarea]=\"isMultiline\"\n [ngClass]=\"[getFormItemSizeClass(), additionalClass]\">\n <div class=\"nj-form-item__field-wrapper\" (click)=\"wrapperClick.emit($event)\">\n <ng-content select=\"[njFormField]\"></ng-content>\n <label class=\"nj-form-item__label\" [attr.for]=\"inputId\" [attr.aria-hidden]=\"isCustomSelect() ? 'true' : null\">\n <ng-content select=\"[njFormLabel]\"></ng-content>\n <span *ngIf=\"isRequired\" class=\"nj-form-item__required-asterisk\">*</span>\n </label>\n <nj-icon-button\n *ngIf=\"isPassword\"\n size=\"sm\"\n variant=\"tertiary\"\n [label]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [ariaPressed]=\"isVisible\"\n additionalClass=\"nj-form-item__password-button\"\n >\n </nj-icon-button>\n <nj-icon class=\"nj-form-item__icon\"\n *ngIf=\"!isPassword && !isMultiline && !hasCustomIcon && iconName\"\n [name]=\"iconName\"\n variant=\"inherit\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\">\n </nj-icon>\n <div class=\"nj-form-item__icon\" *ngIf=\"!isPassword && !isMultiline && hasCustomIcon\" [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\" (keydown)=\"iconKeydownHandler($event)\">\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n <p *ngIf=\"isPassword\" class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n </div>\n <div class=\"nj-form-item__subscript\" *ngIf=\"hasError || hasSuccess || hasHint\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" class=\"nj-form-item__subscript-icon\" name=\"warning\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" class=\"nj-form-item__subscript-icon\" name=\"check\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, IconButtonComponent, FormFieldDirective, CommonModule], template: "<div class=\"nj-form-item\"\n [class.nj-form-item--static]=\"!isFloatingLabel\"\n [class.nj-form-item--disabled]=\"isDisabled\"\n [class.nj-form-item--error]=\"hasError\"\n [class.nj-form-item--success]=\"hasSuccess\"\n [class.nj-form-item--password]=\"isPassword\"\n [class.nj-form-item--select]=\"isSelect\"\n [class.nj-form-item--visible]=\"isVisible\"\n [class.nj-form-item--textarea]=\"isMultiline\"\n [ngClass]=\"[getFormItemSizeClass(), additionalClass]\">\n <div class=\"nj-form-item__field-wrapper\" (click)=\"wrapperClick.emit($event)\">\n <ng-content select=\"[njFormField]\"></ng-content>\n <label class=\"nj-form-item__label\" [attr.for]=\"inputId\" [attr.aria-hidden]=\"isCustomSelect() ? 'true' : null\">\n <ng-content select=\"[njFormLabel]\"></ng-content>\n <span *ngIf=\"isRequired\" class=\"nj-form-item__required-asterisk\">*</span>\n </label>\n <nj-icon-button\n *ngIf=\"isPassword\"\n size=\"sm\"\n variant=\"tertiary\"\n [label]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [ariaPressed]=\"isVisible\"\n additionalClass=\"nj-form-item__password-button\"\n >\n </nj-icon-button>\n <nj-icon class=\"nj-form-item__icon\"\n *ngIf=\"!isPassword && !isMultiline && !hasCustomIcon && iconName\"\n [name]=\"iconName\"\n variant=\"inherit\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\">\n </nj-icon>\n <div class=\"nj-form-item__icon\" *ngIf=\"!isPassword && !isMultiline && hasCustomIcon\" [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\" (keydown)=\"iconKeydownHandler($event)\">\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n <p *ngIf=\"isPassword\" class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n </div>\n <div class=\"nj-form-item__subscript\" *ngIf=\"hasError || hasSuccess || hasHint\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" class=\"nj-form-item__subscript-icon\" name=\"warning\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" class=\"nj-form-item__subscript-icon\" name=\"check\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
}], propDecorators: { inputId: [{
type: Input
}], size: [{
type: Input
}], isFloatingLabel: [{
type: Input
}], isDisabled: [{
type: Input
}], isRequired: [{
type: Input
}], hasSuccess: [{
type: Input
}], hasError: [{
type: Input
}], hasHint: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], isIconClickable: [{
type: Input
}], iconName: [{
type: Input
}], additionalClass: [{
type: Input
}], passwordButtonLabelShow: [{
type: Input
}], passwordButtonLabelHide: [{
type: Input
}], passwordNoticeIsVisible: [{
type: Input
}], passwordNoticeIsHidden: [{
type: Input
}], isSelect: [{
type: Input
}], iconClick: [{
type: Output
}], iconKeydown: [{
type: Output
}], wrapperClick: [{
type: Output
}], formField: [{
type: ContentChild,
args: [FormFieldDirective]
}] } });
class HighlightDirective {
constructor(el) {
this.el = el;
/**
* Whether to escape accents or no
*/
this.escapeAccents = true;
/**
* Whether to take into account case or no
*/
this.caseSensitive = false;
this.OPENING_TAG = '<mark class="nj-highlight">';
this.CLOSING_TAG = '</mark>';
}
ngOnChanges(changes) {
this.highlightText();
}
highlightText() {
if (Utils.isUndefinedOrNull(this.content) || Utils.isUndefinedOrNull(this.el?.nativeElement)) {
return;
}
const regexFlags = this.caseSensitive ? 'g' : 'gi';
let innerHtml;
if (Utils.isUndefinedOrNull(this.textToHighlight)) {
innerHtml = this.content;
}
else {
if (this.escapeAccents) {
const regExp = new RegExp(Utils.normalizeString(this.textToHighlight), regexFlags);
const matches = Utils.normalizeString(this.content).matchAll(regExp);
let finalText = this.content;
let buffer = 0;
if (!Utils.isUndefinedOrNull(matches)) {
for (const match of matches) {
const updatedIndex = buffer + match.index;
const textBeforeOccurrence = finalText.slice(0, updatedIndex);
const occurrence = finalText.slice(updatedIndex, updatedIndex + this.textToHighlight.length);
const textAfterOccurrence = finalText.slice(updatedIndex + this.textToHighlight.length, finalText.length);
finalText = `${textBeforeOccurrence}${this.OPENING_TAG}${occurrence}${this.CLOSING_TAG}${textAfterOccurrence}`;
buffer = buffer + this.OPENING_TAG.length + this.CLOSING_TAG.length;
}
}
innerHtml = finalText;
}
else {
const regExp = new RegExp(this.textToHighlight, regexFlags);
innerHtml = this.content.replace(regExp, `${this.OPENING_TAG}$&${this.CLOSING_TAG}`);
}
}
this.el.nativeElement.innerHTML = innerHtml;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HighlightDirective, isStandalone: true, selector: "[njHighlight]", inputs: { content: "content", textToHighlight: "textToHighlight", escapeAccents: "escapeAccents", caseSensitive: "caseSensitive" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, decorators: [{
type: Directive,
args: [{
selector: '[njHighlight]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { content: [{
type: Input
}], textToHighlight: [{
type: Input
}], escapeAccents: [{
type: Input
}], caseSensitive: [{
type: Input
}] } });
class ListGroupComponent {
constructor(element) {
this.element = element;
/**
* Whether group items have borders
*/
this.hasBorder = true;
/**
* Whether list is dense or not, i.e: smaller
*/
this.isDense = false;
/**
* Add role="listbox" and tabindex="-1" to the element.
*
* Used by `nj-select` for accessibility reasons.
*/
this.isCustomSelectList = false;
/**
* Whether list is multi-select or not, to add necessary accessible labels
*/
this.isMultiSelect = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListGroupComponent, isStandalone: true, selector: "nj-list-group", inputs: { listId: "listId", isClickable: "isClickable", isCheckboxList: "isCheckboxList", hasBorder: "hasBorder", isDense: "isDense", isCustomSelectList: "isCustomSelectList", ariaLabel: "ariaLabel", isMultiSelect: "isMultiSelect" }, viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true }], ngImport: i0, template: "<ul\n #root\n class=\"nj-list-deprecated\"\n [ngClass]=\"{\n 'nj-list-deprecated--clickable': isClickable,\n 'nj-list-deprecated--sm': isDense,\n 'nj-list-deprecated--no-border': !hasBorder,\n 'nj-list-deprecated--checkbox': isCheckboxList\n }\"\n [attr.id]=\"listId\"\n [attr.role]=\"isCustomSelectList ? 'listbox' : null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"isCustomSelectList ? -1 : null\"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-list-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<ul\n #root\n class=\"nj-list-deprecated\"\n [ngClass]=\"{\n 'nj-list-deprecated--clickable': isClickable,\n 'nj-list-deprecated--sm': isDense,\n 'nj-list-deprecated--no-border': !hasBorder,\n 'nj-list-deprecated--checkbox': isCheckboxList\n }\"\n [attr.id]=\"listId\"\n [attr.role]=\"isCustomSelectList ? 'listbox' : null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"isCustomSelectList ? -1 : null\"\n [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n <ng-content></ng-content>\n</ul>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { listId: [{
type: Input
}], isClickable: [{
type: Input
}], isCheckboxList: [{
type: Input
}], hasBorder: [{
type: Input
}], isDense: [{
type: Input
}], isCustomSelectList: [{
type: Input
}], ariaLabel: [{
type: Input
}], isMultiSelect: [{
type: Input
}], rootEl: [{
type: ViewChild,
args: ['root']
}] } });
class CheckboxComponent {
/**
* Whether the checkbox is checked or not
*/
set isChecked(value) {
this._checked = value;
this.cdr.markForCheck();
}
get isChecked() {
return this._checked;
}
constructor(cdr) {
this.cdr = cdr;
this.checkboxClassName = 'nj-checkbox';
/**
* Checkbox size
*/
this.size = 'md';
/**
* Whether checkbox is only presentational and state handled by a parent, can be useful for lists of checkboxes.
* When set to `true`, the checkbox won't have any interaction.
*/
this.isPresentational = false;
/**
* Output that emits checked value on change only
*/
this.valueChange = new EventEmitter();
/**
* @ignore
*/
this._onChange = (_) => {
};
/**
* @ignore
*/
this._onTouched = () => {
};
}
/**
* @ignore
*/
_onChangeEvent(event) {
event.stopPropagation();
if (this._inputElement?.nativeElement) {
this.isChecked = this._inputElement.nativeElement.checked;
this._onChange(this.isChecked);
this.valueChange.emit(this.isChecked);
}
}
/**
* @ignore
*/
_onInputClick(event) {
// We have to stop propagation for click events on the visually hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(value) {
this.isChecked = !!value;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @ignore
*/
getSubscriptId() {
return `${this.inputId}-hint`;
}
get checkboxSizeClass() {
return this.size !== 'md' ? `${this.checkboxClassName}--${this.size}` : '';
}
get checkboxClasses() {
return {
'nj-checkbox--error': this.hasError,
'nj-checkbox--success': this.hasSuccess,
[this.checkboxSizeClass]: true
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: CheckboxComponent, isStandalone: true, selector: "nj-checkbox", inputs: { inputId: "inputId", name: "name", isRequired: "isRequired", isChecked: "isChecked", size: "size", value: "value", isDisabled: "isDisabled", hasError: "hasError", hasSuccess: "hasSuccess", subscriptMessage: "subscriptMessage", errorMessage: "errorMessage", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", isPresentational: "isPresentational", indeterminate: ["indeterminate", "indeterminate", booleanAttribute] }, outputs: { valueChange: "valueChange" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"nj-checkbox\"\n [ngClass]=\"checkboxClasses\"\n [attr.inert]=\"isPresentational ? 'true' : null\">\n <label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n #input\n [indeterminate]=\"indeterminate\"\n [required]=\"isRequired\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.aria-describedby]=\"subscriptMessage || errorMessage ? getSubscriptId() : null\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </label>\n <div *ngIf=\"subscriptMessage || errorMessage\" class=\"nj-checkbox__subscript\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" variant=\"inherit\" name=\"warning\" size=\"sm\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" variant=\"inherit\" name=\"check\" size=\"sm\"></nj-icon>\n {{errorMessage ? errorMessage : subscriptMessage}}\n </div>\n</div>\n\n<ng-template #content>\n <span class=\"nj-checkbox__label\">\n <ng-content></ng-content>\n <span *ngIf=\"isRequired\" aria-hidden=\"true\" class=\"nj-checkbox__required\">\n *\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:inline-flex}.nj-checkbox{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-checkbox', providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"nj-checkbox\"\n [ngClass]=\"checkboxClasses\"\n [attr.inert]=\"isPresentational ? 'true' : null\">\n <label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n #input\n [indeterminate]=\"indeterminate\"\n [required]=\"isRequired\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.aria-describedby]=\"subscriptMessage || errorMessage ? getSubscriptId() : null\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </label>\n <div *ngIf=\"subscriptMessage || errorMessage\" class=\"nj-checkbox__subscript\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" variant=\"inherit\" name=\"warning\" size=\"sm\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" variant=\"inherit\" name=\"check\" size=\"sm\"></nj-icon>\n {{errorMessage ? errorMessage : subscriptMessage}}\n </div>\n</div>\n\n<ng-template #content>\n <span class=\"nj-checkbox__label\">\n <ng-content></ng-content>\n <span *ngIf=\"isRequired\" aria-hidden=\"true\" class=\"nj-checkbox__required\">\n *\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:inline-flex}.nj-checkbox{-webkit-user-select:none;user-select:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
type: Input
}], name: [{
type: Input
}], isRequired: [{
type: Input
}], isChecked: [{
type: Input
}], size: [{
type: Input
}], value: [{
type: Input
}], isDisabled: [{
type: Input
}], hasError: [{
type: Input
}], hasSuccess: [{
type: Input
}], subscriptMessage: [{
type: Input
}], errorMessage: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], isPresentational: [{
type: Input
}], indeterminate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], valueChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}] } });
class ListItemComponent {
/**
* @ignore
*/
get className() {
return 'nj-list-deprecated__item';
}
/**
* @ignore
*/
get isClickable() {
const hasRoleOption = this.role === 'option';
return this.hasClickableChildren || hasRoleOption;
}
/**
* @ignore
*/
get getTabindex() {
return this.role === 'option' ? -1 : null;
}
/**
* @ignore
*/
onMouseClick(event) {
// Ignore the event if the list item is a button or a link, the click event is bound to
// the wrapped <button> or <a>
if (!this.hasClickableChildren) {
this.itemClick.emit(event);
}
}
constructor(el) {
this.el = el;
this.cdr = inject(ChangeDetectorRef);
/**
* Whether the border should be on the right
*/
this.hasRightBorder = false;
this.ariaSelected = null;
/**
* Whether content should be in a checkbox
*/
this.isCheckboxContent = false;
/**
* Whether only icon should be displayed
*/
this.isIconOnly = false;
/**
* Emits an event on item click
*/
this.itemClick = new EventEmitter();
}
/**
* Get value of item, returns value if set else returns textContent of item.
* Used in `<nj-select>` component
*/
getValue() {
return this.value ?? this.getLabel();
}
/**
* Get label of item, returns textContent of item.
* Used in `<nj-select>` component
*/
getLabel() {
return this.el?.nativeElement?.textContent;
}
/**
* @ignore
*/
updateSelected(isSelected) {
this.ariaSelected = isSelected;
this.isActive = isSelected;
this.cdr.markForCheck();
}
/**
* @ignore
*/
get hasClickableChildren() {
return this.type === 'button' || this.type === 'link';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListItemComponent, isStandalone: true, selector: "[nj-list-item]", inputs: { isActive: "isActive", isDisabled: "isDisabled", hasRightBorder: "hasRightBorder", role: "role", ariaSelected: "ariaSelected", iconName: "iconName", iconAriaLabel: "iconAriaLabel", type: "type", href: "href", value: "value", isCheckboxContent: "isCheckboxContent", isIconOnly: "isIconOnly", checkboxContentId: "checkboxContentId" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onMouseClick($event)" }, properties: { "class": "this.className", "class.nj-list-deprecated__item--active": "this.isActive", "class.nj-list-deprecated__item--disabled": "this.isDisabled", "class.nj-list-deprecated__item--clickable": "this.isClickable", "class.nj-list-deprecated__item--right-border": "this.hasRightBorder", "attr.role": "this.role", "attr.tabindex": "this.getTabindex", "attr.aria-selected": "this.ariaSelected" } }, ngImport: i0, template: "<ng-template #itemContent>\n <nj-icon\n *ngIf=\"iconName\"\n [name]=\"iconName\"\n [ariaLabel]=\"iconAriaLabel\"\n class=\"nj-list-deprecated__item-icon\">\n </nj-icon>\n <ng-container *ngIf=\"!isIconOnly\" [ngTemplateOutlet]=\"isCheckboxContent ? checkboxContent : brutContent\"></ng-container>\n <div *ngIf=\"!isIconOnly\" class=\"nj-list-deprecated__item-right-content\">\n <ng-content select=\"[njListItemRightContent]\"></ng-content>\n </div>\n</ng-template>\n\n<button *ngIf=\"type === 'button'\" type=\"button\" (click)=\"itemClick.emit($event)\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n</button>\n\n<a *ngIf=\"type === 'link'\" (click)=\"itemClick.emit($event)\" [attr.href]=\"href\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n</a>\n\n<ng-container\n *ngIf=\"!type || type === 'list'\"\n [ngTemplateOutlet]=\"itemContent\"\n></ng-container>\n\n<ng-template #checkboxContent>\n <nj-checkbox [isChecked]=\"isActive\" [inputId]=\"checkboxContentId\" [isPresentational]=\"true\">\n <ng-container [ngTemplateOutlet]=\"brutContent\"></ng-container>\n </nj-checkbox>\n</ng-template>\n\n<ng-template #brutContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".nj-list-deprecated__item-right-content:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: CheckboxComponent, selector: "nj-checkbox", inputs: ["inputId", "name", "isRequired", "isChecked", "size", "value", "isDisabled", "hasError", "hasSuccess", "subscriptMessage", "errorMessage", "ariaLabel", "ariaLabelledby", "isPresentational", "indeterminate"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListItemComponent, decorators: [{
type: Component,
args: [{ selector: '[nj-list-item]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CheckboxComponent, CommonModule], template: "<ng-template #itemContent>\n <nj-icon\n *ngIf=\"iconName\"\n [name]=\"iconName\"\n [ariaLabel]=\"iconAriaLabel\"\n class=\"nj-list-deprecated__item-icon\">\n </nj-icon>\n <ng-container *ngIf=\"!isIconOnly\" [ngTemplateOutlet]=\"isCheckboxContent ? checkboxContent : brutContent\"></ng-container>\n <div *ngIf=\"!isIconOnly\" class=\"nj-list-deprecated__item-right-content\">\n <ng-content select=\"[njListItemRightContent]\"></ng-content>\n </div>\n</ng-template>\n\n<button *ngIf=\"type === 'button'\" type=\"button\" (click)=\"itemClick.emit($event)\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n</button>\n\n<a *ngIf=\"type === 'link'\" (click)=\"itemClick.emit($event)\" [attr.href]=\"href\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n</a>\n\n<ng-container\n *ngIf=\"!type || type === 'list'\"\n [ngTemplateOutlet]=\"itemContent\"\n></ng-container>\n\n<ng-template #checkboxContent>\n <nj-checkbox [isChecked]=\"isActive\" [inputId]=\"checkboxContentId\" [isPresentational]=\"true\">\n <ng-container [ngTemplateOutlet]=\"brutContent\"></ng-container>\n </nj-checkbox>\n</ng-template>\n\n<ng-template #brutContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".nj-list-deprecated__item-right-content:empty{display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { className: [{
type: HostBinding,
args: ['class']
}], isActive: [{
type: HostBinding,
args: ['class.nj-list-deprecated__item--active']
}, {
type: Input
}], isDisabled: [{
type: HostBinding,
args: ['class.nj-list-deprecated__item--disabled']
}, {
type: Input
}], isClickable: [{
type: HostBinding,
args: ['class.nj-list-deprecated__item--clickable']
}], hasRightBorder: [{
type: HostBinding,
args: ['class.nj-list-deprecated__item--right-border']
}, {
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], getTabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], ariaSelected: [{
type: HostBinding,
args: ['attr.aria-selected']
}, {
type: Input
}], iconName: [{
type: Input
}], iconAriaLabel: [{
type: Input
}], type: [{
type: Input
}], href: [{
type: Input
}], value: [{
type: Input
}], isCheckboxContent: [{
type: Input
}], isIconOnly: [{
type: Input
}], checkboxContentId: [{
type: Input
}], itemClick: [{
type: Output
}], onMouseClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class AutocompleteComponent extends FormItemComponent {
/**
* Autocomplete data
*/
set data(value) {
this._data = value;
this.updateList();
}
get data() {
return this._data;
}
constructor(renderer, elementRef, cdr, _document) {
super();
this.renderer = renderer;
this.elementRef = elementRef;
this.cdr = cdr;
this._document = _document;
this.INPUT_BORDER_IN_PX = 3;
this.LIST_OFFSET_IN_PX = 4;
/**
* @ignore
*/
this.unsubscribe = new Subject();
/**
* @ignore
*/
this._onChange = (_) => { };
/**
* @ignore
*/
this._onTouched = () => { };
/**
* Bandaid hack to prevent a weird focusout event bug happening when
* `appendTo` is set and an item is selected. For *some* reason, the focusout
* event is triggered multiple times when opening the list, which causes
* unexpected behavior.
*
* This variable allows to temporarily "disables" the `handleFocusout` handler.
*
* FIXME: Find an actual solution to this problem instead of a bandaid hack.
* @ignore
*/
this.ignoreFocusout = false;
/**
* @ignore
*/
this.isOpen = false;
/**
* @ignore
*/
this.isFiltered = false;
/**
* Index of currently selected suggestion. -1 if no suggestion is currently selected
* @ignore
*/
this.focusIndex = -1;
this.activeIndex = -1;
/**
* Id of currently selected item. Null if no suggestion is currently selected
* @ignore
*/
this.focusedItemId = null;
/**
* Live zone content. It will be announced by assistive technologies everytime it is changed.
* @ignore
*/
this.liveZoneContent = '';
/**
* Dropdown icon name
*/
this.iconName = 'keyboard_arrow_down';
/**
* Whether to show number of results or no
*/
this.showNumberOfResults = true;
/**
* No results message to display
*/
this.noResultMessage = 'No Results';
/**
* Result message, formatted like `{numberOfResults} {resultsNumberMessage}`
*/
this.resultsNumberMessage = 'results';
/**
* Whether to show number of results or no
*/
this.showNoResultsMessage = true;
/**
* Emits value of searched value on input type
*/
this.search = new EventEmitter();
this.initScrollListener();
}
/**
* @ignore
*/
ngAfterContentInit() {
super.ngAfterContentInit();
}
/**
* @ignore
*/
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
this.clickListenerDisposeFct?.();
this.scrollListenerDisposeFct?.();
if (this.appendTo) {
this.removeAppendedElementFromParent();
}
}
/**
* Content of hint item and hidden.
* @ignore
*/
createResultsMessageContent() {
const elements = this.filteredData;
if (elements.length === 0) {
return this.noResultMessage;
}
return `${elements.length} ${this.resultsNumberMessage}`;
}
/**
* Update displayed suggestions and update live zone
* @private
*/
updateList() {
if (!this.isFiltered || !this.searchText || Utils.isUndefinedOrNull(this._data)) {
this.filteredData = this._data;
}
else {
this.filteredData = this._data
.filter((option) => Utils.normalizeAndSearchInText(option?.label, this.searchText))
.slice(0, this.searchLimit);
}
this.liveZoneContent = this.createResultsMessageContent();
this.processActiveOption();
}
processActiveOption() {
this.activeIndex = this.filteredData.findIndex((item) => item.label === this.searchText);
}
get interactedItemIndex() {
if (this.focusIndex !== -1) {
return this.focusIndex;
}
return this.activeIndex !== -1 ? this.activeIndex : 0;
}
scrollOnListOpening() {
const element = this.selectOptions?.get(this.interactedItemIndex)?.el?.nativeElement;
element.scrollIntoView({ block: 'nearest' });
}
appendAndComputeListPosition() {
if (!this.appendTo || !this.optionsList?.nativeElement) {
return;
}
const focusedEl = document.activeElement;
this._parentElement = this._document.querySelector(this.appendTo);
this.computeListPosition();
this._parentElement.appendChild(this.optionsList.nativeElement);
// The appendChild() call above might remove the focus from the currently
// selected element so we restore the focus to where it was before the append.
focusedEl?.focus();
}
/**
* @private
*/
computeListPosition() {
if (this.optionsList?.nativeElement && this.inputRef?.nativeElement) {
const inputBoundingRect = this.inputRef?.nativeElement?.getBoundingClientRect();
if (inputBoundingRect) {
this.optionsList.nativeElement.style = `
position: fixed;
left: ${inputBoundingRect.left - this.LIST_OFFSET_IN_PX}px;
top: ${inputBoundingRect.top + inputBoundingRect.height + this.LIST_OFFSET_IN_PX + this.INPUT_BORDER_IN_PX}px;
min-width: ${inputBoundingRect.width + this.LIST_OFFSET_IN_PX * 2}px;
transform: scaleY(1);
opacity: 1;
`;
}
}
}
/**
* @ignore
*/
removeAppendedElementFromParent() {
if (this.optionsList?.nativeElement) {
this.renderer.removeChild(this._parentElement, this.optionsList.nativeElement);
}
}
/**
* @ignore
*/
initScrollListener() {
this.scrollListenerDisposeFct = this.renderer.listen('window', 'scroll', (_) => {
if (this.appendTo && this.isOpen) {
this.computeListPosition();
}
});
}
/**
* @ignore
*/
getAdditionalClass() {
return `nj-form-item--select nj-form-item--autocomplete${this.isOpen ? ' nj-form-item--open' : ''}`;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
if (!this.inputRef) {
return;
}
this.isDisabled = isDisabled;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(value) {
this.selectedValue = value;
this.searchText = value?.label ?? '';
if (this.inputRef) {
this.inputRef.nativeElement.value = value?.label ?? '';
}
this.cdr.markForCheck();
}
/** Open the suggestion list. */
openList() {
this.updateList();
this.isOpen = true;
this.ignoreFocusout = true;
setTimeout(() => {
this.scrollOnListOpening();
if (this.appendTo) {
this.appendAndComputeListPosition();
}
this.ignoreFocusout = false;
});
}
/** Close the suggestion list. */
closeList() {
this.isOpen = false;
this.focusIndex = -1;
this.activeIndex = -1;
if (this.appendTo) {
this.removeAppendedElementFromParent();
}
this.cdr.markForCheck();
}
/**
* Toggle the suggestion list.
* @ignore
*/
handleInputClick() {
if (this.isOpen) {
this.closeList();
}
else {
this.isFiltered = false;
this.openList();
}
}
/**
* Handle input change and save searchText
* @ignore
*/
handleInputEvent(event) {
if (event?.data === '') {
return;
}
this.searchText = event?.target?.value;
this.search.emit(this.searchText);
const matchingOption = this._data.find((option) => option.label === this.searchText);
if (matchingOption) {
this.selectItem(matchingOption);
}
else {
this.updateList();
setTimeout(() => {
if (this.filteredData.length) {
this.focusIndex = 0;
this.focusFocusedOption();
}
});
}
}
/**
* @ignore
*/
getItemId(index) {
return `${this.inputId}-item-${index}`;
}
/**
* @ignore
*/
getListId() {
return `${this.inputId}-list`;
}
/**
* @ignore
*/
getInstructionsId() {
return `${this.inputId}-instructions`;
}
/**
* @ignore
*/
focusFocusedOption() {
const element = this.selectOptions?.get(this.focusIndex)?.el?.nativeElement;
this.focusedItemId = element?.id;
element.scrollIntoView({ block: 'nearest' });
}
/**
* @ignore
*/
selectNextOption() {
if (this.filteredData.length) {
if (this.focusIndex !== -1) {
const nextIndex = (this.focusIndex + 1) % this.filteredData.length;
this.focusIndex = nextIndex;
}
else {
this.focusIndex = this.interactedItemIndex;
}
this.focusFocusedOption();
}
}
/**
* @ignore
*/
selectPreviousOption() {
if (this.filteredData.length) {
const previousIndex = this.focusIndex === 0 ? this.filteredData.length - 1 : this.focusIndex - 1;
this.focusIndex = previousIndex;
this.focusFocusedOption();
}
}
/**
* @ignore
*/
unselectOption() {
this.focusIndex = -1;
this.focusedItemId = null;
}
/**
* @ignore
*/
handleKeydownEvent(e) {
if (e.key === 'Tab') {
// Ignore Tab key to not mess up with focusout event handler
return;
}
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
if (!this.isOpen) {
this.isFiltered = false;
this.openList();
this.focusIndex = this.interactedItemIndex;
this.focusFocusedOption();
}
else {
this.selectNextOption();
}
break;
case 'ArrowUp':
e.preventDefault();
if (!this.isOpen) {
this.isFiltered = false;
this.openList();
}
this.focusIndex = this.interactedItemIndex;
this.selectPreviousOption();
break;
case 'Escape':
e.preventDefault();
if (this.isOpen) {
this.closeList();
}
break;
case 'Enter':
if (this.isOpen && this.focusIndex !== -1) {
this.selectItem(this.filteredData[this.focusIndex]);
}
break;
default:
// Ignore non-character keys and shortcut combinations
const keyIsPrintable = (e.key.length === 1 || e.key === 'Backspace') && !e.metaKey && !e.altKey && !e.ctrlKey;
if (keyIsPrintable) {
this.isFiltered = true;
this.unselectOption();
if (!this.isOpen) {
this.openList();
}
setTimeout(() => {
const matchingOption = this.getMatchinOption();
this._onChange(matchingOption);
this.cdr.markForCheck();
});
}
}
}
/**
* @ignore
*/
getMatchinOption() {
const filteredData = this._data?.filter((option) => this.searchText === option.label);
return filteredData?.[0];
}
/**
* @ignore
*/
selectItem(option) {
this.closeList();
if (this.inputRef) {
this.inputRef.nativeElement.value = option.label;
}
this.searchText = option.label;
this.selectedValue = option;
this.unselectOption();
this._onChange(option);
this.cdr.markForCheck();
}
/**
* Closes the suggestion list if the focus is moved outside of the autocomplete.
* @ignore
*/
handleFocusout(e) {
if (this.ignoreFocusout) {
return;
}
if (!this.elementRef?.nativeElement.contains(e.relatedTarget) &&
!this.optionsList?.nativeElement.contains(e.relatedTarget)) {
this.closeList();
}
}
/**
* @ignore
* @param index
* @param option
*/
trackByOption(index, option) {
if (this.trackByFn) {
return this.trackByFn(index, option);
}
return option;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteComponent, isStandalone: true, selector: "nj-autocomplete", inputs: { iconName: "iconName", showNumberOfResults: "showNumberOfResults", noResultMessage: "noResultMessage", resultsNumberMessage: "resultsNumberMessage", showNoResultsMessage: "showNoResultsMessage", searchLimit: "searchLimit", appendTo: "appendTo", trackByFn: "trackByFn", data: "data", listLabel: "listLabel", inputInstructions: "inputInstructions" }, outputs: { search: "search" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AutocompleteComponent),
multi: true
}
], queries: [{ propertyName: "optionLabelTemplate", first: true, predicate: ["njAutocompleteOptionLabel"], descendants: true, read: TemplateRef }, { propertyName: "searchResultsTemplate", first: true, predicate: ["njAutocompleteSearchResults"], descendants: true, read: TemplateRef }, { propertyName: "noResultTemplate", first: true, predicate: ["njAutocompleteNoResult"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, read: ElementRef }, { propertyName: "selectOptions", predicate: ListItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n [size]=\"size\"\n (keydown)=\"handleKeydownEvent($event)\"\n (focusout)=\"handleFocusout($event)\"\n>\n <input\n #input\n type=\"text\"\n (input)=\"handleInputEvent($event)\"\n (focus)=\"_onTouched?.()\"\n [value]=\"selectedValue?.label\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n autocomplete=\"off\"\n njFormField\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"focusedItemId\"\n [attr.aria-controls]=\"getListId()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-describedby]=\"getInstructionsId()\"\n (click)=\"handleInputClick()\"\n />\n\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n\n <ng-container njFormAdditionalContent>\n <div class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n <p>{{ liveZoneContent }}</p>\n </div>\n\n <p [id]=\"getInstructionsId()\" hidden>{{ inputInstructions }}</p>\n\n <nj-list-group\n [@transformList]=\"isOpen ? 'open': 'void'\"\n *ngIf=\"isOpen\"\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [ngClass]=\"{ 'nj-form-item__list--appended': appendTo }\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [listId]=\"getListId()\"\n isCustomSelectList\n [ariaLabel]=\"listLabel\"\n #optionsList\n (keydown)=\"appendTo ? handleKeydownEvent($event) : null\"\n (focusout)=\"appendTo ? handleFocusout($event) : null\"\n >\n <ng-content select=\"[njAutocompleteAdditional]\"> </ng-content>\n\n <!-- Number of suggestions -->\n <ng-container\n *ngIf=\"isFiltered && showNumberOfResults && filteredData?.length\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n searchResultsTemplate ? searchResultsTemplate : defaultSearchResults\n \"\n [ngTemplateOutletContext]=\"{\n numberOfFilteredData: filteredData.length\n }\"\n ></ng-container>\n </ng-container>\n\n <!-- No suggestions -->\n <ng-container\n *ngIf=\"isFiltered && showNoResultsMessage && !filteredData?.length\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n noResultTemplate ? noResultTemplate : defaultNoResults\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Suggestion items -->\n <ng-container *ngIf=\"filteredData\">\n <li\n nj-list-item\n *ngFor=\"\n let option of filteredData;\n index as i;\n trackBy: trackByOption\n \"\n [isActive]=\"i === activeIndex\"\n [ariaSelected]=\"i === focusIndex\"\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"getItemId(i)\"\n #item\n (itemClick)=\"selectItem(option)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n optionLabelTemplate ? optionLabelTemplate : defaultLabel\n \"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n </ng-container>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n\n<ng-template #defaultLabel let-option=\"option\">\n <span\n *ngIf=\"isFiltered\"\n njHighlight\n [content]=\"option?.label\"\n [textToHighlight]=\"searchText\"\n ></span>\n <span *ngIf=\"!isFiltered\">{{ option?.label }}</span>\n</ng-template>\n\n<ng-template\n #defaultSearchResults\n let-numberOfFilteredData=\"numberOfFilteredData\"\n>\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">\n {{ numberOfFilteredData }} {{ resultsNumberMessage }}\n </p>\n</ng-template>\n\n<ng-template #defaultNoResults>\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">\n {{ noResultMessage }}\n </p>\n</ng-template>\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "nj-list-group", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: ListItemComponent, selector: "[nj-list-item]", inputs: ["isActive", "isDisabled", "hasRightBorder", "role", "ariaSelected", "iconName", "iconAriaLabel", "type", "href", "value", "isCheckboxContent", "isIconOnly", "checkboxContentId"], outputs: ["itemClick"] }, { kind: "component", type: FormItemComponent, selector: "nj-form-item", inputs: ["inputId", "size", "isFloatingLabel", "isDisabled", "isRequired", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick"] }, { kind: "directive", type: FormFieldDirective, selector: "input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]", exportAs: ["njFormField"] }, { kind: "directive", type: HighlightDirective, selector: "[njHighlight]", inputs: ["content", "textToHighlight", "escapeAccents", "caseSensitive"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [selectAnimations.transformList], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AutocompleteComponent),
multi: true
}
], animations: [selectAnimations.transformList], encapsulation: ViewEncapsulation.None, standalone: true, imports: [
ListGroupComponent,
ListItemComponent,
FormItemComponent,
FormFieldDirective,
HighlightDirective,
CommonModule
], template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n [size]=\"size\"\n (keydown)=\"handleKeydownEvent($event)\"\n (focusout)=\"handleFocusout($event)\"\n>\n <input\n #input\n type=\"text\"\n (input)=\"handleInputEvent($event)\"\n (focus)=\"_onTouched?.()\"\n [value]=\"selectedValue?.label\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n autocomplete=\"off\"\n njFormField\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"focusedItemId\"\n [attr.aria-controls]=\"getListId()\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-describedby]=\"getInstructionsId()\"\n (click)=\"handleInputClick()\"\n />\n\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n\n <ng-container njFormAdditionalContent>\n <div class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n <p>{{ liveZoneContent }}</p>\n </div>\n\n <p [id]=\"getInstructionsId()\" hidden>{{ inputInstructions }}</p>\n\n <nj-list-group\n [@transformList]=\"isOpen ? 'open': 'void'\"\n *ngIf=\"isOpen\"\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [ngClass]=\"{ 'nj-form-item__list--appended': appendTo }\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [listId]=\"getListId()\"\n isCustomSelectList\n [ariaLabel]=\"listLabel\"\n #optionsList\n (keydown)=\"appendTo ? handleKeydownEvent($event) : null\"\n (focusout)=\"appendTo ? handleFocusout($event) : null\"\n >\n <ng-content select=\"[njAutocompleteAdditional]\"> </ng-content>\n\n <!-- Number of suggestions -->\n <ng-container\n *ngIf=\"isFiltered && showNumberOfResults && filteredData?.length\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n searchResultsTemplate ? searchResultsTemplate : defaultSearchResults\n \"\n [ngTemplateOutletContext]=\"{\n numberOfFilteredData: filteredData.length\n }\"\n ></ng-container>\n </ng-container>\n\n <!-- No suggestions -->\n <ng-container\n *ngIf=\"isFiltered && showNoResultsMessage && !filteredData?.length\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n noResultTemplate ? noResultTemplate : defaultNoResults\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Suggestion items -->\n <ng-container *ngIf=\"filteredData\">\n <li\n nj-list-item\n *ngFor=\"\n let option of filteredData;\n index as i;\n trackBy: trackByOption\n \"\n [isActive]=\"i === activeIndex\"\n [ariaSelected]=\"i === focusIndex\"\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"getItemId(i)\"\n #item\n (itemClick)=\"selectItem(option)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n optionLabelTemplate ? optionLabelTemplate : defaultLabel\n \"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n </ng-container>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n\n<ng-template #defaultLabel let-option=\"option\">\n <span\n *ngIf=\"isFiltered\"\n njHighlight\n [content]=\"option?.label\"\n [textToHighlight]=\"searchText\"\n ></span>\n <span *ngIf=\"!isFiltered\">{{ option?.label }}</span>\n</ng-template>\n\n<ng-template\n #defaultSearchResults\n let-numberOfFilteredData=\"numberOfFilteredData\"\n>\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">\n {{ numberOfFilteredData }} {{ resultsNumberMessage }}\n </p>\n</ng-template>\n\n<ng-template #defaultNoResults>\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">\n {{ noResultMessage }}\n </p>\n</ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; }, propDecorators: { iconName: [{
type: Input
}], showNumberOfResults: [{
type: Input
}], noResultMessage: [{
type: Input
}], resultsNumberMessage: [{
type: Input
}], showNoResultsMessage: [{
type: Input
}], searchLimit: [{
type: Input
}], appendTo: [{
type: Input
}], trackByFn: [{
type: Input
}], data: [{
type: Input
}], listLabel: [{
type: Input
}], inputInstructions: [{
type: Input
}], search: [{
type: Output
}], inputRef: [{
type: ViewChild,
args: ['input']
}], optionsList: [{
type: ViewChild,
args: ['optionsList', { read: ElementRef }]
}], selectOptions: [{
type: ViewChildren,
args: [ListItemComponent]
}], optionLabelTemplate: [{
type: ContentChild,
args: ['njAutocompleteOptionLabel', { read: TemplateRef }]
}], searchResultsTemplate: [{
type: ContentChild,
args: ['njAutocompleteSearchResults', { read: TemplateRef }]
}], noResultTemplate: [{
type: ContentChild,
args: ['njAutocompleteNoResult', { read: TemplateRef }]
}] } });
class BadgeComponent {
constructor() {
this.badgeClassName = 'nj-badge';
}
isValueDefined() {
return !Utils.isUndefinedOrNull(this.value);
}
getFormattedValue() {
if (typeof this.value === 'string') {
return this.value;
}
let formattedValue = `${this.value}`;
if (!Utils.isUndefinedOrNull(this.capedValue) && this.value > this.capedValue) {
if (this.capedValue <= 0) {
formattedValue = '0+';
}
else {
formattedValue = `${this.capedValue}+`;
}
}
return formattedValue;
}
getBadgeEmphasisClass() {
if (!this.emphasis || this.emphasis === 'bold') {
return '';
}
return `${this.badgeClassName}--${this.emphasis}`;
}
getBadgeVariantClass() {
if (!this.variant || this.variant === 'neutral') {
return '';
}
return `${this.badgeClassName}--${this.variant}`;
}
getBadgeSizeClass() {
if (!this.size || this.size === 'md') {
return '';
}
return `${this.badgeClassName}--${this.size}`;
}
getBadgeUppercaseClass() {
if (!this.isUppercase) {
return '';
}
return `${this.badgeClassName}--uppercase`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, isStandalone: true, selector: "nj-badge", inputs: { emphasis: "emphasis", variant: "variant", size: "size", iconName: "iconName", value: "value", capedValue: "capedValue", isUppercase: "isUppercase", unitLabel: "unitLabel" }, queries: [{ propertyName: "customIcon", first: true, predicate: CustomIconDirective, descendants: true }], ngImport: i0, template: "<p class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeSizeClass(), getBadgeUppercaseClass()]\">\n <span class=\"nj-badge__icon\" *ngIf=\"customIcon?.templateRef || iconName\">\n <ng-container *ngIf=\"customIcon?.templateRef as iconTemplateRef; else icon\" [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n <ng-template #icon>\n <nj-icon [name]=\"iconName\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n </ng-template>\n </span>\n <span>\n <ng-container *ngIf=\"!isValueDefined()\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"isValueDefined()\">\n {{ getFormattedValue() }}\n </ng-container>\n </span>\n <span *ngIf=\"unitLabel\" class=\"nj-sr-only\">{{ unitLabel }}</span>\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, IconComponent], template: "<p class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeSizeClass(), getBadgeUppercaseClass()]\">\n <span class=\"nj-badge__icon\" *ngIf=\"customIcon?.templateRef || iconName\">\n <ng-container *ngIf=\"customIcon?.templateRef as iconTemplateRef; else icon\" [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n <ng-template #icon>\n <nj-icon [name]=\"iconName\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n </ng-template>\n </span>\n <span>\n <ng-container *ngIf=\"!isValueDefined()\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"isValueDefined()\">\n {{ getFormattedValue() }}\n </ng-container>\n </span>\n <span *ngIf=\"unitLabel\" class=\"nj-sr-only\">{{ unitLabel }}</span>\n</p>\n" }]
}], propDecorators: { emphasis: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], iconName: [{
type: Input
}], value: [{
type: Input
}], capedValue: [{
type: Input
}], isUppercase: [{
type: Input
}], unitLabel: [{
type: Input
}], customIcon: [{
type: ContentChild,
args: [CustomIconDirective]
}] } });
const defaultParams$2 = {
params: { enterAnimationDuration: '150ms' },
};
const tooltipAnimation = {
tooltip: trigger('tooltip', [
state('void', style({ opacity: 0, transform: 'scale3d(0, 0, 1)' })),
state('*', style({ opacity: 1, transform: 'scale3d(1, 1, 1)' })),
transition(':enter', animate(`{{enterAnimationDuration}} ${njSemanticMotionEasingLinearOutSlowIn}`), defaultParams$2),
]),
};
class TooltipComponent {
constructor() {
/**
* @ignore
*/
this.tooltipClassName = 'nj-tooltip';
/**
* Whether tooltip has arrow or no
*/
this.hasArrow = true;
/**
* Tooltip placement
*/
this.placement = 'top';
/**
* Tooltip arrow placement
*/
this.arrowPlacement = 'center';
/**
* Whether tooltip management is standalone
*/
this.isStandalone = true;
/**
* Whether tooltip is animated
*/
this.isAnimated = true;
}
/**
* @ignore
*/
getPlacementClass() {
if (!this.placement) {
return '';
}
return `${this.tooltipClassName}--${this.placement}`;
}
/**
* @ignore
*/
getTooltipArrowPlacement() {
if (!this.arrowPlacement) {
return '';
}
return `${this.tooltipClassName}__arrow--${this.arrowPlacement}`;
}
/**
* @ignore
*/
getIsInverseClass() {
return this.isInverse ? `${this.tooltipClassName}--inverse` : '';
}
/**
* @ignore
*/
getIsStandaloneClass() {
return this.isStandalone ? `${this.tooltipClassName}--standalone` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, isStandalone: true, selector: "nj-tooltip", inputs: { isInverse: "isInverse", hasArrow: "hasArrow", label: "label", tooltipId: "tooltipId", placement: "placement", arrowPlacement: "arrowPlacement", isStandalone: "isStandalone", isAnimated: "isAnimated", contentTemplateRef: "contentTemplateRef" }, ngImport: i0, template: "<div class=\"nj-tooltip show\" [ngClass]=\"[getIsInverseClass(), getPlacementClass(), getIsStandaloneClass()]\" [attr.id]=\"tooltipId\" @tooltip [@.disabled]=\"!isAnimated\">\n <div class=\"nj-tooltip__arrow\" *ngIf=\"hasArrow\" [ngClass]=\"[getTooltipArrowPlacement()]\"></div>\n <div class=\"nj-tooltip__inner\">\n <ng-container *ngTemplateOutlet=\"label ? labelTemplate : contentTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #labelTemplate>\n {{label}}\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-container *ngTemplateOutlet=\"contentTemplateRef ? contentTemplateRef : defaultContentTemplate\"></ng-container>\n</ng-template>\n", styles: [":host{display:inline-flex;padding:var(--nj-semantic-size-spacing-8)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [tooltipAnimation.tooltip], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, animations: [tooltipAnimation.tooltip], standalone: true, imports: [CommonModule], template: "<div class=\"nj-tooltip show\" [ngClass]=\"[getIsInverseClass(), getPlacementClass(), getIsStandaloneClass()]\" [attr.id]=\"tooltipId\" @tooltip [@.disabled]=\"!isAnimated\">\n <div class=\"nj-tooltip__arrow\" *ngIf=\"hasArrow\" [ngClass]=\"[getTooltipArrowPlacement()]\"></div>\n <div class=\"nj-tooltip__inner\">\n <ng-container *ngTemplateOutlet=\"label ? labelTemplate : contentTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #labelTemplate>\n {{label}}\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-container *ngTemplateOutlet=\"contentTemplateRef ? contentTemplateRef : defaultContentTemplate\"></ng-container>\n</ng-template>\n", styles: [":host{display:inline-flex;padding:var(--nj-semantic-size-spacing-8)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { isInverse: [{
type: Input
}], hasArrow: [{
type: Input
}], label: [{
type: Input
}], tooltipId: [{
type: Input
}], placement: [{
type: Input
}], arrowPlacement: [{
type: Input
}], isStandalone: [{
type: Input
}], isAnimated: [{
type: Input
}], contentTemplateRef: [{
type: Input
}] } });
class TooltipDirective {
set tooltipOptions(value) {
this._tooltipOptions = value;
this.setTooltipValues();
const scrollableAncestors = this.scrollDispatcher.getAncestorScrollContainers(this.el);
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.el)
.withPositions([this.getPositionOptions()])
.withScrollableContainers(scrollableAncestors);
this.overlayRef?.updatePositionStrategy(positionStrategy);
}
get tooltipOptions() {
return this._tooltipOptions;
}
constructor(el, overlayPositionBuilder, overlay, scrollDispatcher, doc, zone) {
this.el = el;
this.overlayPositionBuilder = overlayPositionBuilder;
this.overlay = overlay;
this.scrollDispatcher = scrollDispatcher;
this.doc = doc;
this.zone = zone;
this.unsubscribe = new Subject();
}
ngOnInit() {
const scrollableAncestors = this.scrollDispatcher.getAncestorScrollContainers(this.el);
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.el)
.withPositions([this.getPositionOptions()])
.withScrollableContainers(scrollableAncestors);
this.overlayRef = this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.reposition()
});
}
ngOnDestroy() {
this.overlayRef?.dispose();
this.unsubscribe.next();
this.unsubscribe.complete();
}
getPositionOptions() {
const defaultPosition = {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom'
};
switch (this.tooltipOptions?.placement) {
case 'bottom':
return {
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top'
};
case 'top':
return defaultPosition;
case 'left':
return {
originX: 'start',
originY: 'center',
overlayX: 'end',
overlayY: 'center'
};
case 'right':
return {
originX: 'end',
originY: 'center',
overlayX: 'start',
overlayY: 'center'
};
default:
return defaultPosition;
}
}
show() {
if (this.tooltipRef) {
return;
}
this.tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipComponent));
merge(fromEvent(this.tooltipRef?.location?.nativeElement, 'mouseleave'), fromEvent(this.tooltipRef?.location?.nativeElement, 'focusout'))
.pipe(takeUntil(this.unsubscribe))
.subscribe((event) => {
this.hide(event);
});
this.zone.runOutsideAngular(() => {
this.intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const isElementVisible = entry.isIntersecting;
if (!isElementVisible) {
this.zone.run(() => {
this.hide();
});
}
});
});
this.intersectionObserver.observe(this.el?.nativeElement);
});
this.setTooltipValues();
this.el?.nativeElement?.firstElementChild?.setAttribute('aria-describedby', this.tooltipOptions.tooltipId);
}
hide(event) {
const focusedElement = this.doc?.activeElement;
const isFocusedElement = focusedElement && this.el.nativeElement.contains(focusedElement);
const newTarget = event?.relatedTarget;
const isNextTargetTooltip = newTarget && this.overlayRef?.overlayElement?.contains(newTarget);
const isNextTargetElement = newTarget && this.el?.nativeElement?.contains(newTarget);
if (!newTarget || (!isNextTargetTooltip && !isNextTargetElement && !isFocusedElement)) {
this.overlayRef.detach();
this.tooltipRef = null;
this.unsubscribe.next();
this.intersectionObserver.disconnect();
this.el?.nativeElement?.firstElementChild?.removeAttribute('aria-describedby');
}
}
setTooltipValues() {
const tooltipComponent = this.tooltipRef?.instance;
if (!tooltipComponent) {
return;
}
tooltipComponent.label = this.tooltipCustomContent ? null : this.tooltipOptions?.label;
tooltipComponent.isInverse = this.tooltipOptions?.isInverse;
tooltipComponent.hasArrow = this.tooltipOptions?.hasArrow ?? true;
tooltipComponent.tooltipId = this.tooltipOptions?.tooltipId;
tooltipComponent.arrowPlacement = this.tooltipOptions?.arrowPlacement ?? 'center';
tooltipComponent.placement = this.tooltipOptions?.placement ?? 'top';
tooltipComponent.isStandalone = this.tooltipOptions?.isStandalone ?? true;
tooltipComponent.isAnimated = this.tooltipOptions?.isAnimated ?? true;
tooltipComponent.contentTemplateRef = this.tooltipCustomContent;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.OverlayPositionBuilder }, { token: i1$1.Overlay }, { token: i1$1.ScrollDispatcher }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TooltipDirective, isStandalone: true, selector: "[njTooltip]", inputs: { tooltipOptions: "tooltipOptions", tooltipCustomContent: "tooltipCustomContent" }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide($event)", "focusout": "hide($event)" } }, exportAs: ["njTooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[njTooltip]',
exportAs: 'njTooltip',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.OverlayPositionBuilder }, { type: i1$1.Overlay }, { type: i1$1.ScrollDispatcher }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.NgZone }]; }, propDecorators: { tooltipOptions: [{
type: Input
}], tooltipCustomContent: [{
type: Input
}], show: [{
type: HostListener,
args: ['mouseenter']
}, {
type: HostListener,
args: ['focusin']
}], hide: [{
type: HostListener,
args: ['mouseleave', ['$event']]
}, {
type: HostListener,
args: ['focusout', ['$event']]
}] } });
class AvatarComponent {
constructor() {
this.avatarClassName = 'nj-avatar';
/**
* Notification color
*/
this.notificationVariant = 'information';
}
/**
* @ignore
*/
getFormattedInitials() {
if (this.initials?.length > 3) {
return this?.initials.slice(0, 3);
}
else {
return this.initials;
}
}
/**
* @ignore
*/
getBadgeSize() {
switch (this.size) {
case 'xl':
return 'lg';
default:
return 'md';
}
}
/**
* @ignore
*/
getAvatarSizeClass() {
return this.size ? `${this.avatarClassName}--${this.size}` : '';
}
/**
* @ignore
*/
getAvatarDefaultIconClass() {
return !this.hasInitials() && !this.hasPicture ? `${this.avatarClassName}--default-icon` : '';
}
/**
* @ignore
*/
getAvatarInitialsClass() {
return this.hasInitials() && !this.hasPicture ? `${this.avatarClassName}--initials` : '';
}
/**
* @ignore
*/
getAvatarIsClickableClass() {
return this.isClickable ? `${this.avatarClassName}--clickable` : '';
}
/**
* @ignore
*/
getHasPictureClass() {
return this.hasPicture ? `${this.avatarClassName}--picture` : '';
}
/**
* @ignore
*/
getAvatarIsRemainingCountClass() {
return this.isRemainingCount ? `${this.avatarClassName}--remaining-count` : '';
}
/**
* @ignore
*/
hasInitials() {
return !Utils.isUndefinedOrNull(this.initials) && this.initials?.trim() !== '';
}
/**
* @ignore
*/
getAvatarClasses() {
return [
this.getAvatarDefaultIconClass(),
this.getAvatarSizeClass(),
this.getAvatarInitialsClass(),
this.getAvatarIsClickableClass(),
this.getAvatarIsRemainingCountClass(),
this.getHasPictureClass()
];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, isStandalone: true, selector: "nj-avatar", inputs: { href: "href", initials: "initials", label: "label", size: "size", hasPicture: "hasPicture", isClickable: "isClickable", notification: "notification", notificationCapedValue: "notificationCapedValue", notificationEmphasis: "notificationEmphasis", notificationVariant: "notificationVariant", notificationUnitLabel: "notificationUnitLabel", isRemainingCount: "isRemainingCount", tooltipOptions: "tooltipOptions" }, viewQueries: [{ propertyName: "avatarTemplate", first: true, predicate: ["avatarTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n\n<ng-template #tagContent>\n <ng-content></ng-content>\n <p class=\"nj-sr-only\">{{label}}</p>\n <span aria-hidden=\"true\">{{getFormattedInitials()}}</span>\n\n <nj-badge *ngIf=\"notification && size !== 'sm'\"\n [value]=\"notification\"\n [capedValue]=\"notificationCapedValue\"\n [size]=\"getBadgeSize()\"\n [variant]=\"notificationVariant\"\n [emphasis]=\"notificationEmphasis\"\n [unitLabel]=\"notificationUnitLabel\">\n </nj-badge>\n</ng-template>\n\n<ng-template #avatarTemplate>\n <a *ngIf=\"!tooltipOptions && href\" [href]=\"href\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n <button *ngIf=\"!tooltipOptions && isClickable\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n <div *ngIf=\"!tooltipOptions && !href && !isClickable\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n <a *ngIf=\"tooltipOptions && href\" [href]=\"href\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n <button *ngIf=\"tooltipOptions && isClickable\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n <div *ngIf=\"tooltipOptions && !href && !isClickable\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: BadgeComponent, selector: "nj-badge", inputs: ["emphasis", "variant", "size", "iconName", "value", "capedValue", "isUppercase", "unitLabel"] }, { kind: "directive", type: TooltipDirective, selector: "[njTooltip]", inputs: ["tooltipOptions", "tooltipCustomContent"], exportAs: ["njTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-avatar', encapsulation: ViewEncapsulation.None, standalone: true, imports: [BadgeComponent, TooltipDirective, CommonModule], template: "<ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n\n<ng-template #tagContent>\n <ng-content></ng-content>\n <p class=\"nj-sr-only\">{{label}}</p>\n <span aria-hidden=\"true\">{{getFormattedInitials()}}</span>\n\n <nj-badge *ngIf=\"notification && size !== 'sm'\"\n [value]=\"notification\"\n [capedValue]=\"notificationCapedValue\"\n [size]=\"getBadgeSize()\"\n [variant]=\"notificationVariant\"\n [emphasis]=\"notificationEmphasis\"\n [unitLabel]=\"notificationUnitLabel\">\n </nj-badge>\n</ng-template>\n\n<ng-template #avatarTemplate>\n <a *ngIf=\"!tooltipOptions && href\" [href]=\"href\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n <button *ngIf=\"!tooltipOptions && isClickable\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n <div *ngIf=\"!tooltipOptions && !href && !isClickable\" class=\"nj-avatar\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n <a *ngIf=\"tooltipOptions && href\" [href]=\"href\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n <button *ngIf=\"tooltipOptions && isClickable\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n <div *ngIf=\"tooltipOptions && !href && !isClickable\" class=\"nj-avatar\"\n njTooltip [tooltipOptions]=\"tooltipOptions\"\n [ngClass]=\"getAvatarClasses()\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n</ng-template>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { href: [{
type: Input
}], initials: [{
type: Input
}], label: [{
type: Input
}], size: [{
type: Input
}], hasPicture: [{
type: Input
}], isClickable: [{
type: Input
}], notification: [{
type: Input
}], notificationCapedValue: [{
type: Input
}], notificationEmphasis: [{
type: Input
}], notificationVariant: [{
type: Input
}], notificationUnitLabel: [{
type: Input
}], isRemainingCount: [{
type: Input
}], tooltipOptions: [{
type: Input
}], avatarTemplate: [{
type: ViewChild,
args: ['avatarTemplate']
}] } });
class AvatarPictureDirective {
constructor() {
this.class = 'nj-avatar__picture';
this.alt = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AvatarPictureDirective, isStandalone: true, selector: "[njAvatarPicture]", host: { properties: { "class": "this.class", "alt": "this.alt" } }, exportAs: ["njAvatarPicture"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPictureDirective, decorators: [{
type: Directive,
args: [{
selector: '[njAvatarPicture]',
exportAs: 'njAvatarPicture',
standalone: true
}]
}], ctorParameters: function () { return []; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], alt: [{
type: HostBinding,
args: ['alt']
}] } });
class AvatarListComponent {
constructor() {
/**
* @ignore
*/
this.avatarListClassName = 'nj-avatar-list';
/**
* Max number of avatar displayed
**/
this.max = 4;
/**
* Avatars size
**/
this.size = 'md';
/**
* Emits event on remaining count avatar mouse click
*/
this.remainingClick = new EventEmitter();
}
ngAfterContentInit() {
this.remainingCount = this.avatars?.toArray()?.length - this.max;
this.avatarsToDisplay = this.getAvatarsToDisplay();
}
/**
* @ignore
*/
getAvatarsToDisplay() {
const avatarsArray = this.avatars?.toArray();
if (Utils.isUndefinedOrNull(avatarsArray)) {
return;
}
return avatarsArray.splice(0, this.max).map((avatar) => {
avatar.size = this.size;
return avatar;
});
}
/**
* @ignore
*/
getAvatarListDensityClass() {
if (!this.density || this.density === 'default') {
return '';
}
return `${this.avatarListClassName}--${this.density}`;
}
/**
* @ignore
*/
getRemainingCountInitials() {
return `+ ${this.remainingCount}`;
}
/**
* @ignore
*/
getRemainingCountLabel() {
return typeof this.showMoreLabel === 'function' ? this.showMoreLabel(this.remainingCount) : this.showMoreLabel;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarListComponent, isStandalone: true, selector: "nj-avatar-list", inputs: { max: "max", density: "density", size: "size", remainingTooltipOptions: "remainingTooltipOptions", showMoreLabel: "showMoreLabel" }, outputs: { remainingClick: "remainingClick" }, queries: [{ propertyName: "avatars", predicate: AvatarComponent }], ngImport: i0, template: "<div class=\"nj-avatar-list\" [ngClass]=\"[getAvatarListDensityClass()]\">\n <ng-container *ngFor=\"let avatar of avatarsToDisplay\">\n <ng-container *ngTemplateOutlet=\"avatar?.avatarTemplate\"></ng-container>\n </ng-container>\n <nj-avatar *ngIf=\"remainingCount > 0\"\n (click)=\"remainingClick?.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"getRemainingCountInitials()\"\n [size]=\"size\"\n [label]=\"getRemainingCountLabel()\"\n ></nj-avatar>\n</div>\n", styles: [".nj-avatar-list nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--default))}.nj-avatar-list--compact nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--compact))}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "nj-avatar", inputs: ["href", "initials", "label", "size", "hasPicture", "isClickable", "notification", "notificationCapedValue", "notificationEmphasis", "notificationVariant", "notificationUnitLabel", "isRemainingCount", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarListComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-avatar-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [AvatarComponent, CommonModule], template: "<div class=\"nj-avatar-list\" [ngClass]=\"[getAvatarListDensityClass()]\">\n <ng-container *ngFor=\"let avatar of avatarsToDisplay\">\n <ng-container *ngTemplateOutlet=\"avatar?.avatarTemplate\"></ng-container>\n </ng-container>\n <nj-avatar *ngIf=\"remainingCount > 0\"\n (click)=\"remainingClick?.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"getRemainingCountInitials()\"\n [size]=\"size\"\n [label]=\"getRemainingCountLabel()\"\n ></nj-avatar>\n</div>\n", styles: [".nj-avatar-list nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--default))}.nj-avatar-list--compact nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--compact))}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { max: [{
type: Input
}], density: [{
type: Input
}], size: [{
type: Input
}], remainingTooltipOptions: [{
type: Input
}], remainingClick: [{
type: Output
}], showMoreLabel: [{
type: Input
}], avatars: [{
type: ContentChildren,
args: [AvatarComponent]
}] } });
class LinkComponent {
get tabIndex() {
return this.tabIndexAttribute ?? (this.routerLink ? '-1' : undefined);
}
constructor(tabIndexAttribute) {
this.tabIndexAttribute = tabIndexAttribute;
this.linkClass = 'nj-link';
this.iconClass = 'nj-link-icon';
/**
* Link variant theme
*/
this.variant = 'default';
/**
* If link opens in a new page, an icon notifying the user is placed on the right of the link
*/
this.isExternal = false;
/**
* Whether link has icon
*/
this.hasIcon = false;
/**
* Whether icon is before or after text
*/
this.iconPosition = 'after';
this.routerLink = inject(RouterLink, { self: true, optional: true });
}
/**
* @ignore
*/
isExternalLink() {
return this.isExternal || this.target === '_blank';
}
/**
* @ignore
*/
getLinkVariantClass() {
if (!this.variant || this.variant === 'default') {
return '';
}
return `${this.linkClass}--${this.variant}`;
}
/**
* @ignore
*/
getIconClass() {
if (!this.hasIcon && !this.isExternalLink()) {
return '';
}
return this.iconClass;
}
/**
* @ignore
*/
getIconPositionClass() {
if (this.iconPosition !== 'before') {
return '';
}
return `${this.iconClass}--${this.iconPosition}`;
}
/**
* @ignore
*/
getSizeClass() {
if (!this.size) {
return '';
}
return `${this.linkClass}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkComponent, deps: [{ token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinkComponent, isStandalone: true, selector: "nj-link", inputs: { variant: "variant", size: "size", target: "target", href: "href", rel: "rel", isExternal: "isExternal", externalLabel: "externalLabel", hasIcon: "hasIcon", icon: "icon", iconPosition: "iconPosition", title: "title", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<a class=\"nj-link\" *ngIf=\"!routerLink\"\n [ngClass]=\"[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]\"\n [attr.href]=\"href\"\n [attr.rel]=\"rel\"\n [attr.target]=\"target\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.title]=\"title\"\n [attr.id]=\"id\">\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n<a class=\"nj-link\" *ngIf=\"routerLink\"\n [ngClass]=\"[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]\"\n [routerLink]=\"routerLink['commands']\"\n [target]=\"routerLink.target\"\n [queryParams]=\"routerLink.queryParams\"\n [fragment]=\"routerLink.fragment\"\n [queryParamsHandling]=\"routerLink.queryParamsHandling\"\n [state]=\"routerLink.state\"\n [relativeTo]=\"routerLink.relativeTo\"\n [preserveFragment]=\"routerLink.preserveFragment\"\n [skipLocationChange]=\"routerLink.skipLocationChange\"\n [replaceUrl]=\"routerLink.replaceUrl\"\n [attr.rel]=\"rel\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.title]=\"title\"\n [attr.id]=\"id\">\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n<ng-template #linkContent>\n <ng-content></ng-content>\n <ng-container *ngIf=\"hasIcon\">\n <nj-icon [name]=\"icon\" *ngIf=\"icon && !isExternalLink()\"></nj-icon>\n <ng-container *ngIf=\"!icon && !isExternalLink()\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!icon && isExternalLink()\">\n <span class=\"nj-sr-only\"> {{externalLabel}}</span>\n <!-- Only useful for projects that don't use material icons -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n <path\n d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/>\n </svg>\n </ng-container>\n</ng-template>\n", styles: [".nj-link{display:inline-flex;gap:var(--nj-semantic-size-spacing-8);align-items:center;text-decoration:none;cursor:pointer}.nj-link:not(.stretched-link).nj-link-icon i{margin-right:0;margin-left:0}.nj-link.nj-link-icon--before{flex-direction:row-reverse}.nj-link svg{width:18px;height:18px;fill:currentColor}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-link', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, CommonModule, RouterLink], template: "<a class=\"nj-link\" *ngIf=\"!routerLink\"\n [ngClass]=\"[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]\"\n [attr.href]=\"href\"\n [attr.rel]=\"rel\"\n [attr.target]=\"target\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.title]=\"title\"\n [attr.id]=\"id\">\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n<a class=\"nj-link\" *ngIf=\"routerLink\"\n [ngClass]=\"[getLinkVariantClass(), getIconClass(), getIconPositionClass(), getSizeClass()]\"\n [routerLink]=\"routerLink['commands']\"\n [target]=\"routerLink.target\"\n [queryParams]=\"routerLink.queryParams\"\n [fragment]=\"routerLink.fragment\"\n [queryParamsHandling]=\"routerLink.queryParamsHandling\"\n [state]=\"routerLink.state\"\n [relativeTo]=\"routerLink.relativeTo\"\n [preserveFragment]=\"routerLink.preserveFragment\"\n [skipLocationChange]=\"routerLink.skipLocationChange\"\n [replaceUrl]=\"routerLink.replaceUrl\"\n [attr.rel]=\"rel\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.title]=\"title\"\n [attr.id]=\"id\">\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n<ng-template #linkContent>\n <ng-content></ng-content>\n <ng-container *ngIf=\"hasIcon\">\n <nj-icon [name]=\"icon\" *ngIf=\"icon && !isExternalLink()\"></nj-icon>\n <ng-container *ngIf=\"!icon && !isExternalLink()\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!icon && isExternalLink()\">\n <span class=\"nj-sr-only\"> {{externalLabel}}</span>\n <!-- Only useful for projects that don't use material icons -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n <path\n d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/>\n </svg>\n </ng-container>\n</ng-template>\n", styles: [".nj-link{display:inline-flex;gap:var(--nj-semantic-size-spacing-8);align-items:center;text-decoration:none;cursor:pointer}.nj-link:not(.stretched-link).nj-link-icon i{margin-right:0;margin-left:0}.nj-link.nj-link-icon--before{flex-direction:row-reverse}.nj-link svg{width:18px;height:18px;fill:currentColor}\n"] }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Attribute,
args: ['tabindex']
}] }]; }, propDecorators: { tabIndex: [{
type: HostBinding,
args: ['attr.tabindex']
}], variant: [{
type: Input
}], size: [{
type: Input
}], target: [{
type: Input
}], href: [{
type: Input
}], rel: [{
type: Input
}], isExternal: [{
type: Input
}], externalLabel: [{
type: Input
}], hasIcon: [{
type: Input
}], icon: [{
type: Input
}], iconPosition: [{
type: Input
}], title: [{
type: Input
}], id: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}] } });
class BreadcrumbItemComponent {
constructor() {
/**
* Whether item is active
*/
this.isActive = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbItemComponent, isStandalone: true, selector: "nj-breadcrumb-item", inputs: { isActive: "isActive", href: "href", target: "target", icon: "icon", iconPosition: "iconPosition", label: "label" }, viewQueries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n <nj-link *ngIf=\"!isActive\" variant=\"grayed\" size=\"sm\"\n [href]=\"href\" [target]=\"target\"\n [hasIcon]=\"!!icon\" [icon]=\"icon\" [iconPosition]=\"iconPosition\">\n <span class=\"nj-sr-only\">{{label}}</span>\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </nj-link>\n\n <ng-container *ngIf=\"isActive\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #itemContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: LinkComponent, selector: "nj-link", inputs: ["variant", "size", "target", "href", "rel", "isExternal", "externalLabel", "hasIcon", "icon", "iconPosition", "title", "id", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [LinkComponent, CommonModule], template: "<ng-template #itemTemplate>\n <nj-link *ngIf=\"!isActive\" variant=\"grayed\" size=\"sm\"\n [href]=\"href\" [target]=\"target\"\n [hasIcon]=\"!!icon\" [icon]=\"icon\" [iconPosition]=\"iconPosition\">\n <span class=\"nj-sr-only\">{{label}}</span>\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </nj-link>\n\n <ng-container *ngIf=\"isActive\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #itemContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
type: Input
}], href: [{
type: Input
}], target: [{
type: Input
}], icon: [{
type: Input
}], iconPosition: [{
type: Input
}], label: [{
type: Input
}], itemTemplate: [{
type: ViewChild,
args: ['itemTemplate']
}] } });
class BreadcrumbComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* Describes the navigation to screen reader users (who navigate the page using landmarks)
*
* @default "Breadcrumbs"
*/
this.ariaLabel = 'Breadcrumbs';
/**
* Accessible text alternative for the "show more" button when the breadcrumb is minified.
*
* @default "Show hidden items"
*/
this.showMoreLabel = 'Show hidden items';
}
ngAfterContentInit() {
this.isMinified = this.breadcrumbItems?.toArray()?.length > 4;
this.leftContent = this.getLeftContentToDisplay();
this.rightContent = this.getRightContentToDisplay();
}
ngAfterContentChecked() {
this.cdr.markForCheck();
}
/**
* @ignore
*/
seeAll() {
this.isMinified = false;
this.leftContent = this.getLeftContentToDisplay();
this.rightContent = this.getRightContentToDisplay();
this.cdr.markForCheck();
// Focus first revealed item
setTimeout(() => {
this.olRef.nativeElement.childNodes[2]?.querySelector('a')?.focus();
});
}
/**
* @ignore
*/
getLeftContentToDisplay() {
const breadcrumbItemsArray = this.breadcrumbItems?.toArray();
if (Utils.isUndefinedOrNull(breadcrumbItemsArray)) {
return;
}
return this.isMinified ? breadcrumbItemsArray.splice(0, 1) : breadcrumbItemsArray;
}
/**
* @ignore
*/
getRightContentToDisplay() {
if (!this.isMinified) {
return;
}
const breadcrumbItemsArray = this.breadcrumbItems?.toArray();
const breadcrumbItemsLength = breadcrumbItemsArray?.length;
return breadcrumbItemsArray[breadcrumbItemsLength - 1];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbComponent, isStandalone: true, selector: "nj-breadcrumb", inputs: { ariaLabel: "ariaLabel", showMoreLabel: "showMoreLabel" }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], viewQueries: [{ propertyName: "olRef", first: true, predicate: ["olRef"], descendants: true }], ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel\">\n <ol class=\"nj-breadcrumb\" #olRef>\n <ng-container *ngIf=\"leftContent\">\n <li class=\"nj-breadcrumb__item\" *ngFor=\"let item of leftContent\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n </ng-container>\n <li class=\"nj-breadcrumb__see-more\" *ngIf=\"isMinified\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{showMoreLabel}}</span>\n </button>\n </li>\n <li class=\"nj-breadcrumb__item\" *ngIf=\"isMinified && rightContent\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n </ol>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [BreadcrumbItemComponent, CommonModule], template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel\">\n <ol class=\"nj-breadcrumb\" #olRef>\n <ng-container *ngIf=\"leftContent\">\n <li class=\"nj-breadcrumb__item\" *ngFor=\"let item of leftContent\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n </ng-container>\n <li class=\"nj-breadcrumb__see-more\" *ngIf=\"isMinified\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{showMoreLabel}}</span>\n </button>\n </li>\n <li class=\"nj-breadcrumb__item\" *ngIf=\"isMinified && rightContent\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n </ol>\n</nav>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
type: Input
}], showMoreLabel: [{
type: Input
}], breadcrumbItems: [{
type: ContentChildren,
args: [BreadcrumbItemComponent]
}], olRef: [{
type: ViewChild,
args: ['olRef']
}] } });
class BulletComponent {
constructor() {
this.bulletClassName = 'nj-bullet';
/**
* Bullet variant
*/
this.variant = 'brand';
/**
* Bullet size
*/
this.size = 'md';
}
/**
* @ignore
*/
getBulletVariantClass() {
if (!this.variant || !Utils.isUndefinedOrNull(this.customColor)) {
return '';
}
return `${this.bulletClassName}--${this.variant}`;
}
/**
* @ignore
*/
getButtonSizeClass() {
if (!this.size) {
return '';
}
return `${this.bulletClassName}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulletComponent, isStandalone: true, selector: "nj-bullet", inputs: { variant: "variant", customColor: "customColor", size: "size" }, ngImport: i0, template: "<div class=\"nj-bullet\" [ngClass]=\"[getBulletVariantClass(), getButtonSizeClass()]\"\n [style.background-color]=\"customColor\">\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulletComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-bullet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-bullet\" [ngClass]=\"[getBulletVariantClass(), getButtonSizeClass()]\"\n [style.background-color]=\"customColor\">\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { variant: [{
type: Input
}], customColor: [{
type: Input
}], size: [{
type: Input
}] } });
class CardComponent {
constructor() {
/**
* Whether card has border or no
*/
this.hasBorder = false;
/**
* Whether card flow is horizontal
*/
this.isHorizontal = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, isStandalone: true, selector: "nj-card", inputs: { hasBorder: "hasBorder", isHorizontal: "isHorizontal" }, ngImport: i0, template: "<div class=\"nj-card\" [ngClass]=\"{'nj-card--border': hasBorder, 'nj-card--horizontal': isHorizontal}\">\n <div class=\"nj-card__img-wrapper\">\n <ng-content select=\"[njCardImage]\"></ng-content>\n </div>\n <div class=\"nj-card__body\">\n <div class=\"nj-card__title\">\n <ng-content select=\"[njCardTitle]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["nj-card{display:block}.nj-card__titles:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-card\" [ngClass]=\"{'nj-card--border': hasBorder, 'nj-card--horizontal': isHorizontal}\">\n <div class=\"nj-card__img-wrapper\">\n <ng-content select=\"[njCardImage]\"></ng-content>\n </div>\n <div class=\"nj-card__body\">\n <div class=\"nj-card__title\">\n <ng-content select=\"[njCardTitle]\"></ng-content>\n </div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["nj-card{display:block}.nj-card__titles:empty{display:none}\n"] }]
}], propDecorators: { hasBorder: [{
type: Input
}], isHorizontal: [{
type: Input
}] } });
class CardImageDirective {
constructor(el) {
this.el = el;
this.class = 'nj-card__img';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardImageDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CardImageDirective, isStandalone: true, selector: "[njCardImage]", host: { properties: { "class": "this.class" } }, exportAs: ["njCardImage"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardImageDirective, decorators: [{
type: Directive,
args: [{
selector: '[njCardImage]',
exportAs: 'njCardImage',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class CustomLabelDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomLabelDirective, isStandalone: true, selector: "[njCustomLabel]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomLabelDirective, decorators: [{
type: Directive,
args: [{
selector: '[njCustomLabel]',
standalone: true
}]
}] });
const sizeKeys = Object.keys(Tokens.semantic.size.icon);
class IconEngieComponent extends IconBaseComponent {
constructor() {
super(...arguments);
/**
* Icon variant
*/
this.variant = 'default';
}
getClassName() {
const variantClass = this.variant && this.variant !== 'default' ? `${this.ICON_CLASS}--${this.variant}` : null;
return [variantClass, this.className].filter((cls) => !Utils.isUndefinedOrNull(cls)).join(' ');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconEngieComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconEngieComponent, isStandalone: true, selector: "nj-icon-engie", inputs: { name: "name", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"true\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n", dependencies: [{ kind: "component", type: IconBaseComponent, selector: "nj-icon-base", inputs: ["isEngieIcon", "name", "ariaLabel", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconEngieComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-engie', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconBaseComponent], template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"true\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n" }]
}], propDecorators: { name: [{
type: Input
}], variant: [{
type: Input
}] } });
const engieIconName = [
'ten-minus',
'ten-loading',
'ten-refresh',
'ten-plus',
'twenty-four',
'two-thousand-minus',
'two-thousand-plus',
'add',
'air',
'arrowleft',
'arrowright',
'atoz',
'balance',
'building-search',
'building',
'call',
'camera',
'card-money',
'card-smartphone',
'card-validate',
'cardcross',
'cardexport',
'cardload',
'cardlock',
'cards',
'cat',
'chat',
'chatbot',
'city',
'clock-sleep',
'clock',
'counter',
'cross',
'degrees',
'diagram',
'document-data',
'document-download',
'document-hand',
'document-money',
'document-search',
'document-upload',
'document',
'dropbox',
'duo',
'electric-car',
'electric-fire',
'electric-outlet',
'electric',
'enlighten',
'envelope',
'exclamation',
'expert',
'eye',
'family-1',
'family-2',
'family-3',
'finger-touch',
'fire',
'forest',
'gas-pump',
'gauge',
'hand-tool',
'handkey',
'handup',
'hob',
'house-energy',
'house',
'houses',
'imbalance',
'info',
'insulation',
'juggle',
'label-for-rent',
'label-for-sale',
'like',
'list',
'lock',
'luggage',
'map',
'medal',
'moon',
'nature',
'north-earth',
'number-counter',
'person-rotate',
'picture-web',
'piggybank',
'plan',
'planning-cancel',
'planning-clock',
'profile',
'question',
'recycling',
'robot',
'sale-label',
'satellite',
'shower',
'silence',
'smartphone-hand',
'smartphone-home',
'smartphone',
'smoke',
'solar-panel-flux',
'solar-panel',
'squaremeter',
'sun',
'sunmoon',
'tanker',
'temperature',
'tools',
'transfer',
'trash',
'unlock',
'validate',
'ventilator',
'water',
'wifi'
];
class StatusIndicatorComponent {
constructor() {
this.statusIndicatorClass = 'nj-status-indicator';
this.statusIndicatorClasses = {
offline: `${this.statusIndicatorClass}--offline`,
online: `${this.statusIndicatorClass}--online`,
away: `${this.statusIndicatorClass}--away`,
'do-not-disturb': `${this.statusIndicatorClass}--do-not-disturb`,
busy: `${this.statusIndicatorClass}--busy`,
unknown: `${this.statusIndicatorClass}--unknown`,
error: `${this.statusIndicatorClass}--error`,
success: `${this.statusIndicatorClass}--success`,
warning: `${this.statusIndicatorClass}--warning`,
'in-progress': `${this.statusIndicatorClass}--in-progress`,
information: `${this.statusIndicatorClass}--information`,
discovery: `${this.statusIndicatorClass}--discovery`,
planet: `${this.statusIndicatorClass}--planet`,
};
/**
* Status Indicator status
*/
this.status = 'online';
}
ngAfterViewInit() {
this.hasLabel = this.labelWrapper.nativeElement && this.labelWrapper.nativeElement.innerHTML !== '';
}
getStatusClass() {
const statusClass = this.statusIndicatorClasses[this.status];
if (!this.status || !statusClass) {
return '';
}
return statusClass;
}
getSizeClass() {
if (!this.size || this.size === 'md') {
return '';
}
return `${this.statusIndicatorClass}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StatusIndicatorComponent, isStandalone: true, selector: "nj-status-indicator", inputs: { status: "status", size: "size" }, viewQueries: [{ propertyName: "labelWrapper", first: true, predicate: ["labelWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"nj-status-indicator\" [ngClass]=\"[getStatusClass(), getSizeClass()]\" [attr.aria-hidden]=\"hasLabel ? null : true\">\n <div class=\"nj-status-indicator__svg\"></div>\n <p class=\"nj-status-indicator__text\" #labelWrapper>\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".nj-status-indicator__text:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusIndicatorComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div class=\"nj-status-indicator\" [ngClass]=\"[getStatusClass(), getSizeClass()]\" [attr.aria-hidden]=\"hasLabel ? null : true\">\n <div class=\"nj-status-indicator__svg\"></div>\n <p class=\"nj-status-indicator__text\" #labelWrapper>\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".nj-status-indicator__text:empty{display:none}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { status: [{
type: Input
}], size: [{
type: Input
}], labelWrapper: [{
type: ViewChild,
args: ['labelWrapper']
}] } });
class InlineMessageComponent {
constructor(el) {
this.el = el;
/**
* @ignore
*/
this.inlineMessageClass = 'nj-inline-message';
/**
* Inline message variant
*/
this.variant = 'error';
/**
* Whether inline message has status indicator or not
*/
this.hasStatus = true;
/**
* Whether inline message is closeable or not
*/
this.isClosable = false;
/**
* Output event when inline message is closed
*/
this.closeClick = new EventEmitter();
}
/**
* @ignore
*/
getVariantClass() {
if (!this.variant && this.variant === 'error') {
return '';
}
return `${this.inlineMessageClass}--${this.variant}`;
}
/**
* @ignore
*/
removeInlineMessage(event) {
this.el?.nativeElement?.remove();
this.closeClick.emit(event);
}
/**
* @ignore
*/
get isFatalError() {
return this.variant === 'fatal-error';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineMessageComponent, isStandalone: true, selector: "nj-inline-message", inputs: { variant: "variant", hasStatus: "hasStatus", isClosable: "isClosable" }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"nj-inline-message\" [ngClass]=\"getVariantClass()\">\n <nj-status-indicator class=\"nj-inline-message__status\" *ngIf=\"hasStatus && !isFatalError\" [status]=\"variant\"></nj-status-indicator>\n <div class=\"nj-inline-message__content\">\n <h4 class=\"nj-inline-message__title\">\n <ng-content select=\"[njInlineMessageTitle]\"></ng-content>\n </h4>\n <p class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </p>\n </div>\n <nj-icon-button *ngIf=\"isClosable\" class=\"nj-inline-message__close\" icon=\"close\" [variant]=\"!isFatalError ? 'primary' : 'inverse'\"\n (buttonClick)=\"removeInlineMessage($event)\">\n </nj-icon-button>\n</div>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "component", type: StatusIndicatorComponent, selector: "nj-status-indicator", inputs: ["status", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-inline-message', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconButtonComponent, StatusIndicatorComponent, CommonModule], template: "<div class=\"nj-inline-message\" [ngClass]=\"getVariantClass()\">\n <nj-status-indicator class=\"nj-inline-message__status\" *ngIf=\"hasStatus && !isFatalError\" [status]=\"variant\"></nj-status-indicator>\n <div class=\"nj-inline-message__content\">\n <h4 class=\"nj-inline-message__title\">\n <ng-content select=\"[njInlineMessageTitle]\"></ng-content>\n </h4>\n <p class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </p>\n </div>\n <nj-icon-button *ngIf=\"isClosable\" class=\"nj-inline-message__close\" icon=\"close\" [variant]=\"!isFatalError ? 'primary' : 'inverse'\"\n (buttonClick)=\"removeInlineMessage($event)\">\n </nj-icon-button>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], hasStatus: [{
type: Input
}], isClosable: [{
type: Input
}], closeClick: [{
type: Output
}] } });
const defaultParams$1 = {
params: { enterAnimationDuration: '150ms' },
};
const modalAnimation = {
modal: trigger('modal', [
state('void', style({ opacity: 0, transform: 'scale(0.7)' })),
state('*', style({ opacity: 1, transform: 'none' })),
transition(':enter', animate(`{{enterAnimationDuration}} ${njSemanticMotionEasingLinearOutSlowIn}`), defaultParams$1),
]),
};
class ModalComponent {
/**
* @param dialogRef refers to `@angular/cdk` DialogRef
*/
constructor(dialogRef) {
this.dialogRef = dialogRef;
/**
* Whether modal has close icon or not
*/
this.hasCloseIcon = false;
/**
* Whether modal is vertically centered
*/
this.isVerticallyCentered = true;
/**
* Emits void event when modal is closed via the close icon
*/
this.closed = new EventEmitter();
const backdropElement = this.dialogRef?.overlayRef?.backdropElement;
// Add fluid backdrop background color to dialog overlay
if (backdropElement) {
backdropElement.style.backgroundColor = 'var(--nj-component-backdrop-color-background)';
}
}
get titleId() {
return `${this.modalId}-title`;
}
ngAfterViewInit() {
// Manually set the `aria-labelledby` attribute on the modal
setTimeout(() => {
// @ts-expect-error
this.dialogRef?.containerInstance._elementRef.nativeElement.setAttribute('aria-labelledby', this.titleId);
});
}
/**
* Emits closed event and calls dialogRef.close()
*/
closeModal() {
this.closed?.emit();
this.dialogRef?.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "nj-modal", inputs: { hasCloseIcon: "hasCloseIcon", closeLabel: "closeLabel", isVerticallyCentered: "isVerticallyCentered", modalId: "modalId" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"nj-modal nj-modal--visible\" [ngClass]=\"{'nj-modal--vertical-centered': isVerticallyCentered}\">\n <div class=\"nj-modal__dialog\">\n <div class=\"nj-modal__content\" @modal>\n <div class=\"nj-modal__header\">\n <h1 class=\"nj-modal__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n <nj-icon-button icon=\"close\" size=\"sm\" class=\"nj-modal__close\"\n (buttonClick)=\"closeModal()\"\n *ngIf=\"hasCloseIcon\" [label]=\"closeLabel\">\n </nj-icon-button>\n </div>\n <div class=\"nj-modal__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [modalAnimation.modal], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [modalAnimation.modal], standalone: true, imports: [IconButtonComponent, CommonModule], template: "<div class=\"nj-modal nj-modal--visible\" [ngClass]=\"{'nj-modal--vertical-centered': isVerticallyCentered}\">\n <div class=\"nj-modal__dialog\">\n <div class=\"nj-modal__content\" @modal>\n <div class=\"nj-modal__header\">\n <h1 class=\"nj-modal__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n <nj-icon-button icon=\"close\" size=\"sm\" class=\"nj-modal__close\"\n (buttonClick)=\"closeModal()\"\n *ngIf=\"hasCloseIcon\" [label]=\"closeLabel\">\n </nj-icon-button>\n </div>\n <div class=\"nj-modal__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1$2.DialogRef, decorators: [{
type: Optional
}] }]; }, propDecorators: { hasCloseIcon: [{
type: Input
}], closeLabel: [{
type: Input
}], isVerticallyCentered: [{
type: Input
}], modalId: [{
type: Input
}], closed: [{
type: Output
}] } });
class TagComponent {
constructor(el) {
this.el = el;
this.tagClassName = 'nj-tag';
/**
* Tag size
*/
this.size = 'md';
/**
* Whether tag should remove himself when close is clicked
*/
this.shouldAutoDestruct = true;
/**
* Output event when clickable tag is clicked
*/
this.tagClick = new EventEmitter();
/**
* Output event when tag is closed. Focus must be set to either previous tag, next tag or any relevant element.
*/
this.closeClick = new EventEmitter();
}
/**
* @ignore
*/
getTagVariantClass() {
if (!this.variant) {
return '';
}
return `${this.tagClassName}--${this.variant}`;
}
/**
* @ignore
*/
getTagSizeClass() {
if (!this.size || this.size === 'md') {
return '';
}
return `${this.tagClassName}--${this.size}`;
}
/**
* @ignore
*/
getTagDisabledClass() {
if (!this.isDisabled) {
return '';
}
return `${this.tagClassName}--disabled`;
}
/**
* @ignore
*/
removeTag(event) {
event?.preventDefault();
event?.stopImmediatePropagation();
if (this.shouldAutoDestruct) {
this.el?.nativeElement?.remove();
}
this.closeClick.emit(event);
}
focusIconButton() {
this.el?.nativeElement?.querySelector('nj-icon-button button')?.focus();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, isStandalone: true, selector: "nj-tag", inputs: { variant: "variant", size: "size", iconName: "iconName", href: "href", target: "target", isClickable: "isClickable", isClosable: "isClosable", shouldAutoDestruct: "shouldAutoDestruct", closeLabel: "closeLabel", isDisabled: "isDisabled", hasCustomIcon: "hasCustomIcon" }, outputs: { tagClick: "tagClick", closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"nj-tag\" [ngClass]=\"[getTagVariantClass(), getTagSizeClass(), getTagDisabledClass()]\">\n <!-- Icon -->\n <span aria-hidden=\"true\" class=\"nj-tag__icon nj-icon-material material-icons\" *ngIf=\"iconName && !hasCustomIcon\">{{\n iconName\n }}</span>\n <span aria-hidden=\"true\" class=\"nj-tag__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n\n <ng-container *ngTemplateOutlet=\"tagWrapper\"></ng-container>\n\n <!-- Close button -->\n <nj-icon-button\n *ngIf=\"isClosable && !isDisabled\"\n icon=\"close\"\n class=\"nj-tag__close\"\n size=\"2xs\"\n type=\"button\"\n [label]=\"closeLabel\"\n (buttonClick)=\"removeTag($event)\"\n >\n </nj-icon-button>\n</div>\n\n<!-- Render a link, a button or a span for the tag content -->\n<ng-template #tagWrapper>\n <a\n *ngIf=\"href\"\n class=\"nj-tag__link\"\n [attr.href]=\"isDisabled ? null : href\"\n [attr.target]=\"isDisabled ? null : target\"\n [attr.role]=\"isDisabled ? 'link' : null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"isClickable ? tagClick?.emit($event) : null\"\n >\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n\n <button\n *ngIf=\"!href && isClickable\"\n class=\"nj-tag__button\"\n [attr.disabled]=\"isDisabled ? 'disabled' : null\"\n (click)=\"tagClick?.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n\n <p *ngIf=\"!href && !isClickable\" class=\"nj-tag__text\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </p>\n</ng-template>\n\n<!-- Tag inner text content -->\n<ng-template #tagContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconButtonComponent, CommonModule], template: "<div class=\"nj-tag\" [ngClass]=\"[getTagVariantClass(), getTagSizeClass(), getTagDisabledClass()]\">\n <!-- Icon -->\n <span aria-hidden=\"true\" class=\"nj-tag__icon nj-icon-material material-icons\" *ngIf=\"iconName && !hasCustomIcon\">{{\n iconName\n }}</span>\n <span aria-hidden=\"true\" class=\"nj-tag__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n\n <ng-container *ngTemplateOutlet=\"tagWrapper\"></ng-container>\n\n <!-- Close button -->\n <nj-icon-button\n *ngIf=\"isClosable && !isDisabled\"\n icon=\"close\"\n class=\"nj-tag__close\"\n size=\"2xs\"\n type=\"button\"\n [label]=\"closeLabel\"\n (buttonClick)=\"removeTag($event)\"\n >\n </nj-icon-button>\n</div>\n\n<!-- Render a link, a button or a span for the tag content -->\n<ng-template #tagWrapper>\n <a\n *ngIf=\"href\"\n class=\"nj-tag__link\"\n [attr.href]=\"isDisabled ? null : href\"\n [attr.target]=\"isDisabled ? null : target\"\n [attr.role]=\"isDisabled ? 'link' : null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"isClickable ? tagClick?.emit($event) : null\"\n >\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n\n <button\n *ngIf=\"!href && isClickable\"\n class=\"nj-tag__button\"\n [attr.disabled]=\"isDisabled ? 'disabled' : null\"\n (click)=\"tagClick?.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n\n <p *ngIf=\"!href && !isClickable\" class=\"nj-tag__text\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </p>\n</ng-template>\n\n<!-- Tag inner text content -->\n<ng-template #tagContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], iconName: [{
type: Input
}], href: [{
type: Input
}], target: [{
type: Input
}], isClickable: [{
type: Input
}], isClosable: [{
type: Input
}], shouldAutoDestruct: [{
type: Input
}], closeLabel: [{
type: Input
}], isDisabled: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], tagClick: [{
type: Output
}], closeClick: [{
type: Output
}] } });
class MultiSelectComponent extends FormItemComponent {
static { this.ESCAPE_CODE = 'Escape'; }
static { this.ENTER_CODE = 'Enter'; }
static { this.UP_CODE = 'ArrowUp'; }
static { this.DOWN_CODE = 'ArrowDown'; }
/*
Regex matching every alpha-numeric characters.
\d : every digits
\p{Letter} : every letters in the latin alphabet including letters with diacritics
The "u" flag enables unicode mode required to use `\p{Letter}`.
See :
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes#general_categories
- https://unicode.org/reports/tr18/#General_Category_Property
*/
static { this.ALPHA_NUMERIC_REGEX = /^[\d\p{Letter}]$/u; }
constructor(element, cdr, document) {
super();
this.element = element;
this.cdr = cdr;
this.document = document;
/**
* @ignore
*/
this._onChange = (_) => {
};
/**
* @ignore
*/
this._onTouched = () => {
};
/**
* Notifier used to stop items click event subscription.
* @ignore
*/
this.unsubscribe = new Subject();
this.childOptionsChange = new Subject();
/**
* @ignore
*/
this.isOpen = false;
/**
* @ignore
*/
this.selectedIndexes = new Set();
/**
* @ignore
*/
this.selectedValues = new Set();
/**
* Icon name
*/
this.iconName = 'keyboard_arrow_down';
/**
* Whether or no to display selected items. When set to `false` and number of selected > 1,
* instead of displaying each selected item as tags it only display one tag `X selected`
*/
this.displaySelectedItems = true;
/**
* Selected text when `displaySelectedItems = false`:
* @example '5 selected`
*/
this.selectedText = 'selected';
/**
* Selected options tag color. Can only be grey or brand
*/
this.tagColor = 'grey';
/**
* Tag close label for accessibility, default is `Deselect` and it will be followed by the tag label. So focusing the close icon will read `Remove tag label`.
* Make sure to set a meaningful value and a translated one
*/
this.tagCloseLabel = 'Deselect';
/**
* Tag close label for accessibility, default is `Deselect all`. So focusing the close icon will read `Deselect all`.
* Make sure to set a meaningful value and a translated one
*/
this.tagResetSelectionLabel = 'Deselect all';
}
ngOnInit() {
fromEvent(this.document, 'click')
.pipe(takeUntil(this.unsubscribe))
.subscribe((e) => this.handleOutsideClick(e));
}
ngAfterViewInit() {
this.setInputsAndListenersOnOptions();
this.updateSelectedIndexes();
this.cdr.detectChanges();
this.selectOptions?.changes
.pipe(takeUntil(this.unsubscribe))
.subscribe(() => {
setTimeout(() => {
this.setInputsAndListenersOnOptions();
this.updateSelectedIndexes();
this.cdr.detectChanges();
});
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
setInputsAndListenersOnOptions() {
this.childOptionsChange.next();
const unsubscribeCond$ = race(this.unsubscribe, this.childOptionsChange);
this.selectOptions?.forEach((item, index) => {
item.role = 'option';
item.updateSelected(this.selectedIndexes.has(index));
item.isCheckboxContent = true;
item.checkboxContentId = this.getOptionId(index);
item.itemClick
.pipe(takeUntil(unsubscribeCond$))
.subscribe(() => {
this.toggleItem(item, index);
});
});
}
updateSelectedIndexes() {
const selectOptionsArr = this.selectOptions?.toArray();
if (selectOptionsArr) {
this.selectedValues = new Set([...this.selectedValues].filter(value => selectOptionsArr.some(opt => {
return opt?.getValue() === value;
})));
this.selectedIndexes = new Set(selectOptionsArr
.map((opt, index) => {
return this.selectedValues.has(opt.getValue()) ? index : -1;
})
.filter(index => index >= 0));
}
else {
this.selectedIndexes.clear();
this.selectedValues.clear();
}
this.updateOptionsActive();
}
/**
* @ignore
*/
toggleByIndex(e, index, tagIndex) {
e?.stopPropagation();
const item = this.selectOptions.get(index);
this.toggleItem(item, index);
// When clicking with a mouse e.detail counts the number of clicks, however when using keyboard it is always 0
const isEventTriggeredWithKeyboard = e?.detail === 0;
if (!isEventTriggeredWithKeyboard) {
this.buttonEl?.nativeElement?.focus();
return;
}
// We use a set timeout to make sure the focus is done after is re-rendered
setTimeout(() => {
if (this.tags.length) {
const indexToFocus = tagIndex === this.tags.length ? tagIndex - 1 : tagIndex;
this.tags.get(indexToFocus)?.focusIconButton();
}
else {
this.buttonEl?.nativeElement?.focus();
}
});
}
/**
* @ignore
*/
resetSelection(e) {
e.stopPropagation();
this.buttonEl.nativeElement.focus();
this.selectedIndexes.clear();
this.selectedValues.clear();
this.updateOptionsActive();
this._onChange(Array.from(this.selectedValues));
}
toggleItem(item, index) {
if (!item) {
return;
}
this.toggleValueInSelectedValue(item?.getValue());
this.toggleIndexInSelected(index);
this.updateOptionsActive();
this.cdr.markForCheck();
this._onChange(Array.from(this.selectedValues));
}
toggleValueInSelectedValue(value) {
if (this.selectedValues.has(value)) {
this.selectedValues.delete(value);
}
else {
this.selectedValues.add(value);
}
}
toggleIndexInSelected(index) {
if (this.selectedIndexes.has(index)) {
this.selectedIndexes.delete(index);
}
else {
this.selectedIndexes.add(index);
}
}
openList() {
this.isOpen = true;
this.focusedIndex = this.selectedIndexes.size ? Array.from(this.selectedIndexes)[this.selectedIndexes.size - 1] : 0;
this.selectOptions?.toArray().forEach((el, i) => {
if (!el) {
return;
}
el.isActive = this.selectedIndexes.has(i);
});
setTimeout(() => {
if (!this.selectedIndexes?.size) {
// Focus the `ul` element
this.listEl?.rootEl.nativeElement.focus();
// The scrolling element is not the `ul` node but the `nj-list-group`
this.listEl?.element.nativeElement.scrollTo({ top: 0 });
}
});
}
closeList() {
this.isOpen = false;
this.cdr.markForCheck();
}
/**
* @ignore
*/
toggleIsOpen() {
if (this.isOpen) {
this.closeList();
}
else {
this.openList();
}
}
/**
* @ignore
*/
handleListKeydown(e) {
// Escape key closes the list and focuses the button
if (e.code === MultiSelectComponent.ESCAPE_CODE) {
this.closeList();
setTimeout(() => {
this.buttonEl?.nativeElement.focus();
});
}
// Navigate between options and set `focusedIndex`
if (e.code === MultiSelectComponent.UP_CODE) {
e.preventDefault();
// Don't loop back to the end of the list
if (this.focusedIndex > 0) {
this.focusedIndex -= 1;
}
}
if (e.code === MultiSelectComponent.DOWN_CODE) {
e.preventDefault();
// Don't loop back to the begining of the list
if (this.focusedIndex < this.selectOptions?.length - 1) {
this.focusedIndex += 1;
}
}
// Select the current `focusedIndex` option
if (e.code === MultiSelectComponent.ENTER_CODE) {
e.preventDefault();
if (this.focusedIndex !== -1) {
this.toggleItem(this.selectOptions?.get(this.focusedIndex), this.focusedIndex);
this._onChange(Array.from(this.selectedValues));
}
}
// Jump to first option matching first letter
if (MultiSelectComponent.ALPHA_NUMERIC_REGEX.test(e.key)) {
const goToIndex = this.selectOptions
?.toArray()
.findIndex((item) => item.getValue()[0].toLowerCase() === e.key.toLowerCase());
if (goToIndex !== -1) {
this.focusedIndex = goToIndex;
}
}
}
/**
* @ignore
*/
handleFocusOut(e) {
const relatedTarget = e?.relatedTarget;
if (!relatedTarget) {
return;
}
if (!this.element?.nativeElement?.contains(relatedTarget)) {
this.closeList();
if (this._onTouched) {
this._onTouched();
}
}
}
/**
* @ignore
*/
handleOutsideClick(e) {
if (!this.element?.nativeElement?.contains(e.target)) {
this.closeList();
if (this._onTouched) {
this._onTouched();
}
}
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(values) {
this.selectedValues.clear();
this.selectedIndexes.clear();
if (values?.length) {
for (const value of values) {
this.selectedValues.add(value);
const indexToAdd = this.selectOptions?.toArray()?.findIndex(item => item.getValue() === value);
if (indexToAdd >= 0) {
this.selectedIndexes.add(indexToAdd);
}
}
}
this.updateOptionsActive();
this.cdr.markForCheck();
}
updateOptionsActive() {
this.selectOptions?.forEach((item) => {
item.updateSelected(this.selectedValues.has(item.getValue()));
});
}
/**
* Label (≠ value) of selected option
* @ignore
*/
getLabelAtIndex(index) {
return this.selectOptions?.get(index)?.getLabel() ?? '';
}
/**
* Close aria Label of taf to close
* @param index
*/
getTagCloseLabel(index) {
return `${this.tagCloseLabel} ${this.getLabelAtIndex(index)}`;
}
/**
* Aria-label for the trigger button element.
* @ignore
*/
get buttonLabel() {
return `${this.fieldLabel} - ${this.buttonDefaultValueLabel}`;
}
/**
* @ignore
*/
get formattedInputValue() {
if (!this.selectedValues) {
return '';
}
return Array.from(this.selectedValues).join(',');
}
/**
* @ignore
*/
getAdditionalClass() {
return `nj-form-item--select nj-form-item--custom-list nj-form-item--multi-select${this.isOpen ? ' nj-form-item--open' : ''}`;
}
/**
* @ignore
*/
getSubscriptId() {
return `${this.inputId}-subscript`;
}
/**
* @ignore
*/
getInstructionsId() {
return `${this.inputId}-instructions`;
}
/**
* @ignore
*/
getDescriptionId() {
return `${this.getSubscriptId()} ${this.getInstructionsId()}`;
}
/**
* Index of the currently focused option.
*/
get focusedIndex() {
return this.selectOptions
?.toArray()
.findIndex((item) => this.document.activeElement === item.el.nativeElement);
}
set focusedIndex(value) {
this.selectOptions?.forEach((el, i) => {
el.ariaSelected = i === value;
});
setTimeout(() => {
if (value >= 0) {
this.selectOptions?.get(value)?.el?.nativeElement?.focus();
}
});
}
/**
* @ignore
*/
get selectedIndexesToShow() {
if (!this.selectedIndexes) {
return;
}
if (!this.maxTagsToDisplay) {
return [...this.selectedIndexes];
}
return [...this.selectedIndexes].splice(0, this.maxTagsToDisplay);
}
/**
* @ignore
*/
get tagSize() {
switch (this.size) {
case 'xlarge':
return 'md';
case 'small':
return 'xs';
default:
return 'sm';
}
}
/**
* @ignore
*/
get selectIndexAsArray() {
return [...this.selectedIndexes];
}
getOptionId(index) {
return `${this.inputId}_option-${index}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, isStandalone: true, selector: "nj-multi-select", inputs: { iconName: "iconName", fieldLabel: "fieldLabel", listNavigationLabel: "listNavigationLabel", buttonDefaultValueLabel: "buttonDefaultValueLabel", maxTagsToDisplay: "maxTagsToDisplay", displaySelectedItems: "displaySelectedItems", selectedText: "selectedText", tagColor: "tagColor", tagCloseLabel: "tagCloseLabel", tagResetSelectionLabel: "tagResetSelectionLabel" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiSelectComponent),
multi: true,
},
], queries: [{ propertyName: "selectOptions", predicate: ListItemComponent, descendants: true }], viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["button"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "listEl", first: true, predicate: ListGroupComponent, descendants: true }, { propertyName: "tags", predicate: ["tags"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [size]=\"size\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n (focusout)=\"handleFocusOut($event)\"\n>\n <input\n #input\n type=\"text\"\n readonly\n [value]=\"formattedInputValue\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n njFormField\n />\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n <ng-container njFormAdditionalContent>\n <p [id]=\"getInstructionsId()\" hidden>{{ listNavigationLabel }}</p>\n <button\n #button\n type=\"button\"\n class=\"nj-form-item__custom-list-button\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n role=\"combobox\"\n [attr.aria-label]=\"buttonLabel\"\n [attr.tabindex]=\"isOpen ? -1 : null\"\n [attr.aria-describedby]=\"getDescriptionId()\"\n (click)=\"toggleIsOpen()\">\n <span class=\"nj-sr-only\">{{buttonLabel}}</span>\n </button>\n <div class=\"nj-form-item__selected-tags\" (click)=\"toggleIsOpen()\">\n <ng-container *ngIf=\"selectIndexAsArray?.length as numOfSelected\">\n <ng-container *ngIf=\"displaySelectedItems\">\n <nj-tag *ngFor=\"let optionIndex of selectedIndexesToShow; let i = index\"\n #tags\n [variant]=\"tagColor\"\n [size]=\"tagSize\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(optionIndex)\"\n (closeClick)=\"toggleByIndex($event, optionIndex, i)\">\n {{getLabelAtIndex(optionIndex)}}\n </nj-tag>\n <nj-tag *ngIf=\"maxTagsToDisplay && numOfSelected > maxTagsToDisplay\"\n [variant]=\"tagColor\"\n [size]=\"tagSize\">\n +{{numOfSelected - maxTagsToDisplay}}\n </nj-tag>\n </ng-container>\n <ng-container *ngIf=\"!displaySelectedItems\">\n <nj-tag\n *ngIf=\"numOfSelected === 1\"\n [variant]=\"tagColor\"\n [size]=\"tagSize\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(selectIndexAsArray?.[0])\"\n (closeClick)=\"toggleByIndex($event, selectIndexAsArray?.[0], 0)\">\n {{getLabelAtIndex(selectIndexAsArray?.[0])}}\n </nj-tag>\n <nj-tag\n *ngIf=\"numOfSelected > 1\"\n [variant]=\"tagColor\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [size]=\"tagSize\"\n [closeLabel]=\"tagResetSelectionLabel\"\n (closeClick)=\"resetSelection($event)\">\n {{numOfSelected}} {{selectedText}}\n </nj-tag>\n </ng-container>\n </ng-container>\n </div>\n <nj-list-group\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [hidden]=\"!isOpen\"\n [@transformList]=\"isOpen ? 'open': 'void'\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [isCustomSelectList]=\"true\"\n [isCheckboxList]=\"true\"\n tabindex=\"-1\"\n [ariaLabel]=\"fieldLabel\"\n (keydown)=\"handleListKeydown($event)\"\n >\n <ng-content select=\"[njSelectOptions]\"></ng-content>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n", styles: [":host{display:block;width:100%;height:100%}.nj-form-item__custom-list-button{outline:none}\n"], dependencies: [{ kind: "component", type: TagComponent, selector: "nj-tag", inputs: ["variant", "size", "iconName", "href", "target", "isClickable", "isClosable", "shouldAutoDestruct", "closeLabel", "isDisabled", "hasCustomIcon"], outputs: ["tagClick", "closeClick"] }, { kind: "component", type: FormItemComponent, selector: "nj-form-item", inputs: ["inputId", "size", "isFloatingLabel", "isDisabled", "isRequired", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick"] }, { kind: "directive", type: FormFieldDirective, selector: "input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]", exportAs: ["njFormField"] }, { kind: "component", type: ListGroupComponent, selector: "nj-list-group", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [selectAnimations.transformList], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiSelectComponent),
multi: true,
},
], animations: [selectAnimations.transformList], encapsulation: ViewEncapsulation.None, standalone: true, imports: [TagComponent, FormItemComponent, FormFieldDirective, ListGroupComponent, CommonModule], template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [size]=\"size\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n (focusout)=\"handleFocusOut($event)\"\n>\n <input\n #input\n type=\"text\"\n readonly\n [value]=\"formattedInputValue\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n njFormField\n />\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n <ng-container njFormAdditionalContent>\n <p [id]=\"getInstructionsId()\" hidden>{{ listNavigationLabel }}</p>\n <button\n #button\n type=\"button\"\n class=\"nj-form-item__custom-list-button\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n role=\"combobox\"\n [attr.aria-label]=\"buttonLabel\"\n [attr.tabindex]=\"isOpen ? -1 : null\"\n [attr.aria-describedby]=\"getDescriptionId()\"\n (click)=\"toggleIsOpen()\">\n <span class=\"nj-sr-only\">{{buttonLabel}}</span>\n </button>\n <div class=\"nj-form-item__selected-tags\" (click)=\"toggleIsOpen()\">\n <ng-container *ngIf=\"selectIndexAsArray?.length as numOfSelected\">\n <ng-container *ngIf=\"displaySelectedItems\">\n <nj-tag *ngFor=\"let optionIndex of selectedIndexesToShow; let i = index\"\n #tags\n [variant]=\"tagColor\"\n [size]=\"tagSize\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(optionIndex)\"\n (closeClick)=\"toggleByIndex($event, optionIndex, i)\">\n {{getLabelAtIndex(optionIndex)}}\n </nj-tag>\n <nj-tag *ngIf=\"maxTagsToDisplay && numOfSelected > maxTagsToDisplay\"\n [variant]=\"tagColor\"\n [size]=\"tagSize\">\n +{{numOfSelected - maxTagsToDisplay}}\n </nj-tag>\n </ng-container>\n <ng-container *ngIf=\"!displaySelectedItems\">\n <nj-tag\n *ngIf=\"numOfSelected === 1\"\n [variant]=\"tagColor\"\n [size]=\"tagSize\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(selectIndexAsArray?.[0])\"\n (closeClick)=\"toggleByIndex($event, selectIndexAsArray?.[0], 0)\">\n {{getLabelAtIndex(selectIndexAsArray?.[0])}}\n </nj-tag>\n <nj-tag\n *ngIf=\"numOfSelected > 1\"\n [variant]=\"tagColor\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [size]=\"tagSize\"\n [closeLabel]=\"tagResetSelectionLabel\"\n (closeClick)=\"resetSelection($event)\">\n {{numOfSelected}} {{selectedText}}\n </nj-tag>\n </ng-container>\n </ng-container>\n </div>\n <nj-list-group\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [hidden]=\"!isOpen\"\n [@transformList]=\"isOpen ? 'open': 'void'\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [isCustomSelectList]=\"true\"\n [isCheckboxList]=\"true\"\n tabindex=\"-1\"\n [ariaLabel]=\"fieldLabel\"\n (keydown)=\"handleListKeydown($event)\"\n >\n <ng-content select=\"[njSelectOptions]\"></ng-content>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n", styles: [":host{display:block;width:100%;height:100%}.nj-form-item__custom-list-button{outline:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; }, propDecorators: { iconName: [{
type: Input
}], fieldLabel: [{
type: Input
}], listNavigationLabel: [{
type: Input
}], buttonDefaultValueLabel: [{
type: Input
}], maxTagsToDisplay: [{
type: Input
}], displaySelectedItems: [{
type: Input
}], selectedText: [{
type: Input
}], tagColor: [{
type: Input
}], tagCloseLabel: [{
type: Input
}], tagResetSelectionLabel: [{
type: Input
}], buttonEl: [{
type: ViewChild,
args: ['button']
}], input: [{
type: ViewChild,
args: ['input']
}], listEl: [{
type: ViewChild,
args: [ListGroupComponent]
}], tags: [{
type: ViewChildren,
args: ['tags']
}], selectOptions: [{
type: ContentChildren,
args: [ListItemComponent, { descendants: true }]
}] } });
class PaginationComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* Current page
*/
this.currentItem = 1;
/**
* Whether pagination should minify
*/
this.shouldMinify = true;
/**
* Emits selected item on change
*/
this.selectedItem = new EventEmitter();
}
/**
* @ignore
*/
getItems() {
return Array.from({ length: this.count }, (_, i) => i + 1);
}
/**
* @ignore
*/
goToNext() {
if (this.currentItem === this.count) {
return;
}
this.currentItem = this.currentItem + 1;
this.selectedItem?.emit(this.currentItem);
this.cdr.markForCheck();
}
/**
* @ignore
*/
goToPrevious() {
if (this.currentItem === 1) {
return;
}
this.currentItem = this.currentItem - 1;
this.selectedItem?.emit(this.currentItem);
this.cdr.markForCheck();
}
/**
* @ignore
*/
goToItem(item) {
if (item > this.count || this.currentItem < 1) {
return;
}
this.currentItem = item;
this.selectedItem?.emit(this.currentItem);
this.cdr.markForCheck();
}
/**
* @ignore
*/
isItemVisible(item) {
// Always show first, last and selected item
if (item === 1 || item === this.count || item === this.currentItem) {
return true;
}
// Always show previous and next values of selected value
if (item >= this.currentItem - 1 && item <= this.currentItem + 1) {
return true;
}
if (item < 6 && this.currentItem < 4) {
return true;
}
return item >= this.count - 4 && this.currentItem >= this.count - 2;
}
/**
* @ignore
*/
showMoreHorizontal(item) {
// We want to show on 2nd item if currentItem > 3 or in penultimate if currentItem is in last 3
return (item === 2 && this.currentItem > 3) || (item === this.count - 1 && this.currentItem <= this.count - 3);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, isStandalone: true, selector: "nj-pagination", inputs: { ariaLabelNext: "ariaLabelNext", ariaLabelPrevious: "ariaLabelPrevious", count: "count", currentItem: "currentItem", shouldMinify: "shouldMinify" }, outputs: { selectedItem: "selectedItem" }, ngImport: i0, template: "<nav>\n <ul class=\"nj-pagination\">\n <li class=\"nj-pagination__item\">\n <nj-icon-button size=\"sm\"\n icon=\"chevron_left\"\n [label]=\"ariaLabelPrevious\"\n (buttonClick)=\"goToPrevious()\"\n [isDisabled]=\"currentItem === 1\">\n </nj-icon-button>\n </li>\n <ng-container *ngFor=\"let item of getItems()\">\n <li *ngIf=\"!shouldMinify || isItemVisible(item)\" class=\"nj-pagination__item\"\n [ngClass]=\"{'nj-pagination__item--active': currentItem === item}\">\n <button class=\"nj-pagination__link\"\n (click)=\"goToItem(item)\"\n [attr.aria-current]=\"currentItem === item ? 'true' : null\">\n {{item}}\n </button>\n </li>\n <li class=\"nj-pagination__item\"\n *ngIf=\"shouldMinify && showMoreHorizontal(item)\">\n <nj-icon name=\"more_horiz\" class=\"nj-pagination__more\" variant=\"inherit\"></nj-icon>\n <span class=\"nj-sr-only\">...</span>\n </li>\n </ng-container>\n\n <li class=\"nj-pagination__item\">\n <nj-icon-button size=\"sm\"\n icon=\"chevron_right\"\n [label]=\"ariaLabelNext\"\n (buttonClick)=\"goToNext()\"\n [isDisabled]=\"currentItem === count\">\n </nj-icon-button>\n </li>\n </ul>\n</nav>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, IconButtonComponent, CommonModule], template: "<nav>\n <ul class=\"nj-pagination\">\n <li class=\"nj-pagination__item\">\n <nj-icon-button size=\"sm\"\n icon=\"chevron_left\"\n [label]=\"ariaLabelPrevious\"\n (buttonClick)=\"goToPrevious()\"\n [isDisabled]=\"currentItem === 1\">\n </nj-icon-button>\n </li>\n <ng-container *ngFor=\"let item of getItems()\">\n <li *ngIf=\"!shouldMinify || isItemVisible(item)\" class=\"nj-pagination__item\"\n [ngClass]=\"{'nj-pagination__item--active': currentItem === item}\">\n <button class=\"nj-pagination__link\"\n (click)=\"goToItem(item)\"\n [attr.aria-current]=\"currentItem === item ? 'true' : null\">\n {{item}}\n </button>\n </li>\n <li class=\"nj-pagination__item\"\n *ngIf=\"shouldMinify && showMoreHorizontal(item)\">\n <nj-icon name=\"more_horiz\" class=\"nj-pagination__more\" variant=\"inherit\"></nj-icon>\n <span class=\"nj-sr-only\">...</span>\n </li>\n </ng-container>\n\n <li class=\"nj-pagination__item\">\n <nj-icon-button size=\"sm\"\n icon=\"chevron_right\"\n [label]=\"ariaLabelNext\"\n (buttonClick)=\"goToNext()\"\n [isDisabled]=\"currentItem === count\">\n </nj-icon-button>\n </li>\n </ul>\n</nav>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabelNext: [{
type: Input
}], ariaLabelPrevious: [{
type: Input
}], count: [{
type: Input
}], currentItem: [{
type: Input
}], shouldMinify: [{
type: Input
}], selectedItem: [{
type: Output
}] } });
const ProgressAnimation = {
progressFill: trigger('progressFill', [
state('void', style({ transform: 'scaleX(0)' })),
state('*', style({ transform: 'scaleX(1)' })),
transition(':enter', animate('{{duration}}ms cubic-bezier(0.0, 0.0, 0.2, 1)'), { params: { duration: 500 } })
])
};
class ProgressComponent {
constructor() {
/**
* @ignore
*/
this.progressClassName = 'nj-progress';
/**
* Progress value
*/
this.value = 0;
/**
* Whether progress description is shown on the right/bottom or hidden
*/
this.descriptionPosition = 'none';
/**
* Progress min
*/
this.min = 0;
/**
* Progress max
*/
this.max = 100;
/**
* Whether progress is animated at first render
*/
this.isAnimated = true;
/**
* Whether progress has css transitions for progress width
*/
this.hasTransition = false;
/**
* Decimal precision of the description text
*/
this.decimalPrecision = 0;
}
/**
* @ignore
*/
getTransitionClass() {
return this.hasTransition ? `${this.progressClassName}--has-transition` : '';
}
/**
* @ignore
*/
getDescriptionPositionClass() {
return this.descriptionPosition === 'right' ? `${this.progressClassName}--has-right-description` : '';
}
/**
* @ignore
*/
getFormattedValue() {
if (this.value > this.max) {
return this.max;
}
else if (this.value < this.min) {
return this.min;
}
else {
return this.value;
}
}
/**
* @ignore
*/
getFormattedPercentage() {
if (this.value < this.min) {
return '0';
}
else if (this.value > this.max) {
return '100';
}
return Number(((this.getFormattedValue() - this.min) / (this.max - this.min)) * 100).toFixed(this.decimalPrecision);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressComponent, isStandalone: true, selector: "nj-progress", inputs: { label: "label", value: "value", descriptionPosition: "descriptionPosition", min: "min", max: "max", isAnimated: "isAnimated", hasTransition: "hasTransition", decimalPrecision: "decimalPrecision" }, ngImport: i0, template: "<div class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n *ngIf=\"getFormattedPercentage() as percentage\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\">\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\"\n [style.width.%]=\"percentage\"\n @progressFill\n [@.disabled]=\"!isAnimated\">\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"nj-progress__description\" *ngIf=\"descriptionPosition !== 'none'\">\n {{getFormattedPercentage()}}%\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [ProgressAnimation.progressFill], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-progress', changeDetection: ChangeDetectionStrategy.OnPush, animations: [ProgressAnimation.progressFill], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n *ngIf=\"getFormattedPercentage() as percentage\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\">\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\"\n [style.width.%]=\"percentage\"\n @progressFill\n [@.disabled]=\"!isAnimated\">\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"nj-progress__description\" *ngIf=\"descriptionPosition !== 'none'\">\n {{getFormattedPercentage()}}%\n </div>\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
type: Input
}], value: [{
type: Input
}], descriptionPosition: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], isAnimated: [{
type: Input
}], hasTransition: [{
type: Input
}], decimalPrecision: [{
type: Input
}] } });
class RadioComponent {
constructor(cdr) {
this.cdr = cdr;
this.radioClassName = 'nj-radio';
/**
* Whether the radio is checked or not
*/
this.isChecked = false;
/**
* Radio size
*/
this.size = 'md';
/**
* Output that emits checked value on change only
*/
this.valueChange = new EventEmitter();
}
/**
* @ignore
*/
onInputChange(event) {
event.stopPropagation();
this.isChecked = !this.isChecked;
this.valueChange.emit(this.isChecked);
}
/**
* @ignore
*/
_markForCheck() {
this.cdr.markForCheck();
}
get classes() {
const classes = [this.radioClassName];
if (this.size && this.size !== 'md') {
classes.push(`${this.radioClassName}--${this.size}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioComponent, isStandalone: true, selector: "nj-radio", inputs: { inputId: "inputId", name: "name", required: "required", isChecked: "isChecked", value: "value", isDisabled: "isDisabled", size: "size", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classes" } }, ngImport: i0, template: "<label [attr.for]=\"inputId\">\n <input\n type=\"radio\"\n [value]=\"value\"\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"onInputChange($event)\"\n />\n <ng-content></ng-content>\n</label>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-radio', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], host: {
'[class]': 'classes'
}, template: "<label [attr.for]=\"inputId\">\n <input\n type=\"radio\"\n [value]=\"value\"\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"onInputChange($event)\"\n />\n <ng-content></ng-content>\n</label>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
type: Input
}], name: [{
type: Input
}], required: [{
type: Input
}], isChecked: [{
type: Input
}], value: [{
type: Input
}], isDisabled: [{
type: Input
}], size: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], valueChange: [{
type: Output
}] } });
class RadioGroupComponent {
/**
* Radio group selected value
*/
set value(newValue) {
if (this._value !== newValue) {
this._value = newValue;
this._updateSelectedRadioFromValue();
this._checkSelectedRadioButton();
}
}
get value() {
return this._value;
}
/**
* Radio group selected radio component
*/
set selected(selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this._checkSelectedRadioButton();
}
get selected() {
return this._selected;
}
/**
* 'Whether the radio group is disabled or not, this will force all the children radios be disabled or not depending on this value
*/
set isDisabled(value) {
this._isDisabled = value;
this._updateAllRadiosDisableValue();
this._markRadiosForCheck();
}
get isDisabled() {
return this._isDisabled;
}
/**
* Radio group name, this will force all the children radios to have this name
*/
set name(value) {
this._name = value;
this._updateAllRadiosName();
this._markRadiosForCheck();
}
get name() {
return this._name;
}
/**
* Whether radio is required or not
*/
set required(value) {
this._required = value;
this._markRadiosForCheck();
}
get required() {
return this._required;
}
constructor(cdr) {
this.cdr = cdr;
/**
* @ignore
*/
this.unsubscribe = new Subject();
/**
* @ignore
*/
this._required = false;
/**
* @ignore
*/
this.radioGroupClassName = 'nj-radio-group';
/**
* Whether the radio group should be displayed in column or row
*/
this.orientation = 'column';
/**
* Output that emits checked value on change only
*/
this.valueChange = new EventEmitter();
/**
* @ignore
*/
this._onChange = (_) => { };
/**
* @ignore
*/
this._onTouched = () => { };
}
ngAfterContentInit() {
this._listenForRadioChange();
this._updateSelectedRadioFromValue();
this._updateAllRadiosDisableValue();
this._updateAllRadiosName();
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
/**
* @ignore
*/
_listenForRadioChange() {
if (!this.radios) {
return;
}
this.radios.forEach((radio) => {
radio?.valueChange.pipe(takeUntil(this.unsubscribe)).subscribe((isSelected) => {
if (isSelected) {
this.value = radio?.value;
this._onChange(this.value);
this.valueChange.emit(this._value);
}
});
});
}
/**
* @ignore
*/
_updateAllRadiosDisableValue() {
if (!this.radios || Utils.isUndefinedOrNull(this.isDisabled)) {
return;
}
this.radios.forEach((radio) => {
if (radio) {
radio.isDisabled = this.isDisabled;
}
});
}
/**
* @ignore
*/
_updateAllRadiosName() {
if (!this.radios || Utils.isUndefinedOrNull(this.name)) {
return;
}
this.radios.forEach((radio) => {
if (radio) {
radio.name = this.name;
}
});
}
/**
* @ignore
*/
_checkSelectedRadioButton() {
if (this._selected && !this._selected.isChecked) {
this._selected.isChecked = true;
}
}
/**
* @ignore
*/
_markRadiosForCheck() {
if (this.radios) {
this.radios.forEach((radio) => radio?._markForCheck());
}
}
/**
* @ignore
*/
_updateSelectedRadioFromValue() {
// If the value already matches the selected radio, do nothing.
const isAlreadySelected = this._selected && this._selected.value === this._value;
if (this.radios && !isAlreadySelected) {
this._selected = null;
this.radios.forEach((radio) => {
if (!radio) {
return;
}
radio.isChecked = this.value === radio.value;
if (radio.isChecked) {
this._selected = radio;
}
});
this._markRadiosForCheck();
}
}
/**
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @ignore
*/
writeValue(value) {
this.value = value;
this.cdr.markForCheck();
}
/**
* @ignore
*/
getOrientationClass() {
if (this.orientation !== 'row') {
return '';
}
return `${this.radioGroupClassName}--${this.orientation}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioGroupComponent, isStandalone: true, selector: "nj-radio-group", inputs: { value: "value", selected: "selected", isDisabled: "isDisabled", name: "name", required: "required", orientation: "orientation", legend: "legend", errorMessage: "errorMessage", hasError: "hasError" }, outputs: { valueChange: "valueChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioGroupComponent),
multi: true
}
], queries: [{ propertyName: "radios", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "<fieldset class=\"nj-radio-group\" [ngClass]=\"[getOrientationClass(), hasError ? 'nj-radio-group--has-error' : '']\">\n <legend class=\"nj-radio-group__legend\">\n {{legend}}\n <p *ngIf=\"errorMessage\" class=\"nj-radio-group__error-message\">\n <nj-icon name=\"warning\"></nj-icon>\n {{errorMessage}}\n </p>\n </legend>\n <ng-content></ng-content>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-radio-group', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioGroupComponent),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [RadioComponent, CommonModule, IconComponent], template: "<fieldset class=\"nj-radio-group\" [ngClass]=\"[getOrientationClass(), hasError ? 'nj-radio-group--has-error' : '']\">\n <legend class=\"nj-radio-group__legend\">\n {{legend}}\n <p *ngIf=\"errorMessage\" class=\"nj-radio-group__error-message\">\n <nj-icon name=\"warning\"></nj-icon>\n {{errorMessage}}\n </p>\n </legend>\n <ng-content></ng-content>\n</fieldset>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: Input
}], selected: [{
type: Input
}], isDisabled: [{
type: Input
}], name: [{
type: Input
}], required: [{
type: Input
}], orientation: [{
type: Input
}], legend: [{
type: Input
}], errorMessage: [{
type: Input
}], hasError: [{
type: Input
}], valueChange: [{
type: Output
}], radios: [{
type: ContentChildren,
args: [RadioComponent, { descendants: true }]
}] } });
const CSSClassesMap = {
'2xs': 'xxs',
'2xl': 'xxl',
};
const sizeVariantToCSS = (size) => {
return CSSClassesMap[size] ?? size;
};
class SearchComponent {
constructor() {
this.defaultInputId = Utils.getUID('nj-search-input');
this.cdr = inject(ChangeDetectorRef);
this.isDisabledByForm = false;
this.onChange = null;
this.value = null;
this.onTouched = null;
/**
* Specifies whether the element is disabled or not.
*/
this.disabled = false;
/**
* Input keyboard keydown events.
*/
this.enterKeydown = new EventEmitter();
}
ngAfterContentInit() {
if (this.element?.selector === 'action') {
this.actionTemplate = this.element.templateRef;
}
}
get classes() {
const classes = ['nj-search'];
if (this.scale) {
classes.push(`nj-search--${sizeVariantToCSS(this.scale)}`);
}
return classes;
}
get isDisabled() {
return this.disabled || this.isDisabledByForm;
}
get finalInputId() {
return this.inputId || this.defaultInputId;
}
valueChange(value) {
this.value = value;
this.onChange?.(value);
}
onClearValue() {
this.value = null;
this.onChange?.(this.value);
this.searchInputElement?.nativeElement.focus();
}
//<editor-fold desc="ControlValueAccessor implementation">
/**
* @ignore
*/
writeValue(value) {
if (this.value === value) {
return;
}
this.value = value;
this.cdr.markForCheck();
}
/**
* @ignore
*/
registerOnChange(onChange) {
this.onChange = onChange;
}
/**
* @ignore
*/
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
/**
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabledByForm = isDisabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: SearchComponent, isStandalone: true, selector: "nj-search", inputs: { disabled: ["disabled", "disabled", booleanAttribute], inputId: "inputId", placeholder: "placeholder", scale: "scale", altResetButtonLabel: "altResetButtonLabel", altLabel: "altLabel" }, outputs: { enterKeydown: "enterKeydown" }, host: { properties: { "class": "classes" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchComponent),
multi: true
}], queries: [{ propertyName: "element", first: true, predicate: EngieTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"nj-search__field-wrapper\">\n <nj-icon name=\"search\" ariaLabel=\"search icon\" class=\"nj-search__icon\"></nj-icon>\n <label *ngIf=\"altLabel\" [for]=\"finalInputId\" class=\"nj-sr-only\" aria-hidden=\"true\">\n {{ altLabel }}\n </label>\n <input\n #searchInput\n type=\"search\"\n class=\"nj-search__field\"\n [id]=\"finalInputId\"\n [ngModel]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n (focus)=\"onTouched?.()\"\n (keydown.enter)=\"enterKeydown.next()\"\n (ngModelChange)=\"valueChange($event)\">\n <nj-icon-button\n *ngIf=\"value?.length > 0\"\n icon=\"cancel\"\n class=\"nj-search__clear-button\"\n [label]=\"altResetButtonLabel\"\n [isDisabled]=\"isDisabled\"\n (buttonClick)=\"onClearValue()\"></nj-icon-button>\n</div>\n<ng-container *ngIf=\"actionTemplate\" [ngTemplateOutlet]=\"actionTemplate\"></ng-container>\n", styles: ["nj-icon.nj-search__icon{position:absolute;top:50%;left:var(--nj-semantic-size-spacing-16);transform:translateY(-50%)}nj-icon.nj-search__icon .nj-icon-material{--nj-material-icon-color: var(--nj-semantic-color-icon-neutral-tertiary-default)}nj-icon-button.nj-search__clear-button{position:absolute;top:50%;right:var(--nj-semantic-size-spacing-16);transform:translateY(-50%)}nj-icon-button.nj-search__clear-button .nj-icon-btn{--nj-icon-btn-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-default);--nj-icon-btn-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-hovered-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-hovered);--nj-icon-btn-hovered-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-focused-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-focused);--nj-icon-btn-focused-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-pressed-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-pressed);--nj-icon-btn-pressed-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-padding: var(--nj-semantic-size-spacing-4);--nj-icon-btn-icon-size: var(--nj-semantic-size-icon-md)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchComponent),
multi: true
}], imports: [
CommonModule,
IconComponent,
IconButtonComponent,
FormsModule,
], host: {
'[class]': 'classes'
}, template: "<div class=\"nj-search__field-wrapper\">\n <nj-icon name=\"search\" ariaLabel=\"search icon\" class=\"nj-search__icon\"></nj-icon>\n <label *ngIf=\"altLabel\" [for]=\"finalInputId\" class=\"nj-sr-only\" aria-hidden=\"true\">\n {{ altLabel }}\n </label>\n <input\n #searchInput\n type=\"search\"\n class=\"nj-search__field\"\n [id]=\"finalInputId\"\n [ngModel]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n (focus)=\"onTouched?.()\"\n (keydown.enter)=\"enterKeydown.next()\"\n (ngModelChange)=\"valueChange($event)\">\n <nj-icon-button\n *ngIf=\"value?.length > 0\"\n icon=\"cancel\"\n class=\"nj-search__clear-button\"\n [label]=\"altResetButtonLabel\"\n [isDisabled]=\"isDisabled\"\n (buttonClick)=\"onClearValue()\"></nj-icon-button>\n</div>\n<ng-container *ngIf=\"actionTemplate\" [ngTemplateOutlet]=\"actionTemplate\"></ng-container>\n", styles: ["nj-icon.nj-search__icon{position:absolute;top:50%;left:var(--nj-semantic-size-spacing-16);transform:translateY(-50%)}nj-icon.nj-search__icon .nj-icon-material{--nj-material-icon-color: var(--nj-semantic-color-icon-neutral-tertiary-default)}nj-icon-button.nj-search__clear-button{position:absolute;top:50%;right:var(--nj-semantic-size-spacing-16);transform:translateY(-50%)}nj-icon-button.nj-search__clear-button .nj-icon-btn{--nj-icon-btn-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-default);--nj-icon-btn-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-hovered-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-hovered);--nj-icon-btn-hovered-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-focused-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-focused);--nj-icon-btn-focused-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-pressed-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-pressed);--nj-icon-btn-pressed-color: var(--nj-semantic-color-icon-neutral-tertiary-default);--nj-icon-btn-padding: var(--nj-semantic-size-spacing-4);--nj-icon-btn-icon-size: var(--nj-semantic-size-icon-md)}\n"] }]
}], propDecorators: { searchInputElement: [{
type: ViewChild,
args: ['searchInput']
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], inputId: [{
type: Input
}], placeholder: [{
type: Input
}], scale: [{
type: Input
}], altResetButtonLabel: [{
type: Input
}], altLabel: [{
type: Input
}], enterKeydown: [{
type: Output
}], element: [{
type: ContentChild,
args: [EngieTemplateDirective]
}] } });
class SearchButtonDirective {
constructor() {
this.button = inject(ButtonComponent, { self: true });
this.search = inject(SearchComponent, { host: true });
this.cdr = inject(ChangeDetectorRef);
this.isDisabled = false;
}
get searchScaleToButtonScale() {
const map = {
sm: 'small',
md: 'medium',
lg: 'large',
xl: 'xlarge'
};
return map[this.search.scale];
}
ngDoCheck() {
if (this.searchScaleToButtonScale !== this.button.size) {
this.button.size = this.searchScaleToButtonScale ?? 'medium';
this.cdr.markForCheck();
}
if (this.search.disabled && (this.search.disabled !== this.button.isDisabled)) {
this.button.isDisabled = this.search.disabled;
this.cdr.markForCheck();
}
if (!this.search.disabled && (this.isDisabled !== this.button.isDisabled)) {
this.button.isDisabled = this.isDisabled;
this.cdr.markForCheck();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SearchButtonDirective, isStandalone: true, selector: "nj-button[njSearchButton]", inputs: { isDisabled: "isDisabled" }, host: { classAttribute: "nj-search__button" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchButtonDirective, decorators: [{
type: Directive,
args: [{
selector: 'nj-button[njSearchButton]',
standalone: true,
host: {
'class': 'nj-search__button'
}
}]
}], propDecorators: { isDisabled: [{
type: Input
}] } });
class SegmentedControlButtonComponent {
constructor(el, cdr) {
this.el = el;
this.cdr = cdr;
/**
* Whether button is selected or notre
*/
this.isSelected = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
getClientBoundingRect() {
return this.el?.nativeElement?.getBoundingClientRect();
}
setIsSelected(isSelected) {
this.isSelected = isSelected;
this.cdr.markForCheck();
}
setIsDisabled(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedControlButtonComponent, isStandalone: true, selector: "nj-segmented-control-button", inputs: { value: "value", isSelected: "isSelected", isDisabled: "isDisabled", hasCustomIcon: "hasCustomIcon", iconName: "iconName" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"nj-segmented-control-btn\" type=\"button\"\n [ngClass]=\"{'nj-segmented-control-btn--selected': isSelected}\"\n [attr.aria-pressed]=\"isSelected ? 'true' : 'false'\"\n [disabled]=\"isDisabled\" [attr.data-value]=\"value\" (click)=\"buttonClick.emit($event)\">\n <nj-icon *ngIf=\"iconName && !hasCustomIcon\" size=\"inherit\" variant=\"inherit\" class=\"nj-segmented-control-btn__icon\" [name]=\"iconName\"></nj-icon>\n <span class=\"nj-segmented-control-btn__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;height:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-segmented-control-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<button class=\"nj-segmented-control-btn\" type=\"button\"\n [ngClass]=\"{'nj-segmented-control-btn--selected': isSelected}\"\n [attr.aria-pressed]=\"isSelected ? 'true' : 'false'\"\n [disabled]=\"isDisabled\" [attr.data-value]=\"value\" (click)=\"buttonClick.emit($event)\">\n <nj-icon *ngIf=\"iconName && !hasCustomIcon\" size=\"inherit\" variant=\"inherit\" class=\"nj-segmented-control-btn__icon\" [name]=\"iconName\"></nj-icon>\n <span class=\"nj-segmented-control-btn__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: Input
}], isSelected: [{
type: Input
}], isDisabled: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], iconName: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class SegmentedControlComponent {
/**
* Selected value
*/
set value(value) {
this._value = value;
this.setActive(value);
}
get value() {
return this._value;
}
/**
* Overrides disabled state on all buttons
*/
set isDisabled(value) {
this._isDisabled = value;
this.setButtonsIsDisabled();
}
get isDisabled() {
return this._isDisabled;
}
constructor(cdr) {
this.cdr = cdr;
this.segmentedControlClass = 'nj-segmented-control';
/**
* @ignore
*/
this.unsubscribe = new Subject();
/**
* @ignore
*/
this._onChange = (_) => { };
/**
* @ignore
*/
this._onTouched = () => { };
/**
* Segmented Control size
*/
this.size = 'md';
/**
* Output that emits value change
*/
this.valueChange = new EventEmitter();
}
ngAfterViewInit() {
// A render is being done after view init so setTimeout allows us to delay any attribute modification
// in the call stack, so it can be taken account on next render only
setTimeout(() => {
this.segmentedButtons = this.segmentedButtonsList?.toArray();
this.setButtonsIsDisabled();
this.initializeClickListener();
if (this.value) {
this.setActive(this.value);
}
});
}
setButtonsIsDisabled() {
if (!Utils.isUndefinedOrNull(this.isDisabled) && this.segmentedButtons) {
for (const segmentedButton of this.segmentedButtons) {
segmentedButton.setIsDisabled(this.isDisabled);
}
}
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
/**
* @ignore
*/
initializeClickListener() {
if (Utils.isUndefinedOrNull(this.segmentedButtons)) {
return;
}
this.segmentedButtons.forEach((button, value) => {
button.buttonClick.pipe(takeUntil(this.unsubscribe)).subscribe((_) => {
button.isSelected = true;
this.writeValue(button.value);
});
});
}
setActive(buttonValue) {
if (!this.segmentedButtons) {
return;
}
for (const button of this.segmentedButtons) {
if (button?.value === buttonValue) {
button.setIsSelected(true);
const selectedBoundingRect = button.getClientBoundingRect();
const segmentedControlBoundingRect = this.segmentedControl.nativeElement.getBoundingClientRect();
const segmentedControlStyle = this.segmentedControl?.nativeElement?.style;
segmentedControlStyle.setProperty('--nj-sc-btn-selected-width', `${selectedBoundingRect.width}px`);
segmentedControlStyle.setProperty('--nj-sc-btn-selected-right', `${segmentedControlBoundingRect.right - selectedBoundingRect.right}px`);
}
else {
button.setIsSelected(false);
}
}
}
/**
* @ignore
*/
getSizeClass() {
if (!this.size || this.size === 'md') {
return;
}
return `${this.segmentedControlClass}--${this.size}`;
}
/**
* @ignore
*/
writeValue(value) {
if (value === this.value) {
return;
}
this.setActive(value);
this.value = value;
}
/**
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedControlComponent, isStandalone: true, selector: "nj-segmented-control", inputs: { value: "value", ariaLabel: "ariaLabel", isDisabled: "isDisabled", size: "size" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "segmentedButtonsList", predicate: SegmentedControlButtonComponent }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], ngImport: i0, template: "<div class=\"nj-segmented-control\" role=\"group\" [attr.aria-label]=\"ariaLabel\" [ngClass]=\"getSizeClass()\"\n #segmentedControl>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SegmentedControlButtonComponent, CommonModule], template: "<div class=\"nj-segmented-control\" role=\"group\" [attr.aria-label]=\"ariaLabel\" [ngClass]=\"getSizeClass()\"\n #segmentedControl>\n <ng-content></ng-content>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: Input
}], ariaLabel: [{
type: Input
}], isDisabled: [{
type: Input
}], size: [{
type: Input
}], segmentedButtonsList: [{
type: ContentChildren,
args: [SegmentedControlButtonComponent]
}], segmentedControl: [{
type: ViewChild,
args: ['segmentedControl']
}], valueChange: [{
type: Output
}] } });
class SelectComponent extends FormItemComponent {
static { this.ESCAPE_CODE = 'Escape'; }
static { this.ENTER_CODE = 'Enter'; }
static { this.UP_CODE = 'ArrowUp'; }
static { this.DOWN_CODE = 'ArrowDown'; }
/*
Regex matching every alpha-numeric characters.
\d : every digits
\p{Letter} : every letters in the latin alphabet including letters with diacritics
The "u" flag enables unicode mode required to use `\p{Letter}`.
See :
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes#general_categories
- https://unicode.org/reports/tr18/#General_Category_Property
*/
static { this.ALPHA_NUMERIC_REGEX = /^[\d\p{Letter}]$/u; }
constructor(element, cdr, document) {
super();
this.element = element;
this.cdr = cdr;
this.document = document;
/**
* @ignore
*/
this._onChange = (_) => {
};
/**
* @ignore
*/
this._onTouched = () => {
};
/**
* Notifier used to stop items click event subscription.
* @ignore
*/
this.unsubscribe = new Subject();
this.childOptionsChange = new Subject();
/**
* @ignore
*/
this.isOpen = false;
/**
* @ignore
*/
this.selectedValue = '';
/**
* @ignore
*/
this.selectedIndex = -1;
this.iconName = 'keyboard_arrow_down';
}
ngAfterViewInit() {
setTimeout(() => {
this.setInputsAndListenersOnOptions();
this.selectOptions?.changes
.pipe(takeUntil(this.unsubscribe))
.subscribe(() => {
setTimeout(() => {
this.setInputsAndListenersOnOptions();
});
});
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
this.childOptionsChange.complete();
}
setInputsAndListenersOnOptions() {
this.childOptionsChange.next();
const unsubscribeCond$ = race(this.unsubscribe, this.childOptionsChange);
this.selectOptions?.forEach((item) => {
item.role = 'option';
if (this.selectedValue?.trim() !== '') {
item.updateSelected(this.selectedValue === item.getValue());
}
item.itemClick
.pipe(takeUntil(unsubscribeCond$))
.subscribe(() => {
const value = item.getValue();
this.writeValue(value);
this._onChange(value);
this.closeList();
setTimeout(() => {
this.buttonEl?.nativeElement.focus();
});
});
});
// Get selected index on mount based on current value
this.selectedIndex = this.selectOptions?.toArray().findIndex(opt => {
return opt.getValue() === this.selectedValue;
});
this.cdr.markForCheck();
}
/**
* @ignore
*/
getAdditionalClass() {
const classes = ['nj-form-item--select', 'nj-form-item--custom-list'];
if (this.isOpen) {
classes.push('nj-form-item--open');
}
if (this.customLabel?.templateRef) {
classes.push('nj-form-item--custom-label');
}
return classes.join(' ');
}
getSubscriptId() {
return `${this.inputId}-subscript`;
}
getInstructionsId() {
return `${this.inputId}-instructions`;
}
getDescriptionId() {
return `${this.getSubscriptId()} ${this.getInstructionsId()}`;
}
/**
* Get index of the selected value
*/
indexForValue(value) {
return this.selectOptions
?.toArray()
.findIndex((item) => item.getValue() === value);
}
openList() {
this.isOpen = true;
this.focusedIndex = this.selectedIndex;
setTimeout(() => {
if (this.selectedIndex === -1) {
// Focus the `ul` element
this.listEl?.rootEl.nativeElement.focus();
// The scrolling element is not the `ul` node but the `nj-list-group`
this.listEl?.element.nativeElement.scrollTo({ top: 0 });
}
});
}
closeList() {
this.isOpen = false;
}
toggleIsOpen() {
if (this.isOpen) {
this.closeList();
}
else {
this.openList();
}
}
/**
* Index of the currently focused option.
*/
get focusedIndex() {
return this.selectOptions
?.toArray()
.findIndex((item) => this.document.activeElement === item.el.nativeElement);
}
set focusedIndex(value) {
this.selectOptions?.forEach((el, i) => {
el.ariaSelected = i === value;
});
setTimeout(() => {
if (value !== -1) {
this.selectOptions?.get(value).el.nativeElement.focus();
}
});
}
handleListKeydown(e) {
// Escape key closes the list and focuses the button
if (e.code === SelectComponent.ESCAPE_CODE) {
this.closeList();
setTimeout(() => {
this.buttonEl?.nativeElement.focus();
});
}
// Navigate between options and set `focusedIndex`
if (e.code === SelectComponent.UP_CODE) {
e.preventDefault();
// Dont loop back to the end of the list
if (this.focusedIndex > 0) {
this.focusedIndex -= 1;
}
}
if (e.code === SelectComponent.DOWN_CODE) {
e.preventDefault();
// Dont loop back to the beginning of the list
if (this.focusedIndex < this.selectOptions?.length - 1) {
this.focusedIndex += 1;
}
}
// Select the current `focusedIndex` option
if (e.code === SelectComponent.ENTER_CODE) {
e.preventDefault();
if (this.focusedIndex !== -1) {
const value = this.selectOptions?.get(this.focusedIndex).getValue();
this.writeValue(value);
this._onChange(value);
}
this.closeList();
setTimeout(() => {
this.buttonEl?.nativeElement.focus();
});
}
// Jump to first option matching first letter
if (SelectComponent.ALPHA_NUMERIC_REGEX.test(e.key)) {
const goToIndex = this.selectOptions
?.toArray()
.findIndex((item) => item.getValue()[0].toLowerCase() === e.key.toLowerCase());
if (goToIndex !== -1) {
this.focusedIndex = goToIndex;
}
}
}
handleFocusout(e) {
if (!this.element.nativeElement?.contains(e.relatedTarget)) {
this.closeList();
if (this._onTouched) {
this._onTouched();
}
}
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
if (!this.selectedValue) {
return;
}
this.isDisabled = isDisabled;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(value) {
this.selectedValue = value;
this.selectedIndex = this.indexForValue(value);
this.selectOptions?.forEach((item) => {
item.updateSelected(item.getValue() === value);
});
this.cdr.markForCheck();
}
get customLabelContext() {
const value = this.selectedValue;
const index = this.selectedIndex;
return { $implicit: value, value, index };
}
/**
* Label (≠ value) of selected option
* @ignore
*/
get selectedLabel() {
return this.selectOptions?.get(this.selectedIndex)?.getLabel() ?? '';
}
/**
* Aria-label for the trigger button element.
* @ignore
*/
get buttonLabel() {
return `${this.fieldLabel} - ${this.customLabelEl?.nativeElement.innerText || this.selectedValue || this.buttonDefaultValueLabel}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectComponent, isStandalone: true, selector: "nj-select", inputs: { iconName: "iconName", fieldLabel: "fieldLabel", listNavigationLabel: "listNavigationLabel", buttonDefaultValueLabel: "buttonDefaultValueLabel" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true,
},
], queries: [{ propertyName: "customLabel", first: true, predicate: CustomLabelDirective, descendants: true }, { propertyName: "selectOptions", predicate: ListItemComponent, descendants: true }], viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["button"], descendants: true }, { propertyName: "customLabelEl", first: true, predicate: ["customLabelEl"], descendants: true }, { propertyName: "listEl", first: true, predicate: ListGroupComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [size]=\"size\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n (focusout)=\"handleFocusout($event)\"\n>\n <input\n type=\"text\"\n readonly\n [value]=\"selectedLabel\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n njFormField\n />\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n <ng-container njFormAdditionalContent>\n <div\n *ngIf=\"selectedValue && customLabel?.templateRef\"\n #customLabelEl\n class=\"nj-form-item__custom-label\"\n aria-hidden=\"true\"\n njFormField>\n <ng-container [ngTemplateOutlet]=\"customLabel.templateRef\"\n [ngTemplateOutletContext]=\"customLabelContext\"></ng-container>\n </div>\n <p [id]=\"getInstructionsId()\" hidden>{{ listNavigationLabel }}</p>\n <button\n #button\n type=\"button\"\n class=\"nj-form-item__custom-list-button\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n role=\"combobox\"\n [attr.aria-label]=\"buttonLabel\"\n [attr.tabindex]=\"isOpen ? -1 : null\"\n [attr.aria-describedby]=\"getDescriptionId()\"\n (click)=\"toggleIsOpen()\"\n ></button>\n <nj-list-group\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [hidden]=\"!isOpen\"\n [@transformList]=\"isOpen ? 'open': 'void'\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [isCustomSelectList]=\"true\"\n tabindex=\"-1\"\n [ariaLabel]=\"fieldLabel\"\n (keydown)=\"handleListKeydown($event)\"\n >\n <ng-content select=\"[njSelectOptions]\"></ng-content>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n", styles: [":host{display:block;width:100%;height:100%}.nj-form-item__custom-list-button{outline:none}.nj-form-item--custom-label input{z-index:-1;transform:scale(0);opacity:0}.nj-form-item--custom-label div.nj-form-item__custom-label{position:absolute;inset:0}\n"], dependencies: [{ kind: "component", type: ListGroupComponent, selector: "nj-list-group", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: FormItemComponent, selector: "nj-form-item", inputs: ["inputId", "size", "isFloatingLabel", "isDisabled", "isRequired", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick"] }, { kind: "directive", type: FormFieldDirective, selector: "input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]", exportAs: ["njFormField"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [selectAnimations.transformList], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true,
},
], animations: [selectAnimations.transformList], encapsulation: ViewEncapsulation.None, standalone: true, imports: [ListGroupComponent, FormItemComponent, FormFieldDirective, CommonModule], template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [hasCustomIcon]=\"hasCustomIcon\"\n [isFloatingLabel]=\"isFloatingLabel\"\n [iconName]=\"iconName\"\n [size]=\"size\"\n [isSelect]=\"true\"\n [additionalClass]=\"getAdditionalClass()\"\n [inputId]=\"inputId\"\n (focusout)=\"handleFocusout($event)\"\n>\n <input\n type=\"text\"\n readonly\n [value]=\"selectedLabel\"\n [attr.id]=\"inputId\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n njFormField\n />\n <ng-content njFormLabel select=\"[njFormLabel]\"></ng-content>\n <ng-content njFormSubscript select=\"[njFormSubscript]\"></ng-content>\n <ng-container njFormAdditionalContent>\n <div\n *ngIf=\"selectedValue && customLabel?.templateRef\"\n #customLabelEl\n class=\"nj-form-item__custom-label\"\n aria-hidden=\"true\"\n njFormField>\n <ng-container [ngTemplateOutlet]=\"customLabel.templateRef\"\n [ngTemplateOutletContext]=\"customLabelContext\"></ng-container>\n </div>\n <p [id]=\"getInstructionsId()\" hidden>{{ listNavigationLabel }}</p>\n <button\n #button\n type=\"button\"\n class=\"nj-form-item__custom-list-button\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen\"\n role=\"combobox\"\n [attr.aria-label]=\"buttonLabel\"\n [attr.tabindex]=\"isOpen ? -1 : null\"\n [attr.aria-describedby]=\"getDescriptionId()\"\n (click)=\"toggleIsOpen()\"\n ></button>\n <nj-list-group\n class=\"nj-form-item__list nj-form-item__list--no-animate\"\n [hidden]=\"!isOpen\"\n [@transformList]=\"isOpen ? 'open': 'void'\"\n [isDense]=\"true\"\n [hasBorder]=\"false\"\n [isClickable]=\"true\"\n [isCustomSelectList]=\"true\"\n tabindex=\"-1\"\n [ariaLabel]=\"fieldLabel\"\n (keydown)=\"handleListKeydown($event)\"\n >\n <ng-content select=\"[njSelectOptions]\"></ng-content>\n </nj-list-group>\n </ng-container>\n</nj-form-item>\n", styles: [":host{display:block;width:100%;height:100%}.nj-form-item__custom-list-button{outline:none}.nj-form-item--custom-label input{z-index:-1;transform:scale(0);opacity:0}.nj-form-item--custom-label div.nj-form-item__custom-label{position:absolute;inset:0}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; }, propDecorators: { iconName: [{
type: Input
}], fieldLabel: [{
type: Input
}], listNavigationLabel: [{
type: Input
}], buttonDefaultValueLabel: [{
type: Input
}], buttonEl: [{
type: ViewChild,
args: ['button']
}], customLabelEl: [{
type: ViewChild,
args: ['customLabelEl']
}], listEl: [{
type: ViewChild,
args: [ListGroupComponent]
}], customLabel: [{
type: ContentChild,
args: [CustomLabelDirective]
}], selectOptions: [{
type: ContentChildren,
args: [ListItemComponent, { descendants: true }]
}] } });
class SidebarFooterDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidebarFooterDirective, isStandalone: true, selector: "[njSidebarFooter]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarFooterDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarFooter]',
standalone: true
}]
}] });
class SidebarItemDirective {
constructor() {
this.sidebar = inject(SidebarComponent);
this.listItem = inject(ListItemComponent);
this.cdr = inject(ChangeDetectorRef);
this.listItem.hasRightBorder = true;
this.updateListItemFoldedState();
}
ngDoCheck() {
if (this.isCurrentlyFolded !== this.sidebar.isFolded) {
this.updateListItemFoldedState();
}
}
updateListItemFoldedState() {
this.isCurrentlyFolded = this.sidebar.isFolded;
this.listItem.isIconOnly = this.isCurrentlyFolded;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidebarItemDirective, isStandalone: true, selector: "[njSidebarItem]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarItem]',
standalone: true
}]
}], ctorParameters: function () { return []; }, propDecorators: { sidebar: [{
type: Host
}], listItem: [{
type: Self
}] } });
class SidebarLogoDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidebarLogoDirective, isStandalone: true, selector: "[njSidebarLogo]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarLogoDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarLogo]',
standalone: true
}]
}] });
class SidebarComponent {
constructor() {
this.staticClass = 'nj-sidebar';
/**
* Whether the sidebar should be folded
*/
this.isFolded = false;
/**
* Whether the sidebar should have a fold list item
*/
this.hasFoldItem = true;
/**
* Fold list item label
*/
this.foldItemLabel = 'Fold';
/**
* Emits an event when fold list item is clicked
*/
this.foldItemClicked = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: SidebarComponent, isStandalone: true, selector: "nj-sidebar", inputs: { isFolded: ["isFolded", "isFolded", booleanAttribute], hasFoldItem: ["hasFoldItem", "hasFoldItem", booleanAttribute], foldItemLabel: "foldItemLabel" }, outputs: { foldItemClicked: "foldItemClicked" }, host: { properties: { "class": "this.staticClass", "class.nj-sidebar--folded": "this.isFolded" } }, queries: [{ propertyName: "logo", first: true, predicate: SidebarLogoDirective, descendants: true }, { propertyName: "footerElements", predicate: SidebarFooterDirective }], ngImport: i0, template: "<div class=\"nj-sidebar__brand\" *ngIf=\"logo?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{isFolded}\"></ng-container>\n</div>\n<nav class=\"nj-sidebar__navigation\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-group>\n</nav>\n<nav *ngIf=\"footerElements?.length\" class=\"nj-sidebar__navigation nj-sidebar__navigation--footer\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-container *ngFor=\"let footerElement of footerElements\" [ngTemplateOutlet]=\"footerElement.templateRef\">\n </ng-container>\n </nj-list-group>\n</nav>\n<nj-list-group *ngIf=\"hasFoldItem\" class=\"nj-sidebar__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li nj-list-item njSidebarItem class=\"nj-sidebar__fold-btn\" type=\"button\" iconName=\"chevron_left\" (itemClick)=\"foldItemClicked.next($event)\">\n {{foldItemLabel}}\n </li>\n</nj-list-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "nj-list-group", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: ListItemComponent, selector: "[nj-list-item]", inputs: ["isActive", "isDisabled", "hasRightBorder", "role", "ariaSelected", "iconName", "iconAriaLabel", "type", "href", "value", "isCheckboxContent", "isIconOnly", "checkboxContentId"], outputs: ["itemClick"] }, { kind: "directive", type: SidebarItemDirective, selector: "[njSidebarItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
CommonModule,
ListGroupComponent,
ListItemComponent,
SidebarFooterDirective,
SidebarItemDirective,
SidebarLogoDirective
], template: "<div class=\"nj-sidebar__brand\" *ngIf=\"logo?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{isFolded}\"></ng-container>\n</div>\n<nav class=\"nj-sidebar__navigation\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-group>\n</nav>\n<nav *ngIf=\"footerElements?.length\" class=\"nj-sidebar__navigation nj-sidebar__navigation--footer\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-container *ngFor=\"let footerElement of footerElements\" [ngTemplateOutlet]=\"footerElement.templateRef\">\n </ng-container>\n </nj-list-group>\n</nav>\n<nj-list-group *ngIf=\"hasFoldItem\" class=\"nj-sidebar__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li nj-list-item njSidebarItem class=\"nj-sidebar__fold-btn\" type=\"button\" iconName=\"chevron_left\" (itemClick)=\"foldItemClicked.next($event)\">\n {{foldItemLabel}}\n </li>\n</nj-list-group>\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], isFolded: [{
type: HostBinding,
args: ['class.nj-sidebar--folded']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], hasFoldItem: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], foldItemLabel: [{
type: Input
}], foldItemClicked: [{
type: Output
}], logo: [{
type: ContentChild,
args: [SidebarLogoDirective]
}], footerElements: [{
type: ContentChildren,
args: [SidebarFooterDirective]
}] } });
class SidebarContentDirective {
constructor() {
this.staticClass = 'nj-sidebar-content';
this.shouldBeCovered = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.12", type: SidebarContentDirective, isStandalone: true, selector: "[njSidebarContent]", inputs: { shouldBeCovered: ["shouldBeCovered", "shouldBeCovered", booleanAttribute] }, host: { properties: { "class": "this.staticClass", "class.nj-sidebar-content--nopush": "this.shouldBeCovered" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarContent]',
standalone: true
}]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], shouldBeCovered: [{
type: HostBinding,
args: ['class.nj-sidebar-content--nopush']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class SidepanelFooterDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelFooterDirective, isStandalone: true, selector: "[njSidepanelFooter]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelFooterDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidepanelFooter]',
standalone: true
}]
}] });
class SidepanelHeaderDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelHeaderDirective, isStandalone: true, selector: "[njSidepanelHeader]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidepanelHeader]',
standalone: true
}]
}] });
class SidepanelComponent {
constructor() {
this.staticClass = 'nj-sidepanel';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelComponent, isStandalone: true, selector: "nj-sidepanel", host: { properties: { "class": "this.staticClass" } }, queries: [{ propertyName: "header", first: true, predicate: SidepanelHeaderDirective, descendants: true }, { propertyName: "footer", first: true, predicate: SidepanelFooterDirective, descendants: true }], ngImport: i0, template: "<div class=\"nj-sidepanel__header\" *ngIf=\"header?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n</div>\n<div class=\"nj-sidepanel__content\">\n <ng-content></ng-content>\n</div>\n<div class=\"nj-sidepanel__footer\" *ngIf=\"footer?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, IconButtonComponent, SidepanelFooterDirective, SidepanelHeaderDirective], template: "<div class=\"nj-sidepanel__header\" *ngIf=\"header?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n</div>\n<div class=\"nj-sidepanel__content\">\n <ng-content></ng-content>\n</div>\n<div class=\"nj-sidepanel__footer\" *ngIf=\"footer?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n</div>\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], header: [{
type: ContentChild,
args: [SidepanelHeaderDirective]
}], footer: [{
type: ContentChild,
args: [SidepanelFooterDirective]
}] } });
class SidepanelHeaderActionDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelHeaderActionDirective, isStandalone: true, selector: "[njSidepanelHeaderAction]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidepanelHeaderAction]',
standalone: true
}]
}] });
class SidepanelHeaderComponent {
constructor() {
this.staticClass = 'nj-sidepanel-header';
/**
* Whether it should display a close icon in the header
*/
this.hasCloseIcon = true;
/**
* Emit event when clicking the close icon
*/
this.closeIconClicked = new EventEmitter();
}
get shouldDisplayHeaderActions() {
return this.hasCloseIcon || this.actions.length;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelHeaderComponent, isStandalone: true, selector: "nj-sidepanel-header", inputs: { title: "title", hasCloseIcon: "hasCloseIcon" }, outputs: { closeIconClicked: "closeIconClicked" }, host: { properties: { "class": "this.staticClass" } }, queries: [{ propertyName: "actions", predicate: SidepanelHeaderActionDirective }], ngImport: i0, template: "<span *ngIf=\"title; else noTitle\" class=\"nj-sidepanel-header__title\">{{title}}</span>\n<div class=\"nj-sidepanel-header__actions\" *ngIf=\"shouldDisplayHeaderActions\">\n <ng-container *ngFor=\"let action of actions\" [ngTemplateOutlet]=\"action.templateRef\"></ng-container>\n <nj-icon-button *ngIf=\"hasCloseIcon\" variant=\"tertiary\" icon=\"close\" (buttonClick)=\"closeIconClicked.emit($event)\"></nj-icon-button>\n</div>\n\n<ng-template #noTitle>\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SidepanelHeaderActionDirective, IconButtonComponent, CommonModule], template: "<span *ngIf=\"title; else noTitle\" class=\"nj-sidepanel-header__title\">{{title}}</span>\n<div class=\"nj-sidepanel-header__actions\" *ngIf=\"shouldDisplayHeaderActions\">\n <ng-container *ngFor=\"let action of actions\" [ngTemplateOutlet]=\"action.templateRef\"></ng-container>\n <nj-icon-button *ngIf=\"hasCloseIcon\" variant=\"tertiary\" icon=\"close\" (buttonClick)=\"closeIconClicked.emit($event)\"></nj-icon-button>\n</div>\n\n<ng-template #noTitle>\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"] }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], title: [{
type: Input
}], hasCloseIcon: [{
type: Input
}], closeIconClicked: [{
type: Output
}], actions: [{
type: ContentChildren,
args: [SidepanelHeaderActionDirective]
}] } });
class SidepanelLayoutPanelDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelLayoutPanelDirective, isStandalone: true, selector: "[njSidepanelLayoutPanel]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutPanelDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidepanelLayoutPanel]',
standalone: true
}]
}] });
const defaultParams = {
params: { animationDuration: '100ms' },
};
const sidePanelLayoutAnimation = {
panelSlideInAndOut: trigger('panelSlideInAndOut', [
state('void', style({ opacity: 0.9, transform: 'translateX(100%)' })),
state('*', style({ opacity: 1, transform: 'none' })),
transition(':enter, :leave', animate(`{{animationDuration}} ${njSemanticMotionEasingFastOutSlowIn}`), defaultParams),
]),
panelOpened: trigger('panelOpened', [
state('void', style({ paddingRight: 0 })),
state('false', style({ paddingRight: 0 })),
state('true', style({ paddingRight: 'var(--nj-sidepanel-final-width)' })),
transition('* => *', animate(`{{animationDuration}} ${njSemanticMotionEasingFastOutSlowIn}`), defaultParams),
]),
};
class SidepanelLayoutComponent {
constructor() {
this.cdr = inject(ChangeDetectorRef);
this._isPanelDisplayed = true;
this._animationParams = {};
this.staticClass = 'nj-sidepanel-layout';
/**
* Whether the panel should be displayed beside or over the content
*/
this.isOverContent = false;
/**
* Emit when sidepanel visibility state change
*/
this.sidepanelVisibilityChange = new EventEmitter();
}
/**
* Whether the panel animation should be disabled
*/
set isAnimationDisabled(value) {
this._animationParams = value && { animationDuration: '0ms' };
}
/**
* Show sidepanel
*/
showPanel() {
this.changePanelVisibility(true);
}
/**
* Hide sidepanel
*/
hidePanel() {
this.changePanelVisibility(false);
}
changePanelVisibility(isPanelDisplayed) {
if (isPanelDisplayed === this._isPanelDisplayed) {
return;
}
this._isPanelDisplayed = isPanelDisplayed;
this.sidepanelVisibilityChange.emit(isPanelDisplayed);
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelLayoutComponent, isStandalone: true, selector: "nj-sidepanel-layout", inputs: { isAnimationDisabled: "isAnimationDisabled", isOverContent: "isOverContent" }, outputs: { sidepanelVisibilityChange: "sidepanelVisibilityChange" }, host: { properties: { "class": "this.staticClass", "class.nj-sidepanel-layout--over-content": "this.isOverContent" } }, queries: [{ propertyName: "panel", first: true, predicate: SidepanelLayoutPanelDirective, descendants: true }], ngImport: i0, template: " <div [@panelOpened]=\"{value: !isOverContent && _isPanelDisplayed, params: _animationParams}\" class=\"nj-sidepanel-layout__content\">\n <ng-content></ng-content>\n </div>\n <div [@panelSlideInAndOut]=\"{value: '*', params: _animationParams}\" *ngIf=\"_isPanelDisplayed && panel.templateRef\" class=\"nj-sidepanel-layout__sidepanel\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\"></ng-container>\n </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [sidePanelLayoutAnimation.panelSlideInAndOut, sidePanelLayoutAnimation.panelOpened], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel-layout', animations: [sidePanelLayoutAnimation.panelSlideInAndOut, sidePanelLayoutAnimation.panelOpened], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ButtonComponent, SidepanelLayoutPanelDirective, CommonModule], template: " <div [@panelOpened]=\"{value: !isOverContent && _isPanelDisplayed, params: _animationParams}\" class=\"nj-sidepanel-layout__content\">\n <ng-content></ng-content>\n </div>\n <div [@panelSlideInAndOut]=\"{value: '*', params: _animationParams}\" *ngIf=\"_isPanelDisplayed && panel.templateRef\" class=\"nj-sidepanel-layout__sidepanel\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\"></ng-container>\n </div>\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], isAnimationDisabled: [{
type: Input
}], isOverContent: [{
type: HostBinding,
args: ['class.nj-sidepanel-layout--over-content']
}, {
type: Input
}], sidepanelVisibilityChange: [{
type: Output
}], panel: [{
type: ContentChild,
args: [SidepanelLayoutPanelDirective]
}] } });
class SkeletonContainerComponent {
constructor() {
/**
* Skeleton label (read by screen readers).
* Defaults to "Content is loading"
*/
this.screenReaderLabel = 'Content is loading';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SkeletonContainerComponent, isStandalone: true, selector: "nj-skeleton-container", inputs: { screenReaderLabel: "screenReaderLabel" }, ngImport: i0, template: "<div class=\"nj-skeleton-container\">\n <span class=\"nj-sr-only\">{{screenReaderLabel}}</span>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"nj-skeleton-container\">\n <span class=\"nj-sr-only\">{{screenReaderLabel}}</span>\n <ng-content></ng-content>\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { screenReaderLabel: [{
type: Input
}] } });
class SkeletonRectangleComponent {
constructor() {
/**
* @ignore
*/
this.skeletonClassName = 'nj-skeleton';
}
/**
* @ignore
*/
getSkeletonSizeClass() {
if (!this.size) {
return '';
}
return `${this.skeletonClassName}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonRectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SkeletonRectangleComponent, isStandalone: true, selector: "nj-skeleton-rectangle", inputs: { height: "height", width: "width", size: "size" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--rectangle\" [style.height]=\"height\" [style.width]=\"width\" [ngClass]=\"[getSkeletonSizeClass()]\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonRectangleComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-rectangle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--rectangle\" [style.height]=\"height\" [style.width]=\"width\" [ngClass]=\"[getSkeletonSizeClass()]\"></div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], size: [{
type: Input
}] } });
class SkeletonCircleComponent {
constructor() {
/**
* @ignore
*/
this.skeletonClassName = 'nj-skeleton';
}
/**
* @ignore
*/
getSkeletonVariantClass() {
if (!this.variant) {
return '';
}
return `${this.skeletonClassName}--${this.variant}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SkeletonCircleComponent, isStandalone: true, selector: "nj-skeleton-circle", inputs: { height: "height", width: "width", variant: "variant" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--circle\" [style.height]=\"height\" [style.width]=\"width\" [ngClass]=\"[getSkeletonVariantClass()]\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonCircleComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-circle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--circle\" [style.height]=\"height\" [style.width]=\"width\" [ngClass]=\"[getSkeletonVariantClass()]\"></div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], variant: [{
type: Input
}] } });
class SkeletonAreaComponent {
constructor() {
/**
* Area skeleton material icon
*/
this.icon = 'image';
/**
* Whether Area skeleton has custom icon
*/
this.hasCustomIcon = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SkeletonAreaComponent, isStandalone: true, selector: "nj-skeleton-area", inputs: { height: "height", width: "width", icon: "icon", hasCustomIcon: "hasCustomIcon" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--area\" [style.height]=\"height\" [style.width]=\"width\">\n <nj-icon class=\"nj-skeleton__icon\" *ngIf=\"!hasCustomIcon\" [name]=\"icon\" size=\"xl\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-skeleton__icon\">\n <ng-content></ng-content>\n </span>\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SkeletonAreaComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<div aria-hidden=\"true\" class=\"nj-skeleton nj-skeleton--area\" [style.height]=\"height\" [style.width]=\"width\">\n <nj-icon class=\"nj-skeleton__icon\" *ngIf=\"!hasCustomIcon\" [name]=\"icon\" size=\"xl\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-skeleton__icon\">\n <ng-content></ng-content>\n </span>\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], icon: [{
type: Input
}], hasCustomIcon: [{
type: Input
}] } });
class SliderComponent {
constructor() {
this._max = 100;
this._min = 0;
this.inputValue$ = new BehaviorSubject(this._min);
this.unsubscribe = new Subject();
this.cdr = inject(ChangeDetectorRef);
/**
* @ignore
*/
this._onChange = (_) => { };
/**
* @ignore
*/
this._onTouched = () => { };
/**
* Slider input step
*/
this.step = 0.1;
/**
* Whether input is disabled or not
*/
this.isDisabled = false;
}
/**
* Minimum value
*/
set min(min) {
if (!Utils.isUndefinedOrNull(min)) {
this._min = min;
this.updateInputCssPropWithValue(this._currentValue);
}
}
get min() {
return this._min;
}
/**
* Maximum value
*/
set max(max) {
if (!Utils.isUndefinedOrNull(max)) {
this._max = max;
this.updateInputCssPropWithValue(this._currentValue);
}
}
get max() {
return this._max;
}
/**
* Input value
*/
set value(val) {
if (!Utils.isUndefinedOrNull(val)) {
this._initialValue = val;
}
else {
this._initialValue = this._min;
}
this._currentValue = this._initialValue;
this.inputValue$.next(this._currentValue);
this.cdr.markForCheck();
}
get value() {
return this._initialValue;
}
ngAfterViewInit() {
this.inputValue$.pipe(takeUntil(this.unsubscribe)).subscribe((val) => {
this.updateInputCssPropWithValue(val);
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(value) {
this.value = value;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @ignore
*/
updateValue(event) {
// @ts-ignore
const newVal = event?.target?.value;
if (newVal !== this._currentValue) {
this._currentValue = newVal;
this.writeValue(newVal);
this._onChange(newVal);
}
}
/**
* @ignore
*/
updateInputCssPropWithValue(value) {
if (!this.input?.nativeElement || Utils.isUndefinedOrNull(value)) {
return;
}
let percentage = (100 * (value - this.min)) / (this.max - this.min);
percentage = isNaN(percentage) ? 0 : percentage;
this.input.nativeElement.style.setProperty('--nj-slider-track-position', `${percentage}% 100%`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderComponent, isStandalone: true, selector: "nj-slider", inputs: { sliderId: "sliderId", name: "name", label: "label", min: "min", max: "max", value: "value", step: "step", isDisabled: "isDisabled" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SliderComponent),
multi: true
}
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"nj-slider\" [ngClass]=\"{'nj-slider--disabled': isDisabled}\">\n <label *ngIf=\"label\" [attr.for]=\"sliderId\">{{label}}</label>\n <input #input\n [style]=\"\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step ? step : 0.1\"\n type=\"range\"\n [attr.id]=\"sliderId\"\n [name]=\"step ? name : ''\"\n [value]=\"value\"\n (input)=\"updateValue($event)\"\n (focus)=\"_onTouched?.()\"\n [disabled]=\"isDisabled\"/>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-slider', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SliderComponent),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div class=\"nj-slider\" [ngClass]=\"{'nj-slider--disabled': isDisabled}\">\n <label *ngIf=\"label\" [attr.for]=\"sliderId\">{{label}}</label>\n <input #input\n [style]=\"\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step ? step : 0.1\"\n type=\"range\"\n [attr.id]=\"sliderId\"\n [name]=\"step ? name : ''\"\n [value]=\"value\"\n (input)=\"updateValue($event)\"\n (focus)=\"_onTouched?.()\"\n [disabled]=\"isDisabled\"/>\n</div>\n" }]
}], propDecorators: { sliderId: [{
type: Input
}], name: [{
type: Input
}], label: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], value: [{
type: Input
}], step: [{
type: Input
}], isDisabled: [{
type: Input
}], input: [{
type: ViewChild,
args: ['input']
}] } });
class SwitchComponent {
constructor() {
/**
* @ignore
*/
this.switchClassName = 'nj-switch';
/**
* Switch variant theme
*/
this.variant = 'primary';
/**
* Whether switch is checked or not
*/
this.isChecked = false;
/**
* Output that emits a SwitchValue when switch value change occurs
*/
this.valueChange = new EventEmitter();
}
/**
* @ignore
*/
getButtonMainClass() {
if (!this.variant) {
return '';
}
return `${this.switchClassName}--${this.variant}`;
}
/**
* @ignore
*/
_onChangeEvent(event) {
event.stopPropagation();
if (this._inputElement?.nativeElement) {
this.isChecked = this._inputElement.nativeElement.checked;
if (this.values) {
this.valueChange.emit(this.isChecked ? this.values.right : this.values.left);
}
}
}
/**
* @ignore
*/
_onInputClick(event) {
// We have to stop propagation for click events on the visually hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "nj-switch", inputs: { variant: "variant", isDisabled: "isDisabled", values: "values", isChecked: "isChecked", id: "id", name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", title: "title" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"nj-switch\" [ngClass]=\"getButtonMainClass()\">\n <label>\n <input type=\"checkbox\" #input\n [disabled]=\"isDisabled\"\n [checked]=\"isChecked\"\n [title]=\"title\"\n [name]=\"name\"\n [attr.id]=\"id\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <span class=\"nj-switch__slider\">\n <span class=\"nj-switch__slider-left\">\n <ng-content select=\"[left-label]\"></ng-content>\n </span>\n <span class=\"nj-switch__slider-right\">\n <ng-content select=\"[right-label]\"></ng-content>\n </span>\n </span>\n </label>\n</div>\n", styles: [".nj-switch{display:inline-flex}.nj-switch__slider{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-switch\" [ngClass]=\"getButtonMainClass()\">\n <label>\n <input type=\"checkbox\" #input\n [disabled]=\"isDisabled\"\n [checked]=\"isChecked\"\n [title]=\"title\"\n [name]=\"name\"\n [attr.id]=\"id\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\">\n <span class=\"nj-switch__slider\">\n <span class=\"nj-switch__slider-left\">\n <ng-content select=\"[left-label]\"></ng-content>\n </span>\n <span class=\"nj-switch__slider-right\">\n <ng-content select=\"[right-label]\"></ng-content>\n </span>\n </span>\n </label>\n</div>\n", styles: [".nj-switch{display:inline-flex}.nj-switch__slider{-webkit-user-select:none;user-select:none}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { variant: [{
type: Input
}], isDisabled: [{
type: Input
}], values: [{
type: Input
}], isChecked: [{
type: Input
}], id: [{
type: Input
}], name: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], title: [{
type: Input
}], valueChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}] } });
class TabComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* Output that emits if tab is selected
*/
this.tabSelect = new EventEmitter();
/**
* Output that emits keyboard event
*/
this.tabMove = new EventEmitter();
}
/**
* @ignore
*/
setIsActive(isActive) {
this.isActive = isActive;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "nj-tab", inputs: { isDisabled: "isDisabled", ariaControls: "ariaControls", id: "id", tabContentId: "tabContentId", tabContentAriaLabelledBy: "tabContentAriaLabelledBy", isActive: "isActive", badgeOptions: "badgeOptions" }, outputs: { tabSelect: "tabSelect", tabMove: "tabMove" }, viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "tab", first: true, predicate: ["tab"], descendants: true }], ngImport: i0, template: "<button class=\"nj-tab__item\" [ngClass]=\"{'nj-tab__item--active': isActive}\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"ariaControls\"\n [tabIndex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n (click)=\"tabSelect?.emit()\"\n (keydown)=\"tabMove?.emit($event)\"\n #tab\n >\n <ng-content></ng-content>\n <nj-badge\n *ngIf=\"badgeOptions\"\n size=\"md\"\n [variant]=\"badgeOptions.variant\"\n [emphasis]=\"badgeOptions.emphasis\"\n [value]=\"badgeOptions.value\"\n [capedValue]=\"badgeOptions.capedValue\"\n [unitLabel]=\"badgeOptions.unitLabel\"\n ></nj-badge>\n</button>\n<ng-template #contentTemplate>\n <ng-content select=\"[tab-content]\"></ng-content>\n</ng-template>\n", styles: [".nj-tab__item{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "nj-badge", inputs: ["emphasis", "variant", "size", "iconName", "value", "capedValue", "isUppercase", "unitLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, BadgeComponent], template: "<button class=\"nj-tab__item\" [ngClass]=\"{'nj-tab__item--active': isActive}\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"ariaControls\"\n [tabIndex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n (click)=\"tabSelect?.emit()\"\n (keydown)=\"tabMove?.emit($event)\"\n #tab\n >\n <ng-content></ng-content>\n <nj-badge\n *ngIf=\"badgeOptions\"\n size=\"md\"\n [variant]=\"badgeOptions.variant\"\n [emphasis]=\"badgeOptions.emphasis\"\n [value]=\"badgeOptions.value\"\n [capedValue]=\"badgeOptions.capedValue\"\n [unitLabel]=\"badgeOptions.unitLabel\"\n ></nj-badge>\n</button>\n<ng-template #contentTemplate>\n <ng-content select=\"[tab-content]\"></ng-content>\n</ng-template>\n", styles: [".nj-tab__item{height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isDisabled: [{
type: Input
}], ariaControls: [{
type: Input
}], id: [{
type: Input
}], tabContentId: [{
type: Input
}], tabContentAriaLabelledBy: [{
type: Input
}], isActive: [{
type: Input
}], badgeOptions: [{
type: Input
}], contentTemplateRef: [{
type: ViewChild,
args: ['contentTemplate']
}], tab: [{
type: ViewChild,
args: ['tab']
}], tabSelect: [{
type: Output
}], tabMove: [{
type: Output
}] } });
class TabsComponent {
constructor(cdr) {
this.cdr = cdr;
this.tabClass = 'nj-tab';
this.unsubscribe = new Subject();
/**
* Tabs density
*/
this.density = 'normal';
/**
* Output that emits selected tab index
*/
this.selectedTab = new EventEmitter();
}
ngAfterViewInit() {
// A render is being done after view init so setTimeout allows us to delay any attribute modification
// in the call stack so it can be taken account on next render only
setTimeout(() => {
this.tabs = this.tabsList?.toArray();
this.initializeClickListener();
this.initializeKeydownListener();
const activeIndex = this.tabs?.findIndex(tab => tab?.isActive);
this.goToTab(activeIndex === -1 ? 0 : activeIndex, false);
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
/**
* Check if tab is active
* @param index index of tab to check
*/
isActiveTab(index) {
return this.activeTabIndex === index;
}
/**
* Allows you to navigate to tab
* @param index index of tab to select
* @param emit emits if set to true
*/
goToTab(index, emit = true) {
const validIndex = (Utils.isUndefinedOrNull(index) || index < 0) ? 0 : index;
this.activeTabIndex = validIndex;
this.renderTemplate(validIndex);
if (emit) {
this.selectedTab.emit(validIndex);
}
this.cdr.markForCheck();
}
/**
* @ignore
*/
focusNextFocusableTab() {
const focusableTabs = Array.from(this.tabs).filter(tab => !tab.isDisabled);
const focusedTabIndex = focusableTabs.findIndex(tab => document.activeElement === tab.tab.nativeElement);
const nextFocusableTab = focusableTabs[(focusedTabIndex + 1) % focusableTabs.length];
nextFocusableTab.tab.nativeElement.focus();
}
/**
* @ignore
*/
focusPreviousFocusableTab() {
const focusableTabs = Array.from(this.tabs).filter(tab => !tab.isDisabled);
const focusedTabIndex = focusableTabs.findIndex(tab => document.activeElement === tab.tab.nativeElement);
const previousFocusableTabIndex = focusedTabIndex === 0
? focusableTabs.length - 1
: focusedTabIndex - 1;
const previousFocusableTab = focusableTabs[previousFocusableTabIndex];
previousFocusableTab.tab.nativeElement.focus();
}
/**
* @ignore
*/
handleTabKeydown(event) {
switch (event.key) {
case 'ArrowRight':
event.preventDefault();
this.focusNextFocusableTab();
break;
case 'ArrowLeft':
event.preventDefault();
this.focusPreviousFocusableTab();
break;
default:
}
}
getDensityClass() {
if (!this.density || this.density === 'normal') {
return;
}
return `${this.tabClass}--${this.density}`;
}
initializeClickListener() {
if (Utils.isUndefinedOrNull(this.tabs)) {
return;
}
this.tabs.forEach((tab, index) => {
tab.tabSelect
.pipe(takeUntil(this.unsubscribe))
.subscribe(_ => {
this.goToTab(index);
});
});
}
initializeKeydownListener() {
if (Utils.isUndefinedOrNull(this.tabs)) {
return;
}
this.tabs.forEach(tab => {
tab.tabMove.pipe(takeUntil(this.unsubscribe))
.subscribe(event => {
this.handleTabKeydown(event);
});
});
}
renderTemplate(index) {
for (const tab of this.tabs) {
if (tab?.isActive) {
tab.setIsActive(false);
}
}
this.tabToRender = this.tabs?.[index];
this.tabToRender.setIsActive(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabsComponent, isStandalone: true, selector: "nj-tabs", inputs: { label: "label", density: "density" }, outputs: { selectedTab: "selectedTab" }, queries: [{ propertyName: "tabsList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"nj-tab\" [ngClass]=\"getDensityClass()\">\n <div class=\"nj-tab__items\" role=\"tablist\" [attr.aria-label]=\"label\">\n <ng-content></ng-content>\n </div>\n <div class=\"nj-tab__content-wrapper\">\n <div class=\"nj-tab__content nj-tab__content--active\" *ngIf=\"tabToRender\"\n [attr.id]=\"tabToRender.tabContentId\"\n [attr.aria-labelledby]=\"tabToRender.tabContentAriaLabelledBy\"\n role=\"tabpanel\"\n tabIndex=\"0\">\n <ng-container *ngTemplateOutlet=\"tabToRender.contentTemplateRef\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [".nj-tab__content-wrapper{margin:var(--nj-semantic-size-spacing-24) 0}.nj-tab--stretched nj-tab{display:inline-flex;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [TabComponent, CommonModule], template: "<div class=\"nj-tab\" [ngClass]=\"getDensityClass()\">\n <div class=\"nj-tab__items\" role=\"tablist\" [attr.aria-label]=\"label\">\n <ng-content></ng-content>\n </div>\n <div class=\"nj-tab__content-wrapper\">\n <div class=\"nj-tab__content nj-tab__content--active\" *ngIf=\"tabToRender\"\n [attr.id]=\"tabToRender.tabContentId\"\n [attr.aria-labelledby]=\"tabToRender.tabContentAriaLabelledBy\"\n role=\"tabpanel\"\n tabIndex=\"0\">\n <ng-container *ngTemplateOutlet=\"tabToRender.contentTemplateRef\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [".nj-tab__content-wrapper{margin:var(--nj-semantic-size-spacing-24) 0}.nj-tab--stretched nj-tab{display:inline-flex;flex-grow:1}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
type: Input
}], density: [{
type: Input
}], tabsList: [{
type: ContentChildren,
args: [TabComponent]
}], selectedTab: [{
type: Output
}] } });
class ToastComponent {
constructor(sanitize, el, cdr) {
this.sanitize = sanitize;
this.el = el;
this.cdr = cdr;
/**
* Whether toast has a close icon or not
*/
this.hasCloseIcon = true;
/**
* Time in ms to dismiss after
*/
this.dismissAfter = 5000;
/**
* Gauge accessible hidden label.
* @example "The toast will be automatically closed in 10s"
*/
this.gaugeLabel = 'Time left until toast is closed';
/**
* Outputs event when toast is closed
*/
this.closed = new EventEmitter();
/**
* Outputs event when toast is dismissed
*/
this.dismissed = new EventEmitter();
}
ngOnInit() {
if (this.shouldDismiss) {
// @ts-ignore
this._dismissTimeoutId = setTimeout(() => {
this.removeToast();
this.dismissed.emit();
}, this.dismissAfter);
}
}
ngOnDestroy() {
this.clearDismissTimeout();
}
/**
* @ignore
*/
getGaugeAnimationStyles() {
if (!this.dismissAfter) {
return null;
}
return this.sanitize.bypassSecurityTrustStyle(`
animation-duration: ${this.dismissAfter}ms
`);
}
/**
* Close toast
*/
close(event) {
event?.preventDefault();
event?.stopImmediatePropagation();
this.removeToast();
this.closed.emit(event);
this.cdr.markForCheck();
}
/**
* @ignore
*/
clearDismissTimeout() {
if (this._dismissTimeoutId) {
clearTimeout(this._dismissTimeoutId);
}
}
removeToast() {
this.el?.nativeElement?.remove();
this.clearDismissTimeout();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToastComponent, isStandalone: true, selector: "nj-toast", inputs: { toastId: "toastId", isInverse: "isInverse", hasCloseIcon: "hasCloseIcon", iconName: "iconName", dismissAfter: "dismissAfter", gaugeLabel: "gaugeLabel", shouldDismiss: "shouldDismiss" }, outputs: { closed: "closed", dismissed: "dismissed" }, ngImport: i0, template: "<div class=\"nj-toast\" [ngClass]=\"{'nj-toast--inverse': isInverse}\">\n <div class=\"nj-toast__body\">\n <nj-icon *ngIf=\"iconName\" [name]=\"iconName\" class=\"nj-toast__icon\" variant=\"inherit\"></nj-icon>\n <div class=\"nj-toast__content\">\n <p class=\"nj-toast__title\" [attr.id]=\"toastId\">\n <ng-content></ng-content>\n </p>\n <p class=\"nj-toast__text\">\n <ng-content select=\"[njToastBody]\"></ng-content>\n </p>\n </div>\n </div>\n <div class=\"nj-toast__action\" *ngIf=\"hasCloseIcon\">\n <nj-icon-button\n icon=\"close\"\n label=\"Close notification\"\n size=\"sm\"\n [variant]=\"isInverse ? 'primary' : 'inverse'\"\n [ariaDescribedby]=\"toastId\"\n (buttonClick)=\"close($event)\"\n >\n </nj-icon-button>\n </div>\n <div class=\"nj-toast__gauge\" *ngIf=\"shouldDismiss\">\n <div class=\"nj-toast__gauge-bar\" [style]=\"getGaugeAnimationStyles()\">\n <p class=\"nj-sr-only\">{{ gaugeLabel }}</p>\n </div>\n </div>\n</div>\n", styles: [".nj-toast__text:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-toast', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, IconButtonComponent, CommonModule], template: "<div class=\"nj-toast\" [ngClass]=\"{'nj-toast--inverse': isInverse}\">\n <div class=\"nj-toast__body\">\n <nj-icon *ngIf=\"iconName\" [name]=\"iconName\" class=\"nj-toast__icon\" variant=\"inherit\"></nj-icon>\n <div class=\"nj-toast__content\">\n <p class=\"nj-toast__title\" [attr.id]=\"toastId\">\n <ng-content></ng-content>\n </p>\n <p class=\"nj-toast__text\">\n <ng-content select=\"[njToastBody]\"></ng-content>\n </p>\n </div>\n </div>\n <div class=\"nj-toast__action\" *ngIf=\"hasCloseIcon\">\n <nj-icon-button\n icon=\"close\"\n label=\"Close notification\"\n size=\"sm\"\n [variant]=\"isInverse ? 'primary' : 'inverse'\"\n [ariaDescribedby]=\"toastId\"\n (buttonClick)=\"close($event)\"\n >\n </nj-icon-button>\n </div>\n <div class=\"nj-toast__gauge\" *ngIf=\"shouldDismiss\">\n <div class=\"nj-toast__gauge-bar\" [style]=\"getGaugeAnimationStyles()\">\n <p class=\"nj-sr-only\">{{ gaugeLabel }}</p>\n </div>\n </div>\n</div>\n", styles: [".nj-toast__text:empty{display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { toastId: [{
type: Input
}], isInverse: [{
type: Input
}], hasCloseIcon: [{
type: Input
}], iconName: [{
type: Input
}], dismissAfter: [{
type: Input
}], gaugeLabel: [{
type: Input
}], shouldDismiss: [{
type: Input
}], closed: [{
type: Output
}], dismissed: [{
type: Output
}] } });
class ToastContainerComponent {
constructor(cdr) {
this.cdr = cdr;
}
/**
* @ignore
*/
_markForCheck() {
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToastContainerComponent, isStandalone: true, selector: "nj-toast-container", inputs: { isFullWidth: "isFullWidth", containerId: "containerId" }, ngImport: i0, template: "<div\n class=\"nj-toast__container\"\n [attr.id]=\"containerId\"\n [ngClass]=\"{'nj-toast__container--full-width': isFullWidth}\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n></div>\n", styles: [".nj-toast__text:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div\n class=\"nj-toast__container\"\n [attr.id]=\"containerId\"\n [ngClass]=\"{'nj-toast__container--full-width': isFullWidth}\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n></div>\n", styles: [".nj-toast__text:empty{display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isFullWidth: [{
type: Input
}], containerId: [{
type: Input
}] } });
class ToastService {
constructor(componentFactoryResolver, appRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.config = {
containerId: 'nj-toast-container-id',
isContainerFullWidth: false
};
}
/**
* Opens a toast wrapped inside a ng-template or a Component
*/
open(content, config) {
if (!content) {
return;
}
let toastPortal;
if (!this.containerRef) {
this.attachContainer();
}
const containerElement = this.containerRef?.location?.nativeElement?.children?.[0];
this.containerPortalHost = new DomPortalOutlet(containerElement);
if (content instanceof TemplateRef) {
toastPortal = new TemplatePortal(content, config.viewContainerRef, {
$implicit: config.data
});
}
else {
toastPortal = new ComponentPortal(content, config.viewContainerRef, null, this.componentFactoryResolver);
}
return this.containerPortalHost.attach(toastPortal);
}
/**
* Set config
*/
setConfig(config) {
this.config = { ...this.config, ...config };
this.setContainerInputs(this.containerRef);
}
setContainerInputs(containerComponentRef) {
const containerComponent = containerComponentRef?.instance;
if (containerComponent) {
containerComponent.containerId = this.config?.containerId;
containerComponent.isFullWidth = this.config?.isContainerFullWidth;
containerComponent._markForCheck();
}
}
attachContainer() {
this.portalHost = new DomPortalOutlet(document.body, undefined, this.appRef);
const containerPortal = new ComponentPortal(ToastContainerComponent, null, null, this.componentFactoryResolver);
const containerComponentRef = this.portalHost.attachComponentPortal(containerPortal);
this.setContainerInputs(containerComponentRef);
this.containerRef = containerComponentRef;
return containerComponentRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }]; } });
class ToggleComponent {
/**
* Whether the toggle is checked or not
*/
set isChecked(value) {
this._checked = value;
this.cdr.markForCheck();
}
get isChecked() {
return this._checked;
}
constructor(cdr) {
this.cdr = cdr;
/**
* @ignore
*/
this.toggleClassName = 'nj-toggle';
/**
* Input size
*/
this.size = 'md';
/**
* Output that emits checked value on change only
*/
this.valueChange = new EventEmitter();
/**
* @ignore
*/
this._onChange = (_) => {
};
/**
* @ignore
*/
this._onTouched = () => {
};
}
// Check if icon is provided on load
ngAfterViewInit() {
this.hasIcon = this.iconWrapper?.nativeElement && this.iconWrapper.nativeElement.innerHTML !== '';
}
/**
* @ignore
*/
_onChangeEvent(event) {
event.stopPropagation();
if (this._inputElement?.nativeElement) {
this.isChecked = this._inputElement.nativeElement.checked;
this._onChange(this.isChecked);
this.valueChange.emit(this.isChecked);
}
}
/**
* @ignore
*/
_onInputClick(event) {
// We have to stop propagation for click events on the visually hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
writeValue(value) {
this.isChecked = !!value;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* Implemented as part of ControlValueAccessor.
* @ignore
*/
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @ignore
*/
getToggleSizeClass() {
let sizeModifier;
switch (this.size) {
case 'lg':
sizeModifier = 'lg';
break;
default:
break;
}
return sizeModifier ? `${this.toggleClassName}--${sizeModifier}` : '';
}
/**
* @ignore
*/
getToggleIsDisabledClass() {
return this.isDisabled ? `${this.toggleClassName}--disabled` : '';
}
getToggleInheritColorClass() {
return this.isColorInherited ? `${this.toggleClassName}--inherit` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, isStandalone: true, selector: "nj-toggle", inputs: { inputId: "inputId", name: "name", size: "size", required: "required", isChecked: "isChecked", isDisabled: "isDisabled", isColorInherited: "isColorInherited", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, outputs: { valueChange: "valueChange" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "iconWrapper", first: true, predicate: ["iconWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"nj-toggle\" [ngClass]=\"[getToggleSizeClass(), getToggleIsDisabledClass(), getToggleInheritColorClass()]\">\n <label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n #input\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\"\n />\n <span class=\"nj-toggle__track\"></span>\n\n <div class=\"nj-toggle__icon-container\" #iconWrapper>\n <ng-content select=\"[njToggleIcon]\"></ng-content>\n </div>\n\n <span *ngIf=\"hasIcon; else content\" class=\"nj-sr-only\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n </label>\n</div>\n", styles: [".nj-toggle__icon-container:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-toggle', providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToggleComponent),
multi: true
}], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-toggle\" [ngClass]=\"[getToggleSizeClass(), getToggleIsDisabledClass(), getToggleInheritColorClass()]\">\n <label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n #input\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"isDisabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"_onChangeEvent($event)\"\n (click)=\"_onInputClick($event)\"\n />\n <span class=\"nj-toggle__track\"></span>\n\n <div class=\"nj-toggle__icon-container\" #iconWrapper>\n <ng-content select=\"[njToggleIcon]\"></ng-content>\n </div>\n\n <span *ngIf=\"hasIcon; else content\" class=\"nj-sr-only\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n </label>\n</div>\n", styles: [".nj-toggle__icon-container:empty{display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
type: Input
}], name: [{
type: Input
}], size: [{
type: Input
}], required: [{
type: Input
}], isChecked: [{
type: Input
}], isDisabled: [{
type: Input
}], isColorInherited: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], valueChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}], iconWrapper: [{
type: ViewChild,
args: ['iconWrapper']
}] } });
class ToggleIconDirective {
constructor() {
this.class = 'nj-toggle__icon';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToggleIconDirective, isStandalone: true, selector: "[njToggleIcon]", host: { properties: { "class": "this.class" } }, exportAs: ["njToggleIcon"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[njToggleIcon]',
exportAs: 'njToggleIcon',
standalone: true
}]
}], ctorParameters: function () { return []; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class TooltipOptions {
constructor() {
/**
* Whether tooltip has arrow or no
*/
this.hasArrow = true;
/**
* Tooltip placement
*/
this.placement = 'top';
/**
* Tooltip arrow placement
*/
this.arrowPlacement = 'center';
/**
* Whether tooltip management is standalone
*/
this.isStandalone = true;
/**
* Whether tooltip is animated
*/
this.isAnimated = true;
}
}
/*
* Public API Surface of lib
*/
// Global
/**
* Generated bundle index. Do not edit.
*/
export { AccordionActionDirective, AccordionActionsComponent, AccordionComponent, AccordionItemComponent, AutocompleteComponent, AvatarComponent, AvatarListComponent, AvatarPictureDirective, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BulletComponent, ButtonComponent, CardComponent, CardImageDirective, CheckboxComponent, CustomIconDirective, CustomLabelDirective, EngieTemplateDirective, FormFieldDirective, FormItemComponent, HighlightDirective, IconBaseComponent, IconButtonComponent, IconComponent, IconEngieComponent, InlineMessageComponent, LinkComponent, ListGroupComponent, ListItemComponent, ModalComponent, MultiSelectComponent, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SearchButtonDirective, SearchComponent, SegmentedControlButtonComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarContentDirective, SidebarFooterDirective, SidebarItemDirective, SidebarLogoDirective, SidepanelComponent, SidepanelFooterDirective, SidepanelHeaderActionDirective, SidepanelHeaderComponent, SidepanelHeaderDirective, SidepanelLayoutComponent, SidepanelLayoutPanelDirective, SkeletonAreaComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonRectangleComponent, SliderComponent, SpinnerComponent, StatusIndicatorComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, ThemeComponentsVariantsArray, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleIconDirective, TooltipComponent, TooltipDirective, TooltipOptions, buttonSizeToCSS, engieIconName };
//# sourceMappingURL=engie-group-fluid-design-system-angular.mjs.map