ng-devui
Version:
DevUI components based on Angular
103 lines • 11.3 kB
JavaScript
import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { updateClassList } from './layout-utils';
import { DBreakpoints } from './layout.types';
import { DScreenMediaQueryService } from './screen-media-query.service';
import * as i0 from "@angular/core";
import * as i1 from "./screen-media-query.service";
export class DFlexDirective {
get flexRow() {
return this.dFlexContainer === 'row';
}
get flexColumn() {
return this.dFlexContainer === 'column';
}
get flex() {
return !!this.dFlexContainer;
}
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateFlex(currentPoint);
});
updateClassList(this, this.elementRef, this.renderer);
}
parseFlex(flex) {
if (typeof flex === 'number') {
return `${flex}`;
}
else if (typeof flex === 'string') {
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
return `0 0 ${flex}`;
}
}
return flex;
}
updateFlex(currentPoint) {
let finalFlex = '';
if (this.dFlex) {
if (typeof this.dFlex === 'object') {
for (const point of DBreakpoints) {
if (this.dFlex[point]) {
finalFlex = this.dFlex[point];
}
if (currentPoint === point) {
break;
}
}
}
else {
finalFlex = this.dFlex;
}
}
this.renderer.setStyle(this.elementRef.nativeElement, 'flex', this.parseFlex(finalFlex));
}
ngOnChanges() {
updateClassList(this, this.elementRef, this.renderer);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DFlexDirective, selector: "[dFlex], d-row, d-col", inputs: { dFlex: "dFlex", dFlexContainer: "dFlexContainer", dOrder: "dOrder", dAlign: "dAlign", dAlignSelf: "dAlignSelf", dJustify: "dJustify", dFlexWrap: "dFlexWrap" }, host: { properties: { "class.dl-flex-row": "this.flexRow", "class.dl-flex-column": "this.flexColumn", "class.dl-d-flex": "this.flex" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DFlexDirective, decorators: [{
type: Directive,
args: [{
selector: `[dFlex], d-row, d-col`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DScreenMediaQueryService }], propDecorators: { flexRow: [{
type: HostBinding,
args: ['class.dl-flex-row']
}], flexColumn: [{
type: HostBinding,
args: ['class.dl-flex-column']
}], flex: [{
type: HostBinding,
args: ['class.dl-d-flex']
}], dFlex: [{
type: Input
}], dFlexContainer: [{
type: Input
}], dOrder: [{
type: Input
}], dAlign: [{
type: Input
}], dAlignSelf: [{
type: Input
}], dJustify: [{
type: Input
}], dFlexWrap: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9sYXlvdXQvZmxleC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQXdCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxSCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFzQixZQUFZLEVBQWdDLE1BQU0sZ0JBQWdCLENBQUM7QUFDaEcsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sOEJBQThCLENBQUM7OztBQUt4RSxNQUFNLE9BQU8sY0FBYztJQUN6QixJQUFzQyxPQUFPO1FBQzNDLE9BQU8sSUFBSSxDQUFDLGNBQWMsS0FBSyxLQUFLLENBQUM7SUFDdkMsQ0FBQztJQUNELElBQXlDLFVBQVU7UUFDakQsT0FBTyxJQUFJLENBQUMsY0FBYyxLQUFLLFFBQVEsQ0FBQztJQUMxQyxDQUFDO0lBQ0QsSUFBb0MsSUFBSTtRQUN0QyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQy9CLENBQUM7SUFpQkQsWUFBb0IsVUFBc0IsRUFBVSxRQUFtQixFQUFVLGtCQUE0QztRQUF6RyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBMEI7UUFGckgsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7SUFFeUYsQ0FBQztJQUVqSSxlQUFlO1FBQ2IsSUFBSSxDQUFDLGtCQUFrQjthQUNwQixRQUFRLEVBQUU7YUFDVixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsQ0FBQyxFQUFFLFlBQVksRUFBRSxFQUFFLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNoQyxDQUFDLENBQUMsQ0FBQztRQUNMLGVBQWUsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELFNBQVMsQ0FBQyxJQUFTO1FBQ2pCLElBQUksT0FBTyxJQUFJLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDN0IsT0FBTyxHQUFHLElBQUksRUFBRSxDQUFDO1FBQ25CLENBQUM7YUFBTSxJQUFJLE9BQU8sSUFBSSxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQ3BDLElBQUksNEJBQTRCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7Z0JBQzVDLE9BQU8sT0FBTyxJQUFJLEVBQUUsQ0FBQztZQUN2QixDQUFDO1FBQ0gsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELFVBQVUsQ0FBQyxZQUFZO1FBQ3JCLElBQUksU0FBUyxHQUFvQixFQUFFLENBQUM7UUFDcEMsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDZixJQUFJLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxRQUFRLEVBQUUsQ0FBQztnQkFDbkMsS0FBSyxNQUFNLEtBQUssSUFBSSxZQUFZLEVBQUUsQ0FBQztvQkFDakMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUM7d0JBQ3RCLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO29CQUNoQyxDQUFDO29CQUNELElBQUksWUFBWSxLQUFLLEtBQUssRUFBRSxDQUFDO3dCQUMzQixNQUFNO29CQUNSLENBQUM7Z0JBQ0gsQ0FBQztZQUNILENBQUM7aUJBQU0sQ0FBQztnQkFDTixTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUN6QixDQUFDO1FBQ0gsQ0FBQztRQUNELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUM7SUFDM0YsQ0FBQztJQUVELFdBQVc7UUFDVCxlQUFlLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzNCLENBQUM7K0dBM0VVLGNBQWM7bUdBQWQsY0FBYzs7NEZBQWQsY0FBYztrQkFIMUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsdUJBQXVCO2lCQUNsQzs4SUFFdUMsT0FBTztzQkFBNUMsV0FBVzt1QkFBQyxtQkFBbUI7Z0JBR1MsVUFBVTtzQkFBbEQsV0FBVzt1QkFBQyxzQkFBc0I7Z0JBR0MsSUFBSTtzQkFBdkMsV0FBVzt1QkFBQyxpQkFBaUI7Z0JBSXJCLEtBQUs7c0JBQWIsS0FBSztnQkFHRyxjQUFjO3NCQUF0QixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgdXBkYXRlQ2xhc3NMaXN0IH0gZnJvbSAnLi9sYXlvdXQtdXRpbHMnO1xuaW1wb3J0IHsgREFsaWduLCBEQWxpZ25TZWxmLCBEQnJlYWtwb2ludHMsIERKdXN0aWZ5LCBEUmVzcG9uc2VQYXJhbWV0ZXIgfSBmcm9tICcuL2xheW91dC50eXBlcyc7XG5pbXBvcnQgeyBEU2NyZWVuTWVkaWFRdWVyeVNlcnZpY2UgfSBmcm9tICcuL3NjcmVlbi1tZWRpYS1xdWVyeS5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiBgW2RGbGV4XSwgZC1yb3csIGQtY29sYCxcbn0pXG5leHBvcnQgY2xhc3MgREZsZXhEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkNoYW5nZXMsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZGwtZmxleC1yb3cnKSBnZXQgZmxleFJvdygpIHtcbiAgICByZXR1cm4gdGhpcy5kRmxleENvbnRhaW5lciA9PT0gJ3Jvdyc7XG4gIH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kbC1mbGV4LWNvbHVtbicpIGdldCBmbGV4Q29sdW1uKCkge1xuICAgIHJldHVybiB0aGlzLmRGbGV4Q29udGFpbmVyID09PSAnY29sdW1uJztcbiAgfVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRsLWQtZmxleCcpIGdldCBmbGV4KCkge1xuICAgIHJldHVybiAhIXRoaXMuZEZsZXhDb250YWluZXI7XG4gIH1cblxuICBASW5wdXQoKSBkRmxleDogRFJlc3BvbnNlUGFyYW1ldGVyPG51bWJlciB8IHN0cmluZz47XG5cbiAgLyogVE9ETzog6L+Z5Liq5Lmf6ZyA6KaB5ZON5bqU5byPICovXG4gIEBJbnB1dCgpIGRGbGV4Q29udGFpbmVyOiAncm93JyB8ICdjb2x1bW4nO1xuXG4gIEBJbnB1dCgpIGRPcmRlcjogRFJlc3BvbnNlUGFyYW1ldGVyPG51bWJlcj47XG4gIEBJbnB1dCgpIGRBbGlnbjogRFJlc3BvbnNlUGFyYW1ldGVyPERBbGlnbj47XG4gIEBJbnB1dCgpIGRBbGlnblNlbGY6IERSZXNwb25zZVBhcmFtZXRlcjxEQWxpZ25TZWxmPjtcbiAgQElucHV0KCkgZEp1c3RpZnk6IERSZXNwb25zZVBhcmFtZXRlcjxESnVzdGlmeT47XG5cbiAgLyogVE9ET++8muWunueOsOi/meS4queJueaApyAqL1xuICBASW5wdXQoKSBkRmxleFdyYXA6IERSZXNwb25zZVBhcmFtZXRlcjxzdHJpbmc+O1xuXG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLCBwcml2YXRlIHNjcmVlblF1ZXJ5U2VydmljZTogRFNjcmVlbk1lZGlhUXVlcnlTZXJ2aWNlKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNjcmVlblF1ZXJ5U2VydmljZVxuICAgICAgLmdldFBvaW50KClcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgIC5zdWJzY3JpYmUoKHsgY3VycmVudFBvaW50IH0pID0+IHtcbiAgICAgICAgdGhpcy51cGRhdGVGbGV4KGN1cnJlbnRQb2ludCk7XG4gICAgICB9KTtcbiAgICB1cGRhdGVDbGFzc0xpc3QodGhpcywgdGhpcy5lbGVtZW50UmVmLCB0aGlzLnJlbmRlcmVyKTtcbiAgfVxuXG4gIHBhcnNlRmxleChmbGV4OiBhbnkpOiBzdHJpbmcge1xuICAgIGlmICh0eXBlb2YgZmxleCA9PT0gJ251bWJlcicpIHtcbiAgICAgIHJldHVybiBgJHtmbGV4fWA7XG4gICAgfSBlbHNlIGlmICh0eXBlb2YgZmxleCA9PT0gJ3N0cmluZycpIHtcbiAgICAgIGlmICgvXlxcZCsoXFwuXFxkKyk/KHB4fGVtfHJlbXwlKSQvLnRlc3QoZmxleCkpIHtcbiAgICAgICAgcmV0dXJuIGAwIDAgJHtmbGV4fWA7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBmbGV4O1xuICB9XG5cbiAgdXBkYXRlRmxleChjdXJyZW50UG9pbnQpIHtcbiAgICBsZXQgZmluYWxGbGV4OiBudW1iZXIgfCBzdHJpbmcgPSAnJztcbiAgICBpZiAodGhpcy5kRmxleCkge1xuICAgICAgaWYgKHR5cGVvZiB0aGlzLmRGbGV4ID09PSAnb2JqZWN0Jykge1xuICAgICAgICBmb3IgKGNvbnN0IHBvaW50IG9mIERCcmVha3BvaW50cykge1xuICAgICAgICAgIGlmICh0aGlzLmRGbGV4W3BvaW50XSkge1xuICAgICAgICAgICAgZmluYWxGbGV4ID0gdGhpcy5kRmxleFtwb2ludF07XG4gICAgICAgICAgfVxuICAgICAgICAgIGlmIChjdXJyZW50UG9pbnQgPT09IHBvaW50KSB7XG4gICAgICAgICAgICBicmVhaztcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGZpbmFsRmxleCA9IHRoaXMuZEZsZXg7XG4gICAgICB9XG4gICAgfVxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdmbGV4JywgdGhpcy5wYXJzZUZsZXgoZmluYWxGbGV4KSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICB1cGRhdGVDbGFzc0xpc3QodGhpcywgdGhpcy5lbGVtZW50UmVmLCB0aGlzLnJlbmRlcmVyKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxufVxuIl19