@universal-material/web 3.0.140 → 3.0.141

package/add-custom-elements-schemas.cjs

@@ -1,75 +0,0 @@
-const customElementsSchemas = [
-  './custom-elements.json'
-]
-
-const customElementsDefinitions = [];
-
-for (const customElementSchema of customElementsSchemas) {
-  const customElements = require(customElementSchema);
-  customElementsDefinitions.push(customElements);
-}
-
-function parsePropertyType(type) {
-  switch (type) {
-    case 'boolean':
-      return '!';
-    case 'number':
-      return '#';
-    default:
-      return '';
-  }
-}
-
-function buildElementDefinition(name, properties) {
-  return `${name}^[HTMLElement]|${properties.join(',')}`;
-}
-
-function mapSchema(customElementsDefinition, SCHEMAS) {
-
-  for (const module of customElementsDefinition.modules) {
-
-    const customElementDefinition = module.exports.find(e => e.kind === 'custom-element-definition');
-    const classDeclaration = module.declarations.find(e => e.kind === 'class');
-
-    if (!classDeclaration || !customElementDefinition) {
-      continue;
-    }
-
-    const properties = [];
-    const attributeNames = [];
-
-    if (classDeclaration.attributes) {
-      for (const attr of classDeclaration.attributes) {
-        properties.push(`${parsePropertyType(attr.type?.text)}${attr.name}`);
-        attributeNames.push(attr.name);
-      }
-    }
-
-    parseMembers(classDeclaration, properties, attributeNames)
-
-    SCHEMAS.push(buildElementDefinition(customElementDefinition.name, properties));
-  }
-}
-
-function parseMembers(classDeclaration, properties, attributeNames) {
-  if (!classDeclaration.members) {
-    return;
-  }
-
-  for (const member of classDeclaration.members) {
-    if (member.kind !== 'field'
-      || member.static
-      || member.privacy
-      || attributeNames.includes(member.name)) {
-      continue;
-    }
-
-    properties.push(member.name);
-  }
-}
-
-exports.mapSchemas = SCHEMAS => {
-  for (const customElementsDefinition of customElementsDefinitions) {
-    mapSchema(customElementsDefinition, SCHEMAS)
-  }
-}

package/change-compiler-to-add-custom-elements.js

@@ -1,26 +0,0 @@
-import fs from 'fs';
-
-const compilerPath = 'node_modules/@angular/compiler/fesm2022/compiler.mjs';
-
-fs.access(compilerPath, fs.constants.F_OK, fileDoesNotExists => {
-  if (fileDoesNotExists) {
-    return;
-  }
-
-  try {
-    let content = fs.readFileSync(compilerPath).toString();
-
-    if (content.includes('mapSchemas(SCHEMA);')) {
-      return;
-    }
-
-    content = `${content}
-
-import { mapSchemas } from '../../../../add-custom-elements-schemas.cjs';
-mapSchemas(SCHEMA);`;
-
-    fs.writeFileSync(compilerPath, content);
-  } catch (err) {
-    console.log(`An error occurred while changing Angular compiler to add custom elements`);
-  }
-});

package/change-schematics-to-generate-pug.js

@@ -1,32 +0,0 @@
-import fs from 'fs';
-
-const componentSchematicFilesFolderPath = 'node_modules/@schematics/angular/component/files/__name@dasherize@if-flat__';
-const htmlSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.html.template`;
-const pugSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.pug.template`;
-const tsSchematicPath = `${componentSchematicFilesFolderPath}/__name@dasherize__.__type@dasherize__.ts.template`;
-
-fs.access(htmlSchematicPath, fs.constants.F_OK, fileDoesNotExists => {
-  if (fileDoesNotExists) {
-    return;
-  }
-
-  try {
-    fs.renameSync(htmlSchematicPath, pugSchematicPath);
-    let pugFile = fs.readFileSync(pugSchematicPath).toString();
-    pugFile = pugFile
-      .replace('<p>', 'p ')
-      .replace('</p>', '');
-
-    fs.writeFileSync(pugSchematicPath, pugFile);
-
-
-    let tsFile = fs.readFileSync(tsSchematicPath).toString();
-
-    tsFile = tsFile
-      .replace('.html', '.pug');
-
-    fs.writeFileSync(tsSchematicPath, tsFile);
-  } catch (err) {
-    console.log(`An error occurred while changing Angular CLI's schematics`);
-  }
-});

package/docs/angular.json

