@pdftools/four-heights-pdf-web-viewer 4.3.6

package/es6/pdf-web-viewer/views/annotationbar/Annotationbar.js

@@ -0,0 +1,21 @@
+import { h } from '../../../lib/hyperapp';
+import { ScreenSize } from '../../state/layout';
+import { translationManager } from '../../../common/TranslationManager';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { classNames } from '../../../common/classNames';
+import { icons } from '../../../common/icons';
+import { CustomButtons } from '../CustomButtons';
+/** internal */
+export const Annotationbar = ({}) => (state, actions) => {
+    const smallScreen = state.layout.screenSize === ScreenSize.Small;
+    if (smallScreen || !state.licenseFeatures.annotate) {
+        return null;
+    }
+    return (h("div", { class: classNames('pwv-annotationbar', `pwv-annotationbar-${state.options.viewer.general.annotationBarPosition}`) },
+        state.options.modules
+            .filter(({ moduleInfo }) => moduleInfo.requiredFeatures.annotate)
+            .map((m) => (h(ToolbarButton, { icon: icons[m.moduleInfo.icon], tooltip: translationManager.getText(m.moduleInfo.translationKey), onClick: () => {
+                actions.api.activateModule(m.moduleInfo.name, undefined);
+            } }))),
+        h(CustomButtons, { location: "annotationbar", style: "button" })));
+};

package/es6/pdf-web-viewer/views/appbar/AddonsToolbar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const AddonsToolbar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/AddonsToolbar.js

@@ -0,0 +1,35 @@
+import { h } from '../../../lib/hyperapp';
+import { ScreenSize } from '../../state/layout';
+import { translationManager } from '../../../common/TranslationManager';
+import { icons } from '../../../common/icons';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { AnnotationsMenu } from './AnnotationsMenu';
+import { CustomButtons } from '../CustomButtons';
+/** internal */
+export const AddonsToolbar = ({}) => (state, actions) => {
+    const smallScreen = state.layout.screenSize === ScreenSize.Small;
+    const mediumScreen = state.layout.screenSize <= ScreenSize.Medium;
+    const { sidebar } = state.options.viewer;
+    const { disableAnnotationToolbar } = state.options.viewer.general;
+    return (h(ToolbarItemGroup, { className: "pwv-AddonsBar" },
+        !disableAnnotationToolbar && smallScreen && h(AnnotationsMenu, null),
+        state.options.viewer.permissions.enableSearch && (h(ToolbarButton, { name: "toggleSearch", tooltip: translationManager.getText('toolbar.search'), icon: icons.search, onClick: () => {
+                if (!state.search.showSearch) {
+                    actions.api.resetViewerMode();
+                    actions.search.openSearch();
+                }
+                else {
+                    actions.api.endSearch();
+                    actions.search.closeSearch();
+                }
+            }, active: state.search.showSearch })),
+        !smallScreen &&
+            (sidebar.thumbnailNavigation ||
+                sidebar.outlineNavigation ||
+                sidebar.annotationNavigation) && (h(ToolbarButton, { name: "toggleSidePane", tooltip: translationManager.getText('toolbar.toggleSidePane'), icon: icons.docNavigation, onClick: () => {
+                actions.api.loadNavigationItems();
+                actions.navigationPanel.toggleNavigationPanel();
+            }, active: state.navigationPanel.showNavigation })),
+        h(CustomButtons, { location: "informationbar", style: "button" })));
+};

package/es6/pdf-web-viewer/views/appbar/AnnotationsMenu.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const AnnotationsMenu: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/AnnotationsMenu.js

