@kontent-ai/smart-link/dist/commonjs/web-components/KSLContainerElement.js

Kontent.ai Smart Link SDK allowing to automatically inject [smart links](https://docs.kontent.ai/tutorials/develop-apps/build-strong-foundation/set-up-editing-from-preview#a-using-smart-links) to Kontent.ai according to manually specified [HTML data attri

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KSLContainerElement = void 0;
const KSLCustomElement_1 = require("./abstract/KSLCustomElement");
const KSLAddButtonElement_1 = require("./KSLAddButtonElement");
const KSLHighlightElement_1 = require("./KSLHighlightElement");
const domElement_1 = require("../utils/domElement");
const zIndex_1 = require("./tokens/zIndex");
const templateHTML = `
  <style>
    :host {
      display: block;
      position: absolute;
      box-sizing: border-box;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      pointer-events: none;
      touch-action: none;
      z-index: var(--ksl-z-index, ${zIndex_1.BaseZIndex});
    }
    
    :host([clipped]) {
      overflow: hidden;
    }
  </style>
  <slot></slot>
`;
class KSLContainerElement extends KSLCustomElement_1.KSLCustomElement {
    static get is() {
        return 'ksl-container';
    }
    _boundingClientRect = null;
    static initializeTemplate() {
        return (0, domElement_1.createTemplateForCustomElement)(templateHTML);
    }
    getBoundingClientRect(shouldRecompute = false) {
        if (!this._boundingClientRect || shouldRecompute) {
            this._boundingClientRect = super.getBoundingClientRect();
        }
        return this._boundingClientRect;
    }
    createHighlightForElement = (element) => {
        const highlight = document.createElement(KSLHighlightElement_1.KSLHighlightElement.is);
        highlight.attachTo(element);
        this.appendChild(highlight);
        return highlight;
    };
    createAddButtonForElement = (element) => {
        const button = document.createElement(KSLAddButtonElement_1.KSLAddButtonElement.is);
        button.attachTo(element);
        this.appendChild(button);
        return button;
    };
    adjustPosition = () => {
        const parent = this.parentElement;
        if (!parent) {
            return; // No need to adjust position when element is not mounted.
        }
        const metadata = (0, domElement_1.getRenderingRootMetadata)(parent);
        if (!metadata.isPositioned) {
            // When parent element is not positioned it means that container
            // will be positioned relatively to some other element. That is why we need
            // to keep in mind all of the scroll offsets on the way to this relative element.
            const [scrollOffsetTop, scrollOffsetLeft] = (0, domElement_1.getTotalScrollOffset)(parent);
            this.style.height = `${parent.clientHeight}px`;
            this.style.width = `${parent.clientWidth}px`;
            this.style.top = `${parent.offsetTop - scrollOffsetTop}px`;
            this.style.left = `${parent.offsetLeft - scrollOffsetLeft}px`;
            // When parent element is not positioned and its content is clipped
            // we need to hide overflow of the container as well to prevent
            // highlights from appearing for overflown content.
            this.updateAttribute('clipped', Boolean(metadata.isContentClipped));
        }
        this.getBoundingClientRect(true);
    };
}
exports.KSLContainerElement = KSLContainerElement;
//# sourceMappingURL=KSLContainerElement.js.map