@progress/kendo-pdfviewer-common 1.0.0-develop.4 → 1.0.1-develop.1

package/dist/es/annotations/annotation-layer-builder.js

@@ -22,6 +22,7 @@ import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib
 /** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
 /** @typedef {import("../src/display/editor/tools.js").AnnotationEditorUIManager} AnnotationEditorUIManager */
 import { convertToHtml } from "../common/core";
+import { applyStyles } from "../common/csp-styles";
 import { AnnotationLayer } from "./annotation-layer";
 import { PresentationModeState } from "./shared/ui_utils";
 // import { PresentationModeState } from "./shared/ui_utils";
@@ -132,13 +133,11 @@ class AnnotationLayerBuilder {
             const pageView = (_a = page._pageInfo) === null || _a === void 0 ? void 0 : _a.view;
             const pageWidthAnnotationLayer = (pageView[2] || 0) + "px";
             const pageHeightAnnotationLayer = (pageView[3] || 0) + "px";
-            const div = convertToHtml(`
-            <div class="k-annotation-layer"
-                 data-main-rotation="0"
-                 style="width: round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px);
-                        height: round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px);">
-            </div>
-        `);
+            const div = convertToHtml(`<div class="k-annotation-layer" data-main-rotation="0"></div>`);
+            applyStyles(div, {
+                width: `round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px)`,
+                height: `round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px)`
+            });
             this.div = div;
             (_b = __classPrivateFieldGet(this, _AnnotationLayerBuilder_onAppend, "f")) === null || _b === void 0 ? void 0 : _b.call(this, div);
             this.annotationLayer = new AnnotationLayer({

package/dist/es/common/csp-styles.js

@@ -0,0 +1,240 @@
+let sheet = null;
+let counter = 0;
+let sweepCounter = 0;
+const rules = {};
+const ATTR = 'data-kpv-sid';
+let interceptorInstalled = false;
+const interceptedRoots = new Set();
+const elementRuleIds = new WeakMap();
+const elementStyleAcc = new WeakMap();
+const proxyCache = new WeakMap();
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+}
+function supportsAdoptedStylesheets() {
+    if (typeof document === 'undefined' || typeof CSSStyleSheet === 'undefined')
+        return false;
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function ensureSheet() {
+    if (!supportsAdoptedStylesheets())
+        return null;
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        document.adoptedStyleSheets = [...(document.adoptedStyleSheets || []), sheet];
+    }
+    return sheet;
+}
+function syncSheet() {
+    if (sheet) {
+        sheet.replaceSync(Object.values(rules).join('\n'));
+    }
+}
+export function applyStyles(element, styles, existingId) {
+    const id = existingId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(key => (element.style[key] = styles[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(styles)
+        .map(key => `${camelToKebab(key)}: ${styles[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+export function setCustomProperties(element, properties, ruleId) {
+    const id = ruleId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(properties).forEach(key => element.style.setProperty(key, properties[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(properties)
+        .map(key => `${key}: ${properties[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+export function removeRule(id) {
+    delete rules[id];
+    syncSheet();
+}
+export function pruneRules() {
+    const toRemove = [];
+    for (const id of Object.keys(rules)) {
+        if (!document.querySelector(`[${ATTR}="${id}"]`)) {
+            toRemove.push(id);
+        }
+    }
+    for (const id of toRemove) {
+        delete rules[id];
+    }
+    if (toRemove.length > 0) {
+        syncSheet();
+    }
+}
+function applyMergedCustomProp(element, prop, value) {
+    let acc = elementStyleAcc.get(element);
+    if (!acc) {
+        acc = {};
+        const existingId = element.getAttribute(ATTR);
+        if (existingId && rules[existingId]) {
+            const body = rules[existingId];
+            const startIdx = body.indexOf('{');
+            const endIdx = body.lastIndexOf('}');
+            if (startIdx >= 0 && endIdx > startIdx) {
+                body.substring(startIdx + 1, endIdx).split(';').forEach(decl => {
+                    const colon = decl.indexOf(':');
+                    if (colon > 0) {
+                        const k = decl.substring(0, colon).trim();
+                        const v = decl.substring(colon + 1).trim();
+                        if (k) {
+                            acc[k] = v;
+                        }
+                    }
+                });
+            }
+            elementRuleIds.set(element, existingId);
+        }
+        elementStyleAcc.set(element, acc);
+    }
+    if (value === '' || value === null || value === undefined) {
+        delete acc[prop];
+    }
+    else {
+        acc[prop] = value;
+    }
+    if ((++sweepCounter & 31) === 0) {
+        for (const rid of Object.keys(rules)) {
+            if (!document.querySelector(`[${ATTR}="${rid}"]`)) {
+                delete rules[rid];
+            }
+        }
+    }
+    const prevId = elementRuleIds.get(element);
+    const props = {};
+    const styles = {};
+    Object.keys(acc).forEach(k => {
+        if (k.startsWith('--')) {
+            props[k] = acc[k];
+        }
+        else {
+            styles[k] = acc[k];
+        }
+    });
+    const cssText = []
+        .concat(Object.keys(styles).map(k => `${camelToKebab(k)}: ${styles[k]}`))
+        .concat(Object.keys(props).map(k => `${k}: ${props[k]}`))
+        .join('; ');
+    const id = prevId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(k => (element.style[k] = styles[k]));
+        Object.keys(props).forEach(k => element.style.setProperty(k, props[k]));
+        return;
+    }
+    element.setAttribute(ATTR, id);
+    rules[id] = `[${ATTR}="${id}"] { ${cssText} }`;
+    syncSheet();
+    if (!prevId) {
+        elementRuleIds.set(element, id);
+    }
+}
+function isInIntercepted(el) {
+    if (!el || !el.nodeType)
+        return false;
+    for (const root of interceptedRoots) {
+        if (root === el || (root.contains && root.contains(el)))
+            return true;
+    }
+    return false;
+}
+export function installStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.add(root);
+    }
+    if (interceptorInstalled || typeof HTMLElement === 'undefined') {
+        return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style')
+        || Object.getOwnPropertyDescriptor(Element.prototype, 'style');
+    if (!descriptor || !descriptor.get) {
+        return;
+    }
+    interceptorInstalled = true;
+    const origGetter = descriptor.get;
+    Object.defineProperty(HTMLElement.prototype, 'style', {
+        configurable: true,
+        enumerable: descriptor.enumerable,
+        get() {
+            const realStyle = origGetter.call(this);
+            if (!isInIntercepted(this)) {
+                return realStyle;
+            }
+            let proxy = proxyCache.get(realStyle);
+            if (proxy)
+                return proxy;
+            const element = this;
+            proxy = new Proxy(realStyle, {
+                set(target, prop, value) {
+                    if (typeof prop !== 'string') {
+                        target[prop] = value;
+                        return true;
+                    }
+                    if (prop === 'cssText') {
+                        return true;
+                    }
+                    applyMergedCustomProp(element, prop, value);
+                    return true;
+                },
+                get(target, prop) {
+                    if (prop === 'setProperty') {
+                        return (name, value, priority) => {
+                            applyMergedCustomProp(element, name, priority === 'important' ? `${value} !important` : value);
+                        };
+                    }
+                    if (prop === 'removeProperty') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            const prev = acc ? acc[name] : '';
+                            applyMergedCustomProp(element, name, '');
+                            return prev || '';
+                        };
+                    }
+                    if (prop === 'getPropertyValue') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            return acc && acc[name] ? acc[name] : '';
+                        };
+                    }
+                    if (typeof prop === 'string') {
+                        const acc = elementStyleAcc.get(element);
+                        if (acc && Object.prototype.hasOwnProperty.call(acc, prop)) {
+                            return acc[prop];
+                        }
+                    }
+                    const v = target[prop];
+                    return typeof v === 'function' ? v.bind(target) : v;
+                }
+            });
+            proxyCache.set(realStyle, proxy);
+            return proxy;
+        }
+    });
+}
+export function uninstallStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.delete(root);
+    }
+}
+export { ATTR as STYLE_ATTR };

package/dist/es/common/dom.js

@@ -1,3 +1,4 @@
+import { applyStyles } from './csp-styles';
 export const addClass = (className, element) => {
     element.classList.add(className);
 };
@@ -14,7 +15,9 @@ export const createElement = function (name, className, styles) {
     if (className) {
         element.className = className;
     }
-    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    if (styles && Object.keys(styles).length > 0) {
+        applyStyles(element, styles);
+    }
     return element;
 };
 /**

package/dist/es/text/text-layer-builder.js

@@ -16,6 +16,7 @@ var _TextLayerBuilder_instances, _a, _TextLayerBuilder_onAppend, _TextLayerBuild
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { TextLayer } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { addClass } from "../common/dom";
+import { applyStyles } from "../common/csp-styles";
 /**
  * The text layer builder provides text selection functionality for the PDF.
  * It does this by creating overlay divs over the PDF's text. These divs
@@ -49,8 +50,9 @@ class TextLayerBuilder {
         // this.div.className = "textLayer";
         // todo: fix classes
         this.div.classList.add("k-text-layer");
-        // todo: fix styles
-        Object.keys(styles).forEach((key) => (this.div.style[key] = styles[key]));
+        if (styles && Object.keys(styles).length > 0) {
+            applyStyles(this.div, styles);
+        }
     }
     /**
      * Renders the text layer.

package/dist/es/utils.js

@@ -3,6 +3,7 @@ import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { getDocument, TextLayer, PixelsPerInch } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { LinkAnnotation } from './annotations';
 import { createElement, scrollToPage } from './common/dom';
+import { applyStyles, STYLE_ATTR } from './common/csp-styles';
 export { createElement, scrollToPage };
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
@@ -258,24 +259,22 @@ export const renderPage = (page, emptyPage, error) => {
                 container: textLayer,
                 viewport: viewport
             }).render().then(() => {
-                // Directly assign the pre-calculated pt dimensions.
-                // A px→pt text replacement leaves --total-scale-factor (= zoom * PDF_TO_CSS_UNITS,
-                // correct for CSS-px font sizes) multiplying CSS pt values, making the layer
-                // ~33% too wide. Assigning styles.width/height (= raw_page_width * zoom pt)
-                // keeps font-size calculations intact while matching the page element exactly.
-                textLayer.style.width = styles.width;
-                textLayer.style.height = styles.height;
+                const ptStyles = {
+                    width: styles.width,
+                    height: styles.height
+                };
                 const rotation = textLayer.getAttribute('data-main-rotation') || '0';
                 if (transforms[rotation]) {
-                    textLayer.style.transform = transforms[rotation];
-                    textLayer.style.transformOrigin = 'top left';
+                    ptStyles.transform = transforms[rotation];
+                    ptStyles.transformOrigin = 'top left';
                 }
+                applyStyles(textLayer, ptStyles, textLayer.getAttribute(STYLE_ATTR) || undefined);
                 textLayer.querySelectorAll('span').forEach((el) => {
                     if (el.style.fontSize) {
-                        el.style.fontSize = el.style.fontSize.replace(/px/g, 'pt');
+                        applyStyles(el, { fontSize: el.style.fontSize.replace(/px/g, 'pt') });
                     }
                 });
-                pageElement.prepend(textLayer); // Use prepend to ensure the element is always inserted before the annotation layer.
+                pageElement.prepend(textLayer);
             }).catch(error);
         });
         page.getAnnotations({ intent: 'display' }).then((annotations) => {

package/dist/es/widget/pdfviewer.js

@@ -2,6 +2,7 @@ var _PdfViewer_instances, _PdfViewer_annotationEditorMode, _PdfViewer_switchAnno
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { deepExtend, Component, isString, toArray, noop, hasValue, toClassSelector, addClass, removeClass, mousewheelDelta, convertToHtml, clamp, createPromise } from "../common/main";
 import { currentPage, parsePdfFromBase64String, adjustCanvasSize, createElement, scale as getScale, addAdoptedStylesheet } from "../utils";
+import { setCustomProperties, applyStyles, pruneRules, STYLE_ATTR, installStyleInterceptor, uninstallStyleInterceptor } from "../common/csp-styles";
 import { SearchService } from "../search";
 import { Scroller, throttle } from "../scroller";
 import { saveAs } from "@progress/kendo-file-saver";
@@ -353,6 +354,7 @@ export class PdfViewer extends Component {
             }
             this._resetPinchState();
         };
+        installStyleInterceptor(element);
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -377,6 +379,8 @@ export class PdfViewer extends Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.destroyDocumentScroller();
+        pruneRules();
+        uninstallStyleInterceptor(this.element);
     }
     throwIfInvalidOptions() {
         if (this.options.minZoom > this.options.maxZoom) {
@@ -905,12 +909,16 @@ export class PdfViewer extends Component {
         canvas.height = adjustedHeight;
         canvas.width = adjustedWidth;
         if (printUnits) {
-            canvas.style.width = `${viewport.width / scaleNum}px`;
-            canvas.style.height = `${viewport.height / scaleNum}px`;
+            applyStyles(canvas, {
+                width: `${viewport.width / scaleNum}px`,
+                height: `${viewport.height / scaleNum}px`
+            });
         }
         else {
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
+            applyStyles(canvas, {
+                width: '100%',
+                height: '100%'
+            });
         }
         const canvasContext = canvas.getContext("2d");
         if (printUnits) {
@@ -961,6 +969,7 @@ export class PdfViewer extends Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.clearDocumentState();
+        pruneRules();
     }
     clearDocumentState() {
         var _a;
@@ -1457,10 +1466,12 @@ export class PdfViewer extends Component {
         this.documentScroller.disablePanEventsTracking();
     }
     setScaleFactor(scaleFactor) {
-        this.element.style.setProperty('--scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--total-scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--scale-round-x', '1px');
-        this.element.style.setProperty('--scale-round-y', '1px');
+        setCustomProperties(this.element, {
+            '--scale-factor': String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--total-scale-factor': String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--scale-round-x': '1px',
+            '--scale-round-y': '1px'
+        }, this.element.getAttribute(STYLE_ATTR) || undefined);
     }
     _isTrackpadPinch(e) {
         // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.

package/dist/es2015/annotations/annotation-layer-builder.js

@@ -22,6 +22,7 @@ import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib
 /** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
 /** @typedef {import("../src/display/editor/tools.js").AnnotationEditorUIManager} AnnotationEditorUIManager */
 import { convertToHtml } from "../common/core";
+import { applyStyles } from "../common/csp-styles";
 import { AnnotationLayer } from "./annotation-layer";
 import { PresentationModeState } from "./shared/ui_utils";
 // import { PresentationModeState } from "./shared/ui_utils";
@@ -132,13 +133,11 @@ class AnnotationLayerBuilder {
             const pageView = (_a = page._pageInfo) === null || _a === void 0 ? void 0 : _a.view;
             const pageWidthAnnotationLayer = (pageView[2] || 0) + "px";
             const pageHeightAnnotationLayer = (pageView[3] || 0) + "px";
-            const div = convertToHtml(`
-            <div class="k-annotation-layer"
-                 data-main-rotation="0"
-                 style="width: round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px);
-                        height: round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px);">
-            </div>
-        `);
+            const div = convertToHtml(`<div class="k-annotation-layer" data-main-rotation="0"></div>`);
+            applyStyles(div, {
+                width: `round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px)`,
+                height: `round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px)`
+            });
             this.div = div;
             (_b = __classPrivateFieldGet(this, _AnnotationLayerBuilder_onAppend, "f")) === null || _b === void 0 ? void 0 : _b.call(this, div);
             this.annotationLayer = new AnnotationLayer({

package/dist/es2015/common/csp-styles.js

@@ -0,0 +1,240 @@
+let sheet = null;
+let counter = 0;
+let sweepCounter = 0;
+const rules = {};
+const ATTR = 'data-kpv-sid';
+let interceptorInstalled = false;
+const interceptedRoots = new Set();
+const elementRuleIds = new WeakMap();
+const elementStyleAcc = new WeakMap();
+const proxyCache = new WeakMap();
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+}
+function supportsAdoptedStylesheets() {
+    if (typeof document === 'undefined' || typeof CSSStyleSheet === 'undefined')
+        return false;
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function ensureSheet() {
+    if (!supportsAdoptedStylesheets())
+        return null;
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        document.adoptedStyleSheets = [...(document.adoptedStyleSheets || []), sheet];
+    }
+    return sheet;
+}
+function syncSheet() {
+    if (sheet) {
+        sheet.replaceSync(Object.values(rules).join('\n'));
+    }
+}
+export function applyStyles(element, styles, existingId) {
+    const id = existingId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(key => (element.style[key] = styles[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(styles)
+        .map(key => `${camelToKebab(key)}: ${styles[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+export function setCustomProperties(element, properties, ruleId) {
+    const id = ruleId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(properties).forEach(key => element.style.setProperty(key, properties[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(properties)
+        .map(key => `${key}: ${properties[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+export function removeRule(id) {
+    delete rules[id];
+    syncSheet();
+}
+export function pruneRules() {
+    const toRemove = [];
+    for (const id of Object.keys(rules)) {
+        if (!document.querySelector(`[${ATTR}="${id}"]`)) {
+            toRemove.push(id);
+        }
+    }
+    for (const id of toRemove) {
+        delete rules[id];
+    }
+    if (toRemove.length > 0) {
+        syncSheet();
+    }
+}
+function applyMergedCustomProp(element, prop, value) {
+    let acc = elementStyleAcc.get(element);
+    if (!acc) {
+        acc = {};
+        const existingId = element.getAttribute(ATTR);
+        if (existingId && rules[existingId]) {
+            const body = rules[existingId];
+            const startIdx = body.indexOf('{');
+            const endIdx = body.lastIndexOf('}');
+            if (startIdx >= 0 && endIdx > startIdx) {
+                body.substring(startIdx + 1, endIdx).split(';').forEach(decl => {
+                    const colon = decl.indexOf(':');
+                    if (colon > 0) {
+                        const k = decl.substring(0, colon).trim();
+                        const v = decl.substring(colon + 1).trim();
+                        if (k) {
+                            acc[k] = v;
+                        }
+                    }
+                });
+            }
+            elementRuleIds.set(element, existingId);
+        }
+        elementStyleAcc.set(element, acc);
+    }
+    if (value === '' || value === null || value === undefined) {
+        delete acc[prop];
+    }
+    else {
+        acc[prop] = value;
+    }
+    if ((++sweepCounter & 31) === 0) {
+        for (const rid of Object.keys(rules)) {
+            if (!document.querySelector(`[${ATTR}="${rid}"]`)) {
+                delete rules[rid];
+            }
+        }
+    }
+    const prevId = elementRuleIds.get(element);
+    const props = {};
+    const styles = {};
+    Object.keys(acc).forEach(k => {
+        if (k.startsWith('--')) {
+            props[k] = acc[k];
+        }
+        else {
+            styles[k] = acc[k];
+        }
+    });
+    const cssText = []
+        .concat(Object.keys(styles).map(k => `${camelToKebab(k)}: ${styles[k]}`))
+        .concat(Object.keys(props).map(k => `${k}: ${props[k]}`))
+        .join('; ');
+    const id = prevId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(k => (element.style[k] = styles[k]));
+        Object.keys(props).forEach(k => element.style.setProperty(k, props[k]));
+        return;
+    }
+    element.setAttribute(ATTR, id);
+    rules[id] = `[${ATTR}="${id}"] { ${cssText} }`;
+    syncSheet();
+    if (!prevId) {
+        elementRuleIds.set(element, id);
+    }
+}
+function isInIntercepted(el) {
+    if (!el || !el.nodeType)
+        return false;
+    for (const root of interceptedRoots) {
+        if (root === el || (root.contains && root.contains(el)))
+            return true;
+    }
+    return false;
+}
+export function installStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.add(root);
+    }
+    if (interceptorInstalled || typeof HTMLElement === 'undefined') {
+        return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style')
+        || Object.getOwnPropertyDescriptor(Element.prototype, 'style');
+    if (!descriptor || !descriptor.get) {
+        return;
+    }
+    interceptorInstalled = true;
+    const origGetter = descriptor.get;
+    Object.defineProperty(HTMLElement.prototype, 'style', {
+        configurable: true,
+        enumerable: descriptor.enumerable,
+        get() {
+            const realStyle = origGetter.call(this);
+            if (!isInIntercepted(this)) {
+                return realStyle;
+            }
+            let proxy = proxyCache.get(realStyle);
+            if (proxy)
+                return proxy;
+            const element = this;
+            proxy = new Proxy(realStyle, {
+                set(target, prop, value) {
+                    if (typeof prop !== 'string') {
+                        target[prop] = value;
+                        return true;
+                    }
+                    if (prop === 'cssText') {
+                        return true;
+                    }
+                    applyMergedCustomProp(element, prop, value);
+                    return true;
+                },
+                get(target, prop) {
+                    if (prop === 'setProperty') {
+                        return (name, value, priority) => {
+                            applyMergedCustomProp(element, name, priority === 'important' ? `${value} !important` : value);
+                        };
+                    }
+                    if (prop === 'removeProperty') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            const prev = acc ? acc[name] : '';
+                            applyMergedCustomProp(element, name, '');
+                            return prev || '';
+                        };
+                    }
+                    if (prop === 'getPropertyValue') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            return acc && acc[name] ? acc[name] : '';
+                        };
+                    }
+                    if (typeof prop === 'string') {
+                        const acc = elementStyleAcc.get(element);
+                        if (acc && Object.prototype.hasOwnProperty.call(acc, prop)) {
+                            return acc[prop];
+                        }
+                    }
+                    const v = target[prop];
+                    return typeof v === 'function' ? v.bind(target) : v;
+                }
+            });
+            proxyCache.set(realStyle, proxy);
+            return proxy;
+        }
+    });
+}
+export function uninstallStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.delete(root);
+    }
+}
+export { ATTR as STYLE_ATTR };

package/dist/es2015/common/dom.js

@@ -1,3 +1,4 @@
+import { applyStyles } from './csp-styles';
 export const addClass = (className, element) => {
     element.classList.add(className);
 };
@@ -14,7 +15,9 @@ export const createElement = function (name, className, styles) {
     if (className) {
         element.className = className;
     }
-    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    if (styles && Object.keys(styles).length > 0) {
+        applyStyles(element, styles);
+    }
     return element;
 };
 /**

package/dist/es2015/text/text-layer-builder.js

@@ -16,6 +16,7 @@ var _TextLayerBuilder_instances, _a, _TextLayerBuilder_onAppend, _TextLayerBuild
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { TextLayer } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { addClass } from "../common/dom";
+import { applyStyles } from "../common/csp-styles";
 /**
  * The text layer builder provides text selection functionality for the PDF.
  * It does this by creating overlay divs over the PDF's text. These divs
@@ -49,8 +50,9 @@ class TextLayerBuilder {
         // this.div.className = "textLayer";
         // todo: fix classes
         this.div.classList.add("k-text-layer");
-        // todo: fix styles
-        Object.keys(styles).forEach((key) => (this.div.style[key] = styles[key]));
+        if (styles && Object.keys(styles).length > 0) {
+            applyStyles(this.div, styles);
+        }
     }
     /**
      * Renders the text layer.

package/dist/es2015/utils.js

@@ -3,6 +3,7 @@ import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { getDocument, TextLayer, PixelsPerInch } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { LinkAnnotation } from './annotations';
 import { createElement, scrollToPage } from './common/dom';
+import { applyStyles, STYLE_ATTR } from './common/csp-styles';
 export { createElement, scrollToPage };
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
@@ -258,24 +259,22 @@ export const renderPage = (page, emptyPage, error) => {
                 container: textLayer,
                 viewport: viewport
             }).render().then(() => {
-                // Directly assign the pre-calculated pt dimensions.
-                // A px→pt text replacement leaves --total-scale-factor (= zoom * PDF_TO_CSS_UNITS,
-                // correct for CSS-px font sizes) multiplying CSS pt values, making the layer
-                // ~33% too wide. Assigning styles.width/height (= raw_page_width * zoom pt)
-                // keeps font-size calculations intact while matching the page element exactly.
-                textLayer.style.width = styles.width;
-                textLayer.style.height = styles.height;
+                const ptStyles = {
+                    width: styles.width,
+                    height: styles.height
+                };
                 const rotation = textLayer.getAttribute('data-main-rotation') || '0';
                 if (transforms[rotation]) {
-                    textLayer.style.transform = transforms[rotation];
-                    textLayer.style.transformOrigin = 'top left';
+                    ptStyles.transform = transforms[rotation];
+                    ptStyles.transformOrigin = 'top left';
                 }
+                applyStyles(textLayer, ptStyles, textLayer.getAttribute(STYLE_ATTR) || undefined);
                 textLayer.querySelectorAll('span').forEach((el) => {
                     if (el.style.fontSize) {
-                        el.style.fontSize = el.style.fontSize.replace(/px/g, 'pt');
+                        applyStyles(el, { fontSize: el.style.fontSize.replace(/px/g, 'pt') });
                     }
                 });
-                pageElement.prepend(textLayer); // Use prepend to ensure the element is always inserted before the annotation layer.
+                pageElement.prepend(textLayer);
             }).catch(error);
         });
         page.getAnnotations({ intent: 'display' }).then((annotations) => {

package/dist/es2015/widget/pdfviewer.js

@@ -2,6 +2,7 @@ var _PdfViewer_instances, _PdfViewer_annotationEditorMode, _PdfViewer_switchAnno
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { deepExtend, Component, isString, toArray, noop, hasValue, toClassSelector, addClass, removeClass, mousewheelDelta, convertToHtml, clamp, createPromise } from "../common/main";
 import { currentPage, parsePdfFromBase64String, adjustCanvasSize, createElement, scale as getScale, addAdoptedStylesheet } from "../utils";
+import { setCustomProperties, applyStyles, pruneRules, STYLE_ATTR, installStyleInterceptor, uninstallStyleInterceptor } from "../common/csp-styles";
 import { SearchService } from "../search";
 import { Scroller, throttle } from "../scroller";
 import { saveAs } from "@progress/kendo-file-saver";
@@ -353,6 +354,7 @@ export class PdfViewer extends Component {
             }
             this._resetPinchState();
         };
+        installStyleInterceptor(element);
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -377,6 +379,8 @@ export class PdfViewer extends Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.destroyDocumentScroller();
+        pruneRules();
+        uninstallStyleInterceptor(this.element);
     }
     throwIfInvalidOptions() {
         if (this.options.minZoom > this.options.maxZoom) {
@@ -905,12 +909,16 @@ export class PdfViewer extends Component {
         canvas.height = adjustedHeight;
         canvas.width = adjustedWidth;
         if (printUnits) {
-            canvas.style.width = `${viewport.width / scaleNum}px`;
-            canvas.style.height = `${viewport.height / scaleNum}px`;
+            applyStyles(canvas, {
+                width: `${viewport.width / scaleNum}px`,
+                height: `${viewport.height / scaleNum}px`
+            });
         }
         else {
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
+            applyStyles(canvas, {
+                width: '100%',
+                height: '100%'
+            });
         }
         const canvasContext = canvas.getContext("2d");
         if (printUnits) {
@@ -961,6 +969,7 @@ export class PdfViewer extends Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.clearDocumentState();
+        pruneRules();
     }
     clearDocumentState() {
         var _a;
@@ -1457,10 +1466,12 @@ export class PdfViewer extends Component {
         this.documentScroller.disablePanEventsTracking();
     }
     setScaleFactor(scaleFactor) {
-        this.element.style.setProperty('--scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--total-scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--scale-round-x', '1px');
-        this.element.style.setProperty('--scale-round-y', '1px');
+        setCustomProperties(this.element, {
+            '--scale-factor': String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--total-scale-factor': String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--scale-round-x': '1px',
+            '--scale-round-y': '1px'
+        }, this.element.getAttribute(STYLE_ATTR) || undefined);
     }
     _isTrackpadPinch(e) {
         // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.

package/dist/npm/annotations/annotation-layer-builder.js

@@ -25,6 +25,7 @@ const tslib_1 = require("tslib");
 /** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
 /** @typedef {import("../src/display/editor/tools.js").AnnotationEditorUIManager} AnnotationEditorUIManager */
 const core_1 = require("../common/core");
+const csp_styles_1 = require("../common/csp-styles");
 const annotation_layer_1 = require("./annotation-layer");
 const ui_utils_1 = require("./shared/ui_utils");
 // import { PresentationModeState } from "./shared/ui_utils";
@@ -135,13 +136,11 @@ class AnnotationLayerBuilder {
             const pageView = (_a = page._pageInfo) === null || _a === void 0 ? void 0 : _a.view;
             const pageWidthAnnotationLayer = (pageView[2] || 0) + "px";
             const pageHeightAnnotationLayer = (pageView[3] || 0) + "px";
-            const div = (0, core_1.convertToHtml)(`
-            <div class="k-annotation-layer"
-                 data-main-rotation="0"
-                 style="width: round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px);
-                        height: round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px);">
-            </div>
-        `);
+            const div = (0, core_1.convertToHtml)(`<div class="k-annotation-layer" data-main-rotation="0"></div>`);
+            (0, csp_styles_1.applyStyles)(div, {
+                width: `round(var(--scale-factor) * ${pageWidthAnnotationLayer}, 1px)`,
+                height: `round(var(--scale-factor) * ${pageHeightAnnotationLayer}, 1px)`
+            });
             this.div = div;
             (_b = tslib_1.__classPrivateFieldGet(this, _AnnotationLayerBuilder_onAppend, "f")) === null || _b === void 0 ? void 0 : _b.call(this, div);
             this.annotationLayer = new annotation_layer_1.AnnotationLayer({

package/dist/npm/common/csp-styles.d.ts

@@ -0,0 +1,8 @@
+declare const ATTR = "data-kpv-sid";
+export declare function applyStyles(element: HTMLElement, styles: Record<string, string>, existingId?: string): string;
+export declare function setCustomProperties(element: HTMLElement, properties: Record<string, string>, ruleId?: string): string;
+export declare function removeRule(id: string): void;
+export declare function pruneRules(): void;
+export declare function installStyleInterceptor(root: HTMLElement): void;
+export declare function uninstallStyleInterceptor(root: HTMLElement): void;
+export { ATTR as STYLE_ATTR };

package/dist/npm/common/csp-styles.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STYLE_ATTR = void 0;
+exports.applyStyles = applyStyles;
+exports.setCustomProperties = setCustomProperties;
+exports.removeRule = removeRule;
+exports.pruneRules = pruneRules;
+exports.installStyleInterceptor = installStyleInterceptor;
+exports.uninstallStyleInterceptor = uninstallStyleInterceptor;
+let sheet = null;
+let counter = 0;
+let sweepCounter = 0;
+const rules = {};
+const ATTR = 'data-kpv-sid';
+exports.STYLE_ATTR = ATTR;
+let interceptorInstalled = false;
+const interceptedRoots = new Set();
+const elementRuleIds = new WeakMap();
+const elementStyleAcc = new WeakMap();
+const proxyCache = new WeakMap();
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+}
+function supportsAdoptedStylesheets() {
+    if (typeof document === 'undefined' || typeof CSSStyleSheet === 'undefined')
+        return false;
+    try {
+        new CSSStyleSheet();
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function ensureSheet() {
+    if (!supportsAdoptedStylesheets())
+        return null;
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        document.adoptedStyleSheets = [...(document.adoptedStyleSheets || []), sheet];
+    }
+    return sheet;
+}
+function syncSheet() {
+    if (sheet) {
+        sheet.replaceSync(Object.values(rules).join('\n'));
+    }
+}
+function applyStyles(element, styles, existingId) {
+    const id = existingId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(key => (element.style[key] = styles[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(styles)
+        .map(key => `${camelToKebab(key)}: ${styles[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+function setCustomProperties(element, properties, ruleId) {
+    const id = ruleId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(properties).forEach(key => element.style.setProperty(key, properties[key]));
+        return id;
+    }
+    element.setAttribute(ATTR, id);
+    const selector = `[${ATTR}="${id}"]`;
+    const cssText = Object.keys(properties)
+        .map(key => `${key}: ${properties[key]}`)
+        .join('; ');
+    rules[id] = `${selector} { ${cssText} }`;
+    syncSheet();
+    return id;
+}
+function removeRule(id) {
+    delete rules[id];
+    syncSheet();
+}
+function pruneRules() {
+    const toRemove = [];
+    for (const id of Object.keys(rules)) {
+        if (!document.querySelector(`[${ATTR}="${id}"]`)) {
+            toRemove.push(id);
+        }
+    }
+    for (const id of toRemove) {
+        delete rules[id];
+    }
+    if (toRemove.length > 0) {
+        syncSheet();
+    }
+}
+function applyMergedCustomProp(element, prop, value) {
+    let acc = elementStyleAcc.get(element);
+    if (!acc) {
+        acc = {};
+        const existingId = element.getAttribute(ATTR);
+        if (existingId && rules[existingId]) {
+            const body = rules[existingId];
+            const startIdx = body.indexOf('{');
+            const endIdx = body.lastIndexOf('}');
+            if (startIdx >= 0 && endIdx > startIdx) {
+                body.substring(startIdx + 1, endIdx).split(';').forEach(decl => {
+                    const colon = decl.indexOf(':');
+                    if (colon > 0) {
+                        const k = decl.substring(0, colon).trim();
+                        const v = decl.substring(colon + 1).trim();
+                        if (k) {
+                            acc[k] = v;
+                        }
+                    }
+                });
+            }
+            elementRuleIds.set(element, existingId);
+        }
+        elementStyleAcc.set(element, acc);
+    }
+    if (value === '' || value === null || value === undefined) {
+        delete acc[prop];
+    }
+    else {
+        acc[prop] = value;
+    }
+    if ((++sweepCounter & 31) === 0) {
+        for (const rid of Object.keys(rules)) {
+            if (!document.querySelector(`[${ATTR}="${rid}"]`)) {
+                delete rules[rid];
+            }
+        }
+    }
+    const prevId = elementRuleIds.get(element);
+    const props = {};
+    const styles = {};
+    Object.keys(acc).forEach(k => {
+        if (k.startsWith('--')) {
+            props[k] = acc[k];
+        }
+        else {
+            styles[k] = acc[k];
+        }
+    });
+    const cssText = []
+        .concat(Object.keys(styles).map(k => `${camelToKebab(k)}: ${styles[k]}`))
+        .concat(Object.keys(props).map(k => `${k}: ${props[k]}`))
+        .join('; ');
+    const id = prevId || ATTR + '-' + (++counter);
+    if (!ensureSheet()) {
+        Object.keys(styles).forEach(k => (element.style[k] = styles[k]));
+        Object.keys(props).forEach(k => element.style.setProperty(k, props[k]));
+        return;
+    }
+    element.setAttribute(ATTR, id);
+    rules[id] = `[${ATTR}="${id}"] { ${cssText} }`;
+    syncSheet();
+    if (!prevId) {
+        elementRuleIds.set(element, id);
+    }
+}
+function isInIntercepted(el) {
+    if (!el || !el.nodeType)
+        return false;
+    for (const root of interceptedRoots) {
+        if (root === el || (root.contains && root.contains(el)))
+            return true;
+    }
+    return false;
+}
+function installStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.add(root);
+    }
+    if (interceptorInstalled || typeof HTMLElement === 'undefined') {
+        return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style')
+        || Object.getOwnPropertyDescriptor(Element.prototype, 'style');
+    if (!descriptor || !descriptor.get) {
+        return;
+    }
+    interceptorInstalled = true;
+    const origGetter = descriptor.get;
+    Object.defineProperty(HTMLElement.prototype, 'style', {
+        configurable: true,
+        enumerable: descriptor.enumerable,
+        get() {
+            const realStyle = origGetter.call(this);
+            if (!isInIntercepted(this)) {
+                return realStyle;
+            }
+            let proxy = proxyCache.get(realStyle);
+            if (proxy)
+                return proxy;
+            const element = this;
+            proxy = new Proxy(realStyle, {
+                set(target, prop, value) {
+                    if (typeof prop !== 'string') {
+                        target[prop] = value;
+                        return true;
+                    }
+                    if (prop === 'cssText') {
+                        return true;
+                    }
+                    applyMergedCustomProp(element, prop, value);
+                    return true;
+                },
+                get(target, prop) {
+                    if (prop === 'setProperty') {
+                        return (name, value, priority) => {
+                            applyMergedCustomProp(element, name, priority === 'important' ? `${value} !important` : value);
+                        };
+                    }
+                    if (prop === 'removeProperty') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            const prev = acc ? acc[name] : '';
+                            applyMergedCustomProp(element, name, '');
+                            return prev || '';
+                        };
+                    }
+                    if (prop === 'getPropertyValue') {
+                        return (name) => {
+                            const acc = elementStyleAcc.get(element);
+                            return acc && acc[name] ? acc[name] : '';
+                        };
+                    }
+                    if (typeof prop === 'string') {
+                        const acc = elementStyleAcc.get(element);
+                        if (acc && Object.prototype.hasOwnProperty.call(acc, prop)) {
+                            return acc[prop];
+                        }
+                    }
+                    const v = target[prop];
+                    return typeof v === 'function' ? v.bind(target) : v;
+                }
+            });
+            proxyCache.set(realStyle, proxy);
+            return proxy;
+        }
+    });
+}
+function uninstallStyleInterceptor(root) {
+    if (root) {
+        interceptedRoots.delete(root);
+    }
+}

package/dist/npm/common/dom.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollToPage = exports.createElement = exports.hasClass = exports.removeClass = exports.addClass = void 0;
+const csp_styles_1 = require("./csp-styles");
 const addClass = (className, element) => {
     element.classList.add(className);
 };
@@ -20,7 +21,9 @@ const createElement = function (name, className, styles) {
     if (className) {
         element.className = className;
     }
-    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    if (styles && Object.keys(styles).length > 0) {
+        (0, csp_styles_1.applyStyles)(element, styles);
+    }
     return element;
 };
 exports.createElement = createElement;

package/dist/npm/text/text-layer-builder.js

@@ -19,6 +19,7 @@ exports.TextLayerBuilder = void 0;
 const tslib_1 = require("tslib");
 const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
 const dom_1 = require("../common/dom");
+const csp_styles_1 = require("../common/csp-styles");
 /**
  * The text layer builder provides text selection functionality for the PDF.
  * It does this by creating overlay divs over the PDF's text. These divs
@@ -52,8 +53,9 @@ class TextLayerBuilder {
         // this.div.className = "textLayer";
         // todo: fix classes
         this.div.classList.add("k-text-layer");
-        // todo: fix styles
-        Object.keys(styles).forEach((key) => (this.div.style[key] = styles[key]));
+        if (styles && Object.keys(styles).length > 0) {
+            (0, csp_styles_1.applyStyles)(this.div, styles);
+        }
     }
     /**
      * Renders the text layer.

package/dist/npm/utils.js

@@ -8,6 +8,7 @@ const annotations_1 = require("./annotations");
 const dom_1 = require("./common/dom");
 Object.defineProperty(exports, "createElement", { enumerable: true, get: function () { return dom_1.createElement; } });
 Object.defineProperty(exports, "scrollToPage", { enumerable: true, get: function () { return dom_1.scrollToPage; } });
+const csp_styles_1 = require("./common/csp-styles");
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -269,24 +270,22 @@ const renderPage = (page, emptyPage, error) => {
                 container: textLayer,
                 viewport: viewport
             }).render().then(() => {
-                // Directly assign the pre-calculated pt dimensions.
-                // A px→pt text replacement leaves --total-scale-factor (= zoom * PDF_TO_CSS_UNITS,
-                // correct for CSS-px font sizes) multiplying CSS pt values, making the layer
-                // ~33% too wide. Assigning styles.width/height (= raw_page_width * zoom pt)
-                // keeps font-size calculations intact while matching the page element exactly.
-                textLayer.style.width = styles.width;
-                textLayer.style.height = styles.height;
+                const ptStyles = {
+                    width: styles.width,
+                    height: styles.height
+                };
                 const rotation = textLayer.getAttribute('data-main-rotation') || '0';
                 if (exports.transforms[rotation]) {
-                    textLayer.style.transform = exports.transforms[rotation];
-                    textLayer.style.transformOrigin = 'top left';
+                    ptStyles.transform = exports.transforms[rotation];
+                    ptStyles.transformOrigin = 'top left';
                 }
+                (0, csp_styles_1.applyStyles)(textLayer, ptStyles, textLayer.getAttribute(csp_styles_1.STYLE_ATTR) || undefined);
                 textLayer.querySelectorAll('span').forEach((el) => {
                     if (el.style.fontSize) {
-                        el.style.fontSize = el.style.fontSize.replace(/px/g, 'pt');
+                        (0, csp_styles_1.applyStyles)(el, { fontSize: el.style.fontSize.replace(/px/g, 'pt') });
                     }
                 });
-                pageElement.prepend(textLayer); // Use prepend to ensure the element is always inserted before the annotation layer.
+                pageElement.prepend(textLayer);
             }).catch(error);
         });
         page.getAnnotations({ intent: 'display' }).then((annotations) => {

package/dist/npm/widget/pdfviewer.js

@@ -5,6 +5,7 @@ exports.PdfViewer = void 0;
 const tslib_1 = require("tslib");
 const main_1 = require("../common/main");
 const utils_1 = require("../utils");
+const csp_styles_1 = require("../common/csp-styles");
 const search_1 = require("../search");
 const scroller_1 = require("../scroller");
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
@@ -356,6 +357,7 @@ class PdfViewer extends main_1.Component {
             }
             this._resetPinchState();
         };
+        (0, csp_styles_1.installStyleInterceptor)(element);
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -380,6 +382,8 @@ class PdfViewer extends main_1.Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.destroyDocumentScroller();
+        (0, csp_styles_1.pruneRules)();
+        (0, csp_styles_1.uninstallStyleInterceptor)(this.element);
     }
     throwIfInvalidOptions() {
         if (this.options.minZoom > this.options.maxZoom) {
@@ -908,12 +912,16 @@ class PdfViewer extends main_1.Component {
         canvas.height = adjustedHeight;
         canvas.width = adjustedWidth;
         if (printUnits) {
-            canvas.style.width = `${viewport.width / scaleNum}px`;
-            canvas.style.height = `${viewport.height / scaleNum}px`;
+            (0, csp_styles_1.applyStyles)(canvas, {
+                width: `${viewport.width / scaleNum}px`,
+                height: `${viewport.height / scaleNum}px`
+            });
         }
         else {
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
+            (0, csp_styles_1.applyStyles)(canvas, {
+                width: '100%',
+                height: '100%'
+            });
         }
         const canvasContext = canvas.getContext("2d");
         if (printUnits) {
@@ -964,6 +972,7 @@ class PdfViewer extends main_1.Component {
         this.destroySearchService();
         this.destroyAnnotationEditorUIManager();
         this.clearDocumentState();
+        (0, csp_styles_1.pruneRules)();
     }
     clearDocumentState() {
         var _a;
@@ -1460,10 +1469,12 @@ class PdfViewer extends main_1.Component {
         this.documentScroller.disablePanEventsTracking();
     }
     setScaleFactor(scaleFactor) {
-        this.element.style.setProperty('--scale-factor', String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--total-scale-factor', String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS));
-        this.element.style.setProperty('--scale-round-x', '1px');
-        this.element.style.setProperty('--scale-round-y', '1px');
+        (0, csp_styles_1.setCustomProperties)(this.element, {
+            '--scale-factor': String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--total-scale-factor': String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS),
+            '--scale-round-x': '1px',
+            '--scale-round-y': '1px'
+        }, this.element.getAttribute(csp_styles_1.STYLE_ATTR) || undefined);
     }
     _isTrackpadPinch(e) {
         // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-pdfviewer-common",
   "description": "Kendo UI TypeScript package exporting functions for PDFViewer component",
-  "version": "1.0.0-develop.4",
+  "version": "1.0.1-develop.1",
   "keywords": [
     "Kendo UI"
   ],