@universal-material/web 3.0.139 → 3.0.140

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

@@ -0,0 +1,122 @@
+docs-title(title="Text fields")
+
+.u-column
+  docs-example(
+    sectionTitle="Live",
+    [renderExample]="false",
+    [html]="template")
+    h5.u-title-m Settings
+    u-chip-set
+      u-chip(
+        (click)="setVariant('filled')",
+        [selected]="variant === 'filled'")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Filled
+      u-chip(
+        (click)="setVariant('outlined')",
+        [selected]="variant === 'outlined'")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Outlined
+      u-chip(
+        toggle,
+        (change)="leadingIcon = $any($event.target).selected; updated$.next()",
+        [selected]="leadingIcon")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Leading icon
+      u-chip(
+        toggle,
+        (change)="trailingIcon = $any($event.target).selected; updated$.next()",
+        [selected]="trailingIcon")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Trailing icon
+      u-chip(
+        toggle,
+        (change)="invalid = $any($event.target).selected; updated$.next()",
+        [selected]="invalid")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Invalid
+
+      u-chip(
+        toggle,
+        (change)="disabled = $any($event.target).selected; updated$.next()",
+        [selected]="disabled")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Disabled
+
+      u-chip(
+        toggle,
+        (change)="showCounter = $any($event.target).selected; updated$.next()",
+        [selected]="showCounter")
+        span.material-symbols-outlined(slot="selected-icon") done
+        | Counter
+
+    .u-column.u-mt-small
+      u-text-field(
+        label="Supporting text",
+        [(ngModel)]="supportingText",
+        (ngModelChange)="updated$.next()",
+        ngDefaultControl)
+      u-text-field(
+        label="Error text",
+        [(ngModel)]="errorText",
+        (ngModelChange)="updated$.next()",
+        ngDefaultControl)
+
+      u-button-field(
+        label="Button field",
+        (click)="someValue.count = someValue.count + 1",
+        [(ngModel)]="someValue",
+        ngDefaultControl)
+        span {{someValue.count}}
+
+    h5.u-title-m.u-mt-large Component
+    u-text-field(
+      label="Name"
+      example,
+      prefix-text="$",
+      suffix-text=".00",
+      [counter]="showCounter ? '10/100' : ''",
+      [supportingText]="supportingText",
+      [errorText]="errorText",
+      [variant]="variant",
+      [invalid]="invalid",
+      [disabled]="disabled")
+      span.material-symbols-outlined(
+        *ngIf="leadingIcon",
+        slot="leading-icon") search
+      u-icon-button(
+        *ngIf="trailingIcon",
+        slot="trailing-icon",
+        [disabled]="disabled")
+        span.material-symbols-outlined cancel
+      span(
+        *ngIf="showCounter",
+        slot="counter") 10/100
+
+    u-text-field(
+      example,
+      maxlength="100",
+      [variant]="variant",
+      [invalid]="invalid",
+      [disabled]="disabled")
+      span.material-symbols-outlined(
+        *ngIf="leadingIcon",
+        slot="leading-icon") search
+      u-icon-button(
+        *ngIf="trailingIcon",
+        slot="trailing-icon",
+        toggle,
+        [disabled]="disabled")
+        span.material-symbols-outlined cancel
+      span(slot="label") Name
+      span(
+        *ngIf="supportingText",
+        slot="supporting-text",
+        id="supporting-text") {{supportingText}}
+      span(
+        *ngIf="errorText",
+        slot="error-text") {{errorText}}
+      //span(
+        *ngIf="showCounter",
+        slot="counter") 10/100
+docs-apis-table(key="field")

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

@@ -0,0 +1,3 @@
+docs-example label {
+  display: block;
+}

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

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

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

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

package/docs/src/app/components/toolbars/toolbars.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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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);
+  }
+}