• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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.js";
17
18@element("lit-pop-content")
19export class LitPopContent extends BaseElement {
20    static get observedAttributes() {
21        return ["open"]
22    }
23
24    get open() {
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
43    initHtml(): string {
44        return `
45        <style>
46        :host{
47            font-family: Helvetica,serif;
48            position:absolute;
49            display:flex;
50            background:#ffffff;
51            box-shadow: -2px 0 3px -1px white, 0 -2px 3px -1px white, 0 2px 3px -1px white, 2px 0 3px -1px white;
52            box-sizing: border-box;
53            border-radius: 5px;
54            transition:0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
55            transform:scale(0);
56            transform-origin:inherit;
57            visibility:hidden;
58            z-index:10;
59
60        }
61        .pop-content-body{
62            display:flex;
63            flex:1;
64            padding: 20px;
65            flex-direction:column;
66            width: max-content;
67            box-sizing: border-box;
68            border: 1px solid #000000;
69        }
70        </style>
71        <div class="pop-content-body" >
72            <slot></slot>
73        </div>
74        `;
75    }
76
77    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
78        switch (name) {
79            case "open":
80                if (newValue === null || newValue === "false") {
81                    let parentElement = this.parentNode as Element;
82                    parentElement?.removeAttribute('open');
83                } else {
84                    let parentElement = this.parentNode as Element;
85                    parentElement?.setAttribute('open', '');
86                }
87                break;
88            default:
89                break;
90        }
91    }
92}