@@ -0,0 +1,22 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { Icon, icons } from '../../../common/Icon';
+import { DropdownMenu } from '../../../common/DropdownMenu';
+import { CustomButtons } from '../CustomButtons';
+/** internal */
+export const AnnotationsMenu = ({}) => (state, actions) => {
+    if (!state.licenseFeatures.annotate) {
+        return null;
+    }
+    return (h(DropdownMenu, { className: "pwv-LgHidden pwv-AnnotationMenu", tooltip: translationManager.getText('toolbar.annotationsMenuButton'), icon: icons.edit },
+        h("div", null,
+            state.options.modules
+                .filter((m) => m.moduleInfo.requiredFeatures.annotate)
+                .map((m) => (h("button", { class: "pwv-DropdownItem", onclick: () => {
+                    actions.api.activateModule(m.moduleInfo.name, undefined);
+                } },
+                h(Icon, { icon: icons[m.moduleInfo.icon] }),
+                ' ',
+                translationManager.getText(m.moduleInfo.translationKey)))),
+            h(CustomButtons, { location: "annotationbar", style: "listItem" }))));
+};

package/es6/pdf-web-viewer/views/appbar/AppBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const AppBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/AppBar.js

@@ -0,0 +1,26 @@
+import { h } from '../../../lib/hyperapp';
+import { ScreenSize } from '../../state/layout';
+import { Toolbar } from '../../../common/Toolbar';
+import { ToolbarSeparator } from '../../../common/ToolbarSeparator';
+import { Menu } from './Menu';
+import { DocumentBar } from './DocumentBar';
+import { NavigationBar } from './NavigationBar';
+import { ZoomBar } from './ZoomBar';
+import { SearchBar } from './SearchBar';
+import { ViewBar } from './ViewBar';
+import { AddonsToolbar } from './AddonsToolbar';
+/** internal */
+export const AppBar = ({}) => (state, actions) => {
+    const mediumScreen = state.layout.screenSize <= ScreenSize.Medium;
+    const { disableMainToolbar } = state.options.viewer.general;
+    return (h("div", { class: "pwv-AppBar" },
+        !state.options.viewer.general.disableMainToolbar && (h(Toolbar, { allowWrap: true },
+            mediumScreen ? h(Menu, null) : h(DocumentBar, null),
+            h(NavigationBar, null),
+            h(ToolbarSeparator, null),
+            h(ZoomBar, null),
+            h(ToolbarSeparator, null),
+            h(ViewBar, null),
+            h(AddonsToolbar, null))),
+        state.search.showSearch && state.options.viewer.permissions.enableSearch && h(SearchBar, null)));
+};

package/es6/pdf-web-viewer/views/appbar/DocumentBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const DocumentBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/DocumentBar.js

@@ -0,0 +1,36 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { icons } from '../../../common/Icon';
+import { ToolbarFileButton } from '../../../common/ToolbarFileButton';
+import { CustomButtons } from '../CustomButtons';
+/** internal */
+export const DocumentBar = ({}) => (state, actions) => {
+    const { permissions, callbacks } = state.options.viewer;
+    const onSaveFileButtonClicked = () => {
+        var _a;
+        if (callbacks.onSaveFileButtonClicked) {
+            callbacks.onSaveFileButtonClicked();
+        }
+        else {
+            const password = (_a = state.passwordForm) === null || _a === void 0 ? void 0 : _a.password;
+            actions.api.downloadFile(password ? { password } : undefined);
+        }
+    };
+    const onCloseFileButtonClicked = () => {
+        if (callbacks.onCloseFileButtonClicked) {
+            callbacks.onCloseFileButtonClicked();
+        }
+        else {
+            actions.api.close();
+        }
+    };
+    return (h(ToolbarItemGroup, { className: "pwv-DocumentBar" },
+        permissions.allowOpenFile && !callbacks.onOpenFileButtonClicked && (h(ToolbarFileButton, { name: "openDocument", className: "pwv-MdHidden pwv-SmHidden", icon: icons.openFile, accept: ".pdf", tooltip: translationManager.getText('toolbar.openDocument'), onFileSelected: (file) => actions.api.open({ pdfFile: { data: file } }) })),
+        permissions.allowOpenFile && callbacks.onOpenFileButtonClicked && (h(ToolbarButton, { name: "openDocument", className: "pwv-MdHidden pwv-SmHidden", icon: icons.openFile, tooltip: translationManager.getText('toolbar.openDocument'), onClick: callbacks.onOpenFileButtonClicked })),
+        permissions.allowSaveFile && (h(ToolbarButton, { name: "saveDocument", className: "pwv-MdHidden pwv-SmHidden", icon: icons.saveFile, tooltip: translationManager.getText('toolbar.saveDocument'), onClick: onSaveFileButtonClicked })),
+        permissions.allowCloseFile && (h(ToolbarButton, { name: "closeDocument", className: "pwv-MdHidden pwv-SmHidden", icon: icons.closeFile, tooltip: translationManager.getText('toolbar.closeDocument'), onClick: onCloseFileButtonClicked })),
+        permissions.allowPrinting && (h(ToolbarButton, { name: "print", className: "pwv-MdHidden pwv-SmHidden", icon: icons.print, tooltip: translationManager.getText('toolbar.print'), onClick: actions.api.print })),
+        h(CustomButtons, { location: "documentbar", style: "button" })));
+};

