@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
802 lines (784 loc) • 362 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, booleanAttribute, ContentChildren, EventEmitter, Output, HostBinding, ContentChild, ViewChild, forwardRef, ChangeDetectorRef, HostListener, ViewChildren, Inject, Attribute, Optional, Self, Host, Injectable } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgIf, NgTemplateOutlet, DOCUMENT } from '@angular/common';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { Subject, merge, fromEvent, takeUntil, race, BehaviorSubject } from 'rxjs';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { njSemanticMotionEasingLinearOutSlowIn, Tokens, njSemanticMotionEasingFastOutSlowIn } from '@engie-group/fluid-design-tokens';
import { ComponentPortal, DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import * as i1$1 from '@angular/cdk/overlay';
import { RouterLink } from '@angular/router';
import * as i1$2 from '@angular/cdk/dialog';
import * as i1$3 from '@angular/platform-browser';
const ThemeComponentsVariantsArray = ['grey', 'brand', 'teal', 'pink', 'orange', 'red', 'green', 'ultramarine', 'yellow', 'purple', 'blue', 'lime'];
class CustomIconDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CustomIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: CustomIconDirective, isStandalone: true, selector: "[njCustomIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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: "19.2.2", ngImport: i0, type: EngieTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: EngieTemplateDirective, isStandalone: true, selector: "[njTemplate]", inputs: { selector: ["njTemplate", "selector"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EngieTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[njTemplate]',
standalone: true
}]
}], propDecorators: { selector: [{
type: Input,
args: ['njTemplate']
}] } });
class AccordionActionsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AccordionActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", 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: "19.2.2", 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: "19.2.2", ngImport: i0, type: AccordionActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", 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: "19.2.2", ngImport: i0, type: AccordionActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[njAccordionAction]',
standalone: true,
host: {
'class': 'njAccordionAction',
'[attr.data-accordion-expand]': "type === 'expand'",
'[attr.data-accordion-collapse]': "type === 'collapse'",
'(click)': 'handleClicked()'
}
}]
}], propDecorators: { type: [{
type: Input,
args: ['njAccordionAction']
}] } });
class IconBaseComponent {
constructor() {
this.MATERIAL_ICON_CLASS = 'material-icons';
this.ICON_CLASS = 'nj-icon';
/**
* @ignore
*/
this.isEngieIcon = false; //Fixme: Should be inferred by dependency tree. Not being set by input
}
getIconClass() {
if (this.isEngieIcon && !this.name) {
return '';
}
return this.isEngieIcon ? `${this.ICON_CLASS} ${this.ICON_CLASS}-${this.name}` : this.MATERIAL_ICON_CLASS;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: IconBaseComponent, isStandalone: true, selector: "nj-icon-base", inputs: { isEngieIcon: "isEngieIcon", name: "name", ariaLabel: "ariaLabel", className: "className" }, ngImport: i0, template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n <ng-container *ngIf=\"!isEngieIcon && name\">{{ name }}</ng-container>\n</span>\n", styles: [":host,nj-icon-base{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconBaseComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-base', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<span\n [ngClass]=\"[getIconClass(), className]\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-hidden]=\"ariaLabel ? null : 'true'\"\n>\n <ng-container *ngIf=\"!isEngieIcon && name\">{{ name }}</ng-container>\n</span>\n", styles: [":host,nj-icon-base{display:inline-flex}\n"] }]
}], propDecorators: { isEngieIcon: [{
type: Input
}], name: [{
type: Input
}], ariaLabel: [{
type: Input
}], className: [{
type: Input
}] } });
class IconComponent extends IconBaseComponent {
constructor() {
super(...arguments);
this.ICON_MATERIAL_CLASS = 'nj-icon-material';
/**
* Icon size
*/
this.size = 'md';
}
getClassName() {
const sizeClass = this.size ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.size, 'size-inherit')}` : '';
const variantClass = this.variant ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.variant, 'color-inherit')}` : '';
const className = this.className ? this.className : '';
return `${this.ICON_MATERIAL_CLASS} ${sizeClass} ${variantClass} ${className}`;
}
classModifier(variant, inheritClass) {
switch (variant) {
case 'inherit':
return inheritClass;
default:
return variant;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: IconComponent, isStandalone: true, selector: "nj-icon", inputs: { size: "size", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"false\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n", styles: [":host,nj-icon{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconBaseComponent, selector: "nj-icon-base", inputs: ["isEngieIcon", "name", "ariaLabel", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconBaseComponent], template: "<nj-icon-base\n [name]=\"name\"\n [isEngieIcon]=\"false\"\n [ariaLabel]=\"ariaLabel\"\n [className]=\"getClassName()\"\n>\n</nj-icon-base>\n", styles: [":host,nj-icon{display:inline-flex}\n"] }]
}], propDecorators: { size: [{
type: Input
}], variant: [{
type: Input
}] } });
class AccordionItemComponent {
constructor() {
this.element = inject(ElementRef);
this.accordion = inject(AccordionComponent);
}
get classes() {
const classes = ['nj-accordion-item'];
if (this.scale && this.scale !== 'md') {
classes.push(`nj-accordion-item--${this.scale}`);
}
if (this.hasLeadingToggleIcon) {
classes.push('nj-accordion-item--leading-toggle');
}
return classes;
}
ngAfterContentInit() {
this.templateDirectives.forEach((templateDirective) => {
if (templateDirective?.selector === 'icon') {
this.iconTemplate = templateDirective.templateRef;
}
if (templateDirective?.selector === 'header') {
this.headerTemplate = templateDirective.templateRef;
}
});
}
handleClick(event) {
if (this.name && !this.element.nativeElement.open) {
event.preventDefault();
this.accordion.collapseAllItems(this.name);
this.expand();
}
}
/**
* Expand the accordion item programmatically
*/
expand() {
if (this.element) {
this.element.nativeElement.open = true;
}
}
/**
* Collapse the accordion item programmatically
*/
collapse() {
if (this.element) {
this.element.nativeElement.open = false;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: AccordionItemComponent, isStandalone: true, selector: "details[nj-accordion-item]", inputs: { scale: "scale", hasLeadingToggleIcon: ["hasLeadingToggleIcon", "hasLeadingToggleIcon", booleanAttribute], useAlternativeToggleIcon: ["useAlternativeToggleIcon", "useAlternativeToggleIcon", booleanAttribute], name: "name", label: "label" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "classes" } }, queries: [{ propertyName: "templateDirectives", predicate: EngieTemplateDirective }], ngImport: i0, template: "<summary *ngIf=\"label || headerTemplate\">\n <ng-container *ngIf=\"iconTemplate\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <span class=\"nj-accordion-item__label\">\n <ng-container *ngIf=\"label; else headerTemplate\">\n {{label}}\n </ng-container>\n </span>\n <nj-icon *ngIf=\"!useAlternativeToggleIcon; else alternativeToggleIcon\" name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</summary>\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\n\n<ng-template #alternativeToggleIcon>\n <nj-icon name=\"add\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n <nj-icon name=\"remove\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</ng-template>\n", styles: ["details[nj-accordion-item][open] nj-icon.nj-accordion-item__toggle.nj-accordion-item__toggle--opened{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'details[nj-accordion-item]', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
IconComponent,
NgIf,
NgTemplateOutlet
], host: {
'[class]': 'classes',
'(click)': 'handleClick($event)',
}, template: "<summary *ngIf=\"label || headerTemplate\">\n <ng-container *ngIf=\"iconTemplate\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <span class=\"nj-accordion-item__label\">\n <ng-container *ngIf=\"label; else headerTemplate\">\n {{label}}\n </ng-container>\n </span>\n <nj-icon *ngIf=\"!useAlternativeToggleIcon; else alternativeToggleIcon\" name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</summary>\n<p class=\"nj-accordion-item__content\">\n <ng-content></ng-content>\n</p>\n\n<ng-template #alternativeToggleIcon>\n <nj-icon name=\"add\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n <nj-icon name=\"remove\" class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\" variant=\"inherit\" size=\"inherit\"></nj-icon>\n</ng-template>\n", styles: ["details[nj-accordion-item][open] nj-icon.nj-accordion-item__toggle.nj-accordion-item__toggle--opened{display:inline-flex}\n"] }]
}], propDecorators: { scale: [{
type: Input
}], hasLeadingToggleIcon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], useAlternativeToggleIcon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], name: [{
type: Input
}], label: [{
type: Input
}], templateDirectives: [{
type: ContentChildren,
args: [EngieTemplateDirective]
}] } });
// Fixme: remove normal in next major release
const CSSClassesMap$1 = {
'xsmall': 'xs',
'small': 'sm',
'medium': 'md',
'normal': 'md',
'large': 'lg',
'xlarge': 'xl'
};
const buttonSizeToCSS = (size) => {
return CSSClassesMap$1[size];
};
class SpinnerComponent {
constructor() {
/**
* @ignore
*/
this.spinnerClassName = 'nj-spinner';
/**
* Spinner variant
*/
this.variant = 'normal';
/**
* Spinner size
*/
this.size = 'md';
/**
* Whether the spinner is rendered as a block (<div>) or an inline (<span>) element.
*/
this.isBlock = true;
}
/**
* @ignore
*/
getSpinnerVariantClass() {
if (!this.variant || this.variant === 'normal') {
return '';
}
return `${this.spinnerClassName}--${this.variant}`;
}
/**
* @ignore
*/
getSpinnerSizeClass() {
if (!this.size) {
return '';
}
return `${this.spinnerClassName}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: SpinnerComponent, isStandalone: true, selector: "nj-spinner", inputs: { variant: "variant", size: "size", isLoading: "isLoading", isBlock: "isBlock" }, ngImport: i0, template: "<div *ngIf=\"isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <p *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</p>\n</div>\n\n<span *ngIf=\"!isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <span *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</span>\n</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div *ngIf=\"isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <p *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</p>\n</div>\n\n<span *ngIf=\"!isBlock\" class=\"nj-spinner\" [ngClass]=\"[isLoading ? '' : 'nj-sr-only', getSpinnerVariantClass(), getSpinnerSizeClass()]\" aria-live=\"polite\" aria-atomic=\"true\">\n <span *ngIf=\"isLoading\" class=\"nj-sr-only\">Loading...</span>\n</span>\n", styles: [":host{display:contents}\n"] }]
}], ctorParameters: () => [], propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], isLoading: [{
type: Input
}], isBlock: [{
type: Input
}] } });
class ButtonComponent {
constructor() {
/**
* @ignore
*/
this.buttonClassName = 'nj-btn';
/**
* Type of the button. Some values may be submit, reset...
*/
this.type = 'button';
/**
* Button emphasis
*/
this.emphasis = 'bold';
/**
* Button variant theme
*/
this.variant = 'primary';
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
/**
* @ignore
*/
getButtonEmphasisClass() {
if (!this.emphasis || this.emphasis === 'bold') {
return '';
}
return `${this.buttonClassName}--${this.emphasis}`;
}
/**
* @ignore
*/
getButtonVariantClass() {
if (!this.variant || this.variant === 'primary') {
return '';
}
return `${this.buttonClassName}--${this.variant}`;
}
getButtonSizeClass() {
if (!this.size || this.size === 'medium' || this.size === 'normal') {
return '';
}
return `${this.buttonClassName}--${buttonSizeToCSS(this.size)}`;
}
/**
* @ignore
*/
getButtonIsLoadingClass() {
return this.isLoading ? `${this.buttonClassName}--is-loading` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ButtonComponent, isStandalone: true, selector: "nj-button", inputs: { type: "type", isDisabled: "isDisabled", isLoading: "isLoading", tabIndex: "tabIndex", emphasis: "emphasis", variant: "variant", size: "size", hasCustomIcon: "hasCustomIcon", icon: "icon", ariaLabel: "ariaLabel" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "nj-spinner", inputs: ["variant", "size", "isLoading", "isBlock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, CommonModule, SpinnerComponent], template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n" }]
}], propDecorators: { type: [{
type: Input
}], isDisabled: [{
type: Input
}], isLoading: [{
type: Input
}], tabIndex: [{
type: Input
}], emphasis: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], ariaLabel: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class AccordionComponent {
get classes() {
const classes = ['nj-accordion'];
if (this.noBorder) {
classes.push('nj-accordion--no-border');
}
if (this.separated) {
classes.push('nj-accordion--separated');
}
return classes;
}
/**
* Expand all children items programmatically
*/
expandAllItems() {
const openedGroup = new Set();
this.accordions.forEach((accordion) => {
// Firefox doesn't currently support grouping accordion items with `name` property.
// So we replicate the behavior here to have it on all browsers.
//
// As explained in the MDN documentation, when the `name` property is set, only the first details
// element with the `open` property should be opened.
if (!accordion.name || !openedGroup.has(accordion.name)) {
accordion.expand();
}
else {
accordion.collapse();
}
if (accordion.name) {
openedGroup.add(accordion.name);
}
});
}
/**
* Collapse all children items programmatically
*/
collapseAllItems(name) {
this.accordions.forEach((accordion) => {
if (name && accordion.name !== name) {
return;
}
accordion.collapse();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", 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: "19.2.2", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
AccordionItemComponent,
IconComponent,
EngieTemplateDirective,
AccordionActionsComponent,
ButtonComponent,
AccordionActionDirective
], host: {
'[class]': 'classes'
}, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { noBorder: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], separated: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], accordions: [{
type: ContentChildren,
args: [AccordionItemComponent]
}] } });
const selectAnimations = {
transformList: trigger('transformList', [
state('void', style({
transform: 'scaleY(0.8)',
opacity: 0,
})),
state('*', style({
opacity: 1,
transform: 'scaleY(1)',
})),
transition('void => *', animate(`120ms ${njSemanticMotionEasingLinearOutSlowIn}`)),
transition('* => void', animate(`100ms 25ms ${njSemanticMotionEasingLinearOutSlowIn}`, style({ opacity: 0 }))),
]),
};
// Ignore https://angular.io/guide/angular-compiler-options#strictmetadataemit
// @dynamic
class Utils {
static { this.MAX_UID = 1000000; }
static isUndefinedOrNull(value) {
return typeof value === 'undefined' || value === null;
}
static normalizeString(text) {
return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
static normalizeAndSearchInText(text, search) {
if (Utils.isUndefinedOrNull(text) || Utils.isUndefinedOrNull(search)) {
return false;
}
const normalizedText = Utils.normalizeString(text);
let normalizedSearch = Utils.normalizeString(search)?.replace(/\(|\)|\\/gi, '');
const regExp = new RegExp(normalizedSearch, 'gi');
return normalizedText.search(regExp) !== -1;
}
static getUID(prefix) {
do {
// eslint-disable-next-line no-bitwise
prefix += ~~(Math.random() * Utils.MAX_UID); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix));
return prefix;
}
}
class FormFieldDirective {
constructor(el) {
this.el = el;
this.class = 'nj-form-item__field';
this.setPlaceholder();
}
setPlaceholder() {
if (this.tagName.toLowerCase() === 'select') {
return;
}
const placeholder = this.el?.nativeElement?.placeholder;
this.el.nativeElement.placeholder = Utils.isUndefinedOrNull(placeholder) || placeholder?.trim() === ''
? ' '
: placeholder;
}
get type() {
return this.el?.nativeElement?.type;
}
set type(value) {
if (this.el?.nativeElement) {
this.el.nativeElement.type = value;
}
}
get tagName() {
return this.el?.nativeElement?.tagName;
}
get element() {
return this.el?.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", 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: "19.2.2", 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 IconButtonComponent {
constructor() {
this.ICON_BUTTON_CLASS_NAME = 'nj-icon-btn';
/**
* Type of the button. Some values may be `button`, `submit`, `reset`
*/
this.type = 'button';
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
/**
* @ignore
*/
getIconButtonVariantClass() {
if (!this.variant || this.variant === 'primary') {
return '';
}
return `${this.ICON_BUTTON_CLASS_NAME}--${this.variant}`;
}
/**
* @ignore
*/
getIconButtonSizeClass() {
if (!this.size || this.size === 'xs') {
return '';
}
return `${this.ICON_BUTTON_CLASS_NAME}--${this.size}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: IconButtonComponent, isStandalone: true, selector: "nj-icon-button", inputs: { type: "type", ariaPressed: "ariaPressed", ariaDescribedby: "ariaDescribedby", isDisabled: "isDisabled", tabIndex: "tabIndex", variant: "variant", size: "size", hasCustomIcon: "hasCustomIcon", icon: "icon", label: "label", additionalClass: "additionalClass" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"nj-icon-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[\n getIconButtonVariantClass(),\n getIconButtonSizeClass(),\n additionalClass ?? ''\n ]\"\n [title]=\"label\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-pressed]=\"ariaPressed\"\n>\n <span class=\"nj-sr-only\">{{label}}</span>\n <nj-icon class=\"nj-icon-btn__icon\" *ngIf=\"!hasCustomIcon && icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-icon-btn__icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: IconButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<button class=\"nj-icon-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[\n getIconButtonVariantClass(),\n getIconButtonSizeClass(),\n additionalClass ?? ''\n ]\"\n [title]=\"label\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-pressed]=\"ariaPressed\"\n>\n <span class=\"nj-sr-only\">{{label}}</span>\n <nj-icon class=\"nj-icon-btn__icon\" *ngIf=\"!hasCustomIcon && icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <span *ngIf=\"hasCustomIcon\" class=\"nj-icon-btn__icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex}\n"] }]
}], ctorParameters: () => [], propDecorators: { type: [{
type: Input
}], ariaPressed: [{
type: Input
}], ariaDescribedby: [{
type: Input
}], isDisabled: [{
type: Input
}], tabIndex: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], label: [{
type: Input
}], additionalClass: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class FormItemComponent {
constructor() {
this.formItemClassName = 'nj-form-item';
/**
* @ignore
*/
this.isVisible = false;
/**
* @ignore
*/
this.passwordNotice = '';
/**
* @ignore
*/
this.passwordButtonLabel = '';
/**
* @ignore
*/
this.isMultiline = false;
/**
* Form item size
*/
this.size = 'medium';
/**
* Whether the form-item label is floating
*/
this.isFloatingLabel = true;
/**
* Whether the form-item's icon (or custom icon) is clickable
*/
this.isIconClickable = true;
/**
* Additional form-item css classes
*/
this.additionalClass = '';
/**
* Outputs icon click
*/
this.iconClick = new EventEmitter();
/**
* Outputs icon keydown
*/
this.iconKeydown = new EventEmitter();
/**
* Outputs icon click
*/
this.wrapperClick = new EventEmitter();
}
/**
* Whether form-item is in success state
*/
set hasSuccess(value) {
this._hasSuccess = value;
this.setAriaAttributes();
}
get hasSuccess() {
return this._hasSuccess;
}
/**
* Whether form-item is in error state
*/
set hasError(value) {
this._hasError = value;
this.setAriaAttributes();
}
get hasError() {
return this._hasError;
}
/**
* Whether the form-item has a hint substring
*/
set hasHint(value) {
this._hasHint = value;
this.setAriaAttributes();
}
get hasHint() {
return this._hasHint;
}
ngAfterContentInit() {
const tagName = this.formField?.tagName?.toLowerCase();
this.isPassword = this.formField?.type === 'password';
this.isMultiline = tagName === 'textarea';
this.passwordButtonLabel = this.passwordButtonLabelShow;
this.setAriaAttributes();
if (this.isRequired) {
this.formField.element.setAttribute('required', 'required');
}
}
/**
* @ignore
*/
iconClickHandler(event) {
if (!this.isIconClickable) {
return;
}
this.iconClick.emit(event);
}
/**
* @ignore
*/
iconKeydownHandler(event) {
event?.preventDefault();
if (!this.isIconClickable) {
return;
}
this.iconKeydown.emit(event);
}
/**
* @ignore
*/
toggleVisibility() {
if (this.isVisible) {
this.formField.type = 'password';
this.passwordNotice = this.passwordNoticeIsHidden;
this.passwordButtonLabel = this.passwordButtonLabelShow;
}
else {
this.formField.type = 'text';
this.passwordNotice = this.passwordNoticeIsVisible;
this.passwordButtonLabel = this.passwordButtonLabelHide;
}
this.isVisible = !this.isVisible;
}
/**
* @ignore
*/
getSubscriptId() {
return `${this.inputId}-subscript`;
}
/**
* @ignore
*/
setAriaAttributes() {
if (this.formField?.element) {
if (this.hasError) {
this.formField.element.setAttribute('aria-invalid', 'true');
}
if (this.hasError || this.hasSuccess || this.hasHint) {
this.formField.element.setAttribute('aria-describedby', this.getSubscriptId());
}
}
}
/**
* @ignore
*/
isCustomSelect() {
const type = this.formField?.type;
return this.isSelect && type === 'text';
}
/**
* @ignore
*/
getFormItemSizeClass() {
let sizeModifier;
switch (this.size) {
case 'small':
sizeModifier = 'sm';
break;
case 'large':
sizeModifier = 'lg';
break;
case 'xlarge':
sizeModifier = 'xl';
break;
default:
break;
}
return sizeModifier ? `${this.formItemClassName}--${sizeModifier}` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: FormItemComponent, isStandalone: true, selector: "nj-form-item", inputs: { inputId: "inputId", size: "size", isFloatingLabel: "isFloatingLabel", isDisabled: "isDisabled", isRequired: "isRequired", hasSuccess: "hasSuccess", hasError: "hasError", hasHint: "hasHint", hasCustomIcon: "hasCustomIcon", isIconClickable: "isIconClickable", iconName: "iconName", additionalClass: "additionalClass", passwordButtonLabelShow: "passwordButtonLabelShow", passwordButtonLabelHide: "passwordButtonLabelHide", passwordNoticeIsVisible: "passwordNoticeIsVisible", passwordNoticeIsHidden: "passwordNoticeIsHidden", isSelect: "isSelect" }, outputs: { iconClick: "iconClick", iconKeydown: "iconKeydown", wrapperClick: "wrapperClick" }, queries: [{ propertyName: "formField", first: true, predicate: FormFieldDirective, descendants: true }], ngImport: i0, template: "<div class=\"nj-form-item\"\n [class.nj-form-item--static]=\"!isFloatingLabel\"\n [class.nj-form-item--disabled]=\"isDisabled\"\n [class.nj-form-item--error]=\"hasError\"\n [class.nj-form-item--success]=\"hasSuccess\"\n [class.nj-form-item--password]=\"isPassword\"\n [class.nj-form-item--select]=\"isSelect\"\n [class.nj-form-item--visible]=\"isVisible\"\n [class.nj-form-item--textarea]=\"isMultiline\"\n [ngClass]=\"[getFormItemSizeClass(), additionalClass]\">\n <div class=\"nj-form-item__field-wrapper\" (click)=\"wrapperClick.emit($event)\">\n <ng-content select=\"[njFormField]\"></ng-content>\n <label class=\"nj-form-item__label\" [attr.for]=\"inputId\" [attr.aria-hidden]=\"isCustomSelect() ? 'true' : null\">\n <ng-content select=\"[njFormLabel]\"></ng-content>\n <span *ngIf=\"isRequired\" class=\"nj-form-item__required-asterisk\">*</span>\n </label>\n <nj-icon-button\n *ngIf=\"isPassword\"\n size=\"sm\"\n variant=\"tertiary\"\n [label]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [ariaPressed]=\"isVisible\"\n additionalClass=\"nj-form-item__password-button\"\n >\n </nj-icon-button>\n <nj-icon class=\"nj-form-item__icon\"\n *ngIf=\"!isPassword && !isMultiline && !hasCustomIcon && iconName\"\n [name]=\"iconName\"\n variant=\"inherit\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\">\n </nj-icon>\n <div class=\"nj-form-item__icon\" *ngIf=\"!isPassword && !isMultiline && hasCustomIcon\" [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\" (keydown)=\"iconKeydownHandler($event)\">\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n <p *ngIf=\"isPassword\" class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n </div>\n <div class=\"nj-form-item__subscript\" *ngIf=\"hasError || hasSuccess || hasHint\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" class=\"nj-form-item__subscript-icon\" name=\"warning\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" class=\"nj-form-item__subscript-icon\" name=\"check\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FormItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, IconButtonComponent, FormFieldDirective, CommonModule], template: "<div class=\"nj-form-item\"\n [class.nj-form-item--static]=\"!isFloatingLabel\"\n [class.nj-form-item--disabled]=\"isDisabled\"\n [class.nj-form-item--error]=\"hasError\"\n [class.nj-form-item--success]=\"hasSuccess\"\n [class.nj-form-item--password]=\"isPassword\"\n [class.nj-form-item--select]=\"isSelect\"\n [class.nj-form-item--visible]=\"isVisible\"\n [class.nj-form-item--textarea]=\"isMultiline\"\n [ngClass]=\"[getFormItemSizeClass(), additionalClass]\">\n <div class=\"nj-form-item__field-wrapper\" (click)=\"wrapperClick.emit($event)\">\n <ng-content select=\"[njFormField]\"></ng-content>\n <label class=\"nj-form-item__label\" [attr.for]=\"inputId\" [attr.aria-hidden]=\"isCustomSelect() ? 'true' : null\">\n <ng-content select=\"[njFormLabel]\"></ng-content>\n <span *ngIf=\"isRequired\" class=\"nj-form-item__required-asterisk\">*</span>\n </label>\n <nj-icon-button\n *ngIf=\"isPassword\"\n size=\"sm\"\n variant=\"tertiary\"\n [label]=\"passwordButtonLabel\"\n [icon]=\"iconName || 'visibility'\"\n (click)=\"toggleVisibility()\"\n [ariaPressed]=\"isVisible\"\n additionalClass=\"nj-form-item__password-button\"\n >\n </nj-icon-button>\n <nj-icon class=\"nj-form-item__icon\"\n *ngIf=\"!isPassword && !isMultiline && !hasCustomIcon && iconName\"\n [name]=\"iconName\"\n variant=\"inherit\"\n (click)=\"iconClickHandler($event)\"\n (keydown)=\"iconKeydownHandler($event)\">\n </nj-icon>\n <div class=\"nj-form-item__icon\" *ngIf=\"!isPassword && !isMultiline && hasCustomIcon\" [attr.tabindex]=\"isIconClickable ? 0 : null\"\n (click)=\"iconClickHandler($event)\" (keydown)=\"iconKeydownHandler($event)\">\n <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n </div>\n <p *ngIf=\"isPassword\" class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n </div>\n <div class=\"nj-form-item__subscript\" *ngIf=\"hasError || hasSuccess || hasHint\" [attr.id]=\"getSubscriptId()\">\n <nj-icon *ngIf=\"hasError\" class=\"nj-form-item__subscript-icon\" name=\"warning\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <nj-icon *ngIf=\"hasSuccess && !hasError\" class=\"nj-form-item__subscript-icon\" name=\"check\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-content select=\"[njFormSubscript]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
}], propDecorators: { inputId: [{
type: Input
}], size: [{
type: Input
}], isFloatingLabel: [{
type: Input
}], isDisabled: [{
type: Input
}], isRequired: [{
type: Input
}], hasSuccess: [{
type: Input
}], hasError: [{