ng-zorro-antd-mobile/fesm2022/ng-zorro-antd-mobile-action-sheet.mjs

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

import * as i0 from '@angular/core';
import { TemplateRef, Component, ViewEncapsulation, Injectable, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { OverlayModule } from '@angular/cdk/overlay';
import { ListModule } from 'ng-zorro-antd-mobile/list';
import * as i4 from 'ng-zorro-antd-mobile/pipes';
import { NgZorroAntdMobilePipesModule } from 'ng-zorro-antd-mobile/pipes';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i1 from 'ng-zorro-antd-mobile/locale-provider';
import { LocaleProviderModule } from 'ng-zorro-antd-mobile/locale-provider';
import * as i3 from 'ng-zorro-antd-mobile/core';
import { PopupService, TouchFeedbackModule } from 'ng-zorro-antd-mobile/core';
import { WingBlankModule } from 'ng-zorro-antd-mobile/wing-blank';
import { WhiteSpaceModule } from 'ng-zorro-antd-mobile/white-space';

class ActionSheetRef {
}

class ActionSheetComponent extends ActionSheetRef {
    constructor(localeProviderService, elementRef) {
        super();
        this.localeProviderService = localeProviderService;
        this.elementRef = elementRef;
        this.unsubscribe$ = new Subject();
    }
    ngOnInit() {
        this.localeProvider();
    }
    localeProvider() {
        const self = this;
        if (self.option.locale || self.option.locale !== undefined) {
            self.localeProviderService.setLocale(self.option.locale);
        }
        self.localeProviderService.localeChange.pipe(takeUntil(self.unsubscribe$)).subscribe(_ => {
            if (self.option.cancelButtonText) {
                self.option.cancelButtonText = self.localeProviderService.getLocaleSubObj('ActionSheet')['dismissText'];
            }
        });
    }
    onPress(index, rowIndex = 0, event) { }
    showShare(option) {
        const cls = { [`${option.prefixCls}-share`]: option.flag === 'SHARE' };
        return cls;
    }
    setActiveClassName(option, suffix) {
        return [`${option.prefixCls}-${suffix}-active`];
    }
    isNoTitle(value) {
        return value === '' || value === null || value === undefined;
    }
    isTemplateRef(value) {
        return value instanceof TemplateRef;
    }
    isArray(options, value) {
        if (options.length > 0 && value) {
            return value instanceof Array;
        }
        return false;
    }
    getInstance() {
        return this;
    }
    getElement() {
        return this.elementRef && this.elementRef.nativeElement;
    }
    close() {
        if (this.option.close) {
            this.option.close();
        }
    }
    destroy() {
        this.close();
    }
    ngOnDestroy() {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i1.LocaleProviderService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ActionSheetComponent, selector: "ActionSheet", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ option.prefixCls }}-mask {{ option.maskTransitionName }}\"></div>\n<div\n  role=\"dialog\"\n  class=\"{{ option.prefixCls }}-wrap {{ option.transitionName }}\"\n  (click)=\"option.maskClose(-1, 0, $event)\"\n>\n  <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"showShare(option)\">\n    <div class=\"{{ option.prefixCls }}-content\">\n      <button aria-label=\"Close\" class=\"{{ option.prefixCls }}-close\">\n        <span class=\"{{ option.prefixCls }}-close-x\"></span>\n      </button>\n      <div class=\"{{ option.prefixCls }}-body\">\n        <div>\n          <ng-container *ngIf=\"!isNoTitle(option.title)\">\n            <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n            <h3 *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</h3>\n          </ng-container>\n          <ng-container *ngIf=\"!isNoTitle(option.message)\">\n            <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n            <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-message\">\n              {{ option.message }}\n            </div>\n          </ng-container>\n          <ng-container [ngSwitch]=\"option.flag\">\n            <div *ngSwitchCase=\"'NORMAL'\" class=\"{{ option.prefixCls }}-button-list\" role=\"group\">\n              <ng-container *ngFor=\"let item of option.options; let i = index\">\n                <div\n                  TouchFeedbackDirective\n                  class=\"{{ option.prefixCls }}-button-list-item\"\n                  [className]=\"setActiveClassName(option, 'button-list-item')\"\n                >\n                  <div\n                    *ngIf=\"option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i\"\n                    class=\"{{ option.prefixCls }}-button-list-item\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                  </div>\n                  <div\n                    *ngIf=\"option.destructiveButtonIndex === i\"\n                    class=\"{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-destructive-button\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                  </div>\n                  <div\n                    *ngIf=\"option.cancelButtonIndex === i\"\n                    class=\"{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-cancel-button\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                    <span class=\"{{ option.prefixCls }}-cancel-button-mask\"></span>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n            <div *ngSwitchCase=\"'SHARE'\" class=\"{{ option.prefixCls }}-share {{ option.prefixCls }}-share-content\">\n              <div *ngIf=\"!isArray(option.options, option.options[0])\" class=\"{{ option.prefixCls }}-share-list\">\n                <ng-container *ngFor=\"let item of option.options; let i = index\">\n                  <div class=\"{{ option.prefixCls }}-share-list-item\" (click)=\"option.onPress(i, 0, $event)\">\n                    <div class=\"{{ option.prefixCls }}-share-list-item-icon\">\n                      <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n                      <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n                    </div>\n                    <div class=\"{{ option.prefixCls }}-share-list-item-title\">{{ item.title }}</div>\n                  </div>\n                </ng-container>\n              </div>\n              <ng-container *ngIf=\"isArray(option.options, option.options[0])\">\n                <div\n                  *ngFor=\"let items of option.options; let rowIndex = index\"\n                  class=\"{{ option.prefixCls }}-share-list\"\n                >\n                  <ng-container *ngFor=\"let item of items; let i = index\">\n                    <div class=\"{{ option.prefixCls }}-share-list-item\" (click)=\"option.onPress(i, rowIndex, $event)\">\n                      <div class=\"{{ option.prefixCls }}-share-list-item-icon\">\n                        <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n                        <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n                      </div>\n                      <div class=\"{{ option.prefixCls }}-share-list-item-title\">{{ item.title }}</div>\n                    </div>\n                  </ng-container>\n                </div>\n              </ng-container>\n              <div\n                TouchFeedbackDirective\n                [className]=\"setActiveClassName(option, 'share-cancel-button')\"\n                class=\"{{ option.prefixCls }}-share-cancel-button\"\n              >\n                {{ option.cancelButtonText }}\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.TouchFeedbackDirective, selector: "[TouchFeedbackDirective]", inputs: ["className", "activeStyle"], outputs: ["clickStart", "clickEnd"] }, { kind: "pipe", type: i4.SafeHTMLPipe, name: "safeHTML" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ActionSheet', encapsulation: ViewEncapsulation.None, template: "<div class=\"{{ option.prefixCls }}-mask {{ option.maskTransitionName }}\"></div>\n<div\n  role=\"dialog\"\n  class=\"{{ option.prefixCls }}-wrap {{ option.transitionName }}\"\n  (click)=\"option.maskClose(-1, 0, $event)\"\n>\n  <div role=\"document\" class=\"{{ option.prefixCls }}\" [ngClass]=\"showShare(option)\">\n    <div class=\"{{ option.prefixCls }}-content\">\n      <button aria-label=\"Close\" class=\"{{ option.prefixCls }}-close\">\n        <span class=\"{{ option.prefixCls }}-close-x\"></span>\n      </button>\n      <div class=\"{{ option.prefixCls }}-body\">\n        <div>\n          <ng-container *ngIf=\"!isNoTitle(option.title)\">\n            <ng-template *ngIf=\"isTemplateRef(option.title)\" [ngTemplateOutlet]=\"option.title\"></ng-template>\n            <h3 *ngIf=\"!isTemplateRef(option.title)\" class=\"{{ option.prefixCls }}-title\">{{ option.title }}</h3>\n          </ng-container>\n          <ng-container *ngIf=\"!isNoTitle(option.message)\">\n            <ng-template *ngIf=\"isTemplateRef(option.message)\" [ngTemplateOutlet]=\"option.message\"></ng-template>\n            <div *ngIf=\"!isTemplateRef(option.message)\" class=\"{{ option.prefixCls }}-message\">\n              {{ option.message }}\n            </div>\n          </ng-container>\n          <ng-container [ngSwitch]=\"option.flag\">\n            <div *ngSwitchCase=\"'NORMAL'\" class=\"{{ option.prefixCls }}-button-list\" role=\"group\">\n              <ng-container *ngFor=\"let item of option.options; let i = index\">\n                <div\n                  TouchFeedbackDirective\n                  class=\"{{ option.prefixCls }}-button-list-item\"\n                  [className]=\"setActiveClassName(option, 'button-list-item')\"\n                >\n                  <div\n                    *ngIf=\"option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i\"\n                    class=\"{{ option.prefixCls }}-button-list-item\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                  </div>\n                  <div\n                    *ngIf=\"option.destructiveButtonIndex === i\"\n                    class=\"{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-destructive-button\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                  </div>\n                  <div\n                    *ngIf=\"option.cancelButtonIndex === i\"\n                    class=\"{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-cancel-button\"\n                    (click)=\"option.onPress(i, 0, $event)\"\n                  >\n                    {{ item }}\n                    <span class=\"{{ option.prefixCls }}-cancel-button-mask\"></span>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n            <div *ngSwitchCase=\"'SHARE'\" class=\"{{ option.prefixCls }}-share {{ option.prefixCls }}-share-content\">\n              <div *ngIf=\"!isArray(option.options, option.options[0])\" class=\"{{ option.prefixCls }}-share-list\">\n                <ng-container *ngFor=\"let item of option.options; let i = index\">\n                  <div class=\"{{ option.prefixCls }}-share-list-item\" (click)=\"option.onPress(i, 0, $event)\">\n                    <div class=\"{{ option.prefixCls }}-share-list-item-icon\">\n                      <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n                      <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n                    </div>\n                    <div class=\"{{ option.prefixCls }}-share-list-item-title\">{{ item.title }}</div>\n                  </div>\n                </ng-container>\n              </div>\n              <ng-container *ngIf=\"isArray(option.options, option.options[0])\">\n                <div\n                  *ngFor=\"let items of option.options; let rowIndex = index\"\n                  class=\"{{ option.prefixCls }}-share-list\"\n                >\n                  <ng-container *ngFor=\"let item of items; let i = index\">\n                    <div class=\"{{ option.prefixCls }}-share-list-item\" (click)=\"option.onPress(i, rowIndex, $event)\">\n                      <div class=\"{{ option.prefixCls }}-share-list-item-icon\">\n                        <ng-template *ngIf=\"isTemplateRef(item.icon)\" [ngTemplateOutlet]=\"item.icon\"></ng-template>\n                        <div *ngIf=\"!isTemplateRef(item.icon)\" [innerHTML]=\"item.icon | safeHTML\"></div>\n                      </div>\n                      <div class=\"{{ option.prefixCls }}-share-list-item-title\">{{ item.title }}</div>\n                    </div>\n                  </ng-container>\n                </div>\n              </ng-container>\n              <div\n                TouchFeedbackDirective\n                [className]=\"setActiveClassName(option, 'share-cancel-button')\"\n                class=\"{{ option.prefixCls }}-share-cancel-button\"\n              >\n                {{ option.cancelButtonText }}\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.LocaleProviderService }, { type: i0.ElementRef }] });

class ActionSheetOptions {
    constructor() {
        this.prefixCls = 'am-action-sheet';
        this.maskClosable = true;
        this.transitionName = 'am-slide-up';
        this.maskTransitionName = 'am-fade';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetOptions, decorators: [{
            type: Injectable
        }] });
class ShareOption {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareOption, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareOption }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareOption, decorators: [{
            type: Injectable
        }] });