package/es6/pdf-web-viewer/views/appbar/Menu.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const Menu: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/Menu.js

@@ -0,0 +1,80 @@
+import { h } from '../../../lib/hyperapp';
+import { ScreenSize } from '../../state/layout';
+import { translationManager } from '../../../common/TranslationManager';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { Icon, icons } from '../../../common/Icon';
+import { DropdownMenu } from '../../../common/DropdownMenu';
+import { DropdownSeparator } from '../../../common/DropdownSeparator';
+import { CustomButtons } from '../CustomButtons';
+/** internal */
+export const Menu = ({}) => (state, actions) => {
+    const { permissions, callbacks } = state.options.viewer;
+    const { outlineNavigation, annotationNavigation } = state.options.viewer.sidebar;
+    const { screenSize } = state.layout;
+    const onSaveFileButtonClicked = () => {
+        if (callbacks.onSaveFileButtonClicked) {
+            callbacks.onSaveFileButtonClicked();
+        }
+        else {
+            actions.api.downloadFile();
+        }
+    };
+    const onCloseFileButtonClicked = () => {
+        if (callbacks.onCloseFileButtonClicked) {
+            callbacks.onCloseFileButtonClicked();
+        }
+        else {
+            actions.api.close();
+        }
+    };
+    return (h(ToolbarItemGroup, { className: "pwv-DocumentBar" },
+        h(DropdownMenu, { className: "pwv-LgHidden", icon: icons.bars },
+            h("div", null,
+                permissions.allowOpenFile && !callbacks.onOpenFileButtonClicked && (h("label", { class: "pwv-DropdownItem" },
+                    h(Icon, { icon: icons.openFile }),
+                    " ",
+                    translationManager.getText('toolbar.openDocument'),
+                    h("input", { accept: ".pdf", type: "file", onchange: (e) => {
+                            if (e.currentTarget.files && e.currentTarget.files.length) {
+                                const file = e.currentTarget.files[0];
+                                actions.api.open({ pdfFile: { data: file } });
+                            }
+                        }, style: { display: 'none' } }))),
+                permissions.allowOpenFile && callbacks.onOpenFileButtonClicked && (h("button", { class: "pwv-DropdownItem", onclick: callbacks.onOpenFileButtonClicked },
+                    h(Icon, { icon: icons.openFile }),
+                    " ",
+                    translationManager.getText('toolbar.openDocument'))),
+                permissions.allowSaveFile && (h("button", { class: "pwv-DropdownItem", onclick: onSaveFileButtonClicked },
+                    h(Icon, { icon: icons.saveFile }),
+                    " ",
+                    translationManager.getText('toolbar.saveDocument'))),
+                permissions.allowCloseFile && (h("button", { class: "pwv-DropdownItem", onclick: onCloseFileButtonClicked },
+                    h(Icon, { icon: icons.closeFile }),
+                    ' ',
+                    translationManager.getText('toolbar.closeDocument'))),
+                permissions.allowPrinting && (h("button", { class: "pwv-DropdownItem", onclick: actions.api.print },
+                    h(Icon, { icon: icons.print }),
+                    " ",
+                    translationManager.getText('toolbar.print'))),
+                h(CustomButtons, { location: "documentbar", style: "listItem" }),
+                permissions.allowRotateView && h(DropdownSeparator, null),
+                permissions.allowRotateView && (h("button", { class: "pwv-DropdownItem", onclick: actions.api.rotate },
+                    h(Icon, { icon: icons.rotate }),
+                    " ",
+                    translationManager.getText('toolbar.rotateView'))),
+                screenSize === ScreenSize.Small && (outlineNavigation || annotationNavigation) && (h(DropdownSeparator, null)),
+                screenSize === ScreenSize.Small && outlineNavigation && (h("button", { class: "pwv-DropdownItem", onclick: () => {
+                        actions.api.loadNavigationItems();
+                        actions.navigationPanel.selectNavigation('outline');
+                    } },
+                    h(Icon, { icon: icons.sidePaneOutline }),
+                    ' ',
+                    translationManager.getText('sideNavigation.outline'))),
+                screenSize === ScreenSize.Small && annotationNavigation && (h("button", { class: "pwv-DropdownItem", onclick: () => {
+                        actions.api.loadNavigationItems();
+                        actions.navigationPanel.selectNavigation('annotation');
+                    } },
+                    h(Icon, { icon: icons.sidePaneAnnotation }),
+                    ' ',
+                    translationManager.getText('sideNavigation.annotation')))))));
+};

