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'; 17import { LitCheckBox } from './LitCheckBox'; 18 19@element('lit-check-group') 20export class LitCheckGroup extends BaseElement { 21 get direction(): string | null { 22 return this.getAttribute('direction'); 23 } 24 25 get value(): Array<string> { 26 let checkGroupValues = []; 27 for (const litCheckBoxElement of this.querySelectorAll<LitCheckBox>('lit-check-box[checked]')) { 28 checkGroupValues.push(litCheckBoxElement.value); 29 } 30 return checkGroupValues; 31 } 32 33 initElements(): void {} 34 35 connectedCallback(): void {} 36 37 initHtml(): string { 38 return `<style> 39 :host { 40 display: -webkit-flex; 41 display: flex; 42 flex-direction: column; 43 } 44 :host(:not([direction])) { 45 flex-direction: column; 46 } 47 :host([direction]) { 48 flex-direction: ${this.direction}; 49 } 50 :host([layout="dispersion"]) { 51 gap:10px; 52 } 53 :host([layout="compact"]) { 54 gap:5px; 55 } 56 </style> 57 <slot class="check-group"></slot>`; 58 } 59} 60