@kontent-ai/smart-link/dist/commonjs/web-components/KSLHighlightElement.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.KSLHighlightElement = void 0;
const Logger_1 = require("../lib/Logger");
const assert_1 = require("../utils/assert");
const elementHighlight_1 = require("../utils/dataAttributes/elementHighlight");
const parser_1 = require("../utils/dataAttributes/parser");
const domElement_1 = require("../utils/domElement");
const KSLPositionedElement_1 = require("./abstract/KSLPositionedElement");
const KSLButtonElement_1 = require("./KSLButtonElement");
const KSLContainerElement_1 = require("./KSLContainerElement");
const KSLIconElement_1 = require("./KSLIconElement");
const colors_1 = require("./tokens/colors");
const shadows_1 = require("./tokens/shadows");
const zIndex_1 = require("./tokens/zIndex");
const templateHTML = `
  <style>
    :host,
    :host * {
      box-sizing: border-box;
    }
    
    :host {
      display: block;
      position: absolute;
      pointer-events: none;
      touch-action: none;
      min-height: 40px;
      min-width: 40px;
      width: 100%;
      height: 100%;
      border: 2px dashed;
      border-color: var(--ksl-color-primary-transparent, ${colors_1.Colors.PrimaryTransparent});
      border-radius: 5px;
    }
    
    :host([hidden]) {
      display: none;
    }
    
    :host(:hover),
    :host([selected]) {
      border-color: var(--ksl-color-primary, ${colors_1.Colors.Primary});
      z-index: calc(var(--ksl-z-index, ${zIndex_1.BaseZIndex}) + 10);
    }
    
    :host(:focus) {
      outline: none;
    }
    
    .ksl-highlight__toolbar {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      pointer-events: all;
      touch-action: auto;
      min-height: 40px;
      max-height: 40px;
      border-radius: 8px;
      background-color: var(--ksl-color-background-default, ${colors_1.Colors.BackgroundDefault});
      z-index: var(--ksl-z-index, ${zIndex_1.BaseZIndex});
      padding: 8px;
      box-shadow: var(--ksl-shadow-default, ${shadows_1.Shadows.Default});
    }
    
    .ksl-highlight__toolbar:hover {
      z-index: calc(var(--ksl-z-index, ${zIndex_1.BaseZIndex}) + 10);
    }
    
    .ksl-highlight__toolbar-button + .ksl-highlight__toolbar-button {
      margin-left: 4px;
    }
  </style>
  <div id="ksl-toolbar" class="ksl-highlight__toolbar">
    <ksl-button 
      id="ksl-edit" 
      class="ksl-highlight__toolbar-button"
      type="${KSLButtonElement_1.ButtonType.Quinary}"
      tooltip-position="${KSLPositionedElement_1.ElementPositionOffset.BottomEnd}"
    >
      <ksl-icon icon-name="${KSLIconElement_1.IconName.Edit}" />
    </ksl-button>
  </div>
`;
class KSLHighlightElement extends KSLPositionedElement_1.KSLPositionedElement {
    static get is() {
        return "ksl-highlight";
    }
    get type() {
        return (0, elementHighlight_1.getHighlightTypeForElement)(this.targetRef);
    }
    get selected() {
        return this.hasAttribute("selected");
    }
    set selected(value) {
        this.updateAttribute("selected", value);
    }
    editButtonRef;
    constructor() {
        super();
        (0, assert_1.assert)(this.shadowRoot, 'Shadow root must be always accessible in "open" mode.');
        this.editButtonRef = this.shadowRoot.querySelector("#ksl-edit");
    }
    static initializeTemplate() {
        return (0, domElement_1.createTemplateForCustomElement)(templateHTML);
    }
    static getEditButtonTooltip(type) {
        switch (type) {
            case elementHighlight_1.HighlightType.Element:
                return "Edit element";
            case elementHighlight_1.HighlightType.ContentComponent:
                return "Edit component";
            case elementHighlight_1.HighlightType.ContentItem:
                return "Edit item";
            case elementHighlight_1.HighlightType.None:
                return "Edit";
        }
    }
    connectedCallback() {
        super.connectedCallback();
        this.editButtonRef.addEventListener("click", this.handleEditButtonClick);
    }
    disconnectedCallback() {
        super.connectedCallback();
        this.editButtonRef.removeEventListener("click", this.handleEditButtonClick);
        this.unregisterTargetNodeListeners();
    }
    attachTo = (node) => {
        this.unregisterTargetNodeListeners();
        super.attachTo(node);
        const type = this.type;
        this.hidden = type === elementHighlight_1.HighlightType.None;
        this.editButtonRef.tooltipMessage = KSLHighlightElement.getEditButtonTooltip(type);
        if (this.targetRef) {
            this.targetRef.addEventListener("mousemove", this.handleTargetNodeMouseEnter);
            this.targetRef.addEventListener("mouseleave", this.handleTargetNodeMouseLeave);
            this.targetRef.addEventListener("click", this.handleEditButtonClick);
        }
    };
    adjustPosition = () => {
        if (!this.targetRef || !this.offsetParent) {
            return;
        }
        if (!(this.offsetParent instanceof KSLContainerElement_1.KSLContainerElement)) {
            (0, Logger_1.logWarn)("KSLHighlightElement: should be located inside KSLContainerElement to be positioned properly.");
        }
        const offsetParentRect = this.offsetParent.getBoundingClientRect();
        const targetRect = this.targetRef.getBoundingClientRect();
        this.style.top = `${targetRect.top - offsetParentRect.top}px`;
        this.style.left = `${targetRect.left - offsetParentRect.left}px`;
        this.style.width = `${targetRect.width}px`;
        this.style.height = `${targetRect.height}px`;
    };
    unregisterTargetNodeListeners = () => {
        if (this.targetRef) {
            this.targetRef.removeEventListener("mousemove", this.handleTargetNodeMouseEnter);
            this.targetRef.removeEventListener("mouseleave", this.handleTargetNodeMouseLeave);
            this.targetRef.removeEventListener("click", this.handleEditButtonClick);
        }
    };
    handleTargetNodeMouseEnter = () => {
        this.selected = true;
    };
    handleTargetNodeMouseLeave = () => {
        this.selected = false;
    };
    handleEditButtonClick = (event) => {
        (0, assert_1.assert)(this.targetRef, "Target node is not set for this highlight.");
        event.preventDefault();
        event.stopPropagation();
        const dataAttributes = (0, parser_1.parseEditButtonDataAttributes)(this.targetRef);
        this.dispatchEditEvent(dataAttributes);
    };
    dispatchEditEvent = (data) => {
        (0, assert_1.assert)(this.targetRef, "Target node is not set for this highlight element.");
        const customEvent = new CustomEvent("ksl:highlight:edit", {
            detail: {
                data,
                targetNode: this.targetRef,
            },
        });
        this.dispatchEvent(customEvent);
    };
}
exports.KSLHighlightElement = KSLHighlightElement;
//# sourceMappingURL=KSLHighlightElement.js.map