package/es6/pdf-web-viewer/views/appbar/NavigationBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const NavigationBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/NavigationBar.js

@@ -0,0 +1,74 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { icons } from '../../../common/icons';
+const resizeObserver = new ResizeObserver((e) => {
+    if (e.length) {
+        e.forEach((elm) => {
+            if (elm.target && elm.target.parentElement) {
+                const input = elm.target.parentElement.querySelector('input');
+                if (input) {
+                    input.style.minWidth = `${elm.contentRect.width + 4}px`;
+                }
+            }
+        });
+    }
+});
+/** internal */
+export const NavigationBar = ({}) => (state, actions) => {
+    const { pdfDocument } = state;
+    return (h(ToolbarItemGroup, { className: "pwv-NavigationBar" },
+        h(ToolbarButton, { name: "previewsPage", tooltip: translationManager.getText('toolbar.previewsPage'), icon: icons.previousPage, onClick: () => actions.api.previousPage(), disabled: pdfDocument.pageNumber <= 1 }),
+        h("div", { class: "pwv-ToolbarItem pwv-navigation-toolbar-pageinput" },
+            h("input", { name: "pageNumber", value: pdfDocument.pageNumber, onkeydown: (e) => {
+                    if (e.key === 'ArrowDown') {
+                        actions.api.nextPage();
+                    }
+                    else if (e.key === 'ArrowUp') {
+                        actions.api.previousPage();
+                    }
+                    else if (e.key === 'Enter') {
+                        const input = e.currentTarget;
+                        if (input && input.value) {
+                            actions.api.setPageNumber(parseInt(input.value, undefined));
+                        }
+                    }
+                    else if ((e.key.charCodeAt(0) >= 48 && e.key.charCodeAt(0) <= 57) || // allow numbers 0-9
+                        e.key === 'Delete' ||
+                        e.key === 'Backspace' ||
+                        e.key === 'ArrowLeft' ||
+                        e.key === 'ArrowRight' ||
+                        e.key === 'Tab') {
+                        // do nothing
+                    }
+                    else {
+                        e.preventDefault();
+                    }
+                    e.stopPropagation();
+                }, onblur: (e) => {
+                    let page = parseInt(e.target.value, undefined);
+                    if (Number.isNaN(page)) {
+                        page = actions.api.getPageNumber();
+                    }
+                    else if (page < 1) {
+                        page = 1;
+                    }
+                    else {
+                        const pageCount = actions.api.getPageCount();
+                        if (page > pageCount) {
+                            page = pageCount;
+                        }
+                    }
+                    ;
+                    e.target.value = page.toString();
+                    actions.api.setPageNumber(page);
+                }, disabled: pdfDocument.pageCount < 1 }),
+            h("span", null, translationManager.getText('toolbar.pageOf')),
+            h("label", { oncreate: (label) => {
+                    resizeObserver.observe(label);
+                }, onremove: (label) => {
+                    resizeObserver.unobserve(label);
+                } }, pdfDocument.pageCount)),
+        h(ToolbarButton, { name: "nextPage", tooltip: translationManager.getText('toolbar.nextPage'), icon: icons.nextPage, onClick: () => actions.api.nextPage(), disabled: pdfDocument.pageNumber === pdfDocument.pageCount })));
+};

