@universal-material/web 3.0.140 → 3.0.142

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

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

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

@@ -1,35 +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/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

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

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

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

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

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

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

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

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

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

@@ -1,20 +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';
-
-@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

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

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

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

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

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

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

@@ -1,20 +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';
-
-@Component({
-  selector: 'docs-expansion-panel',
-  templateUrl: './expansion-panel.component.pug',
-  styleUrl: './expansion-panel.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class ExpansionPanelComponent {
-
-}

package/docs/src/app/components/fab/examples/button-colors.html

@@ -1,18 +0,0 @@
-<u-fab>
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="secondary">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="tertiary">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="surface">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="branded">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab disabled>
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>

package/docs/src/app/components/fab/examples/button-sizes.html

@@ -1,11 +0,0 @@
-<u-fab size="small">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-
-<u-fab>
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-
-<u-fab size="large">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>

package/docs/src/app/components/fab/examples/extended-buttons.html

@@ -1,18 +0,0 @@
-<u-fab label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="secondary" label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="tertiary" label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="surface" label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="branded" label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab disabled label="Compose">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>

package/docs/src/app/components/fab/examples/floating-action-area.html

@@ -1,5 +0,0 @@
-<div class="u-floating-action-area">
-  <u-fab>
-    <span class="material-symbols-outlined">add</span>
-  </u-fab>
-</div>

package/docs/src/app/components/fab/examples/floating-menu.html

@@ -1,10 +0,0 @@
-<div class="u-floating-action-area">
-  <div class="u-floating-menu">
-    <u-fab size="small" color="tertiary" lowered>
-      <span class="material-symbols-outlined">location_searching</span>
-    </u-fab>
-    <u-fab label="Navigate" lowered>
-      <span class="material-symbols-outlined">location_searching</span>
-    </u-fab>
-  </div>
-</div>

package/docs/src/app/components/fab/examples/lowered-buttons.html

@@ -1,6 +0,0 @@
-<u-fab color="branded">
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>
-<u-fab color="branded" lowered>
-  <span class="material-symbols-outlined">edit</span>
-</u-fab>

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

@@ -1,27 +0,0 @@
-docs-title(title="Floating action button") Floating action buttons (FABs) help people take primary actions
-
-docs-example(
-  sectionTitle="Sizes",
-  [html]="sizesHtml")
-
-docs-example(
-  sectionTitle="Colors",
-  [html]="colorsHtml")
-
-docs-example(
-  sectionTitle="Extended",
-  [html]="extendedHtml") Extended floating action buttons (extended FABs) help people take primary actions
-
-docs-example(
-  sectionTitle="Lowered",
-  [html]="loweredHtml")
-
-//docs-example(
-//  sectionTitle="Floating action area",
-//  [html]="floatingActionAreaHtml")
-//
-//docs-example(
-//  sectionTitle="Floating menu",
-//  [html]="floatingMenuHtml")
-
-docs-apis-table(key="fab")

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

@@ -1,38 +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 sizesHtml from '!raw-loader!./examples/button-sizes.html';
-// @ts-ignore
-import colorsHtml from '!raw-loader!./examples/button-colors.html';
-// @ts-ignore
-import extendedHtml from '!raw-loader!./examples/extended-buttons.html';
-// @ts-ignore
-import loweredHtml from '!raw-loader!./examples/lowered-buttons.html';
-// @ts-ignore
-import floatingActionAreaHtml from '!raw-loader!./examples/floating-action-area.html';
-// @ts-ignore
-import floatingMenuHtml from '!raw-loader!./examples/floating-menu.html';
-
-@Component({
-  selector: 'docs-fab',
-  templateUrl: './fab.component.pug',
-  styleUrl: './fab.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class FabComponent {
-  sizesHtml = sizesHtml;
-  colorsHtml = colorsHtml;
-  extendedHtml = extendedHtml;
-  loweredHtml = loweredHtml;
-  floatingActionAreaHtml = floatingActionAreaHtml;
-  floatingMenuHtml = floatingMenuHtml;
-}

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

@@ -1,15 +0,0 @@
-<u-icon-button href="https://github.com/universal-material/universal-material-web" target="_blank">
-  <span class="material-symbols-outlined">share</span>
-</u-icon-button>
-<u-icon-button variant="outlined" href="https://github.com/universal-material/universal-material-web" target="_blank">
-  <span class="material-symbols-outlined">share</span>
-</u-icon-button>
-<u-icon-button variant="filled">
-  <span class="material-symbols-outlined">share</span>
-</u-icon-button>
-<u-icon-button variant="tonal" href="https://github.com/universal-material/universal-material-web" target="_blank">
-  <span class="material-symbols-outlined">share</span>
-</u-icon-button>
-<u-icon-button disabled href="https://github.com/universal-material/universal-material-web" target="_blank">
-  <span class="material-symbols-outlined">share</span>
-</u-icon-button>

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

@@ -1,15 +0,0 @@
-<u-icon-button>
-  <span class="material-symbols-outlined">favorite</span>
-</u-icon-button>
-<u-icon-button variant="outlined">
-  <span class="material-symbols-outlined">favorite</span>
-</u-icon-button>
-<u-icon-button variant="filled">
-  <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-</u-icon-button>
-<u-icon-button variant="tonal">
-  <span class="material-symbols-outlined material-symbols-fill">favorite</span>
-</u-icon-button>
-<u-icon-button disabled>
-  <span class="material-symbols-outlined">favorite</span>
-</u-icon-button>

package/docs/src/app/components/icon-buttons/examples/toggle-buttons-manual.html

@@ -1,4 +0,0 @@
-<u-icon-button onclick="this.selected = !this.selected">
-  <span class="material-symbols-outlined">close</span>
-  <span slot="selected" class="material-symbols-outlined">done</span>
-</u-icon-button>