@universal-material/web 3.0.140 → 3.0.142

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

package/docs/src/app/components/snackbars/examples/example.html

@@ -1,35 +0,0 @@
-<div class="u-form-field">
-  <div class="u-text-field-container">
-    <div class="u-text-field u-text-field-box">
-      <input class="u-text-input" id="snackbarText" />
-      <label>Snackbar text</label>
-    </div>
-  </div>
-</div>
-
-<div class="u-form-field">
-  <div class="u-text-field-container">
-    <div class="u-text-field u-text-field-box">
-      <input class="u-text-input" id="snackbarButtonText" />
-      <label>Snackbar button text</label>
-    </div>
-  </div>
-</div>
-
-<div class="u-text-end">
-  <button class="u-filled-btn" onclick="showSnackbar()">Show snackbar</button>
-</div>
-<script>
-  function showSnackbar() {
-
-    const text = document.getElementById('snackbarText').value;
-    const buttonText = document.getElementById('snackbarButtonText').value;
-
-    umd.Snackbar.show(text, 30000, buttonText ? {
-      text: buttonText,
-      action: function () {
-        alert('Snackbar action!')
-      }
-    } : null);
-  }
-</script>

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

@@ -1,5 +0,0 @@
-docs-title(title="Snackbars")
-
-docs-example(
-  sectionTitle="Example",
-  [html]="exampleHtml")

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

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

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

package/docs/src/app/components/steppers/steppers.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-steppers',
-  templateUrl: './steppers.component.pug',
-  styleUrl: './steppers.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class SteppersComponent {
-
-}

package/docs/src/app/components/tables/examples/overview.html

@@ -1,49 +0,0 @@
-<div class="u-grid">
-  <u-card variant="outlined">
-    <table class="u-table" slot="before-content">
-      <tbody>
-        <tr>
-          <th>Nome</th>
-          <td>John Doe</td>
-        </tr>
-        <tr>
-          <th>Email</th>
-          <td>john.doe@example.com</td>
-        </tr>
-      </tbody>
-    </table>
-  </u-card>
-
-  <u-card variant="outlined" class="u-text-bg-primary-fixed">
-    <table class="u-table" slot="before-content">
-      <thead>
-        <tr>
-          <th>Dessert (100g serving)&#x200E;</th>
-          <th class="u-text-end">Calories</th>
-          <th class="u-text-end">Fat (g)&#x200E;</th>
-          <th class="u-text-end">Carbs(g)&#x200E;</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Frozen yogurt</td>
-          <td class="u-text-end">159</td>
-          <td class="u-text-end">6.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-        <tr>
-          <td>Ice cream sandwich</td>
-          <td class="u-text-end">237</td>
-          <td class="u-text-end">9.0</td>
-          <td class="u-text-end">37</td>
-        </tr>
-        <tr>
-          <td>Eclair</td>
-          <td class="u-text-end">262</td>
-          <td class="u-text-end">16.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-      </tbody>
-    </table>
-  </u-card>
-</div>

package/docs/src/app/components/tables/examples/table-hover.html

@@ -1,67 +0,0 @@
-<div class="u-grid">
-  <u-card variant="outlined">
-    <table class="u-table u-table-hover" slot="before-content">
-      <thead>
-        <tr>
-          <th>Dessert (100g serving)&#x200E;</th>
-          <th class="u-text-end">Calories</th>
-          <th class="u-text-end">Fat (g)&#x200E;</th>
-          <th class="u-text-end">Carbs(g)&#x200E;</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Frozen yogurt</td>
-          <td class="u-text-end">159</td>
-          <td class="u-text-end">6.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-        <tr>
-          <td>Ice cream sandwich</td>
-          <td class="u-text-end">237</td>
-          <td class="u-text-end">9.0</td>
-          <td class="u-text-end">37</td>
-        </tr>
-        <tr>
-          <td>Eclair</td>
-          <td class="u-text-end">262</td>
-          <td class="u-text-end">16.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-      </tbody>
-    </table>
-  </u-card>
-
-  <u-card variant="outlined" class="u-text-bg-primary-fixed">
-    <table class="u-table u-table-hover" slot="before-content">
-      <thead>
-        <tr>
-          <th>Dessert (100g serving)&#x200E;</th>
-          <th class="u-text-end">Calories</th>
-          <th class="u-text-end">Fat (g)&#x200E;</th>
-          <th class="u-text-end">Carbs(g)&#x200E;</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Frozen yogurt</td>
-          <td class="u-text-end">159</td>
-          <td class="u-text-end">6.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-        <tr>
-          <td>Ice cream sandwich</td>
-          <td class="u-text-end">237</td>
-          <td class="u-text-end">9.0</td>
-          <td class="u-text-end">37</td>
-        </tr>
-        <tr>
-          <td>Eclair</td>
-          <td class="u-text-end">262</td>
-          <td class="u-text-end">16.0</td>
-          <td class="u-text-end">24</td>
-        </tr>
-      </tbody>
-    </table>
-  </u-card>
-</div>

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

