@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/field/lib/_outlined-field.scss

@@ -1,313 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-
-@mixin theme($tokens) {
-  $supported-tokens: list.join(
-    tokens.$md-comp-outlined-field-supported-tokens,
-    (
-      'container-shape-start-start',
-      'container-shape-start-end',
-      'container-shape-end-end',
-      'container-shape-end-start'
-    )
-  );
-
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-outlined-field-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-outlined-field-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-field-#{$token}, #{$value});
-    }
-
-    // Support logical shape properties
-    --_container-shape-start-start: var(
-      --md-outlined-field-container-shape-start-start,
-      var(--_container-shape)
-    );
-    --_container-shape-start-end: var(
-      --md-outlined-field-container-shape-start-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-end: var(
-      --md-outlined-field-container-shape-end-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-start: var(
-      --md-outlined-field-container-shape-end-start,
-      var(--_container-shape)
-    );
-  }
-
-  .outline {
-    border-color: var(--_outline-color);
-    border-radius: inherit;
-    color: var(--_outline-color); // Needed for Firefox HCM
-    display: flex;
-    // Allow events to target elements underneath the outline, such as icons.
-    pointer-events: none;
-    height: 100%;
-    position: absolute;
-    width: 100%;
-  }
-
-  .outline-start,
-  .outline-panel-inactive,
-  .outline-panel-active,
-  .outline-end {
-    // ::before is inactive border, ::after is active border. Borders are
-    // absolutely positioned within their elements.
-    &::before,
-    &::after {
-      border: inherit;
-      content: '';
-      inset: 0;
-      position: absolute;
-    }
-  }
-
-  .outline-start,
-  .outline-end {
-    border: inherit;
-    border-radius: inherit;
-    box-sizing: border-box;
-    position: relative;
-
-    &::before,
-    &::after {
-      border-bottom-style: solid;
-      border-top-style: solid;
-    }
-
-    &::after {
-      opacity: 0;
-      transition: opacity map.get($_md-sys-motion, 'duration-short3')
-        map.get($_md-sys-motion, 'easing-emphasized');
-    }
-  }
-
-  .focused .outline-start::after,
-  .focused .outline-end::after {
-    opacity: 1;
-  }
-
-  .outline-start {
-    &::before,
-    &::after {
-      border-inline-start-style: solid;
-      border-inline-end-style: none;
-      border-start-start-radius: inherit;
-      border-start-end-radius: 0;
-      border-end-start-radius: inherit;
-      border-end-end-radius: 0;
-      margin-inline-end: var(--_outline-label-padding);
-    }
-  }
-
-  .outline-end {
-    flex-grow: 1;
-    margin-inline-start: calc(-1 * var(--_outline-label-padding));
-
-    &::before,
-    &::after {
-      border-inline-start-style: none;
-      border-inline-end-style: solid;
-      border-start-start-radius: 0;
-      border-start-end-radius: inherit;
-      border-end-start-radius: 0;
-      border-end-end-radius: inherit;
-    }
-  }
-
-  .outline-notch {
-    align-items: flex-start;
-    border: inherit;
-    display: flex;
-    margin-inline-start: calc(-1 * var(--_outline-label-padding));
-    margin-inline-end: var(--_outline-label-padding);
-    max-width: calc(100% - 2 * var(--_container-padding-horizontal));
-    padding: 0 var(--_outline-label-padding);
-    position: relative;
-  }
-
-  .no-label .outline-notch {
-    display: none;
-  }
-
-  .outline-panel-inactive,
-  .outline-panel-active {
-    border: inherit;
-    border-bottom-style: solid;
-    inset: 0;
-    position: absolute;
-
-    &::before,
-    &::after {
-      border-top-style: solid;
-      border-bottom: none;
-      bottom: auto;
-      transform: scaleX(1);
-      transition: transform map.get($_md-sys-motion, 'duration-short3')
-        map.get($_md-sys-motion, 'easing-emphasized');
-    }
-
-    // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
-    // ok, we just need one to be left and one to be right.
-    &::before {
-      right: 50%;
-      transform-origin: top left;
-    }
-
-    &::after {
-      left: 50%;
-      transform-origin: top right;
-    }
-  }
-
-  .populated .outline-panel-inactive,
-  .populated .outline-panel-active,
-  .focused .outline-panel-inactive,
-  .focused .outline-panel-active {
-    &::before,
-    &::after {
-      transform: scaleX(0);
-    }
-  }
-
-  .outline-panel-active {
-    opacity: 0;
-    transition: opacity map.get($_md-sys-motion, 'duration-short3')
-      map.get($_md-sys-motion, 'easing-emphasized');
-  }
-
-  .focused .outline-panel-active {
-    opacity: 1;
-  }
-
-  .outline-label {
-    display: flex;
-    max-width: 100%;
-    // Center the floating label within the outline stroke
-    transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
-  }
-
-  // Add padding that will grow to compensate for the outline's shape.
-  // This is needed to prevent the outline border from clipping with the label
-  // and is mirrored in the container padding to align the content and resting
-  // label with the adjusted floating label.
-  $shape-start: max(
-    var(--_container-shape-start-start),
-    var(--_container-shape-end-start)
-  );
-  $shape-end: max(
-    var(--_container-shape-start-end),
-    var(--_container-shape-end-end)
-  );
-
-  .outline-start,
-  .field:not(.with-start) .start {
-    padding-inline-start: max(
-      var(--_container-padding-horizontal),
-      $shape-start + var(--_outline-label-padding)
-    );
-  }
-
-  .field:not(.with-end) .end {
-    padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
-  }
-
-  .outline-start::before,
-  .outline-end::before,
-  .outline-panel-inactive,
-  .outline-panel-inactive::before,
-  .outline-panel-inactive::after {
-    border-width: var(--_outline-width);
-  }
-
-  // States
-
-  :hover .outline {
-    border-color: var(--_hover-outline-color);
-    color: var(--_hover-outline-color); // Needed for Firefox HCM
-  }
-
-  :hover .outline-start::before,
-  :hover .outline-end::before,
-  :hover .outline-panel-inactive,
-  :hover .outline-panel-inactive::before,
-  :hover .outline-panel-inactive::after {
-    border-width: var(--_hover-outline-width);
-  }
-
-  .focused .outline {
-    border-color: var(--_focus-outline-color);
-    color: var(--_focus-outline-color); // Needed for Firefox HCM
-  }
-
-  .outline-start::after,
-  .outline-end::after,
-  .outline-panel-active,
-  .outline-panel-active::before,
-  .outline-panel-active::after {
-    border-width: var(--_focus-outline-width);
-  }
-
-  .disabled .outline {
-    border-color: var(--_disabled-outline-color);
-    color: var(--_disabled-outline-color); // Needed for Firefox HCM
-  }
-
-  .disabled .outline-start,
-  .disabled .outline-end,
-  .disabled .outline-panel-inactive {
-    opacity: var(--_disabled-outline-opacity);
-  }
-
-  .disabled .outline-start::before,
-  .disabled .outline-end::before,
-  .disabled .outline-panel-inactive,
-  .disabled .outline-panel-inactive::before,
-  .disabled .outline-panel-inactive::after {
-    border-width: var(--_disabled-outline-width);
-  }
-
-  .error .outline {
-    border-color: var(--_error-outline-color);
-    color: var(--_error-outline-color); // Needed for Firefox HCM
-  }
-
-  .error:hover .outline {
-    border-color: var(--_error-hover-outline-color);
-    // Needed for Firefox HCM
-    color: var(--_error-hover-outline-color);
-  }
-
-  .error.focused .outline {
-    border-color: var(--_error-focus-outline-color);
-    // Needed for Firefox HCM
-    color: var(--_error-focus-outline-color);
-  }
-}

