@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/directives/heading/heading.directive.ts","../../src/directives/text/text.directive.ts","../../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/accordion/accordion.component.ts","../../src/components/accordion/accordion.component.html","../../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/shared/animations.ts","../../src/utils/utils.util.ts","../../src/components/form-field/form-field.directive.ts","../../src/components/icon-button/directives/icon-button-icon.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-deprecated/list-deprecated.component.ts","../../src/components/list-deprecated/list-deprecated.component.html","../../src/components/checkbox/checkbox.component.ts","../../src/components/checkbox/checkbox.component.html","../../src/components/list-item-deprecated/list-item-deprecated.component.ts","../../src/components/list-item-deprecated/list-item-deprecated.component.html","../../src/components/autocomplete/autocomplete.component.ts","../../src/components/autocomplete/autocomplete.component.html","../../src/components/avatar/avatar-picture.directive.ts","../../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-list/avatar-list.component.ts","../../src/components/avatar-list/avatar-list.component.html","../../src/components/badge/badge.component.ts","../../src/components/badge/badge.component.html","../../src/pipes/engie-template-selector.pipe.ts","../../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/spinner/spinner.component.ts","../../src/components/button/directives/button-icon.directive.ts","../../src/components/button/button.component.ts","../../src/components/button/button.component.html","../../src/components/card/card-image.directive.ts","../../src/components/card/card.component.ts","../../src/components/card/card.component.html","../../src/components/custom-label/custom-label.directive.ts","../../src/directives/display/display.directive.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/list/directives/list-item.directive.ts","../../src/components/list/directives/list-navigation-item.directive.ts","../../src/components/list/components/list-item-content/list-item-content.component.ts","../../src/components/list/components/list-item-content/list-item-content.component.html","../../src/components/list/list.directive.ts","../../src/components/logo/logo.component.ts","../../src/components/logo/logo.component.html","../../src/components/menu/menu.component.ts","../../src/components/menu/menu.component.html","../../src/components/menu-group/menu-group.component.ts","../../src/components/menu-group/menu-group.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/components/search/search.component.ts","../../src/components/search/search.component.html","../../src/components/search/directives/search-button.directive.ts","../../src/components/segmented-control/segmented-control.component.ts","../../src/components/segmented-control/segmented-control.component.html","../../src/components/segmented-control-button/segmented-control-button.component.ts","../../src/components/segmented-control-button/segmented-control-button.component.html","../../src/components/select/select.component.ts","../../src/components/select/select.component.html","../../src/components/sidebar/directives/sidebar-content.directive.ts","../../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/sidepanel-header/sidepanel-header.component.ts","../../src/components/sidepanel-header/sidepanel-header.component.html","../../src/components/sidepanel/sidepanel.component.ts","../../src/components/sidepanel/sidepanel.component.html","../../src/components/skeleton/skeleton-area.component.ts","../../src/components/skeleton/skeleton-area.component.html","../../src/components/skeleton/skeleton-circle.component.ts","../../src/components/skeleton/skeleton-container.component.ts","../../src/components/skeleton/skeleton-container.component.html","../../src/components/skeleton/skeleton-rectangle.component.ts","../../src/components/slider/slider.component.ts","../../src/components/slider/slider.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-container.component.ts","../../src/components/toast/toast-container.component.html","../../src/components/toast/toast.component.ts","../../src/components/toast/toast.component.html","../../src/components/toast/toast.service.ts","../../src/components/toggle/toggle-icon.directive.ts","../../src/components/toggle/toggle.component.ts","../../src/components/toggle/toggle.component.html","../../src/components/tooltip/tooltip.model.ts","../../src/public-api.ts","../../src/engie-group-fluid-design-system-angular.ts"],"sourcesContent":["export const ThemeComponentsVariantsArray = [\n  'grey',\n  'brand',\n  'teal',\n  'pink',\n  'orange',\n  'red',\n  'green',\n  'ultramarine',\n  'yellow',\n  'purple',\n  'blue',\n  'lime'\n];\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","import { Directive, inject, Input, TemplateRef } from '@angular/core';\n\nexport type GenericElement = 'action' | 'footer' | 'header' | 'icon' | 'trailing' | 'leading' | 'item';\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 { booleanAttribute, Directive, Input } from '@angular/core';\nimport type { HeadingProperties } from '@engie-group/fluid-types';\n\n@Directive({\n  selector: '[njHeading]',\n  standalone: true,\n  host: {\n    '[class]': 'classes'\n  }\n})\nexport class HeadingDirective implements HeadingProperties {\n  @Input() scale?: HeadingProperties['scale'];\n\n  @Input() variant?: HeadingProperties['variant'];\n\n  @Input({ transform: booleanAttribute }) isNotInvertible?: HeadingProperties['isNotInvertible'];\n\n  protected get classes() {\n    return {\n      'nj-heading': true,\n      'nj-heading--not-invertible': this.isNotInvertible,\n      [`nj-heading--${this.scale}`]: !!this.scale,\n      [`nj-heading--${this.variant}`]: !!this.variant\n    };\n  }\n}\n","import { booleanAttribute, Directive, Input } from '@angular/core';\nimport type { TextProperties } from '@engie-group/fluid-types';\n\n@Directive({\n  selector: '[njText]',\n  standalone: true,\n  host: {\n    '[class.nj-text]': 'true',\n    '[class.nj-text--not-invertible]': 'isNotInvertible',\n    '[class.nj-text--monospace]': 'isMono',\n    '[class]': 'classes'\n  }\n})\nexport class TextDirective implements TextProperties {\n  @Input() scale?: TextProperties['scale'];\n\n  @Input() variant?: TextProperties['variant'];\n\n  @Input({ transform: booleanAttribute }) isNotInvertible?: TextProperties['isNotInvertible'];\n\n  @Input({ transform: booleanAttribute }) isMono?: TextProperties['isMono'];\n\n  protected get classes() {\n    return {\n      'nj-text': true,\n      'nj-text--not-invertible': this.isNotInvertible,\n      'nj-text--monospace': this.isMono,\n      [`nj-text--${this.scale}`]: !!this.scale,\n      [`nj-text--${this.variant}`]: !!this.variant\n    };\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { ICON_ENGIE_PREFIX, IconProperties } from '@engie-group/fluid-types';\nimport { InputSignalProps } from '../../utils/type.utils';\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  host: {\n    '[class]': 'classes()',\n    '[attr.aria-hidden]': 'ariaLabel() ? null : \"true\"',\n    '[attr.role]': 'ariaLabel() ? \"img\" : null'\n  }\n})\nexport class IconComponent implements InputSignalProps<IconProperties> {\n  private readonly ICON_MATERIAL_CLASS = 'nj-icon-material';\n\n  /**\n   * Icon name\n   */\n  name = input.required<IconProperties['name']>();\n\n  /**\n   * Icon size\n   */\n  scale = input<IconProperties['scale']>();\n\n  /**\n   * Icon variant theme\n   */\n  variant = input<IconProperties['variant']>();\n\n  /**\n   * Icon style\n   */\n  iconStyle = input<IconProperties['iconStyle']>();\n\n  /**\n   * Text alternative for assistive technologies.\n   * When provided, removes `aria-hidden` and exposes the icon to screen readers.\n   */\n  ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  protected classes = computed(() => {\n    const base = this.ICON_MATERIAL_CLASS;\n    const scale = this.scale();\n    const variant = this.variant();\n    const iconStyle = this.iconStyle();\n    const name = this.name();\n    const isEngie = name.startsWith(ICON_ENGIE_PREFIX);\n\n    return {\n      [base]: true,\n      [`${base}--${scale === 'inherit' ? 'size-inherit' : scale}`]: !!scale && scale !== 'md',\n      [`${base}--${variant === 'inherit' ? 'color-inherit' : variant}`]: !!variant && variant !== 'primary',\n      [`${base}--${iconStyle}`]: !!iconStyle && iconStyle !== 'filled' && !isEngie,\n      [`${base}--engie`]: isEngie\n    };\n  });\n}\n","{{ name() }}\n","import { 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  encapsulation: ViewEncapsulation.None,\n  imports: [IconComponent, NgTemplateOutlet],\n  host: {\n    '[class]': 'classes',\n    '(click)': 'handleClick($event)'\n  }\n})\nexport class AccordionItemComponent implements AfterContentInit {\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","@if (label || headerTemplate) {\n  <summary>\n    @if (iconTemplate) {\n      <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n    }\n    <span class=\"nj-accordion-item__label\">\n      @if (label) {\n        {{ label }}\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n      }\n    </span>\n    @if (!useAlternativeToggleIcon) {\n      <nj-icon name=\"expand_more\" class=\"nj-accordion-item__toggle\" variant=\"inherit\" scale=\"inherit\"></nj-icon>\n    } @else {\n      <nj-icon\n        name=\"add\"\n        class=\"nj-accordion-item__toggle nj-accordion-item__toggle--closed\"\n        variant=\"inherit\"\n        scale=\"inherit\"\n      ></nj-icon>\n      <nj-icon\n        name=\"remove\"\n        class=\"nj-accordion-item__toggle nj-accordion-item__toggle--opened\"\n        variant=\"inherit\"\n        scale=\"inherit\"\n      ></nj-icon>\n    }\n  </summary>\n}\n<p class=\"nj-accordion-item__content\">\n  <ng-content></ng-content>\n</p>\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  Input,\n  QueryList,\n  ViewEncapsulation\n} from '@angular/core';\nimport { AccordionItemComponent } from '../accordion-item/accordion-item.component';\n\n@Component({\n  selector: 'nj-accordion',\n  templateUrl: './accordion.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\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 { 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 { 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): value is undefined | null {\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.escapeRegExp(Utils.normalizeString(search));\n    const regExp = new RegExp(normalizedSearch, 'gi');\n    return normalizedText.search(regExp) !== -1;\n  }\n\n  public static escapeRegExp(string: string): string {\n    return string.replace(/[-\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\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 =\n      Utils.isUndefinedOrNull(placeholder) || placeholder?.trim() === ''\n        ? ' ' // Placeholder must be \" \" because of webkit browser behavior with floating labels\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 { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[njIconButtonIcon]',\n  standalone: true,\n  host: {\n    class: 'nj-icon-btn__icon'\n  }\n})\nexport class IconButtonIconDirective {}\n","import { CommonModule, NgIfContext } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  Input,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\nimport { IconButtonProperties } from '@engie-group/fluid-types';\nimport { EngieTemplateDirective } from '../../directives/engie-template.directive';\nimport { IconComponent } from '../icon/icon.component';\nimport { IconButtonIconDirective } from './directives/icon-button-icon.directive';\n\nconst rootClassName = 'nj-icon-btn';\n\n@Component({\n  selector: 'button[nj-icon-button]',\n  templateUrl: './icon-button.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [IconComponent, CommonModule, IconButtonIconDirective],\n  host: {\n    '[class]': 'classes'\n  }\n})\nexport class IconButtonComponent implements AfterContentInit, IconButtonProperties {\n  protected iconTemplateRef?: TemplateRef<NgIfContext<string>>;\n\n  /**\n   * Button variant theme\n   * @default `primary`\n   */\n  @Input() variant?: IconButtonProperties['variant'];\n\n  /**\n   * Icon button size\n   * @deprecated Use `scale` attribute instead\n   */\n  @Input() size?: IconButtonProperties['scale'];\n\n  /**\n   * Icon button size\n   */\n  @Input() scale?: IconButtonProperties['scale'];\n\n  /**\n   * Whether button has custom icon\n   */\n  @Input() hasCustomIcon = false;\n\n  /**\n   * Button material icon\n   */\n  @Input() icon?: IconButtonProperties['icon'];\n\n  /**\n   * Alternative label for assistive technologies\n   */\n  @Input() altLabel?: string;\n\n  @ContentChild(EngieTemplateDirective) private template?: EngieTemplateDirective;\n\n  ngAfterContentInit() {\n    if (this.template?.selector === 'icon') {\n      this.iconTemplateRef = this.template.templateRef as TemplateRef<NgIfContext<string>>;\n    }\n  }\n\n  protected get classes() {\n    const classes = [rootClassName];\n\n    if (this.variant) {\n      classes.push(`${rootClassName}--${this.variant}`);\n    }\n\n    const scale = this.scale ?? this.size;\n\n    if (scale) {\n      classes.push(`${rootClassName}--${scale}`);\n    }\n\n    return classes;\n  }\n}\n","@if (altLabel) {\n  <span class=\"nj-sr-only\">{{ altLabel }}</span>\n}\n@if (icon) {\n  <nj-icon njIconButtonIcon [name]=\"icon\"></nj-icon>\n} @else if (iconTemplateRef) {\n  <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"></ng-container>\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  DestroyRef,\n  effect,\n  EventEmitter,\n  inject,\n  Input,\n  Output,\n  signal,\n  ViewEncapsulation\n} from '@angular/core';\nimport { NgModel } from '@angular/forms';\nimport { InputProperties } from '@engie-group/fluid-types';\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\ntype FormItemProps = Pick<InputProperties, 'scale'>;\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  imports: [IconComponent, IconButtonComponent, CommonModule]\n})\nexport class FormItemComponent implements AfterContentInit, FormItemProps {\n  private destroyRef = inject(DestroyRef);\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   * @deprecated Use `scale` instead. This property will be removed in future releases.\n   */\n  @Input() size: FormItemSize = 'medium';\n\n  /**\n   * Scale of the form-item\n   */\n  @Input() scale: FormItemProps['scale'];\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  @Input() clearable?: 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<MouseEvent>();\n\n  /**\n   * Outputs icon keydown\n   */\n  @Output() iconKeydown: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();\n\n  /**\n   * Outputs icon click\n   */\n  @Output() wrapperClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n\n  /**\n   * Outputs clear icon click\n   */\n  @Output() clearIconClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n\n  private formField = contentChild(FormFieldDirective);\n  private formFieldNgModel = contentChild(FormFieldDirective, { read: NgModel });\n  private formFieldValue = signal<string | number>('');\n  protected hasValue = computed(() => !!this.formFieldValue());\n  private cleanInputListener: (() => void) | null = null;\n\n  private readonly formFieldValueChangeEffect = effect(() => {\n    const value = this.formFieldValue();\n    const formField = this.formField();\n    if (formField?.element && formField.element.value !== value) {\n      formField.element.value = value;\n    }\n  });\n\n  private readonly handleFormFieldInputEffect = effect(() => {\n    this.cleanInputListener?.();\n\n    const input = this.formField()?.element;\n    if (!input) {\n      return;\n    }\n\n    this.formFieldValue.set(input.value);\n    const onInput = () => {\n      this.formFieldValue.set(input.value);\n    };\n\n    //Fixme: Necessary for clearable to works with autocomplete.\n    // Blocking for FLuid 6 release, will be reworked with form-item component redesign\n    this.formFieldNgModel()?.control.registerOnChange(onInput.bind(this));\n\n    input.addEventListener('input', onInput);\n\n    this.cleanInputListener = () => {\n      input.removeEventListener('input', onInput);\n      this.cleanInputListener = null;\n    };\n\n    this.destroyRef.onDestroy(() => this.cleanInputListener?.());\n  });\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    const formField = this.formField();\n    if (this.isVisible) {\n      if (formField) {\n        formField.type = 'password';\n      }\n      this.passwordNotice = this.passwordNoticeIsHidden ?? '';\n      this.passwordButtonLabel = this.passwordButtonLabelShow ?? '';\n    } else {\n      if (formField) {\n        formField.type = 'text';\n      }\n      this.passwordNotice = this.passwordNoticeIsVisible ?? '';\n      this.passwordButtonLabel = this.passwordButtonLabelHide ?? '';\n    }\n    this.isVisible = !this.isVisible;\n  }\n\n  /**\n   * @ignore\n   */\n  protected getSubscriptId(): string {\n    return `${this.inputId}-subscript`;\n  }\n\n  /**\n   * @ignore\n   */\n  setAriaAttributes() {\n    const formField = this.formField();\n    if (formField?.element) {\n      if (this.hasError) {\n        formField.element.setAttribute('aria-invalid', 'true');\n      }\n\n      if (this.hasError || this.hasSuccess || this.hasHint) {\n        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 | undefined;\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\n    const scale = this.scale ?? sizeModifier;\n\n    return scale ? `${this.formItemClassName}--${scale}` : '';\n  }\n\n  clearInput(event: MouseEvent) {\n    const formField = this.formField();\n    if (formField?.element) {\n      this.formFieldValue.set('');\n    }\n    this.clearIconClick.emit(event);\n  }\n}\n","<div\n  class=\"nj-form-item\"\n  [class.nj-form-item--static]=\"!isFloatingLabel\"\n  [class.nj-form-item--disabled]=\"isDisabled\"\n  [class.nj-form-item--error]=\"hasError\"\n  [class.nj-form-item--success]=\"hasSuccess\"\n  [class.nj-form-item--password]=\"isPassword\"\n  [class.nj-form-item--select]=\"isSelect\"\n  [class.nj-form-item--visible]=\"isVisible\"\n  [class.nj-form-item--textarea]=\"isMultiline\"\n  [ngClass]=\"[getFormItemSizeClass(), additionalClass]\"\n>\n  <div class=\"nj-form-item__field-wrapper\" (click)=\"wrapperClick.emit($event)\">\n    <ng-content select=\"[njFormField]\"></ng-content>\n    <label class=\"nj-form-item__label\" [attr.for]=\"inputId\" [attr.aria-hidden]=\"isCustomSelect() ? 'true' : null\">\n      <ng-content select=\"[njFormLabel]\"></ng-content>\n      @if (isRequired) {\n        <span class=\"nj-form-item__required-asterisk\">*</span>\n      }\n    </label>\n    <ng-content select=\"[njFormAdditionalContent]\"></ng-content>\n    @let hasIcon =\n      isPassword || (!isMultiline && (iconName || hasCustomIcon)) || (clearable && hasValue() && !isDisabled);\n    @if (hasIcon) {\n      <div class=\"nj-form-item__trailing\">\n        @if (clearable && hasValue() && !isDisabled) {\n          <button\n            nj-icon-button\n            class=\"nj-form-item__clear-button\"\n            scale=\"sm\"\n            variant=\"tertiary\"\n            [altLabel]=\"passwordButtonLabel\"\n            (click)=\"clearInput($event)\"\n            icon=\"cancel\"\n            [attr.aria-pressed]=\"isVisible\"\n          ></button>\n        }\n        @if (isPassword) {\n          <button\n            nj-icon-button\n            class=\"nj-form-item__password-button\"\n            scale=\"sm\"\n            variant=\"tertiary\"\n            [altLabel]=\"passwordButtonLabel\"\n            [icon]=\"iconName || 'visibility'\"\n            (click)=\"toggleVisibility()\"\n            [attr.aria-pressed]=\"isVisible\"\n          ></button>\n          <p class=\"nj-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ passwordNotice }}</p>\n        } @else if (!isMultiline && !hasCustomIcon && iconName) {\n          <nj-icon\n            class=\"nj-form-item__icon\"\n            [name]=\"iconName\"\n            (click)=\"iconClickHandler($event)\"\n            (keydown)=\"iconKeydownHandler($event)\"\n          >\n          </nj-icon>\n        } @else if (!isMultiline && hasCustomIcon) {\n          <div\n            class=\"nj-form-item__icon\"\n            [attr.tabindex]=\"isIconClickable ? 0 : null\"\n            (click)=\"iconClickHandler($event)\"\n            (keydown)=\"iconKeydownHandler($event)\"\n          >\n            <ng-content select=\"[njFormCustomIcon]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  @if (hasError || hasSuccess || hasHint) {\n    <div class=\"nj-form-item__subscript\" [attr.id]=\"getSubscriptId()\">\n      @if (hasError) {\n        <nj-icon class=\"nj-form-item__subscript-icon\" name=\"warning\"></nj-icon>\n      } @else if (hasSuccess) {\n        <nj-icon class=\"nj-form-item__subscript-icon\" name=\"check\"></nj-icon>\n      }\n      <ng-content select=\"[njFormSubscript]\"></ng-content>\n    </div>\n  }\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 escapedText = Utils.escapeRegExp(Utils.normalizeString(this.textToHighlight));\n        const regExp = new RegExp(escapedText, 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 ?? 0);\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 escapedText = Utils.escapeRegExp(this.textToHighlight);\n        const regExp = new RegExp(escapedText, 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/**\n * @deprecated Use the {@link ListComponent} instead\n */\n@Component({\n  selector: 'nj-list-deprecated',\n  templateUrl: './list-deprecated.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [CommonModule]\n})\nexport class ListDeprecatedComponent {\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 { CheckboxProperties } from '@engie-group/fluid-types';\nimport { IconComponent } from '../icon/icon.component';\nimport { CheckboxSize } from './checkbox.model';\n\ntype CheckboxProps = Pick<CheckboxProperties, 'scale'>;\n\n@Component({\n  selector: 'nj-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IconComponent, CommonModule]\n})\nexport class CheckboxComponent implements ControlValueAccessor, CheckboxProps {\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   * @deprecated Use `scale` input instead. This input will be removed in future releases.\n   */\n  @Input() size?: CheckboxSize = 'md';\n\n  @Input() scale?: CheckboxProps['scale'];\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   * @ignore\n   */\n  private _onChange = (_: any): void => {};\n\n  /**\n   * @ignore\n   */\n  private _onTouched = (): void => {};\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    // This will lead to multiple click events.\n    // Preventing bubbling for the second event will solve that issue.\n    event.stopPropagation();\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @ignore\n   */\n  writeValue(value: any): void {\n    this.isChecked = !!value;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @ignore\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @ignore\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   * @ignore\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * @ignore\n   */\n  getSubscriptId(): string {\n    return `${this.inputId}-hint`;\n  }\n\n  private get checkboxSizeClass(): string {\n    const scale = this.scale ?? this.size;\n    return scale !== 'md' ? `${this.checkboxClassName}--${scale}` : '';\n  }\n\n  protected get checkboxClasses() {\n    return {\n      'nj-checkbox--error': this.hasError,\n      'nj-checkbox--success': this.hasSuccess,\n      [this.checkboxSizeClass]: true\n    };\n  }\n}\n","<div class=\"nj-checkbox\" [ngClass]=\"checkboxClasses\" [attr.inert]=\"isPresentational ? 'true' : null\">\n  <label [attr.for]=\"inputId\">\n    <input\n      type=\"checkbox\"\n      #input\n      [indeterminate]=\"indeterminate\"\n      [required]=\"isRequired\"\n      [checked]=\"isChecked\"\n      [disabled]=\"isDisabled\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-invalid]=\"hasError ? 'true' : null\"\n      [attr.aria-describedby]=\"subscriptMessage || errorMessage ? getSubscriptId() : null\"\n      (change)=\"_onChangeEvent($event)\"\n      (click)=\"_onInputClick($event)\"\n    />\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </label>\n  @if (subscriptMessage || errorMessage) {\n    <div class=\"nj-checkbox__subscript\" [attr.id]=\"getSubscriptId()\">\n      @if (hasError) {\n        <nj-icon variant=\"inherit\" name=\"warning\" scale=\"sm\"></nj-icon>\n      }\n      @if (hasSuccess && !hasError) {\n        <nj-icon variant=\"inherit\" name=\"check\" scale=\"sm\"></nj-icon>\n      }\n      {{ errorMessage ? errorMessage : subscriptMessage }}\n    </div>\n  }\n</div>\n\n<ng-template #content>\n  <span class=\"nj-checkbox__label\">\n    <ng-content></ng-content>\n    @if (isRequired) {\n      <span aria-hidden=\"true\" class=\"nj-checkbox__required\"> * </span>\n    }\n  </span>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Ev