@universal-material/web 3.0.140 → 3.0.141

package/docs/src/app/dummy/dummy.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { DatePipe } from '@angular/common';
-
-@Component({
-  selector: 'docs-dummy',
-  imports: [
-    DatePipe
-  ],
-  templateUrl: './dummy.component.pug',
-  styleUrl: './dummy.component.scss'
-})
-export class DummyComponent {
-  date: Date | null = null;
-}

package/docs/src/app/introduction/introduction.component.pug

@@ -1,26 +0,0 @@
-docs-title(title="Quick start")
-
-u-calendar([dateRenderer]="createDummy")
-u-range-calendar
-ng-template(#dayTemplate, let-data)
-  span {{data.day}}
-
-docs-example(sectionTitle="Install") Include Universal Material source sass and TypeScript files via npm.
-
-u-card(variant="outlined")
-  pre(slot="before-content")
-    code(highlight="npm install @universal-material/web -S" language="shell")
-
-docs-example(sectionTitle="Import")
-  markdown {{importText}}
-
-  u-card(variant="outlined")
-    pre(slot="before-content")
-      code([highlight]="importCode" language="javascript")
-
-docs-example(sectionTitle="Usage")
-  markdown= 'Use the `<component-name>` tag in HTML markup.'
-
-  u-card(variant="outlined")
-    pre(slot="before-content")
-      code([highlight]="usageCode" language="javascript")

package/docs/src/app/introduction/introduction.component.scss

@@ -1,7 +0,0 @@
-pre {
-  margin: 0;
-}
-
-.hljs {
-  background: none;
-}

package/docs/src/app/introduction/introduction.component.ts

@@ -1,58 +0,0 @@
-import { Highlight } from 'ngx-highlightjs';
-import { MarkdownModule } from 'ngx-markdown';
-import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-
-import { ExampleComponent } from '@docs/docs/example/example.component';
-import { TitleComponent } from '@docs/docs/title/title.component';
-import { DummyComponent } from '@docs/dummy/dummy.component';
-
-@Component({
-  selector: 'docs-introduction',
-  standalone: true,
-  imports: [MarkdownModule, Highlight, ExampleComponent, TitleComponent],
-  templateUrl: './introduction.component.pug',
-  styleUrl: './introduction.component.scss',
-})
-export class IntroductionComponent {
-  importText =
-    'Import element definitions from `@universal-material/web/<component>/<component>.js`.';
-
-  importCode = `
-// index.js
-import '@universal-material/web/button/button.js';
-import '@universal-material/web/button/icon-button.js';
-import '@universal-material/web/checkbox/checkbox.js';
-`.trim();
-
-  usageCode = `
-<script type="module" src="./index.js"></script>
-
-<label>
-  <u-checkbox checked></u-checkbox>
-  I agree
-</label>
-
-<u-button-set>
-  <u-button variant="outlined">Back</u-button>
-  <u-button>Next</u-button>
-</u-button-set>
-`.trim();
-
-  @ViewChild('dayTemplate') templateRef!: TemplateRef<any>;
-
-  createDummy = (date: Date, day: string) : HTMLElement => {
-    const view =  this.templateRef.createEmbeddedView({
-      $implicit: {
-        date,
-        day
-      }
-    });
-
-    view.detectChanges();
-
-    const span = document.createElement('span');
-
-    span.append(...(view.rootNodes as Node[]));
-    return span;
-  }
-}

package/docs/src/app/layout/container/container.component.pug

@@ -1,77 +0,0 @@
-docs-title(title="Container")
-  | Containers are a fundamental building block of Universal Material that contain, pad, and align your content.
-  p
-    span Batata
-    caption Batata
-    mark Batata
-  p
-    | Please press
-    kbd Ctrl
-    |  +
-    kbd Shift
-    |  +
-    kbd R
-    |  to re-render an MDN page.
-
-
-
-docs-example(sectionTitle="Overview")
-  markdown {{overviewMd}}
-
-docs-example(
-  sectionTitle="Default container",
-  [html]="defaultContainerHtml")
-  markdown The default `.container` class limit the width of the container and align it at the center of its parent.
-
-docs-example(
-  sectionTitle="Fluid container",
-  [html]="fluidContainerHtml")
-  markdown Use `.container-fluid` for a full width container, spanning the entire width of the its parent.
-
-docs-example(
-  sectionTitle="CSS")
-  h4.u-title-m Containers variables
-  u-card.api-card(variant="outlined")
-    table.u-table(slot="before-content")
-      thead
-        tr
-          th Variable
-          th Default
-      tbody
-        tr
-          td
-            code --u-layout-margin-default
-          td
-            code --u-spacing-medium
-            span  (compact), 
-            code --u-spacing-large
-            span  (expanded).
-        tr
-          td
-            code --u-layout-margin
-          td
-            code --u-layout-margin-default
-        tr
-          td
-            code --u-layout-margin-inline
-          td
-            code --u-layout-margin
-        tr
-          td
-            code --u-layout-margin-block
-          td
-            code --u-layout-margin
-
-  h4.u-title-m Default container variables
-  u-card.api-card(variant="outlined")
-    table.u-table(slot="before-content")
-      thead
-        tr
-          th Variable
-          th Default
-      tbody
-        tr
-          td
-            code --u-container-width
-          td
-            code 992px

package/docs/src/app/layout/container/container.component.ts

@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import { MarkdownComponent } from 'ngx-markdown';
-
-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 overviewMd from '!raw-loader!./overview.md';
-
-// @ts-ignore
-import fluidContainerHtml from '!raw-loader!./examples/fluid-container.html';
-// @ts-ignore
-import defaultContainerHtml from '!raw-loader!./examples/default-container.html';
-
-@Component({
-  selector: 'docs-container',
-  templateUrl: './container.component.pug',
-  styleUrl: './container.component.scss',
-  standalone: true,
-  imports: [
-    MarkdownComponent,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class ContainerComponent {
-  overviewMd = overviewMd;
-  fluidContainerHtml = fluidContainerHtml;
-  defaultContainerHtml = defaultContainerHtml;
-}

package/docs/src/app/layout/container/examples/default-container.html

@@ -1,3 +0,0 @@
-<div class="u-container u-bg-surface-container-high">
-  <div class="u-container u-bg-surface" style="--u-container-width: 300px">Content</div>
-</div>

package/docs/src/app/layout/container/examples/fluid-container.html

@@ -1,3 +0,0 @@
-<div class="u-container u-bg-surface-container-high">
-  <div class="u-container-fluid u-bg-surface">Content</div>
-</div>

package/docs/src/app/layout/container/overview.md

@@ -1,5 +0,0 @@
-Containers are used to add [margin](https://m3.material.io/foundations/layout/understanding-layout/spacing#0678ba2e-1bce-49b8-8591-e471d6417011) to content.
-
-Universal material comes with two different containers:
-- `.container`, which sets a `max-width` to the container 
-- `.container-fluid`, which is `width: 100%` 

package/docs/src/app/layout/grid/examples/overview.html

@@ -1,12 +0,0 @@
-<div class="u-grid">
-  <div class="u-container-fluid u-grid u-bg-surface-container-high">
-    <div class="u-bg-surface u-p-small">Content</div>
-    <div class="u-bg-surface u-p-small">Content</div>
-  </div>
-  <div
-    class="u-container-fluid u-grid u-bg-surface-container-high"
-    style="--u-grid-columns: 2; --u-layout-gutter: var(--u-spacing-extra-large)">
-    <div class="u-bg-surface u-p-small">Content</div>
-    <div class="u-bg-surface u-p-small">Content</div>
-  </div>
-</div>

package/docs/src/app/layout/grid/grid.component.pug

@@ -1,47 +0,0 @@
-docs-title(title="Grid") Grids are used to add gutter to your content
-
-docs-example(
-  sectionTitle="Overview",
-  [html]="overviewHtml")
-  markdown Universal Material uses the new [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) to add spacing between columns inside a grid.
-    |  Currently it has one column by default and it can be customized with `--u-grid-columns`.
-    |  Also, you can directly change the CSS property `grid-template-columns` to build a more complex grid.
-
-docs-example(
-  sectionTitle="CSS")
-  h4.u-title-m Variables
-  u-card.api-card(variant="outlined")
-    table.u-table(slot="before-content")
-      thead
-        tr
-          th Variable
-          th Default
-      tbody
-        tr
-          td
-            code --u-grid-columns
-          td
-            code 1
-        tr
-          td
-            code --u-layout-gutter-default
-          td
-            code --u-spacing-medium
-            span  (compact), 
-            code --u-spacing-large
-            span  (expanded).
-        tr
-          td
-            code --u-layout-gutter
-          td
-            code --u-layout-gutter-default
-        tr
-          td
-            code --u-layout-gutter-inline
-          td
-            code --u-layout-gutter
-        tr
-          td
-            code --u-layout-gutter-block
-          td
-            code --u-layout-gutter

package/docs/src/app/layout/grid/grid.component.ts

@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-
-import { MarkdownComponent } from 'ngx-markdown';
-
-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 overviewHtml from '!raw-loader!./examples/overview.html';
-
-@Component({
-  selector: 'docs-grid',
-  templateUrl: './grid.component.pug',
-  styleUrl: './grid.component.scss',
-  standalone: true,
-  imports: [
-    MarkdownComponent,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class GridComponent {
-  overviewHtml = overviewHtml;
-}

package/docs/src/app/shared/states.model.ts

@@ -1,61 +0,0 @@
-export const states = [
-  'Alabama',
-  'Alaska',
-  'American Samoa',
-  'Arizona',
-  'Arkansas',
-  'California',
-  'Colorado',
-  'Connecticut',
-  'Delaware',
-  'District Of Columbia',
-  'Federated States Of Micronesia',
-  'Florida',
-  'Georgia',
-  'Guam',
-  'Hawaii',
-  'Idaho',
-  'Illinois',
-  'Indiana',
-  'Iowa',
-  'Kansas',
-  'Kentucky',
-  'Louisiana',
-  'Maine',
-  'Marshall Islands',
-  'Maryland',
-  'Massachusetts',
-  'Michigan',
-  'Minnesota',
-  'Mississippi',
-  'Missouri',
-  'Montana',
-  'Nebraska',
-  'Nevada',
-  'New Hampshire',
-  'New Jersey',
-  'New Mexico',
-  'New York',
-  'North Carolina',
-  'North Dakota',
-  'Northern Mariana Islands',
-  'Ohio',
-  'Oklahoma',
-  'Oregon',
-  'Palau',
-  'Pennsylvania',
-  'Puerto Rico',
-  'Rhode Island',
-  'South Carolina',
-  'South Dakota',
-  'Tennessee',
-  'Texas',
-  'Utah',
-  'Vermont',
-  'Virgin Islands',
-  'Virginia',
-  'Washington',
-  'West Virginia',
-  'Wisconsin',
-  'Wyoming',
-];

package/docs/src/app/utilities/background-colors/background-colors.component.pug

@@ -1,9 +0,0 @@
-docs-title(title="Background")
-
-docs-example(
-  sectionTitle="Colors",
-  [html]="colorsHtml")
-
-docs-example(
-  sectionTitle="Inverse colors",
-  [html]="inverseColorsHtml")

package/docs/src/app/utilities/background-colors/background-colors.component.ts

@@ -1,27 +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 colorsHtml from '!raw-loader!./examples/colors.html';
-
-@Component({
-  selector: 'docs-background-colors',
-  templateUrl: './background-colors.component.pug',
-  styleUrl: './background-colors.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class BackgroundColorsComponent {
-  colorsHtml = colorsHtml;
-  inverseColorsHtml = colorsHtml
-    .replace(/<div class="u-p-large u-bg-(primary-fixed|secondary-fixed|tertiary-fixed|info|warning|success|light|dark).+\n/g, '')
-    .replace(/-bg-/g, '-bg-inverse-')
-    .replace(/-text-on-/g, '-text-on-inverse-');
-}

package/docs/src/app/utilities/background-colors/examples/colors.html

@@ -1,31 +0,0 @@
-<div class="u-p-large u-bg-primary u-text-on-primary">.u-bg-primary</div>
-<div class="u-p-large u-bg-primary-container u-text-on-primary-container">.u-bg-primary-container</div>
-<div class="u-p-large u-bg-primary-fixed u-text-on-primary-fixed">.u-bg-primary-fixed</div>
-<div class="u-p-large u-bg-primary-fixed-dim u-text-on-primary-fixed">.u-bg-primary-fixed-dim</div>
-<div class="u-p-large u-bg-secondary u-text-on-secondary">.u-bg-secondary</div>
-<div class="u-p-large u-bg-secondary-container u-text-on-secondary-container">.u-bg-secondary-container</div>
-<div class="u-p-large u-bg-secondary-fixed u-text-on-secondary-fixed">.u-bg-secondary-fixed</div>
-<div class="u-p-large u-bg-secondary-fixed-dim u-text-on-secondary-fixed">.u-bg-secondary-fixed-dim</div>
-<div class="u-p-large u-bg-tertiary u-text-on-tertiary">.u-bg-tertiary</div>
-<div class="u-p-large u-bg-tertiary-container u-text-on-tertiary-container">.u-bg-tertiary-container</div>
-<div class="u-p-large u-bg-tertiary-fixed u-text-on-tertiary-fixed">.u-bg-tertiary-fixed</div>
-<div class="u-p-large u-bg-tertiary-fixed-dim u-text-on-tertiary-fixed">.u-bg-tertiary-fixed-dim</div>
-<div class="u-p-large u-bg-info u-text-on-info">.u-bg-info</div>
-<div class="u-p-large u-bg-info-container u-text-on-info-container">.u-bg-info-container</div>
-<div class="u-p-large u-bg-success u-text-on-success">.u-bg-success</div>
-<div class="u-p-large u-bg-success-container u-text-on-success-container">.u-bg-success-container</div>
-<div class="u-p-large u-bg-warning u-text-on-warning">.u-bg-warning</div>
-<div class="u-p-large u-bg-warning-container u-text-on-warning-container">.u-bg-warning-container</div>
-<div class="u-p-large u-bg-error u-text-on-error">.u-bg-error</div>
-<div class="u-p-large u-bg-error-container u-text-on-error-container">.u-bg-error-container</div>
-<div class="u-p-large u-bg-surface u-text-on-surface">.u-bg-surface</div>
-<div class="u-p-large u-bg-surface-variant u-text-on-surface-variant">.u-bg-surface-variant</div>
-<div class="u-p-large u-bg-surface-container u-text-on-surface">.u-bg-surface-container</div>
-<div class="u-p-large u-bg-surface-container-highest u-text-on-surface">.u-bg-surface-container-highest</div>
-<div class="u-p-large u-bg-surface-container-high u-text-on-surface">.u-bg-surface-container-high</div>
-<div class="u-p-large u-bg-surface-container-low u-text-on-surface">.u-bg-surface-container-low</div>
-<div class="u-p-large u-bg-surface-container-lowest u-text-on-surface">.u-bg-surface-container-lowest</div>
-<div class="u-p-large u-bg-body u-text-on-body">.u-bg-body</div>
-<div class="u-p-large u-bg-light u-text-on-light">.u-text-bg-light</div>
-<div class="u-p-large u-bg-dark u-text-on-dark">.u-text-bg-dark</div>
-

package/docs/src/app/utilities/dividers/dividers.component.pug

@@ -1,37 +0,0 @@
-docs-title(title="Dividers") Dividers are thin lines that group content in lists or other containers
-
-docs-example(
-  sectionTitle="Usage",
-  [html]="usageHtml")
-  markdown Create an element with `.u-divider` to group content. The default divider class has a small margin.
-
-docs-example(
-  sectionTitle="No margin",
-  [html]="noMarginHtml")
-  markdown Use `.u-divider-no-margin` if you don't need the margin.
-
-docs-example(
-  sectionTitle="CSS")
-  h4.u-title-m Variables
-  u-card.api-card(variant="outlined")
-    table.u-table(slot="before-content")
-      thead
-        tr
-          th Variable
-          th Default
-      tbody
-        tr
-          td
-            code --u-divider-thickness
-          td
-            code 1px
-        tr
-          td
-            code --u-divider-opacity
-          td
-            code .4
-        tr
-          td
-            code --u-divider-color
-          td
-            code --u-current-text-color

package/docs/src/app/utilities/dividers/dividers.component.ts

@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-
-import { MarkdownComponent } from 'ngx-markdown';
-
-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 noMarginHtml from '!raw-loader!./examples/no-margin.html';
-
-@Component({
-  selector: 'docs-dividers',
-  templateUrl: './dividers.component.pug',
-  styleUrl: './dividers.component.scss',
-  standalone: true,
-  imports: [
-    MarkdownComponent,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class DividersComponent {
-  usageHtml = usageHtml;
-  noMarginHtml = noMarginHtml;
-}

package/docs/src/app/utilities/dividers/examples/no-margin.html

@@ -1,9 +0,0 @@
-<u-card variant="outlined">
-  <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-no-margin"></div>
-  <u-button-set>
-    <u-icon-button variant="outlined">
-      <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-    </u-icon-button>
-  </u-button-set>
-</u-card>

package/docs/src/app/utilities/dividers/examples/usage.html

@@ -1,21 +0,0 @@
-<div class="u-grid">
-  <u-card variant="outlined">
-    <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 variant="outlined">
-        <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-      </u-icon-button>
-    </u-button-set>
-  </u-card>
-
-  <u-card variant="outlined" class="u-text-bg-primary-container">
-    <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 variant="outlined">
-        <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-      </u-icon-button>
-    </u-button-set>
-  </u-card>
-</div>

package/docs/src/app/utilities/text-and-background-colors/examples/colors.html

@@ -1,30 +0,0 @@
-<div class="u-p-large u-text-bg-primary">.u-text-bg-primary</div>
-<div class="u-p-large u-text-bg-primary-container">.u-text-bg-primary-container</div>
-<div class="u-p-large u-text-bg-primary-fixed">.u-text-bg-primary-fixed</div>
-<div class="u-p-large u-text-bg-primary-fixed-dim">.u-text-bg-primary-fixed-dim</div>
-<div class="u-p-large u-text-bg-secondary">.u-text-bg-secondary</div>
-<div class="u-p-large u-text-bg-secondary-container">.u-text-bg-secondary-container</div>
-<div class="u-p-large u-text-bg-secondary-fixed">.u-text-bg-secondary-fixed</div>
-<div class="u-p-large u-text-bg-secondary-fixed-dim">.u-text-bg-secondary-fixed-dim</div>
-<div class="u-p-large u-text-bg-tertiary">.u-text-bg-tertiary</div>
-<div class="u-p-large u-text-bg-tertiary-container">.u-text-bg-tertiary-container</div>
-<div class="u-p-large u-text-bg-tertiary-fixed">.u-text-bg-tertiary-fixed</div>
-<div class="u-p-large u-text-bg-tertiary-fixed-dim">.u-text-bg-tertiary-fixed-dim</div>
-<div class="u-p-large u-text-bg-info">.u-text-bg-info</div>
-<div class="u-p-large u-text-bg-info-container">.u-text-bg-info-container</div>
-<div class="u-p-large u-text-bg-success">.u-text-bg-success</div>
-<div class="u-p-large u-text-bg-success-container">.u-text-bg-success-container</div>
-<div class="u-p-large u-text-bg-warning">.u-text-bg-warning</div>
-<div class="u-p-large u-text-bg-warning-container">.u-text-bg-warning-container</div>
-<div class="u-p-large u-text-bg-error">.u-text-bg-error</div>
-<div class="u-p-large u-text-bg-error-container">.u-text-bg-error-container</div>
-<div class="u-p-large u-text-bg-surface">.u-text-bg-surface</div>
-<div class="u-p-large u-text-bg-surface-variant">.u-text-bg-surface-variant</div>
-<div class="u-p-large u-text-bg-surface-container">.u-text-bg-surface-container</div>
-<div class="u-p-large u-text-bg-surface-container-highest">.u-text-bg-surface-container-highest</div>
-<div class="u-p-large u-text-bg-surface-container-high">.u-text-bg-surface-container-high</div>
-<div class="u-p-large u-text-bg-surface-container-low">.u-text-bg-surface-container-low</div>
-<div class="u-p-large u-text-bg-surface-container-lowest">.u-text-bg-surface-container-lowest</div>
-<div class="u-p-large u-text-bg-body">.u-text-bg-body</div>
-<div class="u-p-large u-text-bg-light">.u-text-bg-light</div>
-<div class="u-p-large u-text-bg-dark">.u-text-bg-dark</div>

package/docs/src/app/utilities/text-and-background-colors/text-and-background-colors.component.pug

@@ -1,9 +0,0 @@
-docs-title(title="Color and background")
-
-docs-example(
-  sectionTitle="Colors",
-  [html]="colorsHtml")
-
-docs-example(
-  sectionTitle="Inverse colors",
-  [html]="inverseColorsHtml")

package/docs/src/app/utilities/text-and-background-colors/text-and-background-colors.component.ts

@@ -1,26 +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 colorsHtml from '!raw-loader!./examples/colors.html';
-
-@Component({
-  selector: 'docs-text-and-background-colors',
-  templateUrl: './text-and-background-colors.component.pug',
-  styleUrl: './text-and-background-colors.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class TextAndBackgroundColorsComponent {
-  colorsHtml = colorsHtml;
-  inverseColorsHtml = colorsHtml
-    .replace(/<div class="u-p-large u-text-bg-(primary-fixed|secondary-fixed|tertiary-fixed|info|warning|success|light|dark).+\n/g, '')
-    .replace(/-bg-/g, '-bg-inverse-');
-}