ngx-t-forms 2.0.23 → 2.0.25

package/fesm2022/ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-A9_4GxP6.mjs';
+import { Subject, timer } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/material/button';
+import * as i2$1 from '@angular/material/icon';
+
+class MscoaTemporaryHintComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.message = '';
+        this.duration = 5000; // Default 5 seconds
+        this.showDismiss = true;
+        this.type = 'info';
+        this.visible = false;
+        this.destroy$ = new Subject();
+        this.hideTimer$ = new Subject();
+    }
+    ngOnInit() {
+        if (this.message) {
+            this.show();
+        }
+    }
+    ngOnChanges(changes) {
+        // React to message changes
+        if (changes['message']) {
+            const currentMessage = changes['message'].currentValue;
+            const previousMessage = changes['message'].previousValue;
+            // If message changed from empty to non-empty, show it
+            if (currentMessage && currentMessage !== previousMessage) {
+                this.show();
+            }
+            // If message changed from non-empty to empty, hide it
+            else if (!currentMessage && previousMessage) {
+                this.hide();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.hideTimer$.next();
+        this.hideTimer$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    show() {
+        // Cancel any existing timer
+        this.hideTimer$.next();
+        this.visible = true;
+        this.cdr.markForCheck();
+        // Auto-hide after duration
+        timer(this.duration).pipe(takeUntil(this.hideTimer$), takeUntil(this.destroy$)).subscribe(() => {
+            this.hide();
+        });
+    }
+    hide() {
+        // Cancel timer when hiding manually
+        this.hideTimer$.next();
+        this.visible = false;
+        this.cdr.markForCheck();
+    }
+    dismiss() {
+        this.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaTemporaryHintComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaTemporaryHintComponent, isStandalone: true, selector: "app-mscoa-temporary-hint", inputs: { message: "message", duration: "duration", showDismiss: "showDismiss", type: "type" }, usesOnChanges: true, ngImport: i0, template: "@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".temporary-hint{display:flex;align-items:flex-start;gap:var(--mscoa-chart-spacing-sm, 8px);padding:var(--mscoa-chart-spacing-sm, 8px) var(--mscoa-chart-spacing-md, 16px);margin-top:var(--mscoa-chart-spacing-sm, 8px);border-radius:var(--mscoa-chart-border-radius, 4px);font-size:13px;line-height:1.5;animation:slideInFade var(--mscoa-chart-transition, .2s ease);transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint--info{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-left:3px solid var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance{background-color:var(--mat-sys-tertiary-container, #fff3e0);color:var(--mat-sys-on-tertiary-container, #1c1b16);border-left:3px solid var(--mat-sys-tertiary, #f57c00)}.temporary-hint__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;margin-top:2px;color:var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance .temporary-hint__icon{color:var(--mat-sys-tertiary, #f57c00)}.temporary-hint__content{flex:1;min-width:0}.temporary-hint__message{margin:0;font-weight:400}.temporary-hint__dismiss{flex-shrink:0;width:24px;height:24px;opacity:.7;transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint__dismiss:hover{opacity:1}.temporary-hint__dismiss mat-icon{font-size:18px;width:18px;height:18px}@keyframes slideInFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.temporary-hint.ng-leave{animation:slideOutFade var(--mscoa-chart-transition, .2s ease)}@keyframes slideOutFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaTemporaryHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mscoa-temporary-hint', standalone: true, imports: [CommonModule, MatModulesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".temporary-hint{display:flex;align-items:flex-start;gap:var(--mscoa-chart-spacing-sm, 8px);padding:var(--mscoa-chart-spacing-sm, 8px) var(--mscoa-chart-spacing-md, 16px);margin-top:var(--mscoa-chart-spacing-sm, 8px);border-radius:var(--mscoa-chart-border-radius, 4px);font-size:13px;line-height:1.5;animation:slideInFade var(--mscoa-chart-transition, .2s ease);transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint--info{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-left:3px solid var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance{background-color:var(--mat-sys-tertiary-container, #fff3e0);color:var(--mat-sys-on-tertiary-container, #1c1b16);border-left:3px solid var(--mat-sys-tertiary, #f57c00)}.temporary-hint__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;margin-top:2px;color:var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance .temporary-hint__icon{color:var(--mat-sys-tertiary, #f57c00)}.temporary-hint__content{flex:1;min-width:0}.temporary-hint__message{margin:0;font-weight:400}.temporary-hint__dismiss{flex-shrink:0;width:24px;height:24px;opacity:.7;transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint__dismiss:hover{opacity:1}.temporary-hint__dismiss mat-icon{font-size:18px;width:18px;height:18px}@keyframes slideInFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.temporary-hint.ng-leave{animation:slideOutFade var(--mscoa-chart-transition, .2s ease)}@keyframes slideOutFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { message: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], showDismiss: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+export { MscoaTemporaryHintComponent };
+//# sourceMappingURL=ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs.map

package/fesm2022/ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-chart/components/mscoa-temporary-hint/mscoa-temporary-hint.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-chart/components/mscoa-temporary-hint/mscoa-temporary-hint.component.html"],"sourcesContent":["import { Component, Input, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatModulesModule } from '../../../../../../../../shared/modules/mat-modules.module';\r\nimport { Subject, timer } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\n@Component({\r\n  selector: 'app-mscoa-temporary-hint',\r\n  standalone: true,\r\n  imports: [CommonModule, MatModulesModule],\r\n  templateUrl: './mscoa-temporary-hint.component.html',\r\n  styleUrls: ['./mscoa-temporary-hint.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MscoaTemporaryHintComponent implements OnInit, OnChanges, OnDestroy {\r\n  @Input() message: string = '';\r\n  @Input() duration: number = 5000; // Default 5 seconds\r\n  @Input() showDismiss: boolean = true;\r\n  @Input() type: 'info' | 'guidance' = 'info';\r\n\r\n  visible: boolean = false;\r\n  private readonly destroy$ = new Subject<void>();\r\n  private hideTimer$ = new Subject<void>();\r\n\r\n  constructor(private readonly cdr: ChangeDetectorRef) {}\r\n\r\n  ngOnInit(): void {\r\n    if (this.message) {\r\n      this.show();\r\n    }\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // React to message changes\r\n    if (changes['message']) {\r\n      const currentMessage = changes['message'].currentValue;\r\n      const previousMessage = changes['message'].previousValue;\r\n      \r\n      // If message changed from empty to non-empty, show it\r\n      if (currentMessage && currentMessage !== previousMessage) {\r\n        this.show();\r\n      }\r\n      // If message changed from non-empty to empty, hide it\r\n      else if (!currentMessage && previousMessage) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.hideTimer$.next();\r\n    this.hideTimer$.complete();\r\n    this.destroy$.next();\r\n    this.destroy$.complete();\r\n  }\r\n\r\n  show(): void {\r\n    // Cancel any existing timer\r\n    this.hideTimer$.next();\r\n    \r\n    this.visible = true;\r\n    this.cdr.markForCheck();\r\n    \r\n    // Auto-hide after duration\r\n    timer(this.duration).pipe(\r\n      takeUntil(this.hideTimer$),\r\n      takeUntil(this.destroy$)\r\n    ).subscribe(() => {\r\n      this.hide();\r\n    });\r\n  }\r\n\r\n  hide(): void {\r\n    // Cancel timer when hiding manually\r\n    this.hideTimer$.next();\r\n    this.visible = false;\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.hide();\r\n  }\r\n}\r\n","@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n"],"names":["i1","i2"],"mappings":"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"}