package/es6/pdf-web-viewer/views/appbar/SearchBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const SearchBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/SearchBar.js

@@ -0,0 +1,83 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { Toolbar } from '../../../common/Toolbar';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { ToolbarSeparator } from '../../../common/ToolbarSeparator';
+import { icons } from '../../../common/icons';
+import { getKeyboardCommands } from '../../../common/utils';
+import { SearchOptions } from './SearchOptions';
+/** internal */
+export const SearchBar = ({}) => (state, actions) => (h(Toolbar, { className: "pwv-SearchBar" },
+    h(ToolbarItemGroup, null,
+        h("div", { class: "pwv-ToolbarItem pwv-searchbar-input" },
+            h("input", { value: state.search.searchString, class: "pwv-SearchInputField", oncreate: (element) => {
+                    element.focus();
+                    element.addEventListener('keydown', (e) => {
+                        e.cancelBubble = true;
+                        const { shortcuts } = state.options;
+                        const cmd = getKeyboardCommands(e, shortcuts, []);
+                        if ((cmd === null || cmd === void 0 ? void 0 : cmd.length) &&
+                            (cmd.some(el => el[0] === 'searchNext') ||
+                                cmd.some(el => el[0] === 'searchPrevious') ||
+                                cmd.some(el => el[0] === 'closeSearch'))) {
+                            e.preventDefault();
+                        }
+                    }, false);
+                    element.addEventListener('input', (e) => {
+                        const inputValue = e.currentTarget.value;
+                        actions.search.updateToSearch(inputValue);
+                        if (inputValue !== '') {
+                            actions.api.startSearch();
+                        }
+                        else {
+                            actions.api.endSearch();
+                        }
+                    });
+                    element.addEventListener('keyup', (e) => {
+                        e.cancelBubble = true;
+                        const inputValue = e.currentTarget.value;
+                        const { shortcuts } = state.options;
+                        const cmd = getKeyboardCommands(e, shortcuts, []);
+                        if (cmd === null || cmd === void 0 ? void 0 : cmd.some(el => el[0] === 'searchNext')) {
+                            e.preventDefault();
+                            actions.api.nextSearchMatch();
+                        }
+                        else if (cmd === null || cmd === void 0 ? void 0 : cmd.some(el => el[0] === 'searchPrevious')) {
+                            e.preventDefault();
+                            actions.api.previousSearchMatch();
+                        }
+                        else if (cmd === null || cmd === void 0 ? void 0 : cmd.some(el => el[0] === 'closeSearch')) {
+                            e.preventDefault();
+                            actions.api.endSearch();
+                            actions.search.closeSearch();
+                        }
+                        else if (e.key === 'Enter' || e.key === 'ArrowDown') {
+                            if (inputValue !== '') {
+                                actions.api.nextSearchMatch();
+                            }
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            if (inputValue !== '') {
+                                actions.api.previousSearchMatch();
+                            }
+                        }
+                        else if (e.key === 'Escape') {
+                            actions.api.endSearch();
+                            actions.search.closeSearch();
+                        }
+                    }, false);
+                } })),
+        h(ToolbarButton, { tooltip: translationManager.getText('search.previousMatch'), 
+            // icon={icons.previousMatch}
+            icon: icons.previousPage, disabled: state.search.searchString === '', onClick: actions.api.previousSearchMatch }),
+        h(ToolbarButton, { tooltip: translationManager.getText('search.nextMatch'), icon: icons.nextPage, 
+            // icon={icons.nextMatch}
+            disabled: state.search.searchString === '', onClick: actions.api.nextSearchMatch }),
+        h(SearchOptions, null),
+        h(ToolbarSeparator, null)),
+    h(ToolbarItemGroup, { pushRight: true },
+        h(ToolbarButton, { icon: icons.close, onClick: () => {
+                actions.api.endSearch();
+                actions.search.closeSearch();
+            } }))));

