@universal-material/web 3.0.7 → 3.0.9

package/gulpfile.js

@@ -0,0 +1,225 @@
+import gulp from 'gulp';
+import notify from 'gulp-notify';
+import gulpPug from 'gulp-pug';
+import gulpSass from 'gulp-sass';
+import { encode } from 'html-entities';
+import * as fs from 'node:fs';
+import { rollup } from 'rollup';
+import * as dartSass from 'sass';
+import through2 from 'through2';
+import { Project, SyntaxKind } from 'ts-morph';
+
+import rollupConfig from './rollup.config.js';
+
+const sass = gulpSass(dartSass);
+
+const pugDocs = () => {
+  return gulp
+    .src(["./docs/src/**/*.pug", "!./docs/src/_*.pug"])
+    .pipe(gulpPug({
+      data: {
+        debug: true,
+        version:
+          "<%= pkg.version + '.' + pkg.build %>"
+      },
+      filters: {
+        exampleCode: text =>
+          `
+<u-card-content>${text}</u-card-content>
+<u-card-content class="example-card-code" slot="after-content">
+  <pre><code class="language-html">${encode(text, {level: 'html5'})}</code></pre>
+</u-card-content>`,
+        escape: text =>
+          encode(text, {level: 'html5'})
+      },
+      doctype: 'html',
+      pretty: true
+    }).on("error", notify.onError(function(error) {
+      return "An error occurred while compiling pug.\nLook in the console for details.\n" + error;
+    })))
+    .pipe(gulp.dest("./docs/dist")); // tell gulp our output folder
+}
+
+const docsCopyJs = () =>
+  gulp
+    .src(["./dist/**/*"])
+    .pipe(gulp.dest('docs/dist/js'));
+
+const docsBundle = async () => {
+  const bundle = await rollup(rollupConfig);
+  await bundle.write({
+    file: './docs/dist/js/index.js'
+  })
+}
+
+const watchDocs = () => {
+  gulp.watch(['./docs/src/**/*.pug', './docs/src/**/*.html'], pugDocs);
+  gulp.watch(['./dist/**/*'], docsCopyJs);
+  gulp.watch(['./src/**/*.ts', '!./src/**/*.styles.ts'], docsPugApis);
+}
+
+const docsPugApis = cb => {
+
+  console.log('Generating APIs model....');
+
+  const project = new Project();
+  project.addSourceFilesAtPaths('src/**/*.ts');
+
+  const apis = {};
+
+  for (const sourceFile of project.getSourceFiles()) {
+
+    if (sourceFile.getFilePath().includes('node_modules')) {
+      continue;
+    }
+
+    for (const classDeclaration of sourceFile.getClasses()) {
+
+      if (classDeclaration.isAbstract()) {
+        continue;
+      }
+
+      const classInfo = [];
+
+      setClassInfo(classDeclaration, classInfo);
+
+      if (!classInfo.length) {
+        continue;
+      }
+
+      const className = classDeclaration.getName();
+      const apiName = `${className[2].toLowerCase()}${className.slice(3)}`;
+      apis[apiName] = classInfo;
+    }
+  }
+
+  fs.writeFile('./docs/src/_apis.pug', `- var apis = ${JSON.stringify(apis)}`, err => {
+    if (err) {
+      console.error(err);
+      cb(err);
+      return;
+    }
+
+    cb()
+    console.log('Done.');
+  });
+};
+
+const sassToTs = () =>
+  gulp
+    .src(['./src/**/*.scss', '!./src/styles/**/*.scss'])
+    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
+    .pipe(through2({objectMode: true}, (file, enc, cb) => {
+      let content = file.contents.toString();
+      content = content.replaceAll(/^(.)/gm, '  $1');
+
+      const newContent = `import { css } from 'lit';
+
+export const styles = css \`
+${content}
+\`;
+`
+
+      file.contents = new Buffer(newContent);
+      file.path = file.path.replace('.css', '.ts')
+      return cb(null, file);
+    }))
+    .pipe(gulp.dest('./src'));
+
+function getAttributeName(property) {
+  const decorators = property.getDecorators();
+  const propertyDecorator = decorators.find(d => d.getName() === 'property');
+
+  if (!propertyDecorator) {
+    return null;
+  }
+
+  const optionsArgument = propertyDecorator.getArguments()[0];
+
+  if (!optionsArgument) {
+    return property.getName();
+  }
+
+  return optionsArgument.getProperty('attribute')
+    ?.getInitializer()
+    ?.getText()
+    ?.replaceAll(`'`, '') ?? property.getName();
+}
+
+function getJsDocsDescription(property) {
+  const jsDocs = property.getJsDocs()[0];
+
+  if (!jsDocs) {
+    return null;
+  }
+
+  let description = encode(jsDocs.getDescription())
+    .replaceAll(/`(.+?)`/g, '<code>$1</code>')
+    .replaceAll(/_(.+?)_/g, '<em>$1</em>')
+    .trimStart();
+
+  const linkTag = jsDocs
+    .getTags()
+    .find(t => t.getTagName() === 'link');
+
+  if (!linkTag) {
+    return description;
+  }
+
+  const link = linkTag.getComment().trim();
+
+  return `${description}
+
+<a href="${link}" target="_blank">${link}</a>`;
+}
+
+function setClassInfo(classDeclaration, classInfo) {
+
+  if (!classDeclaration || classDeclaration.getSourceFile().getFilePath().includes('node_modules')) {
+    return;
+  }
+
+  for (const property of classDeclaration.getProperties().concat(classDeclaration.getGetAccessors())) {
+
+    const propertyName = property.getName();
+
+    if (property.isStatic()
+      || property.hasModifier(SyntaxKind.PrivateKeyword)
+      || property.hasModifier(SyntaxKind.ProtectedKeyword)
+      || propertyName.startsWith('#')) {
+      continue;
+    }
+
+    const attributeName = getAttributeName(property);
+
+    const description = getJsDocsDescription(property);
+    const typeText = property.getType().getText();
+
+    classInfo.push({
+      type: typeText.includes('|')
+        ? 'string'
+        : typeText,
+      attribute: attributeName,
+      default: property.getInitializer
+        ? property.getInitializer()?.getText() ?? 'undefined'
+        : null,
+      name: propertyName.startsWith('_')
+        ? null
+        : propertyName,
+      description: description
+    });
+  }
+
+  setClassInfo(classDeclaration.getBaseClass(), classInfo);
+}
+
+gulp.task('docs:pug:apis', docsPugApis);
+gulp.task('docs:pug', pugDocs);
+gulp.task('docs:js', docsCopyJs);
+gulp.task('docs:bundle', docsBundle);
+gulp.task('docs:watch', gulp.series(docsPugApis, gulp.parallel(pugDocs, docsCopyJs, watchDocs)));
+
+gulp.task('sass:sass-to-ts', sassToTs);
+gulp.task('sass:sass-to-ts:watch', () => gulp.watch('./src/**/*.scss', sassToTs));
+
+gulp.task('docs', gulp.series(docsPugApis, gulp.parallel(pugDocs, docsBundle)));

