@ngbracket/ngx-layout
Version:
ngbracket/ngx-layout =======
654 lines (645 loc) • 34.8 kB
JavaScript
import * as i2 from '@angular/common';
import { NgClass, isPlatformServer, NgStyle } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, Optional, Self, Directive, Injectable, PLATFORM_ID, Inject, SecurityContext, NgModule } from '@angular/core';
import * as i1 from '@ngbracket/ngx-layout/core';
import { BaseDirective2, StyleBuilder, SERVER_TOKEN, LAYOUT_CONFIG, CoreModule } from '@ngbracket/ngx-layout/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { takeUntil } from 'rxjs/operators';
import * as i2$1 from '@angular/platform-browser';
const inputs$3 = [
'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$3 = `
[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]
`;
class ClassDirective extends BaseDirective2 {
/**
* 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, '');
}
constructor(elementRef, styler, marshal, renderer2, ngClassInstance) {
super(elementRef, null, styler, marshal);
this.ngClassInstance = ngClassInstance;
this.DIRECTIVE_KEY = 'ngClass';
this.inputs = inputs$3;
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(elementRef, renderer2);
}
this.init();
this.setValue('', '');
}
updateWithValue(value) {
this.ngClassInstance.ngClass = value;
this.ngClassInstance.ngDoCheck();
}
// ******************************************************************
// Lifecycle Hooks
// ******************************************************************
/**
* For ChangeDetectionStrategy.onPush and ngOnChanges() updates
*/
ngDoCheck() {
this.ngClassInstance.ngDoCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ClassDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: i1.MediaMarshaller }, { token: i0.Renderer2 }, { token: i2.NgClass, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: ClassDirective, isStandalone: true, 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", klass: ["class", "klass"] }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ClassDirective, decorators: [{
type: Directive,
args: [{ selector: selector$3, inputs: inputs$3 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: i0.Renderer2 }, { type: i2.NgClass, decorators: [{
type: Optional
}, {
type: Self
}] }], propDecorators: { klass: [{
type: Input,
args: ['class']
}] } });
/**
* 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.
*/
class DefaultClassDirective extends ClassDirective {
constructor() {
super(...arguments);
this.inputs = inputs$3;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DefaultClassDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: DefaultClassDirective, isStandalone: true, 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: "20.1.2", ngImport: i0, type: DefaultClassDirective, decorators: [{
type: Directive,
args: [{ selector: selector$3, inputs: inputs$3 }]
}] });
class ImgSrcStyleBuilder extends StyleBuilder {
buildStyles(url) {
return { content: url ? `url(${url})` : '' };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImgSrcStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImgSrcStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImgSrcStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$2 = [
'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$2 = `
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]
`;
class ImgSrcDirective extends BaseDirective2 {
set src(val) {
this.defaultSrc = val;
this.setValue(this.defaultSrc, '');
}
constructor(elementRef, styleBuilder, styler, marshal, platformId, serverModuleLoaded) {
super(elementRef, styleBuilder, styler, marshal);
this.platformId = platformId;
this.serverModuleLoaded = serverModuleLoaded;
this.DIRECTIVE_KEY = 'img-src';
this.inputs = inputs$2;
this.defaultSrc = '';
this.styleCache = imgSrcCache;
this.init();
this.setValue(this.nativeElement.getAttribute('src') || '', '');
if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
this.nativeElement.setAttribute('src', '');
}
}
/**
* 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);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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 }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: ImgSrcDirective, isStandalone: true, 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", src: "src" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ImgSrcDirective, decorators: [{
type: Directive,
args: [{ selector: selector$2, inputs: inputs$2 }]
}], ctorParameters: () => [{ 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();
/**
* * @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/
*/
class DefaultImgSrcDirective extends ImgSrcDirective {
constructor() {
super(...arguments);
this.inputs = inputs$2;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DefaultImgSrcDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: DefaultImgSrcDirective, isStandalone: true, 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: "20.1.2", ngImport: i0, type: DefaultImgSrcDirective, decorators: [{
type: Directive,
args: [{ selector: selector$2, inputs: inputs$2 }]
}] });
/* eslint-disable @typescript-eslint/no-non-null-assertion */
class ShowHideStyleBuilder extends StyleBuilder {
buildStyles(show, parent) {
const shouldShow = show === 'true';
return {
display: shouldShow
? parent.display || (parent.isServer ? 'initial' : '')
: 'none',
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowHideStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowHideStyleBuilder, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowHideStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
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]
`;
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';
this.inputs = inputs$1;
/** 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');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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 }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: ShowHideDirective, isStandalone: true, 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, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowHideDirective, decorators: [{
type: Directive,
args: [{ selector: selector$1, inputs: inputs$1 }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ShowHideStyleBuilder }, { type: i1.StyleUtils }, { type: i1.MediaMarshaller }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [SERVER_TOKEN]
}] }] });
const DISPLAY_MAP = new WeakMap();
/**
* 'show' Layout API directive
* @deprecated The DefaultShowHideDirective will be removed in version 21.
* Use ShowHideDirective directly instead.
*/
class DefaultShowHideDirective extends ShowHideDirective {
constructor() {
super(...arguments);
this.inputs = inputs$1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DefaultShowHideDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: DefaultShowHideDirective, isStandalone: true, 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: "20.1.2", ngImport: i0, type: DefaultShowHideDirective, decorators: [{
type: Directive,
args: [{ selector: selector$1, inputs: inputs$1 }]
}] });
/** 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) {
const 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) {
const 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;
}
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]
`;
class StyleDirective extends BaseDirective2 {
constructor(elementRef, styler, marshal, sanitizer, differs, renderer2, ngStyleInstance, serverLoaded, platformId) {
super(elementRef, null, styler, marshal);
this.sanitizer = sanitizer;
this.ngStyleInstance = ngStyleInstance;
this.DIRECTIVE_KEY = 'ngStyle';
this.inputs = inputs;
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 = this.nativeElement.getAttribute('style') ?? '';
this.fallbackStyles = this.buildStyleMap(styles);
this.isServer = serverLoaded && isPlatformServer(platformId);
}
/** Add generated styles */
updateWithValue(value) {
const styles = this.buildStyleMap(value);
this.ngStyleInstance.ngStyle = { ...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) => this.sanitizer.sanitize(SecurityContext.STYLE, val) ?? '';
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();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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 }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: StyleDirective, isStandalone: true, 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: "20.1.2", ngImport: i0, type: StyleDirective, decorators: [{
type: Directive,
args: [{ selector, inputs }]
}], ctorParameters: () => [{ 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]
}] }] });
/**
* Directive to add responsive support for ngStyle.
* * @deprecated The DefaultStyleDirective will be removed in version 21.
* Use StyleDirective directly instead.
*
*/
/* @deprecated The DefaultStyleDirective will be removed in version 21.
* Use StyleDirective directly instead.
*/
class DefaultStyleDirective extends StyleDirective {
constructor() {
super(...arguments);
this.inputs = inputs;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DefaultStyleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: DefaultStyleDirective, isStandalone: true, 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: "20.1.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, {});
}
const ALL_DIRECTIVES = [
DefaultShowHideDirective,
DefaultClassDirective,
DefaultStyleDirective,
DefaultImgSrcDirective,
];
/**
* *****************************************************************
* Define module for the Extended API
* *****************************************************************
*/
class ExtendedModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExtendedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: ExtendedModule, imports: [CoreModule, DefaultShowHideDirective,
DefaultClassDirective,
DefaultStyleDirective,
DefaultImgSrcDirective], exports: [DefaultShowHideDirective,
DefaultClassDirective,
DefaultStyleDirective,
DefaultImgSrcDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExtendedModule, imports: [CoreModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExtendedModule, decorators: [{
type: NgModule,
args: [{
imports: [CoreModule, ...ALL_DIRECTIVES],
exports: [...ALL_DIRECTIVES],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ClassDirective, DefaultClassDirective, DefaultImgSrcDirective, DefaultShowHideDirective, DefaultStyleDirective, ExtendedModule, ImgSrcDirective, ImgSrcStyleBuilder, ShowHideDirective, ShowHideStyleBuilder, StyleDirective };
//# sourceMappingURL=ngbracket-ngx-layout-extended.mjs.map