UNPKG

@angular/flex-layout

Version:
622 lines (612 loc) 31.9 kB
import * as i0 from '@angular/core'; import { Injectable, PLATFORM_ID, Directive, Inject, Input, Optional, Self, SecurityContext, NgModule } from '@angular/core'; import * as i1 from '@angular/flex-layout/core'; import { StyleBuilder, BaseDirective2, SERVER_TOKEN, LAYOUT_CONFIG, CoreModule } from '@angular/flex-layout/core'; import * as i2 from '@angular/common'; import { isPlatformServer, NgClass, NgStyle } from '@angular/common'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { takeUntil } from 'rxjs/operators'; import * as i2$1 from '@angular/platform-browser'; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ class ImgSrcStyleBuilder extends StyleBuilder { buildStyles(url) { return { 'content': url ? `url(${url})` : '' }; } } ImgSrcStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImgSrcStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); ImgSrcStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImgSrcStyleBuilder, providedIn: 'root' }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImgSrcStyleBuilder, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); class ImgSrcDirective extends BaseDirective2 { constructor(elementRef, styleBuilder, styler, marshal, platformId, serverModuleLoaded) { super(elementRef, styleBuilder, styler, marshal); this.platformId = platformId; this.serverModuleLoaded = serverModuleLoaded; this.DIRECTIVE_KEY = 'img-src'; this.defaultSrc = ''; this.styleCache = imgSrcCache; this.init(); this.setValue(this.nativeElement.getAttribute('src') || '', ''); if (isPlatformServer(this.platformId) && this.serverModuleLoaded) { this.nativeElement.setAttribute('src', ''); } } set src(val) { this.defaultSrc = val; this.setValue(this.defaultSrc, ''); } /** * 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()` */ updateWithValue(value) { const url = value || this.defaultSrc; if (isPlatformServer(this.platformId) && this.serverModuleLoaded) { this.addStyles(url); } else { this.nativeElement.setAttribute('src', url); } } } ImgSrcDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImgSrcDirective, deps: [{ token: i0.ElementRef }, { token: ImgSrcStyleBuilder }, { token: i1.StyleUtils }, { token: i1.MediaMarshaller }, { token: PLATFORM_ID }, { token: SERVER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); ImgSrcDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ImgSrcDirective, inputs: { src: "src" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ImgSrcDirective, decorators: [{ type: Directive }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ImgSrcStyleBuilder }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }, { type: undefined, decorators: [{ type: Inject, args: [SERVER_TOKEN] }] }]; }, propDecorators: { src: [{ type: Input, args: ['src'] }] } }); const imgSrcCache = new Map(); const inputs$3 = [ 'src.xs', 'src.sm', 'src.md', 'src.lg', 'src.xl', 'src.lt-sm', 'src.lt-md', 'src.lt-lg', 'src.lt-xl', 'src.gt-xs', 'src.gt-sm', 'src.gt-md', 'src.gt-lg' ]; const selector$3 = ` 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] `; /** * 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/ */ class DefaultImgSrcDirective extends ImgSrcDirective { constructor() { super(...arguments); this.inputs = inputs$3; } } DefaultImgSrcDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultImgSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); DefaultImgSrcDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DefaultImgSrcDirective, selector: "\n img[src.xs], img[src.sm], img[src.md], img[src.lg], img[src.xl],\n img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],\n img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]\n", inputs: { "src.xs": "src.xs", "src.sm": "src.sm", "src.md": "src.md", "src.lg": "src.lg", "src.xl": "src.xl", "src.lt-sm": "src.lt-sm", "src.lt-md": "src.lt-md", "src.lt-lg": "src.lt-lg", "src.lt-xl": "src.lt-xl", "src.gt-xs": "src.gt-xs", "src.gt-sm": "src.gt-sm", "src.gt-md": "src.gt-md", "src.gt-lg": "src.gt-lg" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultImgSrcDirective, decorators: [{ type: Directive, args: [{ selector: selector$3, inputs: inputs$3 }] }] }); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ class ClassDirective extends BaseDirective2 { constructor(elementRef, styler, marshal, iterableDiffers, keyValueDiffers, renderer2, ngClassInstance) { super(elementRef, null, styler, marshal); this.ngClassInstance = ngClassInstance; this.DIRECTIVE_KEY = 'ngClass'; if (!this.ngClassInstance) { // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on // the same host element; since the responsive variations may be defined... this.ngClassInstance = new NgClass(iterableDiffers, keyValueDiffers, elementRef, renderer2); } this.init(); this.setValue('', ''); } /** * Capture class assignments so we cache the default classes * which are merged with activated styles and used as fallbacks. */ set klass(val) { this.ngClassInstance.klass = val; this.setValue(val, ''); } updateWithValue(value) { this.ngClassInstance.ngClass = value; this.ngClassInstance.ngDoCheck(); } // ****************************************************************** // Lifecycle Hooks // ****************************************************************** /** * For ChangeDetectionStrategy.onPush and ngOnChanges() updates */ ngDoCheck() { this.ngClassInstance.ngDoCheck(); } } ClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClassDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: i1.MediaMarshaller }, { token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i2.NgClass, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); ClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ClassDirective, inputs: { klass: ["class", "klass"] }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClassDirective, decorators: [{ type: Directive }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i2.NgClass, decorators: [{ type: Optional }, { type: Self }] }]; }, propDecorators: { klass: [{ type: Input, args: ['class'] }] } }); const inputs$2 = [ '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' ]; const selector$2 = ` [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] `; /** * 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 */ class DefaultClassDirective extends ClassDirective { constructor() { super(...arguments); this.inputs = inputs$2; } } DefaultClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultClassDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); DefaultClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DefaultClassDirective, selector: "\n [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],\n [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],\n [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]\n", inputs: { ngClass: "ngClass", "ngClass.xs": "ngClass.xs", "ngClass.sm": "ngClass.sm", "ngClass.md": "ngClass.md", "ngClass.lg": "ngClass.lg", "ngClass.xl": "ngClass.xl", "ngClass.lt-sm": "ngClass.lt-sm", "ngClass.lt-md": "ngClass.lt-md", "ngClass.lt-lg": "ngClass.lt-lg", "ngClass.lt-xl": "ngClass.lt-xl", "ngClass.gt-xs": "ngClass.gt-xs", "ngClass.gt-sm": "ngClass.gt-sm", "ngClass.gt-md": "ngClass.gt-md", "ngClass.gt-lg": "ngClass.gt-lg" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultClassDirective, decorators: [{ type: Directive, args: [{ selector: selector$2, inputs: inputs$2 }] }] }); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ class ShowHideStyleBuilder extends StyleBuilder { buildStyles(show, parent) { const shouldShow = show === 'true'; return { 'display': shouldShow ? parent.display || (parent.isServer ? 'initial' : '') : 'none' }; } } ShowHideStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ShowHideStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); ShowHideStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ShowHideStyleBuilder, providedIn: 'root' }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ShowHideStyleBuilder, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); class ShowHideDirective extends BaseDirective2 { constructor(elementRef, styleBuilder, styler, marshal, layoutConfig, platformId, serverModuleLoaded) { super(elementRef, styleBuilder, styler, marshal); this.layoutConfig = layoutConfig; this.platformId = platformId; this.serverModuleLoaded = serverModuleLoaded; this.DIRECTIVE_KEY = 'show-hide'; /** Original DOM Element CSS display style */ this.display = ''; this.hasLayout = false; this.hasFlexChild = false; } // ********************************************* // Lifecycle Methods // ********************************************* ngAfterViewInit() { this.trackExtraTriggers(); const children = Array.from(this.nativeElement.children); for (let i = 0; i < children.length; i++) { if (this.marshal.hasValue(children[i], 'flex')) { this.hasFlexChild = true; break; } } if (DISPLAY_MAP.has(this.nativeElement)) { this.display = DISPLAY_MAP.get(this.nativeElement); } else { this.display = this.getDisplayStyle(); DISPLAY_MAP.set(this.nativeElement, this.display); } this.init(); // set the default to show unless explicitly overridden const defaultValue = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY, ''); if (defaultValue === undefined || defaultValue === '') { this.setValue(true, ''); } else { this.triggerUpdate(); } } /** * 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) { Object.keys(changes).forEach(key => { if (this.inputs.indexOf(key) !== -1) { const inputKey = key.split('.'); const bp = inputKey.slice(1).join('.'); const inputValue = changes[key].currentValue; let shouldShow = inputValue !== '' ? inputValue !== 0 ? coerceBooleanProperty(inputValue) : false : true; if (inputKey[0] === 'fxHide') { shouldShow = !shouldShow; } this.setValue(shouldShow, bp); } }); } // ********************************************* // Protected methods // ********************************************* /** * Watch for these extra triggers to update fxShow, fxHide stylings */ trackExtraTriggers() { this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout'); ['layout', 'layout-align'].forEach(key => { this.marshal .trackValue(this.nativeElement, key) .pipe(takeUntil(this.destroySubject)) .subscribe(this.triggerUpdate.bind(this)); }); } /** * 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. */ getDisplayStyle() { return (this.hasLayout || (this.hasFlexChild && this.layoutConfig.addFlexToParent)) ? 'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true); } /** Validate the visibility value and then update the host's inline display style */ updateWithValue(value = true) { if (value === '') { return; } const isServer = isPlatformServer(this.platformId); this.addStyles(value ? 'true' : 'false', { display: this.display, isServer }); if (isServer && this.serverModuleLoaded) { this.nativeElement.style.setProperty('display', ''); } this.marshal.triggerUpdate(this.parentElement, 'layout-gap'); } } ShowHideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ShowHideDirective, deps: [{ token: i0.ElementRef }, { token: ShowHideStyleBuilder }, { token: i1.StyleUtils }, { token: i1.MediaMarshaller }, { token: LAYOUT_CONFIG }, { token: PLATFORM_ID }, { token: SERVER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); ShowHideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: ShowHideDirective, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ShowHideDirective, decorators: [{ type: Directive }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ShowHideStyleBuilder }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: undefined, decorators: [{ type: Inject, args: [LAYOUT_CONFIG] }] }, { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }, { type: undefined, decorators: [{ type: Inject, args: [SERVER_TOKEN] }] }]; } }); const DISPLAY_MAP = new WeakMap(); const inputs$1 = [ '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' ]; const selector$1 = ` [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] `; /** * 'show' Layout API directive */ class DefaultShowHideDirective extends ShowHideDirective { constructor() { super(...arguments); this.inputs = inputs$1; } } DefaultShowHideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultShowHideDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); DefaultShowHideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DefaultShowHideDirective, selector: "\n [fxShow], [fxShow.print],\n [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],\n [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],\n [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],\n [fxHide], [fxHide.print],\n [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],\n [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],\n [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]\n", inputs: { fxShow: "fxShow", "fxShow.print": "fxShow.print", "fxShow.xs": "fxShow.xs", "fxShow.sm": "fxShow.sm", "fxShow.md": "fxShow.md", "fxShow.lg": "fxShow.lg", "fxShow.xl": "fxShow.xl", "fxShow.lt-sm": "fxShow.lt-sm", "fxShow.lt-md": "fxShow.lt-md", "fxShow.lt-lg": "fxShow.lt-lg", "fxShow.lt-xl": "fxShow.lt-xl", "fxShow.gt-xs": "fxShow.gt-xs", "fxShow.gt-sm": "fxShow.gt-sm", "fxShow.gt-md": "fxShow.gt-md", "fxShow.gt-lg": "fxShow.gt-lg", fxHide: "fxHide", "fxHide.print": "fxHide.print", "fxHide.xs": "fxHide.xs", "fxHide.sm": "fxHide.sm", "fxHide.md": "fxHide.md", "fxHide.lg": "fxHide.lg", "fxHide.xl": "fxHide.xl", "fxHide.lt-sm": "fxHide.lt-sm", "fxHide.lt-md": "fxHide.lt-md", "fxHide.lt-lg": "fxHide.lt-lg", "fxHide.lt-xl": "fxHide.lt-xl", "fxHide.gt-xs": "fxHide.gt-xs", "fxHide.gt-sm": "fxHide.gt-sm", "fxHide.gt-md": "fxHide.gt-md", "fxHide.gt-lg": "fxHide.gt-lg" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultShowHideDirective, decorators: [{ type: Directive, args: [{ selector: selector$1, inputs: inputs$1 }] }] }); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** NgStyle allowed inputs */ class NgStyleKeyValue { constructor(key, value, noQuotes = true) { this.key = key; this.value = value; this.key = noQuotes ? key.replace(/['"]/g, '').trim() : key.trim(); this.value = noQuotes ? value.replace(/['"]/g, '').trim() : value.trim(); this.value = this.value.replace(/;/, ''); } } function getType(target) { let what = typeof target; if (what === 'object') { return (target.constructor === Array) ? 'array' : (target.constructor === Set) ? 'set' : 'object'; } return what; } /** * Split string of key:value pairs into Array of k-v pairs * e.g. 'key:value; key:value; key:value;' -> ['key:value',...] */ function buildRawList(source, delimiter = ';') { return String(source) .trim() .split(delimiter) .map((val) => val.trim()) .filter(val => val !== ''); } /** Convert array of key:value strings to a iterable map object */ function buildMapFromList$1(styles, sanitize) { const sanitizeValue = (it) => { if (sanitize) { it.value = sanitize(it.value); } return it; }; return styles .map(stringToKeyValue) .filter(entry => !!entry) .map(sanitizeValue) .reduce(keyValuesToMap, {}); } /** Convert Set<string> or raw Object to an iterable NgStyleMap */ function buildMapFromSet(source, sanitize) { let list = []; if (getType(source) === 'set') { source.forEach(entry => list.push(entry)); } else { Object.keys(source).forEach((key) => { list.push(`${key}:${source[key]}`); }); } return buildMapFromList$1(list, sanitize); } /** Convert 'key:value' -> [key, value] */ function stringToKeyValue(it) { const [key, ...vals] = it.split(':'); return new NgStyleKeyValue(key, vals.join(':')); } /** Convert [ [key,value] ] -> { key : value } */ function keyValuesToMap(map, entry) { if (!!entry.key) { map[entry.key] = entry.value; } return map; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ class StyleDirective extends BaseDirective2 { constructor(elementRef, styler, marshal, sanitizer, differs, renderer2, ngStyleInstance, serverLoaded, platformId) { var _a; super(elementRef, null, styler, marshal); this.sanitizer = sanitizer; this.ngStyleInstance = ngStyleInstance; this.DIRECTIVE_KEY = 'ngStyle'; if (!this.ngStyleInstance) { // Create an instance NgStyle Directive instance only if `ngStyle=""` has NOT been // defined on the same host element; since the responsive variations may be defined... this.ngStyleInstance = new NgStyle(elementRef, differs, renderer2); } this.init(); const styles = (_a = this.nativeElement.getAttribute('style')) !== null && _a !== void 0 ? _a : ''; this.fallbackStyles = this.buildStyleMap(styles); this.isServer = serverLoaded && isPlatformServer(platformId); } /** Add generated styles */ updateWithValue(value) { const styles = this.buildStyleMap(value); this.ngStyleInstance.ngStyle = Object.assign(Object.assign({}, this.fallbackStyles), styles); if (this.isServer) { this.applyStyleToElement(styles); } this.ngStyleInstance.ngDoCheck(); } /** Remove generated styles */ clearStyles() { this.ngStyleInstance.ngStyle = this.fallbackStyles; this.ngStyleInstance.ngDoCheck(); } /** * 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 */ buildStyleMap(styles) { // Always safe-guard (aka sanitize) style property values const sanitizer = (val) => { var _a; return (_a = this.sanitizer.sanitize(SecurityContext.STYLE, val)) !== null && _a !== void 0 ? _a : ''; }; if (styles) { switch (getType(styles)) { case 'string': return buildMapFromList(buildRawList(styles), sanitizer); case 'array': return buildMapFromList(styles, sanitizer); case 'set': return buildMapFromSet(styles, sanitizer); default: return buildMapFromSet(styles, sanitizer); } } return {}; } // ****************************************************************** // Lifecycle Hooks // ****************************************************************** /** For ChangeDetectionStrategy.onPush and ngOnChanges() updates */ ngDoCheck() { this.ngStyleInstance.ngDoCheck(); } } StyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StyleDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: i1.MediaMarshaller }, { token: i2$1.DomSanitizer }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i2.NgStyle, optional: true, self: true }, { token: SERVER_TOKEN }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); StyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: StyleDirective, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StyleDirective, decorators: [{ type: Directive }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: i2$1.DomSanitizer }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i2.NgStyle, decorators: [{ type: Optional }, { type: Self }] }, { type: undefined, decorators: [{ type: Inject, args: [SERVER_TOKEN] }] }, { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }]; } }); const inputs = [ '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' ]; const selector = ` [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] `; /** * Directive to add responsive support for ngStyle. * */ class DefaultStyleDirective extends StyleDirective { constructor() { super(...arguments); this.inputs = inputs; } } DefaultStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultStyleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); DefaultStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DefaultStyleDirective, selector: "\n [ngStyle],\n [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],\n [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],\n [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]\n", inputs: { ngStyle: "ngStyle", "ngStyle.xs": "ngStyle.xs", "ngStyle.sm": "ngStyle.sm", "ngStyle.md": "ngStyle.md", "ngStyle.lg": "ngStyle.lg", "ngStyle.xl": "ngStyle.xl", "ngStyle.lt-sm": "ngStyle.lt-sm", "ngStyle.lt-md": "ngStyle.lt-md", "ngStyle.lt-lg": "ngStyle.lt-lg", "ngStyle.lt-xl": "ngStyle.lt-xl", "ngStyle.gt-xs": "ngStyle.gt-xs", "ngStyle.gt-sm": "ngStyle.gt-sm", "ngStyle.gt-md": "ngStyle.gt-md", "ngStyle.gt-lg": "ngStyle.gt-lg" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DefaultStyleDirective, decorators: [{ type: Directive, args: [{ selector, inputs }] }] }); /** Build a styles map from a list of styles, while sanitizing bad values first */ function buildMapFromList(styles, sanitize) { const sanitizeValue = (it) => { if (sanitize) { it.value = sanitize(it.value); } return it; }; return styles .map(stringToKeyValue) .filter(entry => !!entry) .map(sanitizeValue) .reduce(keyValuesToMap, {}); } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ const ALL_DIRECTIVES = [ DefaultShowHideDirective, DefaultClassDirective, DefaultStyleDirective, DefaultImgSrcDirective, ]; /** * ***************************************************************** * Define module for the Extended API * ***************************************************************** */ class ExtendedModule { } ExtendedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExtendedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ExtendedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ExtendedModule, declarations: [DefaultShowHideDirective, DefaultClassDirective, DefaultStyleDirective, DefaultImgSrcDirective], imports: [CoreModule], exports: [DefaultShowHideDirective, DefaultClassDirective, DefaultStyleDirective, DefaultImgSrcDirective] }); ExtendedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExtendedModule, imports: [CoreModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ExtendedModule, decorators: [{ type: NgModule, args: [{ imports: [CoreModule], declarations: [...ALL_DIRECTIVES], exports: [...ALL_DIRECTIVES] }] }] }); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Generated bundle index. Do not edit. */ export { ClassDirective, DefaultClassDirective, DefaultImgSrcDirective, DefaultShowHideDirective, DefaultStyleDirective, ExtendedModule, ImgSrcDirective, ImgSrcStyleBuilder, ShowHideDirective, ShowHideStyleBuilder, StyleDirective }; //# sourceMappingURL=angular-flex-layout-extended.mjs.map