package/es6/pdf-web-viewer/views/appbar/SearchOptions.d.ts

@@ -0,0 +1,10 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export interface SearchOptionsProps {
+    disabled?: boolean;
+    active?: boolean;
+    onClick?(e: MouseEvent): void;
+}
+/** internal */
+export declare const SearchOptions: ViewComponent<SearchOptionsProps, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/SearchOptions.js

@@ -0,0 +1,55 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { DropdownComponent } from '../../../common/Dropdown';
+import { Icon, icons } from '../../../common/Icon';
+import { tooltipManager } from '../../../common/TooltipManager';
+/** internal */
+export const SearchOptions = (props) => ($state, actions) => {
+    if (props.disabled) {
+        return (h("div", { title: translationManager.getText('search.options'), class: "pwv-Dropdown pwv-searchoptions pwv-disabled pwv-Dropdown--alignRight" },
+            h("span", { class: "pwv-Dropdown-text" },
+                h(Icon, { icon: icons.options })),
+            h("span", { class: "pwv-Dropdown-caret" },
+                h(Icon, { icon: icons.dropdownCaret }))));
+    }
+    else {
+        return (h("div", { class: "pwv-Dropdown pwv-searchoptions pwv-Dropdown--alignRight" },
+            h("button", Object.assign({}, tooltipManager.createTooltip(translationManager.getText('search.options')), { oncreate: DropdownComponent.create, onremove: DropdownComponent.remove }),
+                h("span", { class: "pwv-Dropdown-text" },
+                    h(Icon, { icon: icons.options })),
+                h("span", { class: "pwv-Dropdown-caret" },
+                    h(Icon, { icon: icons.dropdownCaret }))),
+            h("div", { class: "pwv-DropdownPanel" },
+                h("ul", null,
+                    h("li", { class: "pwv-checkbox-btn", onclick: (e) => {
+                            const s = actions.search.toggleCaseSensitive();
+                            e.preventDefault();
+                            e.cancelBubble = true;
+                            if (s.searchString !== '') {
+                                actions.api.startSearch();
+                            }
+                        } },
+                        $state.search.caseSensitive ? (h(Icon, { icon: icons.checkboxChecked })) : (h(Icon, { icon: icons.checkbox })),
+                        translationManager.getText('search.optionCaseSensitive')),
+                    h("li", { class: "pwv-checkbox-btn", onclick: (e) => {
+                            const s = actions.search.toggleWrappingSearch();
+                            e.preventDefault();
+                            e.cancelBubble = true;
+                            if (s.searchString !== '') {
+                                actions.api.startSearch();
+                            }
+                        } },
+                        $state.search.wrapSearch ? (h(Icon, { icon: icons.checkboxChecked })) : (h(Icon, { icon: icons.checkbox })),
+                        translationManager.getText('search.optionWrap')),
+                    h("li", { class: "pwv-checkbox-btn", onclick: (e) => {
+                            const s = actions.search.toggleRegex();
+                            e.preventDefault();
+                            e.cancelBubble = true;
+                            if (s.searchString !== '') {
+                                actions.api.startSearch();
+                            }
+                        } },
+                        $state.search.useRegex ? (h(Icon, { icon: icons.checkboxChecked })) : (h(Icon, { icon: icons.checkbox })),
+                        translationManager.getText('search.optionRegularExpression'))))));
+    }
+};

package/es6/pdf-web-viewer/views/appbar/ViewBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const ViewBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/ViewBar.js