@@ -1,110 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "universal-material-web-docs": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss",
-          "skipTests": true
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        },
-        "@schematics/angular:class": {
-          "skipTests": true
-        },
-        "@schematics/angular:directive": {
-          "skipTests": true
-        },
-        "@schematics/angular:guard": {
-          "skipTests": true
-        },
-        "@schematics/angular:interceptor": {
-          "skipTests": true
-        },
-        "@schematics/angular:pipe": {
-          "skipTests": true
-        },
-        "@schematics/angular:resolver": {
-          "skipTests": true
-        },
-        "@schematics/angular:service": {
-          "skipTests": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "docs",
-      "architect": {
-        "build": {
-          "builder": "ngx-pug-builders:browser",
-          "options": {
-            "outputPath": "dist/universal-material-web-docs",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "../src/scss/universal-material.scss",
-              "../node_modules/highlight.js/styles/base16/atelier-sulphurpool-light.css",
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all",
-              "baseHref": "/web/"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "ngx-pug-builders:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "universal-material-web-docs:build:production"
-            },
-            "development": {
-              "buildTarget": "universal-material-web-docs:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "ngx-pug-builders:extract-i18n",
-          "options": {
-            "buildTarget": "universal-material-web-docs:build"
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,199 +0,0 @@
-u-side-navigation(#navigation)
-  u-top-app-bar(
-    headline="Material",
-    size="medium",
-    [scrollContainer]="navigation.scrollContainer || 'window'")
-    u-icon-button(
-      type="button",
-      slot="leading-icon",
-      (click)="navigation.toggleDrawer = !navigation.toggleDrawer")
-      span.material-symbols-outlined menu
-
-    .color-picker(slot="trailing-icon")
-      u-ripple((click)="colorInput.click()")
-      input(
-        #colorInput,
-        type="color",
-        aria-label="Theme color",
-        [ngModel]="themeColor",
-        (ngModelChange)="$themeColorChange.next($event)")
-    .position-relative(slot="trailing-icon")
-      u-icon-button(
-        aria-label="Theme",
-        (click)="themeMenu.toggle()")
-        span.material-symbols-outlined palette
-      u-menu(
-        #themeMenu,
-        anchor-corner="end-end")
-        u-menu-item((click)="setThemeMode(ThemeMode.Auto)")
-          span.material-symbols-outlined(slot="leading-icon") brightness_4
-          span System
-        u-menu-item((click)="setThemeMode(ThemeMode.Light)")
-          span.material-symbols-outlined(slot="leading-icon") light_mode
-          span Light Mode
-        u-menu-item((click)="setThemeMode(ThemeMode.Dark)")
-          span.material-symbols-outlined(slot="leading-icon") dark_mode
-          span Dark Mode
-
-    //u-icon-button(
-      slot="trailing-icon",
-      href="/angular",
-      title="Universal Material Angular")
-      span.material-symbols-outlined angular
-    u-icon-button(
-      slot="trailing-icon",
-      type="button",
-      title="Rtl",
-      (click)="toggleRtl()")
-      span.material-symbols-outlined format_align_right
-
-  u-drawer(slot="drawer")
-    h6.navigation-headline.u-headline-s Material Design
-    u-drawer-item(
-      routerLink="",
-      docsLinkActive,
-      [routerLinkActiveOptions]="{exact: true}") Introduction
-
-    //u-drawer-item(
-      routerLink="layout/grid",
-      docsLinkActive) Grid
-
-
-    //u-drawer-item Colors
-      i.u-typo-title-l.mdi.mdi-chevron-down(slot="badge")
-
-    docs-submenu(label="CSS")
-      u-drawer-item(
-        routerLink="content/typography",
-        docsLinkActive) Typography
-
-      docs-submenu(label="Colors")
-        u-drawer-item(
-          role="menuitem",
-          routerLink="utilities/text-colors",
-          docsLinkActive) Text
-        u-drawer-item(
-          routerLink="utilities/text-emphasis",
-          docsLinkActive) Text emphasis
-        u-drawer-item(
-          routerLink="utilities/background-colors",
-          docsLinkActive) Background
-        u-drawer-item(
-          routerLink="utilities/text-and-background-colors",
-          docsLinkActive) Color & background
-
-      u-drawer-item(
-        routerLink="utilities/dividers",
-        docsLinkActive) Dividers
-
-      u-drawer-item(
-        routerLink="components/tables",
-        docsLinkActive) Tables
-
-      u-drawer-item(
-        routerLink="layout/container",
-        docsLinkActive) Container
-
-      u-drawer-item(
-        routerLink="layout/grid",
-        docsLinkActive) Grid
-
-    docs-submenu(label="Components")
-
-      u-drawer-item(
-        routerLink="components/common-buttons",
-        docsLinkActive) Common buttons
-      u-drawer-item(
-        routerLink="components/fab",
-        docsLinkActive) Floating Action Button (FAB)
-      u-drawer-item(
-        routerLink="components/icon-buttons",
-        docsLinkActive) Icon buttons
-      u-drawer-item(
-        routerLink="components/button-set",
-        docsLinkActive) Button set
-
-      u-drawer-item(
-        routerLink="components/cards",
-        docsLinkActive) Cards
-
-      //u-drawer-item(
-        routerLink="components/checkbox",
-        docsLinkActive) Checkbox
-
-      u-drawer-item(
-        routerLink="components/chips",
-        docsLinkActive) Chips
-
-      u-drawer-item(
-        routerLink="components/dialogs",
-        docsLinkActive) Dialogs
-
-      u-drawer-item(
-        routerLink="components/lists",
-        docsLinkActive) Lists
-
-      //u-drawer-item(
-        routerLink="components/menus",
-        docsLinkActive) Menus
-
-      u-drawer-item(
-        routerLink="components/progress",
-        docsLinkActive) Progress
-
-      u-drawer-item(
-        routerLink="components/ripple",
-        docsLinkActive) Ripple
-
-      //u-drawer-item(
-        routerLink="components/selection-controls",
-        docsLinkActive) Selection controls
-
-      //u-drawer-item(
-        routerLink="components/sliders",
-        docsLinkActive) Sliders
-
-      //u-drawer-item(
-        routerLink="components/snackbars",
-        docsLinkActive) Snackbars
-
-      //u-drawer-item(
-        routerLink="components/tabs",
-        docsLinkActive) Tabs
-
-      u-drawer-item(
-        routerLink="components/text-fields",
-        docsLinkActive) Text fields
-
-      u-drawer-item(
-        routerLink="components/select",
-        docsLinkActive) Select
-
-      u-drawer-item(
-        routerLink="components/chip-field",
-        docsLinkActive) Chip field
-
-      u-drawer-item(
-        routerLink="components/typeahead",
-        docsLinkActive) Typeahead
-
-      //u-drawer-item(
-        routerLink="components/toolbars",
-        docsLinkActive) Toolbars
-
-  .u-container.chapter
-    router-outlet
-  //.pane-layout
-    .pane
-      u-elevation
-      .scroll-wrapper(#scrollWrapper)
-
-
-    .side-pane
-      u-card
-        .u-label-m On this page:
-        a.hash-navigation-item.u-title-s(
-          href="#",
-          *ngFor="let item of anchorsNavigation",
-          tabindex="0",
-          (click)="navigateToAnchor($event, item)") {{item.title}}

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

@@ -1,109 +0,0 @@
-@use "../../../src/scss/mixins";
-
-:host {
-  display: block;
-  height: 100vh;
-}
-
-.navigation-headline {
-  padding-block: 16px;
-  margin-block: 0;
-}
-
-.hash-navigation-item {
-  display: block;
-  margin-top: 8px;
-}
-
-.color-picker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  border-radius: 9999px;
-
-  input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: transparent;
-    width: 32px;
-    height: 32px;
-    border: none;
-
-    &::-webkit-color-swatch {
-      border-radius: 50%;
-      border: 1px solid var(--u-color-outline);
-    }
-
-    &::-moz-color-swatch {
-      border-radius: 50%;
-      border: 1px solid var(--u-color-outline);
-    }
-  }
-}
-
-.pane-layout {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: minmax(0, 1fr);
-  width: 1600px;
-  max-width: 100%;
-  margin-inline: auto;
-  gap: 16px;
-  flex: 1;
-
-  @include mixins.media-breakpoint-up(md) {
-    grid-template-columns: minmax(500px, 992px) minmax(250px, auto);
-    overflow: hidden;
-    padding-inline: 16px;
-    padding-block-end: 16px;
-  }
-}
-
-.pane {
-  position: relative;
-  background: var(--u-color-surface);
-  overflow: hidden;
-  border-radius: 24px;
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-
-  @include mixins.media-breakpoint-up(md) {
-    border-radius: 24px;
-  }
-
-  u-elevation {
-    --u-elevation-level: 1;
-  }
-}
-
-.side-pane {
-  display: none;
-  position: relative;
-
-  @include mixins.media-breakpoint-up(md) {
-    display: block;
-  }
-}
-
-.scroll-wrapper {
-  height: 100%;
-  overflow: auto;
-  scrollbar-width: thin;
-}
-
-@include mixins.media-breakpoint-up(md) {
-  .u-container {
-    --u-grid-margin: 24px;
-  }
-}
-
-@include mixins.media-breakpoint-up(lg) {
-  .u-container {
-    --u-grid-margin: 40px;
-  }
-}

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

