@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
24 lines (20 loc) • 6.12 kB
JavaScript
import * as i0 from '@angular/core';
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';
import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
class MagnifierControllerComponent {
constructor() {
this.magnifier = input.required();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MagnifierControllerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: MagnifierControllerComponent, isStandalone: true, selector: "ng-doc-magnifier-controller", inputs: { magnifier: { classPropertyName: "magnifier", publicName: "magnifier", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-up\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-in\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(200)\">\n <ng-doc-icon icon=\"zoom-in\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-left\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-center\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().reset()\">\n <ng-doc-icon icon=\"maximize\" />\n </button>\n <button\n class=\"ng-doc-button-right\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-down\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-out\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(-200)\">\n <ng-doc-icon icon=\"zoom-out\" />\n </button>\n</div>\n", styles: [":host{display:inline-flex;flex-direction:column;gap:var(--ng-doc-base-gutter)}:host .ng-doc-controls-row{display:flex;gap:var(--ng-doc-base-gutter);justify-content:center}:host .ng-doc-controls-row:first-child,:host .ng-doc-controls-row:last-child{justify-content:flex-end}:host button.ng-doc-button-up ng-doc-icon[icon=chevron-right]{transform:rotate(270deg)}:host button.ng-doc-button-down ng-doc-icon[icon=chevron-right]{transform:rotate(90deg)}:host button.ng-doc-button-left ng-doc-icon[icon=chevron-right]{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: MagnifierControllerComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-magnifier-controller', imports: [NgDocButtonIconComponent, NgDocIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-up\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-in\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(200)\">\n <ng-doc-icon icon=\"zoom-in\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-left\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-center\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().reset()\">\n <ng-doc-icon icon=\"maximize\" />\n </button>\n <button\n class=\"ng-doc-button-right\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-down\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-out\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(-200)\">\n <ng-doc-icon icon=\"zoom-out\" />\n </button>\n</div>\n", styles: [":host{display:inline-flex;flex-direction:column;gap:var(--ng-doc-base-gutter)}:host .ng-doc-controls-row{display:flex;gap:var(--ng-doc-base-gutter);justify-content:center}:host .ng-doc-controls-row:first-child,:host .ng-doc-controls-row:last-child{justify-content:flex-end}:host button.ng-doc-button-up ng-doc-icon[icon=chevron-right]{transform:rotate(270deg)}:host button.ng-doc-button-down ng-doc-icon[icon=chevron-right]{transform:rotate(90deg)}:host button.ng-doc-button-left ng-doc-icon[icon=chevron-right]{transform:rotate(180deg)}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MagnifierControllerComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-magnifier-controller.mjs.map