@kontent-ai/smart-link/dist/es/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

import { KSLCustomElement } from './abstract/KSLCustomElement';
import { KSLAddButtonElement } from './KSLAddButtonElement';
import { KSLHighlightElement } from './KSLHighlightElement';
import { createTemplateForCustomElement, getRenderingRootMetadata, getTotalScrollOffset } from '../utils/domElement';
import { BaseZIndex } from './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, ${BaseZIndex});
    }
    
    :host([clipped]) {
      overflow: hidden;
    }
  </style>
  <slot></slot>
`;
export class KSLContainerElement extends KSLCustomElement {
    static get is() {
        return 'ksl-container';
    }
    _boundingClientRect = null;
    static initializeTemplate() {
        return createTemplateForCustomElement(templateHTML);
    }
    getBoundingClientRect(shouldRecompute = false) {
        if (!this._boundingClientRect || shouldRecompute) {
            this._boundingClientRect = super.getBoundingClientRect();
        }
        return this._boundingClientRect;
    }
    createHighlightForElement = (element) => {
        const highlight = document.createElement(KSLHighlightElement.is);
        highlight.attachTo(element);
        this.appendChild(highlight);
        return highlight;
    };
    createAddButtonForElement = (element) => {
        const button = document.createElement(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 = 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] = 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);
    };
}
//# sourceMappingURL=KSLContainerElement.js.map