@taiga-ui/layout
Version:
A package with Taiga UI layout components
58 lines • 8.96 kB
JavaScript
import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation, } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { take, timer } from 'rxjs';
import * as i0 from "@angular/core";
class TuiItemGroupStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiItemGroupStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiItemGroupStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-item-group" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiItemGroup]{display:flex;flex-wrap:wrap;--tui-item-margin: .25rem}[tuiItemGroup]>*:not(tui-items-with-more){margin:0 var(--tui-item-margin) var(--tui-item-margin) 0}[tuiItemGroup]._horizontal{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;overflow:scroll}[tuiItemGroup]._horizontal::-webkit-scrollbar,[tuiItemGroup]._horizontal::-webkit-scrollbar-thumb{display:none}[tuiItemGroup]._horizontal>*:not(tui-items-with-more){margin-block-end:0}[tuiItemGroup]._initialized tui-items-with-more .t-item{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:1;transform:scale(1)}[tuiItemGroup]._initialized tui-items-with-more .t-item>*{margin:0 var(--tui-item-margin) var(--tui-item-margin) 0}[tuiItemGroup]._initialized tui-items-with-more .t-item_hidden{opacity:0;transform:scale(.9)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiItemGroupStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-item-group',
}, styles: ["[tuiItemGroup]{display:flex;flex-wrap:wrap;--tui-item-margin: .25rem}[tuiItemGroup]>*:not(tui-items-with-more){margin:0 var(--tui-item-margin) var(--tui-item-margin) 0}[tuiItemGroup]._horizontal{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;overflow:scroll}[tuiItemGroup]._horizontal::-webkit-scrollbar,[tuiItemGroup]._horizontal::-webkit-scrollbar-thumb{display:none}[tuiItemGroup]._horizontal>*:not(tui-items-with-more){margin-block-end:0}[tuiItemGroup]._initialized tui-items-with-more .t-item{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:1;transform:scale(1)}[tuiItemGroup]._initialized tui-items-with-more .t-item>*{margin:0 var(--tui-item-margin) var(--tui-item-margin) 0}[tuiItemGroup]._initialized tui-items-with-more .t-item_hidden{opacity:0;transform:scale(.9)}\n"] }]
}] });
class TuiItemGroup {
constructor() {
this.el = tuiInjectElement();
this.nothing = tuiWithStyles(TuiItemGroupStyles);
this.horizontal = false;
this.autoscroll = false;
}
ngAfterViewInit() {
this.el.classList.add('_initialized');
}
onClick(target) {
if (this.autoscroll && this.horizontal) {
timer(0) // Safari bug
.pipe(take(1))
.subscribe(() => {
target.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
});
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiItemGroup, isStandalone: true, selector: "[tuiItemGroup]", inputs: { horizontal: "horizontal", autoscroll: "autoscroll" }, host: { listeners: { "click": "onClick($event.target)" }, properties: { "class._horizontal": "horizontal" } }, ngImport: i0 }); }
}
export { TuiItemGroup };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiItemGroup, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiItemGroup]',
host: {
'(click)': 'onClick($event.target)',
'[class._horizontal]': 'horizontal',
},
}]
}], propDecorators: { horizontal: [{
type: Input
}], autoscroll: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXRlbS1ncm91cC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9pdGVtLWdyb3VwL2l0ZW0tZ3JvdXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFDVCxLQUFLLEVBQ0wsaUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRSxPQUFPLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUFFakMsTUFVTSxrQkFBa0I7K0dBQWxCLGtCQUFrQjttR0FBbEIsa0JBQWtCLG9IQVJWLEVBQUU7OzRGQVFWLGtCQUFrQjtrQkFWdkIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLEtBQUssRUFBRSxnQkFBZ0I7cUJBQzFCOztBQUlMLE1BUWEsWUFBWTtJQVJ6QjtRQVNxQixPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUN0QixZQUFPLEdBQUcsYUFBYSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFHeEQsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUduQixlQUFVLEdBQUcsS0FBSyxDQUFDO0tBbUI3QjtJQWpCVSxlQUFlO1FBQ2xCLElBQUksQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRVMsT0FBTyxDQUFDLE1BQW1CO1FBQ2pDLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3BDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhO2lCQUNqQixJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO2lCQUNiLFNBQVMsQ0FBQyxHQUFHLEVBQUU7Z0JBQ1osTUFBTSxDQUFDLGNBQWMsQ0FBQztvQkFDbEIsUUFBUSxFQUFFLFFBQVE7b0JBQ2xCLEtBQUssRUFBRSxTQUFTO29CQUNoQixNQUFNLEVBQUUsUUFBUTtpQkFDbkIsQ0FBQyxDQUFDO1lBQ1AsQ0FBQyxDQUFDLENBQUM7U0FDVjtJQUNMLENBQUM7K0dBMUJRLFlBQVk7bUdBQVosWUFBWTs7U0FBWixZQUFZOzRGQUFaLFlBQVk7a0JBUnhCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLElBQUksRUFBRTt3QkFDRixTQUFTLEVBQUUsd0JBQXdCO3dCQUNuQyxxQkFBcUIsRUFBRSxZQUFZO3FCQUN0QztpQkFDSjs4QkFNVSxVQUFVO3NCQURoQixLQUFLO2dCQUlDLFVBQVU7c0JBRGhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIHR5cGUgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRGlyZWN0aXZlLFxuICAgIElucHV0LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHt0dWlXaXRoU3R5bGVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHt0YWtlLCB0aW1lcn0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgdGVtcGxhdGU6ICcnLFxuICAgIHN0eWxlVXJsczogWycuL2l0ZW0tZ3JvdXAuc3R5bGVzLmxlc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktaXRlbS1ncm91cCcsXG4gICAgfSxcbn0pXG5jbGFzcyBUdWlJdGVtR3JvdXBTdHlsZXMge31cblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlJdGVtR3JvdXBdJyxcbiAgICBob3N0OiB7XG4gICAgICAgICcoY2xpY2spJzogJ29uQ2xpY2soJGV2ZW50LnRhcmdldCknLFxuICAgICAgICAnW2NsYXNzLl9ob3Jpem9udGFsXSc6ICdob3Jpem9udGFsJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlJdGVtR3JvdXAgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsID0gdHVpSW5qZWN0RWxlbWVudCgpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBub3RoaW5nID0gdHVpV2l0aFN0eWxlcyhUdWlJdGVtR3JvdXBTdHlsZXMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaG9yaXpvbnRhbCA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgYXV0b3Njcm9sbCA9IGZhbHNlO1xuXG4gICAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5lbC5jbGFzc0xpc3QuYWRkKCdfaW5pdGlhbGl6ZWQnKTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgb25DbGljayh0YXJnZXQ6IEhUTUxFbGVtZW50KTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLmF1dG9zY3JvbGwgJiYgdGhpcy5ob3Jpem9udGFsKSB7XG4gICAgICAgICAgICB0aW1lcigwKSAvLyBTYWZhcmkgYnVnXG4gICAgICAgICAgICAgICAgLnBpcGUodGFrZSgxKSlcbiAgICAgICAgICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgdGFyZ2V0LnNjcm9sbEludG9WaWV3KHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJlaGF2aW9yOiAnc21vb3RoJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIGJsb2NrOiAnbmVhcmVzdCcsXG4gICAgICAgICAgICAgICAgICAgICAgICBpbmxpbmU6ICdjZW50ZXInLFxuICAgICAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==