@universal-material/web 3.0.138 → 3.0.140

package/docs/src/app/components/lists/examples/simple-list.html

@@ -0,0 +1,17 @@
+<div class="u-list">
+  <div class="u-list-item">
+    <div class="u-list-item-content">
+      <div class="u-list-headline">Headline</div>
+    </div>
+  </div>
+  <div class="u-list-item">
+    <div class="u-list-item-content">
+      <div class="u-list-headline">Headline</div>
+    </div>
+  </div>
+  <div class="u-list-item">
+    <div class="u-list-item-content">
+      <div class="u-list-headline">Headline</div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+docs-title(title="Lists")
+
+u-card(variant="outlined")
+  u-list(slot="before-content")
+    u-list-item Item A
+      span(slot="supporting-text") Supporting text
+      span(slot="trailing") A
+    u-switch-list-item Item B
+      span(slot="supporting-text") Supporting text
+    u-list-item Item C
+    u-list-item Item D
+    u-list-item(selectable)
+      span.material-symbols-outlined(slot="leading") palette
+      span Item D
+      u-icon-button(
+        slot="trailing",
+        disabled)
+        span.material-symbols-outlined palette
+      span.material-symbols-outlined(slot="trailing") palette

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

package/docs/src/app/components/menus/examples/down-end.html

@@ -0,0 +1,15 @@
+<span class="position-relative d-inline-block">
+  <u-button id="toggle">Menu</u-button>
+  <u-menu toggle-selector="#toggle">
+    <u-menu-item>Item A</u-menu-item>
+    <u-menu-item>Item B</u-menu-item>
+    <u-menu-item>Item C</u-menu-item>
+    <u-menu-item>Item D</u-menu-item>
+    <u-menu-item>Item E</u-menu-item>
+    <u-menu-item>Item F</u-menu-item>
+    <u-menu-item>Item G</u-menu-item>
+    <u-menu-item>Item H</u-menu-item>
+    <u-menu-item>Item I</u-menu-item>
+    <u-menu-item>Item J</u-menu-item>
+  </u-menu>
+</span>

package/docs/src/app/components/menus/examples/down-left.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-left">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/down-right.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-right">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/down-start.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down-start">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/down.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu down">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/up-end.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-end">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/up-left.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-left">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/up-right.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-right">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/up-start.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up-start">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

package/docs/src/app/components/menus/examples/up.html

@@ -0,0 +1,10 @@
+<span class="u-dropdown">
+  <button class="u-text-btn u-dropdown-toggle">Menu</button>
+  <div class="u-dropdown-menu up">
+    <div class="u-dropdown-content">
+      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
+      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
+    </div>
+  </div>
+</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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