@carbon/ibm-products-web-components/es/components/coachmark/coachmark.js

Carbon for IBM Products Web Components

/**
 * Copyright IBM Corp. 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { __decorate } from 'tslib';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings.js';
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import styles from './coachmark.scss.js';
import { SignalWatcher } from '@lit-labs/signals';
import '@carbon/web-components/es/components/popover/index.js';
import { POPOVER_ALIGNMENT } from '@carbon/web-components/es/components/popover/defs.js';
import { makeDraggable } from '../../utilities/makeDraggable/makeDraggable.js';
import { resetCoachmarkDetailsSignal, updateCoachmarkDetailsSignal } from './coachmark-context.js';

/**
 * @license
 *
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
const blockClass = `${prefix}--coachmark`;
/**
 * coachmark main component
 * @element c4p-coachmark
 */
let CDSCoachmark = class CDSCoachmark extends SignalWatcher(HostListenerMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Specifies whether the component is currently open.
         */
        this.open = false;
        /**
         * Where to render the Coachmark relative to its target.
         */
        this.align = POPOVER_ALIGNMENT.TOP;
        /**
         * Specifies whether the component is floating or not.
         */
        this.floating = false;
        /**
         * Specify whether the component should be rendered on high-contrast.
         */
        this.highContrast = false;
        /**
         * Specify whether a drop shadow should be rendered on the popover.
         */
        this.dropShadow = false;
        this.dragCleanup = null;
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        if (this.dragCleanup) {
            this.dragCleanup();
        }
        resetCoachmarkDetailsSignal();
    }
    setupDraggable() {
        var _a;
        const popover = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}--popover`);
        const popoverContent = popover.querySelector('cds-popover-content');
        const wrapper = popoverContent.querySelector(`.${blockClass}--wrapper`);
        const slot = wrapper.querySelector('slot');
        const assignedElements = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true });
        const header = assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.find((el) => el.tagName.toLowerCase() === 'c4p-coachmark-header');
        requestAnimationFrame(() => {
            var _a;
            const dragHandle = (_a = header.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drag-handle');
            const draggable = makeDraggable({
                el: popoverContent,
                dragHandle: header,
                focusableDragHandle: dragHandle,
            });
            const onDragStart = () => {
                popoverContent.classList.add('is-dragging');
                popoverContent.setAttribute('aria-label', 'Picked up the draggable popoverContent');
            };
            const onDragEnd = () => {
                popoverContent.classList.remove('is-dragging');
                popoverContent.setAttribute('aria-label', 'Draggable popoverContent was dropped');
            };
            popoverContent.addEventListener('dragstart', onDragStart);
            popoverContent.addEventListener('dragend', onDragEnd);
            // store cleanup
            this.dragCleanup = () => {
                var _a;
                popoverContent.removeEventListener('dragstart', onDragStart);
                popoverContent.removeEventListener('dragend', onDragEnd);
                (_a = draggable.cleanup) === null || _a === void 0 ? void 0 : _a.call(draggable);
            };
        });
    }
    firstUpdated() {
        if (this.floating) {
            this.classList.add(`${blockClass}--floating`);
            this.setupDraggable();
            updateCoachmarkDetailsSignal({
                name: 'floating',
                detail: this.floating,
            });
        }
    }
    updated(changedProps) {
        var _a;
        if (changedProps.has('position')) {
            const { x = 0, y = 0 } = (_a = this.position) !== null && _a !== void 0 ? _a : {};
            if (x !== 0 || y !== 0) {
                this.style.transform = `translate(${x}px, ${y}px)`;
            }
        }
    }
    render() {
        return html `
      <cds-popover
        class="${blockClass}--popover"
        ?open=${this.open}
        .caret=${this.floating === true ? false : true}
        ?highContrast=${this.highContrast}
        align=${this.align}
        ?dropShadow=${this.dropShadow}
      >
        <slot name="trigger"></slot>
        <cds-popover-content>
          <div class="${blockClass}--wrapper">
            <slot></slot>
          </div>
        </cds-popover-content>
      </cds-popover>
    `;
    }
};
CDSCoachmark.styles = styles;
__decorate([
    property({ type: Boolean, reflect: true })
], CDSCoachmark.prototype, "open", void 0);
__decorate([
    property({ reflect: true, type: String })
], CDSCoachmark.prototype, "align", void 0);
__decorate([
    property({ type: Object })
], CDSCoachmark.prototype, "position", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], CDSCoachmark.prototype, "floating", void 0);
__decorate([
    property({ reflect: true })
], CDSCoachmark.prototype, "highContrast", void 0);
__decorate([
    property({ reflect: true })
], CDSCoachmark.prototype, "dropShadow", void 0);
CDSCoachmark = __decorate([
    carbonElement(`${prefix}-coachmark`)
], CDSCoachmark);
var CDSCoachmark$1 = CDSCoachmark;

export { blockClass, CDSCoachmark$1 as default };
//# sourceMappingURL=coachmark.js.map