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 initHtml(): string { 80 return ` 81 <style> 82 :host(){ 83 scroll-behavior: smooth; 84 -webkit-overflow-scrolling: touch; 85 overflow: auto; 86 width: 100%; 87 } 88 </style> 89 <slot></slot> 90 `; 91 } 92 93 connectedCallback() {} 94 95 disconnectedCallback() {} 96 97 adoptedCallback() {} 98 99 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 100 if (oldValue !== newValue && newValue !== undefined) { 101 if (name === 'tab' && this.parentNode && this.parentNode instanceof LitTabs) { 102 this.parentNode.updateLabel && this.parentNode.updateLabel(this.key, newValue); 103 } 104 if (name === 'disabled' && this.parentNode && this.parentNode instanceof LitTabs) { 105 this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key, newValue); 106 } 107 if (name === 'closeable' && this.parentNode && this.parentNode instanceof LitTabs) { 108 this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue); 109 } 110 if (name === 'hidden' && this.parentNode && this.parentNode instanceof LitTabs) { 111 this.parentNode.updateHidden && this.parentNode.updateHidden(this.key, newValue); 112 } 113 } 114 } 115} 116