/*
* 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 { LitPopContent } from './LitPopContent';
import { LitPopoverTitle } from './LitPopoverTitle';
import { LitRadioGroup } from '../radiobox/LitRadioGroup';
import { LitRadioBox } from '../radiobox/LitRadioBox';
import { LitCheckBox } from '../checkbox/LitCheckBox';
import { LitCheckGroup } from '../checkbox/LitCheckGroup';
import { LitCheckBoxWithText } from '../checkbox/LitCheckBoxWithText';
const initHtmlStyle = `
`;
@element('lit-popover')
export class LitPopover extends BaseElement {
private popContent: LitPopContent | null | undefined;
private litGroup: LitRadioGroup | LitCheckGroup | undefined;
private _texBox: LitCheckBoxWithText | undefined;
static get observedAttributes(): string[] {
return [];
}
get type(): string {
return this.getAttribute('type') || '';
}
set type(type: string) {
this.setAttribute('type', type);
}
get title(): string {
return this.getAttribute('title') || '';
}
set title(title: string) {
this.setAttribute('title', title);
}
get limit(): LimitText {
if (this._texBox?.checked) {
return {
textLowerLimit: this._texBox.lowerLimit,
textUpperLimit: this._texBox.upLimit,
};
}
return { textLowerLimit: '', textUpperLimit: '' };
}
set dataSource(dataSource: Array) {
this.popContent = this.querySelector('lit-pop-content');
if (!this.popContent) {
this.popContent = new LitPopContent();
this.appendChild(this.popContent);
}
switch (this.type) {
case 'multiple':
this.setMultiple(dataSource);
break;
case 'radio':
this.litGroup = new LitRadioGroup();
if (this.title !== '') {
let title = new LitPopoverTitle();
title.setAttribute('title', this.title || '');
this.popContent!.appendChild(title);
this.litGroup.setAttribute('layout', 'compact');
} else {
this.litGroup.setAttribute('layout', 'dispersion');
}
this.popContent!.appendChild(this.litGroup);
dataSource.forEach((data) => {
let litRadioBox = new LitRadioBox();
if (this.title === '') {
litRadioBox.setAttribute('dis', 'round');
} else {
litRadioBox.setAttribute('dis', 'check');
}
if (data.isSelected) {
litRadioBox.setAttribute('checked', 'true');
}
this.litGroup?.appendChild(litRadioBox);
litRadioBox.setAttribute('value', data.text);
});
break;
case 'multiple-text':
dataSource.forEach((data) => {
this._texBox = new LitCheckBoxWithText();
this._texBox.setAttribute('text', data.text);
this._texBox.setAttribute('checked', '');
this.popContent!.appendChild(this._texBox);
});
break;
case 'data-ming':
break;
}
}
setMultiple(dataSource: Array): void {
this.litGroup = new LitCheckGroup();
this.litGroup.setAttribute('layout', 'dispersion');
this.popContent!.appendChild(this.litGroup);
dataSource.forEach((data) => {
let litCheckBox = new LitCheckBox();
this.litGroup?.appendChild(litCheckBox);
if (data.isSelected) {
litCheckBox.setAttribute('checked', 'true');
}
litCheckBox.setAttribute('value', data.text);
});
}
get select(): Array | undefined {
if (this._texBox?.checked) {
return [this._texBox!.text];
}
return this.litGroup?.value;
}
get trigger(): string | null {
return this.getAttribute('trigger');
}
get direction(): string {
return this.getAttribute('direction') || 'topright';
}
set direction(value: string) {
this.setAttribute('direction', value);
}
get open(): boolean {
return this.getAttribute('open') !== null;
}
set open(value: boolean) {
if (value === null || value === false) {
this.removeAttribute('open');
} else {
this.setAttribute('open', '');
}
}
initElements(): void {}
initHtml(): string {
return `
${initHtmlStyle}
`;
}
connectedCallback(): void {
if (!(this.trigger && this.trigger !== 'click')) {
this.addEventListener('click', () => {
this.popContent = this.querySelector('lit-pop-content');
if (!this.popContent) {
this.popContent = new LitPopContent();
this.appendChild(this.popContent);
}
this.popContent?.setAttribute('open', 'true');
});
}
document.addEventListener('mousedown', (ev) => {
const path = ev.composedPath && ev.composedPath();
if (
// @ts-ignore
this.popContent &&
!path.includes(this.popContent) &&
!path.includes(this.children[0]) &&
!path.includes(this.popContent)
) {
this.popContent!.open = false;
}
});
}
}
export interface SelectBean {
text: string;
isSelected: boolean;
limitText?: LimitText;
}
export interface LimitText {
textUpperLimit: string;
textLowerLimit: string;
}
export interface Charge {
text: string;
isSelected: boolean;
}