package/field/lib/_shared.scss

@@ -1,65 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use './content';
-@use './label';
-@use './supporting-text';
-// go/keep-sorted end
-
-@mixin styles() {
-  :host {
-    display: inline-flex;
-  }
-
-  .field {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    // Allow the use of block/inline reflexive RTL properties without impacting
-    // structure when languages change.
-    writing-mode: horizontal-tb;
-    max-width: 100%; // Do not allow field to grow beyond explicitly set width
-  }
-
-  // A separate wrapper is needed around the container for the outline, whose
-  // floating label needs overflow: visible. The container itself needs
-  // overflow: hidden for resizability.
-  .container-overflow {
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    display: flex;
-    position: relative;
-  }
-
-  .container {
-    align-items: center;
-    border-radius: inherit;
-    display: flex;
-    flex: 1;
-    min-width: min-content;
-    overflow: hidden;
-    padding-top: var(--_container-padding-vertical);
-    padding-bottom: var(--_container-padding-vertical);
-    position: relative;
-  }
-
-  .resizable .container {
-    resize: both;
-  }
-
-  .disabled {
-    pointer-events: none;
-  }
-
-  @include content.styles;
-  @include label.styles;
-  @include supporting-text.styles;
-}

package/field/lib/_supporting-text.scss

@@ -1,56 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@mixin styles() {
-  .supporting-text {
-    color: var(--_supporting-text-color);
-    display: flex;
-    justify-content: space-between;
-    padding: 0 var(--_supporting-text-padding);
-    font: var(--_supporting-text-type);
-  }
-
-  .supporting-text-start,
-  .supporting-text-end {
-    // Can't be an inline display element (<span>) for padding-top to work.
-    display: flex;
-  }
-
-  .supporting-text-start ::slotted(:not(:empty)),
-  .supporting-text-end ::slotted(:not(:empty)) {
-    // Add padding to slotted elements instead of the wrappers so that it does not
-    // show when the supporting text is empty.
-    padding-top: var(--_supporting-text-padding-top);
-  }
-
-  .supporting-text-end ::slotted(:not(:empty)) {
-    padding-inline-start: var(--_supporting-text-padding);
-  }
-
-  :hover .supporting-text {
-    color: var(--_hover-supporting-text-color);
-  }
-
-  .focus .supporting-text {
-    color: var(--_focus-supporting-text-color);
-  }
-
-  .disabled .supporting-text {
-    color: var(--_disabled-supporting-text-color);
-    opacity: var(--_disabled-supporting-text-opacity);
-  }
-
-  .error .supporting-text {
-    color: var(--_error-supporting-text-color);
-  }
-
-  .error:hover .supporting-text {
-    color: var(--_error-hover-supporting-text-color);
-  }
-
-  .error.focus .supporting-text {
-    color: var(--_error-focus-supporting-text-color);
-  }
-}

