diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts index 97cf05d13..abdc3d07c 100644 --- a/src/lib/extended/show-hide/show-hide.ts +++ b/src/lib/extended/show-hide/show-hide.ts @@ -35,6 +35,13 @@ import {Subscription} from 'rxjs'; const FALSY = ['false', false, 0]; +type ShowHideValuesType + = '' + | 'true' + | 'false' + | number + ; + /** * For fxHide selectors, we invert the 'value' * and assign to the equivalent fxShow selector cache @@ -75,39 +82,39 @@ export class ShowHideDirective extends BaseDirective protected _display: string = ''; /* tslint:disable */ - @Input('fxShow') set show(val: string) { this._cacheInput('show', val); } - @Input('fxShow.xs') set showXs(val: string) {this._cacheInput('showXs', val);} - @Input('fxShow.sm') set showSm(val: string) {this._cacheInput('showSm', val); }; - @Input('fxShow.md') set showMd(val: string) {this._cacheInput('showMd', val); }; - @Input('fxShow.lg') set showLg(val: string) {this._cacheInput('showLg', val); }; - @Input('fxShow.xl') set showXl(val: string) {this._cacheInput('showXl', val); }; - - @Input('fxShow.lt-sm') set showLtSm(val: string) { this._cacheInput('showLtSm', val); }; - @Input('fxShow.lt-md') set showLtMd(val: string) { this._cacheInput('showLtMd', val); }; - @Input('fxShow.lt-lg') set showLtLg(val: string) { this._cacheInput('showLtLg', val); }; - @Input('fxShow.lt-xl') set showLtXl(val: string) { this._cacheInput('showLtXl', val); }; - - @Input('fxShow.gt-xs') set showGtXs(val: string) {this._cacheInput('showGtXs', val); }; - @Input('fxShow.gt-sm') set showGtSm(val: string) {this._cacheInput('showGtSm', val); }; - @Input('fxShow.gt-md') set showGtMd(val: string) {this._cacheInput('showGtMd', val); }; - @Input('fxShow.gt-lg') set showGtLg(val: string) {this._cacheInput('showGtLg', val); }; - - @Input('fxHide') set hide(val: string) {this._cacheInput('show', negativeOf(val));} - @Input('fxHide.xs') set hideXs(val: string) {this._cacheInput('showXs', negativeOf(val));} - @Input('fxHide.sm') set hideSm(val: string) {this._cacheInput('showSm', negativeOf(val)); }; - @Input('fxHide.md') set hideMd(val: string) {this._cacheInput('showMd', negativeOf(val)); }; - @Input('fxHide.lg') set hideLg(val: string) {this._cacheInput('showLg', negativeOf(val)); }; - @Input('fxHide.xl') set hideXl(val: string) {this._cacheInput('showXl', negativeOf(val)); }; - - @Input('fxHide.lt-sm') set hideLtSm(val: string) { this._cacheInput('showLtSm', negativeOf(val)); }; - @Input('fxHide.lt-md') set hideLtMd(val: string) { this._cacheInput('showLtMd', negativeOf(val)); }; - @Input('fxHide.lt-lg') set hideLtLg(val: string) { this._cacheInput('showLtLg', negativeOf(val)); }; - @Input('fxHide.lt-xl') set hideLtXl(val: string) { this._cacheInput('showLtXl', negativeOf(val)); }; - - @Input('fxHide.gt-xs') set hideGtXs(val: string) {this._cacheInput('showGtXs', negativeOf(val)); }; - @Input('fxHide.gt-sm') set hideGtSm(val: string) {this._cacheInput('showGtSm', negativeOf(val)); }; - @Input('fxHide.gt-md') set hideGtMd(val: string) {this._cacheInput('showGtMd', negativeOf(val)); }; - @Input('fxHide.gt-lg') set hideGtLg(val: string) {this._cacheInput('showGtLg', negativeOf(val)); }; + @Input('fxShow') set show(val: ShowHideValuesType) { this._cacheInput('show', val); } + @Input('fxShow.xs') set showXs(val: ShowHideValuesType) {this._cacheInput('showXs', val);} + @Input('fxShow.sm') set showSm(val: ShowHideValuesType) {this._cacheInput('showSm', val); }; + @Input('fxShow.md') set showMd(val: ShowHideValuesType) {this._cacheInput('showMd', val); }; + @Input('fxShow.lg') set showLg(val: ShowHideValuesType) {this._cacheInput('showLg', val); }; + @Input('fxShow.xl') set showXl(val: ShowHideValuesType) {this._cacheInput('showXl', val); }; + + @Input('fxShow.lt-sm') set showLtSm(val: ShowHideValuesType) { this._cacheInput('showLtSm', val); }; + @Input('fxShow.lt-md') set showLtMd(val: ShowHideValuesType) { this._cacheInput('showLtMd', val); }; + @Input('fxShow.lt-lg') set showLtLg(val: ShowHideValuesType) { this._cacheInput('showLtLg', val); }; + @Input('fxShow.lt-xl') set showLtXl(val: ShowHideValuesType) { this._cacheInput('showLtXl', val); }; + + @Input('fxShow.gt-xs') set showGtXs(val: ShowHideValuesType) {this._cacheInput('showGtXs', val); }; + @Input('fxShow.gt-sm') set showGtSm(val: ShowHideValuesType) {this._cacheInput('showGtSm', val); }; + @Input('fxShow.gt-md') set showGtMd(val: ShowHideValuesType) {this._cacheInput('showGtMd', val); }; + @Input('fxShow.gt-lg') set showGtLg(val: ShowHideValuesType) {this._cacheInput('showGtLg', val); }; + + @Input('fxHide') set hide(val: ShowHideValuesType) {this._cacheInput('show', negativeOf(val));} + @Input('fxHide.xs') set hideXs(val: ShowHideValuesType) {this._cacheInput('showXs', negativeOf(val));} + @Input('fxHide.sm') set hideSm(val: ShowHideValuesType) {this._cacheInput('showSm', negativeOf(val)); }; + @Input('fxHide.md') set hideMd(val: ShowHideValuesType) {this._cacheInput('showMd', negativeOf(val)); }; + @Input('fxHide.lg') set hideLg(val: ShowHideValuesType) {this._cacheInput('showLg', negativeOf(val)); }; + @Input('fxHide.xl') set hideXl(val: ShowHideValuesType) {this._cacheInput('showXl', negativeOf(val)); }; + + @Input('fxHide.lt-sm') set hideLtSm(val: ShowHideValuesType) { this._cacheInput('showLtSm', negativeOf(val)); }; + @Input('fxHide.lt-md') set hideLtMd(val: ShowHideValuesType) { this._cacheInput('showLtMd', negativeOf(val)); }; + @Input('fxHide.lt-lg') set hideLtLg(val: ShowHideValuesType) { this._cacheInput('showLtLg', negativeOf(val)); }; + @Input('fxHide.lt-xl') set hideLtXl(val: ShowHideValuesType) { this._cacheInput('showLtXl', negativeOf(val)); }; + + @Input('fxHide.gt-xs') set hideGtXs(val: ShowHideValuesType) {this._cacheInput('showGtXs', negativeOf(val)); }; + @Input('fxHide.gt-sm') set hideGtSm(val: ShowHideValuesType) {this._cacheInput('showGtSm', negativeOf(val)); }; + @Input('fxHide.gt-md') set hideGtMd(val: ShowHideValuesType) {this._cacheInput('showGtMd', negativeOf(val)); }; + @Input('fxHide.gt-lg') set hideGtLg(val: ShowHideValuesType) {this._cacheInput('showGtLg', negativeOf(val)); }; /* tslint:enable */ @ViewChild(FlexDirective) protected _flexChild: FlexDirective | null = null; diff --git a/src/lib/flex/flex-align/flex-align.ts b/src/lib/flex/flex-align/flex-align.ts index a41865aa2..ca6b97860 100644 --- a/src/lib/flex/flex-align/flex-align.ts +++ b/src/lib/flex/flex-align/flex-align.ts @@ -24,9 +24,17 @@ import { StyleUtils, } from '@angular/flex-layout/core'; +type FlexAlignValuesType + = 'start' + | 'center' + | 'end' + | 'baseline' + | 'stretch' + ; + @Injectable({providedIn: 'root'}) export class FlexAlignStyleBuilder extends StyleBuilder { - buildStyles(input: string) { + buildStyles(input: FlexAlignValuesType) { const styles: StyleDefinition = {}; // Cross-axis @@ -62,22 +70,22 @@ export class FlexAlignStyleBuilder extends StyleBuilder { export class FlexAlignDirective extends BaseDirective implements OnInit, OnChanges, OnDestroy { /* tslint:disable */ - @Input('fxFlexAlign') set align(val: string) { this._cacheInput('align', val); }; - @Input('fxFlexAlign.xs') set alignXs(val: string) { this._cacheInput('alignXs', val); }; - @Input('fxFlexAlign.sm') set alignSm(val: string) { this._cacheInput('alignSm', val); }; - @Input('fxFlexAlign.md') set alignMd(val: string) { this._cacheInput('alignMd', val); }; - @Input('fxFlexAlign.lg') set alignLg(val: string) { this._cacheInput('alignLg', val); }; - @Input('fxFlexAlign.xl') set alignXl(val: string) { this._cacheInput('alignXl', val); }; - - @Input('fxFlexAlign.lt-sm') set alignLtSm(val: string) { this._cacheInput('alignLtSm', val); }; - @Input('fxFlexAlign.lt-md') set alignLtMd(val: string) { this._cacheInput('alignLtMd', val); }; - @Input('fxFlexAlign.lt-lg') set alignLtLg(val: string) { this._cacheInput('alignLtLg', val); }; - @Input('fxFlexAlign.lt-xl') set alignLtXl(val: string) { this._cacheInput('alignLtXl', val); }; - - @Input('fxFlexAlign.gt-xs') set alignGtXs(val: string) { this._cacheInput('alignGtXs', val); }; - @Input('fxFlexAlign.gt-sm') set alignGtSm(val: string) { this._cacheInput('alignGtSm', val); }; - @Input('fxFlexAlign.gt-md') set alignGtMd(val: string) { this._cacheInput('alignGtMd', val); }; - @Input('fxFlexAlign.gt-lg') set alignGtLg(val: string) { this._cacheInput('alignGtLg', val); }; + @Input('fxFlexAlign') set align(val: FlexAlignValuesType) { this._cacheInput('align', val); }; + @Input('fxFlexAlign.xs') set alignXs(val: FlexAlignValuesType) { this._cacheInput('alignXs', val); }; + @Input('fxFlexAlign.sm') set alignSm(val: FlexAlignValuesType) { this._cacheInput('alignSm', val); }; + @Input('fxFlexAlign.md') set alignMd(val: FlexAlignValuesType) { this._cacheInput('alignMd', val); }; + @Input('fxFlexAlign.lg') set alignLg(val: FlexAlignValuesType) { this._cacheInput('alignLg', val); }; + @Input('fxFlexAlign.xl') set alignXl(val: FlexAlignValuesType) { this._cacheInput('alignXl', val); }; + + @Input('fxFlexAlign.lt-sm') set alignLtSm(val: FlexAlignValuesType) { this._cacheInput('alignLtSm', val); }; + @Input('fxFlexAlign.lt-md') set alignLtMd(val: FlexAlignValuesType) { this._cacheInput('alignLtMd', val); }; + @Input('fxFlexAlign.lt-lg') set alignLtLg(val: FlexAlignValuesType) { this._cacheInput('alignLtLg', val); }; + @Input('fxFlexAlign.lt-xl') set alignLtXl(val: FlexAlignValuesType) { this._cacheInput('alignLtXl', val); }; + + @Input('fxFlexAlign.gt-xs') set alignGtXs(val: FlexAlignValuesType) { this._cacheInput('alignGtXs', val); }; + @Input('fxFlexAlign.gt-sm') set alignGtSm(val: FlexAlignValuesType) { this._cacheInput('alignGtSm', val); }; + @Input('fxFlexAlign.gt-md') set alignGtMd(val: FlexAlignValuesType) { this._cacheInput('alignGtMd', val); }; + @Input('fxFlexAlign.gt-lg') set alignGtLg(val: FlexAlignValuesType) { this._cacheInput('alignGtLg', val); }; /* tslint:enable */ constructor(monitor: MediaMonitor, diff --git a/src/lib/flex/layout-align/layout-align.ts b/src/lib/flex/layout-align/layout-align.ts index cc3cac287..f005c4690 100644 --- a/src/lib/flex/layout-align/layout-align.ts +++ b/src/lib/flex/layout-align/layout-align.ts @@ -31,6 +31,88 @@ import {extendObject} from '../../utils/object-extend'; import {Layout, LayoutDirective} from '../layout/layout'; import {LAYOUT_VALUES, isFlowHorizontal} from '../../utils/layout-validator'; +type LayoutAlignMainAxisValuesType + = '' + | 'start' | 'flex-start' + | 'flex-start' + | 'center' + | 'end' | 'flex-end' + | 'space-around' + | 'space-between' + | 'space-evenly' + ; + +type LayoutAlignCrossAxisValuesType + = LayoutAlignMainAxisValuesType + | 'stretch' + | 'baseline' + ; + +/** + * Combinations of all flex layout align values + * + * @see https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API + */ +type LayoutAlignValuesType + = LayoutAlignMainAxisValuesType +// Main Axis combinations with Cross Axis - start (flex-start) + | 'start start' | 'start flex-start' + | 'center start' | 'center flex-start' + | 'end start' | 'end flex-start' + | 'space-around start' | 'space-around flex-start' + | 'space-between start' | 'space-between flex-start' + | 'space-evenly start' | 'space-evenly flex-start' +// Main Axis combinations with Cross Axis - center + | 'start center' + | 'center center' + | 'end center' + | 'space-around center' + | 'space-between center' + | 'space-evenly center' +// Main Axis combinations with Cross Axis - end (flex-end) + | 'start end' | 'start flex-end' + | 'center end' | 'center flex-end' + | 'end end' | 'end flex-end' + | 'space-around end' | 'space-around flex-end' + | 'space-between end' | 'space-between flex-end' + | 'space-evenly end' | 'space-evenly flex-end' +// Main Axis combinations with Cross Axis - space-around + | 'start space-around' + | 'center space-around' + | 'end space-around' + | 'space-around space-around' + | 'space-between space-around' + | 'space-evenly space-around' +// Main Axis combinations with Cross Axis - space-between + | 'start space-between' + | 'center space-between' + | 'end space-between' + | 'space-around space-between' + | 'space-between space-between' + | 'space-evenly space-between' +// Main Axis combinations with Cross Axis - space-evenly + | 'start space-evenly' + | 'center space-evenly' + | 'end space-evenly' + | 'space-around space-evenly' + | 'space-between space-evenly' + | 'space-evenly space-evenly' +// Main Axis combinations with Cross Axis - stretch + | 'start stretch' + | 'center stretch' + | 'end stretch' + | 'space-around stretch' + | 'space-between stretch' + | 'space-evenly stretch' +// Main Axis combinations with Cross Axis - baseline + | 'start baseline' + | 'center baseline' + | 'end baseline' + | 'space-around baseline' + | 'space-between baseline' + | 'space-evenly baseline' + ; + export interface LayoutAlignParent { layout: string; } @@ -38,7 +120,8 @@ export interface LayoutAlignParent { @Injectable({providedIn: 'root'}) export class LayoutAlignStyleBuilder extends StyleBuilder { buildStyles(align: string, parent: LayoutAlignParent) { - const css: StyleDefinition = {}, [mainAxis, crossAxis] = align.split(' '); + const css: StyleDefinition = {}, [mainAxis, crossAxis] = + align.split(' ') as [LayoutAlignMainAxisValuesType, LayoutAlignCrossAxisValuesType]; // Main axis switch (mainAxis) { @@ -129,22 +212,22 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha protected _layoutWatcher?: Subscription; /* tslint:disable */ - @Input('fxLayoutAlign') set align(val: string) { this._cacheInput('align', val); } - @Input('fxLayoutAlign.xs') set alignXs(val: string) { this._cacheInput('alignXs', val); } - @Input('fxLayoutAlign.sm') set alignSm(val: string) { this._cacheInput('alignSm', val); }; - @Input('fxLayoutAlign.md') set alignMd(val: string) { this._cacheInput('alignMd', val); }; - @Input('fxLayoutAlign.lg') set alignLg(val: string) { this._cacheInput('alignLg', val); }; - @Input('fxLayoutAlign.xl') set alignXl(val: string) { this._cacheInput('alignXl', val); }; - - @Input('fxLayoutAlign.gt-xs') set alignGtXs(val: string) { this._cacheInput('alignGtXs', val); }; - @Input('fxLayoutAlign.gt-sm') set alignGtSm(val: string) { this._cacheInput('alignGtSm', val); }; - @Input('fxLayoutAlign.gt-md') set alignGtMd(val: string) { this._cacheInput('alignGtMd', val); }; - @Input('fxLayoutAlign.gt-lg') set alignGtLg(val: string) { this._cacheInput('alignGtLg', val); }; - - @Input('fxLayoutAlign.lt-sm') set alignLtSm(val: string) { this._cacheInput('alignLtSm', val); }; - @Input('fxLayoutAlign.lt-md') set alignLtMd(val: string) { this._cacheInput('alignLtMd', val); }; - @Input('fxLayoutAlign.lt-lg') set alignLtLg(val: string) { this._cacheInput('alignLtLg', val); }; - @Input('fxLayoutAlign.lt-xl') set alignLtXl(val: string) { this._cacheInput('alignLtXl', val); }; + @Input('fxLayoutAlign') set align(val: LayoutAlignValuesType) { this._cacheInput('align', val); } + @Input('fxLayoutAlign.xs') set alignXs(val: LayoutAlignValuesType) { this._cacheInput('alignXs', val); } + @Input('fxLayoutAlign.sm') set alignSm(val: LayoutAlignValuesType) { this._cacheInput('alignSm', val); }; + @Input('fxLayoutAlign.md') set alignMd(val: LayoutAlignValuesType) { this._cacheInput('alignMd', val); }; + @Input('fxLayoutAlign.lg') set alignLg(val: LayoutAlignValuesType) { this._cacheInput('alignLg', val); }; + @Input('fxLayoutAlign.xl') set alignXl(val: LayoutAlignValuesType) { this._cacheInput('alignXl', val); }; + + @Input('fxLayoutAlign.gt-xs') set alignGtXs(val: LayoutAlignValuesType) { this._cacheInput('alignGtXs', val); }; + @Input('fxLayoutAlign.gt-sm') set alignGtSm(val: LayoutAlignValuesType) { this._cacheInput('alignGtSm', val); }; + @Input('fxLayoutAlign.gt-md') set alignGtMd(val: LayoutAlignValuesType) { this._cacheInput('alignGtMd', val); }; + @Input('fxLayoutAlign.gt-lg') set alignGtLg(val: LayoutAlignValuesType) { this._cacheInput('alignGtLg', val); }; + + @Input('fxLayoutAlign.lt-sm') set alignLtSm(val: LayoutAlignValuesType) { this._cacheInput('alignLtSm', val); }; + @Input('fxLayoutAlign.lt-md') set alignLtMd(val: LayoutAlignValuesType) { this._cacheInput('alignLtMd', val); }; + @Input('fxLayoutAlign.lt-lg') set alignLtLg(val: LayoutAlignValuesType) { this._cacheInput('alignLtLg', val); }; + @Input('fxLayoutAlign.lt-xl') set alignLtXl(val: LayoutAlignValuesType) { this._cacheInput('alignLtXl', val); }; /* tslint:enable */ constructor( diff --git a/src/lib/flex/layout/layout.ts b/src/lib/flex/layout/layout.ts index b90763413..20b53b4d1 100644 --- a/src/lib/flex/layout/layout.ts +++ b/src/lib/flex/layout/layout.ts @@ -28,7 +28,7 @@ import {Observable, ReplaySubject} from 'rxjs'; import {buildLayoutCSS} from '../../utils/layout-validator'; export type Layout = { - direction: string; + direction: LayoutValuesType; wrap: boolean; }; @@ -36,6 +36,14 @@ export interface LayoutParent { announcer: ReplaySubject; } +type LayoutValuesType + = '' + | 'row' + | 'row-reverse' + | 'column' + | 'column-reverse' + ; + @Injectable({providedIn: 'root'}) export class LayoutStyleBuilder extends StyleBuilder { buildStyles(input: string, _parent: LayoutParent) { @@ -44,7 +52,7 @@ export class LayoutStyleBuilder extends StyleBuilder { } sideEffect(_input: string, styles: StyleDefinition, parent: LayoutParent) { parent.announcer.next({ - direction: styles['flex-direction'] as string, + direction: styles['flex-direction'] as LayoutValuesType, wrap: !!styles['flex-wrap'] && styles['flex-wrap'] !== 'nowrap' }); } @@ -78,22 +86,22 @@ export class LayoutDirective extends BaseDirective implements OnInit, OnChanges, layout$: Observable; /* tslint:disable */ - @Input('fxLayout') set layout(val: string) { this._cacheInput('layout', val); }; - @Input('fxLayout.xs') set layoutXs(val: string) { this._cacheInput('layoutXs', val); }; - @Input('fxLayout.sm') set layoutSm(val: string) { this._cacheInput('layoutSm', val); }; - @Input('fxLayout.md') set layoutMd(val: string) { this._cacheInput('layoutMd', val); }; - @Input('fxLayout.lg') set layoutLg(val: string) { this._cacheInput('layoutLg', val); }; - @Input('fxLayout.xl') set layoutXl(val: string) { this._cacheInput('layoutXl', val); }; - - @Input('fxLayout.gt-xs') set layoutGtXs(val: string) { this._cacheInput('layoutGtXs', val); }; - @Input('fxLayout.gt-sm') set layoutGtSm(val: string) { this._cacheInput('layoutGtSm', val); }; - @Input('fxLayout.gt-md') set layoutGtMd(val: string) { this._cacheInput('layoutGtMd', val); }; - @Input('fxLayout.gt-lg') set layoutGtLg(val: string) { this._cacheInput('layoutGtLg', val); }; - - @Input('fxLayout.lt-sm') set layoutLtSm(val: string) { this._cacheInput('layoutLtSm', val); }; - @Input('fxLayout.lt-md') set layoutLtMd(val: string) { this._cacheInput('layoutLtMd', val); }; - @Input('fxLayout.lt-lg') set layoutLtLg(val: string) { this._cacheInput('layoutLtLg', val); }; - @Input('fxLayout.lt-xl') set layoutLtXl(val: string) { this._cacheInput('layoutLtXl', val); }; + @Input('fxLayout') set layout(val: LayoutValuesType) { this._cacheInput('layout', val); }; + @Input('fxLayout.xs') set layoutXs(val: LayoutValuesType) { this._cacheInput('layoutXs', val); }; + @Input('fxLayout.sm') set layoutSm(val: LayoutValuesType) { this._cacheInput('layoutSm', val); }; + @Input('fxLayout.md') set layoutMd(val: LayoutValuesType) { this._cacheInput('layoutMd', val); }; + @Input('fxLayout.lg') set layoutLg(val: LayoutValuesType) { this._cacheInput('layoutLg', val); }; + @Input('fxLayout.xl') set layoutXl(val: LayoutValuesType) { this._cacheInput('layoutXl', val); }; + + @Input('fxLayout.gt-xs') set layoutGtXs(val: LayoutValuesType) { this._cacheInput('layoutGtXs', val); }; + @Input('fxLayout.gt-sm') set layoutGtSm(val: LayoutValuesType) { this._cacheInput('layoutGtSm', val); }; + @Input('fxLayout.gt-md') set layoutGtMd(val: LayoutValuesType) { this._cacheInput('layoutGtMd', val); }; + @Input('fxLayout.gt-lg') set layoutGtLg(val: LayoutValuesType) { this._cacheInput('layoutGtLg', val); }; + + @Input('fxLayout.lt-sm') set layoutLtSm(val: LayoutValuesType) { this._cacheInput('layoutLtSm', val); }; + @Input('fxLayout.lt-md') set layoutLtMd(val: LayoutValuesType) { this._cacheInput('layoutLtMd', val); }; + @Input('fxLayout.lt-lg') set layoutLtLg(val: LayoutValuesType) { this._cacheInput('layoutLtLg', val); }; + @Input('fxLayout.lt-xl') set layoutLtXl(val: LayoutValuesType) { this._cacheInput('layoutLtXl', val); }; /* tslint:enable */ constructor(monitor: MediaMonitor,