ng-devui
Version:
DevUI components based on Angular
802 lines (783 loc) • 35.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, Input, Component, ChangeDetectionStrategy, HostBinding, ContentChildren, ViewEncapsulation, NgModule } from '@angular/core';
import { ReplaySubject, Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
const DBreakpoints = ['ss', 'ms', 'mm', 'ml', 'xs', 'sm', 'md', 'lg', 'xl'];
const DBreakpointsMap = {
ss: 0,
ms: 360,
mm: 768,
ml: 1024,
xs: 1280,
sm: 1440,
md: 1600,
lg: 1760,
xl: 1920,
};
class DScreenMediaQueryService {
constructor() {
this.pointChangeSub = new ReplaySubject(1);
this.destroy$ = new Subject();
}
// 可以传入一个基准point，返回数据结构{ currentPoint, 变大or变小or没变，比基准point大or小or一样 }
getPoint() {
if (!this.currentPoint) {
this.currentPoint = this.getCurrentPoint();
this.pointChangeSub.next({
currentPoint: this.currentPoint,
change: 0,
compare: this.comparePoints(this.currentPoint),
});
fromEvent(window, 'resize')
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
const tempPoint = this.getCurrentPoint();
if (this.currentPoint !== tempPoint) {
const change = this.comparePoints(tempPoint, this.currentPoint);
this.currentPoint = tempPoint;
this.pointChangeSub.next({
currentPoint: this.currentPoint,
change: change,
compare: this.comparePoints(tempPoint),
});
}
});
}
return this.pointChangeSub;
}
// 无p2，则全量对比
comparePoints(p1, p2) {
let index1;
let index2;
for (let i = 0; i < DBreakpoints.length; i++) {
if (p1 === DBreakpoints[i]) {
index1 = i;
}
if (p2 === DBreakpoints[i]) {
index2 = i;
}
}
if (!p2) {
const res = {};
DBreakpoints.forEach((point, index) => {
res[point] = index1 - index;
});
return res;
}
return index1 - index2;
}
getCurrentPoint() {
const currentScreenWidth = window.innerWidth;
for (let i = 0; i < DBreakpoints.length; i++) {
if (DBreakpointsMap[DBreakpoints[i]] >= currentScreenWidth || i === DBreakpoints.length - 1) {
return DBreakpoints[i];
}
}
return;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DScreenMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DScreenMediaQueryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DScreenMediaQueryService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class DClassDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.executedClassList = [];
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateClass(currentPoint);
});
}
/* TODO: 参数需要优化，不仅可以设置断点，还可以设置通用 */
updateClass(currentPoint) {
let finalClassList = [];
if (!Array.isArray(this.dClass)) {
for (const point of DBreakpoints) {
if (this.dClass[point]) {
finalClassList = [...finalClassList, ...this.dClass[point]];
}
if (currentPoint === point) {
break;
}
}
}
else if (this.dClass) {
finalClassList = [...this.dClass];
}
this.executedClassList.forEach((className) => {
this.renderer.removeClass(this.elementRef.nativeElement, className);
});
finalClassList.forEach((className) => {
this.renderer.addClass(this.elementRef.nativeElement, className);
});
this.executedClassList = finalClassList;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DClassDirective, selector: "[dClass]", inputs: { dClass: "dClass" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DClassDirective, decorators: [{
type: Directive,
args: [{
selector: `[dClass]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DScreenMediaQueryService }], propDecorators: { dClass: [{
type: Input
}] } });
function isResponseValue(value) {
let flag = false;
if (typeof value === 'object') {
DBreakpoints.forEach(point => {
if (value[point]) {
flag = true;
}
});
}
return flag;
}
function runResponse(value, func) {
if (value) {
if (isResponseValue(value)) {
DBreakpoints.forEach(point => {
if (value[point]) {
func(point, value[point]);
}
});
}
else {
func(null, value);
}
}
}
function getDSpanClass(point, value) {
const classType = value === 0 ? 'd' : 'col';
const classValue = value === 0 ? 'none' : value;
return point ? `dl-${classType}-${point}-${classValue}` : `dl-${classType}-${classValue}`;
}
/* 如果是ss 则表示全局生效 */
function transPoint(point) {
if (point === 'ss') {
return null;
}
return point;
}
function pointAndValueMapToClassName(paramName, classList, point, value) {
const finalPonit = transPoint(point);
const classPrefixMap = {
dOffset: 'dl-offset-',
dAlign: 'dl-align-items-',
dJustify: 'dl-justify-content-',
dAlignSelf: 'dl-align-self-',
dOrder: 'dl-order-',
// dFlexWrap: '',
dSpan: getDSpanClass,
dCols: 'dl-row-cols-',
};
if (typeof classPrefixMap[paramName] === 'string') {
classList.push(finalPonit ? `${classPrefixMap[paramName]}${finalPonit}-${value}` : `${classPrefixMap[paramName]}${value}`);
}
else if (typeof classPrefixMap[paramName] === 'function') {
classList.push(classPrefixMap[paramName](finalPonit, value));
}
}
/**
*
* 此函数用以绑定当前类中可能需要绑定的Class，并识别响应式Object
*
*/
function updateClassList(context, elementRef, renderer) {
const classParamsName = ['dSpan', 'dOffset', 'dAlign', 'dJustify', 'dAlignSelf', 'dOrder', 'dCols'];
const tempClassList = [];
classParamsName.forEach(paramName => {
if (context[paramName]) {
runResponse(context[paramName], pointAndValueMapToClassName.bind(this, paramName, tempClassList));
}
});
if (context.classList) {
context.classList.forEach(className => {
renderer.removeClass(elementRef.nativeElement, className);
});
}
context.classList = tempClassList;
context.classList.forEach(className => {
renderer.addClass(elementRef.nativeElement, className);
});
}
class DColComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
/* TODO: d-hide如何对外提供 */
this.dCol = true;
this.dSpan = 'auto';
}
ngOnInit() {
updateClassList(this, this.elementRef, this.renderer);
}
ngOnChanges() {
updateClassList(this, this.elementRef, this.renderer);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DColComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DColComponent, selector: "d-col", inputs: { dSpan: "dSpan", dOffset: "dOffset", dPush: "dPush", dPull: "dPull" }, host: { properties: { "class.d-col": "this.dCol" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true, styles: [":host.d-col{padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DColComponent, decorators: [{
type: Component,
args: [{ selector: 'd-col', changeDetection: ChangeDetectionStrategy.OnPush, template: `
<ng-content></ng-content>
`, styles: [":host.d-col{padding:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dCol: [{
type: HostBinding,
args: ['class.d-col']
}], dSpan: [{
type: Input
}], dOffset: [{
type: Input
}], dPush: [{
type: Input
}], dPull: [{
type: Input
}] } });
class AsideComponent {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AsideComponent, selector: "d-aside", host: { properties: { "class.d-aside": "this.default" } }, exportAs: ["dAside"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AsideComponent, decorators: [{
type: Component,
args: [{
selector: 'd-aside',
exportAs: 'dAside',
template: '<ng-content></ng-content>',
}]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.d-aside']
}] } });
class ContentComponent {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContentComponent, selector: "d-content", host: { properties: { "class.d-content": "this.default" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.d-content{flex:auto;min-height:0}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContentComponent, decorators: [{
type: Component,
args: [{ selector: 'd-content', template: '<ng-content></ng-content>', styles: [":host.d-content{flex:auto;min-height:0}\n"] }]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.d-content']
}] } });
class FooterComponent {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, selector: "d-footer", host: { properties: { "class.d-footer": "this.default" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.d-footer{text-align:center;line-height:1.5}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{ selector: 'd-footer', template: '<ng-content></ng-content>', styles: [":host.d-footer{text-align:center;line-height:1.5}\n"] }]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.d-footer']
}] } });
class HeaderComponent {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderComponent, selector: "d-header", host: { properties: { "class.d-header": "this.default" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.d-header{flex:0 0 auto;min-height:40px}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'd-header', template: '<ng-content></ng-content>', styles: [":host.d-header{flex:0 0 auto;min-height:40px}\n"] }]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.d-header']
}] } });
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: 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: 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
}] } });
class DGutterDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.executedGutter = [null, null];
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateGutter(currentPoint);
});
}
getCurrentGutter(currentPoint) {
let finalGutter = [null, null];
if (Array.isArray(this.dGutter) || typeof this.dGutter === 'number') {
finalGutter = this._transGutterToArray(this.dGutter);
}
else {
for (const point of DBreakpoints) {
if (this.dGutter[point] !== undefined) {
finalGutter = this._transGutterToArray(this.dGutter[point]);
}
if (currentPoint === point) {
break;
}
}
}
return finalGutter;
}
_transGutterToArray(gutter) {
let finalGutter = gutter;
if (typeof gutter === 'number') {
finalGutter = [gutter, null];
}
if (this.dGutterDirection === 'vertical') {
finalGutter = finalGutter.reverse();
}
return finalGutter;
}
updateGutter(currentPoint) {
const finalGutter = this.getCurrentGutter(currentPoint);
this.updateChildrenGutter(finalGutter);
this.updateParentGutter(finalGutter);
this.executedGutter = finalGutter;
}
updateChildrenGutter(gutter) {
const items = this.elementRef.nativeElement.children;
for (let i = 0; i < items.length; i++) {
if (gutter[0] !== null) {
this.renderer.setStyle(items[i], 'padding-left', gutter[0] / 2 + 'px');
this.renderer.setStyle(items[i], 'padding-right', gutter[0] / 2 + 'px');
}
else if (this.executedGutter[0] !== null) {
this.renderer.removeStyle(items[i], 'padding-left');
this.renderer.removeStyle(items[i], 'padding-right');
}
if (gutter[1] !== null) {
this.renderer.setStyle(items[i], 'padding-top', gutter[1] / 2 + 'px');
this.renderer.setStyle(items[i], 'padding-bottom', gutter[1] / 2 + 'px');
}
else if (this.executedGutter[1] !== null) {
this.renderer.removeStyle(items[i], 'padding-top');
this.renderer.removeStyle(items[i], 'padding-bottom');
}
}
}
updateParentGutter(gutter) {
if (this.dGutterNoOuter) {
const element = this.elementRef.nativeElement;
if (gutter[0] !== null) {
this.renderer.setStyle(element, 'margin-left', -gutter[0] / 2 + 'px');
this.renderer.setStyle(element, 'margin-right', -gutter[0] / 2 + 'px');
}
else if (this.executedGutter[0] !== null) {
this.renderer.removeStyle(element, 'margin-left');
this.renderer.removeStyle(element, 'margin-right');
}
if (gutter[1] !== null) {
this.renderer.setStyle(element, 'margin-top', -gutter[1] / 2 + 'px');
this.renderer.setStyle(element, 'margin-bottom', -gutter[1] / 2 + 'px');
}
else if (this.executedGutter[1] !== null) {
this.renderer.removeStyle(element, 'margin-top');
this.renderer.removeStyle(element, 'margin-bottom');
}
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DGutterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DGutterDirective, selector: "[dGutter]", inputs: { dGutter: "dGutter", dGutterDirection: "dGutterDirection", dGutterNoOuter: "dGutterNoOuter" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DGutterDirective, decorators: [{
type: Directive,
args: [{
selector: `[dGutter]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DScreenMediaQueryService }], propDecorators: { dGutter: [{
type: Input
}], dGutterDirection: [{
type: Input
}], dGutterNoOuter: [{
type: Input
}] } });
class LayoutComponent {
constructor() {
this.default = true;
}
get layoutSideBar() {
return this.listOfSideBarComponent && this.listOfSideBarComponent.length > 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LayoutComponent, selector: "d-layout", host: { properties: { "class.d-layout-aside": "this.layoutSideBar", "class.d-layout": "this.default" } }, queries: [{ propertyName: "listOfSideBarComponent", predicate: AsideComponent }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.d-layout{display:flex;flex:auto;flex-direction:column}:host.d-layout-aside{flex-direction:row}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'd-layout', template: '<ng-content></ng-content>', preserveWhitespaces: false, styles: [":host.d-layout{display:flex;flex:auto;flex-direction:column}:host.d-layout-aside{flex-direction:row}\n"] }]
}], propDecorators: { listOfSideBarComponent: [{
type: ContentChildren,
args: [AsideComponent]
}], layoutSideBar: [{
type: HostBinding,
args: ['class.d-layout-aside']
}], default: [{
type: HostBinding,
args: ['class.d-layout']
}] } });
class DRowComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.dlRow = true;
this.dlFlexRow = true;
this.dRow = true;
}
ngOnInit() {
updateClassList(this, this.elementRef, this.renderer);
}
ngOnChanges() {
updateClassList(this, this.elementRef, this.renderer);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DRowComponent, selector: "d-row", inputs: { dCols: "dCols" }, host: { properties: { "class.dl-row": "this.dlRow", "class.dl-flex-row": "this.dlFlexRow", "class.d-row": "this.dRow" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true, styles: ["d-row.d-row{margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DRowComponent, decorators: [{
type: Component,
args: [{ selector: 'd-row', changeDetection: ChangeDetectionStrategy.OnPush, template: `
<ng-content></ng-content>
`, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, styles: ["d-row.d-row{margin:0;padding:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dlRow: [{
type: HostBinding,
args: ['class.dl-row']
}], dlFlexRow: [{
type: HostBinding,
args: ['class.dl-flex-row']
}], dRow: [{
type: HostBinding,
args: ['class.d-row']
}], dCols: [{
type: Input
}] } });
class DSpaceDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.executedSpace = [null, null];
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateSpace(currentPoint);
});
}
getCurrentSpace(currentPoint) {
let finalSpace = [null, null];
if (Array.isArray(this.dSpace) || typeof this.dSpace === 'number') {
finalSpace = this._transSpaceToArray(this.dSpace);
}
else {
for (const point of DBreakpoints) {
if (this.dSpace[point] !== undefined) {
finalSpace = this._transSpaceToArray(this.dSpace[point]);
}
if (currentPoint === point) {
break;
}
}
}
return finalSpace;
}
_transSpaceToArray(space) {
let finalSpace = space;
if (typeof space === 'number') {
finalSpace = [space, null];
}
if (this.dSpaceDirection === 'horizontal') {
finalSpace = finalSpace.reverse();
}
return finalSpace;
}
updateSpace(currentPoint) {
const finalSpace = this.getCurrentSpace(currentPoint);
const items = this.elementRef.nativeElement.children;
for (let i = 0; i < items.length - 1; i++) {
if (finalSpace[0] !== null) {
this.renderer.setStyle(items[i], 'margin-bottom', finalSpace[0] + 'px');
}
else if (this.executedSpace[0] !== null) {
this.renderer.removeStyle(items[i], 'margin-bottom');
}
if (finalSpace[1] !== null) {
this.renderer.setStyle(items[i], 'margin-right', finalSpace[1] + 'px');
}
else if (this.executedSpace[1] !== null) {
this.renderer.removeStyle(items[i], 'margin-right');
}
}
this.executedSpace = finalSpace;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DSpaceDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DSpaceDirective, selector: "[dSpace]", inputs: { dSpace: "dSpace", dSpaceDirection: "dSpaceDirection" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DSpaceDirective, decorators: [{
type: Directive,
args: [{
selector: `[dSpace]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DScreenMediaQueryService }], propDecorators: { dSpace: [{
type: Input
}], dSpaceDirection: [{
type: Input
}] } });
class DStyleDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.styleObject = {};
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateStyle(currentPoint);
});
}
updateStyle(currentPoint) {
let finalStyleObject = {};
let isResponse = false;
if (this.dStyle) {
for (const point of DBreakpoints) {
if (this.dStyle[point]) {
finalStyleObject = { ...finalStyleObject, ...this.dStyle[point] };
isResponse = true;
}
if (currentPoint === point) {
break;
}
}
if (!isResponse) {
finalStyleObject = { ...this.dStyle };
}
}
Object.keys(this.styleObject).forEach((key) => {
this.renderer.removeStyle(this.elementRef.nativeElement, key);
});
Object.keys(finalStyleObject).forEach((key) => {
this.renderer.setStyle(this.elementRef.nativeElement, key, finalStyleObject[key]);
});
this.styleObject = finalStyleObject;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DStyleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DStyleDirective, selector: "[dStyle]", inputs: { dStyle: "dStyle" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DStyleDirective, decorators: [{
type: Directive,
args: [{
selector: `[dStyle]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DScreenMediaQueryService }], propDecorators: { dStyle: [{
type: Input
}] } });
class LayoutModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LayoutModule, declarations: [LayoutComponent,
HeaderComponent,
ContentComponent,
FooterComponent,
AsideComponent,
DClassDirective,
DStyleDirective,
DFlexDirective,
DRowComponent,
DColComponent,
DSpaceDirective,
DGutterDirective], imports: [CommonModule], exports: [LayoutComponent,
HeaderComponent,
ContentComponent,
FooterComponent,
AsideComponent,
DClassDirective,
DStyleDirective,
DFlexDirective,
DRowComponent,
DColComponent,
DSpaceDirective,
DGutterDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutModule, decorators: [{
type: NgModule,
args: [{
declarations: [
LayoutComponent,
HeaderComponent,
ContentComponent,
FooterComponent,
AsideComponent,
DClassDirective,
DStyleDirective,
DFlexDirective,
DRowComponent,
DColComponent,
DSpaceDirective,
DGutterDirective,
],
exports: [
LayoutComponent,
HeaderComponent,
ContentComponent,
FooterComponent,
AsideComponent,
DClassDirective,
DStyleDirective,
DFlexDirective,
DRowComponent,
DColComponent,
DSpaceDirective,
DGutterDirective,
],
imports: [CommonModule],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AsideComponent, ContentComponent, DBreakpoints, DBreakpointsMap, DClassDirective, DColComponent, DFlexDirective, DGutterDirective, DRowComponent, DScreenMediaQueryService, DSpaceDirective, DStyleDirective, FooterComponent, HeaderComponent, LayoutComponent, LayoutModule };
//# sourceMappingURL=ng-devui-layout.mjs.map