@universal-material/web 3.0.138 → 3.0.140

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

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+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';
+import { FormsModule } from '@angular/forms';
+import { states } from '@docs/shared/states.model';
+
+@Component({
+  selector: 'docs-select',
+  templateUrl: './select.component.pug',
+  styleUrl: './select.component.scss',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MarkdownComponent,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ],
+  standalone: true
+})
+export class SelectComponent {
+  states = states;
+  example = `
+<select name="select">
+  <option value="value1">Value 1</option>
+  <option value="value2" selected>Value 2</option>
+  <option value="value3">Value 3</option>
+</select>
+`.trim();
+}

package/docs/src/app/components/selection-controls/examples/checkbox.html

@@ -0,0 +1,22 @@
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>
+
+<label class="u-checkbox">
+  <input type="checkbox" aria-labelledby="checkboxLabel" disabled checked />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
+</label>

package/docs/src/app/components/selection-controls/examples/radio-button.html

@@ -0,0 +1,36 @@
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio A</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio B</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>
+
+<label class="u-radio">
+  <input type="radio" name="other" disabled checked />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>

package/docs/src/app/components/selection-controls/examples/switch.html

@@ -0,0 +1,12 @@
+<label class="u-switch">
+  <input type="checkbox" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span></span>
+  <span class="u-selection-control-label">Switch</span>
+</label>
+<label class="u-switch">
+  <input type="checkbox" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span></span>
+  <span class="u-selection-control-label">Switch</span>
+</label>

package/docs/src/app/components/selection-controls/selection-controls.component.pug

@@ -0,0 +1,13 @@
+docs-title(title="Selection controls")
+
+docs-example(
+  sectionTitle="Checkbox",
+  [html]="checkboxHtml")
+
+docs-example(
+  sectionTitle="Radio",
+  [html]="radioHtml")
+
+docs-example(
+  sectionTitle="Switch",
+  [html]="switchHtml")

package/docs/src/app/components/selection-controls/selection-controls.component.ts

@@ -0,0 +1,29 @@
+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 checkboxHtml from '!raw-loader!./examples/checkbox.html';
+// @ts-ignore
+import radioHtml from '!raw-loader!./examples/radio-button.html';
+// @ts-ignore
+import switchHtml from '!raw-loader!./examples/switch.html';
+
+@Component({
+  selector: 'docs-selection-controls',
+  templateUrl: './selection-controls.component.pug',
+  styleUrl: './selection-controls.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class SelectionControlsComponent {
+  checkboxHtml = checkboxHtml;
+  radioHtml = radioHtml;
+  switchHtml = switchHtml;
+}

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

@@ -0,0 +1,42 @@
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="100" max="300" step="0.25"/>
+  <div class="u-slider-track-container">
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="10" max="20" step="2"/>
+  <div class="u-slider-track-container">
+    <div class="u-slider-track-marker-container">
+      <div class="u-slider-track-marker"></div>
+    </div>
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="100" max="300" step="0.25" disabled />
+  <div class="u-slider-track-container">
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="10" max="20" step="2" disabled />
+  <div class="u-slider-track-container">
+    <div class="u-slider-track-marker-container">
+      <div class="u-slider-track-marker"></div>
+    </div>
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+docs-title(title="Sliders")
+
+docs-example(
+  sectionTitle="Slider",
+  [html]="sliderHtml")

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

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

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

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

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

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

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

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

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

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

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

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

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

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