@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/circularprogress/circular-progress.js

@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { CircularProgress } from './lib/circular-progress.js';
-import { styles } from './lib/circular-progress-styles.css.js';
-/**
- * @summary Circular progress indicators display progress by animating along an
- * invisible circular track in a clockwise direction. They can be applied
- * directly to a surface, such as a button or card.
- *
- * @description
- * Progress indicators inform users about the status of ongoing processes.
- * - Determinate indicators display how long a process will take.
- * - Indeterminate indicators express an unspecified amount of wait time.
- */
-let MdCircularProgress = class MdCircularProgress extends CircularProgress {
-};
-MdCircularProgress.styles = [styles];
-MdCircularProgress = __decorate([
-    customElement('md-circular-progress')
-], MdCircularProgress);
-export { MdCircularProgress };
-//# sourceMappingURL=circular-progress.js.map

package/circularprogress/circular-progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["circular-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAQ7D;;;;;;;;;GASG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {CircularProgress} from './lib/circular-progress.js';\nimport {styles} from './lib/circular-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-circular-progress': MdCircularProgress;\n  }\n}\n\n/**\n * @summary Circular progress indicators display progress by animating along an\n * invisible circular track in a clockwise direction. They can be applied\n * directly to a surface, such as a button or card.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-circular-progress')\nexport class MdCircularProgress extends CircularProgress {\n  static override styles = [styles];\n}\n"]}

package/circularprogress/harness.d.ts

@@ -1,13 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Harness } from '../testing/harness.js';
-import { CircularProgress } from './lib/circular-progress.js';
-/**
- * Test harness for circular-progress.
- */
-export declare class CircularProgressHarness extends Harness<CircularProgress> {
-    getInteractiveElement(): Promise<HTMLElement>;
-}

package/circularprogress/harness.js

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Harness } from '../testing/harness.js';
-/**
- * Test harness for circular-progress.
- */
-export class CircularProgressHarness extends Harness {
-    async getInteractiveElement() {
-        await this.element.updateComplete;
-        return this.element.querySelector('.circularProgresss');
-    }
-}
-//# sourceMappingURL=harness.js.map

package/circularprogress/harness.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,OAAyB;IAC3D,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,oBAAoB,CAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {CircularProgress} from './lib/circular-progress.js';\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.circularProgresss')!;\n  }\n}\n"]}

package/circularprogress/lib/_circular-progress.scss

