@universal-material/web 3.0.138 → 3.0.140

package/docs/src/app/docs/link-active.directive.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  Optional,
+  Renderer2,
+} from '@angular/core';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+
+@Directive({
+  selector: '[docsLinkActive]',
+  standalone: true,
+})
+export class LinkActiveDirective extends RouterLinkActive {
+  readonly #element: ElementRef;
+  readonly #renderer: Renderer2;
+
+  constructor(
+    router: Router,
+    element: ElementRef,
+    renderer: Renderer2,
+    changeDetectorRef: ChangeDetectorRef,
+    @Optional() link?: RouterLink,
+  ) {
+    super(router, element, renderer, changeDetectorRef, link);
+    this.#element = element;
+    this.#renderer = renderer;
+
+    this.isActiveChange.subscribe(() => {
+      if (this.isActive) {
+        this.#renderer.setAttribute(this.#element.nativeElement, 'active', '');
+        return;
+      }
+
+      this.#renderer.removeAttribute(this.#element.nativeElement, 'active');
+    });
+  }
+}

package/docs/src/app/docs/shared/title-to-hash.ts

@@ -0,0 +1,7 @@
+export const titleToHash = (title: string) =>
+  title
+    ? `#${title
+      .split(' ')
+      .join('-')
+      .toLowerCase()}`
+    : null;

package/docs/src/app/docs/submenu/submenu.component.pug

@@ -0,0 +1,7 @@
+u-drawer-item(
+  (click)="open = !open",
+  keep-drawer-open) {{label}}
+  span.material-symbols-outlined(slot="badge") expand_more
+
+.submenu-items([class.open]="open", [attr.inert]="open ? undefined : ''")
+  ng-content

package/docs/src/app/docs/submenu/submenu.component.scss

@@ -0,0 +1,9 @@
+.submenu-items {
+  display: none;
+  padding-block: 8px;
+  padding-inline-start: 12px;
+
+  &.open {
+    display: block;
+  }
+}

package/docs/src/app/docs/submenu/submenu.component.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit, Component, ElementRef, Input } from '@angular/core';
+
+@Component({
+  selector: 'docs-submenu',
+  standalone: true,
+  imports: [],
+  templateUrl: './submenu.component.pug',
+  styleUrl: './submenu.component.scss'
+})
+export class SubmenuComponent implements AfterViewInit {
+  @Input() label!: string;
+  open = false;
+
+  constructor(private readonly elementRef: ElementRef) {
+    this.elementRef.nativeElement.setAttribute('role', 'menu');
+  }
+
+  ngAfterViewInit() {
+    this.open = !!this.elementRef.nativeElement.querySelector(`u-drawer-item[routerlink="${location.hash.substring(2)}"]`);
+  }
+}

package/docs/src/app/docs/title/title.component.pug

@@ -0,0 +1,5 @@
+h4.u-display-m.article-title
+  a([href]="anchorHash") {{title}}
+
+.u-headline-m.u-font-weight-thin
+  ng-content

package/docs/src/app/docs/title/title.component.scss

@@ -0,0 +1,3 @@
+.article-title {
+  margin-top: 8px;
+}

package/docs/src/app/docs/title/title.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { titleToHash } from '@docs/docs/shared/title-to-hash';
+
+@Component({
+  selector: 'docs-title',
+  standalone: true,
+  imports: [],
+  templateUrl: './title.component.pug',
+  styleUrl: './title.component.scss'
+})
+export class TitleComponent implements OnChanges {
+
+  @Input() title!: string;
+  anchorHash: string | null = null;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.anchorHash = titleToHash(this.title);
+  }
+}

package/docs/src/app/dummy/dummy.component.pug

@@ -0,0 +1 @@
+span {{date | date : 'd'}}

package/docs/src/app/dummy/dummy.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'docs-dummy',
+  imports: [
+    DatePipe
+  ],
+  templateUrl: './dummy.component.pug',
+  styleUrl: './dummy.component.scss'
+})
+export class DummyComponent {
+  date: Date | null = null;
+}

