@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
49 lines • 12.1 kB
JavaScript
import { NgForOf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, ViewChild, ViewChildren, } from '@angular/core';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiHeaderOptionsProvider } from '@taiga-ui/layout/components/header';
import * as i0 from "@angular/core";
const OPTIONS = {
duration: 20,
easing: 'ease-in',
fill: 'forwards',
};
class TuiBottomSheet {
constructor() {
this.elements = EMPTY_QUERY;
this.el = tuiInjectElement();
this.stops = ['1.5rem'];
}
onScroll() {
const { clientHeight, scrollTop, scrollHeight } = this.el;
const top = this.elements.get(0)?.nativeElement.clientHeight || 0;
const max = this.content?.nativeElement.clientHeight || Infinity;
const height = Math.min(clientHeight, max);
const scrolled = Math.min(scrollTop, height - top);
const transform = `translate3d(0, ${-1 * scrolled}px, 0)`;
this.el.style.setProperty('--t-height', `${scrollHeight}px`);
this.el.animate([{ transform }], OPTIONS);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiBottomSheet, isStandalone: true, selector: "tui-bottom-sheet", inputs: { stops: "stops" }, host: { listeners: { "scroll.zoneless": "onScroll()", "resize": "onScroll()" }, properties: { "style.--t-initial": "stops[0]", "style.scroll-snap-type": "stops.length > 1 ? \"y mandatory\" : null" } }, providers: [tuiHeaderOptionsProvider({ size: 'h5' })], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "elements", predicate: ["stops"], descendants: true }], ngImport: i0, template: "<div\n *ngFor=\"let stop of stops\"\n #stops\n class=\"t-stop\"\n [style.top]=\"stop\"\n></div>\n<div\n #content\n class=\"t-content\"\n (resize)=\"onScroll()\"\n>\n <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiBottomSheet };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBottomSheet, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-bottom-sheet', imports: [NgForOf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHeaderOptionsProvider({ size: 'h5' })], host: {
'[style.--t-initial]': 'stops[0]',
'[style.scroll-snap-type]': 'stops.length > 1 ? "y mandatory" : null',
'(scroll.zoneless)': 'onScroll()',
'(resize)': 'onScroll()',
}, template: "<div\n *ngFor=\"let stop of stops\"\n #stops\n class=\"t-stop\"\n [style.top]=\"stop\"\n></div>\n<div\n #content\n class=\"t-content\"\n (resize)=\"onScroll()\"\n>\n <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"] }]
}], propDecorators: { elements: [{
type: ViewChildren,
args: ['stops']
}], content: [{
type: ViewChild,
args: ['content']
}], stops: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm90dG9tLXNoZWV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL2JvdHRvbS1zaGVldC9ib3R0b20tc2hlZXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2NvbXBvbmVudHMvYm90dG9tLXNoZWV0L2JvdHRvbS1zaGVldC50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxLQUFLLEVBRUwsU0FBUyxFQUNULFlBQVksR0FDZixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDcEQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0sb0NBQW9DLENBQUM7O0FBRTVFLE1BQU0sT0FBTyxHQUFHO0lBQ1osUUFBUSxFQUFFLEVBQUU7SUFDWixNQUFNLEVBQUUsU0FBUztJQUNqQixJQUFJLEVBQUUsVUFBVTtDQUNWLENBQUM7QUFFWCxNQWVhLGNBQWM7SUFmM0I7UUFpQnFCLGFBQVEsR0FBdUMsV0FBVyxDQUFDO1FBSzNELE9BQUUsR0FBRyxnQkFBZ0IsRUFBRSxDQUFDO1FBR2xDLFVBQUssR0FBc0IsQ0FBQyxRQUFRLENBQUMsQ0FBQztLQWFoRDtJQVhhLFFBQVE7UUFDZCxNQUFNLEVBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDO1FBQ3hELE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLGFBQWEsQ0FBQyxZQUFZLElBQUksQ0FBQyxDQUFDO1FBQ2xFLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsYUFBYSxDQUFDLFlBQVksSUFBSSxRQUFRLENBQUM7UUFDakUsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDM0MsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsTUFBTSxHQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQ25ELE1BQU0sU0FBUyxHQUFHLGtCQUFrQixDQUFDLENBQUMsR0FBRyxRQUFRLFFBQVEsQ0FBQztRQUUxRCxJQUFJLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsWUFBWSxFQUFFLEdBQUcsWUFBWSxJQUFJLENBQUMsQ0FBQztRQUM3RCxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUMsU0FBUyxFQUFDLENBQUMsRUFBRSxPQUFPLENBQUMsQ0FBQztJQUM1QyxDQUFDOytHQXRCUSxjQUFjO21HQUFkLGNBQWMscVNBUlosQ0FBQyx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDLHFNQzNCdkQsd1BBY0Esc2hERFNjLE9BQU87O1NBWVIsY0FBYzs0RkFBZCxjQUFjO2tCQWYxQixTQUFTO2lDQUNNLElBQUksWUFDTixrQkFBa0IsV0FDbkIsQ0FBQyxPQUFPLENBQUMsbUJBR0QsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLElBQUksRUFBQyxDQUFDLENBQUMsUUFDN0M7d0JBQ0YscUJBQXFCLEVBQUUsVUFBVTt3QkFDakMsMEJBQTBCLEVBQUUseUNBQXlDO3dCQUNyRSxtQkFBbUIsRUFBRSxZQUFZO3dCQUNqQyxVQUFVLEVBQUUsWUFBWTtxQkFDM0I7OEJBSWdCLFFBQVE7c0JBRHhCLFlBQVk7dUJBQUMsT0FBTztnQkFJSixPQUFPO3NCQUR2QixTQUFTO3VCQUFDLFNBQVM7Z0JBTWIsS0FBSztzQkFEWCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0Zvck9mfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgdHlwZSBFbGVtZW50UmVmLFxuICAgIElucHV0LFxuICAgIHR5cGUgUXVlcnlMaXN0LFxuICAgIFZpZXdDaGlsZCxcbiAgICBWaWV3Q2hpbGRyZW4sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtFTVBUWV9RVUVSWX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aUhlYWRlck9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2xheW91dC9jb21wb25lbnRzL2hlYWRlcic7XG5cbmNvbnN0IE9QVElPTlMgPSB7XG4gICAgZHVyYXRpb246IDIwLFxuICAgIGVhc2luZzogJ2Vhc2UtaW4nLFxuICAgIGZpbGw6ICdmb3J3YXJkcycsXG59IGFzIGNvbnN0O1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWJvdHRvbS1zaGVldCcsXG4gICAgaW1wb3J0czogW05nRm9yT2ZdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9ib3R0b20tc2hlZXQudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYm90dG9tLXNoZWV0LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlIZWFkZXJPcHRpb25zUHJvdmlkZXIoe3NpemU6ICdoNSd9KV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLi0tdC1pbml0aWFsXSc6ICdzdG9wc1swXScsXG4gICAgICAgICdbc3R5bGUuc2Nyb2xsLXNuYXAtdHlwZV0nOiAnc3RvcHMubGVuZ3RoID4gMSA/IFwieSBtYW5kYXRvcnlcIiA6IG51bGwnLFxuICAgICAgICAnKHNjcm9sbC56b25lbGVzcyknOiAnb25TY3JvbGwoKScsXG4gICAgICAgICcocmVzaXplKSc6ICdvblNjcm9sbCgpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlCb3R0b21TaGVldCB7XG4gICAgQFZpZXdDaGlsZHJlbignc3RvcHMnKVxuICAgIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudHM6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPEhUTUxFbGVtZW50Pj4gPSBFTVBUWV9RVUVSWTtcblxuICAgIEBWaWV3Q2hpbGQoJ2NvbnRlbnQnKVxuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udGVudD86IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHN0b3BzOiByZWFkb25seSBzdHJpbmdbXSA9IFsnMS41cmVtJ107XG5cbiAgICBwcm90ZWN0ZWQgb25TY3JvbGwoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHtjbGllbnRIZWlnaHQsIHNjcm9sbFRvcCwgc2Nyb2xsSGVpZ2h0fSA9IHRoaXMuZWw7XG4gICAgICAgIGNvbnN0IHRvcCA9IHRoaXMuZWxlbWVudHMuZ2V0KDApPy5uYXRpdmVFbGVtZW50LmNsaWVudEhlaWdodCB8fCAwO1xuICAgICAgICBjb25zdCBtYXggPSB0aGlzLmNvbnRlbnQ/Lm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0IHx8IEluZmluaXR5O1xuICAgICAgICBjb25zdCBoZWlnaHQgPSBNYXRoLm1pbihjbGllbnRIZWlnaHQsIG1heCk7XG4gICAgICAgIGNvbnN0IHNjcm9sbGVkID0gTWF0aC5taW4oc2Nyb2xsVG9wLCBoZWlnaHQgLSB0b3ApO1xuICAgICAgICBjb25zdCB0cmFuc2Zvcm0gPSBgdHJhbnNsYXRlM2QoMCwgJHstMSAqIHNjcm9sbGVkfXB4LCAwKWA7XG5cbiAgICAgICAgdGhpcy5lbC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS10LWhlaWdodCcsIGAke3Njcm9sbEhlaWdodH1weGApO1xuICAgICAgICB0aGlzLmVsLmFuaW1hdGUoW3t0cmFuc2Zvcm19XSwgT1BUSU9OUyk7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgICpuZ0Zvcj1cImxldCBzdG9wIG9mIHN0b3BzXCJcbiAgICAjc3RvcHNcbiAgICBjbGFzcz1cInQtc3RvcFwiXG4gICAgW3N0eWxlLnRvcF09XCJzdG9wXCJcbj48L2Rpdj5cbjxkaXZcbiAgICAjY29udGVudFxuICAgIGNsYXNzPVwidC1jb250ZW50XCJcbiAgICAocmVzaXplKT1cIm9uU2Nyb2xsKClcIlxuPlxuICAgIDxuZy1jb250ZW50IC8+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJ0LWJvdHRvbVwiPjwvZGl2PlxuIl19