@@ -1,288 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../tokens';
-// go/keep-sorted end
-
-@mixin theme($tokens) {
-  $supported-tokens: tokens.$md-comp-circular-progress-indicator-supported-tokens;
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-circular-progress-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-circular-progress-indicator-values();
-
-  $container-padding: 4px;
-
-  // note, these value come from the m2 version but match current gm3 values.
-  // Constants:
-  //       ARCSIZE     = 270 degrees (amount of circle the arc takes up)
-  //       ARCTIME     = 1333ms (time it takes to expand and contract arc)
-  //       ARCSTARTROT = 216 degrees (how much the start location of the arc
-  //                                 should rotate each time, 216 gives us a
-  //                                 5 pointed star shape (it's 360/5 * 3).
-  //                                 For a 7 pointed star, we might do
-  //                                 360/7 * 3 = 154.286)
-  // ARCTIME
-  $arc-duration: 1333ms;
-  // 4 * ARCTIME
-  $cycle-duration: calc(4 * $arc-duration);
-  // ARCTIME * 360 / (ARCSTARTROT + (360-ARCSIZE))
-  $linear-rotate-duration: calc($arc-duration * 360 / 306);
-
-  $indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-circular-progress-#{$token}, #{$value});
-    }
-
-    display: inline-flex;
-    vertical-align: middle;
-    min-block-size: var(--_size);
-    min-inline-size: var(--_size);
-    position: relative;
-    align-items: center;
-    justify-content: center;
-
-    // `contain` and `content-visibility` are performance optimizations
-    // important here because progress indicators are often used when a cpu
-    // intensive task is underway so it's especially important to minimize
-    // their cpu consumption.
-    contain: strict;
-    content-visibility: auto;
-  }
-
-  .circular-progress {
-    flex: 1;
-    align-self: stretch;
-    margin: $container-padding;
-  }
-
-  .circular-progress,
-  .spinner,
-  .left,
-  .right,
-  .circle,
-  svg,
-  .track,
-  .progress {
-    position: absolute;
-    inset: 0;
-  }
-
-  svg {
-    transform: rotate(-90deg);
-  }
-
-  circle {
-    cx: 50%;
-    cy: 50%;
-    r: calc(50% * (1 - var(--_active-indicator-width) / 100));
-    // match size to indeterminate border width
-    stroke-width: calc(var(--_active-indicator-width) * 1%);
-    // note, pathLength is set so this can be normalized
-    stroke-dasharray: 100;
-    fill: transparent;
-  }
-
-  .progress {
-    // note, these value come from the m2 version but match current gm3 values.
-    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
-    stroke: var(--_active-indicator-color);
-  }
-
-  .track {
-    stroke: transparent;
-  }
-
-  .circular-progress.indeterminate {
-    will-change: transform;
-    animation: linear infinite linear-rotate;
-    animation-duration: $linear-rotate-duration;
-  }
-
-  .spinner {
-    will-change: transform;
-    animation: infinite both rotate-arc;
-    animation-duration: $cycle-duration;
-    animation-timing-function: $indeterminate-easing;
-  }
-
-  .left {
-    overflow: hidden;
-    inset: 0 50% 0 0;
-  }
-
-  .right {
-    overflow: hidden;
-    inset: 0 0 0 50%;
-  }
-
-  .circle {
-    box-sizing: border-box;
-    border-radius: 50%;
-    // match size to svg stroke width, which is a fraction of the overall
-    // padding box width.
-    $_padding-box-width: calc(var(--_size) - 2 * $container-padding);
-    $_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);
-    border: solid calc($_active-indicator-fraction * $_padding-box-width);
-    border-color: var(--_active-indicator-color) var(--_active-indicator-color)
-      transparent transparent;
-    will-change: transform;
-    animation: expand-arc;
-    animation-iteration-count: infinite;
-    animation-fill-mode: both;
-    animation-duration: $arc-duration, $cycle-duration;
-    animation-timing-function: $indeterminate-easing;
-  }
-
-  .four-color .circle {
-    animation-name: expand-arc, four-color;
-  }
-
-  .left .circle {
-    rotate: 135deg;
-    inset: 0 -100% 0 0;
-  }
-  .right .circle {
-    rotate: 100deg;
-    inset: 0 0 0 -100%;
-    animation-delay: calc(-0.5 * $arc-duration), 0ms;
-  }
-
-  @media screen and (forced-colors: active) {
-    .progress {
-      stroke: CanvasText;
-    }
-
-    .circle {
-      border-color: CanvasText CanvasText Canvas Canvas;
-    }
-  }
-
-  // Indeterminate mode is 3 animations composed together:
-  // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.
-  // 2. rotate-arc: at the same time, the arc is rotated in increments
-  // of 270deg.
-  // 3. linear-rotate: that rotating arc is then linearly rotated to produce
-  // a spinning expanding/contracting arc.
-  //
-  // See original implementation:
-  // https://github.com/PolymerElements/paper-spinner/blob/master/paper-spinner-styles.js.
-
-  // 1. expand-arc
-  // This is used on 2 divs which each represent half the desired
-  // 270deg arc with one offset by 50%. This creates an arc which expands from
-  // 10deg to 270deg.
-  @keyframes expand-arc {
-    0% {
-      transform: rotate(265deg);
-    }
-    50% {
-      transform: rotate(130deg);
-    }
-    100% {
-      transform: rotate(265deg);
-    }
-  }
-
-  // 2. rotate-arc
-  // The arc seamlessly travels around the circle indefinitely so it needs to
-  // end at a full rotation of the circle. This rotates the 270 deg
-  // (270/360 = 3/4) arc 4x (4 * 3/4 = 3) so it ends at
-  // (3 * 360 = 1080).
-  // This is sub-divided into increments of 135deg since the arc is rendered
-  // with 2 divs acting together.
-  @keyframes rotate-arc {
-    12.5% {
-      transform: rotate(135deg);
-    }
-    25% {
-      transform: rotate(270deg);
-    }
-    37.5% {
-      transform: rotate(405deg);
-    }
-    50% {
-      transform: rotate(540deg);
-    }
-    62.5% {
-      transform: rotate(675deg);
-    }
-    75% {
-      transform: rotate(810deg);
-    }
-    87.5% {
-      transform: rotate(945deg);
-    }
-    100% {
-      transform: rotate(1080deg);
-    }
-  }
-
-  // 3. linear-rotate
-  // The traveling expanding arc is linearly rotated to produce the spinner
-  // effect.
-  @keyframes linear-rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  // This animates between 4 colors which are each shown for 25% of the time.
-  // Each color is shown solid for 3/5 of that time (3/5 * 25% = 15%) and
-  // transitions to the next color for 2/5 of that time (2/5 * 25% = 10%).
-  @keyframes four-color {
-    0% {
-      border-top-color: var(--_four-color-active-indicator-one-color);
-      border-right-color: var(--_four-color-active-indicator-one-color);
-    }
-    15% {
-      border-top-color: var(--_four-color-active-indicator-one-color);
-      border-right-color: var(--_four-color-active-indicator-one-color);
-    }
-    25% {
-      border-top-color: var(--_four-color-active-indicator-two-color);
-      border-right-color: var(--_four-color-active-indicator-two-color);
-    }
-    40% {
-      border-top-color: var(--_four-color-active-indicator-two-color);
-      border-right-color: var(--_four-color-active-indicator-two-color);
-    }
-    50% {
-      border-top-color: var(--_four-color-active-indicator-three-color);
-      border-right-color: var(--_four-color-active-indicator-three-color);
-    }
-    65% {
-      border-top-color: var(--_four-color-active-indicator-three-color);
-      border-right-color: var(--_four-color-active-indicator-three-color);
-    }
-    75% {
-      border-top-color: var(--_four-color-active-indicator-four-color);
-      border-right-color: var(--_four-color-active-indicator-four-color);
-    }
-    90% {
-      border-top-color: var(--_four-color-active-indicator-four-color);
-      border-right-color: var(--_four-color-active-indicator-four-color);
-    }
-    100% {
-      border-top-color: var(--_four-color-active-indicator-one-color);
-      border-right-color: var(--_four-color-active-indicator-one-color);
-    }
-  }
-}

