herum-shared 0.1.32 → 0.1.34

package/fesm2022/herum-shared-directives.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, HostListener, HostBinding, Inject } from '@angular/core';
+import { Input, Directive, HostListener, HostBinding, Inject, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';
 import * as i1 from '@angular/common/http';
 
@@ -218,9 +219,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+class DirectivesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, declarations: [HerumHighlightDirective,
+            HerumToolTipDirective,
+            SvgOnHoverDirective,
+            UserActionDirective], imports: [CommonModule], exports: [HerumHighlightDirective,
+            HerumToolTipDirective,
+            SvgOnHoverDirective,
+            UserActionDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HerumHighlightDirective,
+                        HerumToolTipDirective,
+                        SvgOnHoverDirective,
+                        UserActionDirective,
+                    ],
+                    exports: [
+                        HerumHighlightDirective,
+                        HerumToolTipDirective,
+                        SvgOnHoverDirective,
+                        UserActionDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HerumHighlightDirective, HerumToolTipDirective, SvgOnHoverDirective, UserActionDirective };
+export { DirectivesModule, HerumHighlightDirective, HerumToolTipDirective, SvgOnHoverDirective, UserActionDirective };
 //# sourceMappingURL=herum-shared-directives.mjs.map

package/fesm2022/herum-shared-directives.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"herum-shared-directives.mjs","sources":["../../../projects/herum-shared/directives/herum-highlight.directive.ts","../../../projects/herum-shared/directives/herum-tool-tip.directive.ts","../../../projects/herum-shared/directives/svg-on-hover.directive.ts","../../../projects/herum-shared/directives/user-action.directive.ts","../../../projects/herum-shared/directives/herum-shared-directives.ts"],"sourcesContent":["import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[herumHighlight]'\r\n})\r\nexport class HerumHighlightDirective {\r\n\r\n  @Input() highlightText: string | null | undefined = '';\r\n  @Input('herumHighlight') highlightQuery: string | null | undefined = '';\r\n\r\n  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) { }\r\n\r\n  ngOnChanges(): void {\r\n    const text = this.highlightText ?? '';\r\n    const query = (this.highlightQuery ?? '').trim();\r\n\r\n    if (!query) {\r\n      this.renderer.setProperty(this.el.nativeElement, 'textContent', text);\r\n      return;\r\n    }\r\n\r\n    const lowerText = text.toLowerCase();\r\n    const lowerQuery = query.toLowerCase();\r\n    const start = lowerText.indexOf(lowerQuery);\r\n\r\n    if (start === -1) {\r\n      this.renderer.setProperty(this.el.nativeElement, 'textContent', text);\r\n      return;\r\n    }\r\n\r\n    const end = start + query.length;\r\n\r\n    const before = this.escapeHtml(text.slice(0, start));\r\n    const match = this.escapeHtml(text.slice(start, end));\r\n    const after = this.escapeHtml(text.slice(end));\r\n\r\n    const html = `${before}<strong>${match}</strong>${after}`;\r\n    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', html);\r\n  }\r\n\r\n  private escapeHtml(value: string): string {\r\n    return value\r\n      .replace(/&/g, '&amp;')\r\n      .replace(/</g, '&lt;')\r\n      .replace(/>/g, '&gt;')\r\n      .replace(/\"/g, '&quot;')\r\n      .replace(/'/g, '&#39;');\r\n  }\r\n}\r\n","import { Directive, ElementRef, HostListener, Input } from '@angular/core';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[appHerumToolTip]'\r\n})\r\nexport class HerumToolTipDirective {\r\n\r\n  @Input() tooltipText: string = '';\r\n\r\n  private tooltip: HTMLElement;\r\n\r\n  constructor(private el: ElementRef) {\r\n    this.tooltip = document.createElement('div');\r\n    this.tooltip.className = 'tooltip';\r\n  }\r\n\r\n  @HostListener('mouseenter') onMouseEnter() {\r\n    this.showTooltip();\r\n  }\r\n\r\n  @HostListener('mouseleave') onMouseLeave() {\r\n    this.hideTooltip();\r\n  }\r\n\r\n  private showTooltip() {\r\n    const hostPosition = this.el.nativeElement.getBoundingClientRect();\r\n    const tooltipPosition = {\r\n      top: window.scrollY + hostPosition.top - this.tooltip.offsetHeight - 30,\r\n      left: window.scrollX + hostPosition.left + hostPosition.width / 4 //+ this.tooltip.offsetWidth\r\n    };\r\n\r\n    const bodyRect = document.body.getBoundingClientRect();\r\n    const tooltipRect = this.tooltip.getBoundingClientRect();\r\n\r\n    if (tooltipPosition.left < bodyRect.left) {\r\n      tooltipPosition.left = bodyRect.left;\r\n    } else if (tooltipPosition.left + tooltipRect.width > bodyRect.right) {\r\n      tooltipPosition.left = bodyRect.right - tooltipRect.width;\r\n    }\r\n\r\n    this.tooltip.style.top = `${tooltipPosition.top}px`;\r\n    this.tooltip.style.left = `${tooltipPosition.left}px`;\r\n    document.body.appendChild(this.tooltip);\r\n    this.tooltip.innerText = this.tooltipText;\r\n  }\r\n\r\n  private hideTooltip() {\r\n    document.body.removeChild(this.tooltip);\r\n  }\r\n\r\n}","import { Directive, HostListener, HostBinding, ElementRef, Input } from '@angular/core';\r\n\r\nconst iconDefaultColor: string = '#7897a8';\r\n\r\nconst attribute: string = 'stroke';\r\nconst pathSelector: string = 'path';\r\nconst svgSelector: string = 'svg';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[svgOnHover]'\r\n})\r\nexport class SvgOnHoverDirective {\r\n\r\n  @Input('svgOnHover') iconHoverColor!: string;\r\n\r\n  @HostListener('mouseenter')\r\n  onMouseEnter() {\r\n    if (!this.iconHoverColor)\r\n      this.iconHoverColor = window.getComputedStyle(document.body).getPropertyValue('--icons-color');\r\n\r\n    if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)\r\n      this.setElementAttribute(this.iconHoverColor);\r\n    else;\r\n    this.setElementsAttribute(this.iconHoverColor);\r\n  }\r\n\r\n  @HostListener('mouseleave')\r\n  onMouseLeave() {\r\n    if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)\r\n      this.setElementAttribute(iconDefaultColor);\r\n    else\r\n      this.setElementsAttribute(iconDefaultColor);\r\n  }\r\n\r\n  @HostBinding()\r\n  stroke: string;\r\n\r\n  constructor(private element: ElementRef) { }\r\n\r\n  setElementAttribute(color: string) {\r\n    const element = this.element.nativeElement.querySelector(svgSelector)?.querySelector(pathSelector);\r\n    element?.setAttribute(attribute, color);\r\n  }\r\n\r\n  setElementsAttribute(color: string) {\r\n    const elements = this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector);\r\n    elements?.forEach(element => element.setAttribute(attribute, color));\r\n  }\r\n}","import { HttpClient } from '@angular/common/http';\r\nimport { Directive, ElementRef, HostListener, Inject, Input } from '@angular/core';\r\nimport { EnvironmentConfig, HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';\r\n\r\nconst unwantedSelectors = [\"div\", null]\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[userAction]'\r\n})\r\nexport class UserActionDirective {\r\n\r\n  @Input('userAction') description: string;\r\n\r\n  constructor(private el: ElementRef, private http: HttpClient, @Inject(HERUM_SHARED_CONFIG_TOKEN) private environmentConfig: EnvironmentConfig) { }\r\n\r\n  @HostListener('click', ['$event'])\r\n  onClick(event) {\r\n    var obj = {\r\n      system: this.environmentConfig?.environment?.envName,\r\n      currentUrl: this.el.nativeElement?.formAction,\r\n      innerText: this.el.nativeElement?.innerText,\r\n      attributes: Array.from(Object.values(this.el.nativeElement?.attributes)).map((attribute: any) => ({\r\n        attribute: attribute.name,\r\n        value: attribute.value\r\n      })),\r\n      selector: this.el.nativeElement?.tagName,\r\n      viewPath: event.path?.map(viewElement => viewElement.localName).filter(selector => !unwantedSelectors.includes(selector) && selector),\r\n      timeStamp: event.timeStamp,\r\n      screenX: event.screenX,\r\n      screenY: event.screenY,\r\n      description: this.description\r\n    }\r\n    this.http.post(this.environmentConfig?.environment?.userAction, obj).subscribe(res => { });\r\n  }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"herum-shared-directives.mjs","sources":["../../../projects/herum-shared/directives/herum-highlight.directive.ts","../../../projects/herum-shared/directives/herum-tool-tip.directive.ts","../../../projects/herum-shared/directives/svg-on-hover.directive.ts","../../../projects/herum-shared/directives/user-action.directive.ts","../../../projects/herum-shared/directives/directives-module.ts","../../../projects/herum-shared/directives/herum-shared-directives.ts"],"sourcesContent":["import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[herumHighlight]'\r\n})\r\nexport class HerumHighlightDirective {\r\n\r\n  @Input() highlightText: string | null | undefined = '';\r\n  @Input('herumHighlight') highlightQuery: string | null | undefined = '';\r\n\r\n  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) { }\r\n\r\n  ngOnChanges(): void {\r\n    const text = this.highlightText ?? '';\r\n    const query = (this.highlightQuery ?? '').trim();\r\n\r\n    if (!query) {\r\n      this.renderer.setProperty(this.el.nativeElement, 'textContent', text);\r\n      return;\r\n    }\r\n\r\n    const lowerText = text.toLowerCase();\r\n    const lowerQuery = query.toLowerCase();\r\n    const start = lowerText.indexOf(lowerQuery);\r\n\r\n    if (start === -1) {\r\n      this.renderer.setProperty(this.el.nativeElement, 'textContent', text);\r\n      return;\r\n    }\r\n\r\n    const end = start + query.length;\r\n\r\n    const before = this.escapeHtml(text.slice(0, start));\r\n    const match = this.escapeHtml(text.slice(start, end));\r\n    const after = this.escapeHtml(text.slice(end));\r\n\r\n    const html = `${before}<strong>${match}</strong>${after}`;\r\n    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', html);\r\n  }\r\n\r\n  private escapeHtml(value: string): string {\r\n    return value\r\n      .replace(/&/g, '&amp;')\r\n      .replace(/</g, '&lt;')\r\n      .replace(/>/g, '&gt;')\r\n      .replace(/\"/g, '&quot;')\r\n      .replace(/'/g, '&#39;');\r\n  }\r\n}\r\n","import { Directive, ElementRef, HostListener, Input } from '@angular/core';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[appHerumToolTip]'\r\n})\r\nexport class HerumToolTipDirective {\r\n\r\n  @Input() tooltipText: string = '';\r\n\r\n  private tooltip: HTMLElement;\r\n\r\n  constructor(private el: ElementRef) {\r\n    this.tooltip = document.createElement('div');\r\n    this.tooltip.className = 'tooltip';\r\n  }\r\n\r\n  @HostListener('mouseenter') onMouseEnter() {\r\n    this.showTooltip();\r\n  }\r\n\r\n  @HostListener('mouseleave') onMouseLeave() {\r\n    this.hideTooltip();\r\n  }\r\n\r\n  private showTooltip() {\r\n    const hostPosition = this.el.nativeElement.getBoundingClientRect();\r\n    const tooltipPosition = {\r\n      top: window.scrollY + hostPosition.top - this.tooltip.offsetHeight - 30,\r\n      left: window.scrollX + hostPosition.left + hostPosition.width / 4 //+ this.tooltip.offsetWidth\r\n    };\r\n\r\n    const bodyRect = document.body.getBoundingClientRect();\r\n    const tooltipRect = this.tooltip.getBoundingClientRect();\r\n\r\n    if (tooltipPosition.left < bodyRect.left) {\r\n      tooltipPosition.left = bodyRect.left;\r\n    } else if (tooltipPosition.left + tooltipRect.width > bodyRect.right) {\r\n      tooltipPosition.left = bodyRect.right - tooltipRect.width;\r\n    }\r\n\r\n    this.tooltip.style.top = `${tooltipPosition.top}px`;\r\n    this.tooltip.style.left = `${tooltipPosition.left}px`;\r\n    document.body.appendChild(this.tooltip);\r\n    this.tooltip.innerText = this.tooltipText;\r\n  }\r\n\r\n  private hideTooltip() {\r\n    document.body.removeChild(this.tooltip);\r\n  }\r\n\r\n}","import { Directive, HostListener, HostBinding, ElementRef, Input } from '@angular/core';\r\n\r\nconst iconDefaultColor: string = '#7897a8';\r\n\r\nconst attribute: string = 'stroke';\r\nconst pathSelector: string = 'path';\r\nconst svgSelector: string = 'svg';\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[svgOnHover]'\r\n})\r\nexport class SvgOnHoverDirective {\r\n\r\n  @Input('svgOnHover') iconHoverColor!: string;\r\n\r\n  @HostListener('mouseenter')\r\n  onMouseEnter() {\r\n    if (!this.iconHoverColor)\r\n      this.iconHoverColor = window.getComputedStyle(document.body).getPropertyValue('--icons-color');\r\n\r\n    if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)\r\n      this.setElementAttribute(this.iconHoverColor);\r\n    else;\r\n    this.setElementsAttribute(this.iconHoverColor);\r\n  }\r\n\r\n  @HostListener('mouseleave')\r\n  onMouseLeave() {\r\n    if (this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector).length === 1)\r\n      this.setElementAttribute(iconDefaultColor);\r\n    else\r\n      this.setElementsAttribute(iconDefaultColor);\r\n  }\r\n\r\n  @HostBinding()\r\n  stroke: string;\r\n\r\n  constructor(private element: ElementRef) { }\r\n\r\n  setElementAttribute(color: string) {\r\n    const element = this.element.nativeElement.querySelector(svgSelector)?.querySelector(pathSelector);\r\n    element?.setAttribute(attribute, color);\r\n  }\r\n\r\n  setElementsAttribute(color: string) {\r\n    const elements = this.element.nativeElement.querySelector(svgSelector)?.querySelectorAll(pathSelector);\r\n    elements?.forEach(element => element.setAttribute(attribute, color));\r\n  }\r\n}","import { HttpClient } from '@angular/common/http';\r\nimport { Directive, ElementRef, HostListener, Inject, Input } from '@angular/core';\r\nimport { EnvironmentConfig, HERUM_SHARED_CONFIG_TOKEN } from 'herum-shared/environment';\r\n\r\nconst unwantedSelectors = [\"div\", null]\r\n\r\n@Directive({\r\n  standalone: false,\r\n  selector: '[userAction]'\r\n})\r\nexport class UserActionDirective {\r\n\r\n  @Input('userAction') description: string;\r\n\r\n  constructor(private el: ElementRef, private http: HttpClient, @Inject(HERUM_SHARED_CONFIG_TOKEN) private environmentConfig: EnvironmentConfig) { }\r\n\r\n  @HostListener('click', ['$event'])\r\n  onClick(event) {\r\n    var obj = {\r\n      system: this.environmentConfig?.environment?.envName,\r\n      currentUrl: this.el.nativeElement?.formAction,\r\n      innerText: this.el.nativeElement?.innerText,\r\n      attributes: Array.from(Object.values(this.el.nativeElement?.attributes)).map((attribute: any) => ({\r\n        attribute: attribute.name,\r\n        value: attribute.value\r\n      })),\r\n      selector: this.el.nativeElement?.tagName,\r\n      viewPath: event.path?.map(viewElement => viewElement.localName).filter(selector => !unwantedSelectors.includes(selector) && selector),\r\n      timeStamp: event.timeStamp,\r\n      screenX: event.screenX,\r\n      screenY: event.screenY,\r\n      description: this.description\r\n    }\r\n    this.http.post(this.environmentConfig?.environment?.userAction, obj).subscribe(res => { });\r\n  }\r\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HerumHighlightDirective } from './herum-highlight.directive';\nimport { HerumToolTipDirective } from './herum-tool-tip.directive';\nimport { SvgOnHoverDirective } from './svg-on-hover.directive';\nimport { UserActionDirective } from './user-action.directive';\n\n@NgModule({\n  declarations: [\n    HerumHighlightDirective,\n    HerumToolTipDirective,\n    SvgOnHoverDirective,\n    UserActionDirective,\n  ],\n  exports: [\n    HerumHighlightDirective,\n    HerumToolTipDirective,\n    SvgOnHoverDirective,\n    UserActionDirective,\n  ],\n  imports: [\n    CommonModule,\n  ],\n})\nexport class DirectivesModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAMa,uBAAuB,CAAA;AAKd,IAAA,EAAA;AAAqC,IAAA,QAAA;IAHhD,aAAa,GAA8B,EAAE;IAC7B,cAAc,GAA8B,EAAE;IAEvE,WAAA,CAAoB,EAA2B,EAAU,QAAmB,EAAA;QAAxD,IAAA,CAAA,EAAE,GAAF,EAAE;QAAmC,IAAA,CAAA,QAAQ,GAAR,QAAQ;IAAe;IAEhF,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,IAAI,EAAE;AACrC,QAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,cAAc,IAAI,EAAE,EAAE,IAAI,EAAE;QAEhD,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,IAAI,CAAC;YACrE;QACF;AAEA,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE;AACpC,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;AAE3C,QAAA,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,IAAI,CAAC;YACrE;QACF;AAEA,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACpD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACrD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9C,MAAM,IAAI,GAAG,CAAA,EAAG,MAAM,WAAW,KAAK,CAAA,SAAA,EAAY,KAAK,CAAA,CAAE;AACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,IAAI,CAAC;IACrE;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;AAC9B,QAAA,OAAO;AACJ,aAAA,OAAO,CAAC,IAAI,EAAE,OAAO;AACrB,aAAA,OAAO,CAAC,IAAI,EAAE,MAAM;AACpB,aAAA,OAAO,CAAC,IAAI,EAAE,MAAM;AACpB,aAAA,OAAO,CAAC,IAAI,EAAE,QAAQ;AACtB,aAAA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;IAC3B;wGA1CW,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAvB,uBAAuB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,CAAA,gBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;sBAGE;;sBACA,KAAK;uBAAC,gBAAgB;;;MCHZ,qBAAqB,CAAA;AAMZ,IAAA,EAAA;IAJX,WAAW,GAAW,EAAE;AAEzB,IAAA,OAAO;AAEf,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;QACpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS;IACpC;IAE4B,YAAY,GAAA;QACtC,IAAI,CAAC,WAAW,EAAE;IACpB;IAE4B,YAAY,GAAA;QACtC,IAAI,CAAC,WAAW,EAAE;IACpB;IAEQ,WAAW,GAAA;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAClE,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,GAAG,EAAE,MAAM,CAAC,OAAO,GAAG,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,EAAE;AACvE,YAAA,IAAI,EAAE,MAAM,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC;SAClE;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE;QACtD,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE;QAExD,IAAI,eAAe,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;AACxC,YAAA,eAAe,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;QACtC;AAAO,aAAA,IAAI,eAAe,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE;YACpE,eAAe,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;QAC3D;AAEA,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,eAAe,CAAC,GAAG,CAAA,EAAA,CAAI;AACnD,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,eAAe,CAAC,IAAI,CAAA,EAAA,CAAI;QACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW;IAC3C;IAEQ,WAAW,GAAA;QACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;IACzC;wGA3CW,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAArB,qBAAqB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;sBAGE;;sBASA,YAAY;uBAAC,YAAY;;sBAIzB,YAAY;uBAAC,YAAY;;;ACnB5B,MAAM,gBAAgB,GAAW,SAAS;AAE1C,MAAM,SAAS,GAAW,QAAQ;AAClC,MAAM,YAAY,GAAW,MAAM;AACnC,MAAM,WAAW,GAAW,KAAK;MAMpB,mBAAmB,CAAA;AA0BV,IAAA,OAAA;AAxBC,IAAA,cAAc;IAGnC,YAAY,GAAA;QACV,IAAI,CAAC,IAAI,CAAC,cAAc;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC;AAEhG,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,CAAC;AACpG,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAC3C;AACJ,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;IAChD;IAGA,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,CAAC;AACpG,YAAA,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;;AAE1C,YAAA,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;IAC/C;AAGA,IAAA,MAAM;AAEN,IAAA,WAAA,CAAoB,OAAmB,EAAA;QAAnB,IAAA,CAAA,OAAO,GAAP,OAAO;IAAgB;AAE3C,IAAA,mBAAmB,CAAC,KAAa,EAAA;AAC/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC;AAClG,QAAA,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC;IACzC;AAEA,IAAA,oBAAoB,CAAC,KAAa,EAAA;AAChC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC;AACtG,QAAA,QAAQ,EAAE,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACtE;wGApCW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAnB,mBAAmB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,CAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAJ/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;sBAGE,KAAK;uBAAC,YAAY;;sBAElB,YAAY;uBAAC,YAAY;;sBAWzB,YAAY;uBAAC,YAAY;;sBAQzB;;;AC/BH,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC;MAM1B,mBAAmB,CAAA;AAIV,IAAA,EAAA;AAAwB,IAAA,IAAA;AAA6D,IAAA,iBAAA;AAFpF,IAAA,WAAW;AAEhC,IAAA,WAAA,CAAoB,EAAc,EAAU,IAAgB,EAA6C,iBAAoC,EAAA;QAAzH,IAAA,CAAA,EAAE,GAAF,EAAE;QAAsB,IAAA,CAAA,IAAI,GAAJ,IAAI;QAAyD,IAAA,CAAA,iBAAiB,GAAjB,iBAAiB;IAAuB;AAGjJ,IAAA,OAAO,CAAC,KAAK,EAAA;AACX,QAAA,IAAI,GAAG,GAAG;AACR,YAAA,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,WAAW,EAAE,OAAO;AACpD,YAAA,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU;AAC7C,YAAA,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS;YAC3C,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAc,MAAM;gBAChG,SAAS,EAAE,SAAS,CAAC,IAAI;gBACzB,KAAK,EAAE,SAAS,CAAC;AAClB,aAAA,CAAC,CAAC;AACH,YAAA,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO;AACxC,YAAA,QAAQ,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC;YACrI,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,WAAW,EAAE,IAAI,CAAC;SACnB;QACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG,IAAG,EAAG,CAAC,CAAC;IAC5F;AAxBW,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,sEAIwC,yBAAyB,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAJpF,mBAAmB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,CAAA,YAAA,EAAA,aAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAJ/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;0BAKgE,MAAM;2BAAC,yBAAyB;;sBAF9F,KAAK;uBAAC,YAAY;;sBAIlB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;MCQtB,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAfzB,uBAAuB;YACvB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB,CAAA,EAAA,OAAA,EAAA,CASnB,YAAY,CAAA,EAAA,OAAA,EAAA,CANZ,uBAAuB;YACvB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB,CAAA,EAAA,CAAA;AAMV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHzB,YAAY,CAAA,EAAA,CAAA;;4FAGH,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAjB5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,uBAAuB;wBACvB,qBAAqB;wBACrB,mBAAmB;wBACnB,mBAAmB;AACpB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,uBAAuB;wBACvB,qBAAqB;wBACrB,mBAAmB;wBACnB,mBAAmB;AACpB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;AACb,qBAAA;AACF,iBAAA;;;ACvBD;;AAEG;;;;"}

package/fesm2022/herum-shared-molecules.mjs

@@ -4,12 +4,14 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5 from 'herum-shared/pipes';
+import * as i3 from 'herum-shared/directives';
+import { DirectivesModule } from 'herum-shared/directives';
+import * as i6 from 'herum-shared/pipes';
 import { PipesModule } from 'herum-shared/pipes';
 import { openClose } from 'herum-shared/animations';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i3 from '@angular/cdk/bidi';
+import * as i3$1 from '@angular/cdk/bidi';
 import * as i2$1 from 'herum-shared/atoms';
 import { AtomsModule } from 'herum-shared/atoms';
 import * as i1$2 from 'herum-shared/services';
@@ -105,7 +107,7 @@ class HerumActiveMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:12px;justify-content:flex-start;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumActiveMenuComponent, isStandalone: false, selector: "herum-active-menu", inputs: { useIcons: "useIcons", view: "view", activeColor: "activeColor", activeTextColor: "activeTextColor", secondaryTextColor: "secondaryTextColor", menuItems: "menuItems", selectedItem: "selectedItem", selectById: "selectById", isBlock: "isBlock", dragEvent: "dragEvent" }, outputs: { selectionIndex: "selectionIndex" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true }, { propertyName: "tabsElement", predicate: ["tabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul #tabsContainer class=\"tabs group\" [ngClass]=\"view\" [class.isBlock]=\"isBlock\">\r\n    <li #tabs *ngFor=\"let menuItem of menuItems; let i = index\"\r\n        [class.active]=\"selectById ? menuItem?.id === selectedItem?.id : (currentItemIndex === i || menuItem === selectedItem)\">\r\n        <a  (click)=\"_onSelectTab(i)\" [userAction]=\"menuItem.label\">\r\n            <span *ngIf=\"useIcons\" [innerHTML]=\"menuItem.icon | safeHtml\"\r\n                [ngClass]=\"i == currentItemIndex ? 'active-icon' : 'non-active-icon'\">\r\n            </span>\r\n\r\n            <p class=\"m-0 truncate\" [matTooltip]=\"menuItem.label\">\r\n                {{ menuItem.label }}\r\n            </p>\r\n        </a>\r\n    </li>\r\n</ul>", styles: ["a{cursor:pointer;display:flex;width:100%;gap:8px;align-items:center;justify-content:center;z-index:3}a .active-icon{stroke:var(--active-menu-background, var(--icons-color))}a .active-icon,a .non-active-icon{z-index:3;width:24px}a .non-active-icon{stroke:var(--active-menu-secondary-text-color, #ffffff)}.narrow a{flex-direction:column}.narrow a span{height:18px}.narrow a p{font-size:14px;margin-right:0}#content{background-color:#fff;position:relative;overflow:hidden;min-height:400px}.tabs{list-style:none;width:100%}.tabs li{float:left;height:40px;position:relative}.tabs a{float:left;padding-inline:10px;background-color:var(--active-menu-background);height:100%}.tabs a p{text-decoration:none;font-size:16px;font-weight:500;color:var(--active-menu-secondary-text-color, #ffffff);z-index:3}.isBlock a p{color:gray}.active a{border-top-left-radius:12px;border-top-right-radius:12px}.active a p{color:var(--active-menu-text-color, var(--icons-color))}.tabs .active{z-index:3}.tabs .active a{background-color:#fff;color:var(--icons-color)}.tabs li:before,.tabs li:after,.tabs li a:before,.tabs li a:after{position:absolute;bottom:0}.tabs li:last-child:after,.tabs li:last-child a:after,.tabs li:first-child:before,.tabs li:first-child a:before,.tabs .active:after,.tabs .active:before,.tabs .active a:after,.tabs .active a:before{content:\"\"}.tabs .active:before,.tabs .active:after{background-color:#fff;z-index:1}.tabs li:before,.tabs li:after{background-color:var(--active-menu-background, var(--icons-color));width:12px;height:12px}.tabs li:before{left:-12px}.tabs li:after{right:-12px}.tabs li a:after,.tabs li a:before{width:20px;height:20px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:var(--active-menu-background, var(--icons-color));z-index:2}.tabs .active a:after,.tabs .active a:before{background-color:var(--active-menu-background, var(--icons-color))}.tabs li:first-child.active a:before,.tabs li:last-child.active a:after{background-color:var(--active-menu-background, var(--icons-color))}.tabs li a:before{left:-20px}.tabs li a:after{right:-20px}ul{background-color:var(--active-menu-background, var(--icons-color));height:52px;margin:0;padding-top:12px;justify-content:flex-start;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumActiveMenuComponent, decorators: [{
             type: Component,
@@ -254,7 +256,7 @@ class HerumAutocompleteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i2$1.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n    <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n        [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n        [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n        (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n    </herum-input-field>\r\n\r\n    <div class=\"autocomplete-dropdown\"  [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n        [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n        <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n            <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n                <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\">&nbsp;</span>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #optionsList>\r\n            <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n                <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n                    <div class=\"option-main\">\r\n                        <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n                            <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n                        </ng-container>\r\n                        \r\n                        <ng-template #defaultLeadingIcon>\r\n                            <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n                        </ng-template>\r\n\r\n                        <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n                    </div>\r\n\r\n                    <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n                        {{ option[subTitleBy] }}\r\n                    </span>\r\n                </a>\r\n            </ng-container>\r\n\r\n            <ng-template #noResults>\r\n                <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n                    class=\"autocomplete-option text-center no-results-blurred\">\r\n                    {{ noResultsText }}\r\n                </a>\r\n            </ng-template>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2$1.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
             type: Component,
@@ -854,7 +856,7 @@ class HerumDropZoneComponent {
         this.errorMessages = this.errorMessages.filter(errorMessage => errorMessage.message !== requiredFieldMessage);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, deps: [{ token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\"> {{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-btn\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDropZoneComponent, isStandalone: false, selector: "herum-drop-zone", inputs: { selectedFiles: "selectedFiles", placeholder: "placeholder", numberOfAllowedFiles: "numberOfAllowedFiles", allowedFileTypes: "allowedFileTypes", supportedFilesMimes: "supportedFilesMimes", supportedFilesTypes: "supportedFilesTypes", requiredField: "requiredField", directionPreview: "directionPreview", type: "type", grow: "grow", fillContainer: "fillContainer", uploadFileSvg: "uploadFileSvg", previewImageUrl: "previewImageUrl", allowToDeleteImage: "allowToDeleteImage" }, outputs: { filesDataEvent: "filesDataEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button class=\"dropzone\" [class.not-displayed]=\"previewImageUrl\" [class.fill-container]=\"fillContainer\"\r\n    [style.height]=\"grow ? '100%' : ''\" (drop)=\"_onUploadDroppedFiles($event)\" (click)=\"_onClickFileInput()\"\r\n    (dragover)=\"_onPreventDefault($event)\">\r\n    <div svgOnHover class=\"dropzone-content upload-file-border\" [style.height]=\"grow ? '100%' : '130px'\"\r\n        [ngClass]=\"{'row-dropzone':type=='row'}\"\r\n        [ngStyle]=\"{'justify-content': (filesList?.length || type == 'row') ? 'start' : 'center'}\">\r\n        <div class=\"center-icon\" [ngClass]=\"{'upload-file-row-preview':directionPreview==='row' }\"\r\n            *ngIf=\"!filesList?.length\">\r\n            <span class=\"upload-file-image mb-2\" [style.height]=\"grow ? '60px' : ''\" [style.width]=\"grow ? '60px' : ''\"\r\n                [innerHTML]=\"uploadFileSvg | safeHtml\">\r\n            </span>\r\n\r\n            <div class=\"dropzone-text\" [style.fontSize]=\"grow ? 'large' : ''\"> {{ placeholder }} </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"filesList?.length > 0\">\r\n            <div class=\"files-container\" *ngFor=\"let file of filesList;  index as i\">\r\n                <img [src]=\"getIconPath(file)\" alt=\"#{{i+1}} picture\" />\r\n\r\n                <span class=\"file-name truncate\"> {{ file?.name }}</span>\r\n\r\n                <div class=\"delete-container\" (click)=\"_onRemoveFile(i, $event)\">\r\n                    <img class=\"delete-button\" src=\"assets/general/secondary-x.svg\">\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngFor=\"let error of errorMessages\">\r\n            <span *ngIf=\"error.condition()\" class=\"error-msg\"\r\n                [matTooltip]=\"!isSupportedFileType ? '\u05E1\u05D5\u05D2\u05D9 \u05D4\u05E7\u05D1\u05E6\u05D9\u05DD \u05D4\u05E0\u05EA\u05DE\u05DB\u05D9\u05DD: ' + supportedFilesTypes : ''\">\r\n                {{ error.message }}\r\n            </span>\r\n        </div>\r\n\r\n        <span (click)=\"$event.stopPropagation()\">\r\n            <herum-download-file *ngIf=\"!isSupportedFileType\" [filePath]=\"convertorMediaPath\"\r\n                linkText=\"\u05DC\u05D4\u05D5\u05E8\u05D3\u05D4 \u05EA\u05D5\u05DB\u05E0\u05EA \u05D4\u05DE\u05E8\u05EA \u05DE\u05D3\u05D9\u05D4\">\r\n            </herum-download-file>\r\n        </span>\r\n    </div>\r\n</button>\r\n\r\n<div *ngIf=\"previewImageUrl\" class=\"preview-wrapper\">\r\n    <div class=\"image-container\">\r\n        <img [src]=\"previewImageUrl\" alt=\"Preview\" class=\"preview-image\">\r\n\r\n        <button type=\"button\" class=\"remove-btn\" aria-label=\"Remove image\" (click)=\"_onRemoveImage()\">\r\n            <img class=\"remove-icon\" src=\"assets/general/secondary-x.svg\" alt=Remove />\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<input #fileInput class=\"d-none\" type=\"file\" [accept]=\"parsedAllowedFileTypes\" (change)=\"_onUploadFiles($event)\"\r\n    multiple>", styles: [":host{--close-button-size: 12px;display:flex}.dropzone{display:flex;align-items:center;flex-direction:column;overflow-y:auto;flex:1;border:none;background-color:transparent}.dropzone .dropzone-content{width:100%;display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center}.row-dropzone{display:flex;align-items:center;flex-direction:row!important;gap:8px!important;height:unset!important;padding:8px!important}.upload-file-row-preview{display:flex;gap:8px}.center-icon{align-items:center;display:flex;justify-content:center;flex-direction:column}.dropzone-content:hover{background:var(--item-hover-color);border-color:var(--secondary-color)}.dropzone-content:active{transform:scale(.96)}.dropzone-text{text-align:center}.files-container{display:flex;padding-block-start:10px;gap:10px;width:95%;height:50px;padding:5px;align-items:center}.file-name{width:90%;line-height:1}.delete-container{display:flex;align-items:center;height:100%;width:24px;z-index:3}.delete-button{height:12px;width:12px;position:relative}.upload-file-image{display:flex;align-items:center;justify-content:center;cursor:pointer}.fill-container,.fill-container .dropzone-content{height:100%!important}.not-displayed{display:none}.preview-wrapper{display:inline-block;height:100%;width:100%}.preview-wrapper .image-container{position:relative;display:inline-block;height:100%;width:100%}.preview-wrapper .image-container .preview-image{width:100%;height:100%;border-radius:var(--upload-file-border-radius);object-fit:cover;display:block;position:relative;transition:filter .4s ease}.preview-wrapper .image-container .remove-btn{position:absolute;top:8px;left:8px;background:var(--dark-overlay);border:none;width:var(--close-button-size);height:var(--close-button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s ease}.preview-wrapper .image-container .remove-btn:hover{opacity:1}.preview-wrapper .image-container .remove-btn .remove-icon{height:var(--close-button-size);width:var(--close-button-size);filter:brightness(0) invert(1)}.preview-wrapper .image-container:hover .preview-image{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.SvgOnHoverDirective, selector: "[svgOnHover]", inputs: ["svgOnHover"] }, { kind: "component", type: i2$1.HerumDownloadFileComponent, selector: "herum-download-file", inputs: ["fileId", "filePath", "linkText"], outputs: ["downloadFile"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDropZoneComponent, decorators: [{
             type: Component,
@@ -1031,7 +1033,7 @@ class HerumHierarchyTreeNodeComponent {
         return this.environmentConfig?.environment?.systemIdentifier == system.hadracha;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: HERUM_SHARED_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i5.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i5.EllipsisPipe, name: "ellipsis" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumHierarchyTreeNodeComponent, isStandalone: false, selector: "herum-hierarchy-tree-node", inputs: { treeNodeData: "treeNodeData", size: "size", expandedMode: "expandedMode", showArrow: "showArrow", showAssignmentsDetails: "showAssignmentsDetails", nodeMenuItems: "nodeMenuItems" }, outputs: { onNodeSelected: "onNodeSelected", onMenuItemSelected: "onMenuItemSelected", onExpand: "onExpand" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-container\" [class]=\"systemIdentifier\" [id]=\"'tree-node-container-' + treeNodeData.id\"\r\n    *ngIf=\"treeNodeData\" [ngClass]=\"treeNodeData.status + ' ' + size + ' ' + expandedMode\" #nodeTitle appHerumToolTip>\r\n    <div class=\"decorative-line\"></div>\r\n\r\n    <div class=\"menu-icon-container\" *ngIf=\"nodeMenuItems?.length > 0\">\r\n        <img src=\"/assets/hadracha/general/menu-button.svg\" [matMenuTriggerFor]=\"menu\">\r\n        <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let nodeMenuItem of nodeMenuItems\"\r\n                (click)=\"_onMenuItemSelected(nodeMenuItem)\">\r\n                <img src=\"/assets/hadracha/structs/{{nodeMenuItem.iconName}}.svg\">\r\n                {{ nodeMenuItem.displayText }}\r\n            </button>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <p #treeNodeDataTitle [id]=\"'tree-node-title-' + treeNodeData.id\"\r\n        [matTooltip]=\"_isTruncatedTitleElement(nodeTitle) ? treeNodeData.title : ''\" (click)=\"_onNodeSelected()\">\r\n        {{treeNodeData.title | ellipsis:treeNodeDataTitle }}\r\n    </p>\r\n\r\n    <p class=\"totals\" *ngIf=\"showAssignmentsDetails\">\r\n        <ng-container *ngIf=\"isHerum\">\r\n            <span [matTooltip]='toRPActualAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPActualAssignments}}\r\n            </span> /\r\n            <span [matTooltip]='expectedAssignmentsDisplayText'> {{this.treeNodeData.totals?.toRPExpectedAssignments}}\r\n            </span>\r\n            <span class=\"invalid-assignments\" [ngClass]=\"{'green':this.treeNodeData.totals?.invalidAssignments == 0}\"\r\n                [matTooltip]='invalidAssignmentsDisplayText'>\r\n                +{{this.treeNodeData.totals?.invalidAssignments}}\r\n            </span>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isHadracha\">\r\n            <div class=\"total-value\">\r\n                {{this.treeNodeData.totals.total}}\r\n            </div>\r\n            <p class=\"total-text\">\u05D7\u05E0\u05D9\u05DB\u05D9\u05DD</p>\r\n        </ng-container>\r\n    </p>\r\n\r\n    <br *ngIf=\"!showAssignmentsDetails\">\r\n\r\n    <div class=\"row\">\r\n        <herum-progress-bar *ngIf=\"!isHadracha\" [percentage]=\"treeNodeData.percentage ? treeNodeData.percentage:0 \"\r\n            [negativePercentage]=\"negativePercentage\" [type]=\"'solid'\" [size]=\"'tight'\">\r\n        </herum-progress-bar>\r\n\r\n        <span class=\"chevron\" *ngIf=\"showArrow\" [ngStyle]=\"{transform: isExpand ? 'rotate(180deg)' : 'none'}\"\r\n            [innerHTML]=\"smallChevronSvg | safeHtml\" (click)=\"_onExpand()\">\r\n        </span>\r\n    </div>\r\n</div>", styles: [":host{border-radius:0 0 var(--border-radius) var(--border-radius)}.node-container{box-shadow:0 0 var(--box-shadow-blur) #00000029!important;display:flex;flex-direction:column;width:170px;gap:4px;padding:4px;border-radius:var(--border-radius);background-color:#fff}.node-container p{margin:0;font-weight:700;font-size:14px}.node-container .row{justify-content:center;align-items:center;position:relative}.node-container .row .chevron{position:absolute;bottom:-20px;background-color:#fff;border-radius:50%;box-shadow:0 0 var(--box-shadow-blur) #00000029!important;width:20px;cursor:pointer;height:20px;z-index:99;padding:1px;stroke:var(--icons-color)}.node-container .totals{font-size:12px;direction:ltr;margin-bottom:8px}.node-container .totals .invalid-assignments{color:var(--error-color);margin-left:8px}.competency-cluster-container{width:100%;display:flex;justify-content:center;align-items:center;padding-bottom:8px}.regular{width:170px}.small{width:140px!important}.close .row .chevron,.open .row .chevron{display:block}.d-flex{justify-content:space-between}.none .row .chevron{display:none}.high{border-top:4px solid var(--icons-color)}.medium{border-top:4px solid orange}.low{border-top:4px solid var(--error-color)}.green{color:var(--icons-color)!important}.decorative-line,.menu-icon-container{display:none}.mat-menu-item{font-family:heebo;font-size:14px;font-weight:400;color:var(--icons-color)}.mat-menu-item:not(:last-child){border-bottom:1px solid var(--divider-color)}::ng-deep .mat-menu-panel{border-radius:var(--border-radius)!important}::ng-deep .mat-menu-content{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-menu-content button{display:flex;align-items:center;gap:8px;height:36px}.hadracha:hover .menu-icon-container{display:block;height:10px;position:absolute;top:4px;left:12px;z-index:1}.hadracha:hover .menu-icon-container img{height:14px}.hadracha{border-top:none!important;border-radius:0 0 var(--border-radius) var(--border-radius);position:relative}.hadracha .decorative-line{display:block;width:100%;height:4px;background-color:var(--icons-color);border-radius:10px;position:absolute;top:-6px;left:0;z-index:1}.hadracha .totals{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}.hadracha .totals .total-value{padding:4px;width:33px;height:33px;background-color:var(--icons-color-light-2);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center}.hadracha .totals p.total-text{font-size:12px;font-weight:400;text-align:center;margin:0}.hadracha .node-container:hover .totals .total-value{background-color:var(--divider-color)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.HerumToolTipDirective, selector: "[appHerumToolTip]", inputs: ["tooltipText"] }, { kind: "component", type: i2$1.HerumProgressBarComponent, selector: "herum-progress-bar", inputs: ["percentage", "invalidPercentage", "showPercentage", "percentagePosition", "type", "size", "color", "borderRadius", "total", "showBorder", "thickness"] }, { kind: "pipe", type: i6.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i6.EllipsisPipe, name: "ellipsis" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumHierarchyTreeNodeComponent, decorators: [{
             type: Component,
@@ -1402,6 +1404,7 @@ class MoleculesModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             PipesModule,
             AtomsModule], exports: [HerumActiveLinkComponent,
             HerumActiveMenuComponent,
@@ -1443,6 +1446,7 @@ class MoleculesModule {
             DragDropModule,
             MatDatepickerModule,
             MatNativeDateModule,
+            DirectivesModule,
             PipesModule,
             AtomsModule] });
 }
@@ -1513,6 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         DragDropModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        DirectivesModule,
                         PipesModule,
                         AtomsModule
                     ],