/* * Copyright (C) 2022 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { BaseElement, element } from '../BaseElement.js'; @element('lit-popover') export class LitPopover extends BaseElement { static get observedAttributes() { return ['title', 'trigger', 'width', 'placement', 'visible']; } get visible() { return this.getAttribute('visible') || 'false'; } set visible(value) { if (value) { this.setAttribute('visible', 'true'); } else { this.setAttribute('visible', 'false'); } } set placement(value) { this.setAttribute('placement',value || 'bottomLeft'); } get placement() { return this.getAttribute('placement') } get trigger() { return this.getAttribute('trigger') || 'hover'; } set trigger(value) { this.setAttribute('trigger', value); } get title() { return this.getAttribute('title'); } set title(value: any) { this.setAttribute('title', value); } get width() { return this.getAttribute('width') || 'max-content'; } set width(value) { this.setAttribute('width', value); } get haveRadio() { return this.getAttribute('haveRadio'); } initElements(): void {} initHtml() { return `
${this.title}
`; } connectedCallback() { let popover: any = this.shadowRoot!.querySelector('.popover'); let checkbox: any = this.shadowRoot!.querySelector('.trigger-click'); this.setAttribute('tabindex', '1'); popover.onclick = (e: any) => { e.stopPropagation(); }; popover.addEventListener('mousemove', (e: any) => { e.stopPropagation(); }); this.onclick = (e: any) => { e.stopPropagation(); if (e.relatedTarget?.hasAttribute('not-close')) { this.focus(); } checkbox.checked = !checkbox.checked; this.visible = checkbox.checked; }; popover.onmouseleave = () => { this.focus(); }; this.onblur = (ev: any) => { if (ev.relatedTarget && this.haveRadio) { if (ev.relatedTarget.hasAttribute('not-close')) { } else if (ev.relatedTarget.type === 'radio') { this.focus(); } else { // @ts-ignore this.visible = false; } } else { // @ts-ignore this.visible = false; } }; } disconnectedCallback() {} adoptedCallback() {} attributeChangedCallback(name: any, oldValue: any, newValue: any) { if (name === 'visible') { if (newValue === 'false') { // @ts-ignore this.shadowRoot!.querySelector('.trigger-click')!.checked = false; } else { // @ts-ignore this.shadowRoot!.querySelector('.trigger-click')!.checked = true; } } } }