browser/libs/components/src/disclosure/disclosure.component.ts

import { ChangeDetectionStrategy, Component, computed, model } from "@angular/core";

let nextId = 0;

/**
 * The `bit-disclosure` component is used in tandem with the `bitDisclosureTriggerFor` directive to create an accessible content area whose visibility is controlled by a trigger button.
 *
 * To compose a disclosure and trigger:
 *
 * 1. Create a trigger component (see "Supported Trigger Components" section below)
 * 2. Create a `bit-disclosure`
 * 3. Set a template reference on the `bit-disclosure`
 * 4. Use the `bitDisclosureTriggerFor` directive on the trigger component, and pass it the `bit-disclosure` template reference
 * 5. Set the `open` property on the `bit-disclosure` to init the disclosure as either currently expanded or currently collapsed. The disclosure will default to `false`, meaning it defaults to being hidden.
 *
 * @example
 *
 * ```html
 * <button
 *   type="button"
 *   bitIconButton="bwi-sliders"
 *   buttonType="muted"
 *   [bitDisclosureTriggerFor]="disclosureRef"
 *   [label]="'Settings' | i18n"
 * ></button>
 * <bit-disclosure #disclosureRef [(open)]="isOpen">click button to hide this content</bit-disclosure>
 * ```
 */
@Component({
  selector: "bit-disclosure",
  template: `<ng-content></ng-content>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    "[class]": "classList()",
    "[id]": "id",
  },
})
export class DisclosureComponent {
  /**
   * Controls the visibility of the disclosure content.
   */
  readonly open = model<boolean>(false);

  /**
   * Autogenerated id.
   */
  readonly id = `bit-disclosure-${nextId++}`;

  protected readonly classList = computed(() => (this.open() ? "" : "tw-hidden"));
}