@@ -0,0 +1,52 @@
+import { h } from '../../../lib/hyperapp';
+import { PdfFitMode, PdfPageLayoutMode } from '../../../pdf-viewer-api';
+import { ScreenSize } from '../../state/layout';
+import { translationManager } from '../../../common/TranslationManager';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { Dropdown } from '../../../common/Dropdown';
+import { Icon } from '../../../common/Icon';
+import { icons } from '../../../common/icons';
+function getPageLayoutModeTranslation(layoutMode) {
+    switch (layoutMode) {
+        case PdfPageLayoutMode.ONE_COLUMN:
+            return translationManager.getText('pageLayoutMode.oneColumn');
+        case PdfPageLayoutMode.SINGLE_PAGE:
+            return translationManager.getText('pageLayoutMode.singlePage');
+        case PdfPageLayoutMode.TWO_COLUMN_LEFT:
+            return translationManager.getText('pageLayoutMode.twoColumnLeft');
+        case PdfPageLayoutMode.TWO_COLUMN_RIGHT:
+            return translationManager.getText('pageLayoutMode.twoColumnRight');
+        case PdfPageLayoutMode.TWO_PAGE_LEFT:
+            return translationManager.getText('pageLayoutMode.twoPageLeft');
+        case PdfPageLayoutMode.TWO_PAGE_RIGHT:
+            return translationManager.getText('pageLayoutMode.twoPageRight');
+    }
+}
+/** internal */
+export const ViewBar = ({}) => (state, actions) => {
+    const { pdfDocument } = state;
+    const { screenSize } = state.layout;
+    const layoutModeItems = state.options.viewer.general.pageLayoutModes.map((m) => ({
+        text: getPageLayoutModeTranslation(m),
+        value: m,
+        renderItem: (i) => (h("span", { className: "pwv-page-layout-mode-item" },
+            h(Icon, { icon: icons[`pageLayoutMode${i.value}`], className: "pwv-page-layout-mode-icon" }),
+            i.text)),
+    }));
+    return (h(ToolbarItemGroup, { className: "pwv-ViewBar" },
+        pdfDocument.fitMode === PdfFitMode.NONE && (h(ToolbarButton, { name: "fitMode", tooltip: translationManager.getText('fitMode.none'), icon: icons.fitActualSize, onClick: () => {
+                actions.api.setFitMode(PdfFitMode.FIT_PAGE);
+            } })),
+        pdfDocument.fitMode === PdfFitMode.FIT_PAGE && (h(ToolbarButton, { name: "fitMode", tooltip: translationManager.getText('fitMode.page'), icon: icons.fitPage, onClick: () => {
+                actions.api.setFitMode(PdfFitMode.FIT_WIDTH);
+            } })),
+        pdfDocument.fitMode === PdfFitMode.FIT_WIDTH && (h(ToolbarButton, { name: "fitMode", tooltip: translationManager.getText('fitMode.width'), icon: icons.fitWidth, onClick: () => {
+                actions.api.setFitMode(PdfFitMode.NONE);
+                actions.api.setZoom(100);
+            } })),
+        state.options.viewer.permissions.enablePageLayoutMode && (h(Dropdown, { name: "pageLayoutMode", tooltip: getPageLayoutModeTranslation(pdfDocument.pageLayoutMode), items: layoutModeItems, value: pdfDocument.pageLayoutMode, className: "pwv-page-layout-mode", renderButton: (i, text) => (h(Icon, { icon: icons[`pageLayoutMode${i}`], className: "pwv-page-layout-mode-icon" })), onChange: (value) => {
+                actions.api.setPageLayoutMode(value);
+            } })),
+        state.options.viewer.permissions.allowRotateView && screenSize === ScreenSize.Large && (h(ToolbarButton, { name: "rotateView", tooltip: translationManager.getText('toolbar.rotateView'), icon: icons.rotate, onClick: actions.api.rotate }))));
+};

package/es6/pdf-web-viewer/views/appbar/ZoomBar.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const ZoomBar: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/appbar/ZoomBar.js