package/circularprogress/lib/circular-progress-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_active-indicator-color: var(--md-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 8.3333333333);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;min-block-size:var(--_size);min-inline-size:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.circular-progress{flex:1;align-self:stretch;margin:4px}.circular-progress,.spinner,.left,.right,.circle,svg,.track,.progress{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.progress{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.circular-progress.indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media screen and (forced-colors: active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}/*# sourceMappingURL=circular-progress-styles.css.map */
-`;
-//# sourceMappingURL=circular-progress-styles.css.js.map

package/circularprogress/lib/circular-progress-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"circular-progress-styles.css.js","sourceRoot":"","sources":["circular-progress-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 8.3333333333);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;min-block-size:var(--_size);min-inline-size:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.circular-progress{flex:1;align-self:stretch;margin:4px}.circular-progress,.spinner,.left,.right,.circle,svg,.track,.progress{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.progress{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.circular-progress.indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media screen and (forced-colors: active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}/*# sourceMappingURL=circular-progress-styles.css.map */\n`;\n "]}

package/circularprogress/lib/circular-progress.d.ts

@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement } from 'lit';
-/**
- * A circular progress component.
- */
-export declare class CircularProgress extends LitElement {
-    /**
-     * Progress to display, a fraction between 0 and 1.
-     */
-    progress: number;
-    /**
-     * Whether or not to display an animated spinner representing indeterminate
-     * progress.
-     */
-    indeterminate: boolean;
-    /**
-     * Whether or not to render indeterminate mode using 4 colors instead of one.
-     */
-    fourColor: boolean;
-    protected render(): import("lit-html").TemplateResult<1>;
-    private renderDeterminateContainer;
-    private renderIndeterminateContainer;
-}

package/circularprogress/lib/circular-progress.js

@@ -1,94 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-/**
- * A circular progress component.
- */
-export class CircularProgress extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Progress to display, a fraction between 0 and 1.
-         */
-        this.progress = 0;
-        /**
-         * Whether or not to display an animated spinner representing indeterminate
-         * progress.
-         */
-        this.indeterminate = false;
-        /**
-         * Whether or not to render indeterminate mode using 4 colors instead of one.
-         */
-        this.fourColor = false;
-    }
-    render() {
-        const classes = {
-            'indeterminate': this.indeterminate,
-            'four-color': this.fourColor
-        };
-        // Needed for closure conformance
-        const { ariaLabel } = this;
-        return html `
-      <div
-        class="circular-progress ${classMap(classes)}"
-        role="progressbar"
-        aria-label="${ariaLabel || nothing}"
-        aria-valuemin="0"
-        aria-valuemax="1"
-        aria-valuenow="${this.indeterminate ? nothing : this.progress}">
-        ${this.indeterminate ? this.renderIndeterminateContainer() :
-            this.renderDeterminateContainer()}
-      </div>
-      <slot></slot>`;
-    }
-    // Determinate mode is rendered with an svg so the progress arc can be
-    // easily animated via stroke-dashoffset.
-    renderDeterminateContainer() {
-        const dashOffset = (1 - this.progress) * 100;
-        // note, dash-array/offset are relative to Setting `pathLength` but
-        // Chrome seems to render this inaccurately and using a large viewbox helps.
-        const pathLength = 100;
-        return html `<svg viewBox="0 0 4800 4800">
-      <circle class="track" pathLength="${pathLength}"></circle>
-      <circle class="progress" pathLength="${pathLength}" stroke-dashoffset="${dashOffset}"></circle>
-    </svg>`;
-    }
-    // Indeterminate mode rendered with 2 bordered-divs. The borders are
-    // clipped into half circles by their containers. The divs are then carefully
-    // animated to produce changes to the spinner arc size.
-    // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
-    // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
-    renderIndeterminateContainer() {
-        return html `
-      <div class="spinner">
-        <div class="left">
-          <div class="circle"></div>
-        </div>
-        <div class="right">
-          <div class="circle"></div>
-        </div>
-      </div>`;
-    }
-}
-_a = CircularProgress;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-__decorate([
-    property({ type: Number })
-], CircularProgress.prototype, "progress", void 0);
-__decorate([
-    property({ type: Boolean })
-], CircularProgress.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'four-color' })
-], CircularProgress.prototype, "fourColor", void 0);
-//# sourceMappingURL=circular-progress.js.map

