@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
5,776 lines • 358 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, Input, booleanAttribute, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, ContentChildren, HostBinding, ContentChild, DestroyRef, EventEmitter, contentChild, signal, computed, effect, Output, ViewChild, forwardRef, ChangeDetectorRef, HostListener, ViewChildren, Inject, output, contentChildren, Pipe, Attribute, Optional, model, Self, Host, Injectable } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgTemplateOutlet, DOCUMENT } from '@angular/common';
import { ICON_ENGIE_PREFIX } from '@engie-group/fluid-types';
export * from '@engie-group/fluid-types';
import * as i2 from '@angular/forms';
import { NgModel, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { Subject, merge, fromEvent, takeUntil, race, BehaviorSubject } from 'rxjs';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { njSemanticMotionEasingLinearOutSlowIn } from '@engie-group/fluid-design-tokens';
import { ComponentPortal, DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import * as i1$1 from '@angular/cdk/overlay';
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: "20.3.13", ngImport: i0, type: CustomIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: CustomIconDirective, isStandalone: true, selector: "[njCustomIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: EngieTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: EngieTemplateDirective, isStandalone: true, selector: "[njTemplate]", inputs: { selector: ["njTemplate", "selector"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: EngieTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[njTemplate]',
standalone: true
}]
}], propDecorators: { selector: [{
type: Input,
args: ['njTemplate']
}] } });
class HeadingDirective {
get classes() {
return {
'nj-heading': true,
'nj-heading--not-invertible': this.isNotInvertible,
[`nj-heading--${this.scale}`]: !!this.scale,
[`nj-heading--${this.variant}`]: !!this.variant
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.13", type: HeadingDirective, isStandalone: true, selector: "[njHeading]", inputs: { scale: "scale", variant: "variant", isNotInvertible: ["isNotInvertible", "isNotInvertible", booleanAttribute] }, host: { properties: { "class": "classes" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeadingDirective, decorators: [{
type: Directive,
args: [{
selector: '[njHeading]',
standalone: true,
host: {
'[class]': 'classes'
}
}]
}], propDecorators: { scale: [{
type: Input
}], variant: [{
type: Input
}], isNotInvertible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class TextDirective {
get classes() {
return {
'nj-text': true,
'nj-text--not-invertible': this.isNotInvertible,
'nj-text--monospace': this.isMono,
[`nj-text--${this.scale}`]: !!this.scale,
[`nj-text--${this.variant}`]: !!this.variant
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.13", type: TextDirective, isStandalone: true, selector: "[njText]", inputs: { scale: "scale", variant: "variant", isNotInvertible: ["isNotInvertible", "isNotInvertible", booleanAttribute], isMono: ["isMono", "isMono", booleanAttribute] }, host: { properties: { "class.nj-text": "true", "class.nj-text--not-invertible": "isNotInvertible", "class.nj-text--monospace": "isMono", "class": "classes" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TextDirective, decorators: [{
type: Directive,
args: [{
selector: '[njText]',
standalone: true,
host: {
'[class.nj-text]': 'true',
'[class.nj-text--not-invertible]': 'isNotInvertible',
'[class.nj-text--monospace]': 'isMono',
'[class]': 'classes'
}
}]
}], propDecorators: { scale: [{
type: Input
}], variant: [{
type: Input
}], isNotInvertible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isMono: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
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
/**
* Icon name
*/
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
}
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: "20.3.13", ngImport: i0, type: IconBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: IconBaseComponent, isStandalone: true, selector: "nj-icon-base", inputs: { isEngieIcon: { classPropertyName: "isEngieIcon", publicName: "isEngieIcon", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n @if (!isEngieIcon && name()) {\n {{ name() }}\n }\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconBaseComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-base', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n @if (!isEngieIcon && name()) {\n {{ name() }}\n }\n</span>\n", styles: [":host,nj-icon-base{display:inline-flex}\n"] }]
}], propDecorators: { isEngieIcon: [{
type: Input
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{
type: Input
}], className: [{
type: Input
}] } });
class IconComponent extends IconBaseComponent {
constructor() {
super(...arguments);
this.ICON_MATERIAL_CLASS = 'nj-icon-material';
}
getClassName() {
const scale = this.scale ?? this.size; // Fixme: Remove when deleting size property
const sizeClass = scale ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(scale, 'size-inherit')}` : '';
const variantClass = this.variant
? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.variant, 'color-inherit')}`
: '';
const className = this.className ? this.className : '';
const engieMaterialClass = !this.isEngieIcon && this.name().startsWith(ICON_ENGIE_PREFIX) ? `${this.ICON_MATERIAL_CLASS}--engie` : '';
return `${this.ICON_MATERIAL_CLASS} ${sizeClass} ${variantClass} ${className} ${engieMaterialClass}`;
}
classModifier(variant, inheritClass) {
switch (variant) {
case 'inherit':
return inheritClass;
default:
return variant;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: IconComponent, isStandalone: true, selector: "nj-icon", inputs: { size: "size", scale: "scale", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<nj-icon-base [name]=\"name()\" [isEngieIcon]=\"false\" [ariaLabel]=\"ariaLabel\" [className]=\"getClassName()\">\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: "20.3.13", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconBaseComponent], template: "<nj-icon-base [name]=\"name()\" [isEngieIcon]=\"false\" [ariaLabel]=\"ariaLabel\" [className]=\"getClassName()\">\n</nj-icon-base>\n", styles: [":host,nj-icon{display:inline-flex}\n"] }]
}], propDecorators: { size: [{
type: Input
}], scale: [{
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: "20.3.13", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "@if (label || headerTemplate) {\n <summary>\n @if (iconTemplate) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n <span class=\"nj-accordion-item__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n }\n </span>\n @if (!useAlternativeToggleIcon) {\n <nj-icon name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" scale=\"inherit\"></nj-icon>\n } @else {\n <nj-icon\n name=\"add\"\n class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\"\n variant=\"inherit\"\n scale=\"inherit\"\n ></nj-icon>\n <nj-icon\n name=\"remove\"\n class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\"\n variant=\"inherit\"\n scale=\"inherit\"\n ></nj-icon>\n }\n </summary>\n}\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\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", "scale", "variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'details[nj-accordion-item]', encapsulation: ViewEncapsulation.None, imports: [IconComponent, NgTemplateOutlet], host: {
'[class]': 'classes',
'(click)': 'handleClick($event)'
}, template: "@if (label || headerTemplate) {\n <summary>\n @if (iconTemplate) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n <span class=\"nj-accordion-item__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n }\n </span>\n @if (!useAlternativeToggleIcon) {\n <nj-icon name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" scale=\"inherit\"></nj-icon>\n } @else {\n <nj-icon\n name=\"add\"\n class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\"\n variant=\"inherit\"\n scale=\"inherit\"\n ></nj-icon>\n <nj-icon\n name=\"remove\"\n class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\"\n variant=\"inherit\"\n scale=\"inherit\"\n ></nj-icon>\n }\n </summary>\n}\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\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]
}] } });
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: "20.3.13", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-accordion', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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]
}] } });
class AccordionActionsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AccordionActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", 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: "20.3.13", ngImport: i0, type: AccordionActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", 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']
}] } });
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.escapeRegExp(Utils.normalizeString(search));
const regExp = new RegExp(normalizedSearch, 'gi');
return normalizedText.search(regExp) !== -1;
}
static escapeRegExp(string) {
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
}
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 must be " " because of webkit browser behavior with floating labels
: 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: "20.3.13", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", 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: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
class IconButtonIconDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconButtonIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: IconButtonIconDirective, isStandalone: true, selector: "[njIconButtonIcon]", host: { classAttribute: "nj-icon-btn__icon" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconButtonIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[njIconButtonIcon]',
standalone: true,
host: {
class: 'nj-icon-btn__icon'
}
}]
}] });
const rootClassName = 'nj-icon-btn';
class IconButtonComponent {
constructor() {
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
}
ngAfterContentInit() {
if (this.template?.selector === 'icon') {
this.iconTemplateRef = this.template.templateRef;
}
}
get classes() {
const classes = [rootClassName];
if (this.variant) {
classes.push(`${rootClassName}--${this.variant}`);
}
const scale = this.scale ?? this.size;
if (scale) {
classes.push(`${rootClassName}--${scale}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: IconButtonComponent, isStandalone: true, selector: "button[nj-icon-button]", inputs: { variant: "variant", size: "size", scale: "scale", hasCustomIcon: "hasCustomIcon", icon: "icon", altLabel: "altLabel" }, host: { properties: { "class": "classes" } }, queries: [{ propertyName: "template", first: true, predicate: EngieTemplateDirective, descendants: true }], ngImport: i0, template: "@if (altLabel) {\n <span class=\"nj-sr-only\">{{ altLabel }}</span>\n}\n@if (icon) {\n <nj-icon njIconButtonIcon [name]=\"icon\"></nj-icon>\n} @else if (iconTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconButtonIconDirective, selector: "[njIconButtonIcon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'button[nj-icon-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent, CommonModule, IconButtonIconDirective], host: {
'[class]': 'classes'
}, template: "@if (altLabel) {\n <span class=\"nj-sr-only\">{{ altLabel }}</span>\n}\n@if (icon) {\n <nj-icon njIconButtonIcon [name]=\"icon\"></nj-icon>\n} @else if (iconTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n}\n" }]
}], propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], scale: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], altLabel: [{
type: Input
}], template: [{
type: ContentChild,
args: [EngieTemplateDirective]
}] } });
class FormItemComponent {
constructor() {
this.destroyRef = inject(DestroyRef);
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();
/**
* Outputs clear icon click
*/
this.clearIconClick = new EventEmitter();
this.formField = contentChild(FormFieldDirective, ...(ngDevMode ? [{ debugName: "formField" }] : []));
this.formFieldNgModel = contentChild(FormFieldDirective, ...(ngDevMode ? [{ debugName: "formFieldNgModel", read: NgModel }] : [{ read: NgModel }]));
this.formFieldValue = signal('', ...(ngDevMode ? [{ debugName: "formFieldValue" }] : []));
this.hasValue = computed(() => !!this.formFieldValue(), ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
this.cleanInputListener = null;
this.formFieldValueChangeEffect = effect(() => {
const value = this.formFieldValue();
const formField = this.formField();
if (formField?.element && formField.element.value !== value) {
formField.element.value = value;
}
}, ...(ngDevMode ? [{ debugName: "formFieldValueChangeEffect" }] : []));
this.handleFormFieldInputEffect = effect(() => {
this.cleanInputListener?.();
const input = this.formField()?.element;
if (!input) {
return;
}
this.formFieldValue.set(input.value);
const onInput = () => {
this.formFieldValue.set(input.value);
};
//Fixme: Necessary for clearable to works with autocomplete.
// Blocking for FLuid 6 release, will be reworked with form-item component redesign
this.formFieldNgModel()?.control.registerOnChange(onInput.bind(this));
input.addEventListener('input', onInput);
this.cleanInputListener = () => {
input.removeEventListener('input', onInput);
this.cleanInputListener = null;
};
this.destroyRef.onDestroy(() => this.cleanInputListener?.());
}, ...(ngDevMode ? [{ debugName: "handleFormFieldInputEffect" }] : []));
}
/**
* 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() {
const formField = this.formField();
if (this.isVisible) {
if (formField) {
formField.type = 'password';
}
this.passwordNotice = this.passwordNoticeIsHidden ?? '';
this.passwordButtonLabel = this.passwordButtonLabelShow ?? '';
}
else {
if (formField) {
formField.type = 'text';
}
this.passwordNotice = this.passwordNoticeIsVisible ?? '';
this.passwordButtonLabel = this.passwordButtonLabelHide ?? '';
}
this.isVisible = !this.isVisible;
}
/**
* @ignore
*/
getSubscriptId() {
return `${this.inputId}-subscript`;
}
/**
* @ignore
*/
setAriaAttributes() {
const formField = this.formField();
if (formField?.element) {
if (this.hasError) {
formField.element.setAttribute('aria-invalid', 'true');
}
if (this.hasError || this.hasSuccess || this.hasHint) {
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}` : '';
}
clearInput(event) {
const formField = this.formField();
if (formField?.element) {
this.formFieldValue.set('');
}
this.clearIconClick.emit(event);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FormItemComponent, isStandalone: true, selector: "nj-form-item", inputs: { inputId: "inputId", size: "size", isFloatingLabel: "isFloatingLabel", isDisabled: "isDisabled", isRequired: "isRequired", clearable: "clearable", 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", clearIconClick: "clearIconClick" }, queries: [{ propertyName: "formField", first: true, predicate: FormFieldDirective, descendants: true, isSignal: true }, { propertyName: "formFieldNgModel", first: true, predicate: FormFieldDirective, descendants: true, read: NgModel, isSignal: true }], ngImport: i0, template: "<div\n 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>\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 @if (isRequired) {\n <span class=\"nj-form-item__required-asterisk\">*</span>\n }\n </label>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n @let hasIcon =\n isPassword || (!isMultiline && (iconName || hasCustomIcon)) || (clearable && hasValue() && !isDisabled);\n @if (hasIcon) {\n <div class=\"nj-form-item__trailing\">\n @if (clearable && hasValue() && !isDisabled) {\n <button\n nj-icon-button\n class=\"nj-form-item__clear-button\"\n scale=\"sm\"\n variant=\"tertiary\"\n [altLabel]=\"passwordButtonLabel\"\n (click)=\"clearInput($event)\"\n icon=\"cancel\"\n [attr.aria-pressed]=\"isVisible\"\n ></button>\n }\n @if (isPassword) {\n <button\n nj-icon-button\n class=\"nj-form-item__password-button\"\n scale=\"sm\"\n variant=\"tertiary\"\n [altLabel]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [attr.aria-pressed]=\"isVisible\"\n ></button>\n <p class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n } @else if (!isMultiline && !hasCustomIcon && iconName) {\n <nj-icon\n class=\"nj-form-item__icon\"\n [name]=\"iconName\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\"\n >\n </nj-icon>\n } @else if (!isMultiline && hasCustomIcon) {\n <div\n class=\"nj-form-item__icon\"\n [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\"\n >\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n @if (hasError || hasSuccess || hasHint) {\n <div class=\"nj-form-item__subscript\" [attr.id]=\"getSubscriptId()\">\n @if (hasError) {\n <nj-icon class=\"nj-form-item__subscript-icon\" name=\"warning\" scale=\"inherit\" variant=\"inherit\"></nj-icon>\n } @else if (hasSuccess) {\n <nj-icon class=\"nj-form-item__subscript-icon\" name=\"check\" scale=\"inherit\" variant=\"inherit\"></nj-icon>\n }\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { 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: "20.3.13", ngImport: i0, type: FormItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent, IconButtonComponent, CommonModule], template: "<div\n 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>\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 @if (isRequired) {\n <span class=\"nj-form-item__required-asterisk\">*</span>\n }\n </label>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n @let hasIcon =\n isPassword || (!isMultiline && (iconName || hasCustomIcon)) || (clearable && hasValue() && !isDisabled);\n @if (hasIcon) {\n <div class=\"nj-form-item__trailing\">\n @if (clearable && hasValue() && !isDisabled) {\n <button\n nj-icon-button\n class=\"nj-form-item__clear-button\"\n scale=\"sm\"\n variant=\"tertiary\"\n [altLabel]=\"passwordButtonLabel\"\n (click)=\"clearInput($event)\"\n icon=\"cancel\"\n [attr.aria-pressed]=\"isVisible\"\n ></button>\n }\n @if (isPassword) {\n <button\n nj-icon-button\n class=\"nj-form-item__password-button\"\n scale=\"sm\"\n variant=\"tertiary\"\n [altLabel]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [attr.aria-pressed]=\"isVisible\"\n ></button>\n <p class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n } @else if (!isMultiline && !hasCustomIcon && iconName) {\n <nj-icon\n class=\"nj-form-item__icon\"\n [name]=\"iconName\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\"\n >\n </nj-icon>\n } @else if (!isMultiline && hasCustomIcon) {\n <div\n class=\"nj-form-item__icon\"\n [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\"\n >\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n @if (hasError || hasSuccess || hasHint) {\n <div class=\"nj-form-item__subscript\" [attr.id]=\"getSubscriptId()\">\n @if (hasError) {\n <nj-icon class=\"nj-form-item__subscript-icon\" name=\"warning\" scale=\"inherit\" variant=\"inherit\"></nj-icon>\n } @else if (hasSuccess) {\n <nj-icon class=\"nj-form-item__subscript-icon\" name=\"check\" scale=\"inherit\" variant=\"inherit\"></nj-icon>\n }\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
}], propDecorators: { inputId: [{
type: Input
}], size: [{
type: Input
}], isFloatingLabel: [{
type: Input
}], isDisabled: [{
type: Input
}], isRequired: [{
type: Input
}], clearable: [{
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
}], clearIconClick: [{
type: Output
}], formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldDirective), { isSignal: true }] }], formFieldNgModel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldDirective), { ...{ read: NgModel }, isSignal: true }] }] } });
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 escapedText = Utils.escapeRegExp(Utils.normalizeString(this.textToHighlight));
const regExp = new RegExp(escapedText, 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 ?? 0);
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 escapedText = Utils.escapeRegExp(this.textToHighlight);
const regExp = new RegExp(escapedText, 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: "20.3.13", ngImport: i0, type: HighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: HighlightDirective, decorators: [{
type: Directive,
args: [{
selector: '[njHighlight]',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
type: Input
}], textToHighlight: [{
type: Input
}], escapeAccents: [{
type: Input
}], caseSensitive: [{
type: Input
}] } });
/**
* @deprecated Use the {@link ListComponent} instead
*/
class ListDeprecatedComponent {
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: "20.3.13", ngImport: i0, type: ListDeprecatedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: ListDeprecatedComponent, isStandalone: true, selector: "nj-list-deprecated", 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: "20.3.13", ngImport: i0, type: ListDeprecatedComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-list-deprecated', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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: () => [{ 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: "20.3.13", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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\" [ngClass]=\"checkboxClasses\" [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 />\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </label>\n @if (subscriptMessage || errorMessage) {\n <div class=\"nj-checkbox__subscript\" [attr.id]=\"getSubscriptId()\">\n @if (hasError) {\n <nj-icon variant=\"inherit\" name=\"warning\" scale=\"sm\"></nj-icon>\n }\n @if (hasSuccess && !hasError) {\n <nj-icon variant=\"inherit\" name=\"check\" scale=\"sm\"></nj-icon>\n }\n {{ errorMessage ? errorMessage : subscriptMessage }}\n </div>\n }\n</div>\n\n<ng-template #content>\n <span class=\"nj-checkbox__label\">\n <ng-content></ng-content>\n @if (isRequired) {\n <span aria-hidden=\"true\" class=\"nj-checkbox__required\"> * </span>\n }\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", "scale", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-checkbox', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CommonModule], template: "<div class=\"nj-checkbox\" [ngClass]=\"checkboxClasses\" [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 />\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </label>\n @if (subscriptMessage || errorMessage) {\n <div class=\"nj-checkbox__subscript\" [attr.id]=\"getSubscriptId()\">\n @if (hasError) {\n <nj-icon variant=\"inherit\" name=\"warning\" scale=\"sm\"></nj-icon>\n }\n @if (hasSuccess && !hasError) {\n <nj-icon variant=\"inherit\" name=\"check\" scale=\"sm\"></nj-icon>\n }\n {{ errorMessage ? errorMessage : subscriptMessage }}\n </div>\n }\n</div>\n\n<ng-template #content>\n <span class=\"nj-checkbox__label\">\n <ng-content></ng-content>\n @if (isRequired) {\n <span aria-hidden=\"true\" class=\"nj-checkbox__required\"> * </span>\n }\n </span>\n</ng-template>\n", styles: [":host{display:inline-flex}.nj-checkbox{-webkit-user-select:none;user-select:none}\n"] }]
}], ctorParameters: () => [{ 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']
}] } });
/**
* @deprecated Use the {@link ListItemDirective} instead
*/
class ListItemDeprecatedComponent {
/**
* @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 === undefined ? this.getLabel() : this.value;
}
/**
* 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: "20.3.13", ngImport: i0, type: ListItemDeprecatedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ListItemDeprecatedComponent, isStandalone: true, selector: "[nj-list-item-deprecated]", 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 @if (iconName) {\n <nj-icon [name]=\"iconName\" [ariaLabel]=\"iconAriaLabel\" class=\"nj-list-deprecated__item-icon\"> </nj-icon>\n }\n @if (!isIconOnly) {\n <ng-container [ngTemplateOutlet]=\"isCheckboxContent ? checkboxContent : brutContent\"></ng-container>\n }\n @if (!isIconOnly) {\n <div class=\"nj-list-deprecated__item-right-content\">\n <ng-content select=\"[njListItemRightContent]\"></ng-content>\n </div>\n }\n</ng-template>\n\n@if (type === 'button') {\n <button type=\"button\" (click)=\"itemClick.emit($event)\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n </button>\n}\n\n@if (type === 'link') {\n <a (click)=\"itemClick.emit($event)\" [attr.href]=\"href\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n </a>\n}\n\n@if (!type || type === 'list') {\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n}\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", "scale", "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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemDeprecatedComponent, decorators: [{
type: Component,
args: [{ selector: '[nj-list-item-deprecated]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CheckboxComponent, CommonModule], template: "<ng-template #itemContent>\n @if (iconName) {\n <nj-icon [name]=\"iconName\" [ariaLabel]=\"iconAriaLabel\" class=\"nj-list-deprecated__item-icon\"> </nj-icon>\n }\n @if (!isIconOnly) {\n <ng-container [ngTemplateOutlet]=\"isCheckboxContent ? checkboxContent : brutContent\"></ng-container>\n }\n @if (!isIconOnly) {\n <div class=\"nj-list-deprecated__item-right-content\">\n <ng-content select=\"[njListItemRightContent]\"></ng-content>\n </div>\n }\n</ng-template>\n\n@if (type === 'button') {\n <button type=\"button\" (click)=\"itemClick.emit($event)\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n </button>\n}\n\n@if (type === 'link') {\n <a (click)=\"itemClick.emit($event)\" [attr.href]=\"href\">\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n </a>\n}\n\n@if (!type || type === 'list') {\n <ng-container [ngTemplateOutlet]=\"itemContent\"></ng-container>\n}\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: () => [{ 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._parentElement = null;
/**
* @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.inputValueChange = 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 || 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) => (this.searchText ? Utils.normalizeAndSearchInText(option?.label, this.searchText) : false))
.slice(0, this.searchLimit);
}
this.liveZoneContent = this.createResultsMessageContent();
this.processActiveOption();
}
processActiveOption() {
this.activeIndex = this.filteredData?.findIndex((item) => item.label === this.searchText) ?? -1;
}
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.inputValueChange.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) {
this.focusIndex = (this.focusIndex + 1) % this.filteredData.length;
}
else {
this.focusIndex = this.interactedItemIndex;
}
this.focusFocusedOption();
}
}
/**
* @ignore
*/
selectPreviousOption() {
if (this.filteredData?.length) {
this.focusIndex = this.focusIndex === 0 ? this.filteredData.length - 1 : this.focusIndex - 1;
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.filteredData) {
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();
}
}
handleClearClick() {
this.selectedValue = undefined;
this.searchText = '';
this._onChange(null);
}
/**
* @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: "20.3.13", 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: "17.0.0", version: "20.3.13", 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: { inputValueChange: "inputValueChange" }, 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: ListItemDeprecatedComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [clearable]=\"clearable ?? true\"\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 (clearIconClick)=\"handleClearClick()\"\n>\n <input\n #input\n type=\"text\"\n (input)=\"handleInputEvent($event)\"\n (focus)=\"_onTouched?.()\"\n [ngModel]=\"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 @if (isOpen) {\n <nj-list-deprecated\n [@transformList]=\"'open'\"\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 @if (isFiltered && showNumberOfResults && filteredData?.length) {\n <!-- Number of suggestions -->\n <ng-container\n [ngTemplateOutlet]=\"searchResultsTemplate ? searchResultsTemplate : defaultSearchResults\"\n [ngTemplateOutletContext]=\"{\n numberOfFilteredData: filteredData?.length ?? 0\n }\"\n ></ng-container>\n }\n @if (isFiltered && showNoResultsMessage && !filteredData?.length) {\n <!-- No suggestions -->\n <ng-container [ngTemplateOutlet]=\"noResultTemplate ? noResultTemplate : defaultNoResults\"></ng-container>\n }\n @if (filteredData) {\n <!-- Suggestion items -->\n @for (option of filteredData; track trackByOption(i, option); let i = $index) {\n <li\n nj-list-item-deprecated\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]=\"optionLabelTemplate ? optionLabelTemplate : defaultLabel\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n }\n }\n </nj-list-deprecated>\n }\n </ng-container>\n</nj-form-item>\n\n<ng-template #defaultLabel let-option=\"option\">\n @if (isFiltered) {\n <span njHighlight [content]=\"option?.label\" [textToHighlight]=\"searchText\"></span>\n } @else {\n <span>{{ option?.label }}</span>\n }\n</ng-template>\n\n<ng-template #defaultSearchResults let-numberOfFilteredData=\"numberOfFilteredData\">\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">{{ numberOfFilteredData }} {{ resultsNumberMessage }}</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: ListDeprecatedComponent, selector: "nj-list-deprecated", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: ListItemDeprecatedComponent, selector: "[nj-list-item-deprecated]", 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", "clearable", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick", "clearIconClick"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }], animations: [selectAnimations.transformList], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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, imports: [
ListDeprecatedComponent,
ListItemDeprecatedComponent,
FormItemComponent,
FormFieldDirective,
HighlightDirective,
CommonModule,
FormsModule
], template: "<nj-form-item\n [hasError]=\"hasError\"\n [hasSuccess]=\"hasSuccess\"\n [hasHint]=\"hasHint\"\n [isDisabled]=\"isDisabled\"\n [clearable]=\"clearable ?? true\"\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 (clearIconClick)=\"handleClearClick()\"\n>\n <input\n #input\n type=\"text\"\n (input)=\"handleInputEvent($event)\"\n (focus)=\"_onTouched?.()\"\n [ngModel]=\"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 @if (isOpen) {\n <nj-list-deprecated\n [@transformList]=\"'open'\"\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 @if (isFiltered && showNumberOfResults && filteredData?.length) {\n <!-- Number of suggestions -->\n <ng-container\n [ngTemplateOutlet]=\"searchResultsTemplate ? searchResultsTemplate : defaultSearchResults\"\n [ngTemplateOutletContext]=\"{\n numberOfFilteredData: filteredData?.length ?? 0\n }\"\n ></ng-container>\n }\n @if (isFiltered && showNoResultsMessage && !filteredData?.length) {\n <!-- No suggestions -->\n <ng-container [ngTemplateOutlet]=\"noResultTemplate ? noResultTemplate : defaultNoResults\"></ng-container>\n }\n @if (filteredData) {\n <!-- Suggestion items -->\n @for (option of filteredData; track trackByOption(i, option); let i = $index) {\n <li\n nj-list-item-deprecated\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]=\"optionLabelTemplate ? optionLabelTemplate : defaultLabel\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-container>\n </li>\n }\n }\n </nj-list-deprecated>\n }\n </ng-container>\n</nj-form-item>\n\n<ng-template #defaultLabel let-option=\"option\">\n @if (isFiltered) {\n <span njHighlight [content]=\"option?.label\" [textToHighlight]=\"searchText\"></span>\n } @else {\n <span>{{ option?.label }}</span>\n }\n</ng-template>\n\n<ng-template #defaultSearchResults let-numberOfFilteredData=\"numberOfFilteredData\">\n <p class=\"nj-form-item__list-item-hint\" aria-hidden=\"true\">{{ numberOfFilteredData }} {{ resultsNumberMessage }}</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: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, 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
}], inputValueChange: [{
type: Output
}], inputRef: [{
type: ViewChild,
args: ['input']
}], optionsList: [{
type: ViewChild,
args: ['optionsList', { read: ElementRef }]
}], selectOptions: [{
type: ViewChildren,
args: [ListItemDeprecatedComponent]
}], optionLabelTemplate: [{
type: ContentChild,
args: ['njAutocompleteOptionLabel', { read: TemplateRef }]
}], searchResultsTemplate: [{
type: ContentChild,
args: ['njAutocompleteSearchResults', { read: TemplateRef }]
}], noResultTemplate: [{
type: ContentChild,
args: ['njAutocompleteNoResult', { read: TemplateRef }]
}] } });
class AvatarPictureDirective {
constructor() {
this.class = 'nj-avatar__picture';
this.alt = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AvatarPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: AvatarPictureDirective, decorators: [{
type: Directive,
args: [{
selector: '[njAvatarPicture]',
exportAs: 'njAvatarPicture',
standalone: true
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], alt: [{
type: HostBinding,
args: ['alt']
}] } });
const defaultParams$1 = {
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$1)
])
};
class TooltipComponent {
constructor() {
/**
* @ignore
*/
this.tooltipClassName = 'nj-tooltip';
/**
* Whether tooltip has arrow or no
*/
this.hasArrow = true;
/**
* Tooltip label, if you want custom content unset the label and place content as element children
* e.g: `<nj-tooltip>Your Content</nj-tooltip>`
*/
this.label = null;
/**
* 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: "20.3.13", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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\n class=\"nj-tooltip show\"\n [ngClass]=\"[getIsInverseClass(), getPlacementClass(), getIsStandaloneClass()]\"\n [attr.id]=\"tooltipId\"\n @tooltip\n [@.disabled]=\"!isAnimated\"\n>\n @if (hasArrow) {\n <div class=\"nj-tooltip__arrow\" [ngClass]=\"[getTooltipArrowPlacement()]\"></div>\n }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [tooltipAnimation.tooltip], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, animations: [tooltipAnimation.tooltip], imports: [CommonModule], template: "<div\n class=\"nj-tooltip show\"\n [ngClass]=\"[getIsInverseClass(), getPlacementClass(), getIsStandaloneClass()]\"\n [attr.id]=\"tooltipId\"\n @tooltip\n [@.disabled]=\"!isAnimated\"\n>\n @if (hasArrow) {\n <div class=\"nj-tooltip__arrow\" [ngClass]=\"[getTooltipArrowPlacement()]\"></div>\n }\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: () => [], 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();
this.tooltipRef = null;
}
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;
}
if (this.overlayRef) {
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 ?? null);
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: "20.3.13", 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: "20.3.13", 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: "20.3.13", ngImport: i0, type: TooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[njTooltip]',
exportAs: 'njTooltip',
standalone: true
}]
}], ctorParameters: () => [{ 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';
/**
* Link href, if set avatar is a link <a>
*/
this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
/**
* Initials of avatar, max 3 characters if a string with a bigger length than 3 characters only 3 first characters are taken
*/
this.initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
/**
* Text alternative for the avatar
*/
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
/**
* Avatar scale
*/
this.scale = input(...(ngDevMode ? [undefined, { debugName: "scale" }] : []));
/**
* Whether avatar has a picture or not
*/
this.hasPicture = input(...(ngDevMode ? [undefined, { debugName: "hasPicture" }] : []));
/**
* Whether avatar is clickable or not
*/
this.isClickable = input(...(ngDevMode ? [undefined, { debugName: "isClickable" }] : []));
/**
* Used for `AvatarListComponent` as the last tile of the list
**/
this.isRemainingCount = input(...(ngDevMode ? [undefined, { debugName: "isRemainingCount" }] : []));
/**
* Tooltip's options
**/
this.tooltipOptions = input(...(ngDevMode ? [undefined, { debugName: "tooltipOptions" }] : []));
this.formatedInitials = computed(() => this.initials()?.slice(0, 3), ...(ngDevMode ? [{ debugName: "formatedInitials" }] : []));
this.hasInitials = computed(() => {
const initials = this.initials();
return !Utils.isUndefinedOrNull(initials) && initials?.trim() !== '';
}, ...(ngDevMode ? [{ debugName: "hasInitials" }] : []));
}
get classes() {
return {
[`${this.avatarClassName}--default-icon`]: !this.hasInitials() && !this.hasPicture(),
[`${this.avatarClassName}--${this.scale()}`]: !!this.scale(),
[`${this.avatarClassName}--initials`]: this.hasInitials() && !this.hasPicture(),
[`${this.avatarClassName}--clickable`]: !!this.isClickable(),
[`${this.avatarClassName}--remaining-count`]: !!this.isRemainingCount(),
[`${this.avatarClassName}--picture`]: !!this.hasPicture()
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AvatarComponent, isStandalone: true, selector: "nj-avatar", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, hasPicture: { classPropertyName: "hasPicture", publicName: "hasPicture", isSignal: true, isRequired: false, transformFunction: null }, isClickable: { classPropertyName: "isClickable", publicName: "isClickable", isSignal: true, isRequired: false, transformFunction: null }, isRemainingCount: { classPropertyName: "isRemainingCount", publicName: "isRemainingCount", isSignal: true, isRequired: false, transformFunction: null }, tooltipOptions: { classPropertyName: "tooltipOptions", publicName: "tooltipOptions", isSignal: true, isRequired: false, transformFunction: null } }, 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\">{{ formatedInitials() }}</span>\n</ng-template>\n\n<ng-template #avatarTemplate>\n @if (!tooltipOptions() && href()) {\n <a [href]=\"href()\" class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n }\n @if (!tooltipOptions() && isClickable()) {\n <button class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n @if (!tooltipOptions() && !href() && !isClickable()) {\n <div class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n }\n @if (tooltipOptions() && href()) {\n <a [href]=\"href()\" class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n }\n @if (tooltipOptions() && isClickable()) {\n <button class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n @if (tooltipOptions() && !href() && !isClickable()) {\n <div class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n }\n</ng-template>\n", dependencies: [{ 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-avatar', imports: [TooltipDirective, CommonModule], encapsulation: ViewEncapsulation.None, 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\">{{ formatedInitials() }}</span>\n</ng-template>\n\n<ng-template #avatarTemplate>\n @if (!tooltipOptions() && href()) {\n <a [href]=\"href()\" class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n }\n @if (!tooltipOptions() && isClickable()) {\n <button class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n @if (!tooltipOptions() && !href() && !isClickable()) {\n <div class=\"nj-avatar\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n }\n @if (tooltipOptions() && href()) {\n <a [href]=\"href()\" class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </a>\n }\n @if (tooltipOptions() && isClickable()) {\n <button class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n @if (tooltipOptions() && !href() && !isClickable()) {\n <div class=\"nj-avatar\" njTooltip [tooltipOptions]=\"tooltipOptions()\" [ngClass]=\"classes\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </div>\n }\n</ng-template>\n" }]
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], hasPicture: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPicture", required: false }] }], isClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClickable", required: false }] }], isRemainingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRemainingCount", required: false }] }], tooltipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOptions", required: false }] }], avatarTemplate: [{
type: ViewChild,
args: ['avatarTemplate']
}] } });
class AvatarListComponent {
constructor() {
/**
* @ignore
*/
this.avatarListClassName = 'nj-avatar-list';
this.max = input(4, ...(ngDevMode ? [{ debugName: "max" }] : []));
/**
* Density of the avatar list
**/
this.density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : []));
/**
* Avatars scale
**/
this.scale = input(...(ngDevMode ? [undefined, { debugName: "scale" }] : []));
/**
* Remaining avatar Tooltip's options
**/
this.remainingTooltipOptions = input(...(ngDevMode ? [undefined, { debugName: "remainingTooltipOptions" }] : []));
/**
* Label of the "show more" button.
*
* A function can be used to provide a dynamic label based on the number of remaining avatars in the list.
*/
this.showMoreLabel = input(...(ngDevMode ? [undefined, { debugName: "showMoreLabel" }] : []));
/**
* Emits event on remaining count avatar mouse click
*/
this.remainingClick = output();
this.avatars = contentChildren(AvatarComponent, ...(ngDevMode ? [{ debugName: "avatars" }] : []));
this.remainingCount = computed(() => (this.avatars().length ?? 0) - this.max(), ...(ngDevMode ? [{ debugName: "remainingCount" }] : []));
this.remainingCountInitials = computed(() => `+ ${this.remainingCount()}`, ...(ngDevMode ? [{ debugName: "remainingCountInitials" }] : []));
this.remainingCountLabel = computed(() => {
const showMoreLabel = this.showMoreLabel();
return typeof showMoreLabel === 'function' ? showMoreLabel(this.remainingCount() ?? 0) : showMoreLabel;
}, ...(ngDevMode ? [{ debugName: "remainingCountLabel" }] : []));
}
get classes() {
return {
[this.avatarListClassName]: true,
[`${this.avatarListClassName}--${this.density()}`]: this.density() && this.density() !== 'default',
[`${this.avatarListClassName}--${this.scale()}`]: this.scale()
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AvatarListComponent, isStandalone: true, selector: "nj-avatar-list", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, remainingTooltipOptions: { classPropertyName: "remainingTooltipOptions", publicName: "remainingTooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, showMoreLabel: { classPropertyName: "showMoreLabel", publicName: "showMoreLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remainingClick: "remainingClick" }, host: { properties: { "class": "classes" } }, queries: [{ propertyName: "avatars", predicate: AvatarComponent, isSignal: true }], ngImport: i0, template: "@for (avatar of avatars() ?? [] | slice: 0 : max(); track avatar) {\n @if (avatar.avatarTemplate) {\n <ng-container *ngTemplateOutlet=\"avatar.avatarTemplate\"></ng-container>\n }\n}\n@if (remainingCount() && remainingCount() > 0) {\n <nj-avatar\n (click)=\"remainingClick.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions()\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"remainingCountInitials()\"\n [label]=\"remainingCountLabel() ?? ''\"\n ></nj-avatar>\n}\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "nj-avatar", inputs: ["href", "initials", "label", "scale", "hasPicture", "isClickable", "isRemainingCount", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AvatarListComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-avatar-list', imports: [AvatarComponent, CommonModule], host: {
'[class]': 'classes'
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (avatar of avatars() ?? [] | slice: 0 : max(); track avatar) {\n @if (avatar.avatarTemplate) {\n <ng-container *ngTemplateOutlet=\"avatar.avatarTemplate\"></ng-container>\n }\n}\n@if (remainingCount() && remainingCount() > 0) {\n <nj-avatar\n (click)=\"remainingClick.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions()\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"remainingCountInitials()\"\n [label]=\"remainingCountLabel() ?? ''\"\n ></nj-avatar>\n}\n" }]
}], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], remainingTooltipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTooltipOptions", required: false }] }], showMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreLabel", required: false }] }], remainingClick: [{ type: i0.Output, args: ["remainingClick"] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvatarComponent), { isSignal: true }] }] } });
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) &&
!Utils.isUndefinedOrNull(this.value) &&
this.value > (this.capedValue ?? 0)) {
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}`;
}
getBadgeScaleClass() {
this.scale = this.scale ?? this.size;
if (!this.scale || this.scale === 'md') {
return '';
}
return `${this.badgeClassName}--${this.scale}`;
}
getBadgeUppercaseClass() {
if (!this.isUppercase) {
return '';
}
return `${this.badgeClassName}--uppercase`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BadgeComponent, isStandalone: true, selector: "nj-badge", inputs: { emphasis: "emphasis", variant: "variant", scale: "scale", 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\n class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeScaleClass(), getBadgeUppercaseClass()]\"\n>\n @if (customIcon || iconName) {\n <span class=\"nj-badge__icon\">\n @if (customIcon?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"customIcon!.templateRef\"></ng-container>\n } @else if (iconName) {\n <nj-icon [name]=\"iconName\"></nj-icon>\n }\n </span>\n }\n <span>\n @if (isValueDefined()) {\n {{ getFormattedValue() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n\n @if (unitLabel) {\n <span class=\"nj-sr-only\">{{ unitLabel }}</span>\n }\n @if (unitLabel) {\n <span class=\"nj-sr-only\">{{ unitLabel }}</span>\n }\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconComponent], template: "<p\n class=\"nj-badge\"\n [ngClass]=\"[getBadgeEmphasisClass(), getBadgeVariantClass(), getBadgeScaleClass(), getBadgeUppercaseClass()]\"\n>\n @if (customIcon || iconName) {\n <span class=\"nj-badge__icon\">\n @if (customIcon?.templateRef) {\n <ng-container [ngTemplateOutlet]=\"customIcon!.templateRef\"></ng-container>\n } @else if (iconName) {\n <nj-icon [name]=\"iconName\"></nj-icon>\n }\n </span>\n }\n <span>\n @if (isValueDefined()) {\n {{ getFormattedValue() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n\n @if (unitLabel) {\n <span class=\"nj-sr-only\">{{ unitLabel }}</span>\n }\n @if (unitLabel) {\n <span class=\"nj-sr-only\">{{ unitLabel }}</span>\n }\n</p>\n" }]
}], propDecorators: { emphasis: [{
type: Input
}], variant: [{
type: Input
}], scale: [{
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]
}] } });
/**
* Find template from Engie template directives with given selector
*/
class EngieTemplateSelectorPipe {
transform(templates, selector) {
return templates.find((template) => template.selector === selector)?.templateRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: EngieTemplateSelectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: EngieTemplateSelectorPipe, isStandalone: true, name: "njTemplateSelector" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: EngieTemplateSelectorPipe, decorators: [{
type: Pipe,
args: [{
name: 'njTemplateSelector'
}]
}] });
class LinkComponent {
constructor(target) {
this.target = target;
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;
this.templates = contentChildren(EngieTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
this.customIconTemplate = computed(() => this.templates().filter((t) => t.selector === 'icon')[0], ...(ngDevMode ? [{ debugName: "customIconTemplate" }] : []));
this.classes = computed(() => {
const classes = [];
if (this.variant && this.variant !== 'default') {
classes.push(`${this.linkClass}--${this.variant}`);
}
if (this.icon || this.customIconTemplate() || this.isExternalLink()) {
classes.push(this.iconClass);
}
if (this.iconPosition) {
classes.push(`${this.iconClass}--${this.iconPosition}`);
}
if (this.size) {
classes.push(`${this.linkClass}--${this.size}`);
}
return classes;
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
}
isExternalLink() {
return this.isExternal || this.target === '_blank';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkComponent, deps: [{ token: 'target', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: LinkComponent, isStandalone: true, selector: "a[nj-link]", inputs: { variant: "variant", size: "size", isExternal: "isExternal", externalLabel: "externalLabel", icon: "icon", iconPosition: "iconPosition" }, host: { properties: { "class.nj-link": "true", "class": "classes()" } }, queries: [{ propertyName: "templates", predicate: EngieTemplateDirective, isSignal: true }], ngImport: i0, template: "<ng-template #iconTemplate>\n @let customIconTemplate = templates() | njTemplateSelector: 'icon';\n @let hasIcon = icon || customIconTemplate;\n\n @if (hasIcon && !isExternalLink()) {\n @if (customIconTemplate) {\n <ng-container *ngTemplateOutlet=\"customIconTemplate\"></ng-container>\n } @else if (icon) {\n <nj-icon [name]=\"icon\"></nj-icon>\n }\n }\n</ng-template>\n\n@if (iconPosition === 'before') {\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n}\n<ng-content></ng-content>\n@if (!iconPosition || iconPosition === 'after') {\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n}\n\n@if (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\" 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 />\n </svg>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: EngieTemplateSelectorPipe, name: "njTemplateSelector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkComponent, decorators: [{
type: Component,
args: [{ selector: 'a[nj-link]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, EngieTemplateSelectorPipe, NgTemplateOutlet], host: {
'[class.nj-link]': 'true',
'[class]': 'classes()'
}, template: "<ng-template #iconTemplate>\n @let customIconTemplate = templates() | njTemplateSelector: 'icon';\n @let hasIcon = icon || customIconTemplate;\n\n @if (hasIcon && !isExternalLink()) {\n @if (customIconTemplate) {\n <ng-container *ngTemplateOutlet=\"customIconTemplate\"></ng-container>\n } @else if (icon) {\n <nj-icon [name]=\"icon\"></nj-icon>\n }\n }\n</ng-template>\n\n@if (iconPosition === 'before') {\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n}\n<ng-content></ng-content>\n@if (!iconPosition || iconPosition === 'after') {\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n}\n\n@if (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\" 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 />\n </svg>\n}\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Attribute,
args: ['target']
}] }], propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], isExternal: [{
type: Input
}], externalLabel: [{
type: Input
}], icon: [{
type: Input
}], iconPosition: [{
type: Input
}], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EngieTemplateDirective), { isSignal: true }] }] } });
class BreadcrumbItemComponent {
constructor() {
/**
* Whether item is active
*/
this.isActive = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (!isActive) {\n <a nj-link variant=\"grayed\" size=\"sm\" [href]=\"href\" [target]=\"target\" [icon]=\"icon\" [iconPosition]=\"iconPosition\">\n <span class=\"nj-sr-only\">{{ label }}</span>\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </a>\n }\n\n @if (isActive) {\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n }\n</ng-template>\n\n<ng-template #itemContent>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: LinkComponent, selector: "a[nj-link]", inputs: ["variant", "size", "isExternal", "externalLabel", "icon", "iconPosition"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LinkComponent, CommonModule], template: "<ng-template #itemTemplate>\n @if (!isActive) {\n <a nj-link variant=\"grayed\" size=\"sm\" [href]=\"href\" [target]=\"target\" [icon]=\"icon\" [iconPosition]=\"iconPosition\">\n <span class=\"nj-sr-only\">{{ label }}</span>\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </a>\n }\n\n @if (isActive) {\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n }\n</ng-template>\n\n<ng-template #itemContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: () => [], 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 ?? 0) > 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;
if (!breadcrumbItemsArray || !breadcrumbItemsLength) {
return;
}
return breadcrumbItemsArray[breadcrumbItemsLength - 1];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (leftContent) {\n @for (item of leftContent; track item) {\n <li class=\"nj-breadcrumb__item\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n }\n }\n @if (isMinified) {\n <li class=\"nj-breadcrumb__see-more\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{ showMoreLabel }}</span>\n </button>\n </li>\n }\n @if (isMinified && rightContent) {\n <li class=\"nj-breadcrumb__item\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n }\n </ol>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel\">\n <ol class=\"nj-breadcrumb\" #olRef>\n @if (leftContent) {\n @for (item of leftContent; track item) {\n <li class=\"nj-breadcrumb__item\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n }\n }\n @if (isMinified) {\n <li class=\"nj-breadcrumb__see-more\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{ showMoreLabel }}</span>\n </button>\n </li>\n }\n @if (isMinified && rightContent) {\n <li class=\"nj-breadcrumb__item\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n }\n </ol>\n</nav>\n" }]
}], ctorParameters: () => [{ 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';
}
/**
* @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: "20.3.13", ngImport: i0, type: BulletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: BulletComponent, isStandalone: true, selector: "nj-bullet", inputs: { variant: "variant", customColor: "customColor", size: "size" }, ngImport: i0, template: "<div\n class=\"nj-bullet\"\n [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: "20.3.13", ngImport: i0, type: BulletComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-bullet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\n class=\"nj-bullet\"\n [ngClass]=\"[getBulletVariantClass(), getButtonSizeClass()]\"\n [style.background-color]=\"customColor\"\n></div>\n" }]
}], ctorParameters: () => [], propDecorators: { variant: [{
type: Input
}], customColor: [{
type: Input
}], size: [{
type: Input
}] } });
class SpinnerComponent {
constructor() {
/**
* Aria label, for accessibility reasons
*/
this.ariaLabel = 'loading';
}
get classes() {
const spinnerClassName = 'nj-spinner';
return {
[spinnerClassName]: true,
[`${spinnerClassName}--${this.variant}`]: !!this.variant,
[`${spinnerClassName}--${this.scale}`]: !!this.scale,
[`${spinnerClassName}--${this.size}`]: !!this.size
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SpinnerComponent, isStandalone: true, selector: "nj-spinner", inputs: { variant: "variant", size: "size", scale: "scale", ariaLabel: "ariaLabel" }, host: { properties: { "class": "classes", "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{
selector: 'nj-spinner',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { '[class]': 'classes', '[attr.aria-label]': 'ariaLabel' }
}]
}], propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], scale: [{
type: Input
}], ariaLabel: [{
type: Input
}] } });
class ButtonIconDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ButtonIconDirective, isStandalone: true, selector: "[njButtonIcon]", host: { classAttribute: "nj-btn__icon" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[njButtonIcon]',
standalone: true,
host: {
class: 'nj-btn__icon'
}
}]
}] });
const buttonClassName = 'nj-btn';
class ButtonComponent {
constructor() {
/**
* Button emphasis
*/
this.emphasis = 'bold';
/**
* Button variant theme
*/
this.variant = 'primary';
}
ngAfterContentInit() {
if (this.template?.selector === 'icon') {
this.iconTemplateRef = this.template.templateRef;
}
}
get classes() {
const classes = [buttonClassName];
if (this.emphasis && this.emphasis !== 'bold') {
classes.push(`${buttonClassName}--${this.emphasis}`);
}
if (this.variant && this.variant !== 'primary') {
classes.push(`${buttonClassName}--${this.variant}`);
}
if (this.scale && this.scale !== 'md') {
classes.push(`${buttonClassName}--${this.scale}`);
}
if (this.isLoading) {
classes.push(`${buttonClassName}--is-loading`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ButtonComponent, isStandalone: true, selector: "button[nj-button]", inputs: { emphasis: "emphasis", variant: "variant", scale: "scale", icon: "icon", disabled: ["disabled", "disabled", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute] }, host: { properties: { "class": "classes", "disabled": "disabled || isLoading" } }, queries: [{ propertyName: "template", first: true, predicate: EngieTemplateDirective, descendants: true }], ngImport: i0, template: "@if (isLoading) {\n <nj-spinner></nj-spinner>\n} @else if (iconTemplateRef) {\n <ng-container *ngTemplateOutlet=\"iconTemplateRef\"></ng-container>\n} @else if (icon) {\n <nj-icon njButtonIcon [name]=\"icon\"></nj-icon>\n}\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonIconDirective, selector: "[njButtonIcon]" }, { kind: "component", type: SpinnerComponent, selector: "nj-spinner", inputs: ["variant", "size", "scale", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'button[nj-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent, CommonModule, ButtonIconDirective, SpinnerComponent], host: {
'[class]': 'classes',
'[disabled]': 'disabled || isLoading'
}, template: "@if (isLoading) {\n <nj-spinner></nj-spinner>\n} @else if (iconTemplateRef) {\n <ng-container *ngTemplateOutlet=\"iconTemplateRef\"></ng-container>\n} @else if (icon) {\n <nj-icon njButtonIcon [name]=\"icon\"></nj-icon>\n}\n\n<ng-content></ng-content>\n" }]
}], propDecorators: { emphasis: [{
type: Input
}], variant: [{
type: Input
}], scale: [{
type: Input
}], icon: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isLoading: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], template: [{
type: ContentChild,
args: [EngieTemplateDirective]
}] } });
class CardImageDirective {
constructor(el) {
this.el = el;
this.class = 'nj-card__img';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CardImageDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: CardImageDirective, isStandalone: true, selector: "[njCardImage]", host: { properties: { "class": "this.class" } }, exportAs: ["njCardImage"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CardImageDirective, decorators: [{
type: Directive,
args: [{
selector: '[njCardImage]',
exportAs: 'njCardImage',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
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: "20.3.13", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 CustomLabelDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CustomLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: CustomLabelDirective, isStandalone: true, selector: "[njCustomLabel]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CustomLabelDirective, decorators: [{
type: Directive,
args: [{
selector: '[njCustomLabel]',
standalone: true
}]
}] });
class DisplayDirective {
get classes() {
return {
'nj-display': true,
'nj-display--not-invertible': this.isNotInvertible,
[`nj-display--${this.scale}`]: !!this.scale,
[`nj-display--${this.variant}`]: !!this.variant
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.13", type: DisplayDirective, isStandalone: true, selector: "[njDisplay]", inputs: { scale: "scale", variant: "variant", isNotInvertible: ["isNotInvertible", "isNotInvertible", booleanAttribute] }, host: { properties: { "class": "classes" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DisplayDirective, decorators: [{
type: Directive,
args: [{
selector: '[njDisplay]',
standalone: true,
host: {
'[class]': 'classes'
}
}]
}], propDecorators: { scale: [{
type: Input
}], variant: [{
type: Input
}], isNotInvertible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
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`,
ai: `${this.statusIndicatorClass}--ai`
};
}
ngAfterViewInit() {
this.hasLabel = this.labelWrapper?.nativeElement && this.labelWrapper.nativeElement.innerHTML !== '';
}
get classes() {
const classes = [];
const statusClass = this.status ? this.statusIndicatorClasses[this.status] : undefined;
if (statusClass) {
classes.push(statusClass);
}
this.scale = this.scale || this.size;
if (this.scale) {
classes.push(`${this.statusIndicatorClass}--${this.scale}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: StatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: StatusIndicatorComponent, isStandalone: true, selector: "nj-status-indicator", inputs: { status: "status", scale: "scale", size: "size" }, host: { properties: { "class.nj-status-indicator": "true", "attr.aria-hidden": "hasLabel ? null : true", "class": "classes" } }, viewQueries: [{ propertyName: "labelWrapper", first: true, predicate: ["labelWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"nj-status-indicator__svg\"></div>\n<p class=\"nj-status-indicator__text\" #labelWrapper>\n <ng-content></ng-content>\n</p>\n", styles: [".nj-status-indicator__text:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: StatusIndicatorComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class.nj-status-indicator]': 'true',
'[attr.aria-hidden]': 'hasLabel ? null : true',
'[class]': 'classes'
}, template: "<div class=\"nj-status-indicator__svg\"></div>\n<p class=\"nj-status-indicator__text\" #labelWrapper>\n <ng-content></ng-content>\n</p>\n", styles: [".nj-status-indicator__text:empty{display:none}\n"] }]
}], propDecorators: { status: [{
type: Input
}], scale: [{
type: Input
}], size: [{
type: Input
}], labelWrapper: [{
type: ViewChild,
args: ['labelWrapper']
}] } });
class InlineMessageComponent {
constructor() {
this.inlineMessageClass = 'nj-inline-message';
/**
* Whether the inline-message has status indicator icon or not
*/
this.hasStatus = true;
/**
* Output event when the inline-message is closed
*/
this.closeClick = new EventEmitter();
this.el = inject(ElementRef);
}
ngAfterContentInit() {
this.templateDirectives?.forEach((templateDirective) => {
if (templateDirective?.selector === 'action') {
this.actionTemplate = templateDirective.templateRef;
}
});
}
removeInlineMessage(event) {
this.el?.nativeElement?.remove();
this.closeClick.emit(event);
}
get isFatalError() {
return this.variant === 'fatal-error';
}
get classes() {
const classes = [];
if (this.actionTemplate && this.actionPosition) {
classes.push(`${this.inlineMessageClass}--action-position-${this.actionPosition}`);
}
if (this.variant) {
classes.push(`${this.inlineMessageClass}--${this.variant}`);
}
if (this.scale) {
classes.push(`${this.inlineMessageClass}--${this.scale}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InlineMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InlineMessageComponent, isStandalone: true, selector: "nj-inline-message", inputs: { variant: "variant", scale: "scale", actionPosition: "actionPosition", hasStatus: ["hasStatus", "hasStatus", booleanAttribute], isClosable: ["isClosable", "isClosable", booleanAttribute] }, outputs: { closeClick: "closeClick" }, host: { properties: { "class.nj-inline-message": "true", "class": "classes" } }, queries: [{ propertyName: "templateDirectives", predicate: EngieTemplateDirective }], ngImport: i0, template: "@if (hasStatus) {\n <nj-status-indicator class=\"nj-inline-message__status\"></nj-status-indicator>\n}\n<div class=\"nj-inline-message__content\">\n <div class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </div>\n @if (!isFatalError && actionTemplate) {\n <div class=\"nj-inline-message__action\">\n <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n </div>\n }\n</div>\n@if (isClosable) {\n <button nj-icon-button class=\"nj-inline-message__close\" icon=\"close\" (click)=\"removeInlineMessage($event)\"></button>\n}\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { kind: "component", type: StatusIndicatorComponent, selector: "nj-status-indicator", inputs: ["status", "scale", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InlineMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-inline-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, StatusIndicatorComponent, CommonModule], host: {
'[class.nj-inline-message]': 'true',
'[class]': 'classes'
}, template: "@if (hasStatus) {\n <nj-status-indicator class=\"nj-inline-message__status\"></nj-status-indicator>\n}\n<div class=\"nj-inline-message__content\">\n <div class=\"nj-inline-message__body\">\n <ng-content></ng-content>\n </div>\n @if (!isFatalError && actionTemplate) {\n <div class=\"nj-inline-message__action\">\n <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n </div>\n }\n</div>\n@if (isClosable) {\n <button nj-icon-button class=\"nj-inline-message__close\" icon=\"close\" (click)=\"removeInlineMessage($event)\"></button>\n}\n" }]
}], propDecorators: { variant: [{
type: Input
}], scale: [{
type: Input
}], actionPosition: [{
type: Input
}], hasStatus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isClosable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], closeClick: [{
type: Output
}], templateDirectives: [{
type: ContentChildren,
args: [EngieTemplateDirective]
}] } });
class ListItemDirective {
constructor() {
/**
* @ignore
*/
this.baseClass = 'nj-list__item';
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.textDistribution = input(...(ngDevMode ? [undefined, { debugName: "textDistribution" }] : []));
}
get classes() {
return {
[this.baseClass]: true,
[`${this.baseClass}--interactive`]: this.interactive(),
[`${this.baseClass}--vertical`]: this.textDistribution() === 'vertical'
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", type: ListItemDirective, isStandalone: true, selector: "li[njListItem]", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, textDistribution: { classPropertyName: "textDistribution", publicName: "textDistribution", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemDirective, decorators: [{
type: Directive,
args: [{
selector: 'li[njListItem]',
host: {
'[class]': 'classes'
}
}]
}], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], textDistribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "textDistribution", required: false }] }] } });
class ListNavigationItemDirective {
constructor() {
this.listItemDirective = inject(ListItemDirective);
this.baseClass = 'nj-list__navigation-item';
this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
this.expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
this.listItemDirective.baseClass = this.baseClass;
}
get classes() {
return {
[`${this.baseClass}--${this.variant()}`]: !!this.variant(),
[`${this.baseClass}--expanded`]: this.expanded()
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListNavigationItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", type: ListNavigationItemDirective, isStandalone: true, selector: "li[njListNavigationItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes", "attr.aria-selected": "selected()" } }, hostDirectives: [{ directive: ListItemDirective, inputs: ["interactive", "interactive"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListNavigationItemDirective, decorators: [{
type: Directive,
args: [{
selector: 'li[njListNavigationItem]',
hostDirectives: [
{
directive: ListItemDirective,
inputs: ['interactive']
}
],
host: {
'[class]': 'classes',
'[attr.aria-selected]': 'selected()'
}
}]
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
class ListItemContentComponent {
constructor() {
this.listNavigationItemDirective = inject(ListNavigationItemDirective, { optional: true });
this.secondaryText = input(...(ngDevMode ? [undefined, { debugName: "secondaryText" }] : []));
this.leadingIcon = input(...(ngDevMode ? [undefined, { debugName: "leadingIcon" }] : []));
this.trailingIcon = input(...(ngDevMode ? [undefined, { debugName: "trailingIcon" }] : []));
this.templates = contentChildren(EngieTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ListItemContentComponent, isStandalone: true, selector: "nj-list-item-content, a [nj-list-item-content], button [nj-list-item-content]", inputs: { secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nj-list__item-wrapper" }, providers: [EngieTemplateSelectorPipe], queries: [{ propertyName: "templates", predicate: EngieTemplateDirective, isSignal: true }], ngImport: i0, template: "@if (templates() | njTemplateSelector: 'leading'; as leadingTemplate) {\n <span class=\"nj-list__item-leading\">\n <ng-container [ngTemplateOutlet]=\"leadingTemplate\" />\n </span>\n} @else if (leadingIcon()) {\n <nj-icon [name]=\"leadingIcon()\" class=\"nj-list__item-leading\"></nj-icon>\n}\n<span class=\"nj-list__item-content\">\n <span class=\"nj-list__item-primary\">\n <ng-content></ng-content>\n </span>\n @if (secondaryText()) {\n <span class=\"nj-list__item-secondary\">{{ secondaryText() }}</span>\n }\n</span>\n@if (templates() | njTemplateSelector: 'trailing'; as trailingTemplate) {\n <span class=\"nj-list__item-trailing\">\n <ng-container [ngTemplateOutlet]=\"trailingTemplate\" />\n </span>\n} @else if (trailingIcon()) {\n <nj-icon [name]=\"trailingIcon()\" class=\"nj-list__item-trailing\"></nj-icon>\n}\n@if (listNavigationItemDirective?.expandable()) {\n <nj-icon name=\"keyboard_arrow_down\" class=\"nj-list__item-trailing nj-list__item-arrow\"></nj-icon>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "pipe", type: EngieTemplateSelectorPipe, name: "njTemplateSelector" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemContentComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-list-item-content, a [nj-list-item-content], button [nj-list-item-content]', imports: [CommonModule, IconComponent, EngieTemplateSelectorPipe], providers: [EngieTemplateSelectorPipe], host: {
class: 'nj-list__item-wrapper'
}, template: "@if (templates() | njTemplateSelector: 'leading'; as leadingTemplate) {\n <span class=\"nj-list__item-leading\">\n <ng-container [ngTemplateOutlet]=\"leadingTemplate\" />\n </span>\n} @else if (leadingIcon()) {\n <nj-icon [name]=\"leadingIcon()\" class=\"nj-list__item-leading\"></nj-icon>\n}\n<span class=\"nj-list__item-content\">\n <span class=\"nj-list__item-primary\">\n <ng-content></ng-content>\n </span>\n @if (secondaryText()) {\n <span class=\"nj-list__item-secondary\">{{ secondaryText() }}</span>\n }\n</span>\n@if (templates() | njTemplateSelector: 'trailing'; as trailingTemplate) {\n <span class=\"nj-list__item-trailing\">\n <ng-container [ngTemplateOutlet]=\"trailingTemplate\" />\n </span>\n} @else if (trailingIcon()) {\n <nj-icon [name]=\"trailingIcon()\" class=\"nj-list__item-trailing\"></nj-icon>\n}\n@if (listNavigationItemDirective?.expandable()) {\n <nj-icon name=\"keyboard_arrow_down\" class=\"nj-list__item-trailing nj-list__item-arrow\"></nj-icon>\n}\n" }]
}], propDecorators: { secondaryText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryText", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EngieTemplateDirective), { isSignal: true }] }] } });
class ListDirective {
constructor() {
this.hasBorder = false;
}
get classes() {
const classes = ['nj-list'];
if (this.size) {
classes.push(`nj-list--${this.size}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.13", type: ListDirective, isStandalone: true, selector: "ul[njList]", inputs: { hasBorder: ["hasBorder", "hasBorder", booleanAttribute], size: "size" }, host: { properties: { "class": "classes", "class.nj-list--has-border": "hasBorder" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListDirective, decorators: [{
type: Directive,
args: [{
selector: 'ul[njList]',
standalone: true,
host: {
'[class]': 'classes',
'[class.nj-list--has-border]': 'hasBorder'
}
}]
}], propDecorators: { hasBorder: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], size: [{
type: Input
}] } });
class MenuComponent {
constructor() {
/**
* Add a scrollbar if the height is more than `--nj-menu-max-height` (default to 224px)
*/
this.scrollable = false;
}
get classes() {
const classes = ['nj-menu'];
if (this.scrollable) {
classes.push('nj-menu--scrollable');
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.13", type: MenuComponent, isStandalone: true, selector: "nj-menu", inputs: { scrollable: ["scrollable", "scrollable", booleanAttribute] }, host: { properties: { "class": "classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-menu', standalone: true, host: {
'[class]': 'classes'
}, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
}], propDecorators: { scrollable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class MenuGroupComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: MenuGroupComponent, isStandalone: true, selector: "nj-menu-group", inputs: { headerLabel: "headerLabel" }, host: { attributes: { "role": "group" }, classAttribute: "nj-menu-group" }, ngImport: i0, template: "@if (headerLabel) {\n <h3 class=\"nj-menu-group__header\">{{ headerLabel }}</h3>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MenuGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-menu-group', host: {
class: 'nj-menu-group',
role: 'group'
}, template: "@if (headerLabel) {\n <h3 class=\"nj-menu-group__header\">{{ headerLabel }}</h3>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
}], propDecorators: { headerLabel: [{
type: Input
}] } });
const defaultParams = {
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)
])
};
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: "20.3.13", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ModalComponent, isStandalone: true, selector: "nj-modal", inputs: { hasCloseIcon: "hasCloseIcon", closeLabel: "closeLabel", isVerticallyCentered: "isVerticallyCentered", modalId: "modalId" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n class=\"nj-modal-deprecated nj-modal-deprecated--visible\"\n [ngClass]=\"{ 'nj-modal-deprecated--vertical-centered': isVerticallyCentered }\"\n>\n <div class=\"nj-modal-deprecated__dialog\">\n <div class=\"nj-modal-deprecated__content\" @modal>\n <div class=\"nj-modal-deprecated__header\">\n <h1 class=\"nj-modal-deprecated__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n @if (hasCloseIcon) {\n <button\n nj-icon-button\n class=\"nj-modal-deprecated__close\"\n icon=\"close\"\n scale=\"sm\"\n (click)=\"closeModal()\"\n [altLabel]=\"closeLabel\"\n ></button>\n }\n </div>\n <div class=\"nj-modal-deprecated__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal-deprecated__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [modalAnimation.modal], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [modalAnimation.modal], imports: [IconButtonComponent, CommonModule], template: "<div\n class=\"nj-modal-deprecated nj-modal-deprecated--visible\"\n [ngClass]=\"{ 'nj-modal-deprecated--vertical-centered': isVerticallyCentered }\"\n>\n <div class=\"nj-modal-deprecated__dialog\">\n <div class=\"nj-modal-deprecated__content\" @modal>\n <div class=\"nj-modal-deprecated__header\">\n <h1 class=\"nj-modal-deprecated__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n @if (hasCloseIcon) {\n <button\n nj-icon-button\n class=\"nj-modal-deprecated__close\"\n icon=\"close\"\n scale=\"sm\"\n (click)=\"closeModal()\"\n [altLabel]=\"closeLabel\"\n ></button>\n }\n </div>\n <div class=\"nj-modal-deprecated__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal-deprecated__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ 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 scale
*/
this.scale = '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
*/
getTagScaleClass() {
if (!this.scale || this.scale === 'md') {
return '';
}
return `${this.tagClassName}--${this.scale}`;
}
/**
* @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: "20.3.13", ngImport: i0, type: TagComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: TagComponent, isStandalone: true, selector: "nj-tag", inputs: { variant: "variant", scale: "scale", 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(), getTagScaleClass(), getTagDisabledClass()]\">\n <!-- Icon -->\n @if (iconName && !hasCustomIcon) {\n <span aria-hidden=\"true\" class=\"nj-tag__icon nj-icon-material material-icons\">{{ iconName }}</span>\n }\n @if (hasCustomIcon) {\n <span aria-hidden=\"true\" class=\"nj-tag__icon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n }\n\n <ng-container *ngTemplateOutlet=\"tagWrapper\"></ng-container>\n\n <!-- Close button -->\n @if (isClosable && !isDisabled) {\n <button\n nj-icon-button\n icon=\"close\"\n class=\"nj-tag__close\"\n scale=\"2xs\"\n type=\"button\"\n [altLabel]=\"closeLabel\"\n (click)=\"removeTag($event)\"\n ></button>\n }\n</div>\n\n<!-- Render a link, a button or a span for the tag content -->\n<ng-template #tagWrapper>\n @if (href) {\n <a\n class=\"nj-tag__action\"\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\n @if (!href && isClickable) {\n <button class=\"nj-tag__action\" [attr.disabled]=\"isDisabled ? 'disabled' : null\" (click)=\"tagClick?.emit($event)\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n\n @if (!href && !isClickable) {\n <p class=\"nj-tag__text\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </p>\n }\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: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "20.3.13", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconButtonComponent, CommonModule], template: "<div class=\"nj-tag\" [ngClass]=\"[getTagVariantClass(), getTagScaleClass(), getTagDisabledClass()]\">\n <!-- Icon -->\n @if (iconName && !hasCustomIcon) {\n <span aria-hidden=\"true\" class=\"nj-tag__icon nj-icon-material material-icons\">{{ iconName }}</span>\n }\n @if (hasCustomIcon) {\n <span aria-hidden=\"true\" class=\"nj-tag__icon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n }\n\n <ng-container *ngTemplateOutlet=\"tagWrapper\"></ng-container>\n\n <!-- Close button -->\n @if (isClosable && !isDisabled) {\n <button\n nj-icon-button\n icon=\"close\"\n class=\"nj-tag__close\"\n scale=\"2xs\"\n type=\"button\"\n [altLabel]=\"closeLabel\"\n (click)=\"removeTag($event)\"\n ></button>\n }\n</div>\n\n<!-- Render a link, a button or a span for the tag content -->\n<ng-template #tagWrapper>\n @if (href) {\n <a\n class=\"nj-tag__action\"\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\n @if (!href && isClickable) {\n <button class=\"nj-tag__action\" [attr.disabled]=\"isDisabled ? 'disabled' : null\" (click)=\"tagClick?.emit($event)\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </button>\n }\n\n @if (!href && !isClickable) {\n <p class=\"nj-tag__text\">\n <ng-container *ngTemplateOutlet=\"tagContent\"></ng-container>\n </p>\n }\n</ng-template>\n\n<!-- Tag inner text content -->\n<ng-template #tagContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
type: Input
}], scale: [{
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) => {
const value = opt.getValue();
return value && this.selectedValues.has(value) ? index : -1;
})
.filter((index) => index >= 0));
}
else {
this.selectedIndexes.clear();
this.selectedValues.clear();
}
this.updateOptionsActive();
}
/**
* @ignore
*/
toggleByIndex(e, index, tagIndex) {
const item = this.selectOptions?.get(index);
if (!item) {
return;
}
e?.stopPropagation();
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;
}
const value = item?.getValue();
if (value) {
this.toggleValueInSelectedValue(value);
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.selectOptions?.length && 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) {
const option = this.selectOptions?.get(this.focusedIndex);
if (!option) {
return;
}
this.toggleItem(option, 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()) ??
-1;
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 && indexToAdd >= 0) {
this.selectedIndexes.add(indexToAdd);
}
}
}
this.updateOptionsActive();
this.cdr.markForCheck();
}
updateOptionsActive() {
this.selectOptions?.forEach((item) => {
const value = item.getValue();
item.updateSelected(!!value && this.selectedValues.has(value));
});
}
/**
* 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) ?? -1);
}
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 tagScale() {
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: "20.3.13", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: ListItemDeprecatedComponent, descendants: true }], viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["button"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "listEl", first: true, predicate: ListDeprecatedComponent, 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 >\n <span class=\"nj-sr-only\">{{ buttonLabel }}</span>\n </button>\n <div class=\"nj-form-item__selected-tags\" (click)=\"toggleIsOpen()\">\n @if (selectIndexAsArray?.length; as numOfSelected) {\n @if (displaySelectedItems) {\n @for (optionIndex of selectedIndexesToShow; track optionIndex; let i = $index) {\n <nj-tag\n #tags\n [variant]=\"tagColor\"\n [scale]=\"tagScale\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(optionIndex)\"\n (closeClick)=\"toggleByIndex($event, optionIndex, i)\"\n >\n {{ getLabelAtIndex(optionIndex) }}\n </nj-tag>\n }\n @if (maxTagsToDisplay && numOfSelected > maxTagsToDisplay) {\n <nj-tag [variant]=\"tagColor\" [scale]=\"tagScale\"> +{{ numOfSelected - maxTagsToDisplay }} </nj-tag>\n }\n }\n @if (!displaySelectedItems) {\n @if (numOfSelected === 1) {\n <nj-tag\n [variant]=\"tagColor\"\n [scale]=\"tagScale\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(selectIndexAsArray?.[0])\"\n (closeClick)=\"toggleByIndex($event, selectIndexAsArray?.[0] ?? 0, 0)\"\n >\n {{ getLabelAtIndex(selectIndexAsArray?.[0] ?? 0) }}\n </nj-tag>\n }\n @if (numOfSelected > 1) {\n <nj-tag\n [variant]=\"tagColor\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [scale]=\"tagScale\"\n [closeLabel]=\"tagResetSelectionLabel\"\n (closeClick)=\"resetSelection($event)\"\n >\n {{ numOfSelected }} {{ selectedText }}\n </nj-tag>\n }\n }\n }\n </div>\n <nj-list-deprecated\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-deprecated>\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", "scale", "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", "clearable", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick", "clearIconClick"] }, { kind: "directive", type: FormFieldDirective, selector: "input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]", exportAs: ["njFormField"] }, { kind: "component", type: ListDeprecatedComponent, selector: "nj-list-deprecated", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }], animations: [selectAnimations.transformList], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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, imports: [TagComponent, FormItemComponent, FormFieldDirective, ListDeprecatedComponent], 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 >\n <span class=\"nj-sr-only\">{{ buttonLabel }}</span>\n </button>\n <div class=\"nj-form-item__selected-tags\" (click)=\"toggleIsOpen()\">\n @if (selectIndexAsArray?.length; as numOfSelected) {\n @if (displaySelectedItems) {\n @for (optionIndex of selectedIndexesToShow; track optionIndex; let i = $index) {\n <nj-tag\n #tags\n [variant]=\"tagColor\"\n [scale]=\"tagScale\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(optionIndex)\"\n (closeClick)=\"toggleByIndex($event, optionIndex, i)\"\n >\n {{ getLabelAtIndex(optionIndex) }}\n </nj-tag>\n }\n @if (maxTagsToDisplay && numOfSelected > maxTagsToDisplay) {\n <nj-tag [variant]=\"tagColor\" [scale]=\"tagScale\"> +{{ numOfSelected - maxTagsToDisplay }} </nj-tag>\n }\n }\n @if (!displaySelectedItems) {\n @if (numOfSelected === 1) {\n <nj-tag\n [variant]=\"tagColor\"\n [scale]=\"tagScale\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [closeLabel]=\"getTagCloseLabel(selectIndexAsArray?.[0])\"\n (closeClick)=\"toggleByIndex($event, selectIndexAsArray?.[0] ?? 0, 0)\"\n >\n {{ getLabelAtIndex(selectIndexAsArray?.[0] ?? 0) }}\n </nj-tag>\n }\n @if (numOfSelected > 1) {\n <nj-tag\n [variant]=\"tagColor\"\n [isClosable]=\"true\"\n [shouldAutoDestruct]=\"false\"\n [scale]=\"tagScale\"\n [closeLabel]=\"tagResetSelectionLabel\"\n (closeClick)=\"resetSelection($event)\"\n >\n {{ numOfSelected }} {{ selectedText }}\n </nj-tag>\n }\n }\n }\n </div>\n <nj-list-deprecated\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-deprecated>\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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, 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: [ListDeprecatedComponent]
}], tags: [{
type: ViewChildren,
args: ['tags']
}], selectOptions: [{
type: ContentChildren,
args: [ListItemDeprecatedComponent, { 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 ?? 0 }, (_, 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 ((this.count !== undefined && item > this.count) || this.currentItem < 1) {
return;
}
this.currentItem = item;
this.selectedItem?.emit(this.currentItem);
this.cdr.markForCheck();
}
/**
* @ignore
*/
isItemVisible(item) {
if (!this.count) {
return false;
}
// 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) {
if (!this.count) {
return false;
}
// 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: "20.3.13", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 <button\n nj-icon-button\n scale=\"sm\"\n icon=\"chevron_left\"\n [altLabel]=\"ariaLabelPrevious\"\n [disabled]=\"currentItem === 1\"\n (click)=\"goToPrevious()\"\n ></button>\n </li>\n @for (item of getItems(); track item) {\n @if (!shouldMinify || isItemVisible(item)) {\n <li class=\"nj-pagination__item\" [ngClass]=\"{ 'nj-pagination__item--active': currentItem === item }\">\n @if (currentItem === item) {\n <span class=\"nj-pagination__link\" aria-current=\"true\">\n {{ item }}\n </span>\n } @else {\n <button class=\"nj-pagination__link\" (click)=\"goToItem(item)\">\n {{ item }}\n </button>\n }\n </li>\n }\n @if (shouldMinify && showMoreHorizontal(item)) {\n <li class=\"nj-pagination__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 }\n }\n\n <li class=\"nj-pagination__item\">\n <button\n nj-icon-button\n scale=\"sm\"\n icon=\"chevron_right\"\n [altLabel]=\"ariaLabelNext\"\n (click)=\"goToNext()\"\n [disabled]=\"currentItem === count\"\n ></button>\n </li>\n </ul>\n</nav>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { 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: "20.3.13", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, IconButtonComponent, CommonModule], template: "<nav>\n <ul class=\"nj-pagination\">\n <li class=\"nj-pagination__item\">\n <button\n nj-icon-button\n scale=\"sm\"\n icon=\"chevron_left\"\n [altLabel]=\"ariaLabelPrevious\"\n [disabled]=\"currentItem === 1\"\n (click)=\"goToPrevious()\"\n ></button>\n </li>\n @for (item of getItems(); track item) {\n @if (!shouldMinify || isItemVisible(item)) {\n <li class=\"nj-pagination__item\" [ngClass]=\"{ 'nj-pagination__item--active': currentItem === item }\">\n @if (currentItem === item) {\n <span class=\"nj-pagination__link\" aria-current=\"true\">\n {{ item }}\n </span>\n } @else {\n <button class=\"nj-pagination__link\" (click)=\"goToItem(item)\">\n {{ item }}\n </button>\n }\n </li>\n }\n @if (shouldMinify && showMoreHorizontal(item)) {\n <li class=\"nj-pagination__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 }\n }\n\n <li class=\"nj-pagination__item\">\n <button\n nj-icon-button\n scale=\"sm\"\n icon=\"chevron_right\"\n [altLabel]=\"ariaLabelNext\"\n (click)=\"goToNext()\"\n [disabled]=\"currentItem === count\"\n ></button>\n </li>\n </ul>\n</nav>\n" }]
}], ctorParameters: () => [{ 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: "20.3.13", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "@if (getFormattedPercentage(); as percentage) {\n <div\n class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\"\n >\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\" [style.width.%]=\"percentage\" @progressFill [@.disabled]=\"!isAnimated\"></div>\n </div>\n @if (descriptionPosition !== 'none') {\n <div aria-hidden=\"true\" class=\"nj-progress__description\">{{ getFormattedPercentage() }}%</div>\n }\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ProgressAnimation.progressFill], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-progress', changeDetection: ChangeDetectionStrategy.OnPush, animations: [ProgressAnimation.progressFill], encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "@if (getFormattedPercentage(); as percentage) {\n <div\n class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\"\n >\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\" [style.width.%]=\"percentage\" @progressFill [@.disabled]=\"!isAnimated\"></div>\n </div>\n @if (descriptionPosition !== 'none') {\n <div aria-hidden=\"true\" class=\"nj-progress__description\">{{ getFormattedPercentage() }}%</div>\n }\n </div>\n}\n" }]
}], ctorParameters: () => [], 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: "20.3.13", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RadioComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-radio', changeDetection: ChangeDetectionStrategy.OnPush, 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: () => [{ 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._isDisabled = false;
/**
* @ignore
*/
this._required = false;
/**
* @ignore
*/
this._selected = null;
/**
* @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 && this.name !== undefined) {
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: "20.3.13", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (errorMessage) {\n <p class=\"nj-radio-group__error-message\">\n <nj-icon name=\"warning\"></nj-icon>\n {{ errorMessage }}\n </p>\n }\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: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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, imports: [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 @if (errorMessage) {\n <p class=\"nj-radio-group__error-message\">\n <nj-icon name=\"warning\"></nj-icon>\n {{ errorMessage }}\n </p>\n }\n </legend>\n <ng-content></ng-content>\n</fieldset>\n" }]
}], ctorParameters: () => [{ 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 }]
}] } });
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--${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: "20.3.13", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (altLabel) {\n <label [for]=\"finalInputId\" class=\"nj-sr-only\" aria-hidden=\"true\">\n {{ altLabel }}\n </label>\n }\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 />\n @if (value?.length > 0) {\n <button\n nj-icon-button\n icon=\"cancel\"\n class=\"nj-search__clear-button\"\n [altLabel]=\"altResetButtonLabel\"\n [disabled]=\"isDisabled\"\n (click)=\"onClearValue()\"\n ></button>\n }\n</div>\n@if (actionTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionTemplate\"></ng-container>\n}\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-btn.nj-search__clear-button{position:absolute;top:50%;right:var(--nj-semantic-size-spacing-16);transform:translateY(-50%);--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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { 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: "20.3.13", ngImport: i0, type: SearchComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 @if (altLabel) {\n <label [for]=\"finalInputId\" class=\"nj-sr-only\" aria-hidden=\"true\">\n {{ altLabel }}\n </label>\n }\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 />\n @if (value?.length > 0) {\n <button\n nj-icon-button\n icon=\"cancel\"\n class=\"nj-search__clear-button\"\n [altLabel]=\"altResetButtonLabel\"\n [disabled]=\"isDisabled\"\n (click)=\"onClearValue()\"\n ></button>\n }\n</div>\n@if (actionTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionTemplate\"></ng-container>\n}\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-btn.nj-search__clear-button{position:absolute;top:50%;right:var(--nj-semantic-size-spacing-16);transform:translateY(-50%);--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;
}
ngDoCheck() {
if (this.search.disabled && this.search.disabled !== this.button.disabled) {
this.button.disabled = this.search.disabled;
this.cdr.markForCheck();
}
if (!this.search.disabled && this.isDisabled !== this.button.disabled) {
this.button.disabled = this.isDisabled;
this.cdr.markForCheck();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SearchButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SearchButtonDirective, isStandalone: true, selector: "button[njSearchButton]", inputs: { isDisabled: "isDisabled" }, host: { classAttribute: "nj-search__button" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SearchButtonDirective, decorators: [{
type: Directive,
args: [{
selector: 'button[njSearchButton]',
standalone: true,
host: {
class: 'nj-search__button'
}
}]
}], propDecorators: { isDisabled: [{
type: Input
}] } });
const rootClass$1 = 'nj-segmented-control';
class SegmentedControlComponent {
constructor() {
this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
this.scale = input(...(ngDevMode ? [undefined, { debugName: "scale" }] : []));
this.classes = computed(() => ({
[`${rootClass$1}--${this.scale()}`]: !!this.scale()
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: SegmentedControlComponent, isStandalone: true, selector: "nj-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "class": "classes()" }, classAttribute: "nj-segmented-control" }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: rootClass$1,
role: 'group',
'[class]': 'classes()'
}, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }] } });
const rootClass = 'nj-segmented-control-btn';
class SegmentedControlButtonComponent {
constructor() {
this.el = inject(ElementRef);
this.segmentedControl = inject(SegmentedControlComponent, { host: true });
this.engieTemplate = contentChild(EngieTemplateDirective, ...(ngDevMode ? [{ debugName: "engieTemplate" }] : []));
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
this.iconName = input(...(ngDevMode ? [undefined, { debugName: "iconName" }] : []));
this.customIcon = computed(() => {
if (this.engieTemplate()?.selector === 'icon') {
return this.engieTemplate().templateRef;
}
return undefined;
}, ...(ngDevMode ? [{ debugName: "customIcon" }] : []));
this.hasTextContent = signal(false, ...(ngDevMode ? [{ debugName: "hasTextContent" }] : []));
this.isPressed = computed(() => {
return this.segmentedControl.value() === this.value() ? true : undefined;
}, ...(ngDevMode ? [{ debugName: "isPressed" }] : []));
}
handleClick() {
this.segmentedControl.value.set(this.value());
}
ngAfterContentChecked() {
const hasTextContent = Array.from(this.el.nativeElement.childNodes).some((node) => {
return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '';
});
this.hasTextContent.set(hasTextContent);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SegmentedControlButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SegmentedControlButtonComponent, isStandalone: true, selector: "button[nj-segmented-control-button], a[nj-segmented-control-button]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "class.nj-segmented-control-btn--icon-only": "(iconName() || customIcon()) && !hasTextContent()", "attr.aria-pressed": "isPressed()" }, classAttribute: "nj-segmented-control-btn" }, queries: [{ propertyName: "engieTemplate", first: true, predicate: EngieTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (customIcon()) {\n <span class=\"nj-segmented-control-btn__icon\">\n <ng-container *ngTemplateOutlet=\"customIcon()\"></ng-container>\n </span>\n} @else if (iconName()) {\n <nj-icon class=\"nj-segmented-control-btn__icon\" [name]=\"iconName()\"></nj-icon>\n}\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SegmentedControlButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'button[nj-segmented-control-button], a[nj-segmented-control-button]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CommonModule], host: {
class: rootClass,
[`[class.${rootClass}--icon-only]`]: '(iconName() || customIcon()) && !hasTextContent()',
'[attr.aria-pressed]': 'isPressed()',
'(click)': 'handleClick()'
}, template: "@if (customIcon()) {\n <span class=\"nj-segmented-control-btn__icon\">\n <ng-container *ngTemplateOutlet=\"customIcon()\"></ng-container>\n </span>\n} @else if (iconName()) {\n <nj-icon class=\"nj-segmented-control-btn__icon\" [name]=\"iconName()\"></nj-icon>\n}\n\n<ng-content></ng-content>\n" }]
}], propDecorators: { engieTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EngieTemplateDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }] } });
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 alphanumeric characters.
\d : every digit
\p{Letter} : every letter 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;
}) ?? -1;
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) ?? -1;
}
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) ?? -1);
}
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.selectOptions?.length && 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();
if (value) {
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 !== undefined && 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: "20.3.13", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SelectComponent, isStandalone: true, selector: "nj-select", inputs: { iconName: "iconName", fieldLabel: "fieldLabel", label: "label", 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: ListItemDeprecatedComponent, descendants: true }], viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["button"], descendants: true }, { propertyName: "customLabelEl", first: true, predicate: ["customLabelEl"], descendants: true }, { propertyName: "listEl", first: true, predicate: ListDeprecatedComponent, 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 @if (selectedIndex >= 0 && customLabel && customLabel.templateRef) {\n <div #customLabelEl class=\"nj-form-item__custom-label\" aria-hidden=\"true\" njFormField>\n <ng-container\n [ngTemplateOutlet]=\"customLabel.templateRef\"\n [ngTemplateOutletContext]=\"customLabelContext\"\n ></ng-container>\n </div>\n }\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-deprecated\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-deprecated>\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: ListDeprecatedComponent, selector: "nj-list-deprecated", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: FormItemComponent, selector: "nj-form-item", inputs: ["inputId", "size", "isFloatingLabel", "isDisabled", "isRequired", "clearable", "hasSuccess", "hasError", "hasHint", "hasCustomIcon", "isIconClickable", "iconName", "additionalClass", "passwordButtonLabelShow", "passwordButtonLabelHide", "passwordNoticeIsVisible", "passwordNoticeIsHidden", "isSelect"], outputs: ["iconClick", "iconKeydown", "wrapperClick", "clearIconClick"] }, { 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.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: "20.3.13", 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, imports: [ListDeprecatedComponent, 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 @if (selectedIndex >= 0 && customLabel && customLabel.templateRef) {\n <div #customLabelEl class=\"nj-form-item__custom-label\" aria-hidden=\"true\" njFormField>\n <ng-container\n [ngTemplateOutlet]=\"customLabel.templateRef\"\n [ngTemplateOutletContext]=\"customLabelContext\"\n ></ng-container>\n </div>\n }\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-deprecated\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-deprecated>\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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { iconName: [{
type: Input
}], fieldLabel: [{
type: Input
}], label: [{
type: Input
}], listNavigationLabel: [{
type: Input
}], buttonDefaultValueLabel: [{
type: Input
}], buttonEl: [{
type: ViewChild,
args: ['button']
}], customLabelEl: [{
type: ViewChild,
args: ['customLabelEl']
}], listEl: [{
type: ViewChild,
args: [ListDeprecatedComponent]
}], customLabel: [{
type: ContentChild,
args: [CustomLabelDirective]
}], selectOptions: [{
type: ContentChildren,
args: [ListItemDeprecatedComponent, { descendants: true }]
}] } });
class SidebarContentDirective {
constructor() {
this.staticClass = 'nj-sidebar-deprecated-content';
this.shouldBeCovered = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.13", type: SidebarContentDirective, isStandalone: true, selector: "[njSidebarContent]", inputs: { shouldBeCovered: ["shouldBeCovered", "shouldBeCovered", booleanAttribute] }, host: { properties: { "class": "this.staticClass", "class.nj-sidebar-deprecated-content--nopush": "this.shouldBeCovered" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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-deprecated-content--nopush']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class SidebarFooterDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SidebarFooterDirective, isStandalone: true, selector: "[njSidebarFooter]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarFooterDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarFooter]',
standalone: true
}]
}] });
class SidebarItemDirective {
constructor() {
this.sidebar = inject(SidebarComponent);
this.listItem = inject(ListItemDeprecatedComponent);
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: "20.3.13", ngImport: i0, type: SidebarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SidebarItemDirective, isStandalone: true, selector: "[njSidebarItem]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarItem]',
standalone: true
}]
}], ctorParameters: () => [], propDecorators: { sidebar: [{
type: Host
}], listItem: [{
type: Self
}] } });
class SidebarLogoDirective {
constructor() {
this.templateRef = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SidebarLogoDirective, isStandalone: true, selector: "[njSidebarLogo]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidebarLogoDirective, decorators: [{
type: Directive,
args: [{
selector: '[njSidebarLogo]',
standalone: true
}]
}] });
class SidebarComponent {
constructor() {
this.staticClass = 'nj-sidebar-deprecated';
/**
* 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: "20.3.13", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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-deprecated--folded": "this.isFolded" } }, queries: [{ propertyName: "logo", first: true, predicate: SidebarLogoDirective, descendants: true }, { propertyName: "footerElements", predicate: SidebarFooterDirective }], ngImport: i0, template: "@if (logo?.templateRef; as templateRef) {\n <div class=\"nj-sidebar-deprecated__brand\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ isFolded }\"></ng-container>\n </div>\n}\n<nav class=\"nj-sidebar-deprecated__navigation\">\n <nj-list-deprecated [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-deprecated>\n</nav>\n@if (footerElements?.length) {\n <nav class=\"nj-sidebar-deprecated__navigation nj-sidebar-deprecated__navigation--footer\">\n <nj-list-deprecated [isDense]=\"true\" [hasBorder]=\"false\">\n @for (footerElement of footerElements; track footerElement) {\n <ng-container [ngTemplateOutlet]=\"footerElement.templateRef\"> </ng-container>\n }\n </nj-list-deprecated>\n </nav>\n}\n@if (hasFoldItem) {\n <nj-list-deprecated class=\"nj-sidebar-deprecated__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li\n nj-list-item-deprecated\n njSidebarItem\n class=\"nj-sidebar-deprecated__fold-btn\"\n type=\"button\"\n iconName=\"chevron_left\"\n (itemClick)=\"foldItemClicked.next($event)\"\n >\n {{ foldItemLabel }}\n </li>\n </nj-list-deprecated>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListDeprecatedComponent, selector: "nj-list-deprecated", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: ListItemDeprecatedComponent, selector: "[nj-list-item-deprecated]", 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: "20.3.13", ngImport: i0, type: SidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
CommonModule,
ListDeprecatedComponent,
ListItemDeprecatedComponent,
SidebarFooterDirective,
SidebarItemDirective,
SidebarLogoDirective
], template: "@if (logo?.templateRef; as templateRef) {\n <div class=\"nj-sidebar-deprecated__brand\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ isFolded }\"></ng-container>\n </div>\n}\n<nav class=\"nj-sidebar-deprecated__navigation\">\n <nj-list-deprecated [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-deprecated>\n</nav>\n@if (footerElements?.length) {\n <nav class=\"nj-sidebar-deprecated__navigation nj-sidebar-deprecated__navigation--footer\">\n <nj-list-deprecated [isDense]=\"true\" [hasBorder]=\"false\">\n @for (footerElement of footerElements; track footerElement) {\n <ng-container [ngTemplateOutlet]=\"footerElement.templateRef\"> </ng-container>\n }\n </nj-list-deprecated>\n </nav>\n}\n@if (hasFoldItem) {\n <nj-list-deprecated class=\"nj-sidebar-deprecated__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li\n nj-list-item-deprecated\n njSidebarItem\n class=\"nj-sidebar-deprecated__fold-btn\"\n type=\"button\"\n iconName=\"chevron_left\"\n (itemClick)=\"foldItemClicked.next($event)\"\n >\n {{ foldItemLabel }}\n </li>\n </nj-list-deprecated>\n}\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], isFolded: [{
type: HostBinding,
args: ['class.nj-sidebar-deprecated--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 SidepanelHeaderComponent {
constructor() {
/**
* Emit event when clicking the close icon
*/
this.closeIconClicked = new EventEmitter();
}
get shouldDisplayHeaderActions() {
return this.closeIconClicked.observed || this.actionsTemplateRef?.length;
}
ngAfterContentInit() {
this.actionsTemplateRef =
this.engieTemplates?.reduce((agg, directive) => {
if (directive.selector === 'action') {
agg.push(directive.templateRef);
}
return agg;
}, []) ?? [];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidepanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SidepanelHeaderComponent, isStandalone: true, selector: "nj-sidepanel-header", inputs: { title: "title" }, outputs: { closeIconClicked: "closeIconClicked" }, host: { classAttribute: "nj-sidepanel-header" }, queries: [{ propertyName: "engieTemplates", predicate: EngieTemplateDirective }], ngImport: i0, template: "@if (title) {\n <span class=\"nj-sidepanel-header__title\">{{ title }}</span>\n} @else {\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n}\n@if (shouldDisplayHeaderActions) {\n <div class=\"nj-sidepanel-header__actions\">\n @for (action of actionsTemplateRef; track action) {\n <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n }\n @if (closeIconClicked.observed) {\n <button nj-icon-button variant=\"tertiary\" icon=\"close\" (click)=\"closeIconClicked.emit($event)\"></button>\n }\n </div>\n}\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidepanelHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, CommonModule], host: {
class: 'nj-sidepanel-header'
}, template: "@if (title) {\n <span class=\"nj-sidepanel-header__title\">{{ title }}</span>\n} @else {\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n}\n@if (shouldDisplayHeaderActions) {\n <div class=\"nj-sidepanel-header__actions\">\n @for (action of actionsTemplateRef; track action) {\n <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n }\n @if (closeIconClicked.observed) {\n <button nj-icon-button variant=\"tertiary\" icon=\"close\" (click)=\"closeIconClicked.emit($event)\"></button>\n }\n </div>\n}\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"] }]
}], propDecorators: { title: [{
type: Input
}], closeIconClicked: [{
type: Output
}], engieTemplates: [{
type: ContentChildren,
args: [EngieTemplateDirective]
}] } });
class SidepanelComponent {
ngAfterContentInit() {
this.templateDirectives?.forEach((directive) => {
if (directive.selector === 'header') {
this.headerTemplateRef = directive.templateRef;
}
if (directive.selector === 'footer') {
this.footerTemplateRef = directive.templateRef;
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidepanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SidepanelComponent, isStandalone: true, selector: "nj-sidepanel", host: { classAttribute: "nj-sidepanel" }, queries: [{ propertyName: "templateDirectives", predicate: EngieTemplateDirective }], ngImport: i0, template: "@if (headerTemplateRef) {\n <div class=\"nj-sidepanel__header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplateRef\"></ng-container>\n </div>\n}\n<div class=\"nj-sidepanel__content\">\n <ng-content></ng-content>\n</div>\n@if (footerTemplateRef) {\n <div class=\"nj-sidepanel__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTemplateRef\"></ng-container>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SidepanelComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], host: {
class: 'nj-sidepanel'
}, template: "@if (headerTemplateRef) {\n <div class=\"nj-sidepanel__header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplateRef\"></ng-container>\n </div>\n}\n<div class=\"nj-sidepanel__content\">\n <ng-content></ng-content>\n</div>\n@if (footerTemplateRef) {\n <div class=\"nj-sidepanel__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTemplateRef\"></ng-container>\n </div>\n}\n" }]
}], propDecorators: { templateDirectives: [{
type: ContentChildren,
args: [EngieTemplateDirective]
}] } });
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: "20.3.13", ngImport: i0, type: SkeletonAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SkeletonAreaComponent, isStandalone: true, selector: "nj-skeleton-area", inputs: { height: "height", width: "width", icon: "icon", hasCustomIcon: "hasCustomIcon" }, host: { properties: { "class.nj-skeleton": "true", "class.nj-skeleton--area": "true", "attr.aria-hidden": "true", "style.height": "height", "style.width": "width" } }, ngImport: i0, template: "@if (!hasCustomIcon) {\n <nj-icon class=\"nj-skeleton__icon\" [name]=\"icon\" scale=\"xl\" variant=\"inherit\"></nj-icon>\n}\n@if (hasCustomIcon) {\n <span class=\"nj-skeleton__icon\">\n <ng-content></ng-content>\n </span>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonAreaComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
'[class.nj-skeleton]': 'true',
'[class.nj-skeleton--area]': 'true',
'[attr.aria-hidden]': 'true',
'[style.height]': 'height',
'[style.width]': 'width'
}, template: "@if (!hasCustomIcon) {\n <nj-icon class=\"nj-skeleton__icon\" [name]=\"icon\" scale=\"xl\" variant=\"inherit\"></nj-icon>\n}\n@if (hasCustomIcon) {\n <span class=\"nj-skeleton__icon\">\n <ng-content></ng-content>\n </span>\n}\n" }]
}], propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], icon: [{
type: Input
}], hasCustomIcon: [{
type: Input
}] } });
class SkeletonCircleComponent {
constructor() {
/**
* @ignore
*/
this.skeletonClassName = 'nj-skeleton';
}
get classes() {
const classes = [this.skeletonClassName, `${this.skeletonClassName}--circle`];
if (this.scale) {
classes.push(`${this.skeletonClassName}--${this.scale}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SkeletonCircleComponent, isStandalone: true, selector: "nj-skeleton-circle", inputs: { height: "height", width: "width", scale: "scale" }, host: { properties: { "class": "classes", "attr.aria-hidden": "true", "style.height": "height", "style.width": "width" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonCircleComponent, decorators: [{
type: Component,
args: [{
selector: 'nj-skeleton-circle',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'classes',
'[attr.aria-hidden]': 'true',
'[style.height]': 'height',
'[style.width]': 'width'
}
}]
}], propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], scale: [{
type: Input
}] } });
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: "20.3.13", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SkeletonContainerComponent, isStandalone: true, selector: "nj-skeleton-container", inputs: { screenReaderLabel: "screenReaderLabel" }, host: { properties: { "class.nj-skeleton-container": "true" } }, ngImport: i0, template: "<span class=\"nj-sr-only\">{{ screenReaderLabel }}</span>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-skeleton-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class.nj-skeleton-container]': 'true'
}, template: "<span class=\"nj-sr-only\">{{ screenReaderLabel }}</span>\n<ng-content></ng-content>\n" }]
}], ctorParameters: () => [], propDecorators: { screenReaderLabel: [{
type: Input
}] } });
class SkeletonRectangleComponent {
constructor() {
/**
* @ignore
*/
this.skeletonClassName = 'nj-skeleton';
}
get classes() {
const classes = [this.skeletonClassName, `${this.skeletonClassName}--rectangle`];
if (this.scale) {
classes.push(`${this.skeletonClassName}--${this.scale}`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonRectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: SkeletonRectangleComponent, isStandalone: true, selector: "nj-skeleton-rectangle", inputs: { height: "height", width: "width", scale: "scale" }, host: { properties: { "class": "classes", "attr.aria-hidden": "true", "style.height": "height", "style.width": "width" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonRectangleComponent, decorators: [{
type: Component,
args: [{
selector: 'nj-skeleton-rectangle',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'classes',
'[attr.aria-hidden]': 'true',
'[style.height]': 'height',
'[style.width]': 'width'
}
}]
}], propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], scale: [{
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: "20.3.13", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (label) {\n <label [attr.for]=\"sliderId\">{{ label }}</label>\n }\n <input\n #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 />\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: "20.3.13", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-slider', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SliderComponent),
multi: true
}
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"nj-slider\" [ngClass]=\"{ 'nj-slider--disabled': isDisabled }\">\n @if (label) {\n <label [attr.for]=\"sliderId\">{{ label }}</label>\n }\n <input\n #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 />\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 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: "20.3.13", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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\n class=\"nj-tab__item\"\n [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 @if (badgeOptions) {\n <nj-badge\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 }\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: "component", type: BadgeComponent, selector: "nj-badge", inputs: ["emphasis", "variant", "scale", "size", "iconName", "value", "capedValue", "isUppercase", "unitLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, BadgeComponent], template: "<button\n class=\"nj-tab__item\"\n [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 @if (badgeOptions) {\n <nj-badge\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 }\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: () => [{ 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) ?? -1;
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: "20.3.13", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 @if (tabToRender) {\n <div\n class=\"nj-tab__content nj-tab__content--active\"\n [attr.id]=\"tabToRender.tabContentId\"\n [attr.aria-labelledby]=\"tabToRender.tabContentAriaLabelledBy\"\n role=\"tabpanel\"\n tabIndex=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tabToRender.contentTemplateRef\"></ng-container>\n </div>\n }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [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 @if (tabToRender) {\n <div\n class=\"nj-tab__content nj-tab__content--active\"\n [attr.id]=\"tabToRender.tabContentId\"\n [attr.aria-labelledby]=\"tabToRender.tabContentAriaLabelledBy\"\n role=\"tabpanel\"\n tabIndex=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tabToRender.contentTemplateRef\"></ng-container>\n </div>\n }\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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
type: Input
}], density: [{
type: Input
}], tabsList: [{
type: ContentChildren,
args: [TabComponent]
}], selectedTab: [{
type: Output
}] } });
class ToastContainerComponent {
constructor(cdr) {
this.cdr = cdr;
}
/**
* @ignore
*/
_markForCheck() {
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToastContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: ToastContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isFullWidth: [{
type: Input
}], containerId: [{
type: Input
}] } });
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: "20.3.13", 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: "17.0.0", version: "20.3.13", 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 @if (iconName) {\n <nj-icon [name]=\"iconName\" class=\"nj-toast__icon\" variant=\"inherit\"></nj-icon>\n }\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 @if (hasCloseIcon) {\n <div class=\"nj-toast__action\">\n <button\n nj-icon-button\n icon=\"close\"\n altLabel=\"Close notification\"\n scale=\"sm\"\n [variant]=\"isInverse ? 'primary' : 'inverse'\"\n [attr.aria-describedby]=\"toastId\"\n (click)=\"close($event)\"\n ></button>\n </div>\n }\n @if (shouldDismiss) {\n <div class=\"nj-toast__gauge\">\n <div class=\"nj-toast__gauge-bar\" [style]=\"getGaugeAnimationStyles()\">\n <p class=\"nj-sr-only\">{{ gaugeLabel }}</p>\n </div>\n </div>\n }\n</div>\n", styles: [".nj-toast__text:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "button[nj-icon-button]", inputs: ["variant", "size", "scale", "hasCustomIcon", "icon", "altLabel"] }, { 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: "20.3.13", ngImport: i0, type: ToastComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-toast', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, IconButtonComponent, CommonModule], template: "<div class=\"nj-toast\" [ngClass]=\"{ 'nj-toast--inverse': isInverse }\">\n <div class=\"nj-toast__body\">\n @if (iconName) {\n <nj-icon [name]=\"iconName\" class=\"nj-toast__icon\" variant=\"inherit\"></nj-icon>\n }\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 @if (hasCloseIcon) {\n <div class=\"nj-toast__action\">\n <button\n nj-icon-button\n icon=\"close\"\n altLabel=\"Close notification\"\n scale=\"sm\"\n [variant]=\"isInverse ? 'primary' : 'inverse'\"\n [attr.aria-describedby]=\"toastId\"\n (click)=\"close($event)\"\n ></button>\n </div>\n }\n @if (shouldDismiss) {\n <div class=\"nj-toast__gauge\">\n <div class=\"nj-toast__gauge-bar\" [style]=\"getGaugeAnimationStyles()\">\n <p class=\"nj-sr-only\">{{ gaugeLabel }}</p>\n </div>\n </div>\n }\n</div>\n", styles: [".nj-toast__text:empty{display:none}\n"] }]
}], ctorParameters: () => [{ 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 ToastService {
constructor(appRef) {
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);
}
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, this.appRef);
const containerPortal = new ComponentPortal(ToastContainerComponent);
const containerComponentRef = this.portalHost.attachComponentPortal(containerPortal);
this.setContainerInputs(containerComponentRef);
this.containerRef = containerComponentRef;
return containerComponentRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToastService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToastService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToastService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.ApplicationRef }] });
class ToggleIconDirective {
constructor() {
this.class = 'nj-toggle__icon';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ToggleIconDirective, isStandalone: true, selector: "[njToggleIcon]", host: { properties: { "class": "this.class" } }, exportAs: ["njToggleIcon"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToggleIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[njToggleIcon]',
exportAs: 'njToggleIcon',
standalone: true
}]
}], propDecorators: { class: [{
type: HostBinding,
args: ['class']
}] } });
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;
this.toggleClassName = 'nj-toggle';
/**
* Output that emits checked value on change only
*/
this.valueChange = new EventEmitter();
this._onChange = (_) => { };
this._onTouched = () => { };
}
// Check if icon is provided on load
ngAfterViewInit() {
this.hasIcon = this.iconWrapper?.nativeElement && this.iconWrapper.nativeElement.innerHTML !== '';
}
_onChangeEvent(event) {
event.stopPropagation();
if (this._inputElement?.nativeElement) {
this.isChecked = this._inputElement.nativeElement.checked;
this._onChange(this.isChecked);
this.valueChange.emit(this.isChecked);
}
}
_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.disabled = isDisabled;
this.cdr.markForCheck();
}
get classes() {
const classes = [];
if (this.scale) {
classes.push(`${this.toggleClassName}--${this.scale}`);
}
if (this.variant) {
classes.push(`${this.toggleClassName}--${this.variant}`);
}
if (this.disabled) {
classes.push(`${this.toggleClassName}--disabled`);
}
if (this.isColorInherited) {
classes.push(`${this.toggleClassName}--inherit`);
}
return classes;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ToggleComponent, isStandalone: true, selector: "nj-toggle", inputs: { inputId: "inputId", name: "name", scale: "scale", variant: "variant", required: "required", isChecked: "isChecked", disabled: ["disabled", "disabled", booleanAttribute], isColorInherited: "isColorInherited", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", handleIcon: "handleIcon" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.nj-toggle": "true", "class": "classes" } }, 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: "<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n #input\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"disabled\"\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\n @if (handleIcon) {\n <nj-icon [name]=\"handleIcon\" class=\"nj-toggle__handle-icon\"></nj-icon>\n }\n\n <div class=\"nj-toggle__icon-container\" #iconWrapper>\n <ng-content select=\"[njToggleIcon]\"></ng-content>\n </div>\n\n @if (hasIcon) {\n <span class=\"nj-sr-only\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n }\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</label>\n", styles: [".nj-toggle__icon-container:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "scale", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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, imports: [CommonModule, IconComponent], host: {
'[class.nj-toggle]': 'true',
'[class]': 'classes'
}, template: "<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n #input\n [required]=\"required\"\n [checked]=\"isChecked\"\n [disabled]=\"disabled\"\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\n @if (handleIcon) {\n <nj-icon [name]=\"handleIcon\" class=\"nj-toggle__handle-icon\"></nj-icon>\n }\n\n <div class=\"nj-toggle__icon-container\" #iconWrapper>\n <ng-content select=\"[njToggleIcon]\"></ng-content>\n </div>\n\n @if (hasIcon) {\n <span class=\"nj-sr-only\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n }\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</label>\n", styles: [".nj-toggle__icon-container:empty{display:none}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputId: [{
type: Input
}], name: [{
type: Input
}], scale: [{
type: Input
}], variant: [{
type: Input
}], required: [{
type: Input
}], isChecked: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isColorInherited: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], handleIcon: [{
type: Input
}], valueChange: [{
type: Output
}], _inputElement: [{
type: ViewChild,
args: ['input']
}], iconWrapper: [{
type: ViewChild,
args: ['iconWrapper']
}] } });
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, ButtonIconDirective, CardComponent, CardImageDirective, CheckboxComponent, CustomIconDirective, CustomLabelDirective, DisplayDirective, EngieTemplateDirective, FormFieldDirective, FormItemComponent, HeadingDirective, HighlightDirective, IconBaseComponent, IconButtonComponent, IconButtonIconDirective, IconComponent, InlineMessageComponent, LinkComponent, ListDeprecatedComponent, ListDirective, ListItemContentComponent, ListItemDeprecatedComponent, ListItemDirective, ListNavigationItemDirective, MenuComponent, MenuGroupComponent, ModalComponent, MultiSelectComponent, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SearchButtonDirective, SearchComponent, SegmentedControlButtonComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarContentDirective, SidebarFooterDirective, SidebarItemDirective, SidebarLogoDirective, SidepanelComponent, SidepanelHeaderComponent, SkeletonAreaComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonRectangleComponent, SliderComponent, SpinnerComponent, StatusIndicatorComponent, TabComponent, TabsComponent, TagComponent, TextDirective, ThemeComponentsVariantsArray, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleIconDirective, TooltipComponent, TooltipDirective, TooltipOptions };
//# sourceMappingURL=engie-group-fluid-design-system-angular.mjs.map