UNPKG

@ngbracket/ngx-layout

Version:
195 lines (187 loc) 20.6 kB
import { NgClass, NgStyle } from '@angular/common'; import * as i0 from '@angular/core'; import { DoCheck, ElementRef, Renderer2, AfterViewInit, OnChanges, SimpleChanges, KeyValueDiffers } from '@angular/core'; import * as i1 from '@ngbracket/ngx-layout/core'; import { BaseDirective2, StyleUtils, MediaMarshaller, StyleBuilder, StyleDefinition, LayoutConfigOptions } from '@ngbracket/ngx-layout/core'; import { DomSanitizer } from '@angular/platform-browser'; declare class ClassDirective extends BaseDirective2 implements DoCheck { protected readonly ngClassInstance: NgClass; protected DIRECTIVE_KEY: string; protected inputs: string[]; /** * Capture class assignments so we cache the default classes * which are merged with activated styles and used as fallbacks. */ set klass(val: string); constructor(elementRef: ElementRef, styler: StyleUtils, marshal: MediaMarshaller, renderer2: Renderer2, ngClassInstance: NgClass); protected updateWithValue(value: any): void; /** * For ChangeDetectionStrategy.onPush and ngOnChanges() updates */ ngDoCheck(): void; static ɵfac: i0.ɵɵFactoryDeclaration<ClassDirective, [null, null, null, null, { optional: true; self: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<ClassDirective, " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", never, { "ngClass": { "alias": "ngClass"; "required": false; }; "ngClass.xs": { "alias": "ngClass.xs"; "required": false; }; "ngClass.sm": { "alias": "ngClass.sm"; "required": false; }; "ngClass.md": { "alias": "ngClass.md"; "required": false; }; "ngClass.lg": { "alias": "ngClass.lg"; "required": false; }; "ngClass.xl": { "alias": "ngClass.xl"; "required": false; }; "ngClass.lt-sm": { "alias": "ngClass.lt-sm"; "required": false; }; "ngClass.lt-md": { "alias": "ngClass.lt-md"; "required": false; }; "ngClass.lt-lg": { "alias": "ngClass.lt-lg"; "required": false; }; "ngClass.lt-xl": { "alias": "ngClass.lt-xl"; "required": false; }; "ngClass.gt-xs": { "alias": "ngClass.gt-xs"; "required": false; }; "ngClass.gt-sm": { "alias": "ngClass.gt-sm"; "required": false; }; "ngClass.gt-md": { "alias": "ngClass.gt-md"; "required": false; }; "ngClass.gt-lg": { "alias": "ngClass.gt-lg"; "required": false; }; "klass": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>; } /** * Directive to add responsive support for ngClass. * This maintains the core functionality of 'ngClass' and adds responsive API * Note: this class is a no-op when rendered on the server * * @deprecated The DefaultClassDirective will be removed in version 21. * Use ClassDirective directly instead. */ declare class DefaultClassDirective extends ClassDirective { protected inputs: string[]; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultClassDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<DefaultClassDirective, " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", never, { "ngClass": { "alias": "ngClass"; "required": false; }; "ngClass.xs": { "alias": "ngClass.xs"; "required": false; }; "ngClass.sm": { "alias": "ngClass.sm"; "required": false; }; "ngClass.md": { "alias": "ngClass.md"; "required": false; }; "ngClass.lg": { "alias": "ngClass.lg"; "required": false; }; "ngClass.xl": { "alias": "ngClass.xl"; "required": false; }; "ngClass.lt-sm": { "alias": "ngClass.lt-sm"; "required": false; }; "ngClass.lt-md": { "alias": "ngClass.lt-md"; "required": false; }; "ngClass.lt-lg": { "alias": "ngClass.lt-lg"; "required": false; }; "ngClass.lt-xl": { "alias": "ngClass.lt-xl"; "required": false; }; "ngClass.gt-xs": { "alias": "ngClass.gt-xs"; "required": false; }; "ngClass.gt-sm": { "alias": "ngClass.gt-sm"; "required": false; }; "ngClass.gt-md": { "alias": "ngClass.gt-md"; "required": false; }; "ngClass.gt-lg": { "alias": "ngClass.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } declare class ImgSrcStyleBuilder extends StyleBuilder { buildStyles(url: string): { content: string; }; static ɵfac: i0.ɵɵFactoryDeclaration<ImgSrcStyleBuilder, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ImgSrcStyleBuilder>; } declare class ImgSrcDirective extends BaseDirective2 { protected platformId: Object; protected serverModuleLoaded: boolean; protected DIRECTIVE_KEY: string; protected inputs: string[]; protected defaultSrc: string; set src(val: string); constructor(elementRef: ElementRef, styleBuilder: ImgSrcStyleBuilder, styler: StyleUtils, marshal: MediaMarshaller, platformId: Object, serverModuleLoaded: boolean); /** * Use the [responsively] activated input value to update * the host img src attribute or assign a default `img.src=''` * if the src has not been defined. * * Do nothing to standard `<img src="">` usages, only when responsive * keys are present do we actually call `setAttribute()` */ protected updateWithValue(value?: string): void; protected styleCache: Map<string, StyleDefinition>; static ɵfac: i0.ɵɵFactoryDeclaration<ImgSrcDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ImgSrcDirective, " img[src.xs], img[src.sm], img[src.md], img[src.lg], img[src.xl], img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl], img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", never, { "src.xs": { "alias": "src.xs"; "required": false; }; "src.sm": { "alias": "src.sm"; "required": false; }; "src.md": { "alias": "src.md"; "required": false; }; "src.lg": { "alias": "src.lg"; "required": false; }; "src.xl": { "alias": "src.xl"; "required": false; }; "src.lt-sm": { "alias": "src.lt-sm"; "required": false; }; "src.lt-md": { "alias": "src.lt-md"; "required": false; }; "src.lt-lg": { "alias": "src.lt-lg"; "required": false; }; "src.lt-xl": { "alias": "src.lt-xl"; "required": false; }; "src.gt-xs": { "alias": "src.gt-xs"; "required": false; }; "src.gt-sm": { "alias": "src.gt-sm"; "required": false; }; "src.gt-md": { "alias": "src.gt-md"; "required": false; }; "src.gt-lg": { "alias": "src.gt-lg"; "required": false; }; "src": { "alias": "src"; "required": false; }; }, {}, never, never, true, never>; } /** * * @deprecated The DefaultImgSrcDirective will be removed in version 21. * Use ImgSrcDirective directly instead. * * This directive provides a responsive API for the HTML <img> 'src' attribute * and will update the img.src property upon each responsive activation. * * e.g. * <img src="defaultScene.jpg" src.xs="mobileScene.jpg"></img> * * @see https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-src/ */ declare class DefaultImgSrcDirective extends ImgSrcDirective { protected inputs: string[]; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultImgSrcDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<DefaultImgSrcDirective, " img[src.xs], img[src.sm], img[src.md], img[src.lg], img[src.xl], img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl], img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]", never, { "src.xs": { "alias": "src.xs"; "required": false; }; "src.sm": { "alias": "src.sm"; "required": false; }; "src.md": { "alias": "src.md"; "required": false; }; "src.lg": { "alias": "src.lg"; "required": false; }; "src.xl": { "alias": "src.xl"; "required": false; }; "src.lt-sm": { "alias": "src.lt-sm"; "required": false; }; "src.lt-md": { "alias": "src.lt-md"; "required": false; }; "src.lt-lg": { "alias": "src.lt-lg"; "required": false; }; "src.lt-xl": { "alias": "src.lt-xl"; "required": false; }; "src.gt-xs": { "alias": "src.gt-xs"; "required": false; }; "src.gt-sm": { "alias": "src.gt-sm"; "required": false; }; "src.gt-md": { "alias": "src.gt-md"; "required": false; }; "src.gt-lg": { "alias": "src.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } interface ShowHideParent { display: string; isServer: boolean; } declare class ShowHideStyleBuilder extends StyleBuilder { buildStyles(show: string, parent: ShowHideParent): { display: string; }; static ɵfac: i0.ɵɵFactoryDeclaration<ShowHideStyleBuilder, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ShowHideStyleBuilder>; } declare class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges { protected layoutConfig: LayoutConfigOptions; protected platformId: object; protected serverModuleLoaded: boolean; protected DIRECTIVE_KEY: string; protected inputs: string[]; /** Original DOM Element CSS display style */ protected display: string; protected hasLayout: boolean; protected hasFlexChild: boolean; constructor(elementRef: ElementRef, styleBuilder: ShowHideStyleBuilder, styler: StyleUtils, marshal: MediaMarshaller, layoutConfig: LayoutConfigOptions, platformId: object, serverModuleLoaded: boolean); ngAfterViewInit(): void; /** * On changes to any @Input properties... * Default to use the non-responsive Input value ('fxShow') * Then conditionally override with the mq-activated Input's current value */ ngOnChanges(changes: SimpleChanges): void; /** * Watch for these extra triggers to update fxShow, fxHide stylings */ protected trackExtraTriggers(): void; /** * Override accessor to the current HTMLElement's `display` style * Note: Show/Hide will not change the display to 'flex' but will set it to 'block' * unless it was already explicitly specified inline or in a CSS stylesheet. */ protected getDisplayStyle(): string; /** Validate the visibility value and then update the host's inline display style */ protected updateWithValue(value?: boolean | string): void; static ɵfac: i0.ɵɵFactoryDeclaration<ShowHideDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ShowHideDirective, " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", never, { "fxShow": { "alias": "fxShow"; "required": false; }; "fxShow.print": { "alias": "fxShow.print"; "required": false; }; "fxShow.xs": { "alias": "fxShow.xs"; "required": false; }; "fxShow.sm": { "alias": "fxShow.sm"; "required": false; }; "fxShow.md": { "alias": "fxShow.md"; "required": false; }; "fxShow.lg": { "alias": "fxShow.lg"; "required": false; }; "fxShow.xl": { "alias": "fxShow.xl"; "required": false; }; "fxShow.lt-sm": { "alias": "fxShow.lt-sm"; "required": false; }; "fxShow.lt-md": { "alias": "fxShow.lt-md"; "required": false; }; "fxShow.lt-lg": { "alias": "fxShow.lt-lg"; "required": false; }; "fxShow.lt-xl": { "alias": "fxShow.lt-xl"; "required": false; }; "fxShow.gt-xs": { "alias": "fxShow.gt-xs"; "required": false; }; "fxShow.gt-sm": { "alias": "fxShow.gt-sm"; "required": false; }; "fxShow.gt-md": { "alias": "fxShow.gt-md"; "required": false; }; "fxShow.gt-lg": { "alias": "fxShow.gt-lg"; "required": false; }; "fxHide": { "alias": "fxHide"; "required": false; }; "fxHide.print": { "alias": "fxHide.print"; "required": false; }; "fxHide.xs": { "alias": "fxHide.xs"; "required": false; }; "fxHide.sm": { "alias": "fxHide.sm"; "required": false; }; "fxHide.md": { "alias": "fxHide.md"; "required": false; }; "fxHide.lg": { "alias": "fxHide.lg"; "required": false; }; "fxHide.xl": { "alias": "fxHide.xl"; "required": false; }; "fxHide.lt-sm": { "alias": "fxHide.lt-sm"; "required": false; }; "fxHide.lt-md": { "alias": "fxHide.lt-md"; "required": false; }; "fxHide.lt-lg": { "alias": "fxHide.lt-lg"; "required": false; }; "fxHide.lt-xl": { "alias": "fxHide.lt-xl"; "required": false; }; "fxHide.gt-xs": { "alias": "fxHide.gt-xs"; "required": false; }; "fxHide.gt-sm": { "alias": "fxHide.gt-sm"; "required": false; }; "fxHide.gt-md": { "alias": "fxHide.gt-md"; "required": false; }; "fxHide.gt-lg": { "alias": "fxHide.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } /** * 'show' Layout API directive * @deprecated The DefaultShowHideDirective will be removed in version 21. * Use ShowHideDirective directly instead. */ declare class DefaultShowHideDirective extends ShowHideDirective { protected inputs: string[]; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultShowHideDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<DefaultShowHideDirective, " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", never, { "fxShow": { "alias": "fxShow"; "required": false; }; "fxShow.print": { "alias": "fxShow.print"; "required": false; }; "fxShow.xs": { "alias": "fxShow.xs"; "required": false; }; "fxShow.sm": { "alias": "fxShow.sm"; "required": false; }; "fxShow.md": { "alias": "fxShow.md"; "required": false; }; "fxShow.lg": { "alias": "fxShow.lg"; "required": false; }; "fxShow.xl": { "alias": "fxShow.xl"; "required": false; }; "fxShow.lt-sm": { "alias": "fxShow.lt-sm"; "required": false; }; "fxShow.lt-md": { "alias": "fxShow.lt-md"; "required": false; }; "fxShow.lt-lg": { "alias": "fxShow.lt-lg"; "required": false; }; "fxShow.lt-xl": { "alias": "fxShow.lt-xl"; "required": false; }; "fxShow.gt-xs": { "alias": "fxShow.gt-xs"; "required": false; }; "fxShow.gt-sm": { "alias": "fxShow.gt-sm"; "required": false; }; "fxShow.gt-md": { "alias": "fxShow.gt-md"; "required": false; }; "fxShow.gt-lg": { "alias": "fxShow.gt-lg"; "required": false; }; "fxHide": { "alias": "fxHide"; "required": false; }; "fxHide.print": { "alias": "fxHide.print"; "required": false; }; "fxHide.xs": { "alias": "fxHide.xs"; "required": false; }; "fxHide.sm": { "alias": "fxHide.sm"; "required": false; }; "fxHide.md": { "alias": "fxHide.md"; "required": false; }; "fxHide.lg": { "alias": "fxHide.lg"; "required": false; }; "fxHide.xl": { "alias": "fxHide.xl"; "required": false; }; "fxHide.lt-sm": { "alias": "fxHide.lt-sm"; "required": false; }; "fxHide.lt-md": { "alias": "fxHide.lt-md"; "required": false; }; "fxHide.lt-lg": { "alias": "fxHide.lt-lg"; "required": false; }; "fxHide.lt-xl": { "alias": "fxHide.lt-xl"; "required": false; }; "fxHide.gt-xs": { "alias": "fxHide.gt-xs"; "required": false; }; "fxHide.gt-sm": { "alias": "fxHide.gt-sm"; "required": false; }; "fxHide.gt-md": { "alias": "fxHide.gt-md"; "required": false; }; "fxHide.gt-lg": { "alias": "fxHide.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } type NgStyleRawList = string[]; type NgStyleMap = { [klass: string]: string; }; type NgStyleType = string | Set<string> | NgStyleRawList | NgStyleMap; declare class StyleDirective extends BaseDirective2 implements DoCheck { protected sanitizer: DomSanitizer; private readonly ngStyleInstance; protected DIRECTIVE_KEY: string; protected inputs: string[]; protected fallbackStyles: NgStyleMap; protected isServer: boolean; constructor(elementRef: ElementRef, styler: StyleUtils, marshal: MediaMarshaller, sanitizer: DomSanitizer, differs: KeyValueDiffers, renderer2: Renderer2, ngStyleInstance: NgStyle, serverLoaded: boolean, platformId: Object); /** Add generated styles */ protected updateWithValue(value: any): void; /** Remove generated styles */ protected clearStyles(): void; /** * Convert raw strings to ngStyleMap; which is required by ngStyle * NOTE: Raw string key-value pairs MUST be delimited by `;` * Comma-delimiters are not supported due to complexities of * possible style values such as `rgba(x,x,x,x)` and others */ protected buildStyleMap(styles: NgStyleType): NgStyleMap; /** For ChangeDetectionStrategy.onPush and ngOnChanges() updates */ ngDoCheck(): void; static ɵfac: i0.ɵɵFactoryDeclaration<StyleDirective, [null, null, null, null, null, null, { optional: true; self: true; }, null, null]>; static ɵdir: i0.ɵɵDirectiveDeclaration<StyleDirective, " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", never, { "ngStyle": { "alias": "ngStyle"; "required": false; }; "ngStyle.xs": { "alias": "ngStyle.xs"; "required": false; }; "ngStyle.sm": { "alias": "ngStyle.sm"; "required": false; }; "ngStyle.md": { "alias": "ngStyle.md"; "required": false; }; "ngStyle.lg": { "alias": "ngStyle.lg"; "required": false; }; "ngStyle.xl": { "alias": "ngStyle.xl"; "required": false; }; "ngStyle.lt-sm": { "alias": "ngStyle.lt-sm"; "required": false; }; "ngStyle.lt-md": { "alias": "ngStyle.lt-md"; "required": false; }; "ngStyle.lt-lg": { "alias": "ngStyle.lt-lg"; "required": false; }; "ngStyle.lt-xl": { "alias": "ngStyle.lt-xl"; "required": false; }; "ngStyle.gt-xs": { "alias": "ngStyle.gt-xs"; "required": false; }; "ngStyle.gt-sm": { "alias": "ngStyle.gt-sm"; "required": false; }; "ngStyle.gt-md": { "alias": "ngStyle.gt-md"; "required": false; }; "ngStyle.gt-lg": { "alias": "ngStyle.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } /** * Directive to add responsive support for ngStyle. * * @deprecated The DefaultStyleDirective will be removed in version 21. * Use StyleDirective directly instead. * */ declare class DefaultStyleDirective extends StyleDirective implements DoCheck { protected inputs: string[]; static ɵfac: i0.ɵɵFactoryDeclaration<DefaultStyleDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<DefaultStyleDirective, " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", never, { "ngStyle": { "alias": "ngStyle"; "required": false; }; "ngStyle.xs": { "alias": "ngStyle.xs"; "required": false; }; "ngStyle.sm": { "alias": "ngStyle.sm"; "required": false; }; "ngStyle.md": { "alias": "ngStyle.md"; "required": false; }; "ngStyle.lg": { "alias": "ngStyle.lg"; "required": false; }; "ngStyle.xl": { "alias": "ngStyle.xl"; "required": false; }; "ngStyle.lt-sm": { "alias": "ngStyle.lt-sm"; "required": false; }; "ngStyle.lt-md": { "alias": "ngStyle.lt-md"; "required": false; }; "ngStyle.lt-lg": { "alias": "ngStyle.lt-lg"; "required": false; }; "ngStyle.lt-xl": { "alias": "ngStyle.lt-xl"; "required": false; }; "ngStyle.gt-xs": { "alias": "ngStyle.gt-xs"; "required": false; }; "ngStyle.gt-sm": { "alias": "ngStyle.gt-sm"; "required": false; }; "ngStyle.gt-md": { "alias": "ngStyle.gt-md"; "required": false; }; "ngStyle.gt-lg": { "alias": "ngStyle.gt-lg"; "required": false; }; }, {}, never, never, true, never>; } /** * ***************************************************************** * Define module for the Extended API * ***************************************************************** */ declare class ExtendedModule { static ɵfac: i0.ɵɵFactoryDeclaration<ExtendedModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<ExtendedModule, never, [typeof i1.CoreModule, typeof DefaultShowHideDirective, typeof DefaultClassDirective, typeof DefaultStyleDirective, typeof DefaultImgSrcDirective], [typeof DefaultShowHideDirective, typeof DefaultClassDirective, typeof DefaultStyleDirective, typeof DefaultImgSrcDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<ExtendedModule>; } export { ClassDirective, DefaultClassDirective, DefaultImgSrcDirective, DefaultShowHideDirective, DefaultStyleDirective, ExtendedModule, ImgSrcDirective, ImgSrcStyleBuilder, ShowHideDirective, ShowHideStyleBuilder, StyleDirective }; export type { ShowHideParent };