Igor Kulikov
2 years ago
8 changed files with 153 additions and 164 deletions
@ -1,85 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|
||||
///
|
|
||||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||
/// you may not use this file except in compliance with the License.
|
|
||||
/// You may obtain a copy of the License at
|
|
||||
///
|
|
||||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||
///
|
|
||||
/// Unless required by applicable law or agreed to in writing, software
|
|
||||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||
/// See the License for the specific language governing permissions and
|
|
||||
/// limitations under the License.
|
|
||||
///
|
|
||||
|
|
||||
import { Directive } from '@angular/core'; |
|
||||
import { BREAKPOINT, LayoutAlignDirective, LayoutDirective, LayoutGapDirective, ShowHideDirective } from '@angular/flex-layout'; |
|
||||
|
|
||||
const TB_BREAKPOINTS = [ |
|
||||
{ |
|
||||
alias: 'md-lg', |
|
||||
mediaQuery: 'screen and (min-width: 960px) and (max-width: 1819px)', |
|
||||
priority: 750 |
|
||||
}, |
|
||||
{ |
|
||||
alias: 'gt-md-lg', |
|
||||
mediaQuery: 'screen and (min-width: 1820px)', |
|
||||
priority: -600 |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
export const TbBreakPointsProvider = { |
|
||||
provide: BREAKPOINT, |
|
||||
useValue: TB_BREAKPOINTS, |
|
||||
multi: true |
|
||||
}; |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayout.md-lg]', inputs: ['fxLayout.md-lg']}) |
|
||||
export class MdLgLayoutDirective extends LayoutDirective { |
|
||||
protected inputs = ['fxLayout.md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayoutAlign.md-lg]', inputs: ['fxLayoutAlign.md-lg']}) |
|
||||
export class MdLgLayoutAlignDirective extends LayoutAlignDirective { |
|
||||
protected inputs = ['fxLayoutAlign.md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayoutGap.md-lg]', inputs: ['fxLayoutGap.md-lg']}) |
|
||||
export class MdLgLayoutGapDirective extends LayoutGapDirective { |
|
||||
protected inputs = ['fxLayoutGap.md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxHide.md-lg]', inputs: ['fxHide.md-lg']}) |
|
||||
export class MdLgShowHideDirective extends ShowHideDirective { |
|
||||
protected inputs = ['fxHide.md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayout.gt-md-lg]', inputs: ['fxLayout.gt-md-lg']}) |
|
||||
export class GtMdLgLayoutDirective extends LayoutDirective { |
|
||||
protected inputs = ['fxLayout.gt-md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayoutAlign.gt-md-lg]', inputs: ['fxLayoutAlign.gt-md-lg']}) |
|
||||
export class GtMdLgLayoutAlignDirective extends LayoutAlignDirective { |
|
||||
protected inputs = ['fxLayoutAlign.gt-md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxLayoutGap.gt-md-lg]', inputs: ['fxLayoutGap.gt-md-lg']}) |
|
||||
export class GtMdLgLayoutGapDirective extends LayoutGapDirective { |
|
||||
protected inputs = ['fxLayoutGap.gt-md-lg']; |
|
||||
} |
|
||||
|
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
|
|
||||
@Directive({selector: '[fxHide.gt-md-lg]', inputs: ['fxHide.gt-md-lg']}) |
|
||||
export class GtMdLgShowHideDirective extends ShowHideDirective { |
|
||||
protected inputs = ['fxHide.gt-md-lg']; |
|
||||
} |
|
||||
@ -0,0 +1,41 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Observable } from 'rxjs/internal/Observable'; |
||||
|
import { from, of } from 'rxjs'; |
||||
|
import { map, tap } from 'rxjs/operators'; |
||||
|
import { Type } from '@angular/core'; |
||||
|
|
||||
|
let flexLayoutModule: any; |
||||
|
|
||||
|
export function getFlexLayout(): Observable<any> { |
||||
|
if (flexLayoutModule) { |
||||
|
return of(flexLayoutModule); |
||||
|
} else { |
||||
|
return from(import('@angular/flex-layout')).pipe( |
||||
|
tap((module) => { |
||||
|
module.DEFAULT_CONFIG.addFlexToParent = false; |
||||
|
flexLayoutModule = module; |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function getFlexLayoutModule(): Observable<Type<any>> { |
||||
|
return getFlexLayout().pipe( |
||||
|
map(module => module.FlexLayoutModule) |
||||
|
); |
||||
|
} |
||||
Loading…
Reference in new issue