@universal-material/web 3.0.140 → 3.0.142

package/docs/src/app/components/text-fields/text-fields.component.ts

@@ -1,130 +0,0 @@
-import { debounceTime, Subject } from 'rxjs';
-import { CommonModule } from '@angular/common';
-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';
-
-@Component({
-  selector: 'docs-text-fields',
-  templateUrl: './text-fields.component.pug',
-  styleUrl: './text-fields.component.scss',
-  standalone: true,
-  imports: [CommonModule, FormsModule, ApisTableComponent, ExampleComponent, TitleComponent],
-})
-export class TextFieldsComponent {
-  variant = 'outlined';
-  invalid = false;
-  disabled = false;
-  leadingIcon = true;
-  trailingIcon = true;
-  showCounter = true;
-  supportingText = '*required';
-  errorText = 'Enter a description';
-  template = '';
-  value = '';
-
-  updated$ = new Subject<void>();
-
-  someValue = { count: 1 };
-
-  constructor() {
-    this.updated$.pipe(debounceTime(50)).subscribe(() => this.updateTemplate());
-    this.updateTemplate();
-  }
-
-  updateTemplate(): void {
-    this.template = `
-<u-field${this.getProperties()}>${this.getIcons()}
-  <label slot="label" for="description">Description</label>
-  <input id="description"${
-    this.disabled ? ' disabled' : ''
-  } placeholder="A placeholder" aria-describedby="supporting-text" />${this.getSupportingText()}
-</u-field>`.trimStart();
-  }
-
-  private getProperties(): string {
-    const properties: { [key: string]: any } = {};
-
-    if (this.variant === 'outlined') {
-      properties['variant'] = this.variant;
-    }
-
-    if (this.invalid) {
-      properties['invalid'] = true;
-    }
-
-    if (this.disabled) {
-      properties['disabled'] = true;
-    }
-
-    let propertiesValue = ``;
-
-    for (const property in properties) {
-      const value = properties[property];
-
-      propertiesValue += value === true ? ` ${property}` : ` ${property}="${value}"`;
-    }
-
-    return propertiesValue;
-  }
-
-  private getIcons(): string {
-    if (!this.leadingIcon && !this.trailingIcon) {
-      return '';
-    }
-
-    let icons = `
-`;
-
-    if (this.leadingIcon) {
-      icons += `  <span class="material-symbols-outlined" slot="leading-icon">search</span>
-`;
-    }
-
-    if (this.trailingIcon) {
-      icons += `  <u-icon-button slot="trailing-icon"${this.disabled ? ' disabled' : ''}>
-    <span class="material-symbols-outlined">cancel</span>
-  </u-icon-button>
-`;
-    }
-
-    return icons;
-  }
-
-  private getSupportingText(): string {
-    if (!this.supportingText && !this.errorText && !this.showCounter) {
-      return '';
-    }
-
-    let nodes = '';
-
-    if (this.supportingText) {
-      nodes += `
-  <span slot="supporting-text" id="supporting-text">${this.supportingText}</span>`;
-    }
-
-    if (this.errorText) {
-      nodes += `
-  <span slot="error-text">${this.errorText}</span>`;
-    }
-
-    if (this.showCounter) {
-      nodes += `
-  <span slot="counter">10/100</span>`;
-    }
-
-    return nodes;
-  }
-
-  setVariant(variant: string) {
-    this.variant = variant;
-    this.updated$.next();
-  }
-
-  alert(batata: string) {
-    alert(batata);
-  }
-}

package/docs/src/app/components/toolbars/examples/simple-toolbar.html

@@ -1,33 +0,0 @@
-<div class="u-toolbar">
-  <div class="u-toolbar-row">
-    <div class="u-toolbar-start">
-      <div class="u-toolbar-actions">
-        <button class="u-icon-btn u-btn-default" type="button">
-          <i class="u-btn-icon mdi mdi-menu"></i>
-        </button>
-      </div>
-    </div>
-    <div class="u-toolbar-center">
-      <div class="u-toolbar-title">Title here</div>
-    </div>
-    <div class="u-toolbar-end">
-      <div class="u-toolbar-actions">
-        <button class="u-toolbar-action u-icon-btn u-btn-default" type="button">
-          <i class="u-btn-icon mdi mdi-phone"></i>
-        </button>
-        <div class="u-toolbar-action u-dropdown">
-          <button class="u-icon-btn u-btn-default u-dropdown-toggle" type="button">
-            <i class="u-btn-icon mdi mdi-dots-vertical"></i>
-          </button>
-          <div class="u-dropdown-menu down-left">
-            <div class="u-dropdown-content">
-              <a class="u-dropdown-item text-nowrap" href="#">Item A</a>
-              <a class="u-dropdown-item text-nowrap" href="#">Item B</a>
-              <a class="u-dropdown-item text-nowrap" href="#">Item C</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,5 +0,0 @@
-docs-title(title="Toolbars")
-
-docs-example(
-  sectionTitle="Simple toolbar",
-  [html]="simpleToolbarHtml")

