ng-zorro-antd/fesm2022/ng-zorro-antd-segmented.mjs

An enterprise-class UI components based on Ant Design and Angular

import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, forwardRef, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChildren, Input, Output, NgModule } from '@angular/core';
import { __decorate } from 'tslib';
import { NgClass } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { thumbMotion } from 'ng-zorro-antd/core/animation';
import * as i1 from 'ng-zorro-antd/core/config';
import { WithConfig } from 'ng-zorro-antd/core/config';
import * as i4 from 'ng-zorro-antd/core/outlet';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import * as i3 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
import * as i2 from '@angular/cdk/bidi';

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
function normalizeOptions(unnormalized) {
    return unnormalized.map(item => {
        if (typeof item === 'string' || typeof item === 'number') {
            return {
                label: `${item}`,
                value: item
            };
        }
        return item;
    });
}

const NZ_CONFIG_MODULE_NAME = 'segmented';
class NzSegmentedComponent {
    constructor(nzConfigService, cdr, directionality) {
        this.nzConfigService = nzConfigService;
        this.cdr = cdr;
        this.directionality = directionality;
        this._nzModuleName = NZ_CONFIG_MODULE_NAME;
        this.nzBlock = false;
        this.nzDisabled = false;
        this.nzOptions = [];
        this.nzSize = 'default';
        this.nzLabelTemplate = null;
        this.nzValueChange = new EventEmitter();
        this.dir = 'ltr';
        this.selectedIndex = 0;
        this.transitionedToIndex = -1;
        this.animationState = null;
        this.normalizedOptions = [];
        this.destroy$ = new Subject();
        this.onChange = () => { };
        this.onTouched = () => { };
        this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(direction => {
            this.dir = direction;
            this.cdr.detectChanges();
        });
    }
    ngOnChanges(changes) {
        const { nzOptions } = changes;
        if (nzOptions) {
            this.normalizedOptions = normalizeOptions(nzOptions.currentValue);
        }
    }
    handleOptionClick(index) {
        if (this.nzDisabled) {
            return;
        }
        this.changeSelectedIndex(index);
        this.onChange(index);
        this.nzValueChange.emit(index);
    }
    handleThumbAnimationDone(e) {
        if (e.fromState === 'from') {
            this.selectedIndex = this.transitionedToIndex;
            this.transitionedToIndex = -1;
            this.animationState = null;
            this.cdr.detectChanges();
        }
    }
    writeValue(value) {
        if (typeof value === 'number' && value > -1) {
            this.changeSelectedIndex(value);
            this.cdr.markForCheck();
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    changeSelectedIndex(index) {
        if (!this.listOfOptions || this.selectedIndex === -1 || this.selectedIndex === index) {
            return;
        }
        this.animationState = {
            value: 'from',
            params: getThumbAnimationProps(this.listOfOptions.get(this.selectedIndex).nativeElement)
        };
        this.selectedIndex = -1;
        this.cdr.detectChanges();
        this.animationState = {
            value: 'to',
            params: getThumbAnimationProps(this.listOfOptions.get(index).nativeElement)
        };
        this.transitionedToIndex = index;
        this.cdr.detectChanges();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedComponent, deps: [{ token: i1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NzSegmentedComponent, isStandalone: true, selector: "nz-segmented", inputs: { nzBlock: ["nzBlock", "nzBlock", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzOptions: "nzOptions", nzSize: "nzSize", nzLabelTemplate: "nzLabelTemplate" }, 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: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSegmentedComponent), multi: true }], viewQueries: [{ propertyName: "listOfOptions", predicate: ["itemLabels"], descendants: true, read: ElementRef }], exportAs: ["nzSegmented"], usesOnChanges: true, ngImport: i0, template: `
    <!-- thumb motion div -->
    <div class="ant-segmented-group">
      @if (animationState) {
        <div
          [ngClass]="{ 'ant-segmented-thumb': true, 'ant-segmented-thumb-motion': true }"
          [@thumbMotion]="animationState"
          (@thumbMotion.done)="handleThumbAnimationDone($event)"
        ></div>
      }

      @for (item of normalizedOptions; track item; let i = $index) {
        <label
          #itemLabels
          [ngClass]="{
            'ant-segmented-item': true,
            'ant-segmented-item-selected': i === selectedIndex,
            'ant-segmented-item-disabled': !!nzDisabled || item.disabled
          }"
        >
          <input class="ant-segmented-item-input" type="radio" [checked]="i === selectedIndex" />
          <div class="ant-segmented-item-label" (click)="!item.disabled && handleOptionClick(i)">
            @if (item.icon) {
              <span class="ant-segmented-item-icon"><span nz-icon [nzType]="item.icon"></span></span>
              <span>
                <ng-container
                  *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
                >
                  {{ item.label }}
                </ng-container>
              </span>
            } @else {
              <ng-container
                *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
              >
                {{ item.label }}
              </ng-container>
            }
          </div>
        </label>
      }
    </div>
  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i4.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], animations: [thumbMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
__decorate([
    WithConfig()
], NzSegmentedComponent.prototype, "nzSize", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    selector: 'nz-segmented',
                    exportAs: 'nzSegmented',
                    template: `
    <!-- thumb motion div -->
    <div class="ant-segmented-group">
      @if (animationState) {
        <div
          [ngClass]="{ 'ant-segmented-thumb': true, 'ant-segmented-thumb-motion': true }"
          [@thumbMotion]="animationState"
          (@thumbMotion.done)="handleThumbAnimationDone($event)"
        ></div>
      }

      @for (item of normalizedOptions; track item; let i = $index) {
        <label
          #itemLabels
          [ngClass]="{
            'ant-segmented-item': true,
            'ant-segmented-item-selected': i === selectedIndex,
            'ant-segmented-item-disabled': !!nzDisabled || item.disabled
          }"
        >
          <input class="ant-segmented-item-input" type="radio" [checked]="i === selectedIndex" />
          <div class="ant-segmented-item-label" (click)="!item.disabled && handleOptionClick(i)">
            @if (item.icon) {
              <span class="ant-segmented-item-icon"><span nz-icon [nzType]="item.icon"></span></span>
              <span>
                <ng-container
                  *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
                >
                  {{ item.label }}
                </ng-container>
              </span>
            } @else {
              <ng-container
                *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
              >
                {{ item.label }}
              </ng-container>
            }
          </div>
        </label>
      }
    </div>
  `,
                    host: {
                        class: 'ant-segmented',
                        '[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`
                    },
                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSegmentedComponent), multi: true }],
                    animations: [thumbMotion],
                    imports: [NgClass, NzIconModule, NzOutletModule],
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.Directionality }], propDecorators: { listOfOptions: [{
                type: ViewChildren,
                args: ['itemLabels', { read: ElementRef }]
            }], nzBlock: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], nzDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], nzOptions: [{
                type: Input
            }], nzSize: [{
                type: Input
            }], nzLabelTemplate: [{
                type: Input
            }], nzValueChange: [{
                type: Output
            }] } });
function getThumbAnimationProps(element) {
    return {
        transform: element.offsetLeft,
        width: element.clientWidth
    };
}

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzSegmentedModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedModule, imports: [NzSegmentedComponent], exports: [NzSegmentedComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedModule, imports: [NzSegmentedComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSegmentedModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [NzSegmentedComponent],
                    exports: [NzSegmentedComponent]
                }]
        }] });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NzSegmentedComponent, NzSegmentedModule, normalizeOptions };
//# sourceMappingURL=ng-zorro-antd-segmented.mjs.map