@carbon/ibm-products-web-components/es/components/coachmark/coachmark-header.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, nothing, html } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings.js';
import '@carbon/web-components/es/components/button/index';
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-header.scss.js';
import Close16 from '@carbon/icons/es/close/16';
import Draggable from '@carbon/icons/es/draggable/16';
import { SignalWatcher } from '@lit-labs/signals';
import { updateCoachmarkDetailsSignal, coachmarkDetailsSignal } from './coachmark-context.js';
import iconLoader from '@carbon/web-components/es/globals/internal/icon-loader';

/**
 * coachmark-header for content header section
 * @element c4p-coachmark-header
 */
let CDSCoachmarkHeader = class CDSCoachmarkHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Tooltip text and aria label for the Close button icon.
         */
        this.closeIconDescription = '';
        /**
         * Tooltip text and aria label for the Drag button icon.
         */
        this.dragIconDescription = '';
        this._handleClick = () => {
            updateCoachmarkDetailsSignal({
                name: 'open',
                detail: !coachmarkDetailsSignal.get().open,
            });
        };
    }
    render() {
        const { floating } = coachmarkDetailsSignal.get();
        return html `
      ${floating
            ? html `
            <cds-button
              kind="ghost"
              size="sm"
              class="${prefix}--coachmark-header-drag-handle"
              iconDescription="${this.dragIconDescription}"
              hasIconOnly
            >
              ${iconLoader(Draggable, {
                slot: 'icon',
                class: `${prefix}--coachmark-header-drag-icon`,
            })}
            </cds-button>
          `
            : nothing}
      <slot name="header"></slot>
      <cds-button
        kind="ghost"
        size="sm"
        iconDescription="${this.closeIconDescription}"
        hasIconOnly
        @click=${this._handleClick}
      >
        ${iconLoader(Close16, {
            slot: 'icon',
            class: `${prefix}--coachmark-header-close-icon`,
        })}
      </cds-button>
    `;
    }
};
CDSCoachmarkHeader.styles = styles;
__decorate([
    property({ reflect: true })
], CDSCoachmarkHeader.prototype, "closeIconDescription", void 0);
__decorate([
    property({ reflect: true })
], CDSCoachmarkHeader.prototype, "dragIconDescription", void 0);
CDSCoachmarkHeader = __decorate([
    carbonElement(`${prefix}-coachmark-header`)
], CDSCoachmarkHeader);
var CDSCoachmarkHeader$1 = CDSCoachmarkHeader;

export { CDSCoachmarkHeader$1 as default };
//# sourceMappingURL=coachmark-header.js.map