@engie-group/fluid-design-system-angular/lib/fesm2022/engie-group-fluid-design-system-angular.mjs.map

Fluid Design System Angular

{"version":3,"file":"engie-group-fluid-design-system-angular.mjs","sources":["../../src/models/theme-variant.model.ts","../../src/directives/custom-icon.directive.ts","../../src/directives/engie-template.directive.ts","../../src/components/accordion-actions/accordion-actions.component.ts","../../src/components/accordion-actions/accordion-actions.component.html","../../src/components/accordion-actions/directive/accordion-action.directive.ts","../../src/components/icon-base/icon-base.component.ts","../../src/components/icon-base/icon-base.component.html","../../src/components/icon/icon.component.ts","../../src/components/icon/icon.component.html","../../src/components/accordion-item/accordion-item.component.ts","../../src/components/accordion-item/accordion-item.component.html","../../src/components/button/button.model.ts","../../src/components/spinner/spinner.component.ts","../../src/components/spinner/spinner.component.html","../../src/components/button/button.component.ts","../../src/components/button/button.component.html","../../src/components/accordion/accordion.component.ts","../../src/components/accordion/accordion.component.html","../../src/shared/animations.ts","../../src/utils/utils.util.ts","../../src/components/form-field/form-field.directive.ts","../../src/components/icon-button/icon-button.component.ts","../../src/components/icon-button/icon-button.component.html","../../src/components/form-item/form-item.component.ts","../../src/components/form-item/form-item.component.html","../../src/components/highlight/highlight.directive.ts","../../src/components/list-group/list-group.component.ts","../../src/components/list-group/list-group.component.html","../../src/components/checkbox/checkbox.component.ts","../../src/components/checkbox/checkbox.component.html","../../src/components/list-item/list-item.component.ts","../../src/components/list-item/list-item.component.html","../../src/components/autocomplete/autocomplete.component.ts","../../src/components/autocomplete/autocomplete.component.html","../../src/components/badge/badge.component.ts","../../src/components/badge/badge.component.html","../../src/components/tooltip/tooltip.animations.ts","../../src/components/tooltip/tooltip.component.ts","../../src/components/tooltip/tooltip.component.html","../../src/components/tooltip/directives/tooltip.directive.ts","../../src/components/avatar/avatar.component.ts","../../src/components/avatar/avatar.component.html","../../src/components/avatar/avatar-picture.directive.ts","../../src/components/avatar-list/avatar-list.component.ts","../../src/components/avatar-list/avatar-list.component.html","../../src/components/link/link.component.ts","../../src/components/link/link.component.html","../../src/components/breadcrumb-item/breadcrumb-item.component.ts","../../src/components/breadcrumb-item/breadcrumb-item.component.html","../../src/components/breadcrumb/breadcrumb.component.ts","../../src/components/breadcrumb/breadcrumb.component.html","../../src/components/bullet/bullet.component.ts","../../src/components/bullet/bullet.component.html","../../src/components/card/card.component.ts","../../src/components/card/card.component.html","../../src/components/card/card-image.directive.ts","../../src/components/custom-label/custom-label.directive.ts","../../src/components/icon/icon.model.ts","../../src/components/icon-engie/icon-engie.component.ts","../../src/components/icon-engie/icon-engie.component.html","../../src/components/icon-engie/icon-engie.model.ts","../../src/components/status-indicator/status-indicator.component.ts","../../src/components/status-indicator/status-indicator.component.html","../../src/components/inline-message/inline-message.component.ts","../../src/components/inline-message/inline-message.component.html","../../src/components/modal/modal.animations.ts","../../src/components/modal/modal.component.ts","../../src/components/modal/modal.component.html","../../src/components/tag/tag.component.ts","../../src/components/tag/tag.component.html","../../src/components/multi-select/multi-select.component.ts","../../src/components/multi-select/multi-select.component.html","../../src/components/pagination/pagination.component.ts","../../src/components/pagination/pagination.component.html","../../src/components/progress/progress.animation.ts","../../src/components/progress/progress.component.ts","../../src/components/progress/progress.component.html","../../src/components/radio/radio.component.ts","../../src/components/radio/radio.component.html","../../src/components/radio-group/radio-group.component.ts","../../src/components/radio-group/radio-group.component.html","../../src/models/size-variant.model.ts","../../src/components/search/search.component.ts","../../src/components/search/search.component.html","../../src/components/search/directives/search-button.directive.ts","../../src/components/segmented-control-button/segmented-control-button.component.ts","../../src/components/segmented-control-button/segmented-control-button.component.html","../../src/components/segmented-control/segmented-control.component.ts","../../src/components/segmented-control/segmented-control.component.html","../../src/components/select/select.component.ts","../../src/components/select/select.component.html","../../src/components/sidebar/directives/sidebar-footer.directive.ts","../../src/components/sidebar/directives/sidebar-item.directive.ts","../../src/components/sidebar/directives/sidebar-logo.directive.ts","../../src/components/sidebar/sidebar.component.ts","../../src/components/sidebar/sidebar.component.html","../../src/components/sidebar/directives/sidebar-content.directive.ts","../../src/components/sidepanel/directives/sidepanel-footer.directive.ts","../../src/components/sidepanel/directives/sidepanel-header.directive.ts","../../src/components/sidepanel/sidepanel.component.ts","../../src/components/sidepanel/sidepanel.component.html","../../src/components/sidepanel-header/directives/sidepanel-header-action.directive.ts","../../src/components/sidepanel-header/sidepanel-header.component.ts","../../src/components/sidepanel-header/sidepanel-header.component.html","../../src/components/sidepanel-layout/directives/sidepanel-layout-panel.directive.ts","../../src/components/sidepanel-layout/sidepanel-layout.animations.ts","../../src/components/sidepanel-layout/sidepanel-layout.component.ts","../../src/components/sidepanel-layout/sidepanel-layout.component.html","../../src/components/skeleton/skeleton-container.component.ts","../../src/components/skeleton/skeleton-container.component.html","../../src/components/skeleton/skeleton-rectangle.component.ts","../../src/components/skeleton/skeleton-rectangle.component.html","../../src/components/skeleton/skeleton-circle.component.ts","../../src/components/skeleton/skeleton-circle.component.html","../../src/components/skeleton/skeleton-area.component.ts","../../src/components/skeleton/skeleton-area.component.html","../../src/components/slider/slider.component.ts","../../src/components/slider/slider.component.html","../../src/components/switch/switch.component.ts","../../src/components/switch/switch.component.html","../../src/components/tab/tab.component.ts","../../src/components/tab/tab.component.html","../../src/components/tabs/tabs.component.ts","../../src/components/tabs/tabs.component.html","../../src/components/toast/toast.component.ts","../../src/components/toast/toast.component.html","../../src/components/toast/toast-container.component.ts","../../src/components/toast/toast-container.component.html","../../src/components/toast/toast.service.ts","../../src/components/toggle/toggle.component.ts","../../src/components/toggle/toggle.component.html","../../src/components/toggle/toggle-icon.directive.ts","../../src/components/tooltip/tooltip.model.ts","../../src/public-api.ts","../../src/engie-group-fluid-design-system-angular.ts"],"sourcesContent":["export const ThemeComponentsVariantsArray = ['grey', 'brand', 'teal', 'pink', 'orange', 'red', 'green', 'ultramarine', 'yellow', 'purple', 'blue', 'lime'];\n\nexport declare type ThemeComponentsVariants = typeof ThemeComponentsVariantsArray[number];\n\nexport type EmphasisVariants = 'bold' | 'subtle' | 'minimal';\n\nexport type SemanticVariants = 'neutral' | 'danger' | 'warning' | 'success' | 'information' | 'discovery' | 'planet';\n","import {Directive, inject, TemplateRef} from '@angular/core';\n\n@Directive({\n  selector: '[njCustomIcon]',\n  standalone: true\n})\nexport class CustomIconDirective {\n  templateRef = inject(TemplateRef);\n\n}\n","import {Directive, inject, Input, TemplateRef} from '@angular/core';\n\nexport type GenericElement =\n  | 'action'\n  | 'header'\n  | 'icon';\n\n@Directive({\n  selector: '[njTemplate]',\n  standalone: true\n})\nexport class EngieTemplateDirective {\n  templateRef = inject<TemplateRef<unknown>>(TemplateRef);\n\n  @Input('njTemplate') selector?: GenericElement;\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'nj-accordion-actions',\n  templateUrl: './accordion-actions.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  host: {\n    class: 'nj-accordion__actions'\n  }\n})\nexport class AccordionActionsComponent {}\n","<ng-content></ng-content>\n","import {Directive, inject, Input} from '@angular/core';\nimport {AccordionComponent} from '../../accordion/accordion.component';\n\n@Directive({\n  selector: '[njAccordionAction]',\n  standalone: true,\n  host: {\n    'class': 'njAccordionAction',\n    '[attr.data-accordion-expand]': \"type === 'expand'\",\n    '[attr.data-accordion-collapse]': \"type === 'collapse'\",\n    '(click)': 'handleClicked()'\n  }\n})\nexport class AccordionActionDirective {\n  @Input('njAccordionAction') type?: 'expand' | 'collapse';\n\n  private accordion? = inject(AccordionComponent);\n\n  protected handleClicked() {\n    if (this.type === 'expand') {\n    this.accordion?.expandAllItems();\n    }\n    if(this.type === 'collapse') {\n      this.accordion?.collapseAllItems();\n    }\n  }\n}\n","import {CommonModule} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';\n\n@Component({\n  selector: 'nj-icon-base',\n  templateUrl: './icon-base.component.html',\n  styleUrls: ['./icon-base.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [CommonModule]\n})\nexport class IconBaseComponent {\n\n  private MATERIAL_ICON_CLASS = 'material-icons';\n  protected ICON_CLASS = 'nj-icon';\n\n  /**\n   * @ignore\n   */\n  @Input() isEngieIcon = false; //Fixme: Should be inferred by dependency tree. Not being set by input\n\n  /**\n   * Icon name\n   */\n  @Input() name: string;\n\n  /**\n   * Text alternative for assistive technologies.\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n   */\n  @Input() ariaLabel: string;\n\n  /**\n   * Icon additional class\n   */\n  @Input() className: string;\n\n  protected getIconClass(): string {\n    if (this.isEngieIcon && !this.name) {\n      return '';\n    }\n    return this.isEngieIcon ? `${this.ICON_CLASS} ${this.ICON_CLASS}-${this.name}` : this.MATERIAL_ICON_CLASS;\n  }\n}\n","<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","import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';\nimport {IconBaseComponent} from '../icon-base/icon-base.component';\nimport {IconColor, IconSize} from './icon.model';\n\n@Component({\n  selector: 'nj-icon',\n  templateUrl: './icon.component.html',\n  styleUrls: ['./icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [IconBaseComponent]\n})\nexport class IconComponent extends IconBaseComponent {\n\n  private ICON_MATERIAL_CLASS = 'nj-icon-material';\n\n  /**\n   * Icon size\n   */\n  @Input() size: IconSize = 'md';\n\n  /**\n   * Icon variant theme\n   */\n  @Input() variant: IconColor;\n\n  protected getClassName(): string {\n    const sizeClass = this.size ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.size, 'size-inherit')}` : '';\n    const variantClass = this.variant ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.variant, 'color-inherit')}` : '';\n    const className = this.className ? this.className : '';\n    return `${this.ICON_MATERIAL_CLASS} ${sizeClass} ${variantClass} ${className}`;\n  }\n\n  private classModifier<T extends string, U>(\n    variant: T,\n    inheritClass: U\n  ): Exclude<T, 'inherit'> | U {\n    switch (variant) {\n      case 'inherit':\n        return inheritClass;\n      default:\n        return variant as Exclude<T, 'inherit'>;\n    }\n  }\n}\n","<nj-icon-base\n  [name]=\"name\"\n  [isEngieIcon]=\"false\"\n  [ariaLabel]=\"ariaLabel\"\n  [className]=\"getClassName()\"\n>\n</nj-icon-base>\n","import {NgIf, NgIfContext, NgTemplateOutlet} from '@angular/common';\nimport {\n  AfterContentInit,\n  booleanAttribute,\n  Component,\n  ContentChildren,\n  ElementRef,\n  inject,\n  Input,\n  QueryList,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\nimport {EngieTemplateDirective} from '../../directives/engie-template.directive';\nimport {TSizeVariants} from '../../models/size-variant.model';\nimport {AccordionComponent} from '../accordion/accordion.component';\nimport {IconComponent} from '../icon/icon.component';\n\n@Component({\n  selector: 'details[nj-accordion-item]',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    IconComponent,\n    NgIf,\n    NgTemplateOutlet\n  ],\n  host: {\n    '[class]': 'classes',\n    '(click)': 'handleClick($event)',\n  }\n})\nexport class AccordionItemComponent implements AfterContentInit {\n\n  private element: ElementRef<HTMLDetailsElement> = inject(ElementRef);\n\n  private accordion = inject(AccordionComponent);\n\n  protected iconTemplate?: TemplateRef<unknown>;\n  protected headerTemplate?: TemplateRef<NgIfContext<string>>;\n\n  /**\n   * Size of the accordion item\n   */\n  @Input() scale?: Extract<TSizeVariants, 'md' | 'lg'>;\n\n  /**\n   * Whether the toggle icon is place at the start of the item or not.\n   */\n  @Input({transform: booleanAttribute}) hasLeadingToggleIcon?: boolean;\n\n  /**\n   * Whether the toggle use the alternative icons (plus/minus) or the default ones (arrow).\n   */\n  @Input({transform: booleanAttribute}) useAlternativeToggleIcon?: boolean;\n\n  /**\n   * This attribute enables multiple <details> elements to be connected, with only one open at a time.\n   */\n  @Input() name?: string;\n\n  /**\n   * Item header\n   */\n  @Input() label?: string;\n\n  @ContentChildren(EngieTemplateDirective) protected templateDirectives?: QueryList<EngieTemplateDirective>;\n\n  protected get classes() {\n    const classes = ['nj-accordion-item'];\n\n    if (this.scale && this.scale !== 'md') {\n      classes.push(`nj-accordion-item--${this.scale}`);\n    }\n\n    if (this.hasLeadingToggleIcon) {\n      classes.push('nj-accordion-item--leading-toggle');\n    }\n    return classes;\n  }\n\n  ngAfterContentInit() {\n    this.templateDirectives.forEach((templateDirective) => {\n      if (templateDirective?.selector === 'icon') {\n        this.iconTemplate = templateDirective.templateRef;\n      }\n\n      if (templateDirective?.selector === 'header') {\n        this.headerTemplate = templateDirective.templateRef as TemplateRef<NgIfContext<string>>;\n      }\n    });\n  }\n\n  protected handleClick(event: MouseEvent) {\n    if (this.name && !this.element.nativeElement.open) {\n      event.preventDefault();\n      this.accordion.collapseAllItems(this.name);\n      this.expand();\n    }\n  }\n\n  /**\n   * Expand the accordion item programmatically\n   */\n  expand() {\n    if (this.element) {\n      this.element.nativeElement.open = true;\n    }\n  }\n\n  /**\n   * Collapse the accordion item programmatically\n   */\n  collapse() {\n    if (this.element) {\n      this.element.nativeElement.open = false;\n    }\n  }\n}\n","<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","// Fixme: remove normal in next major release\n\nexport type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'normal';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'inverse';\n\nexport type ButtonEmphasis = 'bold' | 'subtle' | 'minimal';\n\nconst CSSClassesMap: Record<ButtonSize, string> = {\n  'xsmall': 'xs',\n  'small': 'sm',\n  'medium': 'md',\n  'normal': 'md',\n  'large': 'lg',\n  'xlarge': 'xl'\n};\nexport const buttonSizeToCSS = (size: ButtonSize) => {\n  return CSSClassesMap[size];\n};\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { SpinnerSize, SpinnerVariant } from './spinner.model';\n\n@Component({\n  selector: 'nj-spinner',\n  templateUrl: './spinner.component.html',\n  styleUrls: ['./spinner.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [CommonModule]\n})\nexport class SpinnerComponent {\n  /**\n   * @ignore\n   */\n  private spinnerClassName = 'nj-spinner';\n\n  /**\n   * Spinner variant\n   */\n  @Input() variant: SpinnerVariant = 'normal';\n\n  /**\n   * Spinner size\n   */\n  @Input() size: SpinnerSize = 'md';\n\n  /**\n   * Whether to render the content of the spinner,\n   * the wrapper of the component beeing always rendered\n   * to make the live region work properly.\n   */\n  @Input() isLoading: boolean;\n\n  /**\n   * Whether the spinner is rendered as a block (<div>) or an inline (<span>) element.\n   */\n  @Input() isBlock?: boolean = true;\n\n  constructor() {}\n\n  /**\n   * @ignore\n   */\n  getSpinnerVariantClass(): string {\n    if (!this.variant || this.variant === 'normal') {\n      return '';\n    }\n    return `${this.spinnerClassName}--${this.variant}`;\n  }\n\n  /**\n   * @ignore\n   */\n  getSpinnerSizeClass(): string {\n    if (!this.size) {\n      return '';\n    }\n    return `${this.spinnerClassName}--${this.size}`;\n  }\n}\n","<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","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { IconComponent } from '../icon/icon.component';\nimport { ButtonEmphasis, ButtonSize, buttonSizeToCSS, ButtonVariant } from './button.model';\nimport { SpinnerComponent } from '../spinner/spinner.component';\n\n@Component({\n  selector: 'nj-button',\n  templateUrl: './button.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [IconComponent, CommonModule, SpinnerComponent]\n})\nexport class ButtonComponent {\n  /**\n   * @ignore\n   */\n  private readonly buttonClassName = 'nj-btn';\n\n  /**\n   * Type of the button. Some values may be submit, reset...\n   */\n  @Input() type = 'button';\n\n  /**\n   * Whether button is disabled or not\n   */\n  @Input() isDisabled?: boolean;\n\n  /**\n   * Whether button is loading or not\n   */\n  @Input() isLoading?: boolean;\n\n  /**\n   * Tab index, allows you to customize keyboard navigation\n   */\n  @Input() tabIndex?: number;\n\n  /**\n   * Button emphasis\n   */\n  @Input() emphasis: ButtonEmphasis = 'bold';\n\n  /**\n   * Button variant theme\n   */\n  @Input() variant: ButtonVariant = 'primary';\n\n  /**\n   * Button size\n   */\n  @Input() size?: ButtonSize;\n\n  /**\n   * Whether button has custom icon\n   */\n  @Input() hasCustomIcon = false;\n\n  /**\n   * Button material icon\n   */\n  @Input() icon?: string;\n\n  /**\n   * Text alternative for assistive technologies\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n   */\n  @Input() ariaLabel?: string;\n\n  /**\n   * Button click output. Emits a MouseEvent\n   */\n  @Output() buttonClick = new EventEmitter<MouseEvent>();\n\n  /**\n   * @ignore\n   */\n  getButtonEmphasisClass(): string {\n    if (!this.emphasis || this.emphasis === 'bold') {\n      return '';\n    }\n    return `${this.buttonClassName}--${this.emphasis}`;\n  }\n\n  /**\n   * @ignore\n   */\n  getButtonVariantClass(): string {\n    if (!this.variant || this.variant === 'primary') {\n      return '';\n    }\n    return `${this.buttonClassName}--${this.variant}`;\n  }\n\n  protected getButtonSizeClass(): string {\n    if (!this.size || this.size === 'medium' || this.size === 'normal') {\n      return '';\n    }\n    return `${this.buttonClassName}--${buttonSizeToCSS(this.size)}`;\n  }\n\n  /**\n   * @ignore\n   */\n  getButtonIsLoadingClass(): string {\n    return this.isLoading ? `${this.buttonClassName}--is-loading` : '';\n  }\n}\n","<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","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  Input,\n  QueryList,\n  ViewEncapsulation\n} from '@angular/core';\nimport { EngieTemplateDirective } from '../../directives/engie-template.directive';\nimport { AccordionActionsComponent } from '../accordion-actions/accordion-actions.component';\nimport { AccordionActionDirective } from '../accordion-actions/directive/accordion-action.directive';\nimport { AccordionItemComponent } from '../accordion-item/accordion-item.component';\nimport { ButtonComponent } from '../button/button.component';\nimport { IconComponent } from '../icon/icon.component';\n\n@Component({\n  selector: 'nj-accordion',\n  templateUrl: './accordion.component.html',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AccordionItemComponent,\n    IconComponent,\n    EngieTemplateDirective,\n    AccordionActionsComponent,\n    ButtonComponent,\n    AccordionActionDirective\n  ],\n  host: {\n    '[class]': 'classes'\n  }\n})\nexport class AccordionComponent {\n  @Input({ transform: booleanAttribute }) noBorder: boolean;\n  @Input({ transform: booleanAttribute }) separated: boolean;\n\n  @ContentChildren(AccordionItemComponent) private accordions?: QueryList<AccordionItemComponent>;\n\n  protected get classes() {\n    const classes = ['nj-accordion'];\n\n    if (this.noBorder) {\n      classes.push('nj-accordion--no-border');\n    }\n\n    if (this.separated) {\n      classes.push('nj-accordion--separated');\n    }\n\n    return classes;\n  }\n\n  /**\n   * Expand all children items programmatically\n   */\n  expandAllItems() {\n    const openedGroup = new Set<string>();\n    this.accordions.forEach((accordion) => {\n      // Firefox doesn't currently support grouping accordion items with `name` property.\n      // So we replicate the behavior here to have it on all browsers.\n      //\n      // As explained in the MDN documentation, when the `name` property is set, only the first details\n      // element with the `open` property should be opened.\n      if (!accordion.name || !openedGroup.has(accordion.name)) {\n        accordion.expand();\n      } else {\n        accordion.collapse();\n      }\n      if (accordion.name) {\n        openedGroup.add(accordion.name);\n      }\n    });\n  }\n\n  /**\n   * Collapse all children items programmatically\n   */\n  collapseAllItems(name?: string) {\n    this.accordions.forEach((accordion) => {\n      if (name && accordion.name !== name) {\n        return;\n      }\n      accordion.collapse();\n    });\n  }\n}\n","<ng-content></ng-content>\n","import {animate, AnimationTriggerMetadata, state, style, transition, trigger} from '@angular/animations';\nimport {njSemanticMotionEasingLinearOutSlowIn} from '@engie-group/fluid-design-tokens';\n\nexport const selectAnimations: {\n  readonly transformList: AnimationTriggerMetadata;\n} = {\n  transformList: trigger('transformList', [\n    state(\n      'void',\n      style({\n        transform: 'scaleY(0.8)',\n        opacity: 0,\n      }),\n    ),\n    state(\n      '*',\n      style({\n        opacity: 1,\n        transform: 'scaleY(1)',\n      }),\n    ),\n    transition('void => *', animate(`120ms ${njSemanticMotionEasingLinearOutSlowIn}`)),\n    transition('* => void', animate(`100ms 25ms ${njSemanticMotionEasingLinearOutSlowIn}`, style({opacity: 0}))),\n  ]),\n};\n","// Ignore https://angular.io/guide/angular-compiler-options#strictmetadataemit\n// @dynamic\nexport class Utils {\n  static MAX_UID = 1000000;\n\n  public static isUndefinedOrNull(value: any): boolean {\n    return typeof value === 'undefined' || value === null;\n  }\n\n  public static normalizeString(text: string) {\n    return text.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n  }\n\n  public static normalizeAndSearchInText(text: string, search: string): boolean {\n    if(Utils.isUndefinedOrNull(text) || Utils.isUndefinedOrNull(search)) {\n      return false;\n    }\n    const normalizedText = Utils.normalizeString(text);\n    let normalizedSearch = Utils.normalizeString(search)?.replace(/\\(|\\)|\\\\/gi, '');\n    const regExp = new RegExp(normalizedSearch, 'gi');\n    return normalizedText.search(regExp) !== -1;\n  }\n\n  public static getUID(prefix: string): string {\n    do {\n      // eslint-disable-next-line no-bitwise\n      prefix += ~~(Math.random() * Utils.MAX_UID); // \"~~\" acts like a faster Math.floor() here\n    } while (document.getElementById(prefix));\n    return prefix;\n  }\n}\n","import {Directive, ElementRef, HostBinding} from '@angular/core';\nimport {Utils} from '../../utils/utils.util';\n\n@Directive({\n  selector: 'input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]',\n  exportAs: 'njFormField',\n  standalone: true\n})\nexport class FormFieldDirective {\n  @HostBinding('class') class = 'nj-form-item__field';\n\n  constructor(private el: ElementRef) {\n    this.setPlaceholder();\n  }\n\n  private setPlaceholder() {\n    if (this.tagName.toLowerCase() === 'select') {\n      return;\n    }\n    const placeholder = this.el?.nativeElement?.placeholder;\n    this.el.nativeElement.placeholder = Utils.isUndefinedOrNull(placeholder) || placeholder?.trim() === ''\n      ? ' '\n      : placeholder;\n  }\n\n  get type() {\n    return this.el?.nativeElement?.type;\n  }\n\n  set type(value: string) {\n    if (this.el?.nativeElement) {\n      this.el.nativeElement.type = value;\n    }\n  }\n\n  get tagName() {\n    return this.el?.nativeElement?.tagName;\n  }\n\n  get element() {\n    return this.el?.nativeElement;\n  }\n}\n","import {CommonModule} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';\nimport {IconComponent} from '../icon/icon.component';\nimport {IconButtonSize, IconButtonVariant} from './icon-button.model';\n\n@Component({\n  selector: 'nj-icon-button',\n  templateUrl: './icon-button.component.html',\n  styleUrls: ['./icon-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [IconComponent, CommonModule]\n})\nexport class IconButtonComponent {\n  private readonly ICON_BUTTON_CLASS_NAME = 'nj-icon-btn';\n\n  /**\n   * Type of the button. Some values may be `button`, `submit`, `reset`\n   */\n  @Input() type = 'button';\n\n  /**\n   * For toggle buttons, indicate the state\n   */\n  @Input() ariaPressed?: boolean;\n\n  /**\n   * Additional description for assistive technologies based on visible text\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n   */\n  @Input() ariaDescribedby?: string;\n\n  /**\n   * Whether button is disabled or not\n   */\n  @Input() isDisabled: boolean;\n\n  /**\n   * Tab index, allows you to customize keyboard navigation\n   */\n  @Input() tabIndex: number;\n\n  /**\n   * Button variant theme\n   * @default `primary`\n   */\n  @Input() variant: IconButtonVariant;\n\n  /**\n   * Button size\n   * @default `xs`\n   */\n  @Input() size: IconButtonSize;\n\n  /**\n   * Whether button has custom icon\n   */\n  @Input() hasCustomIcon = false;\n\n  /**\n   * Button material icon\n   */\n  @Input() icon: string;\n\n  /**\n   * Text alternative for assistive technologies\n   */\n  @Input() label: string;\n\n  /**\n   * Additional icon-button css classes\n   */\n  @Input() additionalClass?: string;\n\n  /**\n   * Button click output. Emits a MouseEvent\n   */\n  @Output() buttonClick = new EventEmitter<MouseEvent>();\n\n  constructor() {\n  }\n\n  /**\n   * @ignore\n   */\n  getIconButtonVariantClass(): string {\n    if (!this.variant || this.variant === 'primary') {\n      return '';\n    }\n    return `${this.ICON_BUTTON_CLASS_NAME}--${this.variant}`;\n  }\n\n  /**\n   * @ignore\n   */\n  getIconButtonSizeClass(): string {\n    if (!this.size || this.size === 'xs') {\n      return '';\n    }\n    return `${this.ICON_BUTTON_CLASS_NAME}--${this.size}`;\n  }\n}\n","<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","import {CommonModule} from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {FormFieldDirective} from '../form-field/form-field.directive';\nimport {IconButtonComponent} from '../icon-button/icon-button.component';\nimport {IconComponent} from '../icon/icon.component';\nimport {FormItemSize} from './form-item.model';\n\n@Component({\n  selector: 'nj-form-item',\n  templateUrl: './form-item.component.html',\n  styleUrls: ['./form-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [IconComponent, IconButtonComponent, FormFieldDirective, CommonModule]\n})\nexport class FormItemComponent implements AfterContentInit {\n\n  private readonly formItemClassName = 'nj-form-item';\n\n  /**\n   * @ignore\n   */\n  private _hasError: boolean;\n\n  /**\n   * @ignore\n   */\n  private _hasSuccess: boolean;\n\n  /**\n   * @ignore\n   */\n  private _hasHint: boolean;\n\n  /**\n   * @ignore\n   */\n  isPassword: boolean;\n\n  /**\n   * @ignore\n   */\n  isVisible = false;\n\n  /**\n   * @ignore\n   */\n  passwordNotice = '';\n\n  /**\n   * @ignore\n   */\n  passwordButtonLabel = '';\n\n  /**\n   * @ignore\n   */\n  isMultiline = false;\n\n  /**\n   * Input id and label for attribute, needed for focus to work properly\n   */\n  @Input() inputId: string;\n\n  /**\n   * Form item size\n   */\n  @Input() size: FormItemSize = 'medium';\n\n  /**\n   * Whether the form-item label is floating\n   */\n  @Input() isFloatingLabel = true;\n\n  /**\n   * Whether form-item is disabled or not\n   */\n  @Input() isDisabled: boolean;\n\n  /**\n   * Whether form-item is required or not\n   */\n  @Input() isRequired: boolean;\n\n  /**\n   * Whether form-item is in success state\n   */\n  @Input()\n  set hasSuccess(value: boolean) {\n    this._hasSuccess = value;\n    this.setAriaAttributes();\n  }\n\n  get hasSuccess(): boolean {\n    return this._hasSuccess;\n  }\n\n  /**\n   * Whether form-item is in error state\n   */\n  @Input()\n  set hasError(value: boolean) {\n    this._hasError = value;\n    this.setAriaAttributes();\n  }\n\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  /**\n   * Whether the form-item has a hint substring\n   */\n  @Input()\n  set hasHint(value: boolean) {\n    this._hasHint = value;\n    this.setAriaAttributes();\n  }\n\n  get hasHint(): boolean {\n    return this._hasHint;\n  }\n\n  /**\n   * Whether the form-item has a custom icon\n   */\n  @Input() hasCustomIcon: boolean;\n\n  /**\n   * Whether the form-item's icon (or custom icon) is clickable\n   */\n  @Input() isIconClickable = true;\n\n  /**\n   * Material icon name\n   */\n  @Input() iconName: string;\n\n  /**\n   * Additional form-item css classes\n   */\n  @Input() additionalClass: string = '';\n\n  /**\n   * Label for the button to toggle password visibility when password is hidden.\n   * @example \"Show password\"\n   */\n  @Input() passwordButtonLabelShow?: string;\n\n  /**\n   * Label for the button to toggle password visibility when password is visible.\n   * @example \"Hide password\"\n   */\n  @Input() passwordButtonLabelHide?: string;\n  /**\n   * Label to announce when password becomes visible.\n   * @example \"Password is visible\"\n   */\n  @Input() passwordNoticeIsVisible?: string;\n\n  /**\n   * Label to announce when password becomes hidden.\n   * @example \"Password is hidden\"\n   */\n  @Input() passwordNoticeIsHidden?: string;\n\n  /**\n   * Whether form-item is a select or not\n   */\n  @Input() isSelect: boolean;\n\n  /**\n   * Outputs icon click\n   */\n  @Output() iconClick: EventEmitter<MouseEvent> = new EventEmitter<\n    MouseEvent\n  >();\n\n  /**\n   * Outputs icon keydown\n   */\n  @Output() iconKeydown: EventEmitter<KeyboardEvent> = new EventEmitter<\n    KeyboardEvent\n  >();\n\n  /**\n   * Outputs icon click\n   */\n  @Output() wrapperClick: EventEmitter<MouseEvent> = new EventEmitter<\n    MouseEvent\n  >();\n\n  /**\n   * @ignore\n   */\n  @ContentChild(FormFieldDirective) formField: FormFieldDirective;\n\n  ngAfterContentInit() {\n    const tagName = this.formField?.tagName?.toLowerCase();\n    this.isPassword = this.formField?.type === 'password';\n    this.isMultiline = tagName === 'textarea';\n    this.passwordButtonLabel = this.passwordButtonLabelShow;\n    this.setAriaAttributes();\n    if (this.isRequired) {\n      this.formField.element.setAttribute('required', 'required');\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  iconClickHandler(event: MouseEvent) {\n    if (!this.isIconClickable) {\n      return;\n    }\n    this.iconClick.emit(event);\n  }\n\n  /**\n   * @ignore\n   */\n  iconKeydownHandler(event: KeyboardEvent) {\n    event?.preventDefault();\n    if (!this.isIconClickable) {\n      return;\n    }\n    this.iconKeydown.emit(event);\n  }\n\n  /**\n   * @ignore\n   */\n  toggleVisibility() {\n    if (this.isVisible) {\n      this.formField.type = 'password';\n      this.passwordNotice = this.passwordNoticeIsHidden;\n      this.passwordButtonLabel = this.passwordButtonLabelShow;\n    } else {\n      this.formField.type = 'text';\n      this.passwordNotice = this.passwordNoticeIsVisible;\n      this.passwordButtonLabel = this.passwordButtonLabelHide;\n    }\n    this.isVisible = !this.isVisible;\n  }\n\n  /**\n   * @ignore\n   */\n  getSubscriptId(): string {\n    return `${this.inputId}-subscript`;\n  }\n\n  /**\n   * @ignore\n   */\n  setAriaAttributes() {\n    if (this.formField?.element) {\n      if (this.hasError) {\n        this.formField.element.setAttribute('aria-invalid', 'true');\n      }\n\n      if (this.hasError || this.hasSuccess || this.hasHint) {\n        this.formField.element.setAttribute('aria-describedby', this.getSubscriptId());\n      }\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  isCustomSelect(): boolean {\n    const type = this.formField?.type;\n    return this.isSelect && type === 'text';\n  }\n\n  /**\n   * @ignore\n   */\n  getFormItemSizeClass(): string {\n    let sizeModifier: string;\n    switch (this.size) {\n      case 'small':\n        sizeModifier = 'sm';\n        break;\n      case 'large':\n        sizeModifier = 'lg';\n        break;\n      case 'xlarge':\n        sizeModifier = 'xl';\n        break;\n      default:\n        break;\n    }\n    return sizeModifier ? `${this.formItemClassName}--${sizeModifier}` : '';\n  }\n}\n","<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","import {Directive, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';\nimport {Utils} from '../../utils/utils.util';\n\n@Directive({\n  selector: '[njHighlight]',\n  standalone: true\n})\nexport class HighlightDirective implements OnChanges {\n  /**\n   * Content we want to highlight\n   */\n  @Input()\n  public content: string;\n\n  /**\n   * Text to highlight in the content\n   */\n  @Input()\n  public textToHighlight: string;\n\n  /**\n   * Whether to escape accents or no\n   */\n  @Input()\n  public escapeAccents = true;\n\n  /**\n   * Whether to take into account case or no\n   */\n  @Input()\n  public caseSensitive = false;\n\n  private readonly OPENING_TAG = '<mark class=\"nj-highlight\">';\n  private readonly CLOSING_TAG = '</mark>';\n\n  constructor(private el: ElementRef) {}\n\n  ngOnChanges(changes: SimpleChanges) {\n    this.highlightText();\n  }\n\n  private highlightText(): void {\n    if (Utils.isUndefinedOrNull(this.content) || Utils.isUndefinedOrNull(this.el?.nativeElement)) {\n      return;\n    }\n    const regexFlags = this.caseSensitive ? 'g' : 'gi';\n    let innerHtml: string;\n    if (Utils.isUndefinedOrNull(this.textToHighlight)) {\n      innerHtml = this.content;\n    } else {\n      if (this.escapeAccents) {\n        const regExp = new RegExp(Utils.normalizeString(this.textToHighlight), regexFlags);\n        const matches = Utils.normalizeString(this.content).matchAll(regExp);\n        let finalText = this.content;\n        let buffer = 0;\n        if (!Utils.isUndefinedOrNull(matches)) {\n          for (const match of matches) {\n            const updatedIndex = buffer + match.index;\n            const textBeforeOccurrence = finalText.slice(0, updatedIndex);\n            const occurrence = finalText.slice(updatedIndex, updatedIndex + this.textToHighlight.length);\n            const textAfterOccurrence = finalText.slice(updatedIndex + this.textToHighlight.length, finalText.length);\n            finalText = `${textBeforeOccurrence}${this.OPENING_TAG}${occurrence}${this.CLOSING_TAG}${textAfterOccurrence}`;\n            buffer = buffer + this.OPENING_TAG.length + this.CLOSING_TAG.length;\n          }\n        }\n        innerHtml = finalText;\n      } else {\n        const regExp = new RegExp(this.textToHighlight, regexFlags);\n        innerHtml = this.content.replace(regExp, `${this.OPENING_TAG}$&${this.CLOSING_TAG}`);\n      }\n    }\n    this.el.nativeElement.innerHTML = innerHtml;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'nj-list-group',\n  templateUrl: './list-group.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  imports: [CommonModule]\n})\nexport class ListGroupComponent {\n  /**\n   * List id attribute\n   */\n  @Input() listId?: string;\n\n  /**\n   * Whether group items are clickable\n   */\n  @Input() isClickable: boolean;\n\n  /**\n   * Whether it is a checkbox list or not\n   */\n  @Input() isCheckboxList: boolean;\n\n  /**\n   * Whether group items have borders\n   */\n  @Input() hasBorder = true;\n\n  /**\n   * Whether list is dense or not, i.e: smaller\n   */\n  @Input() isDense = false;\n\n  /**\n   * Add role=\"listbox\" and tabindex=\"-1\" to the element.\n   *\n   * Used by `nj-select` for accessibility reasons.\n   */\n  @Input() isCustomSelectList: boolean = false;\n\n  /**\n   * Accessible label for the list when using \"listbox\" role.\n   */\n  @Input() ariaLabel?: string;\n\n  /**\n   * Whether list is multi-select or not, to add necessary accessible labels\n   */\n  @Input() isMultiSelect: boolean = false;\n\n  @ViewChild('root')\n  public rootEl: ElementRef<HTMLUListElement>;\n\n  constructor(public readonly element: ElementRef<HTMLElement>) {}\n}\n","<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","import {CommonModule} from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  Output,\n  ViewChild\n} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {IconComponent} from '../icon/icon.component';\nimport {CheckboxSize} from './checkbox.model';\n\n@Component({\n  selector: 'nj-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  providers: [{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => CheckboxComponent),\n    multi: true\n  }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [IconComponent, CommonModule]\n})\nexport class CheckboxComponent implements ControlValueAccessor {\n  private readonly checkboxClassName = 'nj-checkbox';\n\n  private _checked: boolean;\n\n  /**\n   * Input id\n   */\n  @Input() inputId: string;\n\n  /**\n   * Input name\n   */\n  @Input() name: string;\n\n  /**\n   * Whether input is required or not\n   */\n  @Input() isRequired?: boolean;\n\n  /**\n   * Whether the checkbox is checked or not\n   */\n  @Input()\n  set isChecked(value: boolean) {\n    this._checked = value;\n    this.cdr.markForCheck();\n  }\n\n  get isChecked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * Checkbox size\n   */\n  @Input() size?: CheckboxSize = 'md';\n\n  /**\n   * Input value\n   */\n  @Input() value?: string;\n\n  /**\n   * Whether the checkbox is disabled or not\n   */\n  @Input() isDisabled?: boolean;\n\n  /**\n   * Whether the checkbox is in error state\n   */\n  @Input() hasError?: boolean;\n\n  /**\n   * Whether the checkbox is in success state\n   */\n  @Input() hasSuccess?: boolean;\n\n  /**\n   * Message to display as hint below checkbox\n   */\n  @Input() subscriptMessage?: string;\n\n  /**\n   * @Deprecated\n   * Message to display if checkbox is in error state\n   */\n  @Input() errorMessage?: string;\n\n  /**\n   * Aria label, for accessibility reasons\n   */\n  @Input() ariaLabel?: string;\n\n  /**\n   * Aria labelled by, for accessibility reasons\n   */\n  @Input() ariaLabelledby?: string;\n\n  /**\n   * Whether checkbox is only presentational and state handled by a parent, can be useful for lists of checkboxes.\n   * When set to `true`, the checkbox won't have any interaction.\n   */\n  @Input() isPresentational? = false;\n\n  /**\n   * Whether the checkbox is in indeterminate state or not.\n   */\n  @Input({transform: booleanAttribute}) indeterminate: boolean;\n\n  /**\n   * Output that emits checked value on change only\n   */\n  @Output() valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ViewChild('input')\n  private _inputElement: ElementRef<HTMLInputElement>;\n\n  constructor(private cdr: ChangeDetectorRef) {\n  }\n\n  /**\n   * @ignore\n   */\n  private _onChange = (_: any): void => {\n  };\n\n  /**\n   * @ignore\n   */\n  private _onTouched = (): void => {\n  };\n\n  /**\n   * @ignore\n   */\n  _onChangeEvent(event: Event) {\n    event.stopPropagation();\n    if (this._inputElement?.nativeElement) {\n      this.isChecked = this._inputElement.nativeElement.checked;\n      this._onChange(this.isChecked);\n      this.valueChange.emit(this.isChecked);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  _onInputClick(event: Event) {\n    // We have to stop propagation for click events on the visually hidden input element.\n    // By default, when a user clicks on a label element, a generated click event will be\n    // dispatched on the associated input element. Since we are using a label element as our\n    // root container, the click event on the `slide-toggle` will be executed twice.\n    // The real click event will bubble up, and the generated click event also tries to bubble up.\n