/*
* 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';
import { replacePlaceholders } from '../utils/Template';
let css = `
`;
const initHtmlStyle = (wid: string): string => {
return replacePlaceholders(css, wid);
};
@element('lit-popover')
export class LitPopover extends BaseElement {
static get observedAttributes(): string[] {
return ['title', 'trigger', 'width', 'placement', 'visible'];
}
get visible(): string {
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(): string | null {
return this.getAttribute('placement');
}
get trigger(): string {
return this.getAttribute('trigger') || 'hover';
}
set trigger(value) {
this.setAttribute('trigger', value);
}
get title(): string {
return this.getAttribute('title') || '';
}
set title(value: string) {
this.setAttribute('title', value);
}
get width(): string {
return this.getAttribute('width') || 'max-content';
}
set width(value) {
this.setAttribute('width', value);
}
get haveRadio(): string | null {
return this.getAttribute('haveRadio');
}
initElements(): void {}
initHtml(): string {
return `
${initHtmlStyle(this.width)}