ng-zorro-antd-form.mjs 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  1. import * as i0 from '@angular/core';
  2. import { ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, Input, Directive, inject, ContentChild, NgModule } from '@angular/core';
  3. import { NzGridModule } from 'ng-zorro-antd/grid';
  4. import { AbstractControl, NgModel, FormControlName, FormControlDirective, NgControl } from '@angular/forms';
  5. import { Subject, Subscription } from 'rxjs';
  6. import { filter, map, takeUntil, startWith, tap } from 'rxjs/operators';
  7. import { helpMotion } from 'ng-zorro-antd/core/animation';
  8. import * as i2$1 from 'ng-zorro-antd/core/form';
  9. import { NzFormStatusService } from 'ng-zorro-antd/core/form';
  10. import * as i3 from 'ng-zorro-antd/core/outlet';
  11. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  12. import { toBoolean } from 'ng-zorro-antd/core/util';
  13. import { __esDecorate, __runInitializers } from 'tslib';
  14. import * as i1 from 'ng-zorro-antd/core/config';
  15. import { WithConfig } from 'ng-zorro-antd/core/config';
  16. import * as i2 from '@angular/cdk/bidi';
  17. import * as i1$1 from 'ng-zorro-antd/i18n';
  18. import * as i2$2 from 'ng-zorro-antd/icon';
  19. import { NzIconModule } from 'ng-zorro-antd/icon';
  20. import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
  21. /**
  22. * Use of this source code is governed by an MIT-style license that can be
  23. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  24. */
  25. /** should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 **/
  26. class NzFormItemComponent {
  27. cdr;
  28. status = '';
  29. hasFeedback = false;
  30. withHelpClass = false;
  31. destroy$ = new Subject();
  32. setWithHelpViaTips(value) {
  33. this.withHelpClass = value;
  34. this.cdr.markForCheck();
  35. }
  36. setStatus(status) {
  37. this.status = status;
  38. this.cdr.markForCheck();
  39. }
  40. setHasFeedback(hasFeedback) {
  41. this.hasFeedback = hasFeedback;
  42. this.cdr.markForCheck();
  43. }
  44. constructor(cdr) {
  45. this.cdr = cdr;
  46. }
  47. ngOnDestroy() {
  48. this.destroy$.next(true);
  49. this.destroy$.complete();
  50. }
  51. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
  52. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzFormItemComponent, isStandalone: true, selector: "nz-form-item", host: { properties: { "class.ant-form-item-has-success": "status === \"success\"", "class.ant-form-item-has-warning": "status === \"warning\"", "class.ant-form-item-has-error": "status === \"error\"", "class.ant-form-item-is-validating": "status === \"validating\"", "class.ant-form-item-has-feedback": "hasFeedback && status", "class.ant-form-item-with-help": "withHelpClass" }, classAttribute: "ant-form-item" }, exportAs: ["nzFormItem"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  53. }
  54. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormItemComponent, decorators: [{
  55. type: Component,
  56. args: [{
  57. selector: 'nz-form-item',
  58. exportAs: 'nzFormItem',
  59. preserveWhitespaces: false,
  60. changeDetection: ChangeDetectionStrategy.OnPush,
  61. encapsulation: ViewEncapsulation.None,
  62. host: {
  63. class: 'ant-form-item',
  64. '[class.ant-form-item-has-success]': 'status === "success"',
  65. '[class.ant-form-item-has-warning]': 'status === "warning"',
  66. '[class.ant-form-item-has-error]': 'status === "error"',
  67. '[class.ant-form-item-is-validating]': 'status === "validating"',
  68. '[class.ant-form-item-has-feedback]': 'hasFeedback && status',
  69. '[class.ant-form-item-with-help]': 'withHelpClass'
  70. },
  71. template: `<ng-content></ng-content>`
  72. }]
  73. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
  74. const NZ_CONFIG_MODULE_NAME = 'form';
  75. const DefaultTooltipIcon = {
  76. type: 'question-circle',
  77. theme: 'outline'
  78. };
  79. let NzFormDirective = (() => {
  80. let _nzNoColon_decorators;
  81. let _nzNoColon_initializers = [];
  82. let _nzNoColon_extraInitializers = [];
  83. let _nzAutoTips_decorators;
  84. let _nzAutoTips_initializers = [];
  85. let _nzAutoTips_extraInitializers = [];
  86. let _nzTooltipIcon_decorators;
  87. let _nzTooltipIcon_initializers = [];
  88. let _nzTooltipIcon_extraInitializers = [];
  89. let _nzLabelWrap_decorators;
  90. let _nzLabelWrap_initializers = [];
  91. let _nzLabelWrap_extraInitializers = [];
  92. return class NzFormDirective {
  93. static {
  94. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  95. _nzNoColon_decorators = [WithConfig()];
  96. _nzAutoTips_decorators = [WithConfig()];
  97. _nzTooltipIcon_decorators = [WithConfig()];
  98. _nzLabelWrap_decorators = [WithConfig()];
  99. __esDecorate(null, null, _nzNoColon_decorators, { kind: "field", name: "nzNoColon", static: false, private: false, access: { has: obj => "nzNoColon" in obj, get: obj => obj.nzNoColon, set: (obj, value) => { obj.nzNoColon = value; } }, metadata: _metadata }, _nzNoColon_initializers, _nzNoColon_extraInitializers);
  100. __esDecorate(null, null, _nzAutoTips_decorators, { kind: "field", name: "nzAutoTips", static: false, private: false, access: { has: obj => "nzAutoTips" in obj, get: obj => obj.nzAutoTips, set: (obj, value) => { obj.nzAutoTips = value; } }, metadata: _metadata }, _nzAutoTips_initializers, _nzAutoTips_extraInitializers);
  101. __esDecorate(null, null, _nzTooltipIcon_decorators, { kind: "field", name: "nzTooltipIcon", static: false, private: false, access: { has: obj => "nzTooltipIcon" in obj, get: obj => obj.nzTooltipIcon, set: (obj, value) => { obj.nzTooltipIcon = value; } }, metadata: _metadata }, _nzTooltipIcon_initializers, _nzTooltipIcon_extraInitializers);
  102. __esDecorate(null, null, _nzLabelWrap_decorators, { kind: "field", name: "nzLabelWrap", static: false, private: false, access: { has: obj => "nzLabelWrap" in obj, get: obj => obj.nzLabelWrap, set: (obj, value) => { obj.nzLabelWrap = value; } }, metadata: _metadata }, _nzLabelWrap_initializers, _nzLabelWrap_extraInitializers);
  103. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  104. }
  105. nzConfigService;
  106. directionality;
  107. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  108. nzLayout = 'horizontal';
  109. nzNoColon = __runInitializers(this, _nzNoColon_initializers, false);
  110. nzAutoTips = (__runInitializers(this, _nzNoColon_extraInitializers), __runInitializers(this, _nzAutoTips_initializers, {}));
  111. nzDisableAutoTips = (__runInitializers(this, _nzAutoTips_extraInitializers), false);
  112. nzTooltipIcon = __runInitializers(this, _nzTooltipIcon_initializers, DefaultTooltipIcon);
  113. nzLabelAlign = (__runInitializers(this, _nzTooltipIcon_extraInitializers), 'right');
  114. nzLabelWrap = __runInitializers(this, _nzLabelWrap_initializers, false);
  115. dir = (__runInitializers(this, _nzLabelWrap_extraInitializers), 'ltr');
  116. destroy$ = new Subject();
  117. inputChanges$ = new Subject();
  118. getInputObservable(changeType) {
  119. return this.inputChanges$.pipe(filter(changes => changeType in changes), map(value => value[changeType]));
  120. }
  121. constructor(nzConfigService, directionality) {
  122. this.nzConfigService = nzConfigService;
  123. this.directionality = directionality;
  124. this.dir = this.directionality.value;
  125. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  126. this.dir = direction;
  127. });
  128. }
  129. ngOnChanges(changes) {
  130. this.inputChanges$.next(changes);
  131. }
  132. ngOnDestroy() {
  133. this.inputChanges$.complete();
  134. this.destroy$.next(true);
  135. this.destroy$.complete();
  136. }
  137. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormDirective, deps: [{ token: i1.NzConfigService }, { token: i2.Directionality }], target: i0.ɵɵFactoryTarget.Directive });
  138. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: NzFormDirective, isStandalone: true, selector: "[nz-form]", inputs: { nzLayout: "nzLayout", nzNoColon: ["nzNoColon", "nzNoColon", booleanAttribute], nzAutoTips: "nzAutoTips", nzDisableAutoTips: ["nzDisableAutoTips", "nzDisableAutoTips", booleanAttribute], nzTooltipIcon: "nzTooltipIcon", nzLabelAlign: "nzLabelAlign", nzLabelWrap: ["nzLabelWrap", "nzLabelWrap", booleanAttribute] }, host: { properties: { "class.ant-form-horizontal": "nzLayout === 'horizontal'", "class.ant-form-vertical": "nzLayout === 'vertical'", "class.ant-form-inline": "nzLayout === 'inline'", "class.ant-form-rtl": "dir === 'rtl'" }, classAttribute: "ant-form" }, exportAs: ["nzForm"], usesOnChanges: true, ngImport: i0 });
  139. };
  140. })();
  141. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormDirective, decorators: [{
  142. type: Directive,
  143. args: [{
  144. selector: '[nz-form]',
  145. exportAs: 'nzForm',
  146. host: {
  147. class: 'ant-form',
  148. '[class.ant-form-horizontal]': `nzLayout === 'horizontal'`,
  149. '[class.ant-form-vertical]': `nzLayout === 'vertical'`,
  150. '[class.ant-form-inline]': `nzLayout === 'inline'`,
  151. '[class.ant-form-rtl]': `dir === 'rtl'`
  152. }
  153. }]
  154. }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i2.Directionality }], propDecorators: { nzLayout: [{
  155. type: Input
  156. }], nzNoColon: [{
  157. type: Input,
  158. args: [{ transform: booleanAttribute }]
  159. }], nzAutoTips: [{
  160. type: Input
  161. }], nzDisableAutoTips: [{
  162. type: Input,
  163. args: [{ transform: booleanAttribute }]
  164. }], nzTooltipIcon: [{
  165. type: Input
  166. }], nzLabelAlign: [{
  167. type: Input
  168. }], nzLabelWrap: [{
  169. type: Input,
  170. args: [{ transform: booleanAttribute }]
  171. }] } });
  172. /**
  173. * Use of this source code is governed by an MIT-style license that can be
  174. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  175. */
  176. class NzFormControlComponent {
  177. cdr;
  178. nzFormStatusService;
  179. _hasFeedback = false;
  180. validateChanges = Subscription.EMPTY;
  181. validateString = null;
  182. destroyed$ = new Subject();
  183. localeId;
  184. autoErrorTip;
  185. get disableAutoTips() {
  186. return this.nzDisableAutoTips !== undefined
  187. ? toBoolean(this.nzDisableAutoTips)
  188. : !!this.nzFormDirective?.nzDisableAutoTips;
  189. }
  190. status = '';
  191. validateControl = null;
  192. innerTip = null;
  193. defaultValidateControl;
  194. nzSuccessTip;
  195. nzWarningTip;
  196. nzErrorTip;
  197. nzValidatingTip;
  198. nzExtra;
  199. nzAutoTips = {};
  200. nzDisableAutoTips;
  201. set nzHasFeedback(value) {
  202. this._hasFeedback = value;
  203. this.nzFormStatusService.formStatusChanges.next({ status: this.status, hasFeedback: this._hasFeedback });
  204. if (this.nzFormItemComponent) {
  205. this.nzFormItemComponent.setHasFeedback(this._hasFeedback);
  206. }
  207. }
  208. get nzHasFeedback() {
  209. return this._hasFeedback;
  210. }
  211. set nzValidateStatus(value) {
  212. if (value instanceof AbstractControl || value instanceof NgModel) {
  213. this.validateControl = value;
  214. this.validateString = null;
  215. this.watchControl();
  216. }
  217. else if (value instanceof FormControlName) {
  218. this.validateControl = value.control;
  219. this.validateString = null;
  220. this.watchControl();
  221. }
  222. else {
  223. this.validateString = value;
  224. this.validateControl = null;
  225. this.setStatus();
  226. }
  227. }
  228. watchControl() {
  229. this.validateChanges.unsubscribe();
  230. /** miss detect https://github.com/angular/angular/issues/10887 **/
  231. if (this.validateControl && this.validateControl.statusChanges) {
  232. this.validateChanges = this.validateControl.statusChanges
  233. .pipe(startWith(null), takeUntil(this.destroyed$))
  234. .subscribe(() => {
  235. if (!this.disableAutoTips) {
  236. this.updateAutoErrorTip();
  237. }
  238. this.setStatus();
  239. this.cdr.markForCheck();
  240. });
  241. }
  242. }
  243. setStatus() {
  244. this.status = this.getControlStatus(this.validateString);
  245. this.innerTip = this.getInnerTip(this.status);
  246. this.nzFormStatusService.formStatusChanges.next({ status: this.status, hasFeedback: this.nzHasFeedback });
  247. if (this.nzFormItemComponent) {
  248. this.nzFormItemComponent.setWithHelpViaTips(!!this.innerTip);
  249. this.nzFormItemComponent.setStatus(this.status);
  250. }
  251. }
  252. getControlStatus(validateString) {
  253. let status;
  254. if (validateString === 'warning' || this.validateControlStatus('INVALID', 'warning')) {
  255. status = 'warning';
  256. }
  257. else if (validateString === 'error' || this.validateControlStatus('INVALID')) {
  258. status = 'error';
  259. }
  260. else if (validateString === 'validating' ||
  261. validateString === 'pending' ||
  262. this.validateControlStatus('PENDING')) {
  263. status = 'validating';
  264. }
  265. else if (validateString === 'success' || this.validateControlStatus('VALID')) {
  266. status = 'success';
  267. }
  268. else {
  269. status = '';
  270. }
  271. return status;
  272. }
  273. validateControlStatus(validStatus, statusType) {
  274. if (!this.validateControl) {
  275. return false;
  276. }
  277. else {
  278. const { dirty, touched, status } = this.validateControl;
  279. return ((!!dirty || !!touched) && (statusType ? this.validateControl.hasError(statusType) : status === validStatus));
  280. }
  281. }
  282. getInnerTip(status) {
  283. switch (status) {
  284. case 'error':
  285. return (!this.disableAutoTips && this.autoErrorTip) || this.nzErrorTip || null;
  286. case 'validating':
  287. return this.nzValidatingTip || null;
  288. case 'success':
  289. return this.nzSuccessTip || null;
  290. case 'warning':
  291. return this.nzWarningTip || null;
  292. default:
  293. return null;
  294. }
  295. }
  296. updateAutoErrorTip() {
  297. if (this.validateControl) {
  298. const errors = this.validateControl.errors || {};
  299. let autoErrorTip = '';
  300. for (const key in errors) {
  301. if (errors.hasOwnProperty(key)) {
  302. autoErrorTip =
  303. errors[key]?.[this.localeId] ??
  304. this.nzAutoTips?.[this.localeId]?.[key] ??
  305. this.nzAutoTips.default?.[key] ??
  306. this.nzFormDirective?.nzAutoTips?.[this.localeId]?.[key] ??
  307. this.nzFormDirective?.nzAutoTips.default?.[key];
  308. }
  309. if (autoErrorTip) {
  310. break;
  311. }
  312. }
  313. this.autoErrorTip = autoErrorTip;
  314. }
  315. }
  316. subscribeAutoTips(observable) {
  317. observable?.pipe(takeUntil(this.destroyed$)).subscribe(() => {
  318. if (!this.disableAutoTips) {
  319. this.updateAutoErrorTip();
  320. this.setStatus();
  321. this.cdr.markForCheck();
  322. }
  323. });
  324. }
  325. nzFormItemComponent = inject(NzFormItemComponent, { host: true, optional: true });
  326. nzFormDirective = inject(NzFormDirective, { optional: true });
  327. constructor(cdr, i18n, nzFormStatusService) {
  328. this.cdr = cdr;
  329. this.nzFormStatusService = nzFormStatusService;
  330. this.subscribeAutoTips(i18n.localeChange.pipe(tap(locale => (this.localeId = locale.locale))));
  331. this.subscribeAutoTips(this.nzFormDirective?.getInputObservable('nzAutoTips'));
  332. this.subscribeAutoTips(this.nzFormDirective
  333. ?.getInputObservable('nzDisableAutoTips')
  334. .pipe(filter(() => this.nzDisableAutoTips === undefined)));
  335. }
  336. ngOnChanges(changes) {
  337. const { nzDisableAutoTips, nzAutoTips, nzSuccessTip, nzWarningTip, nzErrorTip, nzValidatingTip } = changes;
  338. if (nzDisableAutoTips || nzAutoTips) {
  339. this.updateAutoErrorTip();
  340. this.setStatus();
  341. }
  342. else if (nzSuccessTip || nzWarningTip || nzErrorTip || nzValidatingTip) {
  343. this.setStatus();
  344. }
  345. }
  346. ngOnInit() {
  347. this.setStatus();
  348. }
  349. ngOnDestroy() {
  350. this.destroyed$.next();
  351. this.destroyed$.complete();
  352. }
  353. ngAfterContentInit() {
  354. if (!this.validateControl && !this.validateString) {
  355. if (this.defaultValidateControl instanceof FormControlDirective) {
  356. this.nzValidateStatus = this.defaultValidateControl.control;
  357. }
  358. else {
  359. this.nzValidateStatus = this.defaultValidateControl;
  360. }
  361. }
  362. }
  363. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormControlComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NzI18nService }, { token: i2$1.NzFormStatusService }], target: i0.ɵɵFactoryTarget.Component });
  364. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzFormControlComponent, isStandalone: true, selector: "nz-form-control", inputs: { nzSuccessTip: "nzSuccessTip", nzWarningTip: "nzWarningTip", nzErrorTip: "nzErrorTip", nzValidatingTip: "nzValidatingTip", nzExtra: "nzExtra", nzAutoTips: "nzAutoTips", nzDisableAutoTips: ["nzDisableAutoTips", "nzDisableAutoTips", booleanAttribute], nzHasFeedback: ["nzHasFeedback", "nzHasFeedback", booleanAttribute], nzValidateStatus: "nzValidateStatus" }, host: { classAttribute: "ant-form-item-control" }, providers: [NzFormStatusService], queries: [{ propertyName: "defaultValidateControl", first: true, predicate: NgControl, descendants: true }], exportAs: ["nzFormControl"], usesOnChanges: true, ngImport: i0, template: `
  365. <div class="ant-form-item-control-input">
  366. <div class="ant-form-item-control-input-content">
  367. <ng-content></ng-content>
  368. </div>
  369. </div>
  370. @if (innerTip) {
  371. <div @helpMotion class="ant-form-item-explain ant-form-item-explain-connected">
  372. <div role="alert" [class]="['ant-form-item-explain-' + status]">
  373. <ng-container *nzStringTemplateOutlet="innerTip; context: { $implicit: validateControl }">{{
  374. innerTip
  375. }}</ng-container>
  376. </div>
  377. </div>
  378. }
  379. @if (nzExtra) {
  380. <div class="ant-form-item-extra">
  381. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  382. </div>
  383. }
  384. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i3.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], animations: [helpMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  385. }
  386. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormControlComponent, decorators: [{
  387. type: Component,
  388. args: [{
  389. selector: 'nz-form-control',
  390. exportAs: 'nzFormControl',
  391. preserveWhitespaces: false,
  392. animations: [helpMotion],
  393. encapsulation: ViewEncapsulation.None,
  394. changeDetection: ChangeDetectionStrategy.OnPush,
  395. template: `
  396. <div class="ant-form-item-control-input">
  397. <div class="ant-form-item-control-input-content">
  398. <ng-content></ng-content>
  399. </div>
  400. </div>
  401. @if (innerTip) {
  402. <div @helpMotion class="ant-form-item-explain ant-form-item-explain-connected">
  403. <div role="alert" [class]="['ant-form-item-explain-' + status]">
  404. <ng-container *nzStringTemplateOutlet="innerTip; context: { $implicit: validateControl }">{{
  405. innerTip
  406. }}</ng-container>
  407. </div>
  408. </div>
  409. }
  410. @if (nzExtra) {
  411. <div class="ant-form-item-extra">
  412. <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  413. </div>
  414. }
  415. `,
  416. providers: [NzFormStatusService],
  417. host: {
  418. class: 'ant-form-item-control'
  419. },
  420. imports: [NzOutletModule]
  421. }]
  422. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NzI18nService }, { type: i2$1.NzFormStatusService }], propDecorators: { defaultValidateControl: [{
  423. type: ContentChild,
  424. args: [NgControl, { static: false }]
  425. }], nzSuccessTip: [{
  426. type: Input
  427. }], nzWarningTip: [{
  428. type: Input
  429. }], nzErrorTip: [{
  430. type: Input
  431. }], nzValidatingTip: [{
  432. type: Input
  433. }], nzExtra: [{
  434. type: Input
  435. }], nzAutoTips: [{
  436. type: Input
  437. }], nzDisableAutoTips: [{
  438. type: Input,
  439. args: [{ transform: booleanAttribute }]
  440. }], nzHasFeedback: [{
  441. type: Input,
  442. args: [{ transform: booleanAttribute }]
  443. }], nzValidateStatus: [{
  444. type: Input
  445. }] } });
  446. /**
  447. * Use of this source code is governed by an MIT-style license that can be
  448. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  449. */
  450. function toTooltipIcon(value) {
  451. const icon = typeof value === 'string' ? { type: value } : value;
  452. return { ...DefaultTooltipIcon, ...icon };
  453. }
  454. class NzFormLabelComponent {
  455. cdr;
  456. nzFor;
  457. nzRequired = false;
  458. set nzNoColon(value) {
  459. this.noColon = value;
  460. }
  461. get nzNoColon() {
  462. return this.noColon !== 'default' ? this.noColon : !!this.nzFormDirective?.nzNoColon;
  463. }
  464. noColon = 'default';
  465. nzTooltipTitle;
  466. set nzTooltipIcon(value) {
  467. this._tooltipIcon = toTooltipIcon(value);
  468. }
  469. // due to 'get' and 'set' accessor must have the same type, so it was renamed to `tooltipIcon`
  470. get tooltipIcon() {
  471. return this._tooltipIcon !== 'default'
  472. ? this._tooltipIcon
  473. : toTooltipIcon(this.nzFormDirective?.nzTooltipIcon || DefaultTooltipIcon);
  474. }
  475. _tooltipIcon = 'default';
  476. set nzLabelAlign(value) {
  477. this.labelAlign = value;
  478. }
  479. get nzLabelAlign() {
  480. return this.labelAlign !== 'default' ? this.labelAlign : this.nzFormDirective?.nzLabelAlign || 'right';
  481. }
  482. labelAlign = 'default';
  483. set nzLabelWrap(value) {
  484. this.labelWrap = value;
  485. }
  486. get nzLabelWrap() {
  487. return this.labelWrap !== 'default' ? this.labelWrap : !!this.nzFormDirective?.nzLabelWrap;
  488. }
  489. labelWrap = 'default';
  490. destroy$ = new Subject();
  491. nzFormDirective = inject(NzFormDirective, { skipSelf: true, optional: true });
  492. constructor(cdr) {
  493. this.cdr = cdr;
  494. if (this.nzFormDirective) {
  495. this.nzFormDirective
  496. .getInputObservable('nzNoColon')
  497. .pipe(filter(() => this.noColon === 'default'), takeUntil(this.destroy$))
  498. .subscribe(() => this.cdr.markForCheck());
  499. this.nzFormDirective
  500. .getInputObservable('nzTooltipIcon')
  501. .pipe(filter(() => this._tooltipIcon === 'default'), takeUntil(this.destroy$))
  502. .subscribe(() => this.cdr.markForCheck());
  503. this.nzFormDirective
  504. .getInputObservable('nzLabelAlign')
  505. .pipe(filter(() => this.labelAlign === 'default'), takeUntil(this.destroy$))
  506. .subscribe(() => this.cdr.markForCheck());
  507. this.nzFormDirective
  508. .getInputObservable('nzLabelWrap')
  509. .pipe(filter(() => this.labelWrap === 'default'), takeUntil(this.destroy$))
  510. .subscribe(() => this.cdr.markForCheck());
  511. }
  512. }
  513. ngOnDestroy() {
  514. this.destroy$.next(true);
  515. this.destroy$.complete();
  516. }
  517. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
  518. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzFormLabelComponent, isStandalone: true, selector: "nz-form-label", inputs: { nzFor: "nzFor", nzRequired: ["nzRequired", "nzRequired", booleanAttribute], nzNoColon: ["nzNoColon", "nzNoColon", booleanAttribute], nzTooltipTitle: "nzTooltipTitle", nzTooltipIcon: "nzTooltipIcon", nzLabelAlign: "nzLabelAlign", nzLabelWrap: ["nzLabelWrap", "nzLabelWrap", booleanAttribute] }, host: { properties: { "class.ant-form-item-label-left": "nzLabelAlign === 'left'", "class.ant-form-item-label-wrap": "nzLabelWrap" }, classAttribute: "ant-form-item-label" }, exportAs: ["nzFormLabel"], ngImport: i0, template: `
  519. <label [attr.for]="nzFor" [class.ant-form-item-no-colon]="nzNoColon" [class.ant-form-item-required]="nzRequired">
  520. <ng-content></ng-content>
  521. @if (nzTooltipTitle) {
  522. <span class="ant-form-item-tooltip" nz-tooltip [nzTooltipTitle]="nzTooltipTitle">
  523. <ng-container *nzStringTemplateOutlet="tooltipIcon.type; let tooltipIconType">
  524. <nz-icon [nzType]="tooltipIconType" [nzTheme]="tooltipIcon.theme" />
  525. </ng-container>
  526. </span>
  527. }
  528. </label>
  529. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i3.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "directive", type: NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  530. }
  531. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormLabelComponent, decorators: [{
  532. type: Component,
  533. args: [{
  534. selector: 'nz-form-label',
  535. exportAs: 'nzFormLabel',
  536. preserveWhitespaces: false,
  537. encapsulation: ViewEncapsulation.None,
  538. changeDetection: ChangeDetectionStrategy.OnPush,
  539. template: `
  540. <label [attr.for]="nzFor" [class.ant-form-item-no-colon]="nzNoColon" [class.ant-form-item-required]="nzRequired">
  541. <ng-content></ng-content>
  542. @if (nzTooltipTitle) {
  543. <span class="ant-form-item-tooltip" nz-tooltip [nzTooltipTitle]="nzTooltipTitle">
  544. <ng-container *nzStringTemplateOutlet="tooltipIcon.type; let tooltipIconType">
  545. <nz-icon [nzType]="tooltipIconType" [nzTheme]="tooltipIcon.theme" />
  546. </ng-container>
  547. </span>
  548. }
  549. </label>
  550. `,
  551. host: {
  552. class: 'ant-form-item-label',
  553. '[class.ant-form-item-label-left]': `nzLabelAlign === 'left'`,
  554. '[class.ant-form-item-label-wrap]': `nzLabelWrap`
  555. },
  556. imports: [NzOutletModule, NzTooltipDirective, NzIconModule]
  557. }]
  558. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nzFor: [{
  559. type: Input
  560. }], nzRequired: [{
  561. type: Input,
  562. args: [{ transform: booleanAttribute }]
  563. }], nzNoColon: [{
  564. type: Input,
  565. args: [{ transform: booleanAttribute }]
  566. }], nzTooltipTitle: [{
  567. type: Input
  568. }], nzTooltipIcon: [{
  569. type: Input
  570. }], nzLabelAlign: [{
  571. type: Input
  572. }], nzLabelWrap: [{
  573. type: Input,
  574. args: [{ transform: booleanAttribute }]
  575. }] } });
  576. /**
  577. * Use of this source code is governed by an MIT-style license that can be
  578. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  579. */
  580. class NzFormSplitComponent {
  581. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  582. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzFormSplitComponent, isStandalone: true, selector: "nz-form-split", host: { classAttribute: "ant-form-split" }, exportAs: ["nzFormSplit"], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  583. }
  584. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormSplitComponent, decorators: [{
  585. type: Component,
  586. args: [{
  587. selector: 'nz-form-split',
  588. exportAs: 'nzFormSplit',
  589. preserveWhitespaces: false,
  590. encapsulation: ViewEncapsulation.None,
  591. changeDetection: ChangeDetectionStrategy.OnPush,
  592. template: ` <ng-content></ng-content> `,
  593. host: {
  594. class: 'ant-form-split'
  595. }
  596. }]
  597. }] });
  598. /**
  599. * Use of this source code is governed by an MIT-style license that can be
  600. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  601. */
  602. class NzFormTextComponent {
  603. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  604. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzFormTextComponent, isStandalone: true, selector: "nz-form-text", host: { classAttribute: "ant-form-text" }, exportAs: ["nzFormText"], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  605. }
  606. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormTextComponent, decorators: [{
  607. type: Component,
  608. args: [{
  609. selector: 'nz-form-text',
  610. exportAs: 'nzFormText',
  611. preserveWhitespaces: false,
  612. changeDetection: ChangeDetectionStrategy.OnPush,
  613. encapsulation: ViewEncapsulation.None,
  614. template: ` <ng-content></ng-content> `,
  615. host: {
  616. class: 'ant-form-text'
  617. }
  618. }]
  619. }] });
  620. /**
  621. * Use of this source code is governed by an MIT-style license that can be
  622. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  623. */
  624. class NzFormModule {
  625. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  626. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzFormModule, imports: [NzFormDirective,
  627. NzFormItemComponent,
  628. NzFormLabelComponent,
  629. NzFormControlComponent,
  630. NzFormTextComponent,
  631. NzFormSplitComponent], exports: [NzGridModule,
  632. NzFormDirective,
  633. NzFormItemComponent,
  634. NzFormLabelComponent,
  635. NzFormControlComponent,
  636. NzFormTextComponent,
  637. NzFormSplitComponent] });
  638. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormModule, imports: [NzFormLabelComponent,
  639. NzFormControlComponent, NzGridModule] });
  640. }
  641. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFormModule, decorators: [{
  642. type: NgModule,
  643. args: [{
  644. imports: [
  645. NzFormDirective,
  646. NzFormItemComponent,
  647. NzFormLabelComponent,
  648. NzFormControlComponent,
  649. NzFormTextComponent,
  650. NzFormSplitComponent
  651. ],
  652. exports: [
  653. NzGridModule,
  654. NzFormDirective,
  655. NzFormItemComponent,
  656. NzFormLabelComponent,
  657. NzFormControlComponent,
  658. NzFormTextComponent,
  659. NzFormSplitComponent
  660. ]
  661. }]
  662. }] });
  663. /**
  664. * Use of this source code is governed by an MIT-style license that can be
  665. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  666. */
  667. /**
  668. * Generated bundle index. Do not edit.
  669. */
  670. export { DefaultTooltipIcon, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzFormModule, NzFormSplitComponent, NzFormTextComponent };
  671. //# sourceMappingURL=ng-zorro-antd-form.mjs.map