diff --git a/projects/x-framework-components/src/lib/classes/i-x-card-empty.container.ts b/projects/x-framework-components/src/lib/classes/i-x-card-empty.container.ts index 2c4be50..ddbd728 100644 --- a/projects/x-framework-components/src/lib/classes/i-x-card-empty.container.ts +++ b/projects/x-framework-components/src/lib/classes/i-x-card-empty.container.ts @@ -89,6 +89,18 @@ export class XCardEmptyContainer this.cardPropertyProvider.cardSubTitle; readonly cardCssClass: XStandardType> = this.cardPropertyProvider.cardCssClass; + + // + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -181,6 +193,27 @@ export class XCardEmptyContainerComponent @Input() cardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + + // + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -296,6 +329,31 @@ export class XCardEmptyContainerComponent cardSubTitle: this.getValue( container ? container.cardSubTitle : this.cardSubTitle ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, + ), //#endregion // @@ -402,6 +460,16 @@ export class XCardActionBarContainer extends XBaseContainer implements IXCardAct this.cardPropertyProvider.cardShowFooter; readonly cardShowActions: XStandardType = this.cardPropertyProvider.cardShowActions; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -480,6 +548,27 @@ export class XCardActionBarContainerComponent @Input() cardActionProvider: Subject = this.propertyProvider.cardActionProvider; + + // + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -568,6 +657,31 @@ export class XCardActionBarContainerComponent cardSubTitle: this.getValue( container ? container.cardSubTitle : this.cardSubTitle ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, + ), //#endregion // diff --git a/projects/x-framework-components/src/lib/classes/i-x-file.container.ts b/projects/x-framework-components/src/lib/classes/i-x-file.container.ts index 70d7472..0d9b9be 100644 --- a/projects/x-framework-components/src/lib/classes/i-x-file.container.ts +++ b/projects/x-framework-components/src/lib/classes/i-x-file.container.ts @@ -48,9 +48,7 @@ export interface IXMaxAllowedFilesContainer { @Injectable({ providedIn: 'root', }) -export class XMaxAllowedFilesContainer - implements Readonly -{ +export class XMaxAllowedFilesContainer implements Readonly { // //#region Props ... readonly maxAllowedFiles: XStandardType = this.config.maxUploadFiles; @@ -63,7 +61,7 @@ export class XMaxAllowedFilesContainer //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -79,9 +77,7 @@ export interface IXMaxAllowedSizeContainer { @Injectable({ providedIn: 'root', }) -export class XMaxAllowedSizeContainer - implements Readonly -{ +export class XMaxAllowedSizeContainer implements Readonly { // //#region Props ... readonly maxAllowedSize: XStandardType = this.config.maxAllowedSize; @@ -94,7 +90,7 @@ export class XMaxAllowedSizeContainer //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -110,9 +106,7 @@ export interface IXMinAllowedFileSizeContainer { @Injectable({ providedIn: 'root', }) -export class XMinAllowedFileSizeContainer - implements Readonly -{ +export class XMinAllowedFileSizeContainer implements Readonly { // //#region Props ... readonly minAllowedFileSize: XStandardType = @@ -126,7 +120,7 @@ export class XMinAllowedFileSizeContainer //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -142,9 +136,7 @@ export interface IXMaxAllowedFileSizeContainer { @Injectable({ providedIn: 'root', }) -export class XMaxAllowedFileSizeContainer - implements Readonly -{ +export class XMaxAllowedFileSizeContainer implements Readonly { // //#region Props ... readonly maxAllowedFileSize: XStandardType = @@ -158,7 +150,7 @@ export class XMaxAllowedFileSizeContainer //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -191,7 +183,7 @@ export class XFileRegularContainer implements Readonly { //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -254,7 +246,7 @@ export class XFileContainer implements Readonly { //#region Constructor ... constructor( @Inject(X_FRAMEWORK_COMPONENTS_CONFIG) - private config: XFrameworkComponentsConfig + private config: XFrameworkComponentsConfig, ) {} //#endregion } @@ -267,9 +259,9 @@ export class XFileContainer implements Readonly { }) @Component({ template: ` - `, }) @@ -339,7 +331,7 @@ export abstract class XFileContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XFileContainer + protected propertyProvider: XFileContainer, ) { super( config, @@ -348,7 +340,7 @@ export abstract class XFileContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -356,52 +348,52 @@ export abstract class XFileContainerComponent // //#region Abstract ... public extractProps( - container?: IXFileContainer + container?: IXFileContainer, ): Observable { return forkJoin({ // emptyFileException: this.getValue( - container ? container.emptyFileException : this.emptyFileException + container ? container.emptyFileException : this.emptyFileException, ), notAllowedFileException: this.getValue( container ? container.notAllowedFileException - : this.notAllowedFileException + : this.notAllowedFileException, ), allowedExtensions: this.getValue( - container ? container.allowedExtensions : this.allowedExtensions + container ? container.allowedExtensions : this.allowedExtensions, ), maxAllowedFiles: this.getValue( - container ? container.maxAllowedFiles : this.maxAllowedFiles + container ? container.maxAllowedFiles : this.maxAllowedFiles, ), maxAllowedFilesException: this.getValue( container ? container.maxAllowedFilesException - : this.maxAllowedFilesException + : this.maxAllowedFilesException, ), maxAllowedSize: this.getValue( - container ? container.maxAllowedSize : this.maxAllowedSize + container ? container.maxAllowedSize : this.maxAllowedSize, ), maxAllowedSizeException: this.getValue( container ? container.maxAllowedSizeException - : this.maxAllowedSizeException + : this.maxAllowedSizeException, ), minAllowedFileSize: this.getValue( - container ? container.minAllowedFileSize : this.minAllowedFileSize + container ? container.minAllowedFileSize : this.minAllowedFileSize, ), minAllowedFileSizeException: this.getValue( container ? container.minAllowedFileSizeException - : this.minAllowedFileSizeException + : this.minAllowedFileSizeException, ), maxAllowedFileSize: this.getValue( - container ? container.maxAllowedFileSize : this.maxAllowedFileSize + container ? container.maxAllowedFileSize : this.maxAllowedFileSize, ), maxAllowedFileSizeException: this.getValue( container ? container.maxAllowedFileSizeException - : this.maxAllowedFileSizeException + : this.maxAllowedFileSizeException, ), }).pipe( map((data) => { @@ -411,7 +403,7 @@ export abstract class XFileContainerComponent // }; - }) + }), ); } //#endregion @@ -454,6 +446,16 @@ export class XCardFileContainer this.cardPropertyProvider.cardSubTitle; readonly cardCssClass: XStandardType> = this.cardPropertyProvider.cardCssClass; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -501,7 +503,7 @@ export class XCardFileContainer //#region Constructor ... constructor( protected cardPropertyProvider: XComponentCardContainer, - protected filePropertyProvider: XFileContainer + protected filePropertyProvider: XFileContainer, ) { super(); } @@ -556,6 +558,26 @@ export class XCardFileContainerComponent @Input() cardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -621,7 +643,7 @@ export class XCardFileContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XCardFileContainer + protected propertyProvider: XCardFileContainer, ) { super( config, @@ -630,7 +652,7 @@ export class XCardFileContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -638,82 +660,107 @@ export class XCardFileContainerComponent // //#region Abstract ... public extractProps( - container?: IXCardFileContainer + container?: IXCardFileContainer, ): Observable { return forkJoin({ // //#region XComponentCard ... cardCssClass: this.getArrayValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), //#endregion // //#region File ... emptyFileException: this.getValue( - container ? container.emptyFileException : this.emptyFileException + container ? container.emptyFileException : this.emptyFileException, ), notAllowedFileException: this.getValue( container ? container.notAllowedFileException - : this.notAllowedFileException + : this.notAllowedFileException, ), allowedExtensions: this.getValue( - container ? container.allowedExtensions : this.allowedExtensions + container ? container.allowedExtensions : this.allowedExtensions, ), maxAllowedFiles: this.getValue( - container ? container.maxAllowedFiles : this.maxAllowedFiles + container ? container.maxAllowedFiles : this.maxAllowedFiles, ), maxAllowedFilesException: this.getValue( container ? container.maxAllowedFilesException - : this.maxAllowedFilesException + : this.maxAllowedFilesException, ), maxAllowedSize: this.getValue( - container ? container.maxAllowedSize : this.maxAllowedSize + container ? container.maxAllowedSize : this.maxAllowedSize, ), maxAllowedSizeException: this.getValue( container ? container.maxAllowedSizeException - : this.maxAllowedSizeException + : this.maxAllowedSizeException, ), minAllowedFileSize: this.getValue( - container ? container.minAllowedFileSize : this.minAllowedFileSize + container ? container.minAllowedFileSize : this.minAllowedFileSize, ), minAllowedFileSizeException: this.getValue( container ? container.minAllowedFileSizeException - : this.minAllowedFileSizeException + : this.minAllowedFileSizeException, ), maxAllowedFileSize: this.getValue( - container ? container.maxAllowedFileSize : this.maxAllowedFileSize + container ? container.maxAllowedFileSize : this.maxAllowedFileSize, ), maxAllowedFileSizeException: this.getValue( container ? container.maxAllowedFileSizeException - : this.maxAllowedFileSizeException + : this.maxAllowedFileSizeException, ), //#endregion }).pipe( @@ -727,7 +774,7 @@ export class XCardFileContainerComponent ? container.cardActionProvider : this.cardActionProvider, }; - }) + }), ); } //#endregion @@ -740,8 +787,7 @@ export class XCardFileContainerComponent type TXCardFileFileDropContainer = IXComponentCardContainer & IXFileContainer & IXComponentFileDropAreaContainer; -export interface IXCardFileFileDropContainer - extends TXCardFileFileDropContainer {} +export interface IXCardFileFileDropContainer extends TXCardFileFileDropContainer {} // @Injectable({ @@ -775,6 +821,16 @@ export class XCardFileFileDropContainer this.cardPropertyProvider.cardSubTitle; readonly cardCssClass: XStandardType> = this.cardPropertyProvider.cardCssClass; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -899,6 +955,16 @@ export class XCardFileFileDropContainer this.fileDropPropertyProvider.fileDropAreaCardSubTitle; readonly fileDropAreaCardCssClass: XStandardType> = this.fileDropPropertyProvider.fileDropAreaCardCssClass; + readonly fileDropAreaCardShowFullScreenButton: XStandardType = + this.fileDropPropertyProvider.fileDropAreaCardShowFullScreenButton; + readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType = + this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonIcon; + readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType = + this.fileDropPropertyProvider.fileDropAreaCardEnterFullScreenButtonColor; + readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType = + this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonIcon; + readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType = + this.fileDropPropertyProvider.fileDropAreaCardExitFullScreenButtonColor; //#endregion //#endregion //#endregion @@ -908,7 +974,7 @@ export class XCardFileFileDropContainer constructor( protected cardPropertyProvider: XComponentCardContainer, protected fileDropPropertyProvider: XComponentFileDropAreaContainer, - protected filePropertyProvider: XFileContainer + protected filePropertyProvider: XFileContainer, ) { super(); } @@ -963,6 +1029,26 @@ export class XCardFileFileDropContainerComponent @Input() cardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -1131,6 +1217,26 @@ export class XCardFileFileDropContainerComponent @Input() fileDropAreaCardCssClass: XStandardType> = this.propertyProvider.fileDropAreaCardCssClass; + + @Input() + fileDropAreaCardShowFullScreenButton: XStandardType = + this.propertyProvider.fileDropAreaCardShowFullScreenButton; + + @Input() + fileDropAreaCardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon; + + @Input() + fileDropAreaCardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor; + + @Input() + fileDropAreaCardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon; + + @Input() + fileDropAreaCardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor; //#endregion //#endregion //#endregion @@ -1146,7 +1252,7 @@ export class XCardFileFileDropContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XCardFileFileDropContainer + protected propertyProvider: XCardFileFileDropContainer, ) { super( config, @@ -1155,7 +1261,7 @@ export class XCardFileFileDropContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -1163,82 +1269,107 @@ export class XCardFileFileDropContainerComponent // //#region Abstract ... public extractProps( - container?: IXCardFileFileDropContainer + container?: IXCardFileFileDropContainer, ): Observable { return forkJoin({ // //#region XComponentCard ... cardCssClass: this.getArrayValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), //#endregion // //#region File ... emptyFileException: this.getValue( - container ? container.emptyFileException : this.emptyFileException + container ? container.emptyFileException : this.emptyFileException, ), notAllowedFileException: this.getValue( container ? container.notAllowedFileException - : this.notAllowedFileException + : this.notAllowedFileException, ), allowedExtensions: this.getValue( - container ? container.allowedExtensions : this.allowedExtensions + container ? container.allowedExtensions : this.allowedExtensions, ), maxAllowedFiles: this.getValue( - container ? container.maxAllowedFiles : this.maxAllowedFiles + container ? container.maxAllowedFiles : this.maxAllowedFiles, ), maxAllowedFilesException: this.getValue( container ? container.maxAllowedFilesException - : this.maxAllowedFilesException + : this.maxAllowedFilesException, ), maxAllowedSize: this.getValue( - container ? container.maxAllowedSize : this.maxAllowedSize + container ? container.maxAllowedSize : this.maxAllowedSize, ), maxAllowedSizeException: this.getValue( container ? container.maxAllowedSizeException - : this.maxAllowedSizeException + : this.maxAllowedSizeException, ), minAllowedFileSize: this.getValue( - container ? container.minAllowedFileSize : this.minAllowedFileSize + container ? container.minAllowedFileSize : this.minAllowedFileSize, ), minAllowedFileSizeException: this.getValue( container ? container.minAllowedFileSizeException - : this.minAllowedFileSizeException + : this.minAllowedFileSizeException, ), maxAllowedFileSize: this.getValue( - container ? container.maxAllowedFileSize : this.maxAllowedFileSize + container ? container.maxAllowedFileSize : this.maxAllowedFileSize, ), maxAllowedFileSizeException: this.getValue( container ? container.maxAllowedFileSizeException - : this.maxAllowedFileSizeException + : this.maxAllowedFileSizeException, ), //#endregion @@ -1246,103 +1377,132 @@ export class XCardFileFileDropContainerComponent //#region FileDrop ... // fileDropAreaCssClass: this.getValue( - container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass + container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass, ), fileDropAreaColor: this.getValue( - container ? container.fileDropAreaColor : this.fileDropAreaColor + container ? container.fileDropAreaColor : this.fileDropAreaColor, ), fileDropAreaForegroundColor: this.getValue( container ? container.fileDropAreaForegroundColor - : this.fileDropAreaForegroundColor + : this.fileDropAreaForegroundColor, ), fileDropAreaIcon: this.getValue( - container ? container.fileDropAreaIcon : this.fileDropAreaIcon + container ? container.fileDropAreaIcon : this.fileDropAreaIcon, ), fileDropAreaMessage: this.getValue( - container ? container.fileDropAreaMessage : this.fileDropAreaMessage + container ? container.fileDropAreaMessage : this.fileDropAreaMessage, ), fileDropAreaDisableFileCheck: this.getValue( container ? container.fileDropAreaDisableFileCheck - : this.fileDropAreaDisableFileCheck + : this.fileDropAreaDisableFileCheck, ), fileDropAreaSupportsMultipleFiles: this.getValue( container ? container.fileDropAreaSupportsMultipleFiles - : this.fileDropAreaSupportsMultipleFiles + : this.fileDropAreaSupportsMultipleFiles, ), fileDropAreaAllowedExtensions: this.getValue( container ? container.fileDropAreaAllowedExtensions - : this.fileDropAreaAllowedExtensions + : this.fileDropAreaAllowedExtensions, ), fileDropAreaDragDisabled: this.getValue( container ? container.fileDropAreaDragDisabled - : this.fileDropAreaDragDisabled + : this.fileDropAreaDragDisabled, ), fileDropAreaContentTemplate: this.getValue( container ? container.fileDropAreaContentTemplate - : this.fileDropAreaContentTemplate + : this.fileDropAreaContentTemplate, ), fileDropAreaSuccessColor: this.getValue( container ? container.fileDropAreaSuccessColor - : this.fileDropAreaSuccessColor + : this.fileDropAreaSuccessColor, ), fileDropAreaErrorColor: this.getValue( container ? container.fileDropAreaErrorColor - : this.fileDropAreaErrorColor + : this.fileDropAreaErrorColor, ), fileDropAreaAccentColor: this.getValue( container ? container.fileDropAreaAccentColor - : this.fileDropAreaAccentColor + : this.fileDropAreaAccentColor, ), showFileDropArea: this.getValue( - container ? container.showFileDropArea : this.showFileDropArea + container ? container.showFileDropArea : this.showFileDropArea, ), fileDropAreaIsInPage: this.getValue( - container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage + container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage, ), fileDropAreaWrapWithCard: this.getValue( container ? container.fileDropAreaWrapWithCard - : this.fileDropAreaWrapWithCard + : this.fileDropAreaWrapWithCard, ), fileDropAreaCardShowFooter: this.getValue( container ? container.fileDropAreaCardShowFooter - : this.fileDropAreaCardShowFooter + : this.fileDropAreaCardShowFooter, ), fileDropAreaCardShowActions: this.getValue( container ? container.fileDropAreaCardShowActions - : this.fileDropAreaCardShowActions + : this.fileDropAreaCardShowActions, ), fileDropAreaCardColor: this.getValue( - container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor + container + ? container.fileDropAreaCardColor + : this.fileDropAreaCardColor, ), fileDropAreaCardForegroundColor: this.getValue( container ? container.fileDropAreaCardForegroundColor - : this.fileDropAreaCardForegroundColor + : this.fileDropAreaCardForegroundColor, ), fileDropAreaCardTitle: this.getValue( - container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle + container + ? container.fileDropAreaCardTitle + : this.fileDropAreaCardTitle, ), fileDropAreaCardSubTitle: this.getValue( container ? container.fileDropAreaCardSubTitle - : this.fileDropAreaCardSubTitle + : this.fileDropAreaCardSubTitle, ), fileDropAreaCardCssClass: this.getValue( container ? container.fileDropAreaCardCssClass - : this.fileDropAreaCardCssClass + : this.fileDropAreaCardCssClass, + ), + fileDropAreaCardShowFullScreenButton: this.getValue( + container + ? container.fileDropAreaCardShowFullScreenButton + : this.fileDropAreaCardShowFullScreenButton, + ), + fileDropAreaCardEnterFullScreenButtonIcon: this.getValue( + container + ? container.fileDropAreaCardEnterFullScreenButtonIcon + : this.fileDropAreaCardEnterFullScreenButtonIcon, + ), + fileDropAreaCardEnterFullScreenButtonColor: this.getValue( + container + ? container.fileDropAreaCardEnterFullScreenButtonColor + : this.fileDropAreaCardEnterFullScreenButtonColor, + ), + fileDropAreaCardExitFullScreenButtonIcon: this.getValue( + container + ? container.fileDropAreaCardExitFullScreenButtonIcon + : this.fileDropAreaCardExitFullScreenButtonIcon, + ), + fileDropAreaCardExitFullScreenButtonColor: this.getValue( + container + ? container.fileDropAreaCardExitFullScreenButtonColor + : this.fileDropAreaCardExitFullScreenButtonColor, ), //#endregion }).pipe( @@ -1369,7 +1529,7 @@ export class XCardFileFileDropContainerComponent // fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/classes/i-x-next-prev-reset.container.ts b/projects/x-framework-components/src/lib/classes/i-x-next-prev-reset.container.ts index 3ded853..5b78f96 100644 --- a/projects/x-framework-components/src/lib/classes/i-x-next-prev-reset.container.ts +++ b/projects/x-framework-components/src/lib/classes/i-x-next-prev-reset.container.ts @@ -32,6 +32,7 @@ import { map } from 'rxjs/operators'; import { Observable, forkJoin, Subject } from 'rxjs'; import { ViewportRuler } from '@angular/cdk/overlay'; import { XManagerService } from 'x-framework-services'; +import { XIconIdentifier } from '../x-icon/x-icon.typings'; import { IXButtonContainer, XButtonType } from '../x-button/x-button.typings'; import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens'; import { XSlotNameIdentifier, XSlotName } from '../x-slotter/x-slotter.typings'; @@ -274,7 +275,7 @@ export abstract class XNextPrevResetHostContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XNextPrevResetHostContainer + protected propertyProvider: XNextPrevResetHostContainer, ) { super( config, @@ -283,7 +284,7 @@ export abstract class XNextPrevResetHostContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -291,7 +292,7 @@ export abstract class XNextPrevResetHostContainerComponent // //#region Abstract ... public extractProps( - container?: IXNextPrevResetHostContainer + container?: IXNextPrevResetHostContainer, ): Observable { return forkJoin({ // @@ -309,7 +310,7 @@ export abstract class XNextPrevResetHostContainerComponent onPrev: this.onPrev, onReset: this.onReset, }; - }) + }), ); } //#endregion @@ -321,8 +322,7 @@ export abstract class XNextPrevResetHostContainerComponent // type TXCardEmptyContainer = IXComponentCardContainer & IXNextPrevResetHostContainer; -export interface IXCardNextPrevResetHostContainer - extends TXCardEmptyContainer {} +export interface IXCardNextPrevResetHostContainer extends TXCardEmptyContainer {} // @Injectable({ @@ -356,6 +356,16 @@ export class XCardNextPrevResetHostContainer this.cardPropertyProvider.cardSubTitle; readonly cardCssClass: XStandardType> = this.cardPropertyProvider.cardCssClass; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -390,7 +400,7 @@ export class XCardNextPrevResetHostContainer //#region Constructor ... constructor( protected cardPropertyProvider: XComponentCardContainer, - protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer + protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer, ) { super(); } @@ -445,6 +455,26 @@ export class XCardNextPrevResetHostContainerComponent @Input() cardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -489,7 +519,7 @@ export class XCardNextPrevResetHostContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XCardNextPrevResetHostContainer + protected propertyProvider: XCardNextPrevResetHostContainer, ) { super( config, @@ -498,7 +528,7 @@ export class XCardNextPrevResetHostContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -506,35 +536,60 @@ export class XCardNextPrevResetHostContainerComponent // //#region Abstract ... public extractProps( - container?: IXCardNextPrevResetHostContainer + container?: IXCardNextPrevResetHostContainer, ): Observable { return forkJoin({ // //#region XComponentCard ... cardCssClass: this.getArrayValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), //#endregion @@ -561,7 +616,7 @@ export class XCardNextPrevResetHostContainerComponent onPrev: this.onPrev, onReset: this.onReset, }; - }) + }), ); } //#endregion @@ -576,8 +631,7 @@ type TXNextPrevResetContainer = IXNextContainer & IXResetContainer; // tslint:disable-next-line:no-empty-interface export interface IXNextPrevResetContainer - extends IXBaseContainer, - TXNextPrevResetContainer {} + extends IXBaseContainer, TXNextPrevResetContainer {} @Injectable({ providedIn: 'root', @@ -637,7 +691,7 @@ export class XNextPrevResetContainer constructor( protected prevPropertyProvider: XPrevContainer, protected nextPropertyProvider: XNextContainer, - protected resetpropertyProvider: XResetContainer + protected resetpropertyProvider: XResetContainer, ) { super(); } @@ -741,7 +795,7 @@ export abstract class XNextPrevResetContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XNextPrevResetContainer + protected propertyProvider: XNextPrevResetContainer, ) { super( config, @@ -750,7 +804,7 @@ export abstract class XNextPrevResetContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -758,57 +812,57 @@ export abstract class XNextPrevResetContainerComponent // //#region Abstract ... public extractProps( - container?: IXNextPrevResetContainer + container?: IXNextPrevResetContainer, ): Observable { return forkJoin({ // hasNext: this.getValue(container ? container.hasNext : this.hasNext), disableNext: this.getValue( - container ? container.disableNext : this.disableNext + container ? container.disableNext : this.disableNext, ), nextConfirmer: this.getValue( - container ? container.nextConfirmer : this.nextConfirmer + container ? container.nextConfirmer : this.nextConfirmer, ), nextPosition: this.getValue( - container ? container.nextPosition : this.nextPosition + container ? container.nextPosition : this.nextPosition, ), nextCssClass: this.getValue( - container ? container.nextCssClass : this.nextCssClass + container ? container.nextCssClass : this.nextCssClass, ), nextButton: this.getValue( - container ? container.nextButton : this.nextButton + container ? container.nextButton : this.nextButton, ), hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev), disablePrev: this.getValue( - container ? container.disablePrev : this.disablePrev + container ? container.disablePrev : this.disablePrev, ), prevConfirmer: this.getValue( - container ? container.prevConfirmer : this.prevConfirmer + container ? container.prevConfirmer : this.prevConfirmer, ), prevPosition: this.getValue( - container ? container.prevPosition : this.prevPosition + container ? container.prevPosition : this.prevPosition, ), prevCssClass: this.getValue( - container ? container.prevCssClass : this.prevCssClass + container ? container.prevCssClass : this.prevCssClass, ), prevButton: this.getValue( - container ? container.prevButton : this.prevButton + container ? container.prevButton : this.prevButton, ), hasReset: this.getValue(container ? container.hasReset : this.hasReset), disableReset: this.getValue( - container ? container.disableReset : this.disableReset + container ? container.disableReset : this.disableReset, ), resetConfirmer: this.getValue( - container ? container.resetConfirmer : this.resetConfirmer + container ? container.resetConfirmer : this.resetConfirmer, ), resetPosition: this.getValue( - container ? container.resetPosition : this.resetPosition + container ? container.resetPosition : this.resetPosition, ), resetCssClass: this.getValue( - container ? container.resetCssClass : this.resetCssClass + container ? container.resetCssClass : this.resetCssClass, ), resetButton: this.getValue( - container ? container.resetButton : this.resetButton + container ? container.resetButton : this.resetButton, ), }).pipe( map((data) => { @@ -818,7 +872,7 @@ export abstract class XNextPrevResetContainerComponent // }; - }) + }), ); } //#endregion @@ -830,8 +884,7 @@ export abstract class XNextPrevResetContainerComponent type TXNextPrevResetAndHostContainer = IXNextPrevResetContainer & IXCardNextPrevResetHostContainer; export interface IXNextPrevResetAndHostContainer - extends IXBaseContainer, - TXNextPrevResetAndHostContainer {} + extends IXBaseContainer, TXNextPrevResetAndHostContainer {} @Injectable({ providedIn: 'root', @@ -940,6 +993,16 @@ export class XNextPrevResetAndHostContainer this.cardNextPrevResetPropertyProvider.cardSubTitle; readonly cardCssClass: XStandardType> = this.cardNextPrevResetPropertyProvider.cardCssClass; + readonly cardShowFullScreenButton: XStandardType = + this.cardNextPrevResetPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonColor; //#endregion //#endregion @@ -947,7 +1010,7 @@ export class XNextPrevResetAndHostContainer //#region Constructor ... constructor( protected nextPrevResetPropertyProvider: XNextPrevResetContainer, - protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer + protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer, ) { super(); } @@ -1001,6 +1064,26 @@ export class XNextPrevResetAndHostContainerComponent @Input() cardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -1123,7 +1206,7 @@ export class XNextPrevResetAndHostContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XNextPrevResetAndHostContainer + protected propertyProvider: XNextPrevResetAndHostContainer, ) { super( config, @@ -1132,7 +1215,7 @@ export class XNextPrevResetAndHostContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -1140,35 +1223,60 @@ export class XNextPrevResetAndHostContainerComponent // //#region Abstract ... public extractProps( - container?: IXNextPrevResetAndHostContainer + container?: IXNextPrevResetAndHostContainer, ): Observable { return forkJoin({ // //#region XComponentCard ... cardCssClass: this.getArrayValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), //#endregion @@ -1185,51 +1293,51 @@ export class XNextPrevResetAndHostContainerComponent // hasNext: this.getValue(container ? container.hasNext : this.hasNext), disableNext: this.getValue( - container ? container.disableNext : this.disableNext + container ? container.disableNext : this.disableNext, ), nextConfirmer: this.getValue( - container ? container.nextConfirmer : this.nextConfirmer + container ? container.nextConfirmer : this.nextConfirmer, ), nextPosition: this.getValue( - container ? container.nextPosition : this.nextPosition + container ? container.nextPosition : this.nextPosition, ), nextCssClass: this.getValue( - container ? container.nextCssClass : this.nextCssClass + container ? container.nextCssClass : this.nextCssClass, ), nextButton: this.getValue( - container ? container.nextButton : this.nextButton + container ? container.nextButton : this.nextButton, ), hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev), disablePrev: this.getValue( - container ? container.disablePrev : this.disablePrev + container ? container.disablePrev : this.disablePrev, ), prevConfirmer: this.getValue( - container ? container.prevConfirmer : this.prevConfirmer + container ? container.prevConfirmer : this.prevConfirmer, ), prevPosition: this.getValue( - container ? container.prevPosition : this.prevPosition + container ? container.prevPosition : this.prevPosition, ), prevCssClass: this.getValue( - container ? container.prevCssClass : this.prevCssClass + container ? container.prevCssClass : this.prevCssClass, ), prevButton: this.getValue( - container ? container.prevButton : this.prevButton + container ? container.prevButton : this.prevButton, ), hasReset: this.getValue(container ? container.hasReset : this.hasReset), disableReset: this.getValue( - container ? container.disableReset : this.disableReset + container ? container.disableReset : this.disableReset, ), resetConfirmer: this.getValue( - container ? container.resetConfirmer : this.resetConfirmer + container ? container.resetConfirmer : this.resetConfirmer, ), resetPosition: this.getValue( - container ? container.resetPosition : this.resetPosition + container ? container.resetPosition : this.resetPosition, ), resetCssClass: this.getValue( - container ? container.resetCssClass : this.resetCssClass + container ? container.resetCssClass : this.resetCssClass, ), resetButton: this.getValue( - container ? container.resetButton : this.resetButton + container ? container.resetButton : this.resetButton, ), //#endregion }).pipe( @@ -1248,7 +1356,7 @@ export class XNextPrevResetAndHostContainerComponent onPrev: this.onPrev, onReset: this.onReset, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/component-templates/x-card.component.templates.ts b/projects/x-framework-components/src/lib/component-templates/x-card.component.templates.ts index 32dd58b..06966b3 100644 --- a/projects/x-framework-components/src/lib/component-templates/x-card.component.templates.ts +++ b/projects/x-framework-components/src/lib/component-templates/x-card.component.templates.ts @@ -43,6 +43,11 @@ export class XCardTestComponent extends XCardContainerComponent {} [showFooter]="props.cardShowFooter" [actionProvider]="props.cardActionProvider" [foregroundColor]="props.cardForegroundColor" + [showFullScreenButton]="props.showFullScreenButton" + [exitFullScreenButtonIcon]="props.exitFullScreenButtonIcon" + [enterFullScreenButtonIcon]="props.enterFullScreenButtonIcon" + [exitFullScreenButtonColor]="props.exitFullScreenButtonColor" + [enterFullScreenButtonColor]="props.enterFullScreenButtonColor" > @@ -55,16 +60,21 @@ export class XCardTestComponent extends XCardContainerComponent {} class="x-card" [showActions]="true" [color]="props.cardColor" - [ngClass]="props.cardCssClass" [isInPage]="props.isInPage" + [ngClass]="props.cardCssClass" [showHeader]=" (notEmptyValue(props.cardTitle) | async) || (notEmptyValue(props.cardSubTitle) | async) " - [subTitle]="getResourceValue(props.cardSubTitle)" [title]="getResourceValue(props.cardTitle) | async" [showFooter]="getValue(props.cardShowFooter) | async" + [subTitle]="getResourceValue(props.cardSubTitle) | async" [foregroundColor]="getValue(props.cardForegroundColor) | async" + [showFullScreenButton]="getValue(props.cardShowFullScreenButton) | async" + [exitFullScreenButtonIcon]="getValue(props.cardExitFullScreenButtonIcon) | async" + [enterFullScreenButtonIcon]="getValue(props.cardEnterFullScreenButtonIcon) | async" + [exitFullScreenButtonColor]="getValue(props.cardExitFullScreenButtonColor) | async" + [enterFullScreenButtonColor]="getValue(props.cardEnterFullScreenButtonColor) | async" > diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.html b/projects/x-framework-components/src/lib/x-card/x-card.component.html index 6d3c16f..4efa0ec 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.component.html +++ b/projects/x-framework-components/src/lib/x-card/x-card.component.html @@ -6,6 +6,7 @@ [class.no-text]="isNoTextCard() | async" [class.page-card]="getValue(isInPage) | async" [isForeground]="getValue(foregroundColor) | async" + [class.full-screen]="getValue(isFullScreen) | async" > @@ -51,6 +52,16 @@ + + + diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.scss b/projects/x-framework-components/src/lib/x-card/x-card.component.scss index 99e932e..3cbcf6e 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.component.scss +++ b/projects/x-framework-components/src/lib/x-card/x-card.component.scss @@ -1,5 +1,5 @@ // -@import '../theme/theme.scss'; +@import "../theme/theme.scss"; // :host::ng-deep.x-card.no-text { @@ -20,7 +20,7 @@ @include push-auto(); @include applyWidthHeight(); @include m-tb($d-l); - @include animation('fadeInUp'); + @include animation("fadeInUp"); &.mobile { box-sizing: border-box; @@ -32,6 +32,19 @@ } } +.x-card.full-screen { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + border-radius: 0; + margin: 0; + z-index: var(--full-screen-z-index, 9999); +} + .x-header, .x-content, .x-actions, diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.ts b/projects/x-framework-components/src/lib/x-card/x-card.component.ts index 653f09b..71d249c 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.component.ts +++ b/projects/x-framework-components/src/lib/x-card/x-card.component.ts @@ -20,6 +20,19 @@ export class XCardComponent extends XCardContainerComponent { //#region Props ... // private ACTION_PROVIDER_SUBSCRIPTION: Subscription; + + // + private IS_FULL_SCREEN: boolean = false; + set isFullScreen(v: boolean) { + // + const isChanged = v != this.IS_FULL_SCREEN; + + // + this.IS_FULL_SCREEN = v; + } + get isFullScreen() { + return this.IS_FULL_SCREEN; + } //#endregion // @@ -31,7 +44,7 @@ export class XCardComponent extends XCardContainerComponent { //#region Action Provider Changed ... // const isActionProviderChanged = changeKeys.includes( - nameof('actionProvider') + nameof('actionProvider'), ); if (isActionProviderChanged) { this.registerActionProvider(); @@ -71,11 +84,84 @@ export class XCardComponent extends XCardContainerComponent { isNullOrEmptyString(object.title) && isNullOrEmptyString(object.subTitle) ); - }) - ) - ) + }), + ), + ), ); } + + getFullScreenIconName() { + return this.getValue(this.isFullScreen).pipe( + concatMap((isFull) => { + // + if (!isFull) { + return this.getValue(this.enterFullScreenButtonIcon); + } else { + return this.getValue(this.exitFullScreenButtonIcon); + } + }), + ); + } + + getFullScreenIconColor() { + return this.getValue(this.isFullScreen).pipe( + concatMap((isFull) => { + // + if (!isFull) { + return this.getValue(this.enterFullScreenButtonColor); + } else { + return this.getValue(this.exitFullScreenButtonColor); + } + }), + ); + } + //#endregion + + // + //#region UI Handlers ... + async handleToggleFullScreen() { + await this.toggleFullScreen(); + } + //#endregion + + // + //#region Actions ... + public async enterFullScreen() { + // + if (this.isFullScreen) { + return; + } + + // + this.isFullScreen = true; + // this.fullScreenChanged.emit(true); + + // + this.detectChanges(); + } + + public async exitFullScreen() { + // + if (!this.isFullScreen) { + return; + } + + // + this.isFullScreen = false; + // this.fullScreenChanged.emit(false); + + // + this.detectChanges(); + } + + public async toggleFullScreen() { + // + if (this.isFullScreen) { + await this.exitFullScreen(); + } else { + await this.enterFullScreen(); + } + } //#endregion // @@ -94,7 +180,7 @@ export class XCardComponent extends XCardContainerComponent { // // Handle Action Provider ... this.ACTION_PROVIDER_SUBSCRIPTION = this.applyTakeUntilWrapper( - this.actionProvider.asObservable() + this.actionProvider.asObservable(), ).subscribe(async (model) => { // if (!model) { @@ -107,6 +193,21 @@ export class XCardComponent extends XCardContainerComponent { case XCardAction.Refresh: this.detectChanges(); break; + + // + case XCardAction.EnterFullScreen: + await this.enterFullScreen(); + break; + + // + case XCardAction.ExitFullScreen: + await this.exitFullScreen(); + break; + + // + case XCardAction.ToggleFullScreen: + await this.toggleFullScreen(); + break; } }); } diff --git a/projects/x-framework-components/src/lib/x-card/x-card.module.ts b/projects/x-framework-components/src/lib/x-card/x-card.module.ts index 54b323b..9cd5244 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.module.ts +++ b/projects/x-framework-components/src/lib/x-card/x-card.module.ts @@ -1,13 +1,12 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { XCardComponent } from './x-card.component'; +import { XIconModule } from './../x-icon/x-icon.module'; import { XBaseComponentModule } from '../modules/x-base-component.module'; @NgModule({ - declarations: [ - XCardComponent - ], - imports: [CommonModule, XBaseComponentModule], - exports: [XBaseComponentModule, XCardComponent], + declarations: [XCardComponent], + imports: [CommonModule, XIconModule, XBaseComponentModule], + exports: [XIconModule, XBaseComponentModule, XCardComponent], }) export class XCardModule {} diff --git a/projects/x-framework-components/src/lib/x-card/x-card.typings.ts b/projects/x-framework-components/src/lib/x-card/x-card.typings.ts index 13887b8..f5a17bf 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.typings.ts +++ b/projects/x-framework-components/src/lib/x-card/x-card.typings.ts @@ -29,17 +29,20 @@ import { forkJoin, Observable, Subject } from 'rxjs'; import { ViewportRuler } from '@angular/cdk/overlay'; import { XManagerService } from 'x-framework-services'; import { XBaseActionModel } from '../classes/x-base-action.model'; +import { XIconIdentifier, XIconNames } from '../x-icon/x-icon.typings'; import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens'; import { XFrameworkComponentsConfig } from '../config/x-framework-components.config'; export enum XCardAction { Refresh = 'refresh', + ExitFullScreen = 'exit_full_screen', + EnterFullScreen = 'enter_full_screen', + ToggleFullScreen = 'toggle_full_screen', } export type XCardActionIdentifier = XCardAction | string; -export interface XCardActionModel - extends XBaseActionModel {} +export interface XCardActionModel extends XBaseActionModel {} // //#region Container ... @@ -59,6 +62,13 @@ export interface IXCardContainer extends IXBaseContainer { avatarUrl: XStandardType; avatarTemplate: TemplateRef; + // + showFullScreenButton: XStandardType; + enterFullScreenButtonIcon: XStandardType; + enterFullScreenButtonColor: XStandardType; + exitFullScreenButtonIcon: XStandardType; + exitFullScreenButtonColor: XStandardType; + // imageUrl: XStandardType; imageDescription: XStandardType; @@ -97,6 +107,17 @@ export class XCardContainer readonly avatarUrl: XStandardType; readonly avatarTemplate: TemplateRef; + // + readonly showFullScreenButton: XStandardType = false; + readonly enterFullScreenButtonIcon: XStandardType = + XIconNames.fullscreen; + readonly enterFullScreenButtonColor: XStandardType = + XColorWithBrightness.Light; + readonly exitFullScreenButtonIcon: XStandardType = + XIconNames.close_fullscreen; + readonly exitFullScreenButtonColor: XStandardType = + XColorWithBrightness.Light; + // readonly imageUrl: XStandardType; readonly imageDescription: XStandardType; @@ -153,6 +174,27 @@ export abstract class XCardContainerComponent @Input() avatarTemplate: TemplateRef = this.propertyProvider.avatarTemplate; + // + @Input() + showFullScreenButton: XStandardType = + this.propertyProvider.showFullScreenButton; + + @Input() + enterFullScreenButtonIcon: XStandardType = + this.propertyProvider.enterFullScreenButtonIcon; + + @Input() + enterFullScreenButtonColor: XStandardType = + this.propertyProvider.enterFullScreenButtonColor; + + @Input() + exitFullScreenButtonIcon: XStandardType = + this.propertyProvider.exitFullScreenButtonIcon; + + @Input() + exitFullScreenButtonColor: XStandardType = + this.propertyProvider.exitFullScreenButtonColor; + // @Input() imageUrl: XStandardType = this.propertyProvider.imageUrl; @@ -187,7 +229,7 @@ export abstract class XCardContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XCardContainer + protected propertyProvider: XCardContainer, ) { super( config, @@ -196,7 +238,7 @@ export abstract class XCardContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -204,37 +246,62 @@ export abstract class XCardContainerComponent // //#region Abstract ... public extractProps( - container?: IXCardContainer + container?: IXCardContainer, ): Observable { return forkJoin({ // cssClass: this.getArrayValue( - container ? container.cssClass : this.cssClass + container ? container.cssClass : this.cssClass, ), // color: this.getValue(container ? container.color : this.color), foregroundColor: this.getValue( - container ? container.foregroundColor : this.foregroundColor + container ? container.foregroundColor : this.foregroundColor, ), // showHeader: this.getValue( - container ? container.showHeader : this.showHeader + container ? container.showHeader : this.showHeader, ), title: this.getValue(container ? container.title : this.title), subTitle: this.getValue(container ? container.subTitle : this.subTitle), avatarUrl: this.getValue( - container ? container.avatarUrl : this.avatarUrl + container ? container.avatarUrl : this.avatarUrl, ), avatarTemplate: this.getValue( - container ? container.avatarTemplate : this.avatarTemplate + container ? container.avatarTemplate : this.avatarTemplate, + ), + + // + showFullScreenButton: this.getValue( + container ? container.showFullScreenButton : this.showFullScreenButton, + ), + enterFullScreenButtonIcon: this.getValue( + container + ? container.enterFullScreenButtonIcon + : this.enterFullScreenButtonIcon, + ), + enterFullScreenButtonColor: this.getValue( + container + ? container.enterFullScreenButtonColor + : this.enterFullScreenButtonColor, + ), + exitFullScreenButtonIcon: this.getValue( + container + ? container.exitFullScreenButtonIcon + : this.exitFullScreenButtonIcon, + ), + exitFullScreenButtonColor: this.getValue( + container + ? container.exitFullScreenButtonColor + : this.exitFullScreenButtonColor, ), // imageUrl: this.getValue(container ? container.imageUrl : this.imageUrl), imageDescription: this.getValue( - container ? container.imageDescription : this.imageDescription + container ? container.imageDescription : this.imageDescription, ), // @@ -242,13 +309,13 @@ export abstract class XCardContainerComponent // showContent: this.getValue( - container ? container.showContent : this.showContent + container ? container.showContent : this.showContent, ), showActions: this.getValue( - container ? container.showActions : this.showActions + container ? container.showActions : this.showActions, ), showFooter: this.getValue( - container ? container.showFooter : this.showFooter + container ? container.showFooter : this.showFooter, ), }).pipe( map((data) => { @@ -261,7 +328,7 @@ export abstract class XCardContainerComponent ? container.actionProvider : this.actionProvider, }; - }) + }), ); } //#endregion @@ -281,12 +348,16 @@ type TXComponentCardContainer = { | 'subTitle' | 'showFooter' | 'showActions' + | 'showFullScreenButton' + | 'enterFullScreenButtonIcon' + | 'enterFullScreenButtonColor' + | 'exitFullScreenButtonIcon' + | 'exitFullScreenButtonColor' > as `card${Capitalize}`]: IXCardContainer[TKey]; }; export interface IXComponentCardContainer - extends TXComponentCardContainer, - IXBaseComponentContainer { + extends TXComponentCardContainer, IXBaseComponentContainer { isInPage: XStandardType; wrapWithCard: XStandardType; } @@ -327,6 +398,18 @@ export class XComponentCardContainer this.propertyProvider.showFooter; readonly cardShowActions: XStandardType = this.propertyProvider.showActions; + + // + readonly cardShowFullScreenButton: XStandardType = + this.propertyProvider.showFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.enterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.enterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.exitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.exitFullScreenButtonColor; //#endregion // @@ -387,6 +470,27 @@ export abstract class XComponentCardContainerComponent @Input() cardShowActions: XStandardType = this.propertyProvider.cardShowActions; + + // + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -400,7 +504,7 @@ export abstract class XComponentCardContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XComponentCardContainer + protected propertyProvider: XComponentCardContainer, ) { super( config, @@ -409,7 +513,7 @@ export abstract class XComponentCardContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -417,34 +521,59 @@ export abstract class XComponentCardContainerComponent // //#region Abstract ... public extractProps( - container?: IXComponentCardContainer + container?: IXComponentCardContainer, ): Observable { return forkJoin({ // isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardCssClass: this.getValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), }).pipe( map((data) => { @@ -457,7 +586,7 @@ export abstract class XComponentCardContainerComponent ? container.cardActionProvider : this.cardActionProvider, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.component.html b/projects/x-framework-components/src/lib/x-chart/x-chart.component.html index ce82a43..89ab268 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.component.html +++ b/projects/x-framework-components/src/lib/x-chart/x-chart.component.html @@ -14,7 +14,18 @@ [title]="getResourceValue(cardTitle) | async" [showFooter]="getValue(cardShowFooter) | async" [showActions]="getValue(cardShowActions) | async" + [enterFullScreenButtonIcon]=" + getValue(cardEnterFullScreenButtonIcon) | async + " + [enterFullScreenButtonColor]=" + getValue(cardEnterFullScreenButtonColor) | async + " + [exitFullScreenButtonColor]=" + getValue(cardExitFullScreenButtonColor) | async + " [foregroundColor]="getValue(cardForegroundColor) | async" + [showFullScreenButton]="getValue(cardShowFullScreenButton) | async" + [exitFullScreenButtonIcon]="getValue(cardExitFullScreenButtonIcon) | async" > diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts b/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts index caacea9..ab184e5 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts +++ b/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts @@ -10,18 +10,25 @@ import { XMimeType, downloadFile, generateUuid, + getXColorValue, downloadFileByUrl, isNullOrUndefined, isNullOrEmptyString, downloadArrayBufferedFile, + XColorWithBrightness, } from 'x-framework-core'; import { isChartType, XChartAction, XChartOptions, XChartSeriesType, + XChartEventOpts, XChartActionBarItem, + XChartDrilldownEvent, XChartContainerComponent, + XChartStoryboardBeatInfo, + isChartTextAlign, + XChartTextAlign, } from './x-chart.typings'; import { Subscription } from 'rxjs'; import ApexCharts from 'apexcharts'; @@ -31,6 +38,7 @@ import { XActionBarActionFiredModel, } from '../x-action-bar/x-action-bar.typings'; import { XIconNames } from '../x-icon/x-icon.typings'; +import { XCardAction } from '../x-card/x-card.typings'; @Component({ selector: 'x-chart', @@ -103,35 +111,31 @@ export class XChartComponent extends XChartContainerComponent { super.onChange(changeKeys); // - // Auto Update ... - const isAutoUpdateChanged = changeKeys.includes( - nameof('autoUpdate'), - ); - if (isAutoUpdateChanged) { - // - if (isNullOrUndefined(this.autoUpdate)) { - this.autoUpdate = this.propertyProvider.autoUpdate; - } - } + let isChanged = false; // // Action Provider Changed ... - const isActionProviderChanged = changeKeys.includes( - nameof('actionProvider'), - ); - if (isActionProviderChanged) { + isChanged = changeKeys.includes(nameof('actionProvider')); + if (isChanged) { + // + if (isNullOrUndefined(this.actionProvider)) { + this.actionProvider = this.propertyProvider.actionProvider; + } + + // this.registerActionProvider(); } // // Available Action Bar Items Changed ... - const isAvailableActionBarItemsChanged = changeKeys.includes( - nameof('availableActionBarItems') + isChanged = changeKeys.includes( + nameof('availableActionBarItems'), ); - if (isAvailableActionBarItemsChanged) { + if (isChanged) { // if (isNullOrUndefined(this.availableActionBarItems)) { - this.availableActionBarItems = this.propertyProvider.availableActionBarItems; + this.availableActionBarItems = + this.propertyProvider.availableActionBarItems; } // @@ -140,16 +144,11 @@ export class XChartComponent extends XChartContainerComponent { // // Zoom Step ... - const isZoomStepChanged = changeKeys.includes( - nameof('zoomStep') - ); - if (isZoomStepChanged) { + isChanged = changeKeys.includes(nameof('zoomStep')); + if (isChanged) { // let zoomStep = await this.getValueAsync(this.zoomStep); - if (isNullOrUndefined(zoomStep) || - zoomStep < 0 || - zoomStep > 1 - ) { + if (isNullOrUndefined(zoomStep) || zoomStep < 0 || zoomStep > 1) { this.zoomStep = 0.125; } @@ -158,66 +157,177 @@ export class XChartComponent extends XChartContainerComponent { } // - // Check Auto Update ... - var autoUpdate = await this.getValueAsync(this.autoUpdate); - if ( - autoUpdate && - !isNullOrUndefined(this.chartInstance) && - !isNullOrUndefined(this.chartContainer) && - !isNullOrUndefined(this.chartContainer.nativeElement) - ) { + // Chart Title ... + isChanged = changeKeys.includes(nameof('title')); + if (isChanged) { // - // Options Changed ... - const isOptionsChanged = changeKeys.includes( - nameof('options'), - ); - if (isOptionsChanged) { - // - if (isNullOrUndefined(this.options)) { - this.options = this.propertyProvider.options; - } - - // - await this.handleChartUpdate(); + if (isNullOrUndefined(this.title)) { + this.title = this.propertyProvider.title; } // - // Chart Type ... - const isTypeChanged = changeKeys.includes( - nameof('type'), - ); - if (isTypeChanged) { - // - if (isNullOrUndefined(this.type)) { - this.type = this.propertyProvider.type; - } + this.handleChartUpdate(); + } - // - var type = await this.getValueAsync(this.type); - if (!isChartType(type)) { - // - type = await this.getValueAsync(this.propertyProvider.type); - this.type = type; - } - - // - await this.handleChartUpdate(); + // + // Chart Title Align ... + isChanged = changeKeys.includes(nameof('titleAlign')); + if (isChanged) { + // + const align = await this.getValueAsync(this.titleAlign); + if ( + isNullOrUndefined(this.titleAlign) || + isNullOrEmptyString(align) || + !isChartTextAlign(align) + ) { + this.titleAlign = this.propertyProvider.titleAlign; } // - // Series Changed ... - const isSeriesChanged = changeKeys.includes( - nameof('series'), - ); - if (isSeriesChanged) { - // - if (isNullOrUndefined(this.series)) { - this.series = this.propertyProvider.series; - } + this.handleChartUpdate(); + } - // - await this.handleChartUpdate(); + // + // Chart SubTitle ... + isChanged = changeKeys.includes(nameof('subTitle')); + if (isChanged) { + // + if (isNullOrUndefined(this.subTitle)) { + this.subTitle = this.propertyProvider.subTitle; } + + // + this.handleChartUpdate(); + } + + // + // Chart Sub Title Align ... + isChanged = changeKeys.includes(nameof('subTitleAlign')); + if (isChanged) { + // + const align = await this.getValueAsync(this.subTitleAlign); + if ( + isNullOrUndefined(this.subTitleAlign) || + isNullOrEmptyString(align) || + !isChartTextAlign(align) + ) { + this.subTitleAlign = this.propertyProvider.subTitleAlign; + } + + // + this.handleChartUpdate(); + } + + // + // Foreground Color Changed ... + isChanged = changeKeys.includes(nameof('foregroundColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.foregroundColor)) { + this.foregroundColor = this.propertyProvider.foregroundColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Background Color Changed ... + isChanged = changeKeys.includes(nameof('backgroundColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.backgroundColor)) { + this.backgroundColor = this.propertyProvider.backgroundColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Grid Color Changed ... + isChanged = changeKeys.includes(nameof('gridColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.gridColor)) { + this.gridColor = this.propertyProvider.gridColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Chart Title Color ... + isChanged = changeKeys.includes(nameof('titleColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.titleColor)) { + this.titleColor = this.propertyProvider.titleColor; + } + + // + this.handleChartUpdate(); + } + + // + // Chart SubTitle Color ... + isChanged = changeKeys.includes(nameof('subTitleColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.subTitleColor)) { + this.subTitleColor = this.propertyProvider.subTitleColor; + } + + // + this.handleChartUpdate(); + } + + // + // Options Changed ... + isChanged = changeKeys.includes(nameof('options')); + if (isChanged) { + // + if (isNullOrUndefined(this.options)) { + this.options = this.propertyProvider.options; + } + + // + await this.handleChartUpdate(); + } + + // + // Chart Type ... + isChanged = changeKeys.includes(nameof('type')); + if (isChanged) { + // + if (isNullOrUndefined(this.type)) { + this.type = this.propertyProvider.type; + } + + // + var type = await this.getValueAsync(this.type); + if (!isChartType(type)) { + // + type = await this.getValueAsync(this.propertyProvider.type); + this.type = type; + } + + // + await this.handleChartUpdate(); + } + + // + // Series Changed ... + isChanged = changeKeys.includes(nameof('series')); + if (isChanged) { + // + if (isNullOrUndefined(this.series)) { + this.series = this.propertyProvider.series; + } + + // + await this.handleChartUpdate(); } // @@ -426,7 +536,10 @@ export class XChartComponent extends XChartContainerComponent { const rangeIn = maxX - minX; // - await this.chartInstance.zoomX(minX + rangeIn * zoomStep, maxX - rangeIn * zoomStep); + await this.chartInstance.zoomX( + minX + rangeIn * zoomStep, + maxX - rangeIn * zoomStep, + ); } async handleZoomOut() { @@ -445,7 +558,10 @@ export class XChartComponent extends XChartContainerComponent { const rangeIn = maxX - minX; // - await this.chartInstance.zoomX(minX - rangeIn * zoomStep, maxX + rangeIn * zoomStep); + await this.chartInstance.zoomX( + minX - rangeIn * zoomStep, + maxX + rangeIn * zoomStep, + ); } async handlePan() { @@ -458,13 +574,13 @@ export class XChartComponent extends XChartContainerComponent { await this.chartInstance.updateOptions({ chart: { zoom: { - enabled: false + enabled: false, }, selection: { type: 'x', enabled: true, }, - } + }, }); } @@ -494,7 +610,7 @@ export class XChartComponent extends XChartContainerComponent { const printWindow = window.open('', '_blank'); if (printWindow) { // - // Write Data Uri on a Page for Printing ... + // Write Data Uri on a Page for Printing ... printWindow.document.write(` @@ -542,56 +658,57 @@ export class XChartComponent extends XChartContainerComponent { printWindow.document.close(); } } - } catch (error) { - } + } catch (error) {} } async handleToggleFullscreen() { // - if (isNullOrUndefined(this.chartInstance) || - isNullOrUndefined(this.chartContainer) || - isNullOrUndefined(this.chartContainer.nativeElement) - ) { - return; - } + this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen }); - // - const chartWrapper = - this.chartContainer.nativeElement; - const doc = document as any; + // if ( + // isNullOrUndefined(this.chartInstance) || + // isNullOrUndefined(this.chartContainer) || + // isNullOrUndefined(this.chartContainer.nativeElement) + // ) { + // return; + // } - // - // Check if the chart wrapper is currently in fullscreen mode - const isFullscreen = - doc.fullscreenElement === chartWrapper || - doc.msFullscreenElement === chartWrapper || - doc.mozFullScreenElement === chartWrapper || - doc.webkitFullscreenElement === chartWrapper; - if (!isFullscreen) { - // - // Enter Fullscreen - if (chartWrapper.requestFullscreen) { - await chartWrapper.requestFullscreen(); - } else if (chartWrapper.webkitRequestFullscreen) { - await chartWrapper.webkitRequestFullscreen(); - } else if (chartWrapper.mozRequestFullScreen) { - await chartWrapper.mozRequestFullScreen(); - } else if (chartWrapper.msRequestFullscreen) { - await chartWrapper.msRequestFullscreen(); - } - } else { - // - // Exit Fullscreen - if (doc.exitFullscreen) { - await doc.exitFullscreen(); - } else if (doc.webkitExitFullscreen) { - await doc.webkitExitFullscreen(); - } else if (doc.mozCancelFullScreen) { - await doc.mozCancelFullScreen(); - } else if (doc.msExitFullscreen) { - await doc.msExitFullscreen(); - } - } + // // + // const chartWrapper = this.chartContainer.nativeElement; + // const doc = document as any; + + // // + // // Check if the chart wrapper is currently in fullscreen mode + // const isFullscreen = + // doc.fullscreenElement === chartWrapper || + // doc.msFullscreenElement === chartWrapper || + // doc.mozFullScreenElement === chartWrapper || + // doc.webkitFullscreenElement === chartWrapper; + // if (!isFullscreen) { + // // + // // Enter Fullscreen + // if (chartWrapper.requestFullscreen) { + // await chartWrapper.requestFullscreen(); + // } else if (chartWrapper.webkitRequestFullscreen) { + // await chartWrapper.webkitRequestFullscreen(); + // } else if (chartWrapper.mozRequestFullScreen) { + // await chartWrapper.mozRequestFullScreen(); + // } else if (chartWrapper.msRequestFullscreen) { + // await chartWrapper.msRequestFullscreen(); + // } + // } else { + // // + // // Exit Fullscreen + // if (doc.exitFullscreen) { + // await doc.exitFullscreen(); + // } else if (doc.webkitExitFullscreen) { + // await doc.webkitExitFullscreen(); + // } else if (doc.mozCancelFullScreen) { + // await doc.mozCancelFullScreen(); + // } else if (doc.msExitFullscreen) { + // await doc.msExitFullscreen(); + // } + // } } //#endregion @@ -608,60 +725,659 @@ export class XChartComponent extends XChartContainerComponent { const type = await this.getValueAsync(this.type); const chartId = await this.getValueAsync(this.uuid); const series = await this.getValueAsync(this.series); - const options = await this.getValueAsync(this.options); + const cOptions = await this.getValueAsync(this.options); // - const computedStyle = getComputedStyle(document.documentElement); - const primaryColor = - computedStyle.getPropertyValue('--x-color-primary').trim() || '#008ffb'; - const textColor = - computedStyle.getPropertyValue('--x-color-dark-contrast').trim() || - '#373d3f'; - const gridColor = - computedStyle.getPropertyValue('--x-color-light-shade').trim() || - '#e0e0e0'; + const title = await this.getResourceValueAsync(this.title); + const titleAlignProp = await this.getValueAsync(this.titleAlign); + let titleAlign: 'left' | 'center' | 'right' = 'center'; + + // + const subTitle = await this.getResourceValueAsync(this.subTitle); + const subTitleAlignProp = await this.getValueAsync(this.subTitleAlign); + let subTitleAlign: 'left' | 'center' | 'right' = 'center'; + + // + const gridColorName = await this.getValueAsync(this.gridColor); + const gridColorValue = getXColorValue(gridColorName); + + // + const titleColorName = await this.getValueAsync(this.titleColor); + const titleColorValue = getXColorValue(titleColorName); + + // + const subTitleColorName = await this.getValueAsync(this.subTitleColor); + const subTitleColorValue = getXColorValue(subTitleColorName); + + // + const foregroundColorName = await this.getValueAsync(this.foregroundColor); + const foregroundColorValue = getXColorValue(foregroundColorName); + + // + const backgroundColorName = await this.getValueAsync(this.backgroundColor); + const backgroundColorValue = getXColorValue(backgroundColorName); + + // + const primaryColorValue = getXColorValue(XColorWithBrightness.Primary); + + // + // Normalize Directional Properties .... + if (this.managerService.uiDirection == 'ltr') { + // + titleAlign = + titleAlignProp == XChartTextAlign.Start + ? 'left' + : titleAlignProp == XChartTextAlign.End + ? 'right' + : 'center'; + + // + subTitleAlign = + subTitleAlignProp == XChartTextAlign.Start + ? 'left' + : subTitleAlignProp == XChartTextAlign.End + ? 'right' + : 'center'; + } else if (this.managerService.uiDirection == 'rtl') { + // + titleAlign = + titleAlignProp == XChartTextAlign.Start + ? 'right' + : titleAlignProp == XChartTextAlign.End + ? 'left' + : 'center'; + + // + subTitleAlign = + subTitleAlignProp == XChartTextAlign.Start + ? 'right' + : subTitleAlignProp == XChartTextAlign.End + ? 'left' + : 'center'; + } // this.CHART_OPTIONS = { - ...options, - series: series || options.series, + ...cOptions, + series: series || cOptions.series, + title: { + ...cOptions.title, + text: title, + align: titleAlign, + style: { + ...cOptions.title?.style, + color: titleColorValue, + }, + }, + subtitle: { + ...cOptions.subtitle, + text: subTitle, + align: subTitleAlign, + style: { + ...cOptions.subtitle?.style, + color: subTitleColorValue, + }, + }, chart: { - ...options.chart, + ...cOptions.chart, id: chartId, type: type as any, - foreColor: textColor, + foreColor: foregroundColorValue, + background: backgroundColorValue, toolbar: { show: false, autoSelected: 'pan', }, events: { - ...options.chart?.events, - mounted: (chartContext, config) => { - this.chartRendered.emit(); - options.chart?.events?.mounted?.(chartContext, config); + ...cOptions.chart?.events, + // + //#region Attach Events ... + // + animationEnd: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.animationEnd.emit(options); + } + + // + cOptions.chart?.events?.animationEnd?.(chart, options); }, - dataPointSelection: (event, chartContext, config) => { - this.dataPointSelected.emit({ event, chartContext, config }); - options.chart?.events?.dataPointSelection?.( - event, - chartContext, - config, - ); + + // + beforeMount: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeMount.emit(options); + } + + // + cOptions.chart?.events?.beforeMount?.(chart, options); }, - zoomed: (chartContext, { xaxis, yaxis }) => { - this.zoomed.emit({ xaxis, yaxis }); - options.chart?.events?.zoomed?.(chartContext, { xaxis, yaxis }); + + // + mounted: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.mounted.emit(options); + } + + // + cOptions.chart?.events?.mounted?.(chart, options); }, + + // + updated: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.updated.emit(options); + } + + // + cOptions.chart?.events?.updated?.(chart, options); + }, + + // + mouseMove: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.mouseMove.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.mouseMove?.(e, chart, options); + }, + + // + mouseLeave: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.mouseLeave.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.mouseLeave?.(e, chart, options); + }, + + // + click: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.click.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.click?.(e, chart, options); + }, + + // + xAxisLabelClick: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.xAxisLabelClick.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options); + }, + + // + legendClick: ( + chart: ApexCharts, + seriesIndex?: number, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.legendClick.emit({ + seriesIndex: seriesIndex, + options: options, + }); + } + + // + cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options); + }, + + // + markerClick: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.markerClick.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.markerClick?.(e, chart, options); + }, + + // + selection: ( + chart: ApexCharts, + options?: { + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.selection.emit(options); + } + + // + cOptions.chart?.events?.selection?.(chart, options); + }, + + // + dataPointSelection: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointSelection.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointSelection?.(e, chart, options); + }, + + // + dataPointMouseEnter: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointMouseEnter.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options); + }, + + // + dataPointMouseLeave: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointMouseLeave.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options); + }, + + // + beforeZoom: ( + chart: ApexCharts, + options?: { xaxis: { min: number; max: number } }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeZoom.emit(options); + } + + // + cOptions.chart?.events?.beforeZoom?.(chart, options); + }, + + // + beforeResetZoom: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeResetZoom.emit(options); + } + + // + cOptions.chart?.events?.beforeResetZoom?.(chart, options); + }, + + // + zoomed: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.zoomed.emit(options); + } + + // + cOptions.chart?.events?.zoomed?.(chart, options); + }, + + // + scrolled: ( + chart: ApexCharts, + options?: { xaxis: { min: number; max: number } }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.scrolled.emit(options); + } + + // + cOptions.chart?.events?.scrolled?.(chart, options); + }, + + // + brushScrolled: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.brushScrolled.emit(options); + } + + // + cOptions.chart?.events?.brushScrolled?.(chart, options); + }, + + // + crossFilter: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + sourceChartID?: string; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.crossFilter.emit(options); + } + + // + cOptions.chart?.events?.crossFilter?.(chart, options); + }, + + // + filterChange: ( + chart: ApexCharts, + options?: { + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.filterChange.emit(options); + } + + // + cOptions.chart?.events?.filterChange?.(chart, options); + }, + + // + annotationDragged: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationDragged.emit(options); + } + + // + cOptions.chart?.events?.annotationDragged?.(chart, options); + }, + + // + annotationEdited: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationEdited.emit(options); + } + + // + cOptions.chart?.events?.annotationEdited?.(chart, options); + }, + + // + annotationCreated: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationCreated.emit(options); + } + + // + cOptions.chart?.events?.annotationCreated?.(chart, options); + }, + + // + annotationStyled: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationStyled.emit(options); + } + + // + cOptions.chart?.events?.annotationStyled?.(chart, options); + }, + + // + annotationDeleted: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationDeleted.emit(options); + } + + // + cOptions.chart?.events?.annotationDeleted?.(chart, options); + }, + + // + measured: ( + chart: ApexCharts, + options?: { + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.measured.emit(options); + } + + // + cOptions.chart?.events?.measured?.(chart, options); + }, + + // + beatChange: ( + chart: ApexCharts, + options?: XChartStoryboardBeatInfo, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.beatChange.emit(options); + } + + // + cOptions.chart?.events?.beatChange?.(chart, options); + }, + + // + keyDown: ( + e: KeyboardEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.keyDown.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.keyDown?.(e, chart, options); + }, + + // + keyUp: ( + e: KeyboardEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.keyUp.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.keyUp?.(e, chart, options); + }, + + // + drillDownStart: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownStart.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownStart?.(info, chart, options); + }, + + // + drillDownEnd: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownEnd.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownEnd?.(info, chart, options); + }, + + // + drillUp: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillUp.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillUp?.(info, chart, options); + }, + + // + drillDownError: ( + info: { id: string | number | null; error: any }, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownError.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownError?.(info, chart, options); + }, + //#endregion }, }, theme: { - ...options.theme, - palette: options.theme?.palette || 'palette1', + ...cOptions.theme, + palette: cOptions.theme?.palette || 'palette1', }, - colors: options.colors || [primaryColor], + colors: cOptions.colors || [primaryColorValue], grid: { - ...options.grid, - borderColor: gridColor, + ...cOptions.grid, + borderColor: gridColorValue, + }, + dataLabels: { + ...cOptions.dataLabels, }, }; diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts b/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts index 3965721..6d8bd07 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts +++ b/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts @@ -42,6 +42,7 @@ import { XBaseActionModel } from '../classes/x-base-action.model'; import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens'; import { XPopoverPresentOptions } from '../dialogs/x-popover/x-popover.typings'; import { XFrameworkComponentsConfig } from '../config/x-framework-components.config'; +import { XIconIdentifier } from '../x-icon/x-icon.typings'; // //#region Chart ... @@ -370,71 +371,71 @@ export type XChartAxisChartSeries = { zIndex?: number; parsing?: XChartParsing; data: - | (number | null)[] - | { - /** - * A category label, a timestamp, or a `Date`. On a `datetime` axis all - * three keep millisecond resolution. - */ - x: string | number | Date; - /** - * A plain value for most charts. For `candlestick`/`boxPlot`, the - * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an - * object carrying the precomputed density profile (`[value, weight]` pairs) - * plus the raw observations rendered as jitter. For a `scatter` strip plot - * (`plotOptions.scatter.jitter`), the array of observations in this category. - */ - y: - | number - | null - | number[] - | { density: [number, number][]; points?: number[] }; - /** - * Optional raw observations for a `boxPlot` data point, rendered as jitter - * dots when `plotOptions.boxPlot.points.show` is enabled. - */ - points?: number[]; - fill?: XChartFill; - fillColor?: string; - strokeColor?: string; - meta?: unknown; - /** - * A second metric that drives this point's COLOUR, independent of `y` - * which drives its size (`treemap`). See - * `plotOptions.treemap.colorScale.colorValue` to read a different key. - */ - colorValue?: number; - /** - * Nested hierarchy: this point is a branch containing these children, - * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and - * takes the sum of its children instead. - */ - children?: XChartHierarchyNode[]; - /** - * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this - * point drills into that level. Requires the Drilldown feature. - */ - drilldown?: string | number; - goals?: { - name?: string; - value: number; - strokeHeight?: number; - strokeWidth?: number; - strokeColor?: string; - strokeDashArray?: number; - strokeLineCap?: 'butt' | 'square' | 'round'; - }[]; - barHeightOffset?: number; - columnWidthOffset?: number; - }[] - | [number, number | null][] - | [number, (number | null)[]][] - | number[][] - // A `children` hierarchy for the partition charts, where a branch carries no - // value of its own. Listed before the catch-all so authors get completion on - // the node shape instead of falling through to `Record`. - | XChartHierarchyNode[] - | Record[]; + | (number | null)[] + | { + /** + * A category label, a timestamp, or a `Date`. On a `datetime` axis all + * three keep millisecond resolution. + */ + x: string | number | Date; + /** + * A plain value for most charts. For `candlestick`/`boxPlot`, the + * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an + * object carrying the precomputed density profile (`[value, weight]` pairs) + * plus the raw observations rendered as jitter. For a `scatter` strip plot + * (`plotOptions.scatter.jitter`), the array of observations in this category. + */ + y: + | number + | null + | number[] + | { density: [number, number][]; points?: number[] }; + /** + * Optional raw observations for a `boxPlot` data point, rendered as jitter + * dots when `plotOptions.boxPlot.points.show` is enabled. + */ + points?: number[]; + fill?: XChartFill; + fillColor?: string; + strokeColor?: string; + meta?: unknown; + /** + * A second metric that drives this point's COLOUR, independent of `y` + * which drives its size (`treemap`). See + * `plotOptions.treemap.colorScale.colorValue` to read a different key. + */ + colorValue?: number; + /** + * Nested hierarchy: this point is a branch containing these children, + * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and + * takes the sum of its children instead. + */ + children?: XChartHierarchyNode[]; + /** + * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this + * point drills into that level. Requires the Drilldown feature. + */ + drilldown?: string | number; + goals?: { + name?: string; + value: number; + strokeHeight?: number; + strokeWidth?: number; + strokeColor?: string; + strokeDashArray?: number; + strokeLineCap?: 'butt' | 'square' | 'round'; + }[]; + barHeightOffset?: number; + columnWidthOffset?: number; + }[] + | [number, number | null][] + | [number, (number | null)[]][] + | number[][] + // A `children` hierarchy for the partition charts, where a branch carries no + // value of its own. Listed before the catch-all so authors get completion on + // the node shape instead of falling through to `Record`. + | XChartHierarchyNode[] + | Record[]; }[]; export type XChartNonAxisChartSeries = number[] | XChartAxisChartSeries; @@ -931,11 +932,11 @@ export type XChartPlotOptions = { * property, or an accessor to compute one. */ colorValue?: - | string - | (( - datum: any, - opts: { seriesIndex: number; dataPointIndex: number; w: any }, - ) => number); + | string + | (( + datum: any, + opts: { seriesIndex: number; dataPointIndex: number; w: any }, + ) => number); /** * Continuous interpolation between colour stops, for the metric above. * Active as soon as any datum carries a colour metric; `enabled: false` @@ -1068,13 +1069,13 @@ export type XChartPlotOptions = { * 'custom': positions come from `positions`. */ layout?: - | 'grouped' - | 'packed' - | 'columns' - | 'grid' - | 'scatter' - | 'arc' - | 'custom'; + | 'grouped' + | 'packed' + | 'columns' + | 'grid' + | 'scatter' + | 'arc' + | 'custom'; /** * `layout: 'custom'` only. The layout provider: either a function returning * plot-pixel positions, or the name of one registered with @@ -2102,19 +2103,19 @@ export interface XChartDrilldown { /** Inline child levels referenced by data-point `drilldown` ids. */ series?: XChartDrilldownSeries[]; breadcrumb?: - | false - | { - show?: boolean; - position?: 'top-left' | 'top-right'; - separator?: string; - rootLabel?: string; - offsetX?: number; - offsetY?: number; - formatter?( - label: string, - opts: { index: number; depth: number }, - ): string; - }; + | false + | { + show?: boolean; + position?: 'top-left' | 'top-right'; + separator?: string; + rootLabel?: string; + offsetX?: number; + offsetY?: number; + formatter?( + label: string, + opts: { index: number; depth: number }, + ): string; + }; animation?: { enabled?: boolean; /** @@ -2163,11 +2164,11 @@ export interface XChartDrilldown { * name, so the default ships no user-visible English. */ loading?: - | false - | { - show?: boolean; - text?: string; - }; + | false + | { + show?: boolean; + text?: string; + }; /** * Cache levels resolved by `onDrillDown`, keyed by id, so drilling back down * a branch does not re-fetch. Default true. Clear it with the drilldown @@ -2273,12 +2274,12 @@ export type XChartStates = { export type XChartStroke = { show?: boolean; curve?: - | 'smooth' - | 'straight' - | 'stepline' - | 'linestep' - | 'monotoneCubic' - | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]; + | 'smooth' + | 'straight' + | 'stepline' + | 'linestep' + | 'monotoneCubic' + | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]; lineCap?: 'butt' | 'square' | 'round'; colors?: string[]; width?: number | number[]; @@ -2329,11 +2330,11 @@ export type XChartTheme = { }; accessibility?: { colorBlindMode?: - | 'deuteranopia' - | 'protanopia' - | 'tritanopia' - | 'highContrast' - | ''; + | 'deuteranopia' + | 'protanopia' + | 'tritanopia' + | 'highContrast' + | ''; }; }; @@ -2362,14 +2363,14 @@ export type XChartTooltip = { inverseOrder?: boolean; arrow?: boolean; custom?: - | (( - opts: XChartTooltipCustomOpts, - ) => string | number | Element | { nodeName: string }) - | Array< - ( - opts: XChartTooltipCustomOpts, - ) => string | number | Element | { nodeName: string } - >; + | (( + opts: XChartTooltipCustomOpts, + ) => string | number | Element | { nodeName: string }) + | Array< + ( + opts: XChartTooltipCustomOpts, + ) => string | number | Element | { nodeName: string } + >; fillSeriesColor?: boolean; theme?: 'light' | 'dark'; cssClass?: string; @@ -2446,30 +2447,30 @@ export type XChart = { width?: string | number; height?: string | number; type?: - | 'line' - | 'area' - | 'bar' - | 'pie' - | 'donut' - | 'radialBar' - | 'scatter' - | 'bubble' - | 'heatmap' - | 'candlestick' - | 'boxPlot' - | 'violin' - | 'histogram' - | 'radar' - | 'polarArea' - | 'rangeBar' - | 'rangeArea' - | 'treemap' - | 'unit' - | 'waffle' - | 'sunburst' - | 'funnel' - | 'pyramid' - | 'gauge'; + | 'line' + | 'area' + | 'bar' + | 'pie' + | 'donut' + | 'radialBar' + | 'scatter' + | 'bubble' + | 'heatmap' + | 'candlestick' + | 'boxPlot' + | 'violin' + | 'histogram' + | 'radar' + | 'polarArea' + | 'rangeBar' + | 'rangeArea' + | 'treemap' + | 'unit' + | 'waffle' + | 'sunburst' + | 'funnel' + | 'pyramid' + | 'gauge'; /** * Internal — populated when `type` is a first-class alias (`'funnel'`, * `'pyramid'`, `'gauge'`, `'waffle'`, `'histogram'`). The original requested @@ -2693,19 +2694,19 @@ export type XChart = { ): void; /** Fired before a drill-down transition begins. Requires the Drilldown feature. */ drillDownStart?( - info: ApexCharts.ApexDrilldownEvent, + info: XChartDrilldownEvent, chart?: ApexCharts, options?: XChartEventOpts, ): void; /** Fired after a drill-down transition completes. Requires the Drilldown feature. */ drillDownEnd?( - info: ApexCharts.ApexDrilldownEvent, + info: XChartDrilldownEvent, chart?: ApexCharts, options?: XChartEventOpts, ): void; /** Fired after navigating back up a drilldown level. Requires the Drilldown feature. */ drillUp?( - info: ApexCharts.ApexDrilldownEvent, + info: XChartDrilldownEvent, chart?: ApexCharts, options?: XChartEventOpts, ): void; @@ -2752,9 +2753,9 @@ export type XChart = { dimension?: (row: any) => any; /** FILTER mode: reduction over a bucket's rows. @default 'count' */ reduce?: - | 'count' - | { sum?: string; avg?: string; min?: string; max?: string } - | ((rows: any[]) => number); + | 'count' + | { sum?: string; avg?: string; min?: string; max?: string } + | ((rows: any[]) => number); /** * FILTER mode: bucket kind. Else inferred: `bins` present => 'range', a * heatmap chart => 'matrix' (2D), otherwise 'category'. @@ -2872,21 +2873,21 @@ export type XChart = { | 'yline' | 'measure' | { - id?: string; - label?: string; - icon?: string; - onClick?: ( - chart: ApexCharts, - context: { - x: any; - y: any; - seriesIndex: number | null; - dataPointIndex: number | null; - clientX: number; - clientY: number; - }, - ) => void; - } + id?: string; + label?: string; + icon?: string; + onClick?: ( + chart: ApexCharts, + context: { + x: any; + y: any; + seriesIndex: number | null; + dataPointIndex: number | null; + clientX: number; + clientY: number; + }, + ) => void; + } >; /** Override the built-in item labels. */ labels?: { @@ -3225,7 +3226,7 @@ export enum XChartAction { export type XChartActionIdentifier = XChartAction | string; -export interface XChartActionModel extends XBaseActionModel { } +export interface XChartActionModel extends XBaseActionModel {} export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries; @@ -3262,7 +3263,7 @@ export enum XChartActionBarItem { export type XChartActionBarItemIdentifier = XChartActionBarItem | string; -export function isChartActionBar(value: string) { +export function isChartActionBar(value: XChartActionBarItemIdentifier) { return isValueInEnum(value, Object.assign({}, XChartActionBarItem)); } @@ -3286,6 +3287,28 @@ export interface XChartAvailableActionBarItem { popoverPresentOptions?: XPopoverPresentOptions; } +export interface XChartMouseEvent { + e: MouseEvent; + options?: XChartEventOpts; +} + +export interface XChartKeyboardEvent { + e: KeyboardEvent; + options?: XChartEventOpts; +} + +export enum XChartTextAlign { + Start = 'start', + Center = 'center', + End = 'end', +} + +export type XChartTextAlignIdentifier = XChartTextAlign | string; + +export function isChartTextAlign(value: XChartTextAlignIdentifier) { + return isValueInEnum(value, Object.assign({}, XChartTextAlign)); +} + type TXChartContainer = IXComponentCardContainer & IXComponentActionBarContainer; export interface IXChartContainer extends TXChartContainer { @@ -3296,12 +3319,27 @@ export interface IXChartContainer extends TXChartContainer { // // Chart Props ... - autoUpdate: XStandardType; + zoomStep: XStandardType; options: XStandardType; series: XStandardType; - zoomStep: XStandardType; type: XStandardType; + // + title: XStandardType; + titleAlign: XStandardType; + + // + subTitle: XStandardType; + subTitleAlign: XStandardType; + + // + // Chart Colors ... + gridColor: XStandardType; + titleColor: XStandardType; + subTitleColor: XStandardType; + foregroundColor: XStandardType; + backgroundColor: XStandardType; + // //#region ActionBar ... defaultActionBarItemColor: XStandardType; @@ -3311,10 +3349,111 @@ export interface IXChartContainer extends TXChartContainer { //#endregion // - // Events ... - chartRendered: EventEmitter; - dataPointSelected: EventEmitter; - zoomed: EventEmitter; + //#region Events ... + click: EventEmitter; + keyUp: EventEmitter; + zoomed: EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>; + keyDown: EventEmitter; + drillUp: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + mounted: EventEmitter; + updated: EventEmitter; + measured: EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>; + scrolled: EventEmitter<{ xaxis: { min: number; max: number } }>; + mouseMove: EventEmitter; + selection: EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>; + beatChange: EventEmitter; + mouseLeave: EventEmitter; + beforeZoom: EventEmitter<{ xaxis: { min: number; max: number } }>; + legendClick: EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>; + markerClick: EventEmitter; + crossFilter: EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>; + beforeMount: EventEmitter; + drillDownEnd: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + animationEnd: EventEmitter; + filterChange: EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>; + brushScrolled: EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>; + drillDownStart: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + drillDownError: EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>; + xAxisLabelClick: EventEmitter; + beforeResetZoom: EventEmitter; + annotationEdited: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>; + annotationStyled: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>; + annotationDragged: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>; + annotationCreated: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>; + annotationDeleted: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>; + dataPointSelection: EventEmitter; + dataPointMouseEnter: EventEmitter; + dataPointMouseLeave: EventEmitter; + //#endregion } @Injectable({ @@ -3322,18 +3461,41 @@ export interface IXChartContainer extends TXChartContainer { }) export class XChartContainer extends XBaseContainer - implements Readonly { + implements Readonly +{ // - readonly actionProvider = new Subject(); readonly cssClass: XStandardType>; + readonly actionProvider = new Subject(); // + // Chart Props ... readonly options: XStandardType; readonly zoomStep: XStandardType = 0.125; readonly series: XStandardType; - readonly autoUpdate: XStandardType = true; readonly type: XStandardType = XChartType.Line; + // + readonly title: XStandardType; + readonly titleAlign: XStandardType = + XChartTextAlign.Center; + + readonly subTitle: XStandardType; + readonly subTitleAlign: XStandardType = + XChartTextAlign.Center; + + // + // Chart Colors ... + readonly gridColor: XStandardType = + XColorWithBrightness.Medium; + readonly titleColor: XStandardType = + XColorWithBrightness.Dark; + readonly subTitleColor: XStandardType = + XColorWithBrightness.Dark; + readonly foregroundColor: XStandardType = + XColorWithBrightness.Dark; + readonly backgroundColor: XStandardType = + XColorWithBrightness.Light; + // readonly availableActionBarItems: XStandardType< XOneOrManyType @@ -3342,9 +3504,115 @@ export class XChartContainer XColorWithBrightness.Dark; // - readonly zoomed = new EventEmitter(); - readonly chartRendered = new EventEmitter(); - readonly dataPointSelected = new EventEmitter(); + //#region Events ... + readonly click = new EventEmitter(); + readonly keyUp = new EventEmitter(); + readonly zoomed = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + readonly keyDown = new EventEmitter(); + readonly drillUp = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly mounted = new EventEmitter(); + readonly updated = new EventEmitter(); + readonly measured = new EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>(); + readonly scrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + readonly mouseMove = new EventEmitter(); + readonly selection = new EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>(); + readonly beatChange = new EventEmitter(); + readonly mouseLeave = new EventEmitter(); + readonly beforeZoom = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + readonly legendClick = new EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>(); + readonly markerClick = new EventEmitter(); + readonly crossFilter = new EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>(); + readonly beforeMount = new EventEmitter(); + readonly drillDownEnd = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly animationEnd = new EventEmitter(); + readonly filterChange = new EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>(); + readonly brushScrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + readonly drillDownStart = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly drillDownError = new EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>(); + readonly xAxisLabelClick = new EventEmitter(); + readonly beforeResetZoom = new EventEmitter(); + readonly annotationEdited = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>(); + readonly annotationStyled = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>(); + readonly annotationDragged = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>(); + readonly annotationCreated = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>(); + readonly annotationDeleted = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>(); + readonly dataPointSelection = new EventEmitter(); + readonly dataPointMouseEnter = new EventEmitter(); + readonly dataPointMouseLeave = new EventEmitter(); + //#endregion // //#region ComponentActionBar Props ... @@ -3386,6 +3654,16 @@ export class XChartContainer this.cardPropertyProvider.cardShowFooter; readonly cardShowActions: XStandardType = this.cardPropertyProvider.cardShowActions; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; //#endregion // @@ -3403,7 +3681,8 @@ export class XChartContainer @Component({ template: `` }) export abstract class XChartContainerComponent extends XBaseContainerComponent - implements IXChartContainer { + implements IXChartContainer +{ // //#region Props ... @Input() @@ -3429,9 +3708,6 @@ export abstract class XChartContainerComponent @Input() zoomStep: XStandardType = this.propertyProvider.zoomStep; - @Input() - autoUpdate: XStandardType = this.propertyProvider.autoUpdate; - @Input() defaultActionBarItemColor: XStandardType = this.propertyProvider.defaultActionBarItemColor; @@ -3442,15 +3718,219 @@ export abstract class XChartContainerComponent > = this.propertyProvider.availableActionBarItems; // - // Events ... + + @Input() + title: XStandardType = this.propertyProvider.title; + + @Input() + titleAlign: XStandardType = + this.propertyProvider.titleAlign; + + @Input() + subTitle: XStandardType = this.propertyProvider.subTitle; + + @Input() + subTitleAlign: XStandardType = + this.propertyProvider.subTitleAlign; + + // + + @Input() + gridColor: XStandardType = this.propertyProvider.gridColor; + + @Input() + titleColor: XStandardType = + this.propertyProvider.titleColor; + + @Input() + subTitleColor: XStandardType = + this.propertyProvider.subTitleColor; + + @Input() + foregroundColor: XStandardType = + this.propertyProvider.foregroundColor; + + @Input() + backgroundColor: XStandardType = + this.propertyProvider.backgroundColor; + + // + //#region Events ... @Output() - chartRendered: EventEmitter = new EventEmitter(); + click = new EventEmitter(); @Output() - dataPointSelected: EventEmitter = new EventEmitter(); + keyUp = new EventEmitter(); @Output() - zoomed: EventEmitter = new EventEmitter(); + zoomed = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + + @Output() + keyDown = new EventEmitter(); + + @Output() + drillUp = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + mounted = new EventEmitter(); + + @Output() + updated = new EventEmitter(); + + @Output() + measured = new EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>(); + + @Output() + scrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + + @Output() + mouseMove = new EventEmitter(); + + @Output() + selection = new EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>(); + + @Output() + beatChange = new EventEmitter(); + + @Output() + mouseLeave = new EventEmitter(); + + @Output() + beforeZoom = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + + @Output() + legendClick = new EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>(); + + @Output() + markerClick = new EventEmitter(); + + @Output() + crossFilter = new EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>(); + + @Output() + beforeMount = new EventEmitter(); + + @Output() + drillDownEnd = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + animationEnd = new EventEmitter(); + + @Output() + filterChange = new EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>(); + + @Output() + brushScrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + + @Output() + drillDownStart = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + drillDownError = new EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>(); + + @Output() + xAxisLabelClick = new EventEmitter(); + + @Output() + beforeResetZoom = new EventEmitter(); + + @Output() + annotationEdited = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>(); + + @Output() + annotationStyled = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>(); + + @Output() + annotationDragged = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>(); + + @Output() + annotationCreated = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>(); + + @Output() + annotationDeleted = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>(); + + @Output() + dataPointSelection = new EventEmitter(); + + @Output() + dataPointMouseEnter = new EventEmitter(); + + @Output() + dataPointMouseLeave = new EventEmitter(); + //#endregion // //#region ComponentCard Props ... @@ -3489,6 +3969,26 @@ export abstract class XChartContainerComponent @Input() cardActionProvider: Subject = this.propertyProvider.cardActionProvider; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; //#endregion // @@ -3544,7 +4044,7 @@ export abstract class XChartContainerComponent changeDetector, ); } - //#endregionّ + //#endregion // //#region Abstract ... @@ -3563,8 +4063,34 @@ export abstract class XChartContainerComponent options: this.getValue(container ? container.options : this.options), series: this.getValue(container ? container.series : this.series), zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep), - autoUpdate: this.getValue( - container ? container.autoUpdate : this.autoUpdate, + + // + title: this.getValue(container ? container.title : this.title), + titleAlign: this.getValue( + container ? container.titleAlign : this.titleAlign, + ), + + // + subTitle: this.getValue(container ? container.subTitle : this.subTitle), + subTitleAlign: this.getValue( + container ? container.subTitleAlign : this.subTitleAlign, + ), + + // + gridColor: this.getValue( + container ? container.gridColor : this.gridColor, + ), + titleColor: this.getValue( + container ? container.titleColor : this.titleColor, + ), + subTitleColor: this.getValue( + container ? container.subTitleColor : this.subTitleColor, + ), + foregroundColor: this.getValue( + container ? container.foregroundColor : this.foregroundColor, + ), + backgroundColor: this.getValue( + container ? container.backgroundColor : this.backgroundColor, ), // @@ -3607,6 +4133,31 @@ export abstract class XChartContainerComponent cardSubTitle: this.getValue( container ? container.cardSubTitle : this.cardSubTitle, ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), //#endregion // @@ -3642,11 +4193,73 @@ export abstract class XChartContainerComponent actionBarActionProvider: container ? container.actionBarActionProvider : this.actionBarActionProvider, + // - zoomed: this.zoomed, - chartRendered: this.chartRendered, - dataPointSelected: this.dataPointSelected, - actionBarActionFired: this.actionBarActionFired, + //#region Events ... + click: container ? container.click : this.click, + keyUp: container ? container.keyUp : this.keyUp, + zoomed: container ? container.zoomed : this.zoomed, + keyDown: container ? container.keyDown : this.keyDown, + drillUp: container ? container.drillUp : this.drillUp, + mounted: container ? container.mounted : this.mounted, + updated: container ? container.updated : this.updated, + measured: container ? container.measured : this.measured, + scrolled: container ? container.scrolled : this.scrolled, + mouseMove: container ? container.mouseMove : this.mouseMove, + selection: container ? container.selection : this.selection, + beatChange: container ? container.beatChange : this.beatChange, + mouseLeave: container ? container.mouseLeave : this.mouseLeave, + beforeZoom: container ? container.beforeZoom : this.beforeZoom, + legendClick: container ? container.legendClick : this.legendClick, + markerClick: container ? container.markerClick : this.markerClick, + crossFilter: container ? container.crossFilter : this.crossFilter, + beforeMount: container ? container.beforeMount : this.beforeMount, + drillDownEnd: container ? container.drillDownEnd : this.drillDownEnd, + animationEnd: container ? container.animationEnd : this.animationEnd, + filterChange: container ? container.filterChange : this.filterChange, + brushScrolled: container ? container.brushScrolled : this.brushScrolled, + drillDownStart: container + ? container.drillDownStart + : this.drillDownStart, + drillDownError: container + ? container.drillDownError + : this.drillDownError, + xAxisLabelClick: container + ? container.xAxisLabelClick + : this.xAxisLabelClick, + beforeResetZoom: container + ? container.beforeResetZoom + : this.beforeResetZoom, + annotationEdited: container + ? container.annotationEdited + : this.annotationEdited, + annotationStyled: container + ? container.annotationStyled + : this.annotationStyled, + annotationDragged: container + ? container.annotationDragged + : this.annotationDragged, + annotationCreated: container + ? container.annotationCreated + : this.annotationCreated, + annotationDeleted: container + ? container.annotationDeleted + : this.annotationDeleted, + dataPointSelection: container + ? container.dataPointSelection + : this.dataPointSelection, + dataPointMouseEnter: container + ? container.dataPointMouseEnter + : this.dataPointMouseEnter, + dataPointMouseLeave: container + ? container.dataPointMouseLeave + : this.dataPointMouseLeave, + + // + actionBarActionFired: container + ? container.actionBarActionFired + : this.actionBarActionFired, + //#endregion })), ); } diff --git a/projects/x-framework-components/src/lib/x-file-drop-area/x-file-drop-area.typings.ts b/projects/x-framework-components/src/lib/x-file-drop-area/x-file-drop-area.typings.ts index 2b6cb90..50b2a5f 100644 --- a/projects/x-framework-components/src/lib/x-file-drop-area/x-file-drop-area.typings.ts +++ b/projects/x-framework-components/src/lib/x-file-drop-area/x-file-drop-area.typings.ts @@ -45,8 +45,7 @@ export enum XFileDropAreaAction { export type XFileDropAreaActionIdentifier = XFileDropAreaAction | string; -export interface XFileDropAreaActionModel - extends XBaseActionModel {} +export interface XFileDropAreaActionModel extends XBaseActionModel {} export enum XFileDropAreaCssVars { LabelColor = 'label-color', @@ -211,7 +210,7 @@ export abstract class XFileDropAreaContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XFileDropAreaContainer + protected propertyProvider: XFileDropAreaContainer, ) { super( config, @@ -221,7 +220,7 @@ export abstract class XFileDropAreaContainerComponent ruler, zone, changeDetector, - propertyProvider + propertyProvider, ); } //#endregion @@ -229,7 +228,7 @@ export abstract class XFileDropAreaContainerComponent // //#region Abstract ... public extractProps( - container?: IXFileDropAreaContainer + container?: IXFileDropAreaContainer, ): Observable { return super .extractProps(container ? container : this) @@ -238,40 +237,40 @@ export abstract class XFileDropAreaContainerComponent return forkJoin({ // cssClass: this.getArrayValue( - container ? container.cssClass : this.cssClass + container ? container.cssClass : this.cssClass, ), // color: this.getValue(container ? container.color : this.color), foregroundColor: this.getValue( - container ? container.foregroundColor : this.foregroundColor + container ? container.foregroundColor : this.foregroundColor, ), icon: this.getValue(container ? container.icon : this.icon), message: this.getValue( - container ? container.message : this.message + container ? container.message : this.message, ), disableFileCheck: this.getValue( - container ? container.disableFileCheck : this.disableFileCheck + container ? container.disableFileCheck : this.disableFileCheck, ), supportsMultipleFiles: this.getValue( container ? container.supportsMultipleFiles - : this.supportsMultipleFiles + : this.supportsMultipleFiles, ), allowedExtensions: this.getValue( - container ? container.allowedExtensions : this.allowedExtensions + container ? container.allowedExtensions : this.allowedExtensions, ), dragDisabled: this.getValue( - container ? container.dragDisabled : this.dragDisabled + container ? container.dragDisabled : this.dragDisabled, ), successColor: this.getValue( - container ? container.successColor : this.successColor + container ? container.successColor : this.successColor, ), errorColor: this.getValue( - container ? container.errorColor : this.errorColor + container ? container.errorColor : this.errorColor, ), accentColor: this.getValue( - container ? container.accentColor : this.accentColor + container ? container.accentColor : this.accentColor, ), }).pipe( map((data) => { @@ -279,9 +278,9 @@ export abstract class XFileDropAreaContainerComponent superData, data, }; - }) + }), ); - }) + }), ) .pipe( map((info) => { @@ -305,7 +304,7 @@ export abstract class XFileDropAreaContainerComponent // filesChangeEmiter: this.filesChangeEmiter, }; - }) + }), ); } //#endregion @@ -321,8 +320,7 @@ type TXComponentFileDropAreaContainer = { }; export interface IXComponentFileDropAreaContainer - extends TXComponentFileDropAreaContainer, - IXBaseComponentContainer { + extends TXComponentFileDropAreaContainer, IXBaseComponentContainer { showFileDropArea: XStandardType; } @@ -405,6 +403,16 @@ export class XComponentFileDropAreaContainer new Subject(); readonly fileDropAreaCardSubTitle: XStandardType; readonly fileDropAreaCardCssClass: XStandardType>; + readonly fileDropAreaCardShowFullScreenButton: XStandardType = false; + readonly fileDropAreaCardEnterFullScreenButtonIcon: XStandardType = + XIconNames.fullscreen; + readonly fileDropAreaCardEnterFullScreenButtonColor: XStandardType = + XColorWithBrightness.Light; + readonly fileDropAreaCardExitFullScreenButtonIcon: XStandardType = + XIconNames.close_fullscreen; + readonly fileDropAreaCardExitFullScreenButtonColor: XStandardType = + XColorWithBrightness.Light; + //#endregion //#endregion @@ -421,7 +429,7 @@ export class XComponentFileDropAreaContainer }) @Component({ template: ` - `, }) @@ -575,6 +583,26 @@ export abstract class XComponentFileDropAreaContainerComponent @Input() fileDropAreaCardCssClass: XStandardType> = this.propertyProvider.fileDropAreaCardCssClass; + + @Input() + fileDropAreaCardShowFullScreenButton: XStandardType = + this.propertyProvider.fileDropAreaCardShowFullScreenButton; + + @Input() + fileDropAreaCardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.fileDropAreaCardEnterFullScreenButtonIcon; + + @Input() + fileDropAreaCardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.fileDropAreaCardEnterFullScreenButtonColor; + + @Input() + fileDropAreaCardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.fileDropAreaCardExitFullScreenButtonIcon; + + @Input() + fileDropAreaCardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.fileDropAreaCardExitFullScreenButtonColor; //#endregion //#endregion @@ -589,7 +617,7 @@ export abstract class XComponentFileDropAreaContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XComponentFileDropAreaContainer + protected propertyProvider: XComponentFileDropAreaContainer, ) { super( config, @@ -598,7 +626,7 @@ export abstract class XComponentFileDropAreaContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -606,108 +634,137 @@ export abstract class XComponentFileDropAreaContainerComponent // //#region Abstract ... public extractProps( - container?: IXComponentFileDropAreaContainer + container?: IXComponentFileDropAreaContainer, ): Observable { return forkJoin({ // fileDropAreaCssClass: this.getValue( - container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass + container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass, ), fileDropAreaColor: this.getValue( - container ? container.fileDropAreaColor : this.fileDropAreaColor + container ? container.fileDropAreaColor : this.fileDropAreaColor, ), fileDropAreaForegroundColor: this.getValue( container ? container.fileDropAreaForegroundColor - : this.fileDropAreaForegroundColor + : this.fileDropAreaForegroundColor, ), fileDropAreaIcon: this.getValue( - container ? container.fileDropAreaIcon : this.fileDropAreaIcon + container ? container.fileDropAreaIcon : this.fileDropAreaIcon, ), fileDropAreaMessage: this.getValue( - container ? container.fileDropAreaMessage : this.fileDropAreaMessage + container ? container.fileDropAreaMessage : this.fileDropAreaMessage, ), fileDropAreaDisableFileCheck: this.getValue( container ? container.fileDropAreaDisableFileCheck - : this.fileDropAreaDisableFileCheck + : this.fileDropAreaDisableFileCheck, ), fileDropAreaSupportsMultipleFiles: this.getValue( container ? container.fileDropAreaSupportsMultipleFiles - : this.fileDropAreaSupportsMultipleFiles + : this.fileDropAreaSupportsMultipleFiles, ), fileDropAreaAllowedExtensions: this.getValue( container ? container.fileDropAreaAllowedExtensions - : this.fileDropAreaAllowedExtensions + : this.fileDropAreaAllowedExtensions, ), fileDropAreaDragDisabled: this.getValue( container ? container.fileDropAreaDragDisabled - : this.fileDropAreaDragDisabled + : this.fileDropAreaDragDisabled, ), fileDropAreaContentTemplate: this.getValue( container ? container.fileDropAreaContentTemplate - : this.fileDropAreaContentTemplate + : this.fileDropAreaContentTemplate, ), fileDropAreaSuccessColor: this.getValue( container ? container.fileDropAreaSuccessColor - : this.fileDropAreaSuccessColor + : this.fileDropAreaSuccessColor, ), fileDropAreaErrorColor: this.getValue( container ? container.fileDropAreaErrorColor - : this.fileDropAreaErrorColor + : this.fileDropAreaErrorColor, ), fileDropAreaAccentColor: this.getValue( container ? container.fileDropAreaAccentColor - : this.fileDropAreaAccentColor + : this.fileDropAreaAccentColor, ), showFileDropArea: this.getValue( - container ? container.showFileDropArea : this.showFileDropArea + container ? container.showFileDropArea : this.showFileDropArea, ), fileDropAreaIsInPage: this.getValue( - container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage + container ? container.fileDropAreaIsInPage : this.fileDropAreaIsInPage, ), fileDropAreaWrapWithCard: this.getValue( container ? container.fileDropAreaWrapWithCard - : this.fileDropAreaWrapWithCard + : this.fileDropAreaWrapWithCard, ), fileDropAreaCardShowFooter: this.getValue( container ? container.fileDropAreaCardShowFooter - : this.fileDropAreaCardShowFooter + : this.fileDropAreaCardShowFooter, ), fileDropAreaCardShowActions: this.getValue( container ? container.fileDropAreaCardShowActions - : this.fileDropAreaCardShowActions + : this.fileDropAreaCardShowActions, ), fileDropAreaCardColor: this.getValue( - container ? container.fileDropAreaCardColor : this.fileDropAreaCardColor + container + ? container.fileDropAreaCardColor + : this.fileDropAreaCardColor, ), fileDropAreaCardForegroundColor: this.getValue( container ? container.fileDropAreaCardForegroundColor - : this.fileDropAreaCardForegroundColor + : this.fileDropAreaCardForegroundColor, ), fileDropAreaCardTitle: this.getValue( - container ? container.fileDropAreaCardTitle : this.fileDropAreaCardTitle + container + ? container.fileDropAreaCardTitle + : this.fileDropAreaCardTitle, ), fileDropAreaCardSubTitle: this.getValue( container ? container.fileDropAreaCardSubTitle - : this.fileDropAreaCardSubTitle + : this.fileDropAreaCardSubTitle, ), fileDropAreaCardCssClass: this.getValue( container ? container.fileDropAreaCardCssClass - : this.fileDropAreaCardCssClass + : this.fileDropAreaCardCssClass, + ), + fileDropAreaCardShowFullScreenButton: this.getValue( + container + ? container.fileDropAreaCardShowFullScreenButton + : this.fileDropAreaCardShowFullScreenButton, + ), + fileDropAreaCardEnterFullScreenButtonIcon: this.getValue( + container + ? container.fileDropAreaCardEnterFullScreenButtonIcon + : this.fileDropAreaCardEnterFullScreenButtonIcon, + ), + fileDropAreaCardEnterFullScreenButtonColor: this.getValue( + container + ? container.fileDropAreaCardEnterFullScreenButtonColor + : this.fileDropAreaCardEnterFullScreenButtonColor, + ), + fileDropAreaCardExitFullScreenButtonIcon: this.getValue( + container + ? container.fileDropAreaCardExitFullScreenButtonIcon + : this.fileDropAreaCardExitFullScreenButtonIcon, + ), + fileDropAreaCardExitFullScreenButtonColor: this.getValue( + container + ? container.fileDropAreaCardExitFullScreenButtonColor + : this.fileDropAreaCardExitFullScreenButtonColor, ), }).pipe( map((data) => { @@ -728,7 +785,7 @@ export abstract class XComponentFileDropAreaContainerComponent // fileDropAreaFilesChangeEmiter: this.fileDropAreaFilesChangeEmiter, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/x-file-upload/x-file-upload.typings.ts b/projects/x-framework-components/src/lib/x-file-upload/x-file-upload.typings.ts index d883092..24ecc4a 100644 --- a/projects/x-framework-components/src/lib/x-file-upload/x-file-upload.typings.ts +++ b/projects/x-framework-components/src/lib/x-file-upload/x-file-upload.typings.ts @@ -96,12 +96,11 @@ export enum XFileUploadAction { export type XFileUploadActionIdentifier = XFileUploadAction | string; -export interface XFileUploadActionModel - extends XBaseActionModel {} +export interface XFileUploadActionModel extends XBaseActionModel {} export const defaultFileUploadListFilteringHandler: XListFilteringHandler = ( query: string, - items: XListItem[] + items: XListItem[], ) => { // if (!query || !hasChild(items)) { @@ -110,7 +109,7 @@ export const defaultFileUploadListFilteringHandler: XListFilteringHandler = ( // return items.filter((i) => - toNormalString(fileToJsonString(i.data)).includes(toNormalString(query)) + toNormalString(fileToJsonString(i.data)).includes(toNormalString(query)), ); }; @@ -130,8 +129,7 @@ type TXFileUploadContainer = IXComponentCardContainer & IXFileContainer; export interface IXFileUploadContainer - extends IXBaseContainer, - TXFileUploadContainer { + extends IXBaseContainer, TXFileUploadContainer { // actionProvider: Subject; cssClass: XStandardType>; @@ -170,9 +168,8 @@ export class XFileUploadContainer readonly foregroundColor: XStandardType = false; // - readonly fileChange: EventEmitter> = new EventEmitter< - XOneOrManyType - >(); + readonly fileChange: EventEmitter> = + new EventEmitter>(); readonly actionBarHideActions: XStandardType< XOneOrManyType @@ -253,6 +250,16 @@ export class XFileUploadContainer this.cardPropertyProvider.cardShowFooter; readonly cardShowActions: XStandardType = this.cardPropertyProvider.cardShowActions; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -438,7 +445,7 @@ export class XFileUploadContainer protected emptyPropertyProvider: XComponentEmptyContainer, protected actionBarPropertyProvider: XComponentActionBarContainer, protected searchBarPropertyProvider: XComponentSearchBarContainer, - protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer + protected fileDropAreaPropertyProvider: XComponentFileDropAreaContainer, ) { super(); } @@ -476,7 +483,8 @@ export abstract class XFileUploadContainerComponent // @Output() - fileChange: EventEmitter> = new EventEmitter(); + fileChange: EventEmitter> = + new EventEmitter(); @Input() actionBarHideActions: XStandardType< @@ -596,6 +604,26 @@ export abstract class XFileUploadContainerComponent @Input() cardShowActions: XStandardType = this.propertyProvider.cardShowActions; + + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -666,7 +694,8 @@ export abstract class XFileUploadContainerComponent // @Output() - actionBarActionFired: EventEmitter = new EventEmitter(); + actionBarActionFired: EventEmitter = + new EventEmitter(); //#endregion // @@ -888,7 +917,7 @@ export abstract class XFileUploadContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XFileUploadContainer + protected propertyProvider: XFileUploadContainer, ) { super( config, @@ -897,7 +926,7 @@ export abstract class XFileUploadContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -905,313 +934,342 @@ export abstract class XFileUploadContainerComponent // //#region Abstract ... public extractProps( - container?: IXFileUploadContainer + container?: IXFileUploadContainer, ): Observable { return forkJoin({ // cssClass: this.getValue(container ? container.cssClass : this.cssClass), color: this.getValue(container ? container.color : this.color), foregroundColor: this.getValue( - container ? container.foregroundColor : this.foregroundColor + container ? container.foregroundColor : this.foregroundColor, ), actionBarHideActions: this.getValue( - container ? container.actionBarHideActions : this.actionBarHideActions + container ? container.actionBarHideActions : this.actionBarHideActions, ), showFileDropArea: this.getValue( - container ? container.showFileDropArea : this.showFileDropArea + container ? container.showFileDropArea : this.showFileDropArea, ), fileDropAreaCssClass: this.getValue( - container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass + container ? container.fileDropAreaCssClass : this.fileDropAreaCssClass, ), fileDropAreaColor: this.getValue( - container ? container.fileDropAreaColor : this.fileDropAreaColor + container ? container.fileDropAreaColor : this.fileDropAreaColor, ), fileDropAreaForegroundColor: this.getValue( container ? container.fileDropAreaForegroundColor - : this.fileDropAreaForegroundColor + : this.fileDropAreaForegroundColor, ), fileDropAreaIcon: this.getValue( - container ? container.fileDropAreaIcon : this.fileDropAreaIcon + container ? container.fileDropAreaIcon : this.fileDropAreaIcon, ), fileDropAreaMessage: this.getValue( - container ? container.fileDropAreaMessage : this.fileDropAreaMessage + container ? container.fileDropAreaMessage : this.fileDropAreaMessage, ), fileDropAreaDisableFileCheck: this.getValue( container ? container.fileDropAreaDisableFileCheck - : this.fileDropAreaDisableFileCheck + : this.fileDropAreaDisableFileCheck, ), fileDropAreaSupportsMultipleFiles: this.getValue( container ? container.fileDropAreaSupportsMultipleFiles - : this.fileDropAreaSupportsMultipleFiles + : this.fileDropAreaSupportsMultipleFiles, ), fileDropAreaAllowedExtensions: this.getValue( container ? container.fileDropAreaAllowedExtensions - : this.fileDropAreaAllowedExtensions + : this.fileDropAreaAllowedExtensions, ), fileDropAreaDragDisabled: this.getValue( container ? container.fileDropAreaDragDisabled - : this.fileDropAreaDragDisabled + : this.fileDropAreaDragDisabled, ), fileDropAreaContentTemplate: this.getValue( container ? container.fileDropAreaContentTemplate - : this.fileDropAreaContentTemplate + : this.fileDropAreaContentTemplate, ), fileDropAreaSuccessColor: this.getValue( container ? container.fileDropAreaSuccessColor - : this.fileDropAreaSuccessColor + : this.fileDropAreaSuccessColor, ), fileDropAreaErrorColor: this.getValue( container ? container.fileDropAreaErrorColor - : this.fileDropAreaErrorColor + : this.fileDropAreaErrorColor, ), fileDropAreaAccentColor: this.getValue( container ? container.fileDropAreaAccentColor - : this.fileDropAreaAccentColor + : this.fileDropAreaAccentColor, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardCssClass: this.getValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), showList: this.getValue(container ? container.showList : this.showList), listConfirmRemove: this.getValue( - container ? container.listConfirmRemove : this.listConfirmRemove + container ? container.listConfirmRemove : this.listConfirmRemove, ), listCssClass: this.getValue( - container ? container.listCssClass : this.listCssClass + container ? container.listCssClass : this.listCssClass, ), listShowToolbar: this.getValue( - container ? container.listShowToolbar : this.listShowToolbar + container ? container.listShowToolbar : this.listShowToolbar, ), listStickyToolbar: this.getValue( - container ? container.listStickyToolbar : this.listStickyToolbar + container ? container.listStickyToolbar : this.listStickyToolbar, ), listEnableReordering: this.getValue( - container ? container.listEnableReordering : this.listEnableReordering + container ? container.listEnableReordering : this.listEnableReordering, ), listShowDivider: this.getValue( - container ? container.listShowDivider : this.listShowDivider + container ? container.listShowDivider : this.listShowDivider, ), listFilteringHandler: this.getValue( - container ? container.listFilteringHandler : this.listFilteringHandler + container ? container.listFilteringHandler : this.listFilteringHandler, ), showActionBar: this.getValue( - container ? container.showActionBar : this.showActionBar + container ? container.showActionBar : this.showActionBar, ), actionBarCssClass: this.getValue( - container ? container.actionBarCssClass : this.actionBarCssClass + container ? container.actionBarCssClass : this.actionBarCssClass, ), actionBarColor: this.getValue( - container ? container.actionBarColor : this.actionBarColor + container ? container.actionBarColor : this.actionBarColor, ), actionBarForegroundColor: this.getValue( container ? container.actionBarForegroundColor - : this.actionBarForegroundColor + : this.actionBarForegroundColor, ), actionBarActions: this.getValue( - container ? container.actionBarActions : this.actionBarActions + container ? container.actionBarActions : this.actionBarActions, ), showSearchBar: this.getValue( - container ? container.showSearchBar : this.showSearchBar + container ? container.showSearchBar : this.showSearchBar, ), searchBarCssClass: this.getValue( - container ? container.searchBarCssClass : this.searchBarCssClass + container ? container.searchBarCssClass : this.searchBarCssClass, ), searchBarColor: this.getValue( - container ? container.searchBarColor : this.searchBarColor + container ? container.searchBarColor : this.searchBarColor, ), searchBarForegroundColor: this.getValue( container ? container.searchBarForegroundColor - : this.searchBarForegroundColor + : this.searchBarForegroundColor, ), searchBarSearchInputColor: this.getValue( container ? container.searchBarSearchInputColor - : this.searchBarSearchInputColor + : this.searchBarSearchInputColor, ), searchBarForegroundSearchInputColor: this.getValue( container ? container.searchBarForegroundSearchInputColor - : this.searchBarForegroundSearchInputColor + : this.searchBarForegroundSearchInputColor, ), searchBarType: this.getValue( - container ? container.searchBarType : this.searchBarType + container ? container.searchBarType : this.searchBarType, ), searchBarTitle: this.getValue( - container ? container.searchBarTitle : this.searchBarTitle + container ? container.searchBarTitle : this.searchBarTitle, ), searchBarValue: this.getValue( - container ? container.searchBarValue : this.searchBarValue + container ? container.searchBarValue : this.searchBarValue, ), searchBarEnterKeyHint: this.getValue( - container ? container.searchBarEnterKeyHint : this.searchBarEnterKeyHint + container + ? container.searchBarEnterKeyHint + : this.searchBarEnterKeyHint, ), searchBarKeyboardType: this.getValue( - container ? container.searchBarKeyboardType : this.searchBarKeyboardType + container + ? container.searchBarKeyboardType + : this.searchBarKeyboardType, ), searchBarSpellcheck: this.getValue( - container ? container.searchBarSpellcheck : this.searchBarSpellcheck + container ? container.searchBarSpellcheck : this.searchBarSpellcheck, ), searchBarDebounce: this.getValue( - container ? container.searchBarDebounce : this.searchBarDebounce + container ? container.searchBarDebounce : this.searchBarDebounce, ), searchBarShowCancelButton: this.getValue( container ? container.searchBarShowCancelButton - : this.searchBarShowCancelButton + : this.searchBarShowCancelButton, ), searchBarCancelButtonIcon: this.getValue( container ? container.searchBarCancelButtonIcon - : this.searchBarCancelButtonIcon + : this.searchBarCancelButtonIcon, ), searchBarCancelButtonTitle: this.getValue( container ? container.searchBarCancelButtonTitle - : this.searchBarCancelButtonTitle + : this.searchBarCancelButtonTitle, ), searchBarCancelButtonIconColor: this.getValue( container ? container.searchBarCancelButtonIconColor - : this.searchBarCancelButtonIconColor + : this.searchBarCancelButtonIconColor, ), searchBarShowClearButton: this.getValue( container ? container.searchBarShowClearButton - : this.searchBarShowClearButton + : this.searchBarShowClearButton, ), searchBarClearButtonIcon: this.getValue( container ? container.searchBarClearButtonIcon - : this.searchBarClearButtonIcon + : this.searchBarClearButtonIcon, ), searchBarClearButtonIconColor: this.getValue( container ? container.searchBarClearButtonIconColor - : this.searchBarClearButtonIconColor + : this.searchBarClearButtonIconColor, ), searchBarSearchButtonIcon: this.getValue( container ? container.searchBarSearchButtonIcon - : this.searchBarSearchButtonIcon + : this.searchBarSearchButtonIcon, ), searchBarSearchButtonIconColor: this.getValue( container ? container.searchBarSearchButtonIconColor - : this.searchBarSearchButtonIconColor + : this.searchBarSearchButtonIconColor, ), showEmpty: this.getValue( - container ? container.showEmpty : this.showEmpty + container ? container.showEmpty : this.showEmpty, ), emptyCssClass: this.getValue( - container ? container.emptyCssClass : this.emptyCssClass + container ? container.emptyCssClass : this.emptyCssClass, ), emptyColor: this.getValue( - container ? container.emptyColor : this.emptyColor + container ? container.emptyColor : this.emptyColor, ), emptyForegroundColor: this.getValue( - container ? container.emptyForegroundColor : this.emptyForegroundColor + container ? container.emptyForegroundColor : this.emptyForegroundColor, ), emptyMessage: this.getValue( - container ? container.emptyMessage : this.emptyMessage + container ? container.emptyMessage : this.emptyMessage, ), emptyMessageColor: this.getValue( - container ? container.emptyMessageColor : this.emptyMessageColor + container ? container.emptyMessageColor : this.emptyMessageColor, ), emptyForegroundMessageColor: this.getValue( container ? container.emptyForegroundMessageColor - : this.emptyForegroundMessageColor + : this.emptyForegroundMessageColor, ), emptyHasRefresh: this.getValue( - container ? container.emptyHasRefresh : this.emptyHasRefresh + container ? container.emptyHasRefresh : this.emptyHasRefresh, ), emptyRefreshButtonColor: this.getValue( container ? container.emptyRefreshButtonColor - : this.emptyRefreshButtonColor + : this.emptyRefreshButtonColor, ), emptyForegroundRefreshButtonColor: this.getValue( container ? container.emptyForegroundRefreshButtonColor - : this.emptyForegroundRefreshButtonColor + : this.emptyForegroundRefreshButtonColor, ), emptyRefreshIcon: this.getValue( - container ? container.emptyRefreshIcon : this.emptyRefreshIcon + container ? container.emptyRefreshIcon : this.emptyRefreshIcon, ), emptyFileException: this.getValue( - container ? container.emptyFileException : this.emptyFileException + container ? container.emptyFileException : this.emptyFileException, ), notAllowedFileException: this.getValue( container ? container.notAllowedFileException - : this.notAllowedFileException + : this.notAllowedFileException, ), allowedExtensions: this.getValue( - container ? container.allowedExtensions : this.allowedExtensions + container ? container.allowedExtensions : this.allowedExtensions, ), maxAllowedFiles: this.getValue( - container ? container.maxAllowedFiles : this.maxAllowedFiles + container ? container.maxAllowedFiles : this.maxAllowedFiles, ), maxAllowedFilesException: this.getValue( container ? container.maxAllowedFilesException - : this.maxAllowedFilesException + : this.maxAllowedFilesException, ), maxAllowedSize: this.getValue( - container ? container.maxAllowedSize : this.maxAllowedSize + container ? container.maxAllowedSize : this.maxAllowedSize, ), maxAllowedSizeException: this.getValue( container ? container.maxAllowedSizeException - : this.maxAllowedSizeException + : this.maxAllowedSizeException, ), minAllowedFileSize: this.getValue( - container ? container.minAllowedFileSize : this.minAllowedFileSize + container ? container.minAllowedFileSize : this.minAllowedFileSize, ), minAllowedFileSizeException: this.getValue( container ? container.minAllowedFileSizeException - : this.minAllowedFileSizeException + : this.minAllowedFileSizeException, ), maxAllowedFileSize: this.getValue( - container ? container.maxAllowedFileSize : this.maxAllowedFileSize + container ? container.maxAllowedFileSize : this.maxAllowedFileSize, ), maxAllowedFileSizeException: this.getValue( container ? container.maxAllowedFileSizeException - : this.maxAllowedFileSizeException + : this.maxAllowedFileSizeException, ), }).pipe( map((data) => { @@ -1270,7 +1328,7 @@ export abstract class XFileUploadContainerComponent // emptyRefresh: this.emptyRefresh, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/x-form/x-form.component.ts b/projects/x-framework-components/src/lib/x-form/x-form.component.ts index c91e63b..0c40b4e 100644 --- a/projects/x-framework-components/src/lib/x-form/x-form.component.ts +++ b/projects/x-framework-components/src/lib/x-form/x-form.component.ts @@ -16,7 +16,6 @@ import { isDate, assign, entries, - XUiEvent, hasChild, isFunction, parseXColor, diff --git a/projects/x-framework-components/src/lib/x-ide/x-ide.typings.ts b/projects/x-framework-components/src/lib/x-ide/x-ide.typings.ts index 64dbe94..dc45629 100644 --- a/projects/x-framework-components/src/lib/x-ide/x-ide.typings.ts +++ b/projects/x-framework-components/src/lib/x-ide/x-ide.typings.ts @@ -38,6 +38,7 @@ import { import { forkJoin, Observable, Subject } from 'rxjs'; import { ViewportRuler } from '@angular/cdk/scrolling'; import { XManagerService } from 'x-framework-services'; +import { XIconIdentifier } from '../x-icon/x-icon.typings'; import { XBaseActionModel } from '../classes/x-base-action.model'; import { XPopoverService } from '../dialogs/x-popover/x-popover.service'; import { XTabAlign, XTabAlignIdentifier } from '../x-tabs/x-tabs.typings'; @@ -83,8 +84,7 @@ export enum XIDEAction { export type XIDEActionIdentifier = XIDEAction | string; -export interface XIDEActionModel - extends XBaseActionModel {} +export interface XIDEActionModel extends XBaseActionModel {} //#endregion // @@ -520,6 +520,16 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer { this.cardPropertyProvider.cardShowFooter; readonly cardShowActions: XStandardType = this.cardPropertyProvider.cardShowActions; + readonly cardShowFullScreenButton: XStandardType = + this.cardPropertyProvider.cardShowFullScreenButton; + readonly cardEnterFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonIcon; + readonly cardEnterFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardEnterFullScreenButtonColor; + readonly cardExitFullScreenButtonIcon: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonIcon; + readonly cardExitFullScreenButtonColor: XStandardType = + this.cardPropertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -545,7 +555,7 @@ export class XIDEContainer extends XBaseContainer implements IXIDEContainer { //#region Constructor ... constructor( protected cardPropertyProvider: XComponentCardContainer, - protected actionBarPropertyProvider: XComponentActionBarContainer + protected actionBarPropertyProvider: XComponentActionBarContainer, ) { super(); } @@ -572,7 +582,8 @@ export class XIDEContainerComponent defaultTabName: XStandardType = this.propertyProvider.defaultTabName; @Input() - hasCloseOnDefaultTab: XStandardType = this.propertyProvider.hasCloseOnDefaultTab; + hasCloseOnDefaultTab: XStandardType = + this.propertyProvider.hasCloseOnDefaultTab; @Input() theme: XStandardType = this.propertyProvider.theme; @@ -691,6 +702,27 @@ export class XIDEContainerComponent @Input() cardActionProvider: Subject = this.propertyProvider.cardActionProvider; + + // + @Input() + cardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + + @Input() + cardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + + @Input() + cardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + + @Input() + cardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + + @Input() + cardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -735,7 +767,7 @@ export class XIDEContainerComponent public zone: NgZone, public changeDetector: ChangeDetectorRef, protected propertyProvider: XIDEContainer, - protected popoverService: XPopoverService + protected popoverService: XPopoverService, ) { super( config, @@ -744,7 +776,7 @@ export class XIDEContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -763,43 +795,43 @@ export class XIDEContainerComponent mode: this.getValue(container ? container.mode : this.mode), theme: this.getValue(container ? container.theme : this.theme), highlightActiveLine: this.getValue( - container ? container.highlightActiveLine : this.highlightActiveLine + container ? container.highlightActiveLine : this.highlightActiveLine, ), cssClass: this.getArrayValue( - container ? container.cssClass : this.cssClass + container ? container.cssClass : this.cssClass, ), basicAutocompletion: this.getValue( - container ? container.basicAutocompletion : this.basicAutocompletion + container ? container.basicAutocompletion : this.basicAutocompletion, ), wordWrapping: this.getValue( - container ? container.wordWrapping : this.wordWrapping + container ? container.wordWrapping : this.wordWrapping, ), showPrintMargin: this.getValue( - container ? container.showPrintMargin : this.showPrintMargin + container ? container.showPrintMargin : this.showPrintMargin, ), showLineNumbers: this.getValue( - container ? container.showLineNumbers : this.showLineNumbers + container ? container.showLineNumbers : this.showLineNumbers, ), showFoldWidgets: this.getValue( - container ? container.showFoldWidgets : this.showFoldWidgets + container ? container.showFoldWidgets : this.showFoldWidgets, ), defaultTabName: this.getValue( - container ? container.defaultTabName : this.defaultTabName + container ? container.defaultTabName : this.defaultTabName, ), hasCloseOnDefaultTab: this.getValue( - container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab + container ? container.hasCloseOnDefaultTab : this.hasCloseOnDefaultTab, ), // //#region Tabs ... alignTabs: this.getValue( - container ? container.alignTabs : this.alignTabs + container ? container.alignTabs : this.alignTabs, ), tabHeaderColor: this.getValue( - container ? container.tabHeaderColor : this.tabHeaderColor + container ? container.tabHeaderColor : this.tabHeaderColor, ), activeTabColor: this.getValue( - container ? container.activeTabColor : this.activeTabColor + container ? container.activeTabColor : this.activeTabColor, ), //#endregion @@ -808,62 +840,87 @@ export class XIDEContainerComponent defaultActionBarItemColor: this.getValue( container ? container.defaultActionBarItemColor - : this.defaultActionBarItemColor + : this.defaultActionBarItemColor, ), availableActionBarItems: this.getArrayValue( container ? container.availableActionBarItems - : this.availableActionBarItems + : this.availableActionBarItems, ), //#endregion // //#region XComponentCard ... cardCssClass: this.getArrayValue( - container ? container.cardCssClass : this.cardCssClass + container ? container.cardCssClass : this.cardCssClass, ), isInPage: this.getValue(container ? container.isInPage : this.isInPage), wrapWithCard: this.getValue( - container ? container.wrapWithCard : this.wrapWithCard + container ? container.wrapWithCard : this.wrapWithCard, ), cardShowFooter: this.getValue( - container ? container.cardShowFooter : this.cardShowFooter + container ? container.cardShowFooter : this.cardShowFooter, ), cardShowActions: this.getValue( - container ? container.cardShowActions : this.cardShowActions + container ? container.cardShowActions : this.cardShowActions, ), cardColor: this.getValue( - container ? container.cardColor : this.cardColor + container ? container.cardColor : this.cardColor, ), cardForegroundColor: this.getValue( - container ? container.cardForegroundColor : this.cardForegroundColor + container ? container.cardForegroundColor : this.cardForegroundColor, ), cardTitle: this.getValue( - container ? container.cardTitle : this.cardTitle + container ? container.cardTitle : this.cardTitle, ), cardSubTitle: this.getValue( - container ? container.cardSubTitle : this.cardSubTitle + container ? container.cardSubTitle : this.cardSubTitle, + ), + cardShowFullScreenButton: this.getValue( + container + ? container.cardShowFullScreenButton + : this.cardShowFullScreenButton, + ), + cardEnterFullScreenButtonIcon: this.getValue( + container + ? container.cardEnterFullScreenButtonIcon + : this.cardEnterFullScreenButtonIcon, + ), + cardEnterFullScreenButtonColor: this.getValue( + container + ? container.cardEnterFullScreenButtonColor + : this.cardEnterFullScreenButtonColor, + ), + cardExitFullScreenButtonIcon: this.getValue( + container + ? container.cardExitFullScreenButtonIcon + : this.cardExitFullScreenButtonIcon, + ), + cardExitFullScreenButtonColor: this.getValue( + container + ? container.cardExitFullScreenButtonColor + : this.cardExitFullScreenButtonColor, ), //#endregion // //#region XComponentActionBar ... showActionBar: this.getValue( - container ? container.showActionBar : this.showActionBar + container ? container.showActionBar : this.showActionBar, ), actionBarCssClass: this.getValue( - container ? container.actionBarCssClass : this.actionBarCssClass + container ? container.actionBarCssClass : this.actionBarCssClass, ), actionBarColor: this.getValue( - container ? container.actionBarColor : this.actionBarColor + container ? container.actionBarColor : this.actionBarColor, ), actionBarForegroundColor: this.getValue( container ? container.actionBarForegroundColor - : this.actionBarForegroundColor + : this.actionBarForegroundColor, ), actionBarActions: this.getValue( - container ? container.actionBarActions : this.actionBarActions + container ? container.actionBarActions : this.actionBarActions, ), //#endregion }).pipe( @@ -891,7 +948,7 @@ export class XIDEContainerComponent contentChange: this.contentChange, actionBarActionFired: this.actionBarActionFired, }; - }) + }), ); } //#endregion diff --git a/projects/x-framework-components/src/lib/x-list/x-list.typings.ts b/projects/x-framework-components/src/lib/x-list/x-list.typings.ts index cb44895..36c45fd 100644 --- a/projects/x-framework-components/src/lib/x-list/x-list.typings.ts +++ b/projects/x-framework-components/src/lib/x-list/x-list.typings.ts @@ -103,12 +103,11 @@ export enum XListAction { export type XListActionIdentifier = XListAction | string; -export interface XListActionModel - extends XBaseActionModel {} +export interface XListActionModel extends XBaseActionModel {} export type XListFilteringHandler = ( query: string, - source: XListItem[] + source: XListItem[], ) => XStandardType[]>; export function itemToJson(item: any) { @@ -117,7 +116,7 @@ export function itemToJson(item: any) { export const defaultListFilteringHandler: XListFilteringHandler = ( query: string, - items: XListItem[] + items: XListItem[], ) => { // if (!query || !hasChild(items)) { @@ -126,7 +125,7 @@ export const defaultListFilteringHandler: XListFilteringHandler = ( // const result = items.filter((i) => - toNormalString(itemToJson(i.data)).includes(toNormalString(query)) + toNormalString(itemToJson(i.data)).includes(toNormalString(query)), ); // @@ -336,7 +335,8 @@ export abstract class XListContainerComponent itemSelected: EventEmitter> = new EventEmitter(); @Output() - optionSelected: EventEmitter = new EventEmitter(); + optionSelected: EventEmitter = + new EventEmitter(); @Input() confirmRemove: XStandardType = this.propertyProvider.confirmRemove; @@ -379,7 +379,7 @@ export abstract class XListContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XListContainer + protected propertyProvider: XListContainer, ) { super( config, @@ -389,7 +389,7 @@ export abstract class XListContainerComponent ruler, zone, changeDetector, - propertyProvider + propertyProvider, ); } //#endregion @@ -397,7 +397,7 @@ export abstract class XListContainerComponent // //#region Abstract ... public extractProps( - container?: IXListContainer + container?: IXListContainer, ): Observable { return super .extractProps(container ? container : this) @@ -405,71 +405,73 @@ export abstract class XListContainerComponent concatMap((superData) => { return forkJoin({ cssClass: this.getValue( - container ? container.cssClass : this.cssClass + container ? container.cssClass : this.cssClass, ), actionBarHideActions: this.getValue( container ? container.actionBarHideActions - : this.actionBarHideActions + : this.actionBarHideActions, ), useDefaultActions: this.getValue( - container ? container.useDefaultActions : this.useDefaultActions + container ? container.useDefaultActions : this.useDefaultActions, ), showToolbar: this.getValue( - container ? container.showToolbar : this.showToolbar + container ? container.showToolbar : this.showToolbar, ), stickyToolbar: this.getValue( - container ? container.stickyToolbar : this.stickyToolbar + container ? container.stickyToolbar : this.stickyToolbar, ), color: this.getValue(container ? container.color : this.color), foregroundColor: this.getValue( - container ? container.foregroundColor : this.foregroundColor + container ? container.foregroundColor : this.foregroundColor, ), enableReordering: this.getValue( - container ? container.enableReordering : this.enableReordering + container ? container.enableReordering : this.enableReordering, ), showDivider: this.getValue( - container ? container.showDivider : this.showDivider + container ? container.showDivider : this.showDivider, ), showOptionsAsSlide: this.getValue( - container ? container.showOptionsAsSlide : this.showOptionsAsSlide + container + ? container.showOptionsAsSlide + : this.showOptionsAsSlide, ), closeOptionsAfterSelect: this.getValue( container ? container.closeOptionsAfterSelect - : this.closeOptionsAfterSelect + : this.closeOptionsAfterSelect, ), showOptionsAsMenu: this.getValue( - container ? container.showOptionsAsMenu : this.showOptionsAsMenu + container ? container.showOptionsAsMenu : this.showOptionsAsMenu, ), selectableItems: this.getValue( - container ? container.selectableItems : this.selectableItems + container ? container.selectableItems : this.selectableItems, ), clickableItems: this.getValue( - container ? container.clickableItems : this.clickableItems + container ? container.clickableItems : this.clickableItems, ), itemTemplate: this.getValue( - container ? container.itemTemplate : this.itemTemplate + container ? container.itemTemplate : this.itemTemplate, ), slidingOptionTemplate: this.getValue( container ? container.slidingOptionTemplate - : this.slidingOptionTemplate + : this.slidingOptionTemplate, ), nonSlidingOptionTemplate: this.getValue( container ? container.nonSlidingOptionTemplate - : this.nonSlidingOptionTemplate + : this.nonSlidingOptionTemplate, ), confirmRemove: this.getValue( - container ? container.confirmRemove : this.confirmRemove + container ? container.confirmRemove : this.confirmRemove, ), items: this.getValue(container ? container.items : this.items), showItemOptions: this.getValue( - container ? container.showItemOptions : this.showItemOptions + container ? container.showItemOptions : this.showItemOptions, ), filteringHandler: this.getValue( - container ? container.filteringHandler : this.filteringHandler + container ? container.filteringHandler : this.filteringHandler, ), }).pipe( map((data) => { @@ -477,9 +479,9 @@ export abstract class XListContainerComponent superData, data, }; - }) + }), ); - }) + }), ) .pipe( map((info) => { @@ -503,7 +505,7 @@ export abstract class XListContainerComponent selectionChanged: this.selectionChanged, orderChanged: this.orderChanged, }; - }) + }), ); } //#endregion @@ -519,8 +521,7 @@ type TXComponentListContainer = { }; export interface IXComponentListContainer - extends TXComponentListContainer, - IXBaseComponentContainer { + extends TXComponentListContainer, IXBaseComponentContainer { showList: XStandardType; } @@ -632,6 +633,16 @@ export class XComponentListContainer this.propertyProvider.cardSubTitle; readonly listCardCssClass: XStandardType> = this.propertyProvider.cardCssClass; + readonly listCardShowFullScreenButton: XStandardType = + this.propertyProvider.cardShowFullScreenButton; + readonly listCardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonIcon; + readonly listCardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.cardEnterFullScreenButtonColor; + readonly listCardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.cardExitFullScreenButtonIcon; + readonly listCardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.cardExitFullScreenButtonColor; //#endregion // @@ -869,7 +880,8 @@ export abstract class XComponentListContainerComponent listItemSelected: EventEmitter> = new EventEmitter(); @Output() - listOptionSelected: EventEmitter = new EventEmitter(); + listOptionSelected: EventEmitter = + new EventEmitter(); @Input() listConfirmRemove: XStandardType = @@ -940,6 +952,26 @@ export abstract class XComponentListContainerComponent @Input() listCardCssClass: XStandardType> = this.propertyProvider.listCardCssClass; + + @Input() + listCardShowFullScreenButton: XStandardType = + this.propertyProvider.listCardShowFullScreenButton; + + @Input() + listCardEnterFullScreenButtonIcon: XStandardType = + this.propertyProvider.listCardEnterFullScreenButtonIcon; + + @Input() + listCardEnterFullScreenButtonColor: XStandardType = + this.propertyProvider.listCardEnterFullScreenButtonColor; + + @Input() + listCardExitFullScreenButtonIcon: XStandardType = + this.propertyProvider.listCardExitFullScreenButtonIcon; + + @Input() + listCardExitFullScreenButtonColor: XStandardType = + this.propertyProvider.listCardExitFullScreenButtonColor; //#endregion // @@ -1028,7 +1060,8 @@ export abstract class XComponentListContainerComponent // @Output() - listActionBarActionFired: EventEmitter = new EventEmitter(); + listActionBarActionFired: EventEmitter = + new EventEmitter(); //#endregion // @@ -1153,7 +1186,7 @@ export abstract class XComponentListContainerComponent public ruler: ViewportRuler, public zone: NgZone, public changeDetector: ChangeDetectorRef, - protected propertyProvider: XComponentListContainer + protected propertyProvider: XComponentListContainer, ) { super( config, @@ -1162,7 +1195,7 @@ export abstract class XComponentListContainerComponent renderer, ruler, zone, - changeDetector + changeDetector, ); } //#endregion @@ -1170,266 +1203,303 @@ export abstract class XComponentListContainerComponent // //#region Abstract ... public extractProps( - container?: IXComponentListContainer + container?: IXComponentListContainer, ): Observable { return forkJoin({ // showList: this.getValue(container ? container.showList : this.showList), listCssClass: this.getValue( - container ? container.listCssClass : this.listCssClass + container ? container.listCssClass : this.listCssClass, ), listActionBarHideActions: this.getValue( container ? container.listActionBarHideActions - : this.listActionBarHideActions + : this.listActionBarHideActions, ), listUseDefaultActions: this.getValue( - container ? container.listUseDefaultActions : this.listUseDefaultActions + container + ? container.listUseDefaultActions + : this.listUseDefaultActions, ), listShowToolbar: this.getValue( - container ? container.listShowToolbar : this.listShowToolbar + container ? container.listShowToolbar : this.listShowToolbar, ), listStickyToolbar: this.getValue( - container ? container.listStickyToolbar : this.listStickyToolbar + container ? container.listStickyToolbar : this.listStickyToolbar, ), listColor: this.getValue( - container ? container.listColor : this.listColor + container ? container.listColor : this.listColor, ), listForegroundColor: this.getValue( - container ? container.listForegroundColor : this.listForegroundColor + container ? container.listForegroundColor : this.listForegroundColor, ), listEnableReordering: this.getValue( - container ? container.listEnableReordering : this.listEnableReordering + container ? container.listEnableReordering : this.listEnableReordering, ), listShowDivider: this.getValue( - container ? container.listShowDivider : this.listShowDivider + container ? container.listShowDivider : this.listShowDivider, ), listShowOptionsAsSlide: this.getValue( container ? container.listShowOptionsAsSlide - : this.listShowOptionsAsSlide + : this.listShowOptionsAsSlide, ), listCloseOptionsAfterSelect: this.getValue( container ? container.listCloseOptionsAfterSelect - : this.listCloseOptionsAfterSelect + : this.listCloseOptionsAfterSelect, ), listShowOptionsAsMenu: this.getValue( - container ? container.listShowOptionsAsMenu : this.listShowOptionsAsMenu + container + ? container.listShowOptionsAsMenu + : this.listShowOptionsAsMenu, ), listSelectableItems: this.getValue( - container ? container.listSelectableItems : this.listSelectableItems + container ? container.listSelectableItems : this.listSelectableItems, ), listClickableItems: this.getValue( - container ? container.listClickableItems : this.listClickableItems + container ? container.listClickableItems : this.listClickableItems, ), listItemTemplate: this.getValue( - container ? container.listItemTemplate : this.listItemTemplate + container ? container.listItemTemplate : this.listItemTemplate, ), listSlidingOptionTemplate: this.getValue( container ? container.listSlidingOptionTemplate - : this.listSlidingOptionTemplate + : this.listSlidingOptionTemplate, ), listNonSlidingOptionTemplate: this.getValue( container ? container.listNonSlidingOptionTemplate - : this.listNonSlidingOptionTemplate + : this.listNonSlidingOptionTemplate, ), listConfirmRemove: this.getValue( - container ? container.listConfirmRemove : this.listConfirmRemove + container ? container.listConfirmRemove : this.listConfirmRemove, ), listItems: this.getValue( - container ? container.listItems : this.listItems + container ? container.listItems : this.listItems, ), listShowItemOptions: this.getValue( - container ? container.listShowItemOptions : this.listShowItemOptions + container ? container.listShowItemOptions : this.listShowItemOptions, ), listFilteringHandler: this.getValue( - container ? container.listFilteringHandler : this.listFilteringHandler + container ? container.listFilteringHandler : this.listFilteringHandler, ), listIsInPage: this.getValue( - container ? container.listIsInPage : this.listIsInPage + container ? container.listIsInPage : this.listIsInPage, ), listWrapWithCard: this.getValue( - container ? container.listWrapWithCard : this.listWrapWithCard + container ? container.listWrapWithCard : this.listWrapWithCard, ), listCardShowFooter: this.getValue( - container ? container.listCardShowFooter : this.listCardShowFooter + container ? container.listCardShowFooter : this.listCardShowFooter, ), listCardShowActions: this.getValue( - container ? container.listCardShowActions : this.listCardShowActions + container ? container.listCardShowActions : this.listCardShowActions, ), listCardColor: this.getValue( - container ? container.listCardColor : this.listCardColor + container ? container.listCardColor : this.listCardColor, ), listCardForegroundColor: this.getValue( container ? container.listCardForegroundColor - : this.listCardForegroundColor + : this.listCardForegroundColor, ), listCardTitle: this.getValue( - container ? container.listCardTitle : this.listCardTitle + container ? container.listCardTitle : this.listCardTitle, ), listCardSubTitle: this.getValue( - container ? container.listCardSubTitle : this.listCardSubTitle + container ? container.listCardSubTitle : this.listCardSubTitle, ), listCardCssClass: this.getValue( - container ? container.listCardCssClass : this.listCardCssClass + container ? container.listCardCssClass : this.listCardCssClass, + ), + listCardShowFullScreenButton: this.getValue( + container + ? container.listCardShowFullScreenButton + : this.listCardShowFullScreenButton, + ), + listCardEnterFullScreenButtonIcon: this.getValue( + container + ? container.listCardEnterFullScreenButtonIcon + : this.listCardEnterFullScreenButtonIcon, + ), + listCardEnterFullScreenButtonColor: this.getValue( + container + ? container.listCardEnterFullScreenButtonColor + : this.listCardEnterFullScreenButtonColor, + ), + listCardExitFullScreenButtonIcon: this.getValue( + container + ? container.listCardExitFullScreenButtonIcon + : this.listCardExitFullScreenButtonIcon, + ), + listCardExitFullScreenButtonColor: this.getValue( + container + ? container.listCardExitFullScreenButtonColor + : this.listCardExitFullScreenButtonColor, ), listShowEmpty: this.getValue( - container ? container.listShowEmpty : this.listShowEmpty + container ? container.listShowEmpty : this.listShowEmpty, ), listEmptyHasRefresh: this.getValue( - container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh + container ? container.listEmptyHasRefresh : this.listEmptyHasRefresh, ), listEmptyCssClass: this.getValue( - container ? container.listEmptyCssClass : this.listEmptyCssClass + container ? container.listEmptyCssClass : this.listEmptyCssClass, ), listEmptyColor: this.getValue( - container ? container.listEmptyColor : this.listEmptyColor + container ? container.listEmptyColor : this.listEmptyColor, ), listEmptyForegroundColor: this.getValue( container ? container.listEmptyForegroundColor - : this.listEmptyForegroundColor + : this.listEmptyForegroundColor, ), listEmptyMessageColor: this.getValue( - container ? container.listEmptyMessageColor : this.listEmptyMessageColor + container + ? container.listEmptyMessageColor + : this.listEmptyMessageColor, ), listEmptyForegroundMessageColor: this.getValue( container ? container.listEmptyForegroundMessageColor - : this.listEmptyForegroundMessageColor + : this.listEmptyForegroundMessageColor, ), listEmptyRefreshButtonColor: this.getValue( container ? container.listEmptyRefreshButtonColor - : this.listEmptyRefreshButtonColor + : this.listEmptyRefreshButtonColor, ), listEmptyForegroundRefreshButtonColor: this.getValue( container ? container.listEmptyForegroundRefreshButtonColor - : this.listEmptyForegroundRefreshButtonColor + : this.listEmptyForegroundRefreshButtonColor, ), listEmptyMessage: this.getValue( - container ? container.listEmptyMessage : this.listEmptyMessage + container ? container.listEmptyMessage : this.listEmptyMessage, ), listEmptyRefreshIcon: this.getValue( - container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon + container ? container.listEmptyRefreshIcon : this.listEmptyRefreshIcon, ), listShowActionBar: this.getValue( - container ? container.listShowActionBar : this.listShowActionBar + container ? container.listShowActionBar : this.listShowActionBar, ), listActionBarCssClass: this.getValue( - container ? container.listActionBarCssClass : this.listActionBarCssClass + container + ? container.listActionBarCssClass + : this.listActionBarCssClass, ), listActionBarColor: this.getValue( - container ? container.listActionBarColor : this.listActionBarColor + container ? container.listActionBarColor : this.listActionBarColor, ), listActionBarForegroundColor: this.getValue( container ? container.listActionBarForegroundColor - : this.listActionBarForegroundColor + : this.listActionBarForegroundColor, ), listActionBarActions: this.getValue( - container ? container.listActionBarActions : this.listActionBarActions + container ? container.listActionBarActions : this.listActionBarActions, ), listShowSearchBar: this.getValue( - container ? container.listShowSearchBar : this.listShowSearchBar + container ? container.listShowSearchBar : this.listShowSearchBar, ), listSearchBarCssClass: this.getValue( - container ? container.listSearchBarCssClass : this.listSearchBarCssClass + container + ? container.listSearchBarCssClass + : this.listSearchBarCssClass, ), listSearchBarColor: this.getValue( - container ? container.listSearchBarColor : this.listSearchBarColor + container ? container.listSearchBarColor : this.listSearchBarColor, ), listSearchBarForegroundColor: this.getValue( container ? container.listSearchBarForegroundColor - : this.listSearchBarForegroundColor + : this.listSearchBarForegroundColor, ), listSearchBarSearchInputColor: this.getValue( container ? container.listSearchBarSearchInputColor - : this.listSearchBarSearchInputColor + : this.listSearchBarSearchInputColor, ), listSearchBarForegroundSearchInputColor: this.getValue( container ? container.listSearchBarForegroundSearchInputColor - : this.listSearchBarForegroundSearchInputColor + : this.listSearchBarForegroundSearchInputColor, ), listSearchBarType: this.getValue( - container ? container.listSearchBarType : this.listSearchBarType + container ? container.listSearchBarType : this.listSearchBarType, ), listSearchBarTitle: this.getValue( - container ? container.listSearchBarTitle : this.listSearchBarTitle + container ? container.listSearchBarTitle : this.listSearchBarTitle, ), listSearchBarValue: this.getValue( - container ? container.listSearchBarValue : this.listSearchBarValue + container ? container.listSearchBarValue : this.listSearchBarValue, ), listSearchBarEnterKeyHint: this.getValue( container ? container.listSearchBarEnterKeyHint - : this.listSearchBarEnterKeyHint + : this.listSearchBarEnterKeyHint, ), listSearchBarKeyboardType: this.getValue( container ? container.listSearchBarKeyboardType - : this.listSearchBarKeyboardType + : this.listSearchBarKeyboardType, ), listSearchBarSpellcheck: this.getValue( container ? container.listSearchBarSpellcheck - : this.listSearchBarSpellcheck + : this.listSearchBarSpellcheck, ), listSearchBarDebounce: this.getValue( - container ? container.listSearchBarDebounce : this.listSearchBarDebounce + container + ? container.listSearchBarDebounce + : this.listSearchBarDebounce, ), listSearchBarShowCancelButton: this.getValue( container ? container.listSearchBarShowCancelButton - : this.listSearchBarShowCancelButton + : this.listSearchBarShowCancelButton, ), listSearchBarCancelButtonIcon: this.getValue( container ? container.listSearchBarCancelButtonIcon - : this.listSearchBarCancelButtonIcon + : this.listSearchBarCancelButtonIcon, ), listSearchBarCancelButtonTitle: this.getValue( container ? container.listSearchBarCancelButtonTitle - : this.listSearchBarCancelButtonTitle + : this.listSearchBarCancelButtonTitle, ), listSearchBarCancelButtonIconColor: this.getValue( container ? container.listSearchBarCancelButtonIconColor - : this.listSearchBarCancelButtonIconColor + : this.listSearchBarCancelButtonIconColor, ), listSearchBarShowClearButton: this.getValue( container ? container.listSearchBarShowClearButton - : this.listSearchBarShowClearButton + : this.listSearchBarShowClearButton, ), listSearchBarClearButtonIcon: this.getValue( container ? container.listSearchBarClearButtonIcon - : this.listSearchBarClearButtonIcon + : this.listSearchBarClearButtonIcon, ), listSearchBarClearButtonIconColor: this.getValue( container ? container.listSearchBarClearButtonIconColor - : this.listSearchBarClearButtonIconColor + : this.listSearchBarClearButtonIconColor, ), listSearchBarSearchButtonIcon: this.getValue( container ? container.listSearchBarSearchButtonIcon - : this.listSearchBarSearchButtonIcon + : this.listSearchBarSearchButtonIcon, ), listSearchBarSearchButtonIconColor: this.getValue( container ? container.listSearchBarSearchButtonIconColor - : this.listSearchBarSearchButtonIconColor + : this.listSearchBarSearchButtonIconColor, ), }).pipe( map((data) => { @@ -1478,7 +1548,7 @@ export abstract class XComponentListContainerComponent listSearchBarQueryChange: this.listSearchBarQueryChange, listSearchBarOnEvent: this.listSearchBarOnEvent, }; - }) + }), ); } //#endregion