@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
140 lines (136 loc) • 4.48 kB
JavaScript
/**
* 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-beacon.scss.js';
import '@carbon/web-components/es-custom/components/button/button.js';
import { BEACON_KIND } from './defs.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-beacon`;
/**
* CoachmarkBeacon.
*
* @element c4p-coachmark-beacon
* @fires c4p-coachmark-beacon-clicked Custom event fired when beacon is clicked
* */
let CDSCoachmarkBeacon = class CDSCoachmarkBeacon extends HostListenerMixin(LitElement) {
constructor() {
super(...arguments);
/**
* What style of beacon.
* BEACON_KIND is an enum from the Coachmark and can be used for this value.
* @see {@Link BEACON_KIND}
*/
this.kind = BEACON_KIND.DEFAULT;
/**
* The aria label.
*/
this.label = 'Show information';
/**
* id for the coachmark beacon
*/
this.id = crypto.randomUUID();
/**
* specify aria-expanded of beacon
*/
this.expanded = false;
this.handleOutsideClick = (event) => {
if (!this.contains(event.target)) {
this.expanded = false;
document.removeEventListener('click', this.handleOutsideClick);
}
};
}
firstUpdated() {
this.classList.add(blockClass);
if (this.kind) {
this.classList.add(`${blockClass}-${this.kind}`);
}
}
connectedCallback() {
super.connectedCallback();
if (this.expanded) {
document.addEventListener('click', this.handleOutsideClick);
}
}
_handleClick() {
this.expanded = !this.expanded;
if (this.expanded) {
document.addEventListener('click', this.handleOutsideClick);
}
else {
document.removeEventListener('click', this.handleOutsideClick);
}
this.dispatchEvent(new CustomEvent(this.constructor.beaconClicked, {
detail: { expanded: this.expanded },
bubbles: true,
composed: true,
}));
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('click', this.handleOutsideClick);
}
render() {
return html `
<cds-custom-button
class="${blockClass}__target"
type="button"
id=${this.id}
aria-expanded="${String(this.expanded)}"
=${this._handleClick}
>
<slot name="icon">
<svg
class="${blockClass}__center"
aria-label=${this.label}
width="76"
height="76"
viewBox="0 0 76 76"
>
<title>${this.label}</title>
<circle r="1" cx="36" cy="36"></circle>
</svg>
</slot>
</cds-custom-button>
`;
}
static get beaconClicked() {
return `${prefix}-coachmark-beacon-clicked`;
}
};
CDSCoachmarkBeacon.shadowRootOptions = Object.assign(Object.assign({}, LitElement.shadowRootOptions), { delegatesFocus: true });
CDSCoachmarkBeacon.styles = styles;
__decorate([
property({ reflect: true })
], CDSCoachmarkBeacon.prototype, "kind", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSCoachmarkBeacon.prototype, "label", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSCoachmarkBeacon.prototype, "id", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], CDSCoachmarkBeacon.prototype, "expanded", void 0);
CDSCoachmarkBeacon = __decorate([
carbonElement(`${prefix}-coachmark-beacon`)
], CDSCoachmarkBeacon);
var CDSCoachmarkBeacon$1 = CDSCoachmarkBeacon;
export { CDSCoachmarkBeacon$1 as default };
//# sourceMappingURL=coachmark-beacon.js.map