@taiga-ui/layout
Version:
A package with Taiga UI layout components
58 lines • 8.99 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-bottom: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-bottom: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXRlbS1ncm91cC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9pdGVtLWdyb3VwL2l0ZW0tZ3JvdXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFDVCxLQUFLLEVBQ0wsaUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRSxPQUFPLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUFFakMsTUFVTSxrQkFBa0I7K0dBQWxCLGtCQUFrQjttR0FBbEIsa0JBQWtCLG9IQVJWLEVBQUU7OzRGQVFWLGtCQUFrQjtrQkFWdkIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLEtBQUssRUFBRSxnQkFBZ0I7cUJBQzFCOztBQUlMLE1BUWEsWUFBWTtJQVJ6QjtRQVNxQixPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUN0QixZQUFPLEdBQUcsYUFBYSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFHeEQsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUduQixlQUFVLEdBQUcsS0FBSyxDQUFDO0tBbUI3QjtJQWpCVSxlQUFlO1FBQ2xCLElBQUksQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRVMsT0FBTyxDQUFDLE1BQW1CO1FBQ2pDLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3BDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhO2lCQUNqQixJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO2lCQUNiLFNBQVMsQ0FBQyxHQUFHLEVBQUU7Z0JBQ1osTUFBTSxDQUFDLGNBQWMsQ0FBQztvQkFDbEIsUUFBUSxFQUFFLFFBQVE7b0JBQ2xCLEtBQUssRUFBRSxTQUFTO29CQUNoQixNQUFNLEVBQUUsUUFBUTtpQkFDbkIsQ0FBQyxDQUFDO1lBQ1AsQ0FBQyxDQUFDLENBQUM7U0FDVjtJQUNMLENBQUM7K0dBMUJRLFlBQVk7bUdBQVosWUFBWTs7U0FBWixZQUFZOzRGQUFaLFlBQVk7a0JBUnhCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLElBQUksRUFBRTt3QkFDRixTQUFTLEVBQUUsd0JBQXdCO3dCQUNuQyxxQkFBcUIsRUFBRSxZQUFZO3FCQUN0QztpQkFDSjs4QkFNVSxVQUFVO3NCQURoQixLQUFLO2dCQUlDLFVBQVU7c0JBRGhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7QWZ0ZXJWaWV3SW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBEaXJlY3RpdmUsXG4gICAgSW5wdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aVdpdGhTdHlsZXN9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge3Rha2UsIHRpbWVyfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVVcmxzOiBbJy4vaXRlbS1ncm91cC5zdHlsZXMubGVzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ3R1aS1pdGVtLWdyb3VwJyxcbiAgICB9LFxufSlcbmNsYXNzIFR1aUl0ZW1Hcm91cFN0eWxlcyB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aUl0ZW1Hcm91cF0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJyhjbGljayknOiAnb25DbGljaygkZXZlbnQudGFyZ2V0KScsXG4gICAgICAgICdbY2xhc3MuX2hvcml6b250YWxdJzogJ2hvcml6b250YWwnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUl0ZW1Hcm91cCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IG5vdGhpbmcgPSB0dWlXaXRoU3R5bGVzKFR1aUl0ZW1Hcm91cFN0eWxlcyk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBob3Jpem9udGFsID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhdXRvc2Nyb2xsID0gZmFsc2U7XG5cbiAgICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmVsLmNsYXNzTGlzdC5hZGQoJ19pbml0aWFsaXplZCcpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBvbkNsaWNrKHRhcmdldDogSFRNTEVsZW1lbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuYXV0b3Njcm9sbCAmJiB0aGlzLmhvcml6b250YWwpIHtcbiAgICAgICAgICAgIHRpbWVyKDApIC8vIFNhZmFyaSBidWdcbiAgICAgICAgICAgICAgICAucGlwZSh0YWtlKDEpKVxuICAgICAgICAgICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICB0YXJnZXQuc2Nyb2xsSW50b1ZpZXcoe1xuICAgICAgICAgICAgICAgICAgICAgICAgYmVoYXZpb3I6ICdzbW9vdGgnLFxuICAgICAgICAgICAgICAgICAgICAgICAgYmxvY2s6ICduZWFyZXN0JyxcbiAgICAgICAgICAgICAgICAgICAgICAgIGlubGluZTogJ2NlbnRlcicsXG4gICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19