@universal-material/web 3.0.140 → 3.0.142

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

@@ -1,43 +0,0 @@
-docs-title(title="Menus")
-
-docs-example(
-  sectionTitle="Down",
-  [html]="downHtml")
-
-div(style="display: flex; flex-direction: column; align-items: center;")
-  u-button-set
-    u-button((click)="changeDirection()") Switch direction
-    u-button((click)="changeAnchor()") Change corner
-  .anchor(#anchor)
-    span Direction: {{direction}}
-    span Corner: {{anchorCorner}}
-
-  u-button((click)="menu.toggle()") Toggle menu
-u-menu(
-  #menu,
-  [direction]="direction",
-  [anchorCorner]="anchorCorner",
-  [anchorElement]="anchor")
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") brightness_4
-    span System
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") light_mode
-    span Light Mode
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") dark_mode
-    span Dark Mode
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") dark_mode
-    span Dark Mode
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") dark_mode
-    span Dark Mode
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") dark_mode
-    span Dark Mode
-  u-menu-item
-    span.material-symbols-outlined(slot="leading-icon") dark_mode
-    span Dark Mode
-
-docs-apis-table(key="menu")

package/docs/src/app/components/menus/menus.component.scss

@@ -1,15 +0,0 @@
-.anchor {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 200px;
-  height: 200px;
-  background: lightgray;
-  border: 1px solid var(--u-color-on-surface-variant);
-  margin-bottom: 16px;
-}
-
-u-menu::part(content) {
-  width: 300px;
-}

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

@@ -1,60 +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 downHtml from '!raw-loader!./examples/down.html';
-// @ts-ignore
-import downLeftHtml from '!raw-loader!./examples/down-left.html';
-// @ts-ignore
-import downRightHtml from '!raw-loader!./examples/down-right.html';
-// @ts-ignore
-import downStartHtml from '!raw-loader!./examples/down-start.html';
-// @ts-ignore
-import downEndHtml from '!raw-loader!./examples/down-end.html';
-
-const anchors = ['auto-start', 'auto-end', 'start-start', 'start-end', 'end-end', 'end-start'];
-const directions = ['up-start', 'up-end', 'down-start', 'down-end'];
-
-@Component({
-  selector: 'docs-menus',
-  templateUrl: './menus.component.pug',
-  styleUrl: './menus.component.scss',
-  standalone: true,
-  imports: [
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class MenusComponent {
-  downHtml = downHtml;
-  downLeftHtml = downLeftHtml;
-  downRightHtml = downRightHtml;
-  downStartHtml = downStartHtml;
-  downEndHtml = downEndHtml;
-
-  direction = 'down-end';
-  anchorCorner = 'start-start';
-
-  changeDirection() {
-    this.direction = this.getNextValue(this.direction, directions);
-  }
-
-  changeAnchor() {
-    this.anchorCorner = this.getNextValue(this.anchorCorner, anchors);
-  }
-
-  private getNextValue(currentValue: string, values: string[]) {
-
-    let nextIndex = values.indexOf(currentValue) + 1;
-
-    if (nextIndex === values.length) {
-      nextIndex = 0;
-    }
-
-    return values[nextIndex];
-  }
-}

package/docs/src/app/components/navigation-item.model.ts

@@ -1,4 +0,0 @@
-export interface NavigationItem {
-  hash: string;
-  title: string
-}

package/docs/src/app/components/progress/examples/circular-progress.html

@@ -1,13 +0,0 @@
-<div class="preloader-wrapper">
-  <div class="spinner-layer">
-    <div class="circle-clipper left">
-      <div class="circle"></div>
-    </div>
-    <div class="gap-patch">
-      <div class="circle"></div>
-    </div>
-    <div class="circle-clipper right">
-      <div class="circle"></div>
-    </div>
-  </div>
-</div>

package/docs/src/app/components/progress/examples/determinate-progress.html

@@ -1,3 +0,0 @@
-<div class="u-progress show">
-  <div class="u-progress-indicator" style="width: 30%;"></div>
-</div>

package/docs/src/app/components/progress/examples/indeterminate-progress.html

@@ -1,3 +0,0 @@
-<div class="u-progress indeterminate show">
-  <div class="u-progress-indicator"></div>
-</div>

package/docs/src/app/components/progress/examples/progress-color.html

@@ -1,3 +0,0 @@
-<div class="u-progress indeterminate show u-text-secondary">
-  <div class="u-progress-indicator"></div>
-</div>

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

@@ -1,34 +0,0 @@
-docs-title(title="Progress")
-
-docs-example(
-  sectionTitle="Indeterminate",
-  [html]="indeterminateHtml")
-  u-progress-bar
-
-docs-example(
-  sectionTitle="Determinate",
-  [html]="determinateHtml")
-  u-progress-bar([value]="barValue")
-  div
-    input(
-      type="number",
-      min="0",
-      max="1",
-      step="0.01",
-      [(ngModel)]="barValue")
-
-docs-example(
-  sectionTitle="Indeterminate circular progress",
-  [html]="circularProgressHtml")
-  u-circular-progress
-docs-example(
-  sectionTitle="Determinate circular progress",
-  [html]="circularProgressHtml")
-  u-circular-progress([value]="circularValue")
-  div
-    input(
-      type="number",
-      min="0",
-      max="1",
-      step="0.01",
-      [(ngModel)]="circularValue")

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

@@ -1,34 +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 determinateHtml from '!raw-loader!./examples/determinate-progress.html';
-// @ts-ignore
-import indeterminateHtml from '!raw-loader!./examples/indeterminate-progress.html';
-// @ts-ignore
-import circularProgressHtml from '!raw-loader!./examples/circular-progress.html';
-
-@Component({
-  selector: 'docs-progress',
-  templateUrl: './progress.component.pug',
-  styleUrl: './progress.component.scss',
-  standalone: true,
-  imports: [
-    FormsModule
-    ,
-    ApisTableComponent,
-    ExampleComponent,
-    TitleComponent
-  ]
-})
-export class ProgressComponent {
-  determinateHtml = determinateHtml;
-  indeterminateHtml = indeterminateHtml;
-  circularProgressHtml = circularProgressHtml;
-  circularValue = 0.5;
-  barValue = 0.5;
-}

package/docs/src/app/components/ripple/examples/usage.html

@@ -1,9 +0,0 @@
-<div class="d-flex">
-  <div class="ripple-example-container">
-    <u-ripple></u-ripple>
-  </div>
-
-  <div class="ripple-example-container round ml-3">
-    <u-ripple></u-ripple>
-  </div>
-</div>

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

@@ -1,7 +0,0 @@
-docs-title(title="Ripple")
-
-docs-example(
-  sectionTitle="Usage",
-  [html]="usageHtml")
-
-docs-apis-table(key="ripple")

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

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

@@ -1,175 +0,0 @@
-docs-title(title="Select")
-  markdown
-    = 'Represents a control that provides a menu of options. Mimic the behavior of the native `<select>`.'
-
-docs-example(
-  sectionTitle="Example",
-  [html]="example",
-  [renderExample]="false")
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-  u-select(label="States")
-    u-option(
-      *ngFor="let state of states",
-      [value]="state") {{state}}
-
-docs-apis-table(key="select")

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

@@ -1,3 +0,0 @@
-u-select::part(Select) {
-  color: red;
-}

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

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

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

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

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

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

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

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

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