ngx-extended-pdf-viewer/esm2022/lib/toolbar/pdf-zoom-toolbar/pdf-zoom-dropdown/pdf-zoom-dropdown.component.mjs

Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.

import { Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../../responsive-visibility";
export class PdfZoomDropdownComponent {
    element;
    showZoomDropdown = true;
    _zoomLevels = [];
    set zoomLevels(levels) {
        this._zoomLevels = levels.map((l) => this.valueToZoomLevel(l));
    }
    sizeSelector;
    constructor(element) {
        this.element = element;
    }
    valueToZoomLevel(value) {
        // const new TranslatePipe().transform('pdfjs-page-scale-percent', '{ $scale } %');
        if (value.toString().endsWith('%')) {
            value = value.toString().replace('%', '');
            value = Number(value) / 100;
        }
        const numericalValue = Number(value);
        if (!numericalValue) {
            const v = String(value);
            return {
                id: this.snakeToCamel(value + 'Option'),
                value: v,
                dataL10nId: 'pdfjs-page-scale-' + v.replace('page-', ''),
                dataL10nArgs: undefined,
                displayValue: v,
            };
        }
        const percentage = Math.round(numericalValue * 100);
        const percentageAsString = isNaN(percentage) ? '' : String(percentage);
        return {
            id: `scale_${percentage}`,
            value: String(numericalValue),
            dataL10nId: 'pdfjs-page-scale-percent',
            dataL10nArgs: `{ "scale": ${percentageAsString} }`,
            displayValue: '',
        };
    }
    snakeToCamel(str) {
        // idea found here: https://hisk.io/javascript-snake-to-camel/
        return str.replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PdfZoomDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PdfZoomDropdownComponent, selector: "pdf-zoom-dropdown", inputs: { showZoomDropdown: "showZoomDropdown", zoomLevels: "zoomLevels" }, viewQueries: [{ propertyName: "sizeSelector", first: true, predicate: ["sizeSelector"], descendants: true }], ngImport: i0, template: "<span\n  id=\"scaleSelectContainer\"\n  [class]=\"showZoomDropdown | responsiveCSSClass: 'hiddenTinyView'\"\n>\n  <select\n    id=\"scaleSelect\"\n    title=\"Zoom\"\n    data-l10n-id=\"pdfjs-zoom-select\"\n    #sizeSelector\n  >\n    @for (level of _zoomLevels; track level.id) {\n      <option\n        [id]=\"level.id\"\n        [attr.value]=\"level.value\"\n        [attr.data-l10n-id]=\"level.dataL10nId\"\n        [attr.data-l10n-args]=\"level.dataL10nArgs\"\n      >\n        {{ level.displayValue }}\n      </option>\n    }\n    <option\n      id=\"customScaleOption\"\n      title=\"\"\n      value=\"custom\"\n      disabled=\"disabled\"\n      hidden=\"true\"\n      data-l10n-id=\"pdfjs-page-scale-percent\"\n      data-l10n-args='{ \"scale\": 0 }'\n    >\n      0%\n    </option>\n  </select>\n</span>\n", styles: ["select{font-size:12px;height:26px;cursor:pointer;border-radius:2px;border-width:1px;border-style:solid;padding-top:0;padding-bottom:0}#customScaleOption{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i2.ResponsiveCSSClassPipe, name: "responsiveCSSClass" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PdfZoomDropdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pdf-zoom-dropdown', template: "<span\n  id=\"scaleSelectContainer\"\n  [class]=\"showZoomDropdown | responsiveCSSClass: 'hiddenTinyView'\"\n>\n  <select\n    id=\"scaleSelect\"\n    title=\"Zoom\"\n    data-l10n-id=\"pdfjs-zoom-select\"\n    #sizeSelector\n  >\n    @for (level of _zoomLevels; track level.id) {\n      <option\n        [id]=\"level.id\"\n        [attr.value]=\"level.value\"\n        [attr.data-l10n-id]=\"level.dataL10nId\"\n        [attr.data-l10n-args]=\"level.dataL10nArgs\"\n      >\n        {{ level.displayValue }}\n      </option>\n    }\n    <option\n      id=\"customScaleOption\"\n      title=\"\"\n      value=\"custom\"\n      disabled=\"disabled\"\n      hidden=\"true\"\n      data-l10n-id=\"pdfjs-page-scale-percent\"\n      data-l10n-args='{ \"scale\": 0 }'\n    >\n      0%\n    </option>\n  </select>\n</span>\n", styles: ["select{font-size:12px;height:26px;cursor:pointer;border-radius:2px;border-width:1px;border-style:solid;padding-top:0;padding-bottom:0}#customScaleOption{display:none}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { showZoomDropdown: [{
                type: Input
            }], zoomLevels: [{
                type: Input
            }], sizeSelector: [{
                type: ViewChild,
                args: ['sizeSelector']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGRmLXpvb20tZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWV4dGVuZGVkLXBkZi12aWV3ZXIvc3JjL2xpYi90b29sYmFyL3BkZi16b29tLXRvb2xiYXIvcGRmLXpvb20tZHJvcGRvd24vcGRmLXpvb20tZHJvcGRvd24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWV4dGVuZGVkLXBkZi12aWV3ZXIvc3JjL2xpYi90b29sYmFyL3BkZi16b29tLXRvb2xiYXIvcGRmLXpvb20tZHJvcGRvd24vcGRmLXpvb20tZHJvcGRvd24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBZXhFLE1BQU0sT0FBTyx3QkFBd0I7SUFZZjtJQVZiLGdCQUFnQixHQUF5QixJQUFJLENBQUM7SUFDOUMsV0FBVyxHQUFxQixFQUFFLENBQUM7SUFFMUMsSUFDVyxVQUFVLENBQUMsTUFBOEI7UUFDbEQsSUFBSSxDQUFDLFdBQVcsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRTBCLFlBQVksQ0FBTTtJQUU3QyxZQUFvQixPQUFtQjtRQUFuQixZQUFPLEdBQVAsT0FBTyxDQUFZO0lBQUcsQ0FBQztJQUVuQyxnQkFBZ0IsQ0FBQyxLQUFzQjtRQUM3QyxtRkFBbUY7UUFFbkYsSUFBSSxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ2xDLEtBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUMxQyxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQztTQUM3QjtRQUNELE1BQU0sY0FBYyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ25CLE1BQU0sQ0FBQyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN4QixPQUFPO2dCQUNMLEVBQUUsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssR0FBRyxRQUFRLENBQUM7Z0JBQ3ZDLEtBQUssRUFBRSxDQUFDO2dCQUNSLFVBQVUsRUFBRSxtQkFBbUIsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7Z0JBQ3hELFlBQVksRUFBRSxTQUFTO2dCQUN2QixZQUFZLEVBQUUsQ0FBQzthQUNoQixDQUFDO1NBQ0g7UUFDRCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsR0FBRyxHQUFHLENBQUMsQ0FBQztRQUNwRCxNQUFNLGtCQUFrQixHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDdkUsT0FBTztZQUNMLEVBQUUsRUFBRSxTQUFTLFVBQVUsRUFBRTtZQUN6QixLQUFLLEVBQUUsTUFBTSxDQUFDLGNBQWMsQ0FBQztZQUM3QixVQUFVLEVBQUUsMEJBQTBCO1lBQ3RDLFlBQVksRUFBRSxjQUFjLGtCQUFrQixJQUFJO1lBQ2xELFlBQVksRUFBRSxFQUFFO1NBQ2pCLENBQUM7SUFDSixDQUFDO0lBRU8sWUFBWSxDQUFDLEdBQVc7UUFDOUIsOERBQThEO1FBQzlELE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN2RyxDQUFDO3dHQTlDVSx3QkFBd0I7NEZBQXhCLHdCQUF3QixtUENmckMsa3pCQWlDQTs7NEZEbEJhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDRSxtQkFBbUI7K0VBTXRCLGdCQUFnQjtzQkFEdEIsS0FBSztnQkFLSyxVQUFVO3NCQURwQixLQUFLO2dCQUtxQixZQUFZO3NCQUF0QyxTQUFTO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJlc3BvbnNpdmVWaXNpYmlsaXR5IH0gZnJvbSAnLi4vLi4vLi4vcmVzcG9uc2l2ZS12aXNpYmlsaXR5JztcblxuaW50ZXJmYWNlIFpvb21MZXZlbCB7XG4gIGlkOiBzdHJpbmc7XG4gIGRhdGFMMTBuSWQ6IHN0cmluZztcbiAgZGF0YUwxMG5BcmdzOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIHZhbHVlOiBzdHJpbmc7XG4gIGRpc3BsYXlWYWx1ZTogc3RyaW5nO1xufVxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGRmLXpvb20tZHJvcGRvd24nLFxuICB0ZW1wbGF0ZVVybDogJy4vcGRmLXpvb20tZHJvcGRvd24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wZGYtem9vbS1kcm9wZG93bi5jb21wb25lbnQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFBkZlpvb21Ecm9wZG93bkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzaG93Wm9vbURyb3Bkb3duOiBSZXNwb25zaXZlVmlzaWJpbGl0eSA9IHRydWU7XG4gIHB1YmxpYyBfem9vbUxldmVsczogQXJyYXk8Wm9vbUxldmVsPiA9IFtdO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgem9vbUxldmVscyhsZXZlbHM6IEFycmF5PHN0cmluZyB8IG51bWJlcj4pIHtcbiAgICB0aGlzLl96b29tTGV2ZWxzID0gbGV2ZWxzLm1hcCgobCkgPT4gdGhpcy52YWx1ZVRvWm9vbUxldmVsKGwpKTtcbiAgfVxuXG4gIEBWaWV3Q2hpbGQoJ3NpemVTZWxlY3RvcicpIHNpemVTZWxlY3RvcjogYW55O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZikge31cblxuICBwcml2YXRlIHZhbHVlVG9ab29tTGV2ZWwodmFsdWU6IHN0cmluZyB8IG51bWJlcik6IFpvb21MZXZlbCB7XG4gICAgLy8gY29uc3QgbmV3IFRyYW5zbGF0ZVBpcGUoKS50cmFuc2Zvcm0oJ3BkZmpzLXBhZ2Utc2NhbGUtcGVyY2VudCcsICd7ICRzY2FsZSB9ICUnKTtcblxuICAgIGlmICh2YWx1ZS50b1N0cmluZygpLmVuZHNXaXRoKCclJykpIHtcbiAgICAgIHZhbHVlID0gdmFsdWUudG9TdHJpbmcoKS5yZXBsYWNlKCclJywgJycpO1xuICAgICAgdmFsdWUgPSBOdW1iZXIodmFsdWUpIC8gMTAwO1xuICAgIH1cbiAgICBjb25zdCBudW1lcmljYWxWYWx1ZSA9IE51bWJlcih2YWx1ZSk7XG4gICAgaWYgKCFudW1lcmljYWxWYWx1ZSkge1xuICAgICAgY29uc3QgdiA9IFN0cmluZyh2YWx1ZSk7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBpZDogdGhpcy5zbmFrZVRvQ2FtZWwodmFsdWUgKyAnT3B0aW9uJyksXG4gICAgICAgIHZhbHVlOiB2LFxuICAgICAgICBkYXRhTDEwbklkOiAncGRmanMtcGFnZS1zY2FsZS0nICsgdi5yZXBsYWNlKCdwYWdlLScsICcnKSxcbiAgICAgICAgZGF0YUwxMG5BcmdzOiB1bmRlZmluZWQsXG4gICAgICAgIGRpc3BsYXlWYWx1ZTogdixcbiAgICAgIH07XG4gICAgfVxuICAgIGNvbnN0IHBlcmNlbnRhZ2UgPSBNYXRoLnJvdW5kKG51bWVyaWNhbFZhbHVlICogMTAwKTtcbiAgICBjb25zdCBwZXJjZW50YWdlQXNTdHJpbmcgPSBpc05hTihwZXJjZW50YWdlKSA/ICcnIDogU3RyaW5nKHBlcmNlbnRhZ2UpO1xuICAgIHJldHVybiB7XG4gICAgICBpZDogYHNjYWxlXyR7cGVyY2VudGFnZX1gLFxuICAgICAgdmFsdWU6IFN0cmluZyhudW1lcmljYWxWYWx1ZSksXG4gICAgICBkYXRhTDEwbklkOiAncGRmanMtcGFnZS1zY2FsZS1wZXJjZW50JyxcbiAgICAgIGRhdGFMMTBuQXJnczogYHsgXCJzY2FsZVwiOiAke3BlcmNlbnRhZ2VBc1N0cmluZ30gfWAsXG4gICAgICBkaXNwbGF5VmFsdWU6ICcnLFxuICAgIH07XG4gIH1cblxuICBwcml2YXRlIHNuYWtlVG9DYW1lbChzdHI6IHN0cmluZykge1xuICAgIC8vIGlkZWEgZm91bmQgaGVyZTogaHR0cHM6Ly9oaXNrLmlvL2phdmFzY3JpcHQtc25ha2UtdG8tY2FtZWwvXG4gICAgcmV0dXJuIHN0ci5yZXBsYWNlKC8oWy1fXVthLXpdKS9nLCAoZ3JvdXApID0+IGdyb3VwLnRvVXBwZXJDYXNlKCkucmVwbGFjZSgnLScsICcnKS5yZXBsYWNlKCdfJywgJycpKTtcbiAgfVxufVxuIiwiPHNwYW5cbiAgaWQ9XCJzY2FsZVNlbGVjdENvbnRhaW5lclwiXG4gIFtjbGFzc109XCJzaG93Wm9vbURyb3Bkb3duIHwgcmVzcG9uc2l2ZUNTU0NsYXNzOiAnaGlkZGVuVGlueVZpZXcnXCJcbj5cbiAgPHNlbGVjdFxuICAgIGlkPVwic2NhbGVTZWxlY3RcIlxuICAgIHRpdGxlPVwiWm9vbVwiXG4gICAgZGF0YS1sMTBuLWlkPVwicGRmanMtem9vbS1zZWxlY3RcIlxuICAgICNzaXplU2VsZWN0b3JcbiAgPlxuICAgIEBmb3IgKGxldmVsIG9mIF96b29tTGV2ZWxzOyB0cmFjayBsZXZlbC5pZCkge1xuICAgICAgPG9wdGlvblxuICAgICAgICBbaWRdPVwibGV2ZWwuaWRcIlxuICAgICAgICBbYXR0ci52YWx1ZV09XCJsZXZlbC52YWx1ZVwiXG4gICAgICAgIFthdHRyLmRhdGEtbDEwbi1pZF09XCJsZXZlbC5kYXRhTDEwbklkXCJcbiAgICAgICAgW2F0dHIuZGF0YS1sMTBuLWFyZ3NdPVwibGV2ZWwuZGF0YUwxMG5BcmdzXCJcbiAgICAgID5cbiAgICAgICAge3sgbGV2ZWwuZGlzcGxheVZhbHVlIH19XG4gICAgICA8L29wdGlvbj5cbiAgICB9XG4gICAgPG9wdGlvblxuICAgICAgaWQ9XCJjdXN0b21TY2FsZU9wdGlvblwiXG4gICAgICB0aXRsZT1cIlwiXG4gICAgICB2YWx1ZT1cImN1c3RvbVwiXG4gICAgICBkaXNhYmxlZD1cImRpc2FibGVkXCJcbiAgICAgIGhpZGRlbj1cInRydWVcIlxuICAgICAgZGF0YS1sMTBuLWlkPVwicGRmanMtcGFnZS1zY2FsZS1wZXJjZW50XCJcbiAgICAgIGRhdGEtbDEwbi1hcmdzPSd7IFwic2NhbGVcIjogMCB9J1xuICAgID5cbiAgICAgIDAlXG4gICAgPC9vcHRpb24+XG4gIDwvc2VsZWN0PlxuPC9zcGFuPlxuIl19