@universal-material/web 3.0.140 → 3.0.142

package/docs/src/app/app.config.ts

@@ -1,26 +0,0 @@
-import { provideHighlightOptions } from 'ngx-highlightjs';
-import { provideMarkdown } from 'ngx-markdown';
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withHashLocation } from '@angular/router';
-
-import { routes } from './app.routes';
-
-// config.navigationDrawer.useSwiperJs = true;
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes, withHashLocation()),
-    provideHighlightOptions({
-      coreLibraryLoader: () => import('highlight.js/lib/core'),
-      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
-      languages: {
-        shell: () => import('highlight.js/lib/languages/shell'),
-        javascript: () => import('highlight.js/lib/languages/javascript'),
-        typescript: () => import('highlight.js/lib/languages/typescript'),
-        css: () => import('highlight.js/lib/languages/css'),
-        xml: () => import('highlight.js/lib/languages/xml'),
-      },
-    }),
-    provideMarkdown(),
-  ],
-};

package/docs/src/app/app.routes.ts

@@ -1,140 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [
-  {
-    path: 'content/typography',
-    loadComponent: () => import('@docs/content/typography/typography.component').then(c => c.TypographyComponent)
-  },
-  {
-    path: 'components/button-set',
-    loadComponent: () => import('@docs/components/button-set/button-set.component').then(c => c.ButtonSetComponent)
-  },
-  {
-    path: 'components/cards',
-    loadComponent: () => import('@docs/components/cards/cards.component').then(c => c.CardsComponent)
-  },
-  {
-    path: 'components/checkbox',
-    loadComponent: () => import('@docs/components/checkbox/checkbox.component').then(c => c.CheckboxComponent)
-  },
-  {
-    path: 'components/chips',
-    loadComponent: () => import('@docs/components/chips/chips.component').then(c => c.ChipsComponent)
-  },
-  {
-    path: 'components/chip-field',
-    loadComponent: () => import('@docs/components/chip-field/chip-field.component').then(c => c.ChipFieldComponent)
-  },
-  {
-    path: 'components/common-buttons',
-    loadComponent: () => import('@docs/components/common-buttons/common-buttons.component').then(c => c.CommonButtonsComponent)
-  },
-  {
-    path: 'components/tables',
-    loadComponent: () => import('@docs/components/tables/tables.component').then(c => c.TablesComponent)
-  },
-  {
-    path: 'components/datepicker',
-    loadComponent: () => import('@docs/components/datepicker/datepicker.component').then(c => c.DatepickerComponent)
-  },
-  {
-    path: 'components/dialogs',
-    loadComponent: () => import('@docs/components/dialogs/dialogs.component').then(c => c.DialogsComponent)
-  },
-  {
-    path: 'utilities/dividers',
-    loadComponent: () => import('@docs/utilities/dividers/dividers.component').then(c => c.DividersComponent)
-  },
-  {
-    path: 'components/expansion-panel',
-    loadComponent: () => import('@docs/components/expansion-panel/expansion-panel.component').then(c => c.ExpansionPanelComponent)
-  },
-  {
-    path: 'components/fab',
-    loadComponent: () => import('@docs/components/fab/fab.component').then(c => c.FabComponent)
-  },
-  {
-    path: 'components/icon-buttons',
-    loadComponent: () => import('@docs/components/icon-buttons/icon-buttons.component').then(c => c.IconButtonsComponent)
-  },
-  {
-    path: 'components/lists',
-    loadComponent: () => import('@docs/components/lists/lists.component').then(c => c.ListsComponent)
-  },
-  {
-    path: 'components/menus',
-    loadComponent: () => import('@docs/components/menus/menus.component').then(c => c.MenusComponent)
-  },
-  {
-    path: 'components/progress',
-    loadComponent: () => import('@docs/components/progress/progress.component').then(c => c.ProgressComponent)
-  },
-  {
-    path: 'components/ripple',
-    loadComponent: () => import('@docs/components/ripple/ripple.component').then(c => c.RippleComponent)
-  },
-  {
-    path: 'components/selection-controls',
-    loadComponent: () => import('@docs/components/selection-controls/selection-controls.component').then(c => c.SelectionControlsComponent)
-  },
-  {
-    path: 'components/sliders',
-    loadComponent: () => import('@docs/components/sliders/sliders.component').then(c => c.SlidersComponent)
-  },
-  {
-    path: 'components/snackbars',
-    loadComponent: () => import('@docs/components/snackbars/snackbars.component').then(c => c.SnackbarsComponent)
-  },
-  {
-    path: 'components/steppers',
-    loadComponent: () => import('@docs/components/steppers/steppers.component').then(c => c.SteppersComponent)
-  },
-  {
-    path: 'components/tabs',
-    loadComponent: () => import('@docs/components/tabs/tabs.component').then(c => c.TabsComponent)
-  },
-  {
-    path: 'components/text-fields',
-    loadComponent: () => import('@docs/components/text-fields/text-fields.component').then(c => c.TextFieldsComponent)
-  },
-  {
-    path: 'components/select',
-    loadComponent: () => import('@docs/components/select/select.component').then(c => c.SelectComponent)
-  },
-  {
-    path: 'components/typeahead',
-    loadComponent: () => import('@docs/components/typeahead/typeahead.component').then(c => c.TypeaheadComponent)
-  },
-  {
-    path: 'components/toolbars',
-    loadComponent: () => import('@docs/components/toolbars/toolbars.component').then(c => c.ToolbarsComponent)
-  },
-  {
-    path: 'layout/container',
-    loadComponent: () => import('@docs/layout/container/container.component').then(c => c.ContainerComponent)
-  },
-  {
-    path: 'layout/grid',
-    loadComponent: () => import('@docs/layout/grid/grid.component').then(c => c.GridComponent)
-  },
-  {
-    path: 'utilities/background-colors',
-    loadComponent: () => import('@docs/utilities/background-colors/background-colors.component').then(c => c.BackgroundColorsComponent)
-  },
-  {
-    path: 'utilities/text-and-background-colors',
-    loadComponent: () => import('@docs/utilities/text-and-background-colors/text-and-background-colors.component').then(c => c.TextAndBackgroundColorsComponent)
-  },
-  {
-    path: 'utilities/text-colors',
-    loadComponent: () => import('@docs/utilities/text-colors/text-colors.component').then(c => c.TextColorsComponent)
-  },
-  {
-    path: 'utilities/text-emphasis',
-    loadComponent: () => import('@docs/utilities/text-emphasis/text-emphasis.component').then(c => c.TextEmphasisComponent)
-  },
-  {
-    path: '',
-    loadComponent: () => import('@docs/introduction/introduction.component').then(c => c.IntroductionComponent)
-  }
-];

