@universal-material/web 3.0.140 → 3.0.141

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

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

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

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-$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);
-  }
-}