@universal-material/web 3.0.10 → 3.0.12

package/gulpfile.js

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

@@ -1,11 +0,0 @@
-<!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/rollup.config.js

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

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

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

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

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

@@ -1,35 +0,0 @@
-:host {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
-: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

@@ -1,33 +0,0 @@
-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;
-  }
-}