package/docs/src/app/components/toolbars/toolbars.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 simpleToolbarHtml from '!raw-loader!./examples/simple-toolbar.html';
-
-@Component({
-  selector: 'docs-toolbars',
-  templateUrl: './toolbars.component.pug',
-  styleUrl: './toolbars.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class ToolbarsComponent {
-  simpleToolbarHtml = simpleToolbarHtml;
-}

package/docs/src/app/components/typeahead/examples/handling-selection.html

@@ -1,27 +0,0 @@
-<u-chip-field
-  id="chip-field"
-  label="States"
-  supporting-text="Select a state"
-  manual>
-</u-chip-field>
-<u-typeahead target-id="text-field"></u-typeahead>
-
-<script>
-  const formatter = state => state.name;
-
-  const chipField = document.querySelector('u-chip-field');
-  chipField.formatter = formatter;
-
-  const typeahead = document.querySelector('u-typeahead');
-
-  typeahead.source = [];
-  typeahead.formatter = formatter;
-  typeahead.selected = e => {
-    e.preventDefault();
-
-    const typeahead = e.target;
-    typeahead.clear();
-    this.chipField.add(e.detail, true);
-    typeahead.focus();
-  };
-</script>

package/docs/src/app/components/typeahead/examples/object-results.html

@@ -1,9 +0,0 @@
-<u-text-field id="text-field" label="States" supporting-text="Select a state"></u-text-field>
-<u-typeahead target-id="text-field"></u-typeahead>
-
-<script>
-  const typeahead = document.querySelector('u-typeahead');
-
-  typeahead.source = [];
-  typeahead.formatter = state => state.name;
-</script>

package/docs/src/app/components/typeahead/examples/simple.html

@@ -1,8 +0,0 @@
-<u-text-field id="text-field" label="States" supporting-text="Select a state"></u-text-field>
-<u-typeahead target-id="text-field"></u-typeahead>
-
-<script>
-  const typeahead = document.querySelector('u-typeahead');
-
-  typeahead.source = [];
-</script>

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

@@ -1,43 +0,0 @@
-docs-title(title="Typeahead")
-
-docs-example(
-  sectionTitle="Simple",
-  [renderExample]="false",
-  [html]="simpleHtml")
-
-  u-text-field#text-field(
-    label="States"
-    supporting-text="Select a state")
-  u-typeahead(target-id="text-field", [source]="states")
-
-docs-example(
-  sectionTitle="Object results",
-  [renderExample]="false",
-  [html]="objectResultsHtml")
-
-  u-text-field#object-field(
-    label="States"
-    supporting-text="Select a state")
-  u-typeahead(
-    target-id="object-field",
-    [formatter]="formatter",
-    [source]="stateObjects")
-
-docs-example(
-  sectionTitle="Handling selection",
-  [renderExample]="false",
-  [html]="handlingSelectionHtml")
-
-  u-chip-field#chip-field(
-    #chipField,
-    label="States",
-    supporting-text="Select a state"
-    manual,
-    [formatter]="formatter")
-  u-typeahead(
-    target-id="chip-field",
-    (selected)="selected($event)",
-    [source]="stateObjects",
-    [formatter]="formatter")
-
-docs-apis-table(key="typeahead")

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

