@universal-material/web 3.0.138 → 3.0.140

package/src/navigation/side-navigation-swiper.styles.scss

@@ -0,0 +1,53 @@
+@use "../scss/variables";
+@use "../scss/mixins";
+
+@import "side-navigation-base.styles";
+
+.content {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  overflow: auto;
+}
+
+.drawer {
+  position: relative;
+  width: var(--_navigation-drawer-width);
+  z-index: var(--u-side-navigation-z-index, 1030);
+  pointer-events: auto;
+}
+
+.scrim {
+  z-index: 1;
+}
+
+swiper-container {
+  height: 100%;
+  --u-app-bar-offset: var(--_navigation-width);
+}
+
+swiper-container::part(wrapper) {
+  pointer-events: none;
+  z-index: 2;
+}
+
+
+@include mixins.media-breakpoint-up(lg) {
+  :host {
+    --_navigation-width: var(--_navigation-drawer-width);
+  }
+
+  .content {
+    position: static;
+  }
+
+  swiper-container::part(container) {
+    display: grid;
+    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
+    transition: 375ms variables.$awesome-cubic-bezier;
+  }
+
+  .dummy-slide {
+    display: none;
+  }
+}

package/src/navigation/side-navigation.styles.scss

@@ -0,0 +1,47 @@
+@use "../scss/variables";
+@use "../scss/functions";
+@use "../scss/mixins";
+
+@import "side-navigation-base.styles";
+
+.navigation {
+  position: fixed;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  height: 100%;
+  z-index: var(--u-side-navigation-z-index, 1030);
+}
+
+.drawer {
+  position: absolute;
+  inset-inline-start: var(--_navigation-drawer-width-negative);
+  inset-block-start: 0;
+  width: var(--_navigation-drawer-width);
+  height: 100%;
+  border-start-end-radius: var(--_navigation-drawer-corner-shape);
+  border-end-end-radius: var(--_navigation-drawer-corner-shape);
+  overflow: hidden;
+
+  &.toggle {
+    inset-inline-start: 0;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
+  transition: 375ms variables.$awesome-cubic-bezier;
+
+  --u-app-bar-offset: var(--_navigation-width);
+}
+
+@include mixins.media-breakpoint-up(lg) {
+
+  .drawer {
+    inset-inline-start: 0;
+
+    &.toggle {
+      inset-inline-start: var(--_navigation-drawer-width-negative);
+    }
+  }
+}

package/src/navigation/side-navigation.ts

@@ -0,0 +1,149 @@
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { config } from '../config.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles as swiperStyles } from './side-navigation-swiper.styles.js';
+import { styles } from './side-navigation.styles.js';
+
+import '../elevation/elevation.js';
+
+@customElement('u-side-navigation')
+export class UmSideNavigation extends LitElement {
+  static override styles = [baseStyles, config.navigationDrawer.useSwiperJs ? swiperStyles : styles];
+
+  #toggleDrawer = false;
+  private disableSlideAnimation = false;
+
+  /**
+   * Toggle the navigation drawer visibility
+   *
+   * _Modal drawer_: Open if `true`, closed if `false`
+   * _Standard drawer_: Collapsed if `true`, visible if `false`
+   */
+  @property({ type: Boolean, attribute: 'toggle-drawer' })
+  get toggleDrawer() {
+    return this.#toggleDrawer;
+  }
+
+  set toggleDrawer(toggleDrawer: boolean) {
+    this.#toggleDrawer = toggleDrawer;
+
+    if (!this.disableSlideAnimation) {
+      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);
+    }
+  }
+
+  @query('swiper-container') swiperContainer: any;
+  @query('.scrim') scrim!: HTMLElement;
+  @query('#scroll-container') scrollContainer: HTMLElement | undefined;
+
+  override render(): HTMLTemplateResult {
+    return config.navigationDrawer.useSwiperJs ? this.renderWithSwipe() : this.renderDefault();
+  }
+
+  private renderDefault() {
+    const classes = { toggle: this.toggleDrawer };
+
+    return html`
+      <div class="grid container">
+        <div>
+          <div class="navigation">
+            <div class="scrim ${classMap(classes)}" @click="${this.scrimClick}"></div>
+            <div class="drawer ${classMap(classes)}">
+              <u-elevation></u-elevation>
+              <div class="drawer-container">
+                <slot name="drawer"></slot>
+              </div>
+            </div>
+            <slot name="rail"></slot>
+          </div>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderWithSwipe() {
+    const classes = { toggle: this.toggleDrawer };
+    return html`
+      <swiper-container
+        class="container"
+        initial-slide="1"
+        resistance-ratio="0"
+        slides-per-view="auto"
+        simulate-touch="false"
+        @swiperactiveindexchange="${this.swiperActiveIndexChange}"
+        @swiperslidermove="${this.swiperSliderMove}"
+        @swipertransitionend="${this.swiperTransitionEnd}"
+        @swipertransitionstart="${this.swiperTransitionStart}"
+        @swiperslidesgridlengthchange="${this.slidesGridLengthChange}">
+        <swiper-slide class="drawer ${classMap(classes)}">
+          <u-elevation></u-elevation>
+          <div class="drawer-container">
+            <slot name="drawer"></slot>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="dummy-slide"></swiper-slide>
+
+        <div id="scroll-container" class="content" slot="container-end">
+          <slot></slot>
+        </div>
+        <div class="scrim ${classMap(classes)}" @click="${this.scrimClick}" slot="container-end"></div>
+      </swiper-container>
+    `;
+  }
+
+  private swiperActiveIndexChange() {
+    if (!this.swiperContainer?.swiper) {
+      return;
+    }
+
+    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;
+  }
+
+  private swiperTransitionStart() {
+    this.scrim.classList.add('moving');
+  }
+
+  private slidesGridLengthChange() {
+    if (!this.swiperContainer?.swiper) {
+      return;
+    }
+
+    this.classList.add('disable-transition');
+
+    const gridLength = this.swiperContainer.swiper.snapGrid.length;
+    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);
+    this.disableSlideAnimation = true;
+    this.toggleDrawer = true;
+    this.toggleDrawer = false;
+    this.disableSlideAnimation = false;
+    setTimeout(() => this.classList.remove('disable-transition'));
+  }
+
+  private swiperTransitionEnd() {
+    this.scrim.style.removeProperty('--_modal-drawer-open-progress');
+    this.scrim.classList.remove('moving');
+  }
+
+  private swiperSliderMove(e: Event) {
+
+    const swiper = (e as any).detail[0];
+    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);
+  }
+
+  private scrimClick() {
+    this.toggleDrawer = false;
+    this.swiperContainer?.swiper?.slideTo(1);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-side-navigation': UmSideNavigation;
+  }
+}

package/src/progress/circular-progress.styles.scss

@@ -0,0 +1,83 @@
+@use "sass:math";
+@use "../scss/api";
+
+:host {
+  position: relative;
+  display: inline-block;
+  width: var(--_size);
+  height: var(--_size);
+  margin-inline: auto;
+  --_size: var(--u-circular-progress-size, 3rem);
+}
+
+.circular {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  transform-origin: center;
+
+  &.indeterminate {
+    position: relative;
+    animation: rotate 2s linear infinite;
+  }
+
+  &:not(.indeterminate) {
+    .path {
+      transition: stroke-dashoffset 200ms linear;
+    }
+  }
+}
+
+.path {
+  stroke-linecap: round;
+  stroke: var(--u-circular-progress-color, #{api.get-color-var(primary)});
+}
+
+.track {
+  position: absolute;
+  inset: 0;
+
+  .path {
+    stroke: var(--u-circular-progress-track-color, #{api.get-color-var(secondary-container)});
+  }
+}
+
+.indeterminate {
+  .path {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+.on-going {
+  transform: rotate(-80deg);
+
+  &.track {
+    transform: rotate(-100deg);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}

package/src/progress/circular-progress.ts

@@ -0,0 +1,83 @@
+import { LitElement, svg, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles } from './circular-progress.styles.js';
+
+const basePercentage = 255;
+
+// https://codepen.io/ConAntonakos/pen/ryMaOX
+@customElement('u-circular-progress')
+export class UmCircularProgress extends LitElement {
+  static override styles = [styles];
+
+  @property({ type: Number }) value: number | undefined;
+  @property({ type: Number }) max = 1;
+
+  protected override render(): TemplateResult {
+    return this.value === undefined
+      ? this.#renderIndeterminate()
+      : this.#renderDeterminate();
+  }
+
+  #renderCircle(className: string): TemplateResult {
+    return svg`
+      <svg class="circular ${className}" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10" />
+      </svg>`;
+  }
+
+  #renderIndeterminate(): TemplateResult {
+    return this.#renderCircle('indeterminate');
+  }
+
+  #renderDeterminate(): TemplateResult {
+
+    let proportion = this.value! / this.max;
+    const offset = proportion === 0 || proportion === 1
+      ? 0
+      : 0.10625;
+    proportion = Math.floor(proportion * 100) / 100;
+    const percentage = basePercentage - basePercentage * proportion;
+    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
+
+    return svg`
+      <svg class="circular on-going" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          stroke-dasharray=${`${basePercentage}%`} 
+          stroke-dashoffset=${`${percentage}%`} />
+      </svg>
+      <svg class="circular track on-going" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          stroke-dasharray=${`${basePercentage}%`}
+          stroke-dashoffset=${`${trackPercentage}%`}/>
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-circular-progress': UmCircularProgress;
+  }
+}

