@universal-material/web 3.0.139 → 3.0.140

package/docs/src/app/components/cards/examples/simple-card.html

@@ -0,0 +1,5 @@
+<div class="u-grid u-gutter-small">
+  <u-card variant="filled">Filled card</u-card>
+  <u-card variant="elevated">Elevated card</u-card>
+  <u-card variant="outlined">Outlined card</u-card>
+</div>

package/docs/src/app/components/checkbox/checkbox.component.pug

@@ -0,0 +1,5 @@
+docs-title(title="Checkbox")
+
+docs-example(
+  sectionTitle="Checkbox",
+  [html]="checkboxHtml")

package/docs/src/app/components/checkbox/checkbox.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+// @ts-ignore
+import checkboxHtml from '!raw-loader!./examples/usage.html';
+
+@Component({
+  selector: 'docs-checkbox',
+  templateUrl: './checkbox.component.pug',
+  styleUrl: './checkbox.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class CheckboxComponent {
+  checkboxHtml = checkboxHtml;
+}

package/docs/src/app/components/checkbox/examples/usage.html

@@ -0,0 +1,33 @@
+<u-checkbox>
+  <input type="checkbox" id="check-1" disabled>
+</u-checkbox>
+<label for="check-1">Checkbox</label>
+<label>
+  <u-checkbox>
+    <input type="checkbox">
+  </u-checkbox>
+  Checkbox
+</label>
+
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled checked />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>

package/docs/src/app/components/chip-field/chip-field.component.pug

@@ -0,0 +1,17 @@
+docs-title(title="Chip field") A field that renders a chip for each item inside its value.
+
+docs-example(
+  sectionTitle="Simple",
+  [html]="simpleHtml")
+
+docs-example(
+  sectionTitle="Object value",
+  [renderExample]="false",
+  [html]="objectValuesHtml")
+  u-chip-field(
+    label="States",
+    manual,
+    [formatter]="formatter",
+    (keydown)="keyDown($event)")
+
+docs-apis-table(key="chipField")

package/docs/src/app/components/chip-field/chip-field.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+import { UmChipField } from '@universal-material/web';
+
+// @ts-ignore
+import simpleHtml from '!raw-loader!./examples/simple.html';
+// @ts-ignore
+import objectValuesHtml from '!raw-loader!./examples/object-values.html';
+
+@Component({
+  selector: 'docs-chip-field',
+  templateUrl: './chip-field.component.pug',
+  styleUrl: './chip-field.component.scss',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class ChipFieldComponent {
+
+  simpleHtml = simpleHtml;
+  objectValuesHtml = objectValuesHtml;
+
+  formatter = (state: {name: string}) => state.name;
+
+  keyDown($event: KeyboardEvent) {
+    if ($event.key !== 'Enter') {
+      return;
+    }
+
+    const chipField = <UmChipField>$event.target;
+    chipField.add({name: chipField.input.value}, true);
+    chipField.input.value = '';
+  }
+}

package/docs/src/app/components/chip-field/examples/object-values.html

@@ -0,0 +1,15 @@
+<u-chip-field label="Tags" manual></u-chip-field>
+
+<script>
+  const chipField = document.querySelector('u-chip-field');
+
+  chipField.formatter = state => state.name;
+  chipField.addEventListener('keydown', e => {
+    if (e.key !== 'Enter') {
+      return;
+    }
+
+    e.target.add({name: chipField.input.value}, true);
+    e.target.input.value = '';
+  });
+</script>

package/docs/src/app/components/chip-field/examples/simple.html

@@ -0,0 +1 @@
+<u-chip-field label="Tags"></u-chip-field>

package/docs/src/app/components/chips/chips.component.pug

@@ -0,0 +1,69 @@
+docs-title(title="Chips")
+
+docs-example(
+  sectionTitle="Live",
+  [renderExample]="false",
+  [html]="template")
+  h5.u-title-m Settings
+
+  u-chip-set
+    u-chip(
+      toggle,
+      (change)="elevated = $any($event.target).selected; updated$.next()",
+      [selected]="elevated") Elevated
+    u-chip(
+      toggle,
+      (change)="leadingIcon = $any($event.target).selected; updated$.next()",
+      [selected]="leadingIcon") Leading icon
+    u-chip(
+      toggle,
+      (change)="trailingIcon = $any($event.target).selected; updated$.next()",
+      [selected]="trailingIcon") Trailing icon
+    u-chip(
+      toggle,
+      (change)="selectedIcon = $any($event.target).selected; updated$.next()",
+      [selected]="selectedIcon") Custom selected icon
+    u-chip(
+      toggle,
+      (change)="customRemove = $any($event.target).selected; updated$.next()",
+      [selected]="customRemove") Custom remove icon
+    u-chip(
+      toggle,
+      (change)="removable = $any($event.target).selected; updated$.next()",
+      [selected]="removable") Removable
+    u-chip(
+      toggle,
+      (change)="clickable = $any($event.target).selected; updated$.next()",
+      [selected]="clickable") Clickable
+    u-chip(
+      toggle,
+      (change)="toggle = $any($event.target).selected; updated$.next()",
+      [selected]="toggle") Toggle
+    u-chip(
+      toggle,
+      (change)="hideSelectedIcon = $any($event.target).selected; updated$.next()",
+      [selected]="hideSelectedIcon") Hide selected icon
+
+  h5.u-title-m.u-mt-large Component
+  u-chip(
+    [elevated]="elevated",
+    [removable]="removable",
+    [clickable]="clickable",
+    [toggle]="toggle",
+    [hideSelectedIcon]="hideSelectedIcon",
+    (remove)="$event.preventDefault()")
+    span.material-symbols-outlined.material-symbols-fill.u-text-warning(
+      *ngIf="selectedIcon"
+      slot="selected-icon") star
+    span.material-symbols-outlined(
+      *ngIf="leadingIcon"
+      slot="leading-icon") star
+    | Label
+    span.material-symbols-outlined(
+      *ngIf="trailingIcon"
+      slot="trailing-icon") arrow_drop_down
+    span.material-symbols-outlined(
+      *ngIf="customRemove"
+      slot="remove-icon") cancel
+
+docs-apis-table(key="chip")

package/docs/src/app/components/chips/chips.component.ts

@@ -0,0 +1,131 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef } from '@angular/core';
+import { debounceTime, Subject } from 'rxjs';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+import { UmField } from '@universal-material/web';
+import { ContextTestComponent } from '@docs/components/context-test/context-test.component';
+
+@Component({
+  selector: 'docs-chips',
+  templateUrl: './chips.component.pug',
+  styleUrl: './chips.component.scss',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent,
+    ContextTestComponent
+  ]
+})
+export class ChipsComponent {
+  removable = true;
+  clickable = true;
+  elevated = false;
+  toggle = true;
+  hideSelectedIcon = false;
+  customRemove = true;
+  selectedIcon = true;
+  leadingIcon = true;
+  trailingIcon = true;
+
+  updated$ = new Subject<void>();
+
+  constructor() {
+    this
+      .updated$
+      .pipe(debounceTime(50))
+      .subscribe(() => this.updateTemplate());
+
+    this.updateTemplate();
+  }
+
+  updateTemplate(): void {
+    this.template = `
+<u-chip${this.getProperties()}>${this.getLeadingIcons()}
+  Label${this.getTrailingIcons()}
+</u-chip>`
+      .trimStart();
+  }
+
+  private getProperties(): string {
+    const properties: {[key: string]: any} = {};
+
+    if (this.removable) {
+      properties['removable'] = true;
+    }
+
+    if (this.hideSelectedIcon) {
+      properties['hide-selected-icon'] = true;
+    }
+
+    if (this.elevated) {
+      properties['elevated'] = true;
+    }
+
+    if (this.clickable) {
+      properties['clickable'] = true;
+    }
+
+    if (this.toggle) {
+      properties['toggle'] = true;
+    }
+
+    let propertiesValue = ``;
+
+    for (const property in properties) {
+      const value = properties[property];
+
+      propertiesValue += value === true
+        ? ` ${property}`
+        : ` ${property}="${value}"`;
+    }
+
+    return propertiesValue;
+  }
+
+  private getLeadingIcons(): string {
+    if (!this.selectedIcon && !this.leadingIcon) {
+      return '';
+    }
+
+    let icons = '';
+
+    if (this.selectedIcon) {
+      icons += `
+  <span class="material-symbols-outlined material-symbols-fill u-text-warning" slot="selected-icon">star</span>`;
+    }
+
+    if (this.leadingIcon) {
+      icons += `
+  <span class="material-symbols-outlined" slot="leading-icon">event</span>`;
+    }
+
+    return icons;
+  }
+
+  private getTrailingIcons(): string {
+    if (!this.trailingIcon && !this.customRemove) {
+      return '';
+    }
+
+    let icons = '';
+
+    if (this.trailingIcon) {
+      icons += `
+  <span class="material-symbols-outlined" slot="trailing-icon"arrow_drop_down</span>`;
+    }
+
+    if (this.customRemove) {
+      icons += `
+  <span class="material-symbols-outlined" slot="remove-icon"cancel</span>`;
+    }
+
+    return icons;
+  }
+
+  template = '';
+}

package/docs/src/app/components/common-buttons/common-buttons.component.pug

@@ -0,0 +1,23 @@
+docs-title(title="Buttons") Common buttons prompt most actions in a UI
+
+docs-example(
+  sectionTitle="Variants",
+  [html]="variantsHtml")
+
+docs-example(
+  sectionTitle="Filled colors",
+  [html]="filledColorsHtml")
+
+docs-example(
+  sectionTitle="Anchor buttons",
+  [html]="anchorButtonsHtml")
+
+docs-example(
+  sectionTitle="Icons",
+  [html]="iconsHtml")
+
+docs-example(
+  sectionTitle="Trailing icons",
+  [html]="trailingIconsHtml")
+
+docs-apis-table(key="button")

package/docs/src/app/components/common-buttons/common-buttons.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+// @ts-ignore
+import variantsHtml from '!raw-loader!./examples/buttons-variants.html';
+// @ts-ignore
+import filledColorsHtml from '!raw-loader!./examples/filled-colors.html';
+// @ts-ignore
+import anchorButtonsHtml from '!raw-loader!./examples/anchor-buttons.html';
+// @ts-ignore
+import iconsHtml from '!raw-loader!./examples/buttons-icons.html';
+// @ts-ignore
+import trailingIconsHtml from '!raw-loader!./examples/buttons-trailing-icons.html';
+
+@Component({
+  selector: 'docs-common-buttons',
+  templateUrl: './common-buttons.component.pug',
+  styleUrl: './common-buttons.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class CommonButtonsComponent {
+  variantsHtml = variantsHtml;
+  filledColorsHtml = filledColorsHtml;
+  anchorButtonsHtml = anchorButtonsHtml;
+  iconsHtml = iconsHtml;
+  trailingIconsHtml = trailingIconsHtml;
+}

package/docs/src/app/components/common-buttons/examples/anchor-buttons.html

@@ -0,0 +1,6 @@
+<u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank">Elevated</u-button>
+<u-button href="https://github.com/universal-material/universal-material-web" target="_blank">Filled</u-button>
+<u-button variant="tonal" href="https://github.com/universal-material/universal-material-web" target="_blank">Tonal</u-button>
+<u-button variant="outlined" href="https://github.com/universal-material/universal-material-web" target="_blank">Outlined</u-button>
+<u-button variant="text" href="https://github.com/universal-material/universal-material-web" target="_blank">Text</u-button>
+<u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank" disabled>Disabled</u-button>

package/docs/src/app/components/common-buttons/examples/buttons-icons.html

@@ -0,0 +1,24 @@
+<u-button variant="elevated">
+  Elevated
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>
+<u-button>
+  Filled
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>
+<u-button variant="tonal">
+  Tonal
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>
+<u-button variant="outlined">
+  Outlined
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>
+<u-button variant="text">
+  Text
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>
+<u-button variant="elevated" disabled>
+  Disabled
+  <span slot="icon" class="material-symbols-outlined material-symbols-fill">favorite</span>
+</u-button>

package/docs/src/app/components/common-buttons/examples/buttons-trailing-icons.html

@@ -0,0 +1,25 @@
+<u-button variant="elevated" trailing-icon>
+  Elevated
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+<u-button trailing-icon>
+  Filled
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+<u-button variant="tonal" trailing-icon>
+  Tonal
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+<u-button variant="outlined" trailing-icon>
+  Outlined
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+<u-button variant="text" trailing-icon>
+  Text
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+<u-button variant="elevated" trailing-icon disabled>
+  Disabled
+  <span slot="icon" class="material-symbols-outlined">open_in_new</span>
+</u-button>
+

package/docs/src/app/components/common-buttons/examples/buttons-variants.html

@@ -0,0 +1,6 @@
+<u-button variant="elevated" aria-label="Batata">Elevated</u-button>
+<u-button>Filled</u-button>
+<u-button variant="tonal">Tonal</u-button>
+<u-button variant="outlined">Outlined</u-button>
+<u-button variant="text">Text</u-button>
+<u-button variant="elevated" disabled>Disabled</u-button>

package/docs/src/app/components/common-buttons/examples/filled-colors.html

@@ -0,0 +1,4 @@
+<u-button>Filled</u-button>
+<u-button color="secondary">Secondary</u-button>
+<u-button color="tertiary">Tertiary</u-button>
+<u-button color="error">Error</u-button>

package/docs/src/app/components/context-test/context-test.component.pug

@@ -0,0 +1,11 @@
+.u-column
+  u-text-field(label="Batata", [(ngModel)]="value", ngDefaultControl)
+  u-field(label="Batata")
+    span(slot="error-text") Required
+    span(slot="supporting-text") Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim sodales sagittis. Nunc eget luctus nibh, in lacinia urna. Fusce nulla risus, vulputate eget feugiat et, congue eu odio. Aenean feugiat lectus eget diam euismod, vitae tempor eros lobortis. Etiam laoreet sagittis ante id varius. Sed fermentum, arcu at pretium maximus, libero felis laoreet nisi, ac hendrerit ex sem non nunc. Vivamus in lobortis mi, at venenatis nulla. In sagittis, magna vitae porta ultrices, leo neque tempor tortor, sit amet efficitur est est vel nunc.
+    span(slot="counter") 10/100
+  u-field(
+    label="Batata"
+    counter="10/100"
+    error-text="Required"
+    supporting-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim sodales sagittis. Nunc eget luctus nibh, in lacinia urna. Fusce nulla risus, vulputate eget feugiat et, congue eu odio. Aenean feugiat lectus eget diam euismod, vitae tempor eros lobortis. Etiam laoreet sagittis ante id varius. Sed fermentum, arcu at pretium maximus, libero felis laoreet nisi, ac hendrerit ex sem non nunc. Vivamus in lobortis mi, at venenatis nulla. In sagittis, magna vitae porta ultrices, leo neque tempor tortor, sit amet efficitur est est vel nunc.")

package/docs/src/app/components/context-test/context-test.component.ts

@@ -0,0 +1,23 @@
+import { Component, ElementRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { UmField } from '@universal-material/web';
+
+@Component({
+  selector: 'docs-context-test',
+  standalone: true,
+  imports: [
+    FormsModule,
+  ],
+  templateUrl: './context-test.component.pug',
+  styleUrl: './context-test.component.scss'
+})
+export class ContextTestComponent {
+  value = 'fritas';
+
+  constructor(elementRef: ElementRef<HTMLElement>) {
+    const variant = elementRef.nativeElement.getAttribute('variant');
+    if (!variant) {
+      return;
+    }
+  }
+}

package/docs/src/app/components/datepicker/datepicker.component.pug

@@ -0,0 +1 @@
+docs-title(title="Datepicker")

package/docs/src/app/components/datepicker/datepicker.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+@Component({
+  selector: 'docs-datepicker',
+  templateUrl: './datepicker.component.pug',
+  styleUrl: './datepicker.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class DatepickerComponent {
+
+}

package/docs/src/app/components/dialogs/dialogs.component.pug

@@ -0,0 +1,24 @@
+docs-title(title="Dialogs")
+
+docs-example(
+  sectionTitle="Usage",
+  [renderExample]="false",
+  [html]="simpleCardHtml")
+  u-button((click)="dialog.show()") Open dialog
+  u-dialog(#dialog)
+    span.material-symbols-outlined(slot="icon") mobile_friendly
+    span(slot="headline") Headline
+    form(method="dialog" id="form-id")
+      input(autofocus)
+      span Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu non odio dictum faucibus. Fusce turpis ante, egestas eget pretium non, vestibulum aliquet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet bibendum sem et mollis. Aliquam dignissim lectus consectetur risus ultrices, et aliquam nisi aliquam. Donec quis diam vitae nunc rutrum lobortis. In suscipit nulla non suscipit dapibus. Sed tellus est, gravida a velit et, cursus egestas felis. Suspendisse magna neque, viverra eu metus at, sollicitudin finibus velit. Etiam in mi fringilla, accumsan justo at, suscipit lorem. Fusce mi neque, pulvinar quis lorem sit amet, imperdiet tincidunt nunc. Morbi sit amet leo vitae ante sollicitudin pulvinar. Nunc vitae neque quam.
+      span Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a arcu non odio dictum faucibus. Fusce turpis ante, egestas eget pretium non, vestibulum aliquet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet bibendum sem et mollis. Aliquam dignissim lectus consectetur risus ultrices, et aliquam nisi aliquam. Donec quis diam vitae nunc rutrum lobortis. In suscipit nulla non suscipit dapibus. Sed tellus est, gravida a velit et, cursus egestas felis. Suspendisse magna neque, viverra eu metus at, sollicitudin finibus velit. Etiam in mi fringilla, accumsan justo at, suscipit lorem. Fusce mi neque, pulvinar quis lorem sit amet, imperdiet tincidunt nunc. Morbi sit amet leo vitae ante sollicitudin pulvinar. Nunc vitae neque quam.
+
+    u-button(variant="text", slot="actions", form="form-id", value="ok") Ok
+    u-button(variant="text", slot="actions", form="form-id", value="cancel") Cancel
+
+docs-example(
+  sectionTitle="Message dialog",
+  [renderExample]="false",
+  [html]="''")
+  u-text-field([(ngModel)]="message", ngDefaultControl)
+  u-button((click)="showMessage()") Show message

package/docs/src/app/components/dialogs/dialogs.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+// @ts-ignore
+import simpleCardHtml from '!raw-loader!./examples/example.html';
+import { UmDialog } from '@universal-material/web';
+
+@Component({
+  selector: 'docs-dialogs',
+  templateUrl: './dialogs.component.pug',
+  styleUrl: './dialogs.component.scss',
+  standalone: true,
+  imports: [
+    FormsModule,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class DialogsComponent {
+  simpleCardHtml = simpleCardHtml;
+  message = '';
+
+  async showMessage() {
+    if (await UmDialog.confirm(this.message).show()) {
+      alert('confirme');
+    }
+  }
+}

package/docs/src/app/components/dialogs/examples/example.html

@@ -0,0 +1,3 @@
+<u-button>Launch dialog</u-button>
+<u-dialog>Batata</u-dialog>
+

package/docs/src/app/components/expansion-panel/expansion-panel.component.pug

@@ -0,0 +1 @@
+docs-title(title="Expansion panel")

package/docs/src/app/components/expansion-panel/expansion-panel.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+@Component({
+  selector: 'docs-expansion-panel',
+  templateUrl: './expansion-panel.component.pug',
+  styleUrl: './expansion-panel.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class ExpansionPanelComponent {
+
+}