ng-zorro-antd-segmented.mjs 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. import { NgTemplateOutlet } from '@angular/common';
  2. import * as i0 from '@angular/core';
  3. import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, viewChildren, contentChildren, effect, forwardRef, booleanAttribute, Output, NgModule } from '@angular/core';
  4. import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
  5. import { tap, switchMap, filter, take, map, bufferCount } from 'rxjs/operators';
  6. import * as i1 from 'ng-zorro-antd/icon';
  7. import { NzIconModule } from 'ng-zorro-antd/icon';
  8. import { ReplaySubject, Subject } from 'rxjs';
  9. import { __esDecorate, __runInitializers } from 'tslib';
  10. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  11. import { thumbMotion } from 'ng-zorro-antd/core/animation';
  12. import * as i1$1 from 'ng-zorro-antd/core/config';
  13. import { WithConfig } from 'ng-zorro-antd/core/config';
  14. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  15. import * as i2 from '@angular/cdk/bidi';
  16. class NzSegmentedService {
  17. selected$ = new ReplaySubject(1);
  18. activated$ = new ReplaySubject(1);
  19. change$ = new Subject();
  20. disabled$ = new ReplaySubject(1);
  21. animationDone$ = new Subject();
  22. ngOnDestroy() {
  23. this.selected$.complete();
  24. this.activated$.complete();
  25. this.change$.complete();
  26. this.disabled$.complete();
  27. this.animationDone$.complete();
  28. }
  29. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  30. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedService });
  31. }
  32. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedService, decorators: [{
  33. type: Injectable
  34. }] });
  35. /**
  36. * Use of this source code is governed by an MIT-style license that can be
  37. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  38. */
  39. class NzSegmentedItemComponent {
  40. cdr;
  41. elementRef;
  42. destroyRef;
  43. nzIcon;
  44. nzValue;
  45. nzDisabled;
  46. isChecked = false;
  47. service = inject(NzSegmentedService);
  48. parentDisabled = toSignal(this.service.disabled$, { initialValue: false });
  49. constructor(cdr, elementRef, destroyRef) {
  50. this.cdr = cdr;
  51. this.elementRef = elementRef;
  52. this.destroyRef = destroyRef;
  53. }
  54. ngOnInit() {
  55. this.service.selected$
  56. .pipe(tap(value => {
  57. this.isChecked = false;
  58. this.cdr.markForCheck();
  59. if (value === this.nzValue) {
  60. this.service.activated$.next(this.elementRef.nativeElement);
  61. }
  62. }), switchMap(value => this.service.animationDone$.pipe(filter(event => event.toState === 'to'), take(1), map(() => value))), filter(value => value === this.nzValue), takeUntilDestroyed(this.destroyRef))
  63. .subscribe(() => {
  64. this.isChecked = true;
  65. this.cdr.markForCheck();
  66. });
  67. }
  68. handleClick() {
  69. if (!this.nzDisabled && !this.parentDisabled()) {
  70. this.service.selected$.next(this.nzValue);
  71. this.service.change$.next(this.nzValue);
  72. }
  73. }
  74. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
  75. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSegmentedItemComponent, isStandalone: true, selector: "label[nz-segmented-item],label[nzSegmentedItem]", inputs: { nzIcon: "nzIcon", nzValue: "nzValue", nzDisabled: "nzDisabled" }, host: { listeners: { "click": "handleClick()" }, properties: { "class.ant-segmented-item-selected": "isChecked", "class.ant-segmented-item-disabled": "nzDisabled || parentDisabled()" }, classAttribute: "ant-segmented-item" }, exportAs: ["nzSegmentedItem"], ngImport: i0, template: `
  76. <input class="ant-segmented-item-input" type="radio" [checked]="isChecked" (click)="$event.stopPropagation()" />
  77. <div class="ant-segmented-item-label">
  78. @if (nzIcon) {
  79. <span class="ant-segmented-item-icon"><nz-icon [nzType]="nzIcon" /></span>
  80. <span>
  81. <ng-template [ngTemplateOutlet]="content" />
  82. </span>
  83. } @else {
  84. <ng-template [ngTemplateOutlet]="content" />
  85. }
  86. </div>
  87. <ng-template #content>
  88. <ng-content></ng-content>
  89. </ng-template>
  90. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  91. }
  92. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedItemComponent, decorators: [{
  93. type: Component,
  94. args: [{
  95. selector: 'label[nz-segmented-item],label[nzSegmentedItem]',
  96. exportAs: 'nzSegmentedItem',
  97. imports: [NzIconModule, NgTemplateOutlet],
  98. template: `
  99. <input class="ant-segmented-item-input" type="radio" [checked]="isChecked" (click)="$event.stopPropagation()" />
  100. <div class="ant-segmented-item-label">
  101. @if (nzIcon) {
  102. <span class="ant-segmented-item-icon"><nz-icon [nzType]="nzIcon" /></span>
  103. <span>
  104. <ng-template [ngTemplateOutlet]="content" />
  105. </span>
  106. } @else {
  107. <ng-template [ngTemplateOutlet]="content" />
  108. }
  109. </div>
  110. <ng-template #content>
  111. <ng-content></ng-content>
  112. </ng-template>
  113. `,
  114. host: {
  115. class: 'ant-segmented-item',
  116. '[class.ant-segmented-item-selected]': 'isChecked',
  117. '[class.ant-segmented-item-disabled]': 'nzDisabled || parentDisabled()',
  118. '(click)': 'handleClick()'
  119. },
  120. changeDetection: ChangeDetectionStrategy.OnPush,
  121. encapsulation: ViewEncapsulation.None
  122. }]
  123. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { nzIcon: [{
  124. type: Input
  125. }], nzValue: [{
  126. type: Input
  127. }], nzDisabled: [{
  128. type: Input
  129. }] } });
  130. /**
  131. * Use of this source code is governed by an MIT-style license that can be
  132. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  133. */
  134. function normalizeOptions(unnormalized) {
  135. return unnormalized.map(item => {
  136. if (typeof item === 'string' || typeof item === 'number') {
  137. return {
  138. label: `${item}`,
  139. value: item
  140. };
  141. }
  142. return item;
  143. });
  144. }
  145. const NZ_CONFIG_MODULE_NAME = 'segmented';
  146. let NzSegmentedComponent = (() => {
  147. let _nzSize_decorators;
  148. let _nzSize_initializers = [];
  149. let _nzSize_extraInitializers = [];
  150. return class NzSegmentedComponent {
  151. static {
  152. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  153. _nzSize_decorators = [WithConfig()];
  154. __esDecorate(null, null, _nzSize_decorators, { kind: "field", name: "nzSize", static: false, private: false, access: { has: obj => "nzSize" in obj, get: obj => obj.nzSize, set: (obj, value) => { obj.nzSize = value; } }, metadata: _metadata }, _nzSize_initializers, _nzSize_extraInitializers);
  155. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  156. }
  157. nzConfigService;
  158. cdr;
  159. directionality;
  160. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  161. nzBlock = false;
  162. nzDisabled = false;
  163. nzOptions = [];
  164. nzSize = __runInitializers(this, _nzSize_initializers, 'default');
  165. nzValueChange = (__runInitializers(this, _nzSize_extraInitializers), new EventEmitter());
  166. viewItemCmps = viewChildren(NzSegmentedItemComponent);
  167. contentItemCmps = contentChildren(NzSegmentedItemComponent);
  168. dir = 'ltr';
  169. value;
  170. animationState = {
  171. value: 'to',
  172. params: thumbAnimationParamsOf()
  173. };
  174. normalizedOptions = [];
  175. onChange = () => { };
  176. onTouched = () => { };
  177. service = inject(NzSegmentedService);
  178. constructor(nzConfigService, cdr, directionality) {
  179. this.nzConfigService = nzConfigService;
  180. this.cdr = cdr;
  181. this.directionality = directionality;
  182. this.directionality.change.pipe(takeUntilDestroyed()).subscribe(direction => {
  183. this.dir = direction;
  184. this.cdr.markForCheck();
  185. });
  186. this.service.selected$.pipe(takeUntilDestroyed()).subscribe(value => {
  187. this.value = value;
  188. });
  189. this.service.change$.pipe(takeUntilDestroyed()).subscribe(value => {
  190. this.nzValueChange.emit(value);
  191. this.onChange(value);
  192. });
  193. this.service.activated$.pipe(bufferCount(2, 1), takeUntilDestroyed()).subscribe(elements => {
  194. this.animationState = {
  195. value: 'from',
  196. params: thumbAnimationParamsOf(elements[0])
  197. };
  198. this.cdr.detectChanges();
  199. this.animationState = {
  200. value: 'to',
  201. params: thumbAnimationParamsOf(elements[1])
  202. };
  203. this.cdr.detectChanges();
  204. });
  205. effect(() => {
  206. const itemCmps = this.viewItemCmps().concat(this.contentItemCmps());
  207. if (!itemCmps.length) {
  208. return;
  209. }
  210. if (this.value === undefined || // If no value is set, select the first item
  211. !itemCmps.some(item => item.nzValue === this.value) // handle value not in options
  212. ) {
  213. this.service.selected$.next(itemCmps[0].nzValue);
  214. }
  215. });
  216. }
  217. ngOnChanges(changes) {
  218. const { nzOptions, nzDisabled } = changes;
  219. if (nzOptions) {
  220. this.normalizedOptions = normalizeOptions(nzOptions.currentValue);
  221. }
  222. if (nzDisabled) {
  223. this.service.disabled$.next(nzDisabled.currentValue);
  224. }
  225. }
  226. handleThumbAnimationDone(event) {
  227. if (event.toState === 'to') {
  228. this.animationState = null;
  229. }
  230. this.service.animationDone$.next(event);
  231. }
  232. writeValue(value) {
  233. this.service.selected$.next(value);
  234. }
  235. registerOnChange(fn) {
  236. this.onChange = fn;
  237. }
  238. registerOnTouched(fn) {
  239. this.onTouched = fn;
  240. }
  241. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedComponent, deps: [{ token: i1$1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  242. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSegmentedComponent, isStandalone: true, selector: "nz-segmented", inputs: { nzBlock: ["nzBlock", "nzBlock", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzOptions: "nzOptions", nzSize: "nzSize" }, outputs: { nzValueChange: "nzValueChange" }, host: { properties: { "class.ant-segmented-disabled": "nzDisabled", "class.ant-segmented-rtl": "dir === 'rtl'", "class.ant-segmented-lg": "nzSize === 'large'", "class.ant-segmented-sm": "nzSize === 'small'", "class.ant-segmented-block": "nzBlock" }, classAttribute: "ant-segmented" }, providers: [
  243. NzSegmentedService,
  244. { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSegmentedComponent), multi: true }
  245. ], queries: [{ propertyName: "contentItemCmps", predicate: NzSegmentedItemComponent, isSignal: true }], viewQueries: [{ propertyName: "viewItemCmps", predicate: NzSegmentedItemComponent, descendants: true, isSignal: true }], exportAs: ["nzSegmented"], usesOnChanges: true, ngImport: i0, template: `
  246. <!-- thumb motion div -->
  247. <div class="ant-segmented-group">
  248. @if (animationState) {
  249. <div
  250. class="ant-segmented-thumb ant-segmented-thumb-motion"
  251. [@thumbMotion]="animationState"
  252. (@thumbMotion.done)="handleThumbAnimationDone($event)"
  253. ></div>
  254. }
  255. <ng-content>
  256. @for (item of normalizedOptions; track item.value) {
  257. <label nz-segmented-item [nzIcon]="item.icon" [nzValue]="item.value" [nzDisabled]="item.disabled">{{
  258. item.label
  259. }}</label>
  260. }
  261. </ng-content>
  262. </div>
  263. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "ngmodule", type: NzOutletModule }, { kind: "component", type: NzSegmentedItemComponent, selector: "label[nz-segmented-item],label[nzSegmentedItem]", inputs: ["nzIcon", "nzValue", "nzDisabled"], exportAs: ["nzSegmentedItem"] }], animations: [thumbMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  264. };
  265. })();
  266. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedComponent, decorators: [{
  267. type: Component,
  268. args: [{
  269. changeDetection: ChangeDetectionStrategy.OnPush,
  270. encapsulation: ViewEncapsulation.None,
  271. selector: 'nz-segmented',
  272. exportAs: 'nzSegmented',
  273. template: `
  274. <!-- thumb motion div -->
  275. <div class="ant-segmented-group">
  276. @if (animationState) {
  277. <div
  278. class="ant-segmented-thumb ant-segmented-thumb-motion"
  279. [@thumbMotion]="animationState"
  280. (@thumbMotion.done)="handleThumbAnimationDone($event)"
  281. ></div>
  282. }
  283. <ng-content>
  284. @for (item of normalizedOptions; track item.value) {
  285. <label nz-segmented-item [nzIcon]="item.icon" [nzValue]="item.value" [nzDisabled]="item.disabled">{{
  286. item.label
  287. }}</label>
  288. }
  289. </ng-content>
  290. </div>
  291. `,
  292. host: {
  293. class: 'ant-segmented',
  294. '[class.ant-segmented-disabled]': 'nzDisabled',
  295. '[class.ant-segmented-rtl]': `dir === 'rtl'`,
  296. '[class.ant-segmented-lg]': `nzSize === 'large'`,
  297. '[class.ant-segmented-sm]': `nzSize === 'small'`,
  298. '[class.ant-segmented-block]': `nzBlock`
  299. },
  300. providers: [
  301. NzSegmentedService,
  302. { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSegmentedComponent), multi: true }
  303. ],
  304. animations: [thumbMotion],
  305. imports: [NzIconModule, NzOutletModule, NzSegmentedItemComponent]
  306. }]
  307. }], ctorParameters: () => [{ type: i1$1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality }], propDecorators: { nzBlock: [{
  308. type: Input,
  309. args: [{ transform: booleanAttribute }]
  310. }], nzDisabled: [{
  311. type: Input,
  312. args: [{ transform: booleanAttribute }]
  313. }], nzOptions: [{
  314. type: Input
  315. }], nzSize: [{
  316. type: Input
  317. }], nzValueChange: [{
  318. type: Output
  319. }] } });
  320. function thumbAnimationParamsOf(element) {
  321. return {
  322. transform: element?.offsetLeft ?? 0,
  323. width: element?.clientWidth ?? 0
  324. };
  325. }
  326. /**
  327. * Use of this source code is governed by an MIT-style license that can be
  328. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  329. */
  330. class NzSegmentedModule {
  331. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  332. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedModule, imports: [NzSegmentedComponent, NzSegmentedItemComponent], exports: [NzSegmentedComponent, NzSegmentedItemComponent] });
  333. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedModule, imports: [NzSegmentedComponent, NzSegmentedItemComponent] });
  334. }
  335. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSegmentedModule, decorators: [{
  336. type: NgModule,
  337. args: [{
  338. imports: [NzSegmentedComponent, NzSegmentedItemComponent],
  339. exports: [NzSegmentedComponent, NzSegmentedItemComponent]
  340. }]
  341. }] });
  342. /**
  343. * Use of this source code is governed by an MIT-style license that can be
  344. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  345. */
  346. /**
  347. * Generated bundle index. Do not edit.
  348. */
  349. export { NzSegmentedComponent, NzSegmentedItemComponent, NzSegmentedModule, normalizeOptions };
  350. //# sourceMappingURL=ng-zorro-antd-segmented.mjs.map