1/*
2 * Copyright (C) 2024 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17import {Component, EventEmitter, Input, Output} from '@angular/core';
18import {CollapsibleSections} from 'viewers/common/collapsible_sections';
19import {CollapsibleSectionType} from 'viewers/common/collapsible_section_type';
20
21@Component({
22  selector: 'collapsed-sections',
23  template: `
24      <ng-container *ngFor="let section of sections.getCollapsedSections()">
25        <span class="collapsed-section" (click)="onCollapsedSectionClick(section.type)">
26            <span class="collapsed-section-text"> {{section.label.toUpperCase()}} </span>
27            <button mat-icon-button> <mat-icon> arrow_right </mat-icon> </button>
28        </span>
29      </ng-container>
30    `,
31  styles: [
32    `
33      :host {
34          font: 12px 'Roboto', sans-serif;
35          font-weight: bold;
36          margin: 4px 4px 4px 0px;
37      }
38      :host.empty {
39          display: none;
40      }
41      .collapsed-section {
42          cursor: pointer;
43          padding-top: 5px;
44          margin-bottom: 4px;
45          background-color: var(--side-bar-color);
46          color: var(--contrast-text-color);
47          border-radius: 0px 4px 4px 0px;
48          display: flex;
49          flex-direction: column;
50          align-items: center;
51      }
52      .collapsed-section-text {
53          rotate: 180deg;
54          writing-mode: vertical-lr;
55      }
56      .mat-icon-button {
57          height: 22px;
58          width: 22px;
59      }
60      .mat-icon {
61          font-size: 22px;
62          width: 22px;
63          height: 22px;
64          line-height: 22px;
65          display: flex;
66      }
67    `,
68  ],
69})
70export class CollapsedSectionsComponent {
71  @Input() sections: CollapsibleSections | undefined;
72  @Output() sectionChange = new EventEmitter<CollapsibleSectionType>();
73
74  onCollapsedSectionClick(sectionType: CollapsibleSectionType) {
75    this.sectionChange.emit(sectionType);
76  }
77}
78