package/docs/src/app/components/button-set/button-set.component.pug

@@ -1,13 +0,0 @@
-docs-title(title="Button set")
-
-docs-example(
-  sectionTitle="Usage",
-  [html]="usageHtml")
-
-docs-example(
-  sectionTitle="Stack",
-  [html]="stackHtml")
-
-docs-example(
-  sectionTitle="Alignment",
-  [html]="alignmentHtml")

package/docs/src/app/components/button-set/button-set.component.ts

@@ -1,29 +0,0 @@
-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 usageHtml from '!raw-loader!./examples/usage.html';
-// @ts-ignore
-import stackHtml from '!raw-loader!./examples/stack.html';
-// @ts-ignore
-import alignmentHtml from '!raw-loader!./examples/alignment.html';
-
-@Component({
-  selector: 'docs-button-set',
-  templateUrl: './button-set.component.pug',
-  styleUrl: './button-set.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class ButtonSetComponent {
-  usageHtml = usageHtml;
-  stackHtml = stackHtml;
-  alignmentHtml = alignmentHtml;
-}

package/docs/src/app/components/button-set/examples/alignment.html

@@ -1,29 +0,0 @@
-<u-button-set>
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>
-
-<u-button-set alignment="center">
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>
-
-<u-button-set alignment="start">
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>
-
-<u-button-set stack>
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>
-
-<u-button-set alignment="center" stack>
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>
-
-<u-button-set alignment="start" stack>
-  <u-button variant="outlined">Cancel</u-button>
-  <u-button>Ok</u-button>
-</u-button-set>

package/docs/src/app/components/button-set/examples/stack.html

@@ -1,5 +0,0 @@
-<u-button-set stack>
-  <u-button variant="text">Set</u-button>
-  <u-button variant="text">Cancel</u-button>
-  <u-button variant="text">Clear</u-button>
-</u-button-set>

package/docs/src/app/components/button-set/examples/usage.html

@@ -1,35 +0,0 @@
-<u-button-set>
-  <u-fab>
-    <span class="material-symbols-outlined">edit</span>
-  </u-fab>
-
-  <u-button>Filled</u-button>
-
-  <u-icon-button variant="outlined">
-    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-  </u-icon-button>
-</u-button-set>
-
-<u-button-set alignment="center">
-  <u-fab>
-    <span class="material-symbols-outlined">edit</span>
-  </u-fab>
-
-  <u-button>Filled</u-button>
-
-  <u-icon-button variant="outlined">
-    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-  </u-icon-button>
-</u-button-set>
-
-<u-button-set alignment="start">
-  <u-fab>
-    <span class="material-symbols-outlined">edit</span>
-  </u-fab>
-
-  <u-button>Filled</u-button>
-
-  <u-icon-button variant="outlined">
-    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-  </u-icon-button>
-</u-button-set>

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

@@ -1,15 +0,0 @@
-docs-title(title="Cards")
-
-docs-example(
-  sectionTitle="Variants",
-  [html]="variantsHtml")
-
-docs-example(
-  sectionTitle="Card with actions",
-  [html]="cardWithActionsHtml")
-
-docs-example(
-  sectionTitle="Card media",
-  [html]="cardMediaHtml")
-
-docs-apis-table(key="card")

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

@@ -1,29 +0,0 @@
-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/simple-card.html';
-// @ts-ignore
-import cardWithActionsHtml from '!raw-loader!./examples/card-with-actions.html';
-// @ts-ignore
-import cardMediaHtml from '!raw-loader!./examples/card-media.html';
-
-@Component({
-  selector: 'docs-cards',
-  templateUrl: './cards.component.pug',
-  styleUrl: './cards.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class CardsComponent {
-  variantsHtml = variantsHtml;
-  cardWithActionsHtml = cardWithActionsHtml;
-  cardMediaHtml = cardMediaHtml;
-}

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

@@ -1,39 +0,0 @@
-<div class="u-grid u-gutter-small" style="--u-grid-columns: 2">
-  <u-card variant="filled">
-    <u-card-media wide class="example-card-media" slot="before-content"></u-card-media>
-    <div class="u-headline-l">Headline</div>
-    <div class="u-headline-s mb-3">Subhead</div>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-  </u-card>
-
-  <u-card variant="filled">
-    <div class="u-headline-l">Headline</div>
-    <div class="u-headline-s">Subhead</div>
-    <u-card-media wide class="example-card-media u-my-small"></u-card-media>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-  </u-card>
-
-  <u-card variant="filled">
-    <u-card-media class="example-card-media u-dark-mode" slot="before-content">
-      <u-card-content class="u-dark">
-        <div class="u-headline-s">Headline</div>
-        <div class="u-title-m u-text-low-emphasis u-mb-small">Subhead</div>
-        <u-button-set>
-          <u-button variant="outlined">Action 1</u-button>
-          <u-button>Action 2</u-button>
-        </u-button-set>
-      </u-card-content>
-    </u-card-media>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-  </u-card>
-
-  <u-card variant="filled">
-    <u-card-media class="example-card-media u-dark-mode" wide slot="before-content">
-      <u-card-content class="u-dark">
-        <div class="u-headline-s">Headline</div>
-        <div class="u-title-m u-text-low-emphasis">Subhead</div>
-      </u-card-content>
-    </u-card-media>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-  </u-card>
-</div>

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

@@ -1,40 +0,0 @@
-<div class="u-grid u-gutter-small">
-  <u-card variant="filled">
-    <div class="u-headline-l">Headline</div>
-    <div class="u-headline-s mb-3">Subhead</div>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-    <u-button-set>
-      <u-button variant="text">Cancel</u-button>
-      <u-button variant="text">Ok</u-button>
-    </u-button-set>
-  </u-card>
-
-  <u-card variant="filled">
-    <div class="u-headline-l">Headline</div>
-    <div class="u-headline-s mb-3">Subhead</div>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-    <div class="u-divider"></div>
-    <u-button-set>
-      <u-icon-button>
-        <span class="material-symbols-outlined">share</span>
-      </u-icon-button>
-      <u-icon-button>
-        <span class="material-symbols-outlined">star</span>
-      </u-icon-button>
-    </u-button-set>
-  </u-card>
-
-  <u-card variant="filled">
-    <div class="u-headline-l">Headline</div>
-    <div class="u-headline-s mb-3">Subhead</div>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
-    <div slot="after-content">
-      <div class="u-divider-no-margin"></div>
-      <u-card-content>
-        <u-button-set>
-          <u-button variant="text">Expand</u-button>
-        </u-button-set>
-      </u-card-content>
-    </div>
-  </u-card>
-</div>

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

@@ -1,5 +0,0 @@
-<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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

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

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

@@ -1,69 +0,0 @@
-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")