{
  "version": 3,
  "sources": ["src/app/settings/_components/setting-item/setting-item.component.ts", "src/app/settings/_components/setting-item/setting-item.component.html"],
  "sourcesContent": ["import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ContentChild, ElementRef, EventEmitter, HostListener,\r\n  inject,\r\n  Input, Output,\r\n  TemplateRef\r\n} from '@angular/core';\r\nimport {TranslocoDirective} from \"@jsverse/transloco\";\r\nimport {NgTemplateOutlet} from \"@angular/common\";\r\nimport {SafeHtmlPipe} from \"../../../_pipes/safe-html.pipe\";\r\nimport {filter, fromEvent, tap} from \"rxjs\";\r\n\r\n@Component({\r\n  selector: 'app-setting-item',\r\n  standalone: true,\r\n  imports: [\r\n    TranslocoDirective,\r\n    NgTemplateOutlet,\r\n    SafeHtmlPipe\r\n  ],\r\n  templateUrl: './setting-item.component.html',\r\n  styleUrl: './setting-item.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SettingItemComponent {\r\n\r\n  private readonly cdRef = inject(ChangeDetectorRef);\r\n\r\n  @Input({required:true}) title: string = '';\r\n  @Input() editLabel: string | undefined = undefined;\r\n  @Input() canEdit: boolean = true;\r\n  @Input() showEdit: boolean = true;\r\n  @Input() isEditMode: boolean = false;\r\n  @Input() subtitle: string | undefined = undefined;\r\n  @Input() labelId: string | undefined = undefined;\r\n  @Input() toggleOnViewClick: boolean = true;\r\n  @Output() editMode = new EventEmitter<boolean>();\r\n\r\n  /**\r\n   * Extra information to show next to the title\r\n   */\r\n  @ContentChild('titleExtra') titleExtraRef!: TemplateRef<any>;\r\n  /**\r\n   * View in View mode\r\n   */\r\n  @ContentChild('view') valueViewRef!: TemplateRef<any>;\r\n  /**\r\n   * View in Edit mode\r\n   */\r\n  @ContentChild('edit') valueEditRef!: TemplateRef<any>;\r\n  /**\r\n   * Extra button controls to show instead of Edit\r\n   */\r\n  @ContentChild('titleActions') titleActionsRef!: TemplateRef<any>;\r\n\r\n  @HostListener('click', ['$event'])\r\n  onClickInside(event: MouseEvent) {\r\n    event.stopPropagation(); // Prevent the click from bubbling up\r\n  }\r\n\r\n  constructor(elementRef: ElementRef) {\r\n    if (!this.toggleOnViewClick) return;\r\n\r\n    fromEvent(window, 'click')\r\n      .pipe(\r\n        filter((event: Event) => {\r\n          if (!this.toggleOnViewClick) return false;\r\n\r\n          const mouseEvent = event as MouseEvent;\r\n          const selection = window.getSelection();\r\n          const hasSelection = selection !== null && selection.toString().trim() === '';\r\n          return !elementRef.nativeElement.contains(mouseEvent.target) && hasSelection;\r\n        }),\r\n        tap(() => {\r\n          this.isEditMode = false;\r\n          this.editMode.emit(this.isEditMode);\r\n          this.cdRef.markForCheck();\r\n        })\r\n      )\r\n      .subscribe();\r\n  }\r\n\r\n  toggleEditMode() {\r\n\r\n    if (!this.toggleOnViewClick) return;\r\n\r\n    this.isEditMode = !this.isEditMode;\r\n    this.editMode.emit(this.isEditMode);\r\n    this.cdRef.markForCheck();\r\n  }\r\n\r\n}\r\n", "<ng-container *transloco=\"let t;\">\r\n  <div class=\"container-fluid\">\r\n    <div class=\"row g-0\">\r\n      <div class=\"col-10\">\r\n        <h6 class=\"section-title\">\r\n          @if(labelId) {\r\n            <label class=\"reset-label\" [for]=\"labelId\">{{title}}</label>\r\n          } @else {\r\n            {{title}}\r\n          }\r\n          @if (titleExtraRef) {\r\n            <ng-container [ngTemplateOutlet]=\"titleExtraRef\"></ng-container>\r\n          }\r\n        </h6>\r\n      </div>\r\n      <div class=\"col-2 text-end align-self-end justify-content-end\">\r\n        @if (showEdit) {\r\n          <button type=\"button\" class=\"btn btn-text btn-sm\" (click)=\"toggleEditMode()\" [disabled]=\"!canEdit\">\r\n            {{isEditMode ? t('common.close') : (editLabel || t('common.edit'))}}\r\n          </button>\r\n        }\r\n        @if (titleActionsRef) {\r\n          <ng-container [ngTemplateOutlet]=\"titleActionsRef\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n\r\n    @if (isEditMode) {\r\n      <ng-container [ngTemplateOutlet]=\"valueEditRef\"></ng-container>\r\n    } @else {\r\n      <span class=\"view-value\" (click)=\"toggleEditMode()\">\r\n        <ng-container [ngTemplateOutlet]=\"valueViewRef\"></ng-container>\r\n      </span>\r\n    }\r\n\r\n\r\n    @if (subtitle) {\r\n      <div class=\"text-muted mt-2\" [innerHTML]=\"subtitle | safeHtml\"></div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n"],
  "mappings": "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",
  "names": ["\u0275\u0275elementStart", "\u0275\u0275text", "\u0275\u0275elementEnd", "\u0275\u0275property", "ctx_r0", "labelId", "\u0275\u0275advance", "\u0275\u0275textInterpolate", "title", "\u0275\u0275textInterpolate1", "\u0275\u0275elementContainer", "titleExtraRef", "\u0275\u0275listener", "\u0275\u0275restoreView", "_r2", "\u0275\u0275nextContext", "\u0275\u0275resetView", "toggleEditMode", "canEdit", "isEditMode", "t_r3", "editLabel", "titleActionsRef", "valueEditRef", "_r4", "valueViewRef", "\u0275\u0275element", "\u0275\u0275pipeBind1", "subtitle", "\u0275\u0275sanitizeHtml", "\u0275\u0275elementContainerStart", "\u0275\u0275template", "SettingItemComponent_ng_container_0_Conditional_5_Template", "SettingItemComponent_ng_container_0_Conditional_6_Template", "SettingItemComponent_ng_container_0_Conditional_7_Template", "SettingItemComponent_ng_container_0_Conditional_9_Template", "SettingItemComponent_ng_container_0_Conditional_10_Template", "SettingItemComponent_ng_container_0_Conditional_11_Template", "SettingItemComponent_ng_container_0_Conditional_12_Template", "SettingItemComponent_ng_container_0_Conditional_13_Template", "\u0275\u0275conditional", "showEdit", "SettingItemComponent", "onClickInside", "event", "stopPropagation", "constructor", "elementRef", "cdRef", "inject", "ChangeDetectorRef", "undefined", "toggleOnViewClick", "editMode", "EventEmitter", "fromEvent", "window", "pipe", "filter", "mouseEvent", "selection", "getSelection", "hasSelection", "toString", "trim", "nativeElement", "contains", "target", "tap", "emit", "markForCheck", "subscribe", "\u0275\u0275directiveInject", "ElementRef", "selectors", "contentQueries", "rf", "ctx", "dirIndex", "$event", "SettingItemComponent_ng_container_0_Template", "TranslocoDirective", "NgTemplateOutlet", "SafeHtmlPipe", "styles", "changeDetection", "_SettingItemComponent"]
}