@@ -1,158 +0,0 @@
-import { ThemeBuilder } from '@universal-material/web';
-import { Subject, throttleTime } from 'rxjs';
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ChildActivationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
-
-import { NavigationItem } from '@docs/components/navigation-item.model';
-
-import { LinkActiveDirective } from './docs/link-active.directive';
-import { SubmenuComponent } from './docs/submenu/submenu.component';
-
-enum ThemeMode {
-  Auto,
-  Light,
-  Dark,
-}
-
-@Component({
-  selector: 'docs-root',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterLink,
-    LinkActiveDirective,
-    SubmenuComponent,
-    RouterOutlet,
-  ],
-  templateUrl: 'app.component.pug',
-  styleUrl: './app.component.scss',
-})
-export class AppComponent {
-  ThemeMode = ThemeMode;
-
-  currentThemeMode = parseInt(localStorage['currentThemeMode'], 10) || 0;
-  themeColor = '#6750a4';
-  $themeColorChange = new Subject<string>();
-
-  anchorsNavigation: { hash: string; title: string }[] = [];
-
-  @ViewChild('scrollWrapper') scrollWrapper!: ElementRef<HTMLElement>;
-
-  constructor(router: Router) {
-    this.applyThemeMode();
-
-    const themeColor = localStorage['currentThemeColor'] || this.themeColor;
-    this.setThemeColor(themeColor);
-
-    this.$themeColorChange
-      .pipe(throttleTime(1000, undefined, { leading: true, trailing: true }))
-      .subscribe(color => this.setThemeColor(color));
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.applyThemeMode());
-
-    router.events.subscribe(event => {
-      if (!(event instanceof ChildActivationEnd)) {
-        return;
-      }
-
-      setTimeout(() => this.buildNavigation(), 100);
-    });
-
-    if (localStorage['direction'] === 'rtl') {
-      document.body.setAttribute('dir', 'rtl');
-    }
-  }
-
-  toggleRtl() {
-    const currentDirection = localStorage['direction'];
-
-    localStorage['direction'] = currentDirection === 'rtl' ? '' : 'rtl';
-
-    location.reload();
-  }
-
-  setThemeColor(color: string) {
-    if (localStorage['ignoreThemeColor'] === 'true') {
-      return;
-    }
-
-    const styles = ThemeBuilder.create(color).build();
-
-    let themeStylesElement = document.getElementById('theme-styles');
-
-    if (!themeStylesElement) {
-      themeStylesElement = document.createElement('style');
-      themeStylesElement.id = 'theme-styles';
-      document.head.appendChild(themeStylesElement);
-    }
-
-    themeStylesElement.textContent = styles;
-    localStorage['currentThemeColor'] = color;
-    this.themeColor = color;
-  }
-
-  setThemeMode(mode: ThemeMode) {
-    this.currentThemeMode = mode;
-    localStorage['currentThemeMode'] = mode;
-    this.applyThemeMode();
-  }
-
-  private applyThemeMode() {
-
-    if (this.currentThemeMode === ThemeMode.Light) {
-      document.documentElement.classList.add('u-light');
-      document.documentElement.classList.remove('u-dark');
-      return;
-    }
-
-    if (this.currentThemeMode === ThemeMode.Dark) {
-      document.documentElement.classList.add('u-dark');
-      document.documentElement.classList.remove('u-light');
-      return;
-    }
-
-    document.documentElement.classList.remove('u-light');
-    document.documentElement.classList.remove('u-dark');
-  }
-
-  private buildNavigation() {
-    const anchors = Array.from(document.querySelectorAll('a'));
-
-    this.anchorsNavigation.length = 0;
-
-    for (const anchor of anchors) {
-      if (anchor.host !== location.host) {
-        anchor.target = '_blank';
-        continue;
-      }
-
-      if (!anchor.hash?.startsWith('#')) {
-        continue;
-      }
-
-      const navigationItem = {
-        hash: anchor.hash,
-        title: anchor.textContent!,
-      };
-
-      anchor.addEventListener('click', e => this.navigateToAnchor(e, navigationItem));
-      this.anchorsNavigation.push(navigationItem);
-    }
-  }
-
-  navigateToAnchor(e: Event, item: NavigationItem) {
-    e.preventDefault();
-    const target = document.querySelector<HTMLElement>(`a[href="${item.hash}"]`);
-
-    if (!target) {
-      return;
-    }
-
-    this.scrollWrapper.nativeElement.scrollTo({
-      top: target.offsetTop - 24,
-    });
-  }
-}