| /** |
| * @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 |
| */ |
| import { Directive, ElementRef, Inject, PLATFORM_ID, Injectable, Input, NgModule, Optional, Self, SecurityContext, ɵɵdefineInjectable } from '@angular/core'; |
| import { isPlatformServer, NgClass, ɵNgClassImpl, ɵNgClassR2Impl, NgStyle, ɵNgStyleImpl, ɵNgStyleR2Impl } from '@angular/common'; |
| import { MediaMarshaller, BaseDirective2, SERVER_TOKEN, StyleBuilder, StyleUtils, LAYOUT_CONFIG, CoreModule } from '@angular/flex-layout/core'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { takeUntil } from 'rxjs/operators'; |
| import { DomSanitizer } from '@angular/platform-browser'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class ImgSrcStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} url |
| * @return {?} |
| */ |
| buildStyles(url) { |
| return { 'content': url ? `url(${url})` : '' }; |
| } |
| } |
| ImgSrcStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ ImgSrcStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function ImgSrcStyleBuilder_Factory() { return new ImgSrcStyleBuilder(); }, token: ImgSrcStyleBuilder, providedIn: "root" }); |
| class ImgSrcDirective extends BaseDirective2 { |
| /** |
| * @param {?} elementRef |
| * @param {?} styleBuilder |
| * @param {?} styler |
| * @param {?} marshal |
| * @param {?} platformId |
| * @param {?} serverModuleLoaded |
| */ |
| constructor(elementRef, styleBuilder, styler, marshal, platformId, serverModuleLoaded) { |
| super(elementRef, styleBuilder, styler, marshal); |
| this.elementRef = elementRef; |
| this.styleBuilder = styleBuilder; |
| this.styler = styler; |
| this.marshal = 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', ''); |
| } |
| } |
| /** |
| * @param {?} val |
| * @return {?} |
| */ |
| 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()` |
| * @protected |
| * @param {?=} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| /** @type {?} */ |
| const url = value || this.defaultSrc; |
| if (isPlatformServer(this.platformId) && this.serverModuleLoaded) { |
| this.addStyles(url); |
| } |
| else { |
| this.nativeElement.setAttribute('src', url); |
| } |
| } |
| } |
| /** @nocollapse */ |
| ImgSrcDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: ImgSrcStyleBuilder }, |
| { type: StyleUtils }, |
| { type: MediaMarshaller }, |
| { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }, |
| { type: Boolean, decorators: [{ type: Inject, args: [SERVER_TOKEN,] }] } |
| ]; |
| ImgSrcDirective.propDecorators = { |
| src: [{ type: Input, args: ['src',] }] |
| }; |
| /** @type {?} */ |
| const imgSrcCache = new Map(); |
| /** @type {?} */ |
| const inputs = [ |
| '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' |
| ]; |
| /** @type {?} */ |
| const selector = ` |
| 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; |
| } |
| } |
| DefaultImgSrcDirective.decorators = [ |
| { type: Directive, args: [{ selector, inputs },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class ClassDirective extends BaseDirective2 { |
| /** |
| * @param {?} elementRef |
| * @param {?} styler |
| * @param {?} marshal |
| * @param {?} delegate |
| * @param {?} ngClassInstance |
| */ |
| constructor(elementRef, styler, marshal, delegate, ngClassInstance) { |
| super(elementRef, (/** @type {?} */ (null)), styler, marshal); |
| this.elementRef = elementRef; |
| this.styler = styler; |
| this.marshal = marshal; |
| this.delegate = delegate; |
| 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(this.delegate); |
| } |
| this.init(); |
| this.setValue('', ''); |
| } |
| /** |
| * Capture class assignments so we cache the default classes |
| * which are merged with activated styles and used as fallbacks. |
| * @param {?} val |
| * @return {?} |
| */ |
| set klass(val) { |
| this.ngClassInstance.klass = val; |
| this.setValue(val, ''); |
| } |
| /** |
| * @protected |
| * @param {?} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| this.ngClassInstance.ngClass = value; |
| this.ngClassInstance.ngDoCheck(); |
| } |
| // ****************************************************************** |
| // Lifecycle Hooks |
| // ****************************************************************** |
| /** |
| * For ChangeDetectionStrategy.onPush and ngOnChanges() updates |
| * @return {?} |
| */ |
| ngDoCheck() { |
| this.ngClassInstance.ngDoCheck(); |
| } |
| } |
| /** @nocollapse */ |
| ClassDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: MediaMarshaller }, |
| { type: ɵNgClassImpl }, |
| { type: NgClass, decorators: [{ type: Optional }, { type: Self }] } |
| ]; |
| ClassDirective.propDecorators = { |
| klass: [{ type: Input, args: ['class',] }] |
| }; |
| /** @type {?} */ |
| const inputs$1 = [ |
| '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' |
| ]; |
| /** @type {?} */ |
| const selector$1 = ` |
| [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] |
| `; |
| // tslint:disable-next-line:variable-name |
| /** @type {?} */ |
| const LayoutNgClassImplProvider = { |
| provide: ɵNgClassImpl, |
| useClass: ɵNgClassR2Impl |
| }; |
| /** |
| * 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$1; |
| } |
| } |
| DefaultClassDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$1, inputs: inputs$1, providers: [LayoutNgClassImplProvider] },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class ShowHideStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} show |
| * @param {?} parent |
| * @return {?} |
| */ |
| buildStyles(show, parent) { |
| /** @type {?} */ |
| const shouldShow = show === 'true'; |
| return { 'display': shouldShow ? parent.display : 'none' }; |
| } |
| } |
| ShowHideStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ ShowHideStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function ShowHideStyleBuilder_Factory() { return new ShowHideStyleBuilder(); }, token: ShowHideStyleBuilder, providedIn: "root" }); |
| class ShowHideDirective extends BaseDirective2 { |
| /** |
| * @param {?} elementRef |
| * @param {?} styleBuilder |
| * @param {?} styler |
| * @param {?} marshal |
| * @param {?} layoutConfig |
| * @param {?} platformId |
| * @param {?} serverModuleLoaded |
| */ |
| constructor(elementRef, styleBuilder, styler, marshal, layoutConfig, platformId, serverModuleLoaded) { |
| super(elementRef, styleBuilder, styler, marshal); |
| this.elementRef = elementRef; |
| this.styleBuilder = styleBuilder; |
| this.styler = styler; |
| this.marshal = marshal; |
| this.layoutConfig = layoutConfig; |
| this.platformId = platformId; |
| this.serverModuleLoaded = serverModuleLoaded; |
| this.DIRECTIVE_KEY = 'show-hide'; |
| /** |
| * Original dom Elements CSS display style |
| */ |
| this.display = ''; |
| this.hasLayout = false; |
| this.hasFlexChild = false; |
| } |
| // ********************************************* |
| // Lifecycle Methods |
| // ********************************************* |
| /** |
| * @return {?} |
| */ |
| ngAfterViewInit() { |
| this.trackExtraTriggers(); |
| /** @type {?} */ |
| const children = Array.from(this.nativeElement.children); |
| for (let i = 0; i < children.length; i++) { |
| if (this.marshal.hasValue((/** @type {?} */ (children[i])), 'flex')) { |
| this.hasFlexChild = true; |
| break; |
| } |
| } |
| if (DISPLAY_MAP.has(this.nativeElement)) { |
| this.display = (/** @type {?} */ (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 |
| /** @type {?} */ |
| 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 |
| * @param {?} changes |
| * @return {?} |
| */ |
| ngOnChanges(changes) { |
| Object.keys(changes).forEach((/** |
| * @param {?} key |
| * @return {?} |
| */ |
| key => { |
| if (this.inputs.indexOf(key) !== -1) { |
| /** @type {?} */ |
| const inputKey = key.split('.'); |
| /** @type {?} */ |
| const bp = inputKey.slice(1).join('.'); |
| /** @type {?} */ |
| const inputValue = changes[key].currentValue; |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @return {?} |
| */ |
| trackExtraTriggers() { |
| this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout'); |
| ['layout', 'layout-align'].forEach((/** |
| * @param {?} key |
| * @return {?} |
| */ |
| 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. |
| * @protected |
| * @return {?} |
| */ |
| 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 |
| * @protected |
| * @param {?=} value |
| * @return {?} |
| */ |
| updateWithValue(value = true) { |
| if (value === '') { |
| return; |
| } |
| this.addStyles(value ? 'true' : 'false', { display: this.display }); |
| if (isPlatformServer(this.platformId) && this.serverModuleLoaded) { |
| this.nativeElement.style.setProperty('display', ''); |
| } |
| this.marshal.triggerUpdate((/** @type {?} */ (this.parentElement)), 'layout-gap'); |
| } |
| } |
| /** @nocollapse */ |
| ShowHideDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: ShowHideStyleBuilder }, |
| { type: StyleUtils }, |
| { type: MediaMarshaller }, |
| { type: undefined, decorators: [{ type: Inject, args: [LAYOUT_CONFIG,] }] }, |
| { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }, |
| { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [SERVER_TOKEN,] }] } |
| ]; |
| /** @type {?} */ |
| const DISPLAY_MAP = new WeakMap(); |
| /** @type {?} */ |
| const inputs$2 = [ |
| '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' |
| ]; |
| /** @type {?} */ |
| const selector$2 = ` |
| [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$2; |
| } |
| } |
| DefaultShowHideDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$2, inputs: inputs$2 },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * NgStyle allowed inputs |
| */ |
| class NgStyleKeyValue { |
| /** |
| * @param {?} key |
| * @param {?} value |
| * @param {?=} noQuotes |
| */ |
| 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(/;/, ''); |
| } |
| } |
| /** |
| * @param {?} target |
| * @return {?} |
| */ |
| function getType(target) { |
| /** @type {?} */ |
| 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',...] |
| * @param {?} source |
| * @param {?=} delimiter |
| * @return {?} |
| */ |
| function buildRawList(source, delimiter = ';') { |
| return String(source) |
| .trim() |
| .split(delimiter) |
| .map((/** |
| * @param {?} val |
| * @return {?} |
| */ |
| (val) => val.trim())) |
| .filter((/** |
| * @param {?} val |
| * @return {?} |
| */ |
| val => val !== '')); |
| } |
| /** |
| * Convert array of key:value strings to a iterable map object |
| * @param {?} styles |
| * @param {?=} sanitize |
| * @return {?} |
| */ |
| function buildMapFromList(styles, sanitize) { |
| /** @type {?} */ |
| const sanitizeValue = (/** |
| * @param {?} it |
| * @return {?} |
| */ |
| (it) => { |
| if (sanitize) { |
| it.value = sanitize(it.value); |
| } |
| return it; |
| }); |
| return styles |
| .map(stringToKeyValue) |
| .filter((/** |
| * @param {?} entry |
| * @return {?} |
| */ |
| entry => !!entry)) |
| .map(sanitizeValue) |
| .reduce(keyValuesToMap, (/** @type {?} */ ({}))); |
| } |
| /** |
| * Convert Set<string> or raw Object to an iterable NgStyleMap |
| * @param {?} source |
| * @param {?=} sanitize |
| * @return {?} |
| */ |
| function buildMapFromSet(source, sanitize) { |
| /** @type {?} */ |
| let list = []; |
| if (getType(source) === 'set') { |
| ((/** @type {?} */ (source))).forEach((/** |
| * @param {?} entry |
| * @return {?} |
| */ |
| entry => list.push(entry))); |
| } |
| else { |
| Object.keys(source).forEach((/** |
| * @param {?} key |
| * @return {?} |
| */ |
| (key) => { |
| list.push(`${key}:${((/** @type {?} */ (source)))[key]}`); |
| })); |
| } |
| return buildMapFromList(list, sanitize); |
| } |
| /** |
| * Convert 'key:value' -> [key, value] |
| * @param {?} it |
| * @return {?} |
| */ |
| function stringToKeyValue(it) { |
| const [key, ...vals] = it.split(':'); |
| return new NgStyleKeyValue(key, vals.join(':')); |
| } |
| /** |
| * Convert [ [key,value] ] -> { key : value } |
| * @param {?} map |
| * @param {?} entry |
| * @return {?} |
| */ |
| function keyValuesToMap(map, entry) { |
| if (!!entry.key) { |
| map[entry.key] = entry.value; |
| } |
| return map; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class StyleDirective extends BaseDirective2 { |
| /** |
| * @param {?} elementRef |
| * @param {?} styler |
| * @param {?} marshal |
| * @param {?} delegate |
| * @param {?} sanitizer |
| * @param {?} ngStyleInstance |
| * @param {?} serverLoaded |
| * @param {?} platformId |
| */ |
| constructor(elementRef, styler, marshal, delegate, sanitizer, ngStyleInstance, serverLoaded, platformId) { |
| super(elementRef, (/** @type {?} */ (null)), styler, marshal); |
| this.elementRef = elementRef; |
| this.styler = styler; |
| this.marshal = marshal; |
| this.delegate = delegate; |
| this.sanitizer = sanitizer; |
| this.ngStyleInstance = ngStyleInstance; |
| this.DIRECTIVE_KEY = 'ngStyle'; |
| if (!this.ngStyleInstance) { |
| // 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.ngStyleInstance = new NgStyle(this.delegate); |
| } |
| this.init(); |
| /** @type {?} */ |
| const styles = this.nativeElement.getAttribute('style') || ''; |
| this.fallbackStyles = this.buildStyleMap(styles); |
| this.isServer = serverLoaded && isPlatformServer(platformId); |
| } |
| /** |
| * Add generated styles |
| * @protected |
| * @param {?} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| /** @type {?} */ |
| const styles = this.buildStyleMap(value); |
| this.ngStyleInstance.ngStyle = Object.assign({}, this.fallbackStyles, styles); |
| if (this.isServer) { |
| this.applyStyleToElement(styles); |
| } |
| this.ngStyleInstance.ngDoCheck(); |
| } |
| /** |
| * Remove generated styles |
| * @protected |
| * @return {?} |
| */ |
| 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 |
| * @protected |
| * @param {?} styles |
| * @return {?} |
| */ |
| buildStyleMap(styles) { |
| // Always safe-guard (aka sanitize) style property values |
| /** @type {?} */ |
| const sanitizer = (/** |
| * @param {?} val |
| * @return {?} |
| */ |
| (val) => this.sanitizer.sanitize(SecurityContext.STYLE, val) || ''); |
| if (styles) { |
| switch (getType(styles)) { |
| case 'string': return buildMapFromList$1(buildRawList(styles), sanitizer); |
| case 'array': return buildMapFromList$1((/** @type {?} */ (styles)), sanitizer); |
| case 'set': return buildMapFromSet(styles, sanitizer); |
| default: return buildMapFromSet(styles, sanitizer); |
| } |
| } |
| return {}; |
| } |
| // ****************************************************************** |
| // Lifecycle Hooks |
| // ****************************************************************** |
| /** |
| * For ChangeDetectionStrategy.onPush and ngOnChanges() updates |
| * @return {?} |
| */ |
| ngDoCheck() { |
| this.ngStyleInstance.ngDoCheck(); |
| } |
| } |
| /** @nocollapse */ |
| StyleDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: MediaMarshaller }, |
| { type: ɵNgStyleImpl }, |
| { type: DomSanitizer }, |
| { type: NgStyle, decorators: [{ type: Optional }, { type: Self }] }, |
| { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [SERVER_TOKEN,] }] }, |
| { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] } |
| ]; |
| /** @type {?} */ |
| const inputs$3 = [ |
| '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' |
| ]; |
| /** @type {?} */ |
| const selector$3 = ` |
| [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] |
| `; |
| // tslint:disable-next-line:variable-name |
| /** @type {?} */ |
| const LayoutNgStyleImplProvider = { |
| provide: ɵNgStyleImpl, |
| useClass: ɵNgStyleR2Impl |
| }; |
| /** |
| * Directive to add responsive support for ngStyle. |
| * |
| */ |
| class DefaultStyleDirective extends StyleDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$3; |
| } |
| } |
| DefaultStyleDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$3, inputs: inputs$3, providers: [LayoutNgStyleImplProvider] },] }, |
| ]; |
| /** |
| * Build a styles map from a list of styles, while sanitizing bad values first |
| * @param {?} styles |
| * @param {?=} sanitize |
| * @return {?} |
| */ |
| function buildMapFromList$1(styles, sanitize) { |
| /** @type {?} */ |
| const sanitizeValue = (/** |
| * @param {?} it |
| * @return {?} |
| */ |
| (it) => { |
| if (sanitize) { |
| it.value = sanitize(it.value); |
| } |
| return it; |
| }); |
| return styles |
| .map(stringToKeyValue) |
| .filter((/** |
| * @param {?} entry |
| * @return {?} |
| */ |
| entry => !!entry)) |
| .map(sanitizeValue) |
| .reduce(keyValuesToMap, (/** @type {?} */ ({}))); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const ALL_DIRECTIVES = [ |
| DefaultShowHideDirective, |
| DefaultClassDirective, |
| DefaultStyleDirective, |
| DefaultImgSrcDirective |
| ]; |
| /** |
| * ***************************************************************** |
| * Define module for the Extended API |
| * ***************************************************************** |
| */ |
| class ExtendedModule { |
| } |
| ExtendedModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [CoreModule], |
| declarations: [...ALL_DIRECTIVES], |
| exports: [...ALL_DIRECTIVES] |
| },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { ExtendedModule, ClassDirective, LayoutNgClassImplProvider, DefaultClassDirective, ImgSrcStyleBuilder, ImgSrcDirective, DefaultImgSrcDirective, ShowHideStyleBuilder, ShowHideDirective, DefaultShowHideDirective, StyleDirective, LayoutNgStyleImplProvider, DefaultStyleDirective }; |
| //# sourceMappingURL=extended.js.map |
