ngx-dsxlibrary 2.21.45 → 2.21.47

package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs

@@ -127,6 +127,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }] } });
 
+class AppMessageHelpComponent {
+    elementRef;
+    renderer;
+    defaultFloatLabelHelpSpace = '1.6rem';
+    floatLabelElement = null;
+    previousInlineMarginBottom = '';
+    lastAppliedVisibleState = false;
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    control = null;
+    helperFunction = 'dateLong';
+    ngAfterViewInit() {
+        this.floatLabelElement = this.elementRef.nativeElement.closest('.p-floatlabel');
+        if (this.floatLabelElement) {
+            this.previousInlineMarginBottom =
+                this.floatLabelElement.style.marginBottom;
+            this.syncFloatLabelSpacing();
+        }
+    }
+    ngDoCheck() {
+        this.syncFloatLabelSpacing();
+    }
+    ngOnDestroy() {
+        if (!this.floatLabelElement) {
+            return;
+        }
+        if (this.previousInlineMarginBottom) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
+            return;
+        }
+        this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
+    }
+    getHelpMessage() {
+        if (this.helperFunction === 'dateLong') {
+            return this.buildDateLongMessage();
+        }
+        return null;
+    }
+    isHelpVisible() {
+        if (!this.control?.valid) {
+            return false;
+        }
+        return !!this.getHelpMessage();
+    }
+    syncFloatLabelSpacing() {
+        if (!this.floatLabelElement) {
+            return;
+        }
+        const isVisible = this.isHelpVisible();
+        if (isVisible === this.lastAppliedVisibleState) {
+            return;
+        }
+        this.lastAppliedVisibleState = isVisible;
+        if (isVisible) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.defaultFloatLabelHelpSpace);
+            return;
+        }
+        if (this.previousInlineMarginBottom) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
+            return;
+        }
+        this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
+    }
+    buildDateLongMessage() {
+        const rawValue = this.control?.value;
+        if (!rawValue) {
+            return null;
+        }
+        const date = this.parseDateInput(rawValue);
+        if (!date) {
+            return null;
+        }
+        const formattedDate = new Intl.DateTimeFormat('es-GT', {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }).format(date);
+        const message = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+        return `${message}`;
+    }
+    parseDateInput(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'string') {
+            const shortDateMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+            if (shortDateMatch) {
+                const year = Number(shortDateMatch[1]);
+                const month = Number(shortDateMatch[2]) - 1;
+                const day = Number(shortDateMatch[3]);
+                const localDate = new Date(year, month, day);
+                return Number.isNaN(localDate.getTime()) ? null : localDate;
+            }
+            const parsedDate = new Date(value);
+            return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageHelpComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AppMessageHelpComponent, isStandalone: true, selector: "dsx-message-help", inputs: { control: "control", helperFunction: "helperFunction" }, ngImport: i0, template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div class=\"dsx-help-message\">\r\n      <i class=\"pi pi-info-circle dsx-help-icon\" aria-hidden=\"true\"></i>\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:3.6rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;max-width:min(52ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:4.4rem}.dsx-help-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{max-width:min(52ch,calc(100% - .25rem))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageHelpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-message-help', template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div class=\"dsx-help-message\">\r\n      <i class=\"pi pi-info-circle dsx-help-icon\" aria-hidden=\"true\"></i>\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:3.6rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;max-width:min(52ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:4.4rem}.dsx-help-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{max-width:min(52ch,calc(100% - .25rem))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
+                type: Input
+            }], helperFunction: [{
+                type: Input
+            }] } });
+
 class DsxStatusToggle {
     onLabel = input('Activo', ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
     offLabel = input('Inactivo', ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
@@ -1044,5 +1157,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppMessageErrorComponent, DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
+export { AppMessageErrorComponent, AppMessageHelpComponent, DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
 //# sourceMappingURL=ngx-dsxlibrary-src-lib-components.mjs.map