package/field/lib/field.d.ts

@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { SurfacePositionTarget } from '../../menu/lib/surfacePositionController.js';
-/**
- * A field component.
- */
-export declare class Field extends LitElement implements SurfacePositionTarget {
-    disabled: boolean;
-    error: boolean;
-    focused: boolean;
-    label?: string;
-    populated: boolean;
-    resizable: boolean;
-    required: boolean;
-    /**
-     * Whether or not the field has leading content.
-     */
-    hasStart: boolean;
-    /**
-     * Whether or not the field has trailing content.
-     */
-    hasEnd: boolean;
-    private isAnimating;
-    private labelAnimation?;
-    private readonly floatingLabelEl;
-    private readonly restingLabelEl;
-    private readonly containerEl;
-    protected update(props: PropertyValues<Field>): void;
-    protected render(): TemplateResult<1>;
-    protected renderBackground?(): TemplateResult;
-    protected renderIndicator?(): TemplateResult;
-    protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;
-    private renderLabel;
-    private animateLabelIfNeeded;
-    private getLabelKeyframes;
-    getSurfacePositionClientRect(): DOMRect;
-}

package/field/lib/field.js

@@ -1,236 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { EASING } from '../../internal/motion/animation.js';
-/**
- * A field component.
- */
-export class Field extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.error = false;
-        this.focused = false;
-        this.populated = false;
-        this.resizable = false;
-        this.required = false;
-        /**
-         * Whether or not the field has leading content.
-         */
-        this.hasStart = false;
-        /**
-         * Whether or not the field has trailing content.
-         */
-        this.hasEnd = false;
-        this.isAnimating = false;
-    }
-    update(props) {
-        // Client-side property updates
-        // When disabling, remove focus styles if focused.
-        if (this.disabled && this.focused) {
-            props.set('focused', true);
-            this.focused = false;
-        }
-        // Animate if focused or populated change.
-        this.animateLabelIfNeeded({
-            wasFocused: props.get('focused'),
-            wasPopulated: props.get('populated')
-        });
-        super.update(props);
-    }
-    render() {
-        const floatingLabel = this.renderLabel(/*isFloating*/ true);
-        const restingLabel = this.renderLabel(/*isFloating*/ false);
-        const outline = this.renderOutline?.(floatingLabel);
-        const classes = {
-            'disabled': this.disabled,
-            'error': this.error && !this.disabled,
-            'focused': this.focused,
-            'with-start': this.hasStart,
-            'with-end': this.hasEnd,
-            'populated': this.populated,
-            'resizable': this.resizable,
-            'required': this.required,
-            'no-label': !this.label,
-        };
-        return html `
-      <div class="field ${classMap(classes)}">
-        <div class="container-overflow">
-          ${outline}
-          ${this.renderBackground?.()}
-          ${this.renderIndicator?.()}
-          <div class="container">
-            <div class="start">
-              <slot name="start"></slot>
-            </div>
-            <div class="middle">
-              ${restingLabel}
-              ${outline ? nothing : floatingLabel}
-              <div class="content">
-                <slot></slot>
-              </div>
-            </div>
-            <div class="end">
-              <slot name="end"></slot>
-            </div>
-          </div>
-        </div>
-
-        <div class="supporting-text">
-          <div class="supporting-text-start">
-            <slot name="supporting-text"></slot>
-          </div>
-          <div class="supporting-text-end">
-            <slot name="supporting-text-end"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    renderLabel(isFloating) {
-        let visible;
-        if (isFloating) {
-            // Floating label is visible when focused/populated or when animating.
-            visible = this.focused || this.populated || this.isAnimating;
-        }
-        else {
-            // Resting label is visible when unfocused. It is never visible while
-            // animating.
-            visible = !this.focused && !this.populated && !this.isAnimating;
-        }
-        const classes = {
-            'hidden': !visible,
-            'floating': isFloating,
-            'resting': !isFloating,
-        };
-        let labelText = this.label ?? '';
-        // Add '*' if a label is present and the field is required
-        labelText += this.required && labelText ? '*' : '';
-        return html `
-      <span class="label ${classMap(classes)}"
-        aria-hidden=${!visible}
-      >${labelText}</span>
-    `;
-    }
-    animateLabelIfNeeded({ wasFocused, wasPopulated }) {
-        if (!this.label) {
-            return;
-        }
-        wasFocused ?? (wasFocused = this.focused);
-        wasPopulated ?? (wasPopulated = this.populated);
-        const wasFloating = wasFocused || wasPopulated;
-        const shouldBeFloating = this.focused || this.populated;
-        if (wasFloating === shouldBeFloating) {
-            return;
-        }
-        this.isAnimating = true;
-        this.labelAnimation?.cancel();
-        // Only one label is visible at a time for clearer text rendering.
-        // The floating label is visible and used during animation. At the end of
-        // the animation, it will either remain visible (if floating) or hide and
-        // the resting label will be shown.
-        //
-        // We don't use forward filling because if the dimensions of the text field
-        // change (leading icon removed, density changes, etc), then the animation
-        // will be inaccurate.
-        //
-        // Re-calculating the animation each time will prevent any visual glitches
-        // from appearing.
-        // TODO(b/241113345): use animation tokens
-        this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD });
-        this.labelAnimation?.addEventListener('finish', () => {
-            // At the end of the animation, update the visible label.
-            this.isAnimating = false;
-        });
-    }
-    getLabelKeyframes() {
-        const { floatingLabelEl, restingLabelEl } = this;
-        if (!floatingLabelEl || !restingLabelEl) {
-            return [];
-        }
-        const { x: floatingX, y: floatingY, height: floatingHeight } = floatingLabelEl.getBoundingClientRect();
-        const { x: restingX, y: restingY, height: restingHeight } = restingLabelEl.getBoundingClientRect();
-        const floatingScrollWidth = floatingLabelEl.scrollWidth;
-        const restingScrollWidth = restingLabelEl.scrollWidth;
-        // Scale by width ratio instead of font size since letter-spacing will scale
-        // incorrectly. Using the width we can better approximate the adjusted
-        // scale and compensate for tracking and overflow.
-        // (use scrollWidth instead of width to account for clipped labels)
-        const scale = restingScrollWidth / floatingScrollWidth;
-        const xDelta = restingX - floatingX;
-        // The line-height of the resting and floating label are different. When
-        // we move the floating label down to the resting label's position, it won't
-        // exactly match because of this. We need to adjust by half of what the
-        // final scaled floating label's height will be.
-        const yDelta = restingY - floatingY +
-            Math.round((restingHeight - floatingHeight * scale) / 2);
-        // Create the two transforms: floating to resting (using the calculations
-        // above), and resting to floating (re-setting the transform to initial
-        // values).
-        const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
-        const floatTransform = `translateX(0) translateY(0) scale(1)`;
-        // Constrain the floating labels width to a scaled percentage of the
-        // resting label's width. This will prevent long clipped labels from
-        // overflowing the container.
-        const restingClientWidth = restingLabelEl.clientWidth;
-        const isRestingClipped = restingScrollWidth > restingClientWidth;
-        const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';
-        if (this.focused || this.populated) {
-            return [
-                { transform: restTransform, width }, { transform: floatTransform, width }
-            ];
-        }
-        return [
-            { transform: floatTransform, width }, { transform: restTransform, width }
-        ];
-    }
-    getSurfacePositionClientRect() {
-        return this.containerEl.getBoundingClientRect();
-    }
-}
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "focused", void 0);
-__decorate([
-    property()
-], Field.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "populated", void 0);
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "resizable", void 0);
-__decorate([
-    property({ type: Boolean })
-], Field.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-start' })
-], Field.prototype, "hasStart", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-end' })
-], Field.prototype, "hasEnd", void 0);
-__decorate([
-    state()
-], Field.prototype, "isAnimating", void 0);
-__decorate([
-    query('.label.floating')
-], Field.prototype, "floatingLabelEl", void 0);
-__decorate([
-    query('.label.resting')
-], Field.prototype, "restingLabelEl", void 0);
-__decorate([
-    query('.container')
-], Field.prototype, "containerEl", void 0);
-//# sourceMappingURL=field.js.map