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