1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../BaseElement';
17
18@element('lit-pop-content')
19export class LitPopContent extends BaseElement {
20  static get observedAttributes(): string[] {
21    return ['open'];
22  }
23
24  get open(): boolean {
25    return this.hasAttribute('open');
26  }
27
28  set open(value: boolean) {
29    if (value === null || !value) {
30      this.removeAttribute('open');
31      let parentElement = this.parentNode as Element;
32      parentElement?.removeAttribute('open');
33    } else {
34      this.setAttribute('open', '');
35      let parentElement = this.parentNode as Element;
36      parentElement?.setAttribute('open', '');
37    }
38  }
39
40  initElements(): void {}
41
42  initHtml(): string {
43    return `
44        <style>
45        :host{
46            font-family: Helvetica,serif;
47            position:absolute;
48            display:flex;
49            background:#ffffff;
50            box-shadow: -2px 0 3px -1px white, 0 -2px 3px -1px white, 0 2px 3px -1px white, 2px 0 3px -1px white;
51            box-sizing: border-box;
52            border-radius: 5px;
53            transition:0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
54            transform:scale(0);
55            transform-origin:inherit;
56            visibility:hidden;
57            z-index:10;
58    
59        }
60        .pop-content-body{
61            display:flex;
62            flex:1;
63            padding: 20px;
64            flex-direction:column;
65            width: max-content;
66            box-sizing: border-box;
67            border: 1px solid #000000;
68        }
69        </style>
70        <div class="pop-content-body" >
71            <slot></slot>
72        </div>
73        `;
74  }
75
76  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
77    switch (name) {
78      case 'open':
79        if (newValue === null || newValue === 'false') {
80          let parentElement = this.parentNode as Element;
81          parentElement?.removeAttribute('open');
82        } else {
83          let parentElement = this.parentNode as Element;
84          parentElement?.setAttribute('open', '');
85        }
86        break;
87      default:
88        break;
89    }
90  }
91}
92