@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/accordion/accordion.component.ts

@@ -0,0 +1,120 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SalasAccordionItemComponent } from './accordion-item.component';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionProps {
+  type?: AccordionType;
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  disabled?: boolean;
+}
+
+export interface AccordionItemProps {
+  value: string;
+  disabled?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-accordion',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-accordion {
+      display: flex;
+      flex-direction: column;
+    }
+  `],
+})
+export class SalasAccordionComponent implements AfterContentInit, OnDestroy {
+  @Input() type: AccordionType = 'single';
+  @Input() collapsible = true;
+  @Input() defaultValue?: string | string[];
+  @Input() disabled = false;
+
+  @Output() valueChange = new EventEmitter<string | string[] | undefined>();
+
+  @ContentChildren(SalasAccordionItemComponent) items!: QueryList<SalasAccordionItemComponent>;
+
+  private unsubscribes: Array<() => void> = [];
+
+  ngAfterContentInit(): void {
+    this.initItems();
+
+    this.items.changes.subscribe(() => {
+      this.clearSubscriptions();
+      this.initItems();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.clearSubscriptions();
+  }
+
+  private initItems(): void {
+    if (this.defaultValue) {
+      const defaults = Array.isArray(this.defaultValue)
+        ? this.defaultValue
+        : [this.defaultValue];
+      this.items.forEach((item) => {
+        item.open = defaults.includes(item.value);
+      });
+    }
+
+    this.items.forEach((item) => {
+      const sub = item.toggled.subscribe((value: string) => {
+        this.handleToggle(item);
+      });
+      this.unsubscribes.push(() => sub.unsubscribe());
+    });
+  }
+
+  private handleToggle(toggledItem: SalasAccordionItemComponent): void {
+    if (this.type === 'single') {
+      const wasOpen = toggledItem.open;
+      this.items.forEach((item) => {
+        item.open = false;
+      });
+      toggledItem.open = this.collapsible ? !wasOpen : true;
+    } else {
+      toggledItem.open = !toggledItem.open;
+    }
+
+    this.emitValue();
+  }
+
+  private emitValue(): void {
+    const openItems = this.items
+      .filter((item) => item.open)
+      .map((item) => item.value);
+
+    if (this.type === 'single') {
+      this.valueChange.emit(openItems[0] ?? undefined);
+    } else {
+      this.valueChange.emit(openItems.length > 0 ? openItems : undefined);
+    }
+  }
+
+  private clearSubscriptions(): void {
+    this.unsubscribes.forEach((unsub) => unsub());
+    this.unsubscribes = [];
+  }
+}

package/templates/angular/accordion/accordion.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { SalasAccordionComponent } from './accordion.component';
+import { SalasAccordionItemComponent } from './accordion-item.component';
+import { SalasAccordionTriggerComponent } from './accordion-trigger.component';
+import { SalasAccordionContentComponent } from './accordion-content.component';
+
+@NgModule({
+  imports: [
+    SalasAccordionComponent,
+    SalasAccordionItemComponent,
+    SalasAccordionTriggerComponent,
+    SalasAccordionContentComponent,
+  ],
+  exports: [
+    SalasAccordionComponent,
+    SalasAccordionItemComponent,
+    SalasAccordionTriggerComponent,
+    SalasAccordionContentComponent,
+  ],
+})
+export class SalasAccordionModule {}