@@ -1,74 +0,0 @@
-docs-title(title="Tables") Simple styling of tables using old material design specs
-
-docs-example(
-  sectionTitle="Overview",
-  [html]="overviewHtml")
-  markdown #{"Due to the widespread use of `<table>`, Universal Material provides a simple Material Design table. Add the class `.u-table` to any `<table>`"}
-
-docs-example(
-  sectionTitle="Hover",
-  [html]="tableHoverHtml")
-  markdown #{"Add `.u-table-hover` to enable a hover state on table rows within a `<tbody>`."}
-
-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-table-hover-opacity
-          td
-            code --u-state-layer-hover-opacity
-        tr
-          td
-            code --u-table-divider-opacity
-          td
-            code .2
-        tr
-          td
-            code --u-table-cell-padding
-          td
-            code 13px 16px
-        tr
-          td
-            code --u-td-padding
-          td
-            code --u-table-cell-padding
-        tr
-          td
-            code --u-th-padding
-          td
-            code --u-table-cell-padding
-        tr
-          td
-            code --u-table-cell-font-weight
-          td
-            code --u-font-weight-medium
-        tr
-          td
-            code --u-td-font-weight
-          td
-            code --u-table-cell-font-weight
-        tr
-          td
-            code --u-th-font-weight
-          td
-            code --u-table-cell-font-weight
-        tr
-          td
-            code --u-td-font-size
-          td
-            code .875rem
-        tr
-          td
-            code --u-th-font-size
-          td
-            code .8125rem

package/docs/src/app/components/tables/tables.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 overviewHtml from '!raw-loader!./examples/overview.html';
-// @ts-ignore
-import tableHoverHtml from '!raw-loader!./examples/table-hover.html';
-
-@Component({
-  selector: 'docs-tables',
-  templateUrl: './tables.component.pug',
-  styleUrl: './tables.component.scss',
-  standalone: true,
-  imports: [
-    MarkdownComponent,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class TablesComponent {
-  overviewHtml = overviewHtml;
-  tableHoverHtml = tableHoverHtml;
-}

package/docs/src/app/components/tabs/examples/example.html

@@ -1,45 +0,0 @@
-<div class="u-toolbar">
-  <div class="u-toolbar-row">
-    <div class="u-toolbar-start">
-      <div class="u-toolbar-actions">
-        <div class="u-icon-btn u-btn-default">
-          <i class="u-btn-icon mdi mdi-menu"></i>
-        </div>
-      </div>
-    </div>
-    <div class="u-toolbar-center">
-      <div class="u-toolbar-title">Page title</div>
-    </div>
-    <div class="u-toolbar-end">
-      <div class="u-toolbar-actions">
-        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-magnify"></i></div>
-        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-phone"></i></div>
-        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-dots-vertical"></i></div>
-      </div>
-    </div>
-  </div>
-  <div class="u-tab-bar u-tab-bar-primary u-toolbar-icon-padding" role="tablist" aria-label="Example tab">
-    <button type="button" role="tab" class="u-tab active">
-      <div class="u-tab-content">
-        <div class="u-tab-text">Item one</div>
-      </div>
-    </button>
-    <button type="button" role="tab" class="u-tab">
-      <div class="u-tab-content">
-        <div class="u-tab-text">Item two</div>
-      </div>
-    </button>
-    <button type="button" role="tab" class="u-tab">
-      <div class="u-tab-content">
-        <div class="u-tab-text">Item three</div>
-      </div>
-    </button>
-    <button type="button" role="tab" class="u-tab">
-      <div class="u-tab-content">
-        <div class="u-tab-text">Item four Item four Item four</div>
-      </div>
-    </button>
-    <div class="u-tab-indicator"></div>
-  </div>
-</div>
-

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

@@ -1,14 +0,0 @@
-docs-title(title="Tabs")
-
-
-.u-column
-  u-button-set(alignment="start")
-    u-icon-button((click)="addTab()")
-      span.materi.material-symbols-outlined add
-    u-icon-button((click)="tabs.splice(tabs.length - 1, 1)")
-      span.materi.material-symbols-outlined remove
-
-  u-tab-bar
-    u-tab(*ngFor="let tab of tabs; let i = index")
-      span.material-symbols-outlined(slot="icon") flight
-      span {{tab}} {{i + 1}}

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

@@ -1,32 +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';
-
-@Component({
-  selector: 'docs-tabs',
-  templateUrl: './tabs.component.pug',
-  styleUrl: './tabs.component.scss',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class TabsComponent {
-  tabs: string[] = []
-
-  constructor() {
-    for (let i = 0; i < 15; i++) {
-      this.addTab()
-    }
-  }
-
-  addTab() {
-    this.tabs.push(`Tab`);
-  }
-}

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

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

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