@@ -0,0 +1,18 @@
+import { h } from '../../../lib/hyperapp';
+import { translationManager } from '../../../common/TranslationManager';
+import { icons } from '../../../common/icons';
+import { ToolbarItemGroup } from '../../../common/ToolbarItemGroup';
+import { ToolbarButton } from '../../../common/ToolbarButton';
+import { Dropdown } from '../../../common/Dropdown';
+/** internal */
+export const ZoomBar = ({}) => (state, actions) => {
+    const { defaultZoomLevels } = state.options.viewer.general;
+    const { zoom } = state.pdfDocument;
+    return (h(ToolbarItemGroup, { className: "pwv-ZoomBar" },
+        h(ToolbarButton, { name: "zoomIn", tooltip: translationManager.getText('toolbar.zoomIn'), className: "pwv-MdHidden pwv-SmHidden", icon: icons.zoomIn, disabled: zoom >= defaultZoomLevels[defaultZoomLevels.length - 1] * 100, onClick: () => actions.api.zoomIn() }),
+        h(ToolbarButton, { name: "zoomOut", tooltip: translationManager.getText('toolbar.zoomOut'), className: "pwv-MdHidden pwv-SmHidden", icon: icons.zoomOut, disabled: zoom <= defaultZoomLevels[0] * 100, onClick: () => actions.api.zoomOut() }),
+        h(Dropdown, { name: "zoom", tooltip: translationManager.getText('toolbar.zoom'), className: "pwv-Dropdown-zoom", items: defaultZoomLevels.map((zoom) => ({
+                value: zoom * 100,
+                text: Math.floor(zoom * 100) + '%',
+            })), value: zoom, text: Math.floor(zoom) + '%', align: "right", onChange: (zoom) => actions.api.setZoom(zoom) })));
+};

package/es6/pdf-web-viewer/views/modal/ApplicationError.d.ts

@@ -0,0 +1,4 @@
+import { ViewComponent } from '../../../lib/hyperapp';
+import { PdfWebViewerState, PdfWebViewerActions } from '../../PdfWebViewer';
+/** internal */
+export declare const ApplicationError: ViewComponent<{}, PdfWebViewerState, PdfWebViewerActions>;

package/es6/pdf-web-viewer/views/modal/ApplicationError.js

@@ -0,0 +1,25 @@
+import { h } from '../../../lib/hyperapp';
+import { Icon, icons } from '../../../common/Icon';
+import { translationManager } from '../../../common/TranslationManager';
+/** internal */
+export const ApplicationError = ({}) => (state, actions) => {
+    let message = translationManager.getText('applicationError.defaultMessage');
+    switch (state.errorMessage) {
+        case 'Invalid License':
+            message = translationManager.getText('applicationError.invalidLicense');
+            break;
+    }
+    const btnText = translationManager.getText('applicationError.reload');
+    return (h("div", { class: "pwv-modal pwv-modal--applicationError" },
+        h("div", { class: "pwv-modal-dialog" },
+            h("div", { class: "pwv-modal-header" },
+                h(Icon, { icon: icons.error }),
+                h("h2", null, translationManager.getText('applicationError.title'))),
+            h("div", { class: "pwv-modal-body" },
+                h("div", { class: "pwv-modal-message" },
+                    h("p", null, message)),
+                btnText && (h("div", { class: "pwv-btn-row" },
+                    h("button", { class: "pwv-btn", onclick: () => {
+                            document.location && document.location.reload();
+                        } }, btnText)))))));
+};

package/es6/pdf-web-viewer/views/modal/LoadApplication.d.ts

@@ -0,0 +1,3 @@
+import { Component } from '../../../lib/hyperapp';
+/** internal */
+export declare const LoadApplication: Component<{}>;

package/es6/pdf-web-viewer/views/modal/LoadApplication.js

@@ -0,0 +1,6 @@
+import { h } from '../../../lib/hyperapp';
+import { Loader } from '../../../common/Loader';
+/** internal */
+export const LoadApplication = ({}) => (h("div", { class: "pwv-modal pwv-modal--loadApplication" },
+    h("div", { class: "pwv-modal-body-noborder" },
+        h(Loader, null))));