package/docs/src/app/introduction/introduction.component.pug

@@ -0,0 +1,26 @@
+docs-title(title="Quick start")
+
+u-calendar([dateRenderer]="createDummy")
+u-range-calendar
+ng-template(#dayTemplate, let-data)
+  span {{data.day}}
+
+docs-example(sectionTitle="Install") Include Universal Material source sass and TypeScript files via npm.
+
+u-card(variant="outlined")
+  pre(slot="before-content")
+    code(highlight="npm install @universal-material/web -S" language="shell")
+
+docs-example(sectionTitle="Import")
+  markdown {{importText}}
+
+  u-card(variant="outlined")
+    pre(slot="before-content")
+      code([highlight]="importCode" language="javascript")
+
+docs-example(sectionTitle="Usage")
+  markdown= 'Use the `<component-name>` tag in HTML markup.'
+
+  u-card(variant="outlined")
+    pre(slot="before-content")
+      code([highlight]="usageCode" language="javascript")

package/docs/src/app/introduction/introduction.component.scss

@@ -0,0 +1,7 @@
+pre {
+  margin: 0;
+}
+
+.hljs {
+  background: none;
+}

package/docs/src/app/introduction/introduction.component.ts

@@ -0,0 +1,58 @@
+import { Highlight } from 'ngx-highlightjs';
+import { MarkdownModule } from 'ngx-markdown';
+import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+import { DummyComponent } from '@docs/dummy/dummy.component';
+
+@Component({
+  selector: 'docs-introduction',
+  standalone: true,
+  imports: [MarkdownModule, Highlight, ExampleComponent, TitleComponent],
+  templateUrl: './introduction.component.pug',
+  styleUrl: './introduction.component.scss',
+})
+export class IntroductionComponent {
+  importText =
+    'Import element definitions from `@universal-material/web/<component>/<component>.js`.';
+
+  importCode = `
+// index.js
+import '@universal-material/web/button/button.js';
+import '@universal-material/web/button/icon-button.js';
+import '@universal-material/web/checkbox/checkbox.js';
+`.trim();
+
+  usageCode = `
+<script type="module" src="./index.js"></script>
+
+<label>
+  <u-checkbox checked></u-checkbox>
+  I agree
+</label>
+
+<u-button-set>
+  <u-button variant="outlined">Back</u-button>
+  <u-button>Next</u-button>
+</u-button-set>
+`.trim();
+
+  @ViewChild('dayTemplate') templateRef!: TemplateRef<any>;
+
+  createDummy = (date: Date, day: string) : HTMLElement => {
+    const view =  this.templateRef.createEmbeddedView({
+      $implicit: {
+        date,
+        day
+      }
+    });
+
+    view.detectChanges();
+
+    const span = document.createElement('span');
+
+    span.append(...(view.rootNodes as Node[]));
+    return span;
+  }
+}

package/docs/src/app/layout/container/container.component.pug

@@ -0,0 +1,77 @@
+docs-title(title="Container")
+  | Containers are a fundamental building block of Universal Material that contain, pad, and align your content.
+  p
+    span Batata
+    caption Batata
+    mark Batata
+  p
+    | Please press
+    kbd Ctrl
+    |  +
+    kbd Shift
+    |  +
+    kbd R
+    |  to re-render an MDN page.
+
+
+
+docs-example(sectionTitle="Overview")
+  markdown {{overviewMd}}
+
+docs-example(
+  sectionTitle="Default container",
+  [html]="defaultContainerHtml")
+  markdown The default `.container` class limit the width of the container and align it at the center of its parent.
+
+docs-example(
+  sectionTitle="Fluid container",
+  [html]="fluidContainerHtml")
+  markdown Use `.container-fluid` for a full width container, spanning the entire width of the its parent.
+
+docs-example(
+  sectionTitle="CSS")
+  h4.u-title-m Containers variables
+  u-card.api-card(variant="outlined")
+    table.u-table(slot="before-content")
+      thead
+        tr
+          th Variable
+          th Default
+      tbody
+        tr
+          td
+            code --u-layout-margin-default
+          td
+            code --u-spacing-medium
+            span  (compact), 
+            code --u-spacing-large
+            span  (expanded).
+        tr
+          td
+            code --u-layout-margin
+          td
+            code --u-layout-margin-default
+        tr
+          td
+            code --u-layout-margin-inline
+          td
+            code --u-layout-margin
+        tr
+          td
+            code --u-layout-margin-block
+          td
+            code --u-layout-margin
+
+  h4.u-title-m Default container variables
+  u-card.api-card(variant="outlined")
+    table.u-table(slot="before-content")
+      thead
+        tr
+          th Variable
+          th Default
+      tbody
+        tr
+          td
+            code --u-container-width
+          td
+            code 992px

package/docs/src/app/layout/container/container.component.ts

@@ -0,0 +1,32 @@
+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 overviewMd from '!raw-loader!./overview.md';
+
+// @ts-ignore
+import fluidContainerHtml from '!raw-loader!./examples/fluid-container.html';
+// @ts-ignore
+import defaultContainerHtml from '!raw-loader!./examples/default-container.html';
+
+@Component({
+  selector: 'docs-container',
+  templateUrl: './container.component.pug',
+  styleUrl: './container.component.scss',
+  standalone: true,
+  imports: [
+    MarkdownComponent,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class ContainerComponent {
+  overviewMd = overviewMd;
+  fluidContainerHtml = fluidContainerHtml;
+  defaultContainerHtml = defaultContainerHtml;
+}

package/docs/src/app/layout/container/examples/default-container.html

@@ -0,0 +1,3 @@
+<div class="u-container u-bg-surface-container-high">
+  <div class="u-container u-bg-surface" style="--u-container-width: 300px">Content</div>
+</div>

package/docs/src/app/layout/container/examples/fluid-container.html

@@ -0,0 +1,3 @@
+<div class="u-container u-bg-surface-container-high">
+  <div class="u-container-fluid u-bg-surface">Content</div>
+</div>

package/docs/src/app/layout/container/overview.md

@@ -0,0 +1,5 @@
+Containers are used to add [margin](https://m3.material.io/foundations/layout/understanding-layout/spacing#0678ba2e-1bce-49b8-8591-e471d6417011) to content.
+
+Universal material comes with two different containers:
+- `.container`, which sets a `max-width` to the container 
+- `.container-fluid`, which is `width: 100%` 

package/docs/src/app/layout/grid/examples/overview.html

@@ -0,0 +1,12 @@
+<div class="u-grid">
+  <div class="u-container-fluid u-grid u-bg-surface-container-high">
+    <div class="u-bg-surface u-p-small">Content</div>
+    <div class="u-bg-surface u-p-small">Content</div>
+  </div>
+  <div
+    class="u-container-fluid u-grid u-bg-surface-container-high"
+    style="--u-grid-columns: 2; --u-layout-gutter: var(--u-spacing-extra-large)">
+    <div class="u-bg-surface u-p-small">Content</div>
+    <div class="u-bg-surface u-p-small">Content</div>
+  </div>
+</div>

package/docs/src/app/layout/grid/grid.component.pug

@@ -0,0 +1,47 @@
+docs-title(title="Grid") Grids are used to add gutter to your content
+
+docs-example(
+  sectionTitle="Overview",
+  [html]="overviewHtml")
+  markdown Universal Material uses the new [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) to add spacing between columns inside a grid.
+    |  Currently it has one column by default and it can be customized with `--u-grid-columns`.
+    |  Also, you can directly change the CSS property `grid-template-columns` to build a more complex grid.
+
+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-grid-columns
+          td
+            code 1
+        tr
+          td
+            code --u-layout-gutter-default
+          td
+            code --u-spacing-medium
+            span  (compact), 
+            code --u-spacing-large
+            span  (expanded).
+        tr
+          td
+            code --u-layout-gutter
+          td
+            code --u-layout-gutter-default
+        tr
+          td
+            code --u-layout-gutter-inline
+          td
+            code --u-layout-gutter
+        tr
+          td
+            code --u-layout-gutter-block
+          td
+            code --u-layout-gutter

package/docs/src/app/layout/grid/grid.component.ts

@@ -0,0 +1,26 @@
+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';
+
+@Component({
+  selector: 'docs-grid',
+  templateUrl: './grid.component.pug',
+  styleUrl: './grid.component.scss',
+  standalone: true,
+  imports: [
+    MarkdownComponent,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class GridComponent {
+  overviewHtml = overviewHtml;
+}

package/docs/src/app/shared/states.model.ts

@@ -0,0 +1,61 @@
+export const states = [
+  'Alabama',
+  'Alaska',
+  'American Samoa',
+  'Arizona',
+  'Arkansas',
+  'California',
+  'Colorado',
+  'Connecticut',
+  'Delaware',
+  'District Of Columbia',
+  'Federated States Of Micronesia',
+  'Florida',
+  'Georgia',
+  'Guam',
+  'Hawaii',
+  'Idaho',
+  'Illinois',
+  'Indiana',
+  'Iowa',
+  'Kansas',
+  'Kentucky',
+  'Louisiana',
+  'Maine',
+  'Marshall Islands',
+  'Maryland',
+  'Massachusetts',
+  'Michigan',
+  'Minnesota',
+  'Mississippi',
+  'Missouri',
+  'Montana',
+  'Nebraska',
+  'Nevada',
+  'New Hampshire',
+  'New Jersey',
+  'New Mexico',
+  'New York',
+  'North Carolina',
+  'North Dakota',
+  'Northern Mariana Islands',
+  'Ohio',
+  'Oklahoma',
+  'Oregon',
+  'Palau',
+  'Pennsylvania',
+  'Puerto Rico',
+  'Rhode Island',
+  'South Carolina',
+  'South Dakota',
+  'Tennessee',
+  'Texas',
+  'Utah',
+  'Vermont',
+  'Virgin Islands',
+  'Virginia',
+  'Washington',
+  'West Virginia',
+  'Wisconsin',
+  'Wyoming',
+];

package/docs/src/app/utilities/background-colors/background-colors.component.pug

@@ -0,0 +1,9 @@
+docs-title(title="Background")
+
+docs-example(
+  sectionTitle="Colors",
+  [html]="colorsHtml")
+
+docs-example(
+  sectionTitle="Inverse colors",
+  [html]="inverseColorsHtml")

package/docs/src/app/utilities/background-colors/background-colors.component.ts

@@ -0,0 +1,27 @@
+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 colorsHtml from '!raw-loader!./examples/colors.html';
+
+@Component({
+  selector: 'docs-background-colors',
+  templateUrl: './background-colors.component.pug',
+  styleUrl: './background-colors.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class BackgroundColorsComponent {
+  colorsHtml = colorsHtml;
+  inverseColorsHtml = colorsHtml
+    .replace(/<div class="u-p-large u-bg-(primary-fixed|secondary-fixed|tertiary-fixed|info|warning|success|light|dark).+\n/g, '')
+    .replace(/-bg-/g, '-bg-inverse-')
+    .replace(/-text-on-/g, '-text-on-inverse-');
+}

package/docs/src/app/utilities/background-colors/examples/colors.html

@@ -0,0 +1,31 @@
+<div class="u-p-large u-bg-primary u-text-on-primary">.u-bg-primary</div>
+<div class="u-p-large u-bg-primary-container u-text-on-primary-container">.u-bg-primary-container</div>
+<div class="u-p-large u-bg-primary-fixed u-text-on-primary-fixed">.u-bg-primary-fixed</div>
+<div class="u-p-large u-bg-primary-fixed-dim u-text-on-primary-fixed">.u-bg-primary-fixed-dim</div>
+<div class="u-p-large u-bg-secondary u-text-on-secondary">.u-bg-secondary</div>
+<div class="u-p-large u-bg-secondary-container u-text-on-secondary-container">.u-bg-secondary-container</div>
+<div class="u-p-large u-bg-secondary-fixed u-text-on-secondary-fixed">.u-bg-secondary-fixed</div>
+<div class="u-p-large u-bg-secondary-fixed-dim u-text-on-secondary-fixed">.u-bg-secondary-fixed-dim</div>
+<div class="u-p-large u-bg-tertiary u-text-on-tertiary">.u-bg-tertiary</div>
+<div class="u-p-large u-bg-tertiary-container u-text-on-tertiary-container">.u-bg-tertiary-container</div>
+<div class="u-p-large u-bg-tertiary-fixed u-text-on-tertiary-fixed">.u-bg-tertiary-fixed</div>
+<div class="u-p-large u-bg-tertiary-fixed-dim u-text-on-tertiary-fixed">.u-bg-tertiary-fixed-dim</div>
+<div class="u-p-large u-bg-info u-text-on-info">.u-bg-info</div>
+<div class="u-p-large u-bg-info-container u-text-on-info-container">.u-bg-info-container</div>
+<div class="u-p-large u-bg-success u-text-on-success">.u-bg-success</div>
+<div class="u-p-large u-bg-success-container u-text-on-success-container">.u-bg-success-container</div>
+<div class="u-p-large u-bg-warning u-text-on-warning">.u-bg-warning</div>
+<div class="u-p-large u-bg-warning-container u-text-on-warning-container">.u-bg-warning-container</div>
+<div class="u-p-large u-bg-error u-text-on-error">.u-bg-error</div>
+<div class="u-p-large u-bg-error-container u-text-on-error-container">.u-bg-error-container</div>
+<div class="u-p-large u-bg-surface u-text-on-surface">.u-bg-surface</div>
+<div class="u-p-large u-bg-surface-variant u-text-on-surface-variant">.u-bg-surface-variant</div>
+<div class="u-p-large u-bg-surface-container u-text-on-surface">.u-bg-surface-container</div>
+<div class="u-p-large u-bg-surface-container-highest u-text-on-surface">.u-bg-surface-container-highest</div>
+<div class="u-p-large u-bg-surface-container-high u-text-on-surface">.u-bg-surface-container-high</div>
+<div class="u-p-large u-bg-surface-container-low u-text-on-surface">.u-bg-surface-container-low</div>
+<div class="u-p-large u-bg-surface-container-lowest u-text-on-surface">.u-bg-surface-container-lowest</div>
+<div class="u-p-large u-bg-body u-text-on-body">.u-bg-body</div>
+<div class="u-p-large u-bg-light u-text-on-light">.u-text-bg-light</div>
+<div class="u-p-large u-bg-dark u-text-on-dark">.u-text-bg-dark</div>
+

package/docs/src/app/utilities/dividers/dividers.component.pug

@@ -0,0 +1,37 @@
+docs-title(title="Dividers") Dividers are thin lines that group content in lists or other containers
+
+docs-example(
+  sectionTitle="Usage",
+  [html]="usageHtml")
+  markdown Create an element with `.u-divider` to group content. The default divider class has a small margin.
+
+docs-example(
+  sectionTitle="No margin",
+  [html]="noMarginHtml")
+  markdown Use `.u-divider-no-margin` if you don't need the margin.
+
+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-divider-thickness
+          td
+            code 1px
+        tr
+          td
+            code --u-divider-opacity
+          td
+            code .4
+        tr
+          td
+            code --u-divider-color
+          td
+            code --u-current-text-color

package/docs/src/app/utilities/dividers/dividers.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 usageHtml from '!raw-loader!./examples/usage.html';
+// @ts-ignore
+import noMarginHtml from '!raw-loader!./examples/no-margin.html';
+
+@Component({
+  selector: 'docs-dividers',
+  templateUrl: './dividers.component.pug',
+  styleUrl: './dividers.component.scss',
+  standalone: true,
+  imports: [
+    MarkdownComponent,
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class DividersComponent {
+  usageHtml = usageHtml;
+  noMarginHtml = noMarginHtml;
+}