package/circularprogress/lib/circular-progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["circular-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAKE;;WAEG;QACuB,aAAQ,GAAG,CAAC,CAAC;QAEvC;;;WAGG;QACwB,kBAAa,GAAG,KAAK,CAAC;QAEjD;;WAEG;QACiD,cAAS,GAAG,KAAK,CAAC;IAuDxE,CAAC;IArDoB,MAAM;QACvB,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI,CAAC,aAAa;YACnC,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;QAEF,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;mCAEoB,QAAQ,CAAC,OAAO,CAAC;;sBAE9B,SAAS,IAAI,OAAO;;;yBAGjB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;UAE7D,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,0BAA0B,EAAE;;oBAE1C,CAAC;IACnB,CAAC;IAED,sEAAsE;IACtE,yCAAyC;IACjC,0BAA0B;QAChC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;QAC7C,mEAAmE;QACnE,4EAA4E;QAC5E,MAAM,UAAU,GAAG,GAAG,CAAC;QACvB,OAAO,IAAI,CAAA;0CAC2B,UAAU;6CACP,UAAU,wBAC/C,UAAU;WACP,CAAC;IACV,CAAC;IAED,oEAAoE;IACpE,6EAA6E;IAC7E,uDAAuD;IACvD,qEAAqE;IACrE,yEAAyE;IACjE,4BAA4B;QAClC,OAAO,IAAI,CAAA;;;;;;;;aAQF,CAAC;IACZ,CAAC;CACF;;AAzEC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAKyB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDAAc;AAMZ;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uDAAuB;AAKG;IAAnD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;mDAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A circular progress component.\n */\nexport class CircularProgress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Progress to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) progress = 0;\n\n  /**\n   * Whether or not to display an animated spinner representing indeterminate\n   * progress.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   */\n  @property({type: Boolean, attribute: 'four-color'}) fourColor = false;\n\n  protected override render() {\n    const classes = {\n      'indeterminate': this.indeterminate,\n      'four-color': this.fourColor\n    };\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"circular-progress ${classMap(classes)}\"\n        role=\"progressbar\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"1\"\n        aria-valuenow=\"${this.indeterminate ? nothing : this.progress}\">\n        ${\n        this.indeterminate ? this.renderIndeterminateContainer() :\n                             this.renderDeterminateContainer()}\n      </div>\n      <slot></slot>`;\n  }\n\n  // Determinate mode is rendered with an svg so the progress arc can be\n  // easily animated via stroke-dashoffset.\n  private renderDeterminateContainer() {\n    const dashOffset = (1 - this.progress) * 100;\n    // note, dash-array/offset are relative to Setting `pathLength` but\n    // Chrome seems to render this inaccurately and using a large viewbox helps.\n    const pathLength = 100;\n    return html`<svg viewBox=\"0 0 4800 4800\">\n      <circle class=\"track\" pathLength=\"${pathLength}\"></circle>\n      <circle class=\"progress\" pathLength=\"${pathLength}\" stroke-dashoffset=\"${\n        dashOffset}\"></circle>\n    </svg>`;\n  }\n\n  // Indeterminate mode rendered with 2 bordered-divs. The borders are\n  // clipped into half circles by their containers. The divs are then carefully\n  // animated to produce changes to the spinner arc size.\n  // This approach has 4.5x the FPS of rendering via svg on Chrome 111.\n  // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.\n  private renderIndeterminateContainer() {\n    return html`\n      <div class=\"spinner\">\n        <div class=\"left\">\n          <div class=\"circle\"></div>\n        </div>\n        <div class=\"right\">\n          <div class=\"circle\"></div>\n        </div>\n      </div>`;\n  }\n}\n"]}