class ShareActionSheetWithOptions extends ActionSheetOptions {
    constructor() {
        super(...arguments);
        this.cancelButtonText = 'Cancel';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareActionSheetWithOptions, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareActionSheetWithOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ShareActionSheetWithOptions, decorators: [{
            type: Injectable
        }] });
class ActionSheetWithOptions extends ActionSheetOptions {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetWithOptions, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetWithOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetWithOptions, decorators: [{
            type: Injectable
        }] });

const NORMAL = 'NORMAL';
const SHARE = 'SHARE';
function noop() { }
class ActionSheetService extends PopupService {
    constructor() {
        super(...arguments);
        this.compRef = null;
        this._actionSheetCompFactory = null;
        this.appRef = null;
        this.comRef = null;
        this.instance = null;
    }
    _initConfig(config, options = {}) {
        const props = new ActionSheetOptions();
        const optionalParams = [
            'prefixCls',
            'maskClosable',
            'cancelButtonText',
            'cancelButtonIndex',
            'destructiveButtonIndex',
            'title',
            'message',
            'className',
            'transitionName',
            'maskTransitionName',
            'options',
            'locale',
            'close'
        ];
        const self = this;
        config = Object.assign(options, config, {
            close: () => {
                if (config.maskClosable) {
                    self.closeWithAnimation(config.transitionName, config.maskTransitionName);
                }
            }
        });
        optionalParams.forEach(key => {
            if (config[key] !== undefined) {
                props[key] = config[key];
            }
        });
        return props;
    }
    _open(props) {
        this.comRef = this.showPopup(ActionSheetComponent);
        this.comRef.instance.option = props;
        return this.comRef && this.comRef.instance;
    }
    createActionSheet(flag, config, callback) {
        const options = flag === NORMAL ? new ActionSheetOptions() : new ShareActionSheetWithOptions();
        const transitionName = config.transitionName ? config.transitionName : options.transitionName;
        options.transitionName = `${transitionName}-enter ${transitionName}-enter-active`;
        const maskTransitionName = config.maskTransitionName ? config.maskTransitionName : options.maskTransitionName;
        options.maskTransitionName = `${maskTransitionName}-enter ${maskTransitionName}-enter-active`;
        const props = this._initConfig(config, options);
        Object.assign(props, { onPress: cb }, { flag: flag }, { maskClose: props.maskClosable ? cb : () => { } });
        const self = this;
        function cb(index, rowIndex = 0, event) {
            event.stopPropagation();
            const res = callback(index, rowIndex);
            if (res && res.then) {
                res.then(() => {
                    self.closeWithAnimation(transitionName, maskTransitionName);
                });
            }
            else {
                self.closeWithAnimation(transitionName, maskTransitionName);
            }
        }
        return this._open(props);
    }
    closeWithAnimation(transitionName, maskTransitionName) {
        this.comRef.instance.option.transitionName = `${transitionName}-leave ${transitionName}-leave-active`;
        this.comRef.instance.option.maskTransitionName = `${maskTransitionName}-leave ${maskTransitionName}-leave-active`;
        setTimeout(() => {
            this.close();
        }, 200);
    }
    showActionSheetWithOptions(config, callback = noop) {
        return this.createActionSheet(NORMAL, config, callback);
    }
    showShareActionSheetWithOptions(config, callback = noop) {
        return this.createActionSheet(SHARE, config, callback);
    }
    close() {
        this.hidePopup();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class ActionSheetModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetModule, declarations: [ActionSheetComponent], imports: [CommonModule,
            OverlayModule,
            NgZorroAntdMobilePipesModule,
            ListModule,
            WhiteSpaceModule,
            WingBlankModule,
            LocaleProviderModule,
            TouchFeedbackModule], exports: [ActionSheetComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetModule, providers: [PopupService, ActionSheetService], imports: [CommonModule,
            OverlayModule,
            NgZorroAntdMobilePipesModule,
            ListModule,
            WhiteSpaceModule,
            WingBlankModule,
            LocaleProviderModule,
            TouchFeedbackModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ActionSheetModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        OverlayModule,
                        NgZorroAntdMobilePipesModule,
                        ListModule,
                        WhiteSpaceModule,
                        WingBlankModule,
                        LocaleProviderModule,
                        TouchFeedbackModule
                    ],
                    declarations: [ActionSheetComponent],
                    exports: [ActionSheetComponent],
                    providers: [PopupService, ActionSheetService]
                }]
        }] });

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

export { ActionSheetService as ActionSheet, ActionSheetComponent, ActionSheetModule, ActionSheetOptions, ActionSheetRef, ActionSheetService, ActionSheetWithOptions, ShareActionSheetWithOptions, ShareOption };
//# sourceMappingURL=ng-zorro-antd-mobile-action-sheet.mjs.map