@@ -1,52 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, ViewChild, ViewEncapsulation } 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 { UmChipField, UmTypeahead } from '@universal-material/web';
-import { states } from '@docs/shared/states.model';
-
-// @ts-ignore
-import simpleHtml from '!raw-loader!./examples/simple.html';
-// @ts-ignore
-import objectResultsHtml from '!raw-loader!./examples/object-results.html';
-// @ts-ignore
-import handlingSelectionHtml from '!raw-loader!./examples/handling-selection.html';
-
-@Component({
-  selector: 'docs-typeahead',
-  templateUrl: './typeahead.component.pug',
-  styleUrl: './typeahead.component.scss',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class TypeaheadComponent {
-
-  simpleHtml = simpleHtml;
-  objectResultsHtml = objectResultsHtml;
-  handlingSelectionHtml = handlingSelectionHtml;
-
-  @ViewChild('chipField') chipField!: ElementRef<UmChipField>;
-
-  states = states;
-  stateObjects = states.map(s => ({name: s}));
-
-  formatter = (state: {name: string}) => state.name;
-
-  selected($event: Event) {
-    $event.preventDefault();
-
-    const customEvent = $event as CustomEvent<{name: string}>;
-    const typeahead = <UmTypeahead>customEvent.target;
-    typeahead.clear();
-    this.chipField.nativeElement.add(customEvent.detail);
-    typeahead.focus();
-  }
-}

package/docs/src/app/content/typography/examples/typos.html

@@ -1,17 +0,0 @@
-<u-card variant="outlined">
-  <h1 class="u-display-l">Display</h1>
-  <h2 class="u-display-m">Display</h2>
-  <h3 class="u-display-s">Display</h3>
-  <h4 class="u-headline-l">Headline</h4>
-  <h5 class="u-headline-m">Headline</h5>
-  <h6 class="u-headline-s">Headline</h6>
-  <h6 class="u-title-l">Title</h6>
-  <h6 class="u-title-m">Title</h6>
-  <h6 class="u-title-s">Title</h6>
-  <div class="u-label-l">Label</div>
-  <div class="u-label-m">Label</div>
-  <div class="u-label-s">Label</div>
-  <div class="u-body-l">Body</div>
-  <div class="u-body-m">Body</div>
-  <div class="u-body-s">Body</div>
-</u-card>

package/docs/src/app/content/typography/typography.component.pug

@@ -1,4 +0,0 @@
-docs-title(title="Typography") Example for Universal Material typography
-
-docs-example(
-  [html]="typosHtml")

package/docs/src/app/content/typography/typography.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-
-import { TitleComponent } from '../../docs/title/title.component';
-import { ExampleComponent } from '../../docs/example/example.component';
-
-// @ts-ignore
-import typosHtml from '!raw-loader!./examples/typos.html';
-
-@Component({
-  selector: 'docs-typography',
-  standalone: true,
-  imports: [
-    TitleComponent,
-    ExampleComponent
-  ],
-  templateUrl: './typography.component.pug',
-  styleUrl: './typography.component.scss'
-})
-export class TypographyComponent {
-  typosHtml = typosHtml;
-}

package/docs/src/app/docs/apis-table/apis-table.component.pug

@@ -1,26 +0,0 @@
-h5.u-headline-m.article-title
-  a(href="#api") API
-
-u-card.api-card(variant="outlined")
-  table.u-table(slot="before-content")
-    thead
-      tr
-        th Property
-        th Attribute
-        th Type
-        th Default
-        th Description
-    tbody
-      ng-container(*ngFor="let property of properties")
-        tr
-          td
-            code(*ngIf="!!property.name?.trim()") {{property.name}}
-          td
-            code(*ngIf="!!property.attribute?.trim()") {{property.attribute}}
-          td
-            code {{property.type}}
-          td
-            code(*ngIf="!!property.default?.trim()") {{property.default}}
-          td
-            markdown {{property.description}}
-

package/docs/src/app/docs/apis-table/apis-table.component.scss

@@ -1,9 +0,0 @@
-u-card {
-  overflow-y: auto;
-}
-
-td {
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.25rem;
-}

package/docs/src/app/docs/apis-table/apis-table.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MarkdownModule } from 'ngx-markdown';
-
-import { Apis } from '@docs/apis';
-
-@Component({
-  selector: 'docs-apis-table',
-  templateUrl: './apis-table.component.pug',
-  styleUrl: './apis-table.component.scss',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MarkdownModule
-  ]
-})
-export class ApisTableComponent implements OnChanges {
-
-  @Input() key!: string;
-  properties!: typeof Apis.button;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // @ts-ignore
-    this.properties = Apis[this.key];
-  }
-}

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

@@ -1,17 +0,0 @@
-h5.u-headline-m.article-title
-  a([href]="anchorHash") {{sectionTitle}}
-
-.description
-  ng-content
-
-.u-column(*ngIf="_html")
-  .example(
-    *ngIf="renderExample",
-    #example,
-    slot="before-content",
-    [innerHTML]="htmlSafe")
-  ng-content(select="[example]")
-
-  u-card(variant="outlined")
-    pre(slot="after-content")
-      code([highlight]="_html!" language="html")

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

@@ -1,21 +0,0 @@
-pre {
-  margin: 0;
-
-  &[slot="after-content"] {
-    border-radius: inherit;
-    overflow: hidden;
-  }
-
-  code {
-    background-color: var(--u-color-surface-container);
-    padding: 32px;
-  }
-}
-
-.description {
-  font-size: 1.125rem;
-
-  &:not(:empty) {
-    margin-bottom: var(--u-spacing-medium);
-  }
-}

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

