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 16 17import {BaseElement, element} from "../BaseElement.js"; 18import {LitTabs} from "./lit-tabs.js"; 19 20@element('lit-tabpane') 21export class LitTabpane extends BaseElement { 22 static get observedAttributes() { 23 return ['tab', 'key', 'disabled', 'icon', 'closeable', 'hidden']; 24 } 25 26 get tab() { 27 return this.getAttribute('tab'); 28 } 29 30 set tab(value) { 31 this.setAttribute("tab", value || ""); 32 } 33 34 get icon() { 35 return this.getAttribute("icon"); 36 } 37 38 get disabled() { 39 return this.getAttribute('disabled') !== null; 40 } 41 42 set disabled(value) { 43 if (value === null || value === false) { 44 this.removeAttribute("disabled"); 45 } else { 46 this.setAttribute("disabled", value + ''); 47 } 48 } 49 50 get hidden() { 51 return this.getAttribute('hidden') !== null; 52 } 53 54 set hidden(value) { 55 this.setAttribute("hidden", `${value}`); 56 } 57 58 get closeable() { 59 return this.getAttribute('closeable') !== null; 60 } 61 62 set closeable(value) { 63 if (value === null || value === false) { 64 this.removeAttribute("closeable"); 65 } else { 66 this.setAttribute("closeable", value + ''); 67 } 68 } 69 70 get key() { 71 return this.getAttribute("key") || ''; 72 } 73 74 set key(value) { 75 this.setAttribute("key", value); 76 } 77 78 initElements(): void { 79 } 80 81 initHtml(): string { 82 return ` 83 <style> 84 :host(){ 85 scroll-behavior: smooth; 86 -webkit-overflow-scrolling: touch; 87 overflow: auto; 88 width: 100%; 89 } 90 </style> 91 <slot></slot> 92 `; 93 } 94 95 connectedCallback() { 96 } 97 98 disconnectedCallback() { 99 } 100 101 adoptedCallback() { 102 } 103 104 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 105 if (oldValue !== newValue && newValue !== undefined) { 106 if (name === 'tab' && this.parentNode && this.parentNode instanceof LitTabs) { 107 this.parentNode.updateLabel && this.parentNode.updateLabel(this.key, newValue); 108 } 109 if (name === 'disabled' && this.parentNode && this.parentNode instanceof LitTabs) { 110 this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key, newValue); 111 } 112 if (name === 'closeable' && this.parentNode && this.parentNode instanceof LitTabs) { 113 this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue); 114 } 115 if (name === 'hidden' && this.parentNode && this.parentNode instanceof LitTabs) { 116 this.parentNode.updateHidden && this.parentNode.updateHidden(this.key, newValue); 117 } 118 } 119 } 120} 121