systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
113 lines (112 loc) • 4.63 kB
TypeScript
import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import * as i0 from "@angular/core";
export declare enum ActionButtonType {
BUTTON = 0,
TOGGLE_BUTTON = 1,
DROP_DOWN = 2
}
export interface ActionButton {
action: string;
label: string;
tooltip?: string;
type: ActionButtonType;
state?: {
checked?: boolean;
disabled: boolean;
};
}
export declare class ImageViewerComponent implements OnInit {
private readonly chref;
private readonly elementRef;
private readonly sanitizer;
imageSrc: string;
imageTitle: string;
overlayText: string;
actionButtons: ActionButton[];
imageFilters: string;
showSaveButton: boolean;
showZoomByAreaButton: boolean;
showAdjustButton: boolean;
showZoomScale: boolean;
showSliderToolTip: boolean;
sliderZoomMin: number;
sliderZoomMax: number;
sliderZoomStep: number;
transparentBackgroundForButtons: boolean;
overlapImageWithButtons: boolean;
allowBorderColor: string;
clickActionButton: EventEmitter<string>;
clickOverlayText: EventEmitter<any>;
imageViewerWrapper: ElementRef;
imageViewerImg: ElementRef;
zoomEnabled: boolean;
dragEnabled: boolean;
imgParams: {
sliderZoomPct: any;
filter: any;
top: number;
left: number;
width: any;
height: any;
};
zoomSelector: {
visible: boolean;
allow: boolean;
top: any;
left: any;
width: any;
height: any;
};
zoomScale: {
totalWidth: any;
sliderThumb: number;
chunks: number;
marks: {
marginLeft: number;
label: string;
}[];
};
actionButtonType: any;
safeHtml: SafeHtml;
filteredUrl: string;
imageWidth: string;
private zoomArea;
private viewPort;
private image;
private wrapper;
private imageClicked;
constructor(chref: ChangeDetectorRef, elementRef: ElementRef, sanitizer: DomSanitizer);
ngOnInit(): void;
doMouseDown(event: any): void;
doMouseMove(event: MouseEvent): void;
doMouseUp(): void;
getWidth(): string;
getFilter(): string;
setFilter(filter: string): void;
doAdjust(): void;
toggleZoomByArea(): void;
sliderZoomChanged(): void;
setInitialValues(): void;
isFilterEnabled(action: string): boolean;
getDropMainDownLabel(dropDownLabel: string): string;
getDropDownLabels(dropDownLabel: string): string[];
getDropDownAction(dropDownActions: string, i: number): string;
getFilterUrl(): string;
private initializeCommonParameters;
private initializeZoomByAreaAction;
private initializeDragAction;
private updateZoomSelector;
private resizeZoomSelectorAndImage;
private getTargetMagnification;
private getSliderMarkMarginByZoomFactor;
private scrollViewport;
private deactivateZoomSelector;
private activateZoomSelector;
private getSliderPct;
private imageOverflowViewport;
private scaleImage;
private getInitialZoom;
static ɵfac: i0.ɵɵFactoryDeclaration<ImageViewerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ImageViewerComponent, "systelab-image-viewer", never, { "imageSrc": { "alias": "imageSrc"; "required": false; }; "imageTitle": { "alias": "imageTitle"; "required": false; }; "overlayText": { "alias": "overlayText"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; "imageFilters": { "alias": "imageFilters"; "required": false; }; "showSaveButton": { "alias": "showSaveButton"; "required": false; }; "showZoomByAreaButton": { "alias": "showZoomByAreaButton"; "required": false; }; "showAdjustButton": { "alias": "showAdjustButton"; "required": false; }; "showZoomScale": { "alias": "showZoomScale"; "required": false; }; "showSliderToolTip": { "alias": "showSliderToolTip"; "required": false; }; "sliderZoomMin": { "alias": "sliderZoomMin"; "required": false; }; "sliderZoomMax": { "alias": "sliderZoomMax"; "required": false; }; "sliderZoomStep": { "alias": "sliderZoomStep"; "required": false; }; "transparentBackgroundForButtons": { "alias": "transparentBackgroundForButtons"; "required": false; }; "overlapImageWithButtons": { "alias": "overlapImageWithButtons"; "required": false; }; "allowBorderColor": { "alias": "allowBorderColor"; "required": false; }; }, { "clickActionButton": "clickActionButton"; "clickOverlayText": "clickOverlayText"; }, never, never, false, never>;
}