@@ -1,39 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { Highlight } from 'ngx-highlightjs';
-
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { titleToHash } from '@docs/docs/shared/title-to-hash';
-
-@Component({
-  selector: 'docs-example',
-  standalone: true,
-  imports: [
-    CommonModule,
-    Highlight
-  ],
-  templateUrl: './example.component.pug',
-  styleUrl: './example.component.scss'
-})
-export class ExampleComponent implements OnChanges {
-  htmlSafe: SafeHtml | null = null;
-  _html?: string;
-
-  @Input() renderExample = true;
-  @Input() sectionTitle!: string;
-  anchorHash: string | null = null;
-
-  @Input()
-  set html(html: string) {
-    this.htmlSafe = this.sanitizer.bypassSecurityTrustHtml(html);
-    this._html = html;
-  };
-
-  constructor(private readonly sanitizer: DomSanitizer) {
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.anchorHash = titleToHash(this.sectionTitle);
-  }
-}

package/docs/src/app/docs/link-active.directive.ts

@@ -1,38 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  Optional,
-  Renderer2,
-} from '@angular/core';
-import { Router, RouterLink, RouterLinkActive } from '@angular/router';
-
-@Directive({
-  selector: '[docsLinkActive]',
-  standalone: true,
-})
-export class LinkActiveDirective extends RouterLinkActive {
-  readonly #element: ElementRef;
-  readonly #renderer: Renderer2;
-
-  constructor(
-    router: Router,
-    element: ElementRef,
-    renderer: Renderer2,
-    changeDetectorRef: ChangeDetectorRef,
-    @Optional() link?: RouterLink,
-  ) {
-    super(router, element, renderer, changeDetectorRef, link);
-    this.#element = element;
-    this.#renderer = renderer;
-
-    this.isActiveChange.subscribe(() => {
-      if (this.isActive) {
-        this.#renderer.setAttribute(this.#element.nativeElement, 'active', '');
-        return;
-      }
-
-      this.#renderer.removeAttribute(this.#element.nativeElement, 'active');
-    });
-  }
-}

package/docs/src/app/docs/shared/title-to-hash.ts

@@ -1,7 +0,0 @@
-export const titleToHash = (title: string) =>
-  title
-    ? `#${title
-      .split(' ')
-      .join('-')
-      .toLowerCase()}`
-    : null;

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

@@ -1,7 +0,0 @@
-u-drawer-item(
-  (click)="open = !open",
-  keep-drawer-open) {{label}}
-  span.material-symbols-outlined(slot="badge") expand_more
-
-.submenu-items([class.open]="open", [attr.inert]="open ? undefined : ''")
-  ng-content

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

@@ -1,9 +0,0 @@
-.submenu-items {
-  display: none;
-  padding-block: 8px;
-  padding-inline-start: 12px;
-
-  &.open {
-    display: block;
-  }
-}

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

@@ -1,21 +0,0 @@
-import { AfterViewInit, Component, ElementRef, Input } from '@angular/core';
-
-@Component({
-  selector: 'docs-submenu',
-  standalone: true,
-  imports: [],
-  templateUrl: './submenu.component.pug',
-  styleUrl: './submenu.component.scss'
-})
-export class SubmenuComponent implements AfterViewInit {
-  @Input() label!: string;
-  open = false;
-
-  constructor(private readonly elementRef: ElementRef) {
-    this.elementRef.nativeElement.setAttribute('role', 'menu');
-  }
-
-  ngAfterViewInit() {
-    this.open = !!this.elementRef.nativeElement.querySelector(`u-drawer-item[routerlink="${location.hash.substring(2)}"]`);
-  }
-}

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

@@ -1,5 +0,0 @@
-h4.u-display-m.article-title
-  a([href]="anchorHash") {{title}}
-
-.u-headline-m.u-font-weight-thin
-  ng-content

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

@@ -1,3 +0,0 @@
-.article-title {
-  margin-top: 8px;
-}

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

@@ -1,19 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { titleToHash } from '@docs/docs/shared/title-to-hash';
-
-@Component({
-  selector: 'docs-title',
-  standalone: true,
-  imports: [],
-  templateUrl: './title.component.pug',
-  styleUrl: './title.component.scss'
-})
-export class TitleComponent implements OnChanges {
-
-  @Input() title!: string;
-  anchorHash: string | null = null;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.anchorHash = titleToHash(this.title);
-  }
-}

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

@@ -1 +0,0 @@
-span {{date | date : 'd'}}