ngx-tethys 19.0.16 → 19.0.18

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [19.0.18](https://github.com/atinc/ngx-tethys/compare/19.0.17...19.0.18) (2025-07-30)
+
+
+### Features
+
+* **date-picker:** add dateCellRender #TINFR-2386 ([#3495](https://github.com/atinc/ngx-tethys/issues/3495)) ([1fac2cb](https://github.com/atinc/ngx-tethys/commit/1fac2cbe6a8fa54294eb780cb8d7bb334c0f90fd)), closes [#TINFR-2386](https://github.com/atinc/ngx-tethys/issues/TINFR-2386)
+
+
+
+## [19.0.17](https://github.com/atinc/ngx-tethys/compare/19.0.16...19.0.17) (2025-07-29)
+
+
+### Bug Fixes
+
+* **datePicker:** adjust ranger-picker date-panel-flexible style #TINFR-2562 ([#3491](https://github.com/atinc/ngx-tethys/issues/3491)) ([5db74a9](https://github.com/atinc/ngx-tethys/commit/5db74a986f9779d7c432679c63d199b78ca0beea)), closes [#TINFR-2562](https://github.com/atinc/ngx-tethys/issues/TINFR-2562)
+
+
+
 ## [19.0.16](https://github.com/atinc/ngx-tethys/compare/19.0.15...19.0.16) (2025-07-23)
 
 

package/date-picker/date-picker.config.d.ts

@@ -1,4 +1,5 @@
 import { InjectionToken } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
 import { ThyI18nService } from 'ngx-tethys/i18n';
 import { WeekDayIndex } from 'ngx-tethys/util';
 import { CompatiblePresets, ThyShortcutPosition } from './standard-types';
@@ -10,6 +11,7 @@ export interface ThyDatePickerConfig {
     weekStartsOn: WeekDayIndex;
     separator: string;
     timestampPrecision: 'seconds' | 'milliseconds';
+    dateCellRender?: (date: Date) => SafeHtml | undefined;
 }
 /**
  * @deprecated

package/date-picker/lib/date/date-table-cell.component.d.ts

@@ -1,4 +1,5 @@
 import { isTemplateRef } from 'ngx-tethys/util';
+import { ThyDatePickerConfigService } from '../../date-picker.service';
 import { DateCell } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -6,9 +7,12 @@ import * as i0 from "@angular/core";
  */
 export declare class DateTableCell {
     isTemplateRef: typeof isTemplateRef;
-    prefixCls: 'thy-calendar' | 'thy-calendar-full';
-    cell: DateCell;
+    readonly prefixCls: import("@angular/core").InputSignal<"thy-calendar" | "thy-calendar-full">;
+    readonly cell: import("@angular/core").InputSignal<DateCell>;
     isNonEmptyString: (v: any) => boolean;
+    functionRenderResult: import("@angular/core").Signal<boolean>;
+    datePickerConfigService: ThyDatePickerConfigService;
+    cellRender: import("@angular/core").Signal<string | ((date: Date) => import("@angular/platform-browser").SafeHtml | undefined) | import("@angular/core").TemplateRef<Date>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTableCell, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTableCell, "[date-table-cell]", ["dateTableCell"], { "prefixCls": { "alias": "prefixCls"; "required": false; }; "cell": { "alias": "cell"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTableCell, "[date-table-cell]", ["dateTableCell"], { "prefixCls": { "alias": "prefixCls"; "required": false; "isSignal": true; }; "cell": { "alias": "cell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/date-picker/styles/range-picker.scss

@@ -40,6 +40,7 @@ $input-box-height: 34px;
         }
 
         &-flexible {
+            width: 338px;
             .#{style.$calendar-prefix-cls}-picker-inner-popup {
                 width: 338px;
                 .thy-calendar-body {

package/fesm2022/ngx-tethys-date-picker.mjs

@@ -1,9 +1,9 @@
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { formatDate, NgClass, NgTemplateOutlet, CommonModule, isPlatformBrowser, registerLocaleData } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, HostBinding, NgModule, ViewChild, computed, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
+import { Injectable, inject, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, HostBinding, input, computed, NgModule, ViewChild, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
 import localeZhHans from '@angular/common/locales/zh-Hans';
-import { TinyDate, coerceBooleanProperty, subDays, startOfDay, startOfWeek, addDays, addWeeks, helpers, coerceArray, isTemplateRef, isEmpty, isString, valueFunctionProp, isUndefinedOrNull, isFunction, endOfDay, sortRangeValue, elementMatchClosest, warnDeprecation } from 'ngx-tethys/util';
+import { TinyDate, coerceBooleanProperty, subDays, startOfDay, startOfWeek, addDays, addWeeks, helpers, coerceArray, isTemplateRef, isEmpty, isString, isFunction, isUndefinedOrNull, valueFunctionProp, endOfDay, sortRangeValue, elementMatchClosest, warnDeprecation } from 'ngx-tethys/util';
 import { injectLocale, ThyI18nService, ThyLocaleType } from 'ngx-tethys/i18n';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import * as i1 from '@angular/forms';
@@ -1240,19 +1240,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class DateTableCell {
     constructor() {
         this.isTemplateRef = isTemplateRef;
+        this.prefixCls = input();
+        this.cell = input();
         this.isNonEmptyString = (v) => isEmpty(v) && isString(v);
+        this.functionRenderResult = computed(() => {
+            const renderFn = this.cellRender();
+            if (!isFunction(renderFn)) {
+                return false;
+            }
+            const result = renderFn(this.cell().value);
+            return !isUndefinedOrNull(result);
+        });
+        this.datePickerConfigService = inject(ThyDatePickerConfigService);
+        this.cellRender = computed(() => {
+            return this.cell()?.dateCellRender || this.datePickerConfigService.config?.dateCellRender;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateTableCell, isStandalone: true, selector: "[date-table-cell]", inputs: { prefixCls: "prefixCls", cell: "cell" }, exportAs: ["dateTableCell"], ngImport: i0, template: "\n@switch (prefixCls) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cell.dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: { $implicit: cell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cell.dateCellRender)) {\n        <span [innerHTML]=\"cell.dateCellRender\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls }}-date\" [attr.aria-selected]=\"cell.isSelected\" [attr.aria-disabled]=\"cell.isDisabled\">\n          {{ cell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell.isToday\"\n      >\n      @if (cell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell.fullCellRender); context: { $implicit: cell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls }}-date-value\">\n          <span class=\"{{ prefixCls }}-date-value-today-text\">\n            <span class=\"{{ prefixCls }}-date-value-text\">{{ cell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cell.dateCellRender); context: { $implicit: cell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateTableCell, isStandalone: true, selector: "[date-table-cell]", inputs: { prefixCls: { classPropertyName: "prefixCls", publicName: "prefixCls", isSignal: true, isRequired: false, transformFunction: null }, cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dateTableCell"], ngImport: i0, template: "@switch (prefixCls()) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cellRender())) {\n        <ng-container *ngTemplateOutlet=\"cellRender(); context: { $implicit: cell().value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cellRender())) {\n        <span [innerHTML]=\"cellRender()\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span [innerHTML]=\"$any(cellRender())(cell().value)\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls() }}-date\" [attr.aria-selected]=\"cell().isSelected\" [attr.aria-disabled]=\"cell().isDisabled\">\n          {{ cell().content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls() }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell().isToday\">\n      @if (cell().fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell().fullCellRender); context: { $implicit: cell().value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls() }}-date-value\">\n          <span class=\"{{ prefixCls() }}-date-value-today-text\">\n            <span class=\"{{ prefixCls() }}-date-value-text\">{{ cell().content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls() }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cellRender()); context: { $implicit: cell().value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTableCell, decorators: [{
             type: Component,
-            args: [{ selector: '[date-table-cell]', exportAs: 'dateTableCell', imports: [NgTemplateOutlet], template: "\n@switch (prefixCls) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cell.dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: { $implicit: cell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cell.dateCellRender)) {\n        <span [innerHTML]=\"cell.dateCellRender\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls }}-date\" [attr.aria-selected]=\"cell.isSelected\" [attr.aria-disabled]=\"cell.isDisabled\">\n          {{ cell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell.isToday\"\n      >\n      @if (cell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell.fullCellRender); context: { $implicit: cell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls }}-date-value\">\n          <span class=\"{{ prefixCls }}-date-value-today-text\">\n            <span class=\"{{ prefixCls }}-date-value-text\">{{ cell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cell.dateCellRender); context: { $implicit: cell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
-        }], propDecorators: { prefixCls: [{
-                type: Input
-            }], cell: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[date-table-cell]', exportAs: 'dateTableCell', imports: [NgTemplateOutlet], template: "@switch (prefixCls()) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cellRender())) {\n        <ng-container *ngTemplateOutlet=\"cellRender(); context: { $implicit: cell().value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cellRender())) {\n        <span [innerHTML]=\"cellRender()\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span [innerHTML]=\"$any(cellRender())(cell().value)\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls() }}-date\" [attr.aria-selected]=\"cell().isSelected\" [attr.aria-disabled]=\"cell().isDisabled\">\n          {{ cell().content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls() }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell().isToday\">\n      @if (cell().fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell().fullCellRender); context: { $implicit: cell().value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls() }}-date-value\">\n          <span class=\"{{ prefixCls() }}-date-value-today-text\">\n            <span class=\"{{ prefixCls() }}-date-value-text\">{{ cell().content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls() }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cellRender()); context: { $implicit: cell().value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
 
 /**
  * @private