package/src/progress/progress-bar.styles.scss

@@ -0,0 +1,159 @@
+@use "../scss/api";
+
+:host {
+  --_border-radius: var(--u-progress-bar-border-radius, #{api.get-shape-corner-var(full)});
+  --_height: var(--u-progress-bar-height, 4px);
+}
+
+$duration: 2.1s;
+
+:host,
+.determinate,
+.indeterminate {
+  overflow: hidden;
+  border-radius: var(--_border-radius);
+}
+
+.determinate,
+.indeterminate {
+  display: flex;
+  gap: 4px;
+}
+
+.indeterminate {
+  flex: 1;
+  margin-inline: -8px;
+  border-radius: var(--_border-radius);
+}
+
+.determinate {
+  margin-inline-end: -4px;
+
+  .bar {
+    transition: flex-basis 200ms linear;
+  }
+}
+
+.last {
+  flex-shrink: 1;
+  flex-basis: 100%;
+  animation: last $duration infinite linear;
+}
+
+.slow {
+  animation: slow $duration infinite linear;
+}
+
+.middle {
+  animation: middle $duration infinite linear;
+}
+
+.fast {
+  animation: fast $duration infinite linear;
+}
+
+.first {
+  animation: first $duration infinite linear;
+}
+
+.bar {
+  height: var(--_height);
+  border-radius: var(--_border-radius);
+  background: var(--u-progress-bar-color, #{api.get-color-var(primary)});
+}
+
+.track {
+  background: var(--u-progress-bar-track-color, #{api.get-color-var(secondary-container)});
+  flex-shrink: 1;
+}
+
+@keyframes slow {
+  0% {
+    flex-basis: 0;
+  }
+  10% {
+    flex-basis: 50%;
+  }
+  20% {
+    flex-basis: 100%;
+  }
+  30% {
+    flex-basis: 0;
+  }
+}
+
+@keyframes last {
+  0% {
+    flex-basis: 100%;
+  }
+  10% {
+    flex-basis: 50%;
+  }
+  20% {
+    flex-basis: 0;
+  }
+  100% {
+    flex-basis: 0;
+  }
+}
+
+@keyframes middle {
+  10% {
+    flex-basis: 0;
+  }
+  20% {
+    flex-basis: 100%;
+  }
+  35% {
+    flex-basis: 100%;
+  }
+  45% {
+    flex-basis: 0;
+  }
+}
+
+@keyframes fast {
+  0% {
+    flex-basis: 0;
+  }
+  25% {
+    flex-basis: 0;
+  }
+  35% {
+    flex-basis: 100%;
+  }
+  45% {
+    flex-basis: 100%;
+  }
+  55% {
+    flex-basis: 0;
+  }
+}
+
+@keyframes first {
+  35% {
+    flex-basis: 0;
+  }
+  45% {
+    flex-basis: 100%;
+  }
+  100% {
+    flex-basis: 100%;
+  }
+}
+
+
+@keyframes fast-bar-pre {
+  0% {
+    flex-basis: 0;
+  }
+  60% {
+    flex-basis: 0;
+  }
+  90% {
+    flex-basis: 100%;
+  }
+  100% {
+    flex-basis: 100%;
+  }
+}

package/src/progress/progress-bar.ts

@@ -0,0 +1,50 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles } from './progress-bar.styles.js';
+
+@customElement('u-progress-bar')
+export class UmProgressBar extends LitElement {
+  static override styles = [styles];
+
+  @property({ type: Number }) value: number | undefined;
+  @property({ type: Number }) max = 1;
+
+  protected override render(): TemplateResult {
+    return this.value === undefined
+      ? this.#renderIndeterminate()
+      : this.#renderDeterminate();
+  }
+
+  #renderIndeterminate(): TemplateResult {
+    return html`
+      <div class="indeterminate">
+        <div class="bar track first"></div>
+        <div class="bar active fast"></div>
+        <div class="bar track middle"></div>
+        <div class="bar active slow"></div>
+        <div class="bar track last"></div>
+      </div>
+    `;
+  }
+
+  #renderDeterminate(): TemplateResult {
+    const proportion = this.value! / this.max;
+
+    const percentage = Math.floor(proportion * 1000) / 10;
+    const trackPercentage = 100 - percentage;
+
+    return html`
+      <div class="determinate">
+        <div class="bar active" style="flex-basis: ${percentage}%"></div>
+        <div class="bar track" style="flex-basis: ${trackPercentage}%"></div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-progress-bar': UmProgressBar;
+  }
+}

package/src/radio/radio-list-item.ts

@@ -0,0 +1,15 @@
+import { customElement } from 'lit/decorators.js';
+
+import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
+import { UmRadio } from './radio.js';
+
+@customElement('u-radio-list-item')
+export class UmRadioListItem extends mixinSelectionControlListItem(UmRadio) {
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-radio-list-item': UmRadioListItem;
+  }
+}

package/src/radio/radio.styles.scss

@@ -0,0 +1,34 @@
+$control-name: radio;
+
+:host {
+  --_indicator-size: var(--u-radio-indicator-size, 1.25rem);
+  --_width: var(--u-radio-size, 3rem);
+  --_height: var(--_width);
+}
+
+.indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_indicator-size);
+  height: var(--_indicator-size);
+  border: var(--u-radio-indicator-border-width, .125rem) solid var(--_indicator-color);
+  border-radius: 50%;
+
+  &::before {
+    content: '';
+    width: calc(var(--_indicator-size) / 2);
+    height: calc(var(--_indicator-size) / 2);
+    background: var(--_indicator-color);
+    border-radius: 50%;
+    transition: transform 250ms;
+    transform: scale3d(0, 0, 1);
+  }
+}
+
+input:checked ~ .indicator-container .indicator {
+  &::before {
+    transform: scale3d(1, 1, 1);
+  }
+}