@taiga-ui/addon-mobile/esm2022/components/mobile-dialog/mobile-dialog.component.mjs

Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.

import { NgForOf, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TuiRipple } from '@taiga-ui/addon-mobile/directives';
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
import { TuiButton } from '@taiga-ui/core/components/button';
import { injectContext, PolymorpheusOutlet, PolymorpheusTemplate, } from '@taiga-ui/polymorpheus';
import * as i0 from "@angular/core";
class TuiMobileDialog {
    constructor() {
        this.isIOS = inject(TUI_IS_IOS);
        this.context = injectContext();
    }
    onAction(index) {
        this.context.completeWith(index);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileDialog, isStandalone: true, selector: "tui-mobile-dialog", host: { properties: { "class._ios": "isIOS" } }, ngImport: i0, template: "<h2\n    *ngIf=\"!!context.label\"\n    automation-id=\"tui-mobile-dialog__label\"\n    class=\"t-heading\"\n    [id]=\"context.id\"\n>\n    {{ context.label }}\n</h2>\n<div class=\"t-content\">\n    <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n        {{ text }}\n    </ng-container>\n</div>\n<button\n    *ngFor=\"let action of context.actions; let index = index\"\n    appearance=\"flat\"\n    size=\"s\"\n    tuiButton\n    tuiRipple\n    type=\"button\"\n    class=\"t-button\"\n    [class.t-button_column]=\"context.actions.length > 2\"\n    (click)=\"onAction(index)\"\n>\n    {{ action }}\n</button>\n", styles: [":host{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;background:var(--tui-background-base);word-break:break-word;overflow:hidden;padding:1.25rem .75rem 0 1.5rem}:host:not(._ios){max-inline-size:17.5rem;border-radius:.125rem;text-align:start;box-shadow:0 1.5rem 1.5rem #00000052}:host._ios{max-inline-size:16.875rem;padding:1.5rem 0 0;border-radius:.75rem;text-align:center}.t-heading{font-size:1rem}:host._ios .t-heading{font-weight:700;font-size:1.125rem}.t-content{margin-block-start:.75rem;font-size:.875rem;line-height:1.25rem;padding-inline-end:.75rem}:host._ios .t-content{margin-block-start:.25rem;padding-inline-start:1.5rem;padding-inline-end:1.5rem}.t-button{border-radius:0}:host._ios .t-button{border-block-start:#b8b8b8 1px solid;block-size:2.625rem;inline-size:100%}:host._ios .t-button:first-of-type{margin-block-start:1.125rem}:host:not(._ios) .t-button{margin:.5rem 0 .5rem .5rem;float:inline-end}:host:not(._ios) .t-button_column{display:block;float:none;margin-inline-start:auto}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiMobileDialog };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileDialog, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-mobile-dialog', imports: [
                        NgForOf,
                        NgIf,
                        PolymorpheusOutlet,
                        PolymorpheusTemplate,
                        TuiButton,
                        TuiRipple,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class._ios]': 'isIOS',
                    }, template: "<h2\n    *ngIf=\"!!context.label\"\n    automation-id=\"tui-mobile-dialog__label\"\n    class=\"t-heading\"\n    [id]=\"context.id\"\n>\n    {{ context.label }}\n</h2>\n<div class=\"t-content\">\n    <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n        {{ text }}\n    </ng-container>\n</div>\n<button\n    *ngFor=\"let action of context.actions; let index = index\"\n    appearance=\"flat\"\n    size=\"s\"\n    tuiButton\n    tuiRipple\n    type=\"button\"\n    class=\"t-button\"\n    [class.t-button_column]=\"context.actions.length > 2\"\n    (click)=\"onAction(index)\"\n>\n    {{ action }}\n</button>\n", styles: [":host{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;background:var(--tui-background-base);word-break:break-word;overflow:hidden;padding:1.25rem .75rem 0 1.5rem}:host:not(._ios){max-inline-size:17.5rem;border-radius:.125rem;text-align:start;box-shadow:0 1.5rem 1.5rem #00000052}:host._ios{max-inline-size:16.875rem;padding:1.5rem 0 0;border-radius:.75rem;text-align:center}.t-heading{font-size:1rem}:host._ios .t-heading{font-weight:700;font-size:1.125rem}.t-content{margin-block-start:.75rem;font-size:.875rem;line-height:1.25rem;padding-inline-end:.75rem}:host._ios .t-content{margin-block-start:.25rem;padding-inline-start:1.5rem;padding-inline-end:1.5rem}.t-button{border-radius:0}:host._ios .t-button{border-block-start:#b8b8b8 1px solid;block-size:2.625rem;inline-size:100%}:host._ios .t-button:first-of-type{margin-block-start:1.125rem}:host:not(._ios) .t-button{margin:.5rem 0 .5rem .5rem;float:inline-end}:host:not(._ios) .t-button_column{display:block;float:none;margin-inline-start:auto}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9iaWxlLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1tb2JpbGUvY29tcG9uZW50cy9tb2JpbGUtZGlhbG9nL21vYmlsZS1kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2NvbXBvbmVudHMvbW9iaWxlLWRpYWxvZy9tb2JpbGUtZGlhbG9nLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFFNUQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQ2hELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQ0gsYUFBYSxFQUNiLGtCQUFrQixFQUNsQixvQkFBb0IsR0FDdkIsTUFBTSx3QkFBd0IsQ0FBQzs7QUFJaEMsTUFrQmEsZUFBZTtJQWxCNUI7UUFtQnVCLFVBQUssR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDM0IsWUFBTyxHQUN0QixhQUFhLEVBQWlELENBQUM7S0FLdEU7SUFIYSxRQUFRLENBQUMsS0FBYTtRQUM1QixJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDOytHQVBRLGVBQWU7bUdBQWYsZUFBZSw4SENoQzVCLHdvQkEwQkEsbWtDRFJRLE9BQU8sbUhBQ1AsSUFBSSw2RkFDSixrQkFBa0IsOEhBRWxCLFNBQVMsb0lBQ1QsU0FBUzs7U0FTSixlQUFlOzRGQUFmLGVBQWU7a0JBbEIzQixTQUFTO2lDQUNNLElBQUksWUFDTixtQkFBbUIsV0FDcEI7d0JBQ0wsT0FBTzt3QkFDUCxJQUFJO3dCQUNKLGtCQUFrQjt3QkFDbEIsb0JBQW9CO3dCQUNwQixTQUFTO3dCQUNULFNBQVM7cUJBQ1osbUJBR2dCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsY0FBYyxFQUFFLE9BQU87cUJBQzFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0Zvck9mLCBOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3R9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUdWlSaXBwbGV9IGZyb20gJ0B0YWlnYS11aS9hZGRvbi1tb2JpbGUvZGlyZWN0aXZlcyc7XG5pbXBvcnQge3R5cGUgVHVpUG9wb3Zlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay9zZXJ2aWNlcyc7XG5pbXBvcnQge1RVSV9JU19JT1N9IGZyb20gJ0B0YWlnYS11aS9jZGsvdG9rZW5zJztcbmltcG9ydCB7VHVpQnV0dG9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1xuICAgIGluamVjdENvbnRleHQsXG4gICAgUG9seW1vcnBoZXVzT3V0bGV0LFxuICAgIFBvbHltb3JwaGV1c1RlbXBsYXRlLFxufSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHt0eXBlIFR1aU1vYmlsZURpYWxvZ09wdGlvbnN9IGZyb20gJy4vbW9iaWxlLWRpYWxvZy5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1tb2JpbGUtZGlhbG9nJyxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIE5nRm9yT2YsXG4gICAgICAgIE5nSWYsXG4gICAgICAgIFBvbHltb3JwaGV1c091dGxldCxcbiAgICAgICAgUG9seW1vcnBoZXVzVGVtcGxhdGUsXG4gICAgICAgIFR1aUJ1dHRvbixcbiAgICAgICAgVHVpUmlwcGxlLFxuICAgIF0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL21vYmlsZS1kaWFsb2cudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbW9iaWxlLWRpYWxvZy5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2NsYXNzLl9pb3NdJzogJ2lzSU9TJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlNb2JpbGVEaWFsb2c8ST4ge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBpc0lPUyA9IGluamVjdChUVUlfSVNfSU9TKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udGV4dCA9XG4gICAgICAgIGluamVjdENvbnRleHQ8VHVpUG9wb3ZlcjxUdWlNb2JpbGVEaWFsb2dPcHRpb25zPEk+LCBudW1iZXI+PigpO1xuXG4gICAgcHJvdGVjdGVkIG9uQWN0aW9uKGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jb250ZXh0LmNvbXBsZXRlV2l0aChpbmRleCk7XG4gICAgfVxufVxuIiwiPGgyXG4gICAgKm5nSWY9XCIhIWNvbnRleHQubGFiZWxcIlxuICAgIGF1dG9tYXRpb24taWQ9XCJ0dWktbW9iaWxlLWRpYWxvZ19fbGFiZWxcIlxuICAgIGNsYXNzPVwidC1oZWFkaW5nXCJcbiAgICBbaWRdPVwiY29udGV4dC5pZFwiXG4+XG4gICAge3sgY29udGV4dC5sYWJlbCB9fVxuPC9oMj5cbjxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICA8bmctY29udGFpbmVyICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJjb250ZXh0LmNvbnRlbnQgYXMgdGV4dDsgY29udGV4dDogY29udGV4dFwiPlxuICAgICAgICB7eyB0ZXh0IH19XG4gICAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbjxidXR0b25cbiAgICAqbmdGb3I9XCJsZXQgYWN0aW9uIG9mIGNvbnRleHQuYWN0aW9uczsgbGV0IGluZGV4ID0gaW5kZXhcIlxuICAgIGFwcGVhcmFuY2U9XCJmbGF0XCJcbiAgICBzaXplPVwic1wiXG4gICAgdHVpQnV0dG9uXG4gICAgdHVpUmlwcGxlXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgY2xhc3M9XCJ0LWJ1dHRvblwiXG4gICAgW2NsYXNzLnQtYnV0dG9uX2NvbHVtbl09XCJjb250ZXh0LmFjdGlvbnMubGVuZ3RoID4gMlwiXG4gICAgKGNsaWNrKT1cIm9uQWN0aW9uKGluZGV4KVwiXG4+XG4gICAge3sgYWN0aW9uIH19XG48L2J1dHRvbj5cbiJdfQ==