package/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Lit Starter Kit</title>
+  </head>
+  <body>
+    <a href="/dev/index.html">Component Demo</a>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "Material web components",
   "type": "module",
   "keywords": [

package/rollup.config.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import summary from 'rollup-plugin-summary';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: './dist/index.js',
+  output: {
+    file: './docs/dist/js/index.js',
+    format: 'esm',
+  },
+  onwarn(warning) {
+    if (warning.code !== 'THIS_IS_UNDEFINED') {
+      console.error(`(!) ${warning.message}`);
+    }
+  },
+  plugins: [
+    replace({'Reflect.decorate': 'undefined'}),
+    resolve(),
+    /**
+     * This minification setup serves the static site generation.
+     * For bundling and minification, check the README.md file.
+     */
+    terser({
+      ecma: 2021,
+      module: true,
+      warnings: true,
+      mangle: {
+        properties: {
+          regex: /^__/,
+        },
+      },
+    }),
+    summary(),
+  ],
+};

package/src/_utils.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+
+@import "variables";
+
+@function get-color-var($name) {
+  @return var(--u-color-#{$name}, map.get($colors, $name));
+}
+
+@function get-color-rgb-var($name) {
+  @return var(--u-color-#{$name}-rgb, map.get($rgb-colors, $name));
+}
+
+
+@function get-font-weight-var($name) {
+  @return var(--u-font-weight-#{$name}, map.get($font-weights, $name));
+}
+
+@function get-shaper-corner-var($name) {
+  @return var(--u-shape-corner-#{$name}, map.get($shape-corner, $name));
+}

package/src/_variables.scss

@@ -0,0 +1,68 @@
+@use "sass:map";
+
+$awesome-cubic-bezier: cubic-bezier(.19, 1, .22, 1) !default;
+
+$rgb-colors: (
+  primary: unquote("103, 80, 164"),
+  on-primary: unquote("255, 255, 255"),
+  primary-container: unquote("234, 221, 255"),
+  on-primary-container: unquote("33, 0, 93"),
+  secondary: unquote("98, 91, 113"),
+  secondary-container: unquote("232, 222, 248"),
+  on-secondary-container: unquote("29, 25, 43"),
+  on-secondary: unquote("255, 255, 255"),
+  tertiary: unquote("125, 82, 96"),
+  on-tertiary: unquote("255, 255, 255"),
+  tertiary-container: unquote("255, 216, 228"),
+  on-tertiary-container: unquote("49, 17, 29"),
+  error: unquote("179, 38, 30"),
+  on-error: unquote("255, 255, 255"),
+  error-container: unquote("249, 222, 220"),
+  on-error-container: unquote("65, 14, 11"),
+  surface: unquote("254, 247, 255"),
+  on-surface: unquote("29, 27, 32"),
+  surface-variant: unquote("231, 224, 236"),
+  on-surface-variant: unquote("73, 69, 79"),
+  surface-container-highest: unquote("230, 224, 233"),
+  surface-container-high: unquote("236, 230, 240"),
+  surface-container: unquote("243, 237, 247"),
+  surface-container-low: unquote("247, 242, 250"),
+  surface-container-lowest: unquote("255, 255, 255"),
+  inverse-surface: unquote("50, 47, 53"),
+  inverse-on-surface: unquote("245, 239, 247"),
+  outline: unquote("121, 116, 126"),
+  outline-variant: unquote("202, 196, 208"),
+  shadow: unquote("0, 0, 0")
+);
+
+$colors: ();
+
+@each $name, $value in $rgb-colors {
+  $colors: map.set($colors, $name, unquote("rgb(#{$value})"));
+}
+
+$spacings: (
+  var(sm, 8px),
+  var(md, 16px),
+  var(lg, 24px),
+  var(xl, 40px),
+);
+
+$font-weights: (
+  thin: 100,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  bolder: 900,
+);
+
+$shape-corner: (
+  none: 0,
+  extra-small: 4px,
+  small: 8px,
+  medium: 12px,
+  large: 16px,
+  extra-large: 28px,
+  full: 9999px
+);

package/src/button/button-base.styles.scss

@@ -0,0 +1,75 @@
+@import '../utils';
+
+:host {
+  --_color-primary: #{get-color-var(primary)};
+
+  -webkit-tap-highlight-color: transparent;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: baseline;
+  position: relative;
+  white-space: nowrap;
+  font-family: var(--u-font-family-base, system-ui);
+  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
+}
+
+:host([disabled]) {
+  --u-elevation-level: 0 !important;
+  background-color: var(--u-button-disabled-background-color, rgba(#{get-color-rgb-var(on-surface)}, .12)) !important;
+  color: var(--u-button-disabled-text-color, rgba(#{get-color-rgb-var(on-surface)}, .38)) !important;
+}
+
+:host([disabled]) .button {
+  cursor: default;
+}
+
+* {
+  color: inherit;
+}
+
+u-elevation {
+  z-index: -1;
+}
+
+.button {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  white-space: nowrap;
+  background: transparent;
+  user-select: none;
+  text-decoration: none;
+  outline: 0;
+  z-index: 0;
+}
+
+.button:focus-visible {
+  animation: offset-pulse 400ms ease;
+  animation-fill-mode: forwards;
+  outline-offset: 2px;
+}
+
+::slotted([slot=icon]) {
+  display: inline-block;
+}
+
+@keyframes offset-pulse {
+  0% {
+    outline: 4px solid var(--_color-primary);
+  }
+  50% {
+    outline: 8px solid var(--_color-primary);
+  }
+  100% {
+    outline: 4px solid var(--_color-primary);
+  }
+}

package/src/button/button-base.ts

@@ -0,0 +1,147 @@
+import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
+import { UmRipple } from '../ripple/ripple';
+
+export abstract class UmButtonBase extends LitElement {
+
+  static readonly formAssociated = true;
+
+  /**
+   * Whether the button is disabled or not.
+   */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  /**
+   * The URL that the link button points to.
+   */
+  @property() href = '';
+
+  /**
+   * Where to display the linked `href` URL for a link button. Common options
+   * include `_blank` to open in a new tab.
+   */
+  @property() target: string = '';
+
+  @property() type: string = 'submit';
+
+  @property({reflect: true}) value: string = '';
+  @property() name: string | undefined;
+
+  @query('.button') private readonly buttonElement!: HTMLElement;
+  @query('u-ripple') private readonly ripple!: UmRipple;
+
+  /**
+   * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
+   */
+  @property()
+  get form(): HTMLFormElement | null {
+    return this.#elementInternals.form;
+  }
+
+  readonly #elementInternals: ElementInternals;
+
+  constructor() {
+    super();
+    this.#elementInternals = this.attachInternals();
+  }
+
+  protected override render() {
+    return this.href
+      ? this.renderLink()
+      : this.renderButton();
+  }
+
+  private renderButton() {
+
+    return html`
+      <button
+        id="button"
+        class="button"
+        ?disabled=${this.disabled}
+        aria-label="${this.getAriaLabel()}"
+        type="button">
+        <u-ripple ?disabled=${this.disabled}></u-ripple>
+        <u-elevation></u-elevation>
+      </button>
+      ${this.renderContent()}`;
+  }
+
+  private renderLink() {
+
+    return html`<a
+      id="link"
+      class="button"
+      href=${this.disabled ? nothing : this.href}
+      aria-disabled=${this.disabled || nothing}
+      aria-label="${this.getAriaLabel()}"
+      target=${this.target || nothing}>
+      <u-elevation></u-elevation>
+      <u-ripple ?disabled=${this.disabled}></u-ripple>
+    </a>
+    ${this.renderContent()}`;
+  }
+
+  protected abstract renderContent(): HTMLTemplateResult;
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('click', this.innerHandleClick);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('click', this.innerHandleClick);
+  }
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  protected getAriaLabel(): string | null | typeof nothing {
+    return this.ariaLabel || nothing;
+  }
+
+  private innerHandleClick(event: UIEvent): void {
+
+    if (this.disabled) {
+      return;
+    }
+
+    if (event.detail === 0) {
+      this.ripple.createRipple();
+    }
+
+    this.handleClick(event);
+
+    if (this.type === 'button' || !!this.href) {
+      return;
+    }
+
+    if (!this.form) {
+      return;
+    }
+
+    this.#elementInternals.setFormValue(this.value);
+
+    if (this.type === 'submit') {
+      this.form.requestSubmit();
+      return;
+    }
+
+    this.form.reset();
+  }
+
+  protected handleClick(_: UIEvent): void {
+
+  }
+}

package/src/button/button-set.styles.scss

@@ -0,0 +1,35 @@
+:host {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+:host([align=start]) {
+  justify-content: flex-start;
+}
+
+:host([align=center]) {
+  justify-content: center;
+}
+
+:host([align=end]) {
+  justify-content: flex-end;
+}
+
+:host([stack][align=start]) {
+  align-items: flex-start;
+}
+
+:host([stack][align=center]) {
+  align-items: center;
+}
+
+:host([stack][align=end]) {
+  align-items: flex-end;
+}
+
+:host([stack]) {
+  flex-direction: column;
+  justify-content: flex-start;
+}

package/src/button/button-set.ts

@@ -0,0 +1,33 @@
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles } from './button-set.styles';
+
+export type UmButtonSetAlignment = 'start' | 'center' | 'end';
+
+@customElement('u-button-set')
+export class UmButtonSet extends LitElement {
+
+  static override styles = styles;
+
+  /**
+   * Set the alignment of the buttons at the `start`, `center` or at the `end`.
+   */
+  @property({reflect: true}) align: UmButtonSetAlignment = 'end';
+
+  /**
+   * Whether to render the buttons stacked or not
+   */
+  @property({type: Boolean, reflect: true}) stack = false;
+
+  override render(): HTMLTemplateResult {
+    return html`
+      <slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-button-set': UmButtonSet;
+  }
+}