@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
56 lines (52 loc) • 6.68 kB
JavaScript
import { NgForOf } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input } 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';
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-start": "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-start)) 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;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(-50%);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-start));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-start));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-start))}.t-stop{position:absolute;block-size:var(--t-start);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 }); }
}
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-start]': '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-start)) 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;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(-50%);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-start));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-start));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-start))}.t-stop{position:absolute;block-size:var(--t-start);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
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiBottomSheet };
//# sourceMappingURL=taiga-ui-addon-mobile-components-bottom-sheet.mjs.map