From 9872dad3133756b0464a3ad83120fb098677efda Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Mon, 13 Mar 2023 11:20:12 -0700 Subject: [PATCH] chore(chips): remove old implementation PiperOrigin-RevId: 516267179 --- README.md | 2 +- chips/action/delete-action.ts | 22 - chips/action/lib/action.ts | 163 --- chips/action/lib/constants.ts | 68 -- chips/action/lib/delete-action.ts | 71 -- chips/action/lib/events.ts | 15 - chips/action/lib/link-action.ts | 57 - chips/action/lib/presentational-action.ts | 33 - chips/action/lib/primary-action.ts | 84 -- chips/action/lib/selectable-action.ts | 64 - chips/action/lib/types.ts | 26 - chips/action/link-action.ts | 22 - chips/action/presentational-action.ts | 22 - chips/action/primary-action.ts | 22 - chips/action/selectable-action.ts | 22 - chips/chip/lib/_assist-chip-theme.scss | 99 -- chips/chip/lib/_chip-theme.scss | 1285 -------------------- chips/chip/lib/_chip.scss | 444 ------- chips/chip/lib/_filter-chip-theme.scss | 130 -- chips/chip/lib/_input-chip-theme.scss | 91 -- chips/chip/lib/_suggestion-chip-theme.scss | 92 -- chips/chip/lib/action-chip.ts | 43 - chips/chip/lib/adapter.ts | 70 -- chips/chip/lib/animationframe.ts | 68 -- chips/chip/lib/chip.ts | 98 -- chips/chip/lib/constants.ts | 47 - chips/chip/lib/foundation.ts | 318 ----- chips/chip/lib/link-chip.ts | 51 - chips/chip/lib/presentational-chip.ts | 43 - chips/chip/lib/selectable-chip.ts | 55 - chips/chip/lib/types.ts | 51 - chips/chipset/lib/_chip-set-theme.scss | 50 - chips/chipset/lib/_chip-set.scss | 48 - chips/chipset/lib/adapter.ts | 66 - chips/chipset/lib/constants.ts | 29 - chips/chipset/lib/foundation.ts | 396 ------ chips/chipset/lib/types.ts | 48 - 37 files changed, 1 insertion(+), 4314 deletions(-) delete mode 100644 chips/action/delete-action.ts delete mode 100644 chips/action/lib/action.ts delete mode 100644 chips/action/lib/constants.ts delete mode 100644 chips/action/lib/delete-action.ts delete mode 100644 chips/action/lib/events.ts delete mode 100644 chips/action/lib/link-action.ts delete mode 100644 chips/action/lib/presentational-action.ts delete mode 100644 chips/action/lib/primary-action.ts delete mode 100644 chips/action/lib/selectable-action.ts delete mode 100644 chips/action/lib/types.ts delete mode 100644 chips/action/link-action.ts delete mode 100644 chips/action/presentational-action.ts delete mode 100644 chips/action/primary-action.ts delete mode 100644 chips/action/selectable-action.ts delete mode 100644 chips/chip/lib/_assist-chip-theme.scss delete mode 100644 chips/chip/lib/_chip-theme.scss delete mode 100644 chips/chip/lib/_chip.scss delete mode 100644 chips/chip/lib/_filter-chip-theme.scss delete mode 100644 chips/chip/lib/_input-chip-theme.scss delete mode 100644 chips/chip/lib/_suggestion-chip-theme.scss delete mode 100644 chips/chip/lib/action-chip.ts delete mode 100644 chips/chip/lib/adapter.ts delete mode 100644 chips/chip/lib/animationframe.ts delete mode 100644 chips/chip/lib/chip.ts delete mode 100644 chips/chip/lib/constants.ts delete mode 100644 chips/chip/lib/foundation.ts delete mode 100644 chips/chip/lib/link-chip.ts delete mode 100644 chips/chip/lib/presentational-chip.ts delete mode 100644 chips/chip/lib/selectable-chip.ts delete mode 100644 chips/chip/lib/types.ts delete mode 100644 chips/chipset/lib/_chip-set-theme.scss delete mode 100644 chips/chipset/lib/_chip-set.scss delete mode 100644 chips/chipset/lib/adapter.ts delete mode 100644 chips/chipset/lib/constants.ts delete mode 100644 chips/chipset/lib/foundation.ts delete mode 100644 chips/chipset/lib/types.ts diff --git a/README.md b/README.md index eaafa4c61a..6af3295051 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ Button | ✅ | ✅ | ❌ FAB | ✅ | ❌ | ❌ Icon button | ✅ | ✅ | ❌ Checkbox | ✅ | ✅ | ❌ -Chips | ❌ | ❌ | ❌ +Chips | 🟡 | ❌ | ❌ Dialog | ✅ | ✅ | ❌ Divider | ✅ | ✅ | 🟡 Elevation | ✅ | ❌ | ❌ diff --git a/chips/action/delete-action.ts b/chips/action/delete-action.ts deleted file mode 100644 index 018698471e..0000000000 --- a/chips/action/delete-action.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; -import {DeleteAction} from './lib/delete-action.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-delete-action': MdDeleteAction; - } -} - -/** - * @soyCompatible - * @final - * @suppress {visibility} - */ -@customElement('md-delete-action') -export class MdDeleteAction extends DeleteAction {} diff --git a/chips/action/lib/action.ts b/chips/action/lib/action.ts deleted file mode 100644 index c72aecbd8b..0000000000 --- a/chips/action/lib/action.ts +++ /dev/null @@ -1,163 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../../focus/focus-ring.js'; -import '../../../ripple/ripple.js'; - -import {html, TemplateResult} from 'lit'; -import {property, query, state} from 'lit/decorators.js'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; - -import {ActionElement, BeginPressConfig, EndPressConfig} from '../../../actionelement/action-element.js'; -import {ariaProperty} from '../../../decorators/aria-property.js'; -import {pointerPress, shouldShowStrongFocus} from '../../../focus/strong-focus.js'; -import {MdRipple} from '../../../ripple/ripple.js'; - -import {Md3ChipActionEventType} from './events.js'; - -/** - * Base class for all actions. - * @soyCompatible - */ -export abstract class Action extends ActionElement { - @property({type: Boolean, reflect: true}) isDeletable = false; - - @property({type: Boolean, reflect: true}) isFocusable = false; - - @property({type: Boolean, reflect: true}) isTouchable = false; - - @property({type: Boolean, reflect: true}) disabled = false; - - @state() showFocusRing = false; - - @query('md-ripple') ripple?: MdRipple|null; - - /** @soyPrefixAttribute */ - @ariaProperty // tslint:disable-line:no-new-decorators - @property({type: String, attribute: 'aria-label'}) - override ariaLabel!: string; - - /** @soyTemplate */ - protected getRootClasses(): ClassInfo { - return { - 'md3-chip__action': true, - }; - } - - /** @soyTemplate */ - protected getRippleClasses(): ClassInfo { - return { - 'md3-chip__ripple': true, - }; - } - - /** @soyTemplate */ - protected renderTouchTarget(): TemplateResult { - return this.isTouchable ? - html`` : - html``; - } - - /** @soyTemplate */ - protected renderRipple(): TemplateResult { - return html` - - `; - } - - /** @soyTemplate */ - protected renderFocusRing(): TemplateResult { - return html` - `; - } - - protected handleFocus() { - this.showFocusRing = shouldShowStrongFocus(); - } - - protected handleBlur() { - this.showFocusRing = false; - } - - override beginPress({positionEvent}: BeginPressConfig) { - // TODO(b/253297063): connect to ripple - } - - override endPress(options: EndPressConfig) { - super.endPress(options); - // TODO(b/253297063): connect to ripple - if (!options.cancelled) { - this.dispatchCustomEvent(this.getInteractionEvent()); - } - } - - protected handlePointerEnter(e: PointerEvent) { - this.ripple?.handlePointerenter(e); - } - - override handlePointerLeave(e: PointerEvent) { - super.handlePointerLeave(e); - this.ripple?.handlePointerleave(e); - } - - override handlePointerDown(e: PointerEvent) { - super.handlePointerDown(e); - pointerPress(); - this.showFocusRing = shouldShowStrongFocus(); - } - - override handleClick(e: MouseEvent) { - super.handleClick(e); - this.dispatchCustomEvent(this.getInteractionEvent()); - } - - protected handleKeyDown(e: KeyboardEvent) { - switch (e.key) { - case 'Enter': - case ' ': - this.dispatchCustomEvent(this.getInteractionEvent()); - break; - case 'Delete': - case 'Backspace': - if (this.isDeletable) { - this.dispatchCustomEvent(Md3ChipActionEventType.DELETE); - } - break; - case 'ArrowLeft': - this.dispatchCustomEvent( - this.isRTL() ? Md3ChipActionEventType.NAVIGATE_TO_NEXT : - Md3ChipActionEventType.NAVIGATE_TO_PREV); - break; - case 'ArrowRight': - this.dispatchCustomEvent( - this.isRTL() ? Md3ChipActionEventType.NAVIGATE_TO_PREV : - Md3ChipActionEventType.NAVIGATE_TO_NEXT); - break; - case 'Home': - this.dispatchCustomEvent(Md3ChipActionEventType.NAVIGATE_TO_FIRST); - break; - case 'End': - this.dispatchCustomEvent(Md3ChipActionEventType.NAVIGATE_TO_LAST); - break; - default: - // Unhandled key, do nothing. - } - } - - protected getInteractionEvent(): string { - return Md3ChipActionEventType.SELECT; - } - - private dispatchCustomEvent(eventType: string) { - this.dispatchEvent( - new CustomEvent(eventType, {bubbles: true, composed: true})); - } - - private isRTL(): boolean { - return getComputedStyle(this).getPropertyValue('direction') === 'rtl'; - } -} diff --git a/chips/action/lib/constants.ts b/chips/action/lib/constants.ts deleted file mode 100644 index d76f7912c0..0000000000 --- a/chips/action/lib/constants.ts +++ /dev/null @@ -1,68 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -/** - * MDCChipActionCssClasses provides the classes to be queried and manipulated on - * the root. - */ -export enum MDCChipActionCssClasses { - PRIMARY_ACTION = 'md3-evolution-chip__action--primary', - TRAILING_ACTION = 'md3-evolution-chip__action--trailing', - CHIP_ROOT = 'md3-evolution-chip', -} - -/** - * MDCChipActionInteractionTrigger provides detail of the different triggers for - * action interactions. - */ -export enum MDCChipActionInteractionTrigger { - UNSPECIFIED, // Default type - CLICK, - BACKSPACE_KEY, - DELETE_KEY, - SPACEBAR_KEY, - ENTER_KEY, -} - -/** - * MDCChipActionType provides the different types of available actions. - */ -export enum MDCChipActionType { - UNSPECIFIED, // Default type - PRIMARY, - TRAILING, -} - -/** - * MDCChipActionEvents provides the different events emitted by the action. - */ -export enum MDCChipActionEvents { - INTERACTION = 'MDCChipAction:interaction', - NAVIGATION = 'MDCChipAction:navigation', -} - -/** - * MDCChipActionFocusBehavior provides configurations for focusing or unfocusing - * an action. - */ -export enum MDCChipActionFocusBehavior { - FOCUSABLE, - FOCUSABLE_AND_FOCUSED, - NOT_FOCUSABLE, -} - -/** - * MDCChipActionAttributes provides the HTML attributes used by the foundation. - */ -export enum MDCChipActionAttributes { - ARIA_DISABLED = 'aria-disabled', - ARIA_HIDDEN = 'aria-hidden', - ARIA_SELECTED = 'aria-selected', - DATA_DELETABLE = 'data-mdc-deletable', - DISABLED = 'disabled', - ROLE = 'role', - TAB_INDEX = 'tabindex', -} diff --git a/chips/action/lib/delete-action.ts b/chips/action/lib/delete-action.ts deleted file mode 100644 index bbf05c68e5..0000000000 --- a/chips/action/lib/delete-action.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; - -import {Action} from './action.js'; -import {Md3ChipActionEventType} from './events.js'; - -/** @soyCompatible */ -export class DeleteAction extends Action { - /** @soyTemplate */ - protected override render(): TemplateResult { - return html` - `; - } - - /** @soyTemplate */ - protected override getRootClasses(): ClassInfo { - return { - ...super.getRootClasses(), - 'md3-chip__action--delete': true, - }; - } - - /** @soyTemplate */ - protected override getRippleClasses(): ClassInfo { - return { - ...super.getRippleClasses(), - 'md3-chip__ripple--delete': true, - }; - } - - /** @soyTemplate */ - private renderDeleteIcon(): TemplateResult { - return html` - `; - } - - override getInteractionEvent(): string { - return Md3ChipActionEventType.DELETE; - } -} diff --git a/chips/action/lib/events.ts b/chips/action/lib/events.ts deleted file mode 100644 index 4304253cd9..0000000000 --- a/chips/action/lib/events.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -/** Events emitted by the action. */ -export enum Md3ChipActionEventType { - DELETE = 'chip-action-delete', - SELECT = 'chip-action-select', - NAVIGATE_TO_PREV = 'chip-action-navigate-to-prev', - NAVIGATE_TO_NEXT = 'chip-action-navigate-to-next', - NAVIGATE_TO_FIRST = 'chip-action-navigate-to-first', - NAVIGATE_TO_LAST = 'chip-action-navigate-to-last', -} diff --git a/chips/action/lib/link-action.ts b/chips/action/lib/link-action.ts deleted file mode 100644 index 760e5988a4..0000000000 --- a/chips/action/lib/link-action.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; - -import {EndPressConfig} from '../../../actionelement/action-element.js'; - -import {PrimaryAction} from './primary-action.js'; - -type LinkTarget = '_blank'|'_parent'|'_self'|'_top'; - -/** @soyCompatible */ -export class LinkAction extends PrimaryAction { - @property({type: String}) href!: string; - - @property({type: String}) target!: string; - - /** - * @soyTemplate - * @soyAttributes linkAttributes: .md3-chip__action - */ - protected override render(): TemplateResult { - return html` - - - ${this.renderTouchTarget()} - ${this.renderRipple()} - ${this.renderFocusRing()} - ${this.renderGraphic()} - ${this.renderLabel()} - - `; - } - - override endPress(options: EndPressConfig) { - super.endPress(options); - // TODO(b/253297063): connect to ripple - } -} diff --git a/chips/action/lib/presentational-action.ts b/chips/action/lib/presentational-action.ts deleted file mode 100644 index 0d0c109b63..0000000000 --- a/chips/action/lib/presentational-action.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; -import {PrimaryAction} from './primary-action.js'; - -/** @soyCompatible */ -export class PresentationalAction extends PrimaryAction { - - /** @soyTemplate */ - protected override render(): TemplateResult { - return html` - - ${this.renderGraphic()} - ${this.renderLabel()} - `; - } - - /** @soyTemplate */ - protected override getRootClasses(): ClassInfo { - return { - ...super.getRootClasses(), - 'md3-chip__action--presentational': true, - }; - } -} diff --git a/chips/action/lib/primary-action.ts b/chips/action/lib/primary-action.ts deleted file mode 100644 index c7c6965844..0000000000 --- a/chips/action/lib/primary-action.ts +++ /dev/null @@ -1,84 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; -import {Action} from './action.js'; - -/** - * Base class for all primary actions: Presentational, Selectable, Link - * @soyCompatible - */ -export class PrimaryAction extends Action { - @property({type: String}) label = ''; - - @property({type: String}) icon = ''; - - /** @soyTemplate */ - protected override render(): TemplateResult { - return html` - - ${this.renderTouchTarget()} - ${this.renderRipple()} - ${this.renderFocusRing()} - ${this.renderGraphic()} - ${this.renderLabel()} - `; - } - - /** @soyTemplate */ - protected override getRootClasses(): ClassInfo { - return { - ...super.getRootClasses(), - 'md3-chip__action--primary': true, - }; - } - - /** @soyTemplate */ - protected override getRippleClasses(): ClassInfo { - return { - ...super.getRippleClasses(), - 'md3-chip__ripple--primary': true, - }; - } - - /** @soyTemplate */ - protected renderGraphic(): TemplateResult { - return this.icon ? html` - - ${this.renderIcon()} - ` : html``; - } - - /** @soyTemplate */ - protected renderIcon(): TemplateResult { - return html` - - ${this.icon} - `; - } - - /** @soyTemplate */ - protected renderLabel(): TemplateResult { - return html`${this.label}`; - } -} diff --git a/chips/action/lib/selectable-action.ts b/chips/action/lib/selectable-action.ts deleted file mode 100644 index 5e7f3799a5..0000000000 --- a/chips/action/lib/selectable-action.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; - -import {property} from 'lit/decorators.js'; -import {classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; -import {PrimaryAction} from './primary-action.js'; - -/** @soyCompatible */ -export class SelectableAction extends PrimaryAction { - @property({type: Boolean, reflect: true}) selected = false; - - /** @soyTemplate */ - protected override render(): TemplateResult { - return html` - - ${this.renderTouchTarget()} - ${this.renderRipple()} - ${this.renderFocusRing()} - ${this.renderGraphic()} - ${this.renderLabel()} - `; - } - - /** @soyTemplate */ - protected override renderGraphic(): TemplateResult { - return html` - - ${this.icon ? this.renderIcon() : ''} - ${this.renderCheckMark()} - `; - } - - /** @soyTemplate */ - private renderCheckMark(): TemplateResult { - return html` - - - - - `; - } -} diff --git a/chips/action/lib/types.ts b/chips/action/lib/types.ts deleted file mode 100644 index 6a3c3c1c28..0000000000 --- a/chips/action/lib/types.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionInteractionTrigger, MDCChipActionType} from './constants.js'; - -/** - * MDCChipActionInteractionEventDetail provides the details for the interaction - * event. - */ -export interface MDCChipActionInteractionEventDetail { - actionID: string; - source: MDCChipActionType; - trigger: MDCChipActionInteractionTrigger; -} - -/** - * MDCChipActionNavigationEventDetail provides the details for the navigation - * event. - */ -export interface MDCChipActionNavigationEventDetail { - source: MDCChipActionType; - key: string; -} diff --git a/chips/action/link-action.ts b/chips/action/link-action.ts deleted file mode 100644 index ab002c2af3..0000000000 --- a/chips/action/link-action.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; -import {LinkAction} from './lib/link-action.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-link-action': MdLinkAction; - } -} - -/** - * @soyCompatible - * @final - * @suppress {visibility} - */ -@customElement('md-link-action') -export class MdLinkAction extends LinkAction {} diff --git a/chips/action/presentational-action.ts b/chips/action/presentational-action.ts deleted file mode 100644 index 9f89d39c22..0000000000 --- a/chips/action/presentational-action.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; -import {PresentationalAction} from './lib/presentational-action.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-presentational-action': MdPresentationalAction; - } -} - -/** - * @soyCompatible - * @final - * @suppress {visibility} - */ -@customElement('md-presentational-action') -export class MdPresentationalAction extends PresentationalAction {} diff --git a/chips/action/primary-action.ts b/chips/action/primary-action.ts deleted file mode 100644 index a419ae8661..0000000000 --- a/chips/action/primary-action.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; -import {PrimaryAction} from './lib/primary-action.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-primary-action': MdPrimaryAction; - } -} - -/** - * @soyCompatible - * @final - * @suppress {visibility} - */ -@customElement('md-primary-action') -export class MdPrimaryAction extends PrimaryAction {} diff --git a/chips/action/selectable-action.ts b/chips/action/selectable-action.ts deleted file mode 100644 index 554bfa4e21..0000000000 --- a/chips/action/selectable-action.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; -import {SelectableAction} from './lib/selectable-action.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-selectable-action': MdSelectableAction; - } -} - -/** - * @soyCompatible - * @final - * @suppress {visibility} - */ -@customElement('md-selectable-action') -export class MdSelectableAction extends SelectableAction {} diff --git a/chips/chip/lib/_assist-chip-theme.scss b/chips/chip/lib/_assist-chip-theme.scss deleted file mode 100644 index fce2cc2c36..0000000000 --- a/chips/chip/lib/_assist-chip-theme.scss +++ /dev/null @@ -1,99 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use 'sass:map'; -// go/keep-sorted end -// go/keep-sorted start -@use '../../../sass/resolvers'; -@use '../../../sass/theme'; -@use './chip-theme'; -// go/keep-sorted end - -$_light-theme: ( - container-shape: null, - container-height: null, - flat-container-elevation: null, - flat-outline-color: null, - flat-outline-width: null, - elevated-container-elevation: null, - elevated-container-color: null, - elevated-container-shadow-color: null, - container-surface-tint-layer-color: null, - label-text-font: null, - label-text-line-height: null, - label-text-size: null, - label-text-weight: null, - label-text-tracking: null, - label-text-color: null, - with-icon-icon-size: null, - with-icon-icon-color: null, - flat-disabled-outline-color: null, - flat-disabled-outline-opacity: null, - disabled-label-text-color: null, - disabled-label-text-opacity: null, - with-icon-disabled-icon-color: null, - with-icon-disabled-icon-opacity: null, - elevated-disabled-container-elevation: null, - elevated-disabled-container-color: null, - elevated-disabled-container-opacity: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - hover-label-text-color: null, - with-icon-hover-icon-color: null, - elevated-hover-container-elevation: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - focus-label-text-color: null, - flat-focus-outline-color: null, - with-icon-focus-icon-color: null, - elevated-focus-container-elevation: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - pressed-label-text-color: null, - with-icon-pressed-icon-color: null, - elevated-pressed-container-elevation: null, -); - -$_custom-property-prefix: 'assist-chip'; - -@mixin theme($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - - // Resolve elevation. - @each $key - in ( - flat-container-elevation, - elevated-container-elevation, - elevated-disabled-container-elevation, - elevated-hover-container-elevation, - elevated-focus-container-elevation, - elevated-pressed-container-elevation - ) - { - $value: map.get($theme, $key); - @if $value { - $theme: map.set( - $theme, - $key, - meta.call( - $elevation-resolver: map.get($resolvers, elevation), - $elevation: $value, - $shadow-color: map.get($theme, elevated-container-shadow-color), - ) - ); - } - } - - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include theme.emit-theme-vars($theme); -} - -@mixin theme-styles($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include chip-theme.theme-styles($theme, $resolvers: $resolvers); -} diff --git a/chips/chip/lib/_chip-theme.scss b/chips/chip/lib/_chip-theme.scss deleted file mode 100644 index 1992023c15..0000000000 --- a/chips/chip/lib/_chip-theme.scss +++ /dev/null @@ -1,1285 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// Selector '.md3-*' should only be used in this project. -// stylelint-disable selector-class-pattern -- -// Internal styling for Chip MDC component. - -// go/keep-sorted start -@use 'sass:color'; -@use 'sass:map'; -@use 'sass:math'; -// go/keep-sorted end -// go/keep-sorted start -@use '../../../elevation/lib/elevation'; -@use '../../../ripple/ripple'; -@use '../../../sass/dom'; -@use '../../../sass/resolvers'; -@use '../../../sass/theme'; -@use '../../../sass/typography'; -// TODO(b/240224981): Uncomment when styles are traslated to md3 shape. -// @use '../../../sass/shape'; -// go/keep-sorted end - -$height: 32px; -$minimum-height: 24px; -$maximum-height: $height; -$density-scale: 0; -$density-config: ( - height: ( - default: $height, - maximum: $maximum-height, - minimum: $minimum-height, - ), -); -$radius: math.div($height, 2); -$type-scale: body2; -$container-color: color.mix(#000, #fff, 12%); -$text-label-color: rgba(#000, 0.87); -$icon-color: rgba(#000, 0.87); -$checkmark-color: rgba(#000, 0.87); -$delete-action-color: rgba(#000, 0.87); -$ripple-color: on-surface; -$checkmark-size: 20px; -$leading-icon-size: 20px; -$delete-action-size: 18px; -$leading-padding: 12px; -$trailing-padding: 12px; -$avatar-size: 24px; -$avatar-leading-padding: 4px; -$avatar-trailing-padding: 8px; -$graphic-leading-padding: 6px; -$graphic-trailing-padding: 6px; -$delete-action-leading-padding: 8px; -$delete-action-trailing-padding: 8px; -$ripple-target: '.md3-chip__ripple'; -$ripple-target-primary: '.md3-chip__ripple--primary'; -$ripple-target-delete: '.md3-chip__ripple--delete'; - -// Filter chip colors -$filter-selected-container-color: color.mix(#000, $container-color, 8%); - -$_light-theme: ( - container-elevation: null, - container-height: null, - container-shadow-color: null, - container-shape: null, - disabled-label-text-color: null, - disabled-label-text-opacity: null, - disabled-outline-color: null, - disabled-outline-opacity: null, - elevated-container-color: null, - elevated-container-elevation: null, - elevated-container-shadow-color: null, - container-surface-tint-layer-color: null, - elevated-disabled-container-color: null, - elevated-disabled-container-elevation: null, - elevated-disabled-container-opacity: null, - elevated-focus-container-elevation: null, - elevated-hover-container-elevation: null, - elevated-pressed-container-elevation: null, - elevated-selected-container-color: null, - elevated-selected-container-elevation: null, - elevated-unselected-container-color: null, - flat-container-elevation: null, - flat-disabled-outline-color: null, - flat-disabled-outline-opacity: null, - flat-disabled-selected-outline-color: null, - flat-disabled-selected-outline-opacity: null, - flat-disabled-unselected-outline-color: null, - flat-disabled-unselected-outline-opacity: null, - flat-focus-outline-color: null, - flat-outline-color: null, - flat-outline-width: null, - flat-selected-container-color: null, - flat-selected-focus-container-elevation: null, - flat-selected-hover-container-elevation: null, - flat-selected-outline-color: null, - flat-selected-outline-width: null, - flat-selected-pressed-container-elevation: null, - flat-unselected-focus-container-elevation: null, - flat-unselected-focus-outline-color: null, - flat-unselected-hover-container-elevation: null, - flat-unselected-outline-color: null, - flat-unselected-outline-width: null, - flat-unselected-pressed-container-elevation: null, - focus-label-text-color: null, - focus-outline-color: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - hover-label-text-color: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - label-text-color: null, - label-text-font: null, - label-text-line-height: null, - label-text-size: null, - label-text-tracking: null, - label-text-weight: null, - outline-color: null, - outline-width: null, - pressed-label-text-color: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - selected-focus-label-text-color: null, - selected-focus-state-layer-color: null, - selected-focus-state-layer-opacity: null, - selected-hover-label-text-color: null, - selected-hover-state-layer-color: null, - selected-hover-state-layer-opacity: null, - selected-label-text-color: null, - selected-pressed-label-text-color: null, - selected-pressed-state-layer-color: null, - selected-pressed-state-layer-opacity: null, - unselected-focus-label-text-color: null, - unselected-focus-state-layer-color: null, - unselected-focus-state-layer-opacity: null, - unselected-hover-label-text-color: null, - unselected-hover-state-layer-color: null, - unselected-hover-state-layer-opacity: null, - unselected-label-text-color: null, - unselected-pressed-label-text-color: null, - unselected-pressed-state-layer-color: null, - unselected-pressed-state-layer-opacity: null, - with-avatar-avatar-shape: null, - with-avatar-avatar-size: null, - with-avatar-disabled-avatar-opacity: null, - with-icon-disabled-icon-color: null, - with-icon-disabled-icon-opacity: null, - with-icon-focus-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-icon-color: null, - with-icon-icon-size: null, - with-icon-pressed-icon-color: null, - with-icon-selected-focus-icon-color: null, - with-icon-selected-hover-icon-color: null, - with-icon-selected-icon-color: null, - with-icon-selected-pressed-icon-color: null, - with-icon-unselected-focus-icon-color: null, - with-icon-unselected-hover-icon-color: null, - with-icon-unselected-icon-color: null, - with-icon-unselected-pressed-icon-color: null, - with-leading-icon-disabled-leading-icon-color: null, - with-leading-icon-disabled-leading-icon-opacity: null, - with-leading-icon-focus-leading-icon-color: null, - with-leading-icon-hover-leading-icon-color: null, - with-leading-icon-leading-icon-color: null, - with-leading-icon-leading-icon-size: null, - with-leading-icon-pressed-leading-icon-color: null, - with-delete-icon-disabled-delete-icon-color: null, - with-delete-icon-disabled-delete-icon-opacity: null, - with-delete-icon-focus-delete-icon-color: null, - with-delete-icon-hover-delete-icon-color: null, - with-delete-icon-pressed-delete-icon-color: null, - with-delete-icon-delete-icon-color: null, - with-delete-icon-delete-icon-size: null, -); -$_custom-property-prefix: 'chip'; - -@mixin theme($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: _resolve-theme($theme, $resolvers: $resolvers); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include theme.emit-theme-vars($theme); -} - -@mixin theme-styles($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme-keys($_light-theme, $theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - - @include _container-shape(map.get($theme, container-shape)); - @include _avatar-shape(map.get($theme, with-avatar-avatar-shape)); - @include graphic-size(map.get($theme, with-avatar-avatar-size)); - @include height(map.get($theme, container-height)); - @include elevation.theme( - ( - shadow-color: map.get($theme, elevated-container-shadow-color), - surface-tint: map.get($theme, container-surface-tint-layer-color), - ) - ); - @include _container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, container-shadow-color), - $map: (default: map.get($theme, container-elevation)) - ); - @include _container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, flat-container-shadow-color), - $map: (enabled: map.get($theme, flat-container-elevation)) - ); - @include _container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, elevated-container-shadow-color), - $map: ( - enabled: map.get($theme, elevated-container-elevation), - disabled: map.get($theme, elevated-disabled-container-elevation), - hover: map.get($theme, elevated-hover-container-elevation), - focus: map.get($theme, elevated-focus-container-elevation), - pressed: map.get($theme, elevated-pressed-container-elevation) - ) - ); - @include _selected-container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, elevated-container-shadow-color), - $map: ( - enabled: map.get($theme, elevated-selected-container-elevation), - disabled: map.get($theme, elevated-selected-disabled-container-elevation), - hover: map.get($theme, elevated-selected-hover-container-elevation), - focus: map.get($theme, elevated-selected-focus-container-elevation), - pressed: map.get($theme, elevated-selected-pressed-container-elevation) - ) - ); - @include _selected-container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, elevated-container-shadow-color), - $map: ( - enabled: map.get($theme, flat-selected-container-elevation), - disabled: map.get($theme, flat-selected-disabled-container-elevation), - hover: map.get($theme, flat-selected-hover-container-elevation), - focus: map.get($theme, flat-selected-focus-container-elevation), - pressed: map.get($theme, flat-selected-pressed-container-elevation) - ) - ); - @include _unselected-container-elevation( - map.get($resolvers, elevation), - $shadow-color: map.get($theme, elevated-container-shadow-color), - $map: ( - enabled: map.get($theme, flat-unselected-container-elevation), - disabled: map.get($theme, flat-unselected-disabled-container-elevation), - hover: map.get($theme, flat-unselected-hover-container-elevation), - focus: map.get($theme, flat-unselected-focus-container-elevation), - pressed: map.get($theme, flat-unselected-pressed-container-elevation) - ) - ); - @include outline-color( - ( - enabled: map.get($theme, flat-outline-color), - focus: map.get($theme, flat-focus-outline-color), - disabled: map.get($theme, flat-disabled-outline-color), - ) - ); - @include selected-outline-color( - ( - enabled: map.get($theme, flat-selected-outline-color), - disabled: map.get($theme, flat-disabled-selected-outline-color), - ) - ); - @include _unselected-outline-color( - ( - disabled: map.get($theme, flat-disabled-unselected-outline-color), - focus: map.get($theme, flat-unselected-focus-outline-color), - enabled: map.get($theme, flat-unselected-outline-color), - ) - ); - @include outline-width(map.get($theme, outline-width)); - @include outline-width(map.get($theme, flat-outline-width)); - @include _selected-outline-width( - map.get($theme, flat-selected-outline-width) - ); - @include _unselected-outline-width( - map.get($theme, flat-unselected-outline-width) - ); - @include container-color( - ( - enabled: map.get($theme, elevated-container-color), - disabled: map.get($theme, elevated-disabled-container-color), - ) - ); - @include selected-container-color( - ( - enabled: map.get($theme, elevated-selected-container-color), - ) - ); - @include selected-container-color( - ( - enabled: map.get($theme, flat-selected-container-color), - ) - ); - @include _unselected-container-color( - ( - enabled: map.get($theme, elevated-unselected-container-color), - ) - ); - @include _label-text-typography( - ( - font: map.get($theme, label-text-font), - line-height: map.get($theme, label-text-line-height), - size: map.get($theme, label-text-size), - weight: map.get($theme, label-text-weight), - tracking: map.get($theme, label-text-tracking), - ) - ); - @include text-label-color( - ( - enabled: map.get($theme, label-text-color), - hover: map.get($theme, hover-label-text-color), - focus: map.get($theme, focus-label-text-color), - pressed: map.get($theme, pressed-label-text-color), - disabled: map.get($theme, disabled-label-text-color), - ) - ); - @include selected-text-label-color( - ( - enabled: map.get($theme, selected-label-text-color), - hover: map.get($theme, selected-hover-label-text-color), - focus: map.get($theme, selected-focus-label-text-color), - pressed: map.get($theme, selected-pressed-label-text-color), - disabled: map.get($theme, selected-disabled-label-text-color), - ) - ); - @include _unselected-text-label-color( - ( - enabled: map.get($theme, unselected-label-text-color), - hover: map.get($theme, unselected-hover-label-text-color), - focus: map.get($theme, unselected-focus-label-text-color), - pressed: map.get($theme, unselected-pressed-label-text-color), - disabled: map.get($theme, unselected-disabled-label-text-color), - ) - ); - - @include icon-size(map.get($theme, with-icon-icon-size)); - @include icon-color( - ( - enabled: map.get($theme, with-icon-icon-color), - disabled: map.get($theme, with-icon-disabled-icon-color), - hover: map.get($theme, with-icon-hover-icon-color), - focus: map.get($theme, with-icon-focus-icon-color), - pressed: map.get($theme, with-icon-pressed-icon-color), - ) - ); - @include _selected-icon-color( - ( - enabled: map.get($theme, with-icon-selected-icon-color), - disabled: map.get($theme, with-icon-selected-disabled-icon-color), - hover: map.get($theme, with-icon-selected-hover-icon-color), - focus: map.get($theme, with-icon-selected-focus-icon-color), - pressed: map.get($theme, with-icon-selected-pressed-icon-color), - ) - ); - @include _unselected-icon-color( - ( - enabled: map.get($theme, with-icon-unselected-icon-color), - disabled: map.get($theme, with-icon-unselected-disabled-icon-color), - hover: map.get($theme, with-icon-unselected-hover-icon-color), - focus: map.get($theme, with-icon-unselected-focus-icon-color), - pressed: map.get($theme, with-icon-unselected-pressed-icon-color), - ) - ); - @include icon-color( - ( - disabled: map.get($theme, with-leading-icon-disabled-leading-icon-color), - focus: map.get($theme, with-leading-icon-focus-leading-icon-color), - hover: map.get($theme, with-leading-icon-hover-leading-icon-color), - enabled: map.get($theme, with-leading-icon-leading-icon-color), - pressed: map.get($theme, with-leading-icon-pressed-leading-icon-color), - ) - ); - @include delete-action-color( - ( - disabled: map.get($theme, with-delete-icon-disabled-delete-icon-color), - focus: map.get($theme, with-delete-icon-focus-delete-icon-color), - hover: map.get($theme, with-delete-icon-hover-delete-icon-color), - enabled: map.get($theme, with-delete-icon-delete-icon-color), - pressed: map.get($theme, with-delete-icon-pressed-delete-icon-color), - ) - ); - @include _ripple-theme( - ( - focus-color: map.get($theme, focus-state-layer-color), - focus-opacity: map.get($theme, focus-state-layer-opacity), - hover-color: map.get($theme, hover-state-layer-color), - hover-opacity: map.get($theme, hover-state-layer-opacity), - pressed-color: map.get($theme, pressed-state-layer-color), - pressed-opacity: map.get($theme, pressed-state-layer-opacity), - ) - ); - @include _selected-ripple-theme( - ( - focus-color: map.get($theme, selected-focus-state-layer-color), - focus-opacity: map.get($theme, selected-focus-state-layer-opacity), - hover-color: map.get($theme, selected-hover-state-layer-color), - hover-opacity: map.get($theme, selected-hover-state-layer-opacity), - pressed-color: map.get($theme, selected-pressed-state-layer-color), - pressed-opacity: map.get($theme, selected-pressed-state-layer-opacity), - ) - ); - @include _unselected-ripple-theme( - ( - focus-color: map.get($theme, unselected-focus-state-layer-color), - focus-opacity: map.get($theme, unselected-focus-state-layer-opacity), - hover-color: map.get($theme, unselected-hover-state-layer-color), - hover-opacity: map.get($theme, unselected-hover-state-layer-opacity), - pressed-color: map.get($theme, unselected-pressed-state-layer-color), - pressed-opacity: map.get($theme, unselected-pressed-state-layer-opacity), - ) - ); -} - -@function _resolve-theme($theme, $resolvers) { - $theme: elevation.resolve-tokens( - $theme, - 'container-elevation', - 'elevated-container-elevation', - 'elevated-disabled-container-elevation', - 'elevated-focus-container-elevation', - 'elevated-hover-container-elevation', - 'elevated-pressed-container-elevation', - 'elevated-selected-container-elevation', - 'flat-container-elevation', - 'flat-selected-focus-container-elevation', - 'flat-selected-hover-container-elevation', - 'flat-selected-pressed-container-elevation', - 'flat-unselected-focus-container-elevation', - 'flat-unselected-hover-container-elevation', - 'flat-unselected-pressed-container-elevation' - ); - @return $theme; -} - -@mixin _ripple-theme($ripple-theme) { - .md3-chip__action--primary { - @include ripple.theme( - ( - focus-color: map.get($ripple-theme, focus-state-layer-color), - focus-opacity: map.get($ripple-theme, focus-state-layer-opacity), - hover-color: map.get($ripple-theme, hover-state-layer-color), - hover-opacity: map.get($ripple-theme, hover-state-layer-opacity), - pressed-color: map.get($ripple-theme, pressed-state-layer-color), - pressed-opacity: map.get($ripple-theme, pressed-state-layer-opacity), - ), - $ripple-target: $ripple-target - ); - } -} - -@mixin _selected-ripple-theme($ripple-theme) { - @include _is-selected() { - @include _ripple-theme($ripple-theme); - } -} - -@mixin _unselected-ripple-theme($ripple-theme) { - @include _is-unselected() { - @include _ripple-theme($ripple-theme); - } -} - -/// -/// Sets the ripple color of the chip. -/// @param {Color} $color - The color of the ripple. -/// @param {Map} $opacity-map [null] - The optional opacity map for the states. -/// -@mixin ripple-color($color, $opacity-map: null) { - @include _ripple-color($color, $opacity-map); -} - -/// -/// Sets the selected ripple color of the chip. -/// @param {Color} $color - The color of the ripple. -/// @param {Map} $opacity-map [null] - The optional opacity map for the states. -/// -@mixin selected-ripple-color($color, $opacity-map: null) { - &.md3-chip--selected { - @include ripple-color($color, $opacity-map); - } -} - -@mixin _ripple-color($color, $opacity-map) { - .md3-chip__action--primary { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.states( - // $color: $color, - // $opacity-map: $opacity-map, - // $ripple-target: $ripple-target - // ); - } -} - -/// -/// Sets the ripple color of the chip's delete action. -/// @param {Color} $color - The color of the ripple. -/// @param {Map} $opacity-map [null] - The optional opacity map for the states. -/// -@mixin delete-action-ripple-color($color, $opacity-map: null) { - .md3-chip__action--delete { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.states( - // $color: $color, - // $opacity-map: $opacity-map, - // $ripple-target: $ripple-target - // ); - } -} - -/// -/// Sets the size of the delete action's ripple. -/// @param {Number} $size - The size of the ripple. -/// -@mixin delete-action-ripple-size($size) { - .md3-chip__ripple--delete { - height: $size; - width: $size; - } -} - -/// -/// Sets the density scale for the chip. -/// @param {Number | String} $density-scale - Density scale value for component. -/// Supported density scale values are `-2`, `-1`, `0`. -/// -// @mixin density($density-scale) { -// $height: density.prop-value( -// $density-config: $density-config, -// $density-scale: $density-scale, -// $property-name: height, -// ); - -// @include height($height); - -// @if $density-scale != 0 { -// @include _reset-touch-target(); -// } -// } - -/// -/// Resets touch target-related styles. This is called from the density mixin to -/// automatically remove the increased touch target, since dense components -/// don't have the same default a11y requirements. -/// @access private -/// -@mixin _reset-touch-target() { - .md3-chip__action-touch { - display: none; - } -} - -/// -/// Sets custom height for the chip. -/// @param {Number} $height - The height of the chip. -/// -@mixin height($height) { - height: $height; -} - -@mixin _container-shape($radius) { - // TODO(b/240224981): Translate to md3 shape - // @include shape.radius($radius); - - #{$ripple-target} { - // TODO(b/240224981): Translate to md3 shape - // @include shape.radius($radius); - } - - .md3-chip__action--primary:before { - // TODO(b/240224981): Translate to md3 shape - // @include shape.radius($radius); - } -} - -@mixin _avatar-shape($radius) { - .md3-chip__icon--primary { - // TODO(b/240224981): Translate to md3 shape - // @include shape.radius($radius); - } -} - -/// -/// Sets the shape radius of the chip. -/// @param {Number|List} $radius - Shape radius in `border-radius` CSS format. -/// @param {Boolean} $rtl-reflexive - True flips radius corners in RTL. -/// -@mixin shape-radius( - $radius, - $rtl-reflexive: false, - $density-scale: $density-scale -) { - // $height: density.prop-value( - // $density-config: $density-config, - // $density-scale: $density-scale, - // $property-name: height, - // ); - - // TODO(b/240224981): Translate to md3 shape - // @include shape.radius( - // $radius, - // $rtl-reflexive, - // $component-height: $height, - // ); - - // #{$ripple-target} { - // @include shape.radius( - // $radius, - // $rtl-reflexive, - // $component-height: $height, - // ); - // } - - // .md3-chip__action--primary:before { - // @include shape.radius( - // $radius, - // $rtl-reflexive, - // $component-height: $height, - // ); - // } - - // .md3-chip__icon--primary { - // @include shape.radius( - // $radius, - // $rtl-reflexive, - // $component-height: $height, - // ); - // } -} - -/// -/// Sets the width of the chip outline. -/// @param {Number} $width - The width of the chip outline. -/// -@mixin outline-width($width) { - .md3-chip__action--primary:before { - border-width: $width; - } -} - -@mixin _selected-outline-width($width) { - @include _is-selected() { - @include outline-width($width); - } -} - -@mixin _unselected-outline-width($width) { - @include _is-unselected() { - @include outline-width($width); - } -} - -/// -/// Customizes the outline color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`. -/// -/// @example -/// @include outline-color(blue); -/// @include outline-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The outline's color or a state Map -/// -@mixin outline-color($color-or-map) { - @include _outline-color(map.get($color-or-map, default)); - @include _is-enabled() { - @include _outline-color(map.get($color-or-map, enabled)); - } - @include _focus-outline-color(map.get($color-or-map, focus)); - @include _is-disabled() { - @include _outline-color(map.get($color-or-map, disabled)); - } -} - -@mixin _selected-outline-color($color-or-map) { - @include _is-selected() { - @include _outline-color($color-or-map); - } -} - -/// -/// Customizes the selected outline color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`. -/// -/// @example -/// @include selected-outline-color(blue); -/// @include selected-outline-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The outline's color or a state Map -/// -@mixin selected-outline-color($color-or-map) { - @include _is-selected() { - @include outline-color($color-or-map); - } -} - -@mixin _unselected-outline-color($color-or-map) { - @include _is-unselected() { - @include outline-color($color-or-map); - } -} - -@mixin _outline-color($color) { - .md3-chip__action--primary:before { - @if $color { - border-color: $color; - } - - // TODO(b/206694742): Find a better solution. - @if $color == transparent { - @include dom.forced-colors-mode() { - border-color: CanvasText; - } - } - } -} - -@mixin _focus-outline-color($color) { - .md3-chip__action--primary:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // &:before { - // @if $color { - // border-color: $color; - // } - // } - // } - } -} - -/// -/// Sets the style of the chip outline. -/// @param {String} $style - The style of the chip outline. -/// -@mixin outline-style($style) { - .md3-chip__action--primary:before { - border-style: $style; - } -} - -/// -/// Customizes the container color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `disabled`. -/// -/// @example -/// @include container-color(blue); -/// @include container-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The container's color or a state Map -/// -@mixin container-color($color-or-map) { - @include _container-color(map.get($color-or-map, default)); - @include _is-enabled() { - @include _container-color(map.get($color-or-map, enabled)); - } - @include _is-disabled() { - @include _container-color(map.get($color-or-map, disabled)); - } -} - -/// -/// Customizes the selected container color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `disabled`. -/// -/// @example -/// @include selected-container-color(blue); -/// @include selected-container-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The container's color or a state Map -/// -@mixin selected-container-color($color-or-map) { - @include _is-selected() { - @include container-color($color-or-map); - } -} - -@mixin _unselected-container-color($color-or-map) { - @include _is-unselected() { - @include container-color($color-or-map); - } -} - -@mixin _container-color($color) { - @if $color { - background-color: $color; - } -} - -/// -/// Customizes the text label color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include text-label-color(blue); -/// @include text-label-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The label's color or a state Map -/// -@mixin text-label-color($color-or-map) { - @include _text-label-color(map.get($color-or-map, default)); - @include _is-enabled() { - @include _text-label-color(map.get($color-or-map, enabled)); - } - .md3-chip__action--primary:not(.md3-chip__action--presentational):hover { - @include _text-label-color(map.get($color-or-map, hover)); - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // @include _text-label-color(map.get($color-or-map, focus)); - // } - } - - @include _is-disabled() { - @include _text-label-color(map.get($color-or-map, disabled)); - } -} - -@mixin _label-text-typography($typography-theme) { - .md3-chip__text-label { - @include typography.theme-styles($typography-theme); - } -} - -/// -/// Customizes the selected text label color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include selected-text-label-color(blue); -/// @include selected-text-label-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The label's color or a state Map -/// -@mixin selected-text-label-color($color-or-map) { - @include _is-selected() { - @include text-label-color($color-or-map); - } -} - -@mixin _unselected-text-label-color($color-or-map) { - @include _is-unselected() { - @include text-label-color($color-or-map); - } -} - -@mixin _text-label-color($color) { - .md3-chip__text-label { - @if $color { - color: $color; - } - } -} - -/// -/// Sets the type scale of the text label. -/// @param {String} $type-scale - The type scale of the text label. -/// -@mixin text-label-type-scale($type-scale) { - .md3-chip__text-label { - // TODO(b/240224981): Translate to md3 typography - // @include typography.typography($type-scale); - } -} - -/// -/// Sets the size of the graphic. -/// @param {Number} $size - The size of the graphic. -/// -@mixin graphic-size($size) { - // Expose the width as a readable custom property that can be used when - // computing the chip bounding client rect as an additive value for the chip - // width. This solves for selectable chips without icons growing/shrinking as - // they toggle their selected state. The ripple dimensions will have been - // computed based on the unselected bounding client react which will not have - // enough horizontal space to account for the growth in width. - &.md3-chip--selectable:not(.md3-chip--with-primary-icon) { - @if $size { - @include theme.property(--md3-chip-graphic-selected-width, $size); - } - } - - .md3-chip__graphic { - height: $size; - width: $size; - font-size: $size; - } -} - -/// -/// Customizes the icon color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`. -/// -/// @example -/// @include icon-color(blue); -/// @include icon-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The icon's color or a state Map -/// -@mixin icon-color($color-or-map) { - @include _icon-color(map.get($color-or-map, default)); - - @include _is-enabled() { - @include _icon-color(map.get($color-or-map, enabled)); - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational):hover { - @include _icon-color(map.get($color-or-map, hover)); - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // @include _icon-color(map.get($color-or-map, focus)); - // } - } - - @include _is-disabled() { - @include _icon-color(map.get($color-or-map, disabled)); - } -} - -@mixin _selected-icon-color($color-or-map) { - @include checkmark-color($color-or-map); -} - -@mixin _unselected-icon-color($color-or-map) { - @include _is-unselected() { - @include icon-color($color-or-map); - } -} - -@mixin _icon-color($color) { - .md3-chip__icon--primary { - color: $color; - } -} - -/// -/// Customizes the icon container color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include icon-container-color(blue); -/// @include icon-container-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The icon's container color or a state Map -/// -@mixin icon-container-color($color-or-map) { - @include _icon-container-color(map.get($color-or-map, default)); - - .md3-chip__action--primary:not(.md3-chip__action--presentational):hover { - @include _icon-container-color(map.get($color-or-map, hover)); - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // @include _icon-container-color( - // map.get($color-or-map, focus) - // ); - // } - } - - &.md3-chip--disabled { - @include _icon-container-color(map.get($color-or-map, disabled)); - } -} - -@mixin _icon-container-color($color) { - .md3-chip__icon--primary { - @if $color { - background-color: $color; - } - } -} - -/// -/// Sets the size of the icon. -/// @param {Number} $size - The size of the icon. -/// -@mixin icon-size($size) { - .md3-chip__icon--primary { - height: $size; - width: $size; - font-size: $size; - } -} - -/// -/// Sets the size of the delete action. -/// @param {Number} $size - The size of the delete action. -/// -@mixin delete-action-size($size) { - .md3-chip__icon--delete { - height: $size; - width: $size; - font-size: $size; - } -} - -/// -/// Customizes the delete action color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include delete-action-color(blue); -/// @include delete-action-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The delete action's color or a state Map -/// -@mixin delete-action-color($color-or-map) { - @include _delete-action-color(map.get($color-or-map, default)); - - @include _is-enabled() { - @include _delete-action-color(map.get($color-or-map, enabled)); - } - - .md3-chip__action--delete:hover { - @include _delete-action-color(map.get($color-or-map, hover)); - } - - .md3-chip__action--delete { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // @include _delete-action-color( - // map.get($color-or-map, focus) - // ); - // } - } - - @include _is-disabled() { - @include _delete-action-color(map.get($color-or-map, disabled)); - } -} - -@mixin _delete-action-color($color) { - .md3-chip__icon--delete { - @if $color { - color: $color; - } - } -} - -/// -/// Sets the size of the checkmark. -/// @param {Number} $size - The size of the checkmark. -/// -@mixin checkmark-size($size) { - .md3-chip__checkmark { - height: $size; - width: $size; - } -} - -/// -/// Customizes the checkmark color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include checkmark-color(blue); -/// @include checkmark-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The checkmark's color or a state Map -/// -@mixin checkmark-color($color-or-map) { - @include _checkmark-color(map.get($color-or-map, default)); - - @include _is-enabled() { - @include _checkmark-color(map.get($color-or-map, enabled)); - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational):hover { - @include _checkmark-color(map.get($color-or-map, hover)); - } - - .md3-chip__action--primary { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.focus() { - // @include _checkmark-color(map.get($color-or-map, focus)); - // } - } - - @include _is-disabled() { - @include _checkmark-color(map.get($color-or-map, disabled)); - } -} - -@mixin _checkmark-color($color) { - .md3-chip__checkmark { - @if $color { - color: $color; - } - } -} - -/// -/// Customizes the checkmark container color, using a Color or state Map. -/// - To set only the default color, provide a single Color. -/// - To set one or more state colors, provide a state Map with optional keys. -/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`. -/// -/// @example -/// @include checkmark-container-color(blue); -/// @include checkmark-container-color((disabled: gray)); -/// -/// @param {Color | Map} $color-or-map - The checkmark container's color or a state Map -/// -@mixin checkmark-container-color($color-or-map) { - @include _checkmark-container-color(map.get($color-or-map, default)); - - &.md3-chip--disabled { - @include _checkmark-container-color(map.get($color-or-map, disabled)); - } -} - -@mixin _checkmark-container-color($color) { - .md3-chip__checkmark-background { - @if $color { - background-color: $color; - } - } -} - -/// -/// Sets the horizontal padding for the chip. -/// @param {Number} $leading - The leading padding for the chip. -/// @param {Number} $trailing [$leading] - The trailing padding for the chip. -/// -@mixin horizontal-padding($leading, $trailing: $leading) { - .md3-chip__action--primary { - padding-inline: $leading $trailing; - } -} - -/// -/// Sets the horizontal padding for chips with a graphic. -/// @param {Number} $graphic-leading - The leading padding for the graphic. -/// @param {Number} $graphic-trailing - The trailing padding for the graphic. -/// @param {Number} $primary-trailing - The trailing padding for the primary action. -/// -@mixin with-graphic-horizontal-padding( - $graphic-leading, - $graphic-trailing, - $primary-trailing -) { - &.md3-chip--with-primary-graphic { - .md3-chip__graphic { - padding-inline: $graphic-leading $graphic-trailing; - } - - .md3-chip__action--primary { - padding-inline-end: $primary-trailing; - } - } -} - -/// -/// Sets the horizontal padding for chips with a delete action. -/// @param {Number} $primary-leading - The leading padding for the primary action. -/// @param {Number} $delete-action-leading - The leading padding for the delete action. -/// @param {Number} $delete-action-trailing - The trailing padding for the delete action. -/// -@mixin with-delete-action-horizontal-padding( - $primary-leading, - $delete-action-leading, - $delete-action-trailing -) { - &.md3-chip--with-delete-action { - .md3-chip__action--delete { - padding-inline: $delete-action-leading $delete-action-trailing; - } - - #{$ripple-target-delete} { - inset-inline-start: $delete-action-leading; - } - - .md3-chip__action--primary { - padding-inline-start: $primary-leading; - } - } -} - -/// -/// Sets the horizontal padding for chips with a graphic and delete action. -/// @param {Number} $graphic-leading - The leading padding for the graphic. -/// @param {Number} $graphic-trailing - The trailing padding for the graphic. -/// @param {Number} $delete-action-leading - The leading padding for the delete action. -/// @param {Number} $delete-action-trailing - The trailing padding for the delete action. -/// -@mixin with-graphic-and-delete-action-horizontal-padding( - $graphic-leading, - $graphic-trailing, - $delete-action-leading, - $delete-action-trailing -) { - &.md3-chip--with-primary-graphic.md3-chip--with-delete-action { - .md3-chip__graphic { - padding-inline: $graphic-leading $graphic-trailing; - } - - .md3-chip__action--delete { - padding-inline: $delete-action-leading $delete-action-trailing; - } - - #{$ripple-target-delete} { - inset-inline-start: $delete-action-leading; - } - - .md3-chip__action--primary { - padding-inline: 0 0; - } - } -} - -@mixin _container-elevation($resolver, $shadow-color, $map) { - // TODO(b/240224981): Use M3 resolver. - @include elevation-theme.theme-styles( - ( - shadow: $shadow-color, - ) - ); -} - -@mixin _selected-container-elevation($resolver, $shadow-color, $map) { - @include _is-selected() { - @include _container-elevation($resolver, $shadow-color, $map); - } -} - -@mixin _unselected-container-elevation($resolver, $shadow-color, $map) { - @include _is-unselected() { - @include _container-elevation($resolver, $shadow-color, $map); - } -} - -@mixin _is-enabled() { - &:not(.md3-chip--disabled) { - @content; - } -} - -@mixin _is-disabled() { - &.md3-chip--disabled { - @content; - } -} - -@mixin _is-selected() { - &.md3-chip--selected { - @content; - } -} - -@mixin _is-unselected() { - &:not(.md3-chip--selected) { - @content; - } -} diff --git a/chips/chip/lib/_chip.scss b/chips/chip/lib/_chip.scss deleted file mode 100644 index 7c8bf1bdb6..0000000000 --- a/chips/chip/lib/_chip.scss +++ /dev/null @@ -1,444 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// Selector '.md3-*' should only be used in this project. -// stylelint-disable selector-class-pattern -- -// Internal styling for Chip MDC component. - -// go/keep-sorted start -@use '../../../focus/focus-ring'; -@use '../../../motion/animation'; -// TODO(b/240224981): Uncomment when styles are translated to md3 ripple -// @use '../../../ripple/ripple-theme'; -@use '../../../sass/dom'; -@use './chip-theme'; -// go/keep-sorted end - -@mixin core-styles() { - @include without-ripple-styles(); - @include ripple-styles(); -} - -@mixin without-ripple-styles() { - @include static-styles(); - @include _theme-styles(); -} - -@mixin ripple-styles() { - @include chip-theme.ripple-color(chip-theme.$ripple-color); - @include chip-theme.delete-action-ripple-color(chip-theme.$ripple-color); - @include chip-theme.delete-action-ripple-size(chip-theme.$delete-action-size); - - .md3-chip__action { - // TODO(b/240224981): Translate to md3 ripple - // @include ripple.surface( - // $ripple-target: chip-theme.$ripple-target, - // $include-will-change: false - // ); - - // @include ripple.radius-bounded( - // $ripple-target: chip-theme.$ripple-target - // ); - } - - #{chip-theme.$ripple-target} { - position: absolute; - // Ripple needs content-box as the box sizing and box-sizing: border-box - // is often set as a default, so we override that here. - box-sizing: content-box; - overflow: hidden; - pointer-events: none; - } - - #{chip-theme.$ripple-target-primary} { - height: 100%; - width: 100%; - top: 0; - // TODO(b/240224981): Translate to md3 rtl / logical properties - // @include rtl.ignore-next-line(); - left: 0; - } - - #{chip-theme.$ripple-target-delete} { - top: 50%; - transform: translateY(-50%); - } -} - -@mixin static-styles() { - .md3-chip, - .md3-chip__cell, - .md3-chip__action { - display: inline-flex; - align-items: center; - } - - .md3-chip { - position: relative; - max-width: 100%; - } - - .md3-chip__cell, - .md3-chip__action { - height: 100%; - } - - .md3-chip__cell--primary { - overflow-x: hidden; - } - - .md3-chip__cell--delete { - flex: 1 0 auto; - } - - .md3-chip__action { - align-items: center; - background: none; - border: none; - box-sizing: content-box; - cursor: pointer; - display: inline-flex; - justify-content: center; - outline: none; - padding: 0; - text-decoration: none; - color: inherit; - } - - .md3-chip__action--presentational { - cursor: auto; - } - - .md3-chip--disabled, - .md3-chip__action:disabled { - pointer-events: none; - } - - .md3-chip__action--primary { - overflow-x: hidden; - } - - .md3-chip__action--delete { - position: relative; - overflow: visible; - } - - .md3-chip__action--primary:before { - box-sizing: border-box; - content: ''; - height: 100%; - left: 0; - position: absolute; - pointer-events: none; - top: 0; - width: 100%; - z-index: 1; // Position above touch target - } - - .md3-chip--touch { - $margin: math.div(48px - chip-theme.$height, 2); - margin-top: $margin; - margin-bottom: $margin; - } - - .md3-chip__action-touch { - position: absolute; - top: 50%; - height: 48px; - left: 0; - right: 0; - transform: translateY(-50%); - } - - .md3-chip__text-label { - white-space: nowrap; - user-select: none; - text-overflow: ellipsis; - overflow: hidden; - } - - .md3-chip__graphic { - align-items: center; - display: inline-flex; - justify-content: center; - overflow: hidden; - pointer-events: none; - position: relative; - flex: 1 0 auto; - } - - .md3-chip__checkmark { - position: absolute; - opacity: 0; - top: 50%; - // TODO(b/240224981): Translate to logical properties - // @include rtl.ignore-next-line(); - left: 50%; - } - - .md3-chip--selectable:not(.md3-chip--selected) { - &:not(.md3-chip--with-primary-icon) .md3-chip__graphic { - width: 0; - } - } - - .md3-chip__checkmark-background { - opacity: 0; - } - - .md3-chip__checkmark-svg { - display: block; - } - - .md3-chip__checkmark-path { - stroke-width: 2px; - stroke-dasharray: 29.7833385; - stroke-dashoffset: 29.7833385; - stroke: currentColor; - } - - .md3-chip--selecting { - .md3-chip__graphic { - transition: animation.standard(width, 150ms); - } - - .md3-chip__checkmark { - transition: animation.standard(transform, 150ms); - transform: translate(-75%, -50%); - } - - .md3-chip__checkmark-path { - transition: animation.standard(stroke-dashoffset, 150ms, $delay: 45ms); - } - } - - .md3-chip--deselecting { - .md3-chip__graphic { - transition: animation.standard(width, 100ms); - } - - .md3-chip__checkmark { - // TODO(b/240224981): Translate to md3 animation - // transition: animation.linear(opacity, 50ms), - // animation.standard(transform, 100ms); - transform: translate(-75%, -50%); - } - - .md3-chip__checkmark-path { - // Ensure the checkmark path stays visible - stroke-dashoffset: 0; - } - } - - .md3-chip--selecting-with-primary-icon { - .md3-chip__icon--primary { - transition: animation.standard(opacity, 75ms); - } - - .md3-chip__checkmark-path { - transition: animation.standard(stroke-dashoffset, 150ms, $delay: 75ms); - } - } - - .md3-chip--deselecting-with-primary-icon { - .md3-chip__icon--primary { - transition: animation.standard(opacity, 150ms, $delay: 75ms); - } - - .md3-chip__checkmark { - transition: animation.standard(opacity, 75ms); - // Ensure the checkmark stays statically positioned - transform: translate(-50%, -50%); - } - - .md3-chip__checkmark-path { - // Ensure the checkmark path stays visible - stroke-dashoffset: 0; - } - } - - .md3-chip--selected { - .md3-chip__icon--primary { - opacity: 0; - } - - .md3-chip__checkmark { - transform: translate(-50%, -50%); - opacity: 1; - } - - .md3-chip__checkmark-path { - stroke-dashoffset: 0; - } - } - - @keyframes md3-chip-enter { - from { - transform: scale(0.8); - opacity: 0.4; - } - to { - transform: scale(1); - opacity: 1; - } - } - - .md3-chip--enter { - animation: animation.deceleration(md3-chip-enter, 100ms); - } - - @keyframes md3-chip-exit { - from { - opacity: 1; - } - to { - opacity: 0; - } - } - - .md3-chip--exit { - animation: animation.acceleration(md3-chip-exit, 75ms); - } - - .md3-chip--hidden { - opacity: 0; - pointer-events: none; - transition: animation.acceleration(width, 150ms); - } -} - -@mixin _high-contrast-mode() { - @include dom.forced-colors-mode { - @include chip-theme.outline-color( - ( - default: CanvasText, - disabled: GrayText, - ) - ); - @include chip-theme.selected-outline-color( - ( - default: CanvasText, - disabled: GrayText, - ) - ); - @include chip-theme.text-label-color( - ( - disabled: GrayText, - ) - ); - @include chip-theme.icon-color( - ( - disabled: GrayText, - ) - ); - @include chip-theme.checkmark-color( - ( - disabled: GrayText, - ) - ); - @include chip-theme.delete-action-color( - ( - disabled: GrayText, - ) - ); - } - - /// - /// Renders a transparent border on focus in Windows high-contrast mode. - /// - - .md3-chip__focus-ring { - display: none; - } - - .md3-chip__action--primary:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Convert to md3 ripple - // @include ripple.focus() { - // .md3-chip__focus-ring { - // z-index: 1; - // display: block; - // @include focus-ring.focus-ring($query: $query); - // } - // } - } - - .md3-chip__action--delete:not(.md3-chip__action--presentational) { - // TODO(b/240224981): Convert to md3 ripple - // @include ripple.focus() { - .md3-chip__focus-ring { - z-index: 1; - display: block; - @include focus-ring.theme( - ( - container-outer-padding-vertical: 2px, - container-outer-padding-horizontal: -2px, - ) - ); - } - // } - } -} - -@mixin _theme-styles() { - .md3-chip { - @include chip-theme.height(chip-theme.$height); - @include chip-theme.shape-radius(chip-theme.$radius); - @include chip-theme.horizontal-padding( - chip-theme.$leading-padding, - chip-theme.$trailing-padding - ); - @include chip-theme.with-graphic-horizontal-padding( - chip-theme.$graphic-leading-padding, - chip-theme.$graphic-trailing-padding, - chip-theme.$trailing-padding - ); - @include chip-theme.with-delete-action-horizontal-padding( - chip-theme.$leading-padding, - chip-theme.$delete-action-leading-padding, - chip-theme.$delete-action-trailing-padding - ); - @include chip-theme.with-graphic-and-delete-action-horizontal-padding( - chip-theme.$graphic-leading-padding, - chip-theme.$graphic-trailing-padding, - chip-theme.$delete-action-leading-padding, - chip-theme.$delete-action-trailing-padding - ); - @include chip-theme.container-color(chip-theme.$container-color); - @include chip-theme.text-label-color(chip-theme.$text-label-color); - @include chip-theme.icon-color(chip-theme.$icon-color); - @include chip-theme.checkmark-color(chip-theme.$checkmark-color); - @include chip-theme.delete-action-color(chip-theme.$delete-action-color); - @include chip-theme.text-label-type-scale(chip-theme.$type-scale); - @include chip-theme.graphic-size(chip-theme.$leading-icon-size); - @include chip-theme.icon-size(chip-theme.$leading-icon-size); - @include chip-theme.checkmark-size(chip-theme.$checkmark-size); - @include chip-theme.delete-action-size(chip-theme.$delete-action-size); - - @include _high-contrast-mode(); - } - - .md3-chip--filter { - @include chip-theme.selected-container-color( - chip-theme.$filter-selected-container-color - ); - } - - .md3-chip--with-avatar { - @include chip-theme.with-graphic-horizontal-padding( - chip-theme.$avatar-leading-padding, - chip-theme.$avatar-trailing-padding, - chip-theme.$trailing-padding - ); - @include chip-theme.with-graphic-and-delete-action-horizontal-padding( - chip-theme.$avatar-leading-padding, - chip-theme.$avatar-trailing-padding, - chip-theme.$delete-action-leading-padding, - chip-theme.$delete-action-trailing-padding - ); - @include chip-theme.graphic-size(chip-theme.$avatar-size); - @include chip-theme.icon-size(chip-theme.$avatar-size); - } -} diff --git a/chips/chip/lib/_filter-chip-theme.scss b/chips/chip/lib/_filter-chip-theme.scss deleted file mode 100644 index a8e8ac3c7d..0000000000 --- a/chips/chip/lib/_filter-chip-theme.scss +++ /dev/null @@ -1,130 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use 'sass:map'; -// go/keep-sorted end -// go/keep-sorted start -@use '../../../sass/resolvers'; -@use '../../../sass/theme'; -@use './chip-theme'; -// go/keep-sorted end - -$_light-theme: ( - container-shape: null, - container-height: null, - elevated-container-shadow-color: null, - flat-container-elevation: null, - flat-unselected-outline-color: null, - flat-unselected-outline-width: null, - flat-selected-container-color: null, - flat-selected-outline-color: null, - flat-selected-outline-width: null, - elevated-container-elevation: null, - elevated-unselected-container-color: null, - elevated-selected-container-color: null, - label-text-font: null, - label-text-line-height: null, - label-text-size: null, - label-text-weight: null, - label-text-tracking: null, - unselected-label-text-color: null, - selected-label-text-color: null, - with-icon-icon-size: null, - with-icon-unselected-icon-color: null, - with-icon-selected-icon-color: null, - disabled-label-text-color: null, - disabled-label-text-opacity: null, - flat-disabled-unselected-outline-color: null, - flat-disabled-unselected-outline-opacity: null, - flat-disabled-selected-outline-color: null, - flat-disabled-selected-outline-opacity: null, - with-icon-disabled-icon-color: null, - with-icon-disabled-icon-opacity: null, - elevated-disabled-container-elevation: null, - elevated-disabled-container-color: null, - elevated-disabled-container-opacity: null, - unselected-hover-state-layer-color: null, - unselected-hover-state-layer-opacity: null, - unselected-hover-label-text-color: null, - selected-hover-state-layer-color: null, - selected-hover-state-layer-opacity: null, - selected-hover-label-text-color: null, - with-icon-unselected-hover-icon-color: null, - with-icon-selected-hover-icon-color: null, - elevated-hover-container-elevation: null, - flat-selected-hover-container-elevation: null, - flat-unselected-hover-container-elevation: null, - unselected-focus-state-layer-color: null, - unselected-focus-state-layer-opacity: null, - unselected-focus-label-text-color: null, - selected-focus-state-layer-color: null, - selected-focus-state-layer-opacity: null, - selected-focus-label-text-color: null, - flat-unselected-focus-outline-color: null, - with-icon-unselected-focus-icon-color: null, - with-icon-selected-focus-icon-color: null, - elevated-focus-container-elevation: null, - elevated-pressed-container-elevation: null, - flat-selected-focus-container-elevation: null, - flat-unselected-focus-container-elevation: null, - unselected-pressed-state-layer-color: null, - unselected-pressed-state-layer-opacity: null, - unselected-pressed-label-text-color: null, - selected-pressed-state-layer-color: null, - selected-pressed-state-layer-opacity: null, - selected-pressed-label-text-color: null, - with-icon-unselected-pressed-icon-color: null, - with-icon-selected-pressed-icon-color: null, - elevated-selected-container-elevation: null, - flat-selected-pressed-container-elevation: null, - flat-unselected-pressed-container-elevation: null, - container-surface-tint-layer-color: null, -); - -$_custom-property-prefix: 'filter-chip'; - -@mixin theme($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - - // Resolve elevation. - @each $key - in ( - flat-container-elevation, - elevated-container-elevation, - elevated-disabled-container-elevation, - elevated-hover-container-elevation, - elevated-focus-container-elevation, - flat-selected-focus-container-elevation, - flat-unselected-focus-container-elevation, - elevated-selected-container-elevation, - flat-selected-pressed-container-elevation, - flat-unselected-pressed-container-elevation - ) - { - $value: map.get($theme, $key); - @if $value { - $theme: map.set( - $theme, - $key, - meta.call( - $elevation-resolver: map.get($resolvers, elevation), - $elevation: $value, - $shadow-color: map.get($theme, elevated-container-shadow-color), - ) - ); - } - } - - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include theme.emit-theme-vars($theme); -} - -@mixin theme-styles($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include chip-theme.theme-styles($theme, $resolvers: $resolvers); -} diff --git a/chips/chip/lib/_input-chip-theme.scss b/chips/chip/lib/_input-chip-theme.scss deleted file mode 100644 index 6b57462980..0000000000 --- a/chips/chip/lib/_input-chip-theme.scss +++ /dev/null @@ -1,91 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use 'sass:map'; -// go/keep-sorted end -// go/keep-sorted start -@use '../../../elevation/lib/elevation'; -@use '../../../sass/resolvers'; -@use '../../../sass/theme'; -@use './chip-theme'; -// go/keep-sorted end - -$_light-theme: ( - container-shape: null, - container-height: null, - container-elevation: null, - outline-color: null, - outline-width: null, - container-shadow-color: null, - label-text-font: null, - label-text-line-height: null, - label-text-size: null, - label-text-weight: null, - label-text-tracking: null, - label-text-color: null, - with-delete-icon-delete-icon-size: null, - with-delete-icon-delete-icon-color: null, - with-leading-icon-leading-icon-size: null, - with-leading-icon-leading-icon-color: null, - with-avatar-avatar-size: null, - with-avatar-avatar-shape: null, - disabled-outline-color: null, - disabled-outline-opacity: null, - disabled-label-text-color: null, - disabled-label-text-opacity: null, - with-delete-icon-disabled-delete-icon-color: null, - with-delete-icon-disabled-delete-icon-opacity: null, - with-leading-icon-disabled-leading-icon-color: null, - with-leading-icon-disabled-leading-icon-opacity: null, - with-avatar-disabled-avatar-opacity: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - hover-label-text-color: null, - with-delete-icon-hover-delete-icon-color: null, - with-leading-icon-hover-leading-icon-color: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - focus-label-text-color: null, - focus-outline-color: null, - with-delete-icon-focus-delete-icon-color: null, - with-leading-icon-focus-leading-icon-color: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - pressed-label-text-color: null, - with-delete-icon-pressed-delete-icon-color: null, - with-leading-icon-pressed-leading-icon-color: null, - container-surface-tint-layer-color: null, -); - -$_custom-property-prefix: 'input-chip'; - -@mixin theme($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: _resolve-tokens($theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include theme.emit-theme-vars($theme); -} - -@mixin theme-styles($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: _resolve-tokens($theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include chip-theme.theme-styles($theme, $resolvers: $resolvers); -} - -@function _resolve-tokens($tokens) { - $tokens: elevation.resolve-tokens( - $tokens, - 'flat-container-elevation', - 'elevated-container-elevation', - 'elevated-disabled-container-elevation', - 'elevated-hover-container-elevation', - 'elevated-focus-container-elevation', - 'elevated-pressed-container-elevation' - ); - @return $tokens; -} diff --git a/chips/chip/lib/_suggestion-chip-theme.scss b/chips/chip/lib/_suggestion-chip-theme.scss deleted file mode 100644 index 5e6bf73781..0000000000 --- a/chips/chip/lib/_suggestion-chip-theme.scss +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use 'sass:map'; -// go/keep-sorted end -// go/keep-sorted start -@use '../../../sass/resolvers'; -@use '../../../sass/theme'; -@use './chip-theme'; -// go/keep-sorted end - -$_light-theme: ( - container-shape: null, - container-height: null, - flat-container-elevation: null, - flat-outline-color: null, - flat-outline-width: null, - elevated-container-elevation: null, - elevated-container-color: null, - elevated-container-shadow-color: null, - label-text-font: null, - label-text-line-height: null, - label-text-size: null, - label-text-weight: null, - label-text-tracking: null, - label-text-color: null, - flat-disabled-outline-color: null, - flat-disabled-outline-opacity: null, - disabled-label-text-color: null, - disabled-label-text-opacity: null, - elevated-disabled-container-elevation: null, - elevated-disabled-container-color: null, - elevated-disabled-container-opacity: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - hover-label-text-color: null, - elevated-hover-container-elevation: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - focus-label-text-color: null, - flat-focus-outline-color: null, - elevated-focus-container-elevation: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - pressed-label-text-color: null, - elevated-pressed-container-elevation: null, - container-surface-tint-layer-color: null, -); - -$_custom-property-prefix: 'suggestion-chip'; - -@mixin theme($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - - // Resolve elevation. - @each $key - in ( - flat-container-elevation, - elevated-container-elevation, - elevated-disabled-container-elevation, - elevated-hover-container-elevation, - elevated-focus-container-elevation, - elevated-pressed-container-elevation - ) - { - $value: map.get($theme, $key); - @if $value { - $theme: map.set( - $theme, - $key, - meta.call( - $elevation-resolver: map.get($resolvers, elevation), - $elevation: $value, - $shadow-color: map.get($theme, elevated-container-shadow-color), - ) - ); - } - } - - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include theme.emit-theme-vars($theme); -} - -@mixin theme-styles($theme, $resolvers: resolvers.$material) { - @include theme.validate-theme($_light-theme, $theme); - $theme: theme.create-theme-vars($theme, $_custom-property-prefix); - @include chip-theme.theme-styles($theme, $resolvers: $resolvers); -} diff --git a/chips/chip/lib/action-chip.ts b/chips/chip/lib/action-chip.ts deleted file mode 100644 index b12435f9de..0000000000 --- a/chips/chip/lib/action-chip.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../action/primary-action.js'; - -import {html, TemplateResult} from 'lit'; -import {classMap} from 'lit/directives/class-map.js'; -import {Chip} from './chip.js'; - -/** @soyCompatible */ -export class ActionChip extends Chip { - /** - * @soyTemplate - * @soyAttributes attributes: .md3-chip - */ - protected override render(): TemplateResult { - return html` - - ${this.renderOverlay()} - - ${this.renderPrimaryAction()} - - ${this.renderDeleteAction()} - `; - } - - /** @soyTemplate */ - private renderPrimaryAction(): TemplateResult { - return html` - - `; - } -} - diff --git a/chips/chip/lib/adapter.ts b/chips/chip/lib/adapter.ts deleted file mode 100644 index 33fc306f4d..0000000000 --- a/chips/chip/lib/adapter.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js'; - -import {MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js'; - -/** - * Defines the shape of the adapter expected by the foundation. - * Implement this adapter for your framework of choice to delegate updates to - * the component in your framework of choice. See architecture documentation - * for more details. - * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md - */ -export interface MDCChipAdapter { - /** Adds the given class to the root element. */ - addClass(className: MDCChipCssClasses): void; - - /** Emits the given event with the given detail. */ - emitEvent(eventName: MDCChipEvents, eventDetail: D): void; - - /** Returns the child actions provided by the chip. */ - getActions(): MDCChipActionType[]; - - /** Returns the value for the given attribute, if it exists. */ - getAttribute(attrName: MDCChipAttributes): string|null; - - /** Returns the ID of the root element. */ - getElementID(): string; - - /** Returns the offset width of the root element. */ - getOffsetWidth(): number; - - /** Returns true if the root element has the given class. */ - hasClass(className: MDCChipCssClasses): boolean; - - /** Proxies to the MDCChipAction#isSelectable method. */ - isActionSelectable(action: MDCChipActionType): boolean; - - /** Proxies to the MDCChipAction#isSelected method. */ - isActionSelected(action: MDCChipActionType): boolean; - - /** Proxies to the MDCChipAction#isFocusable method. */ - isActionFocusable(action: MDCChipActionType): boolean; - - /** Proxies to the MDCChipAction#isDisabled method. */ - isActionDisabled(action: MDCChipActionType): boolean; - - /** Returns true if the text direction is right-to-left. */ - isRTL(): boolean; - - /** Removes the given class from the root element. */ - removeClass(className: MDCChipCssClasses): void; - - /** Proxies to the MDCChipAction#setDisabled method. */ - setActionDisabled(action: MDCChipActionType, isDisabled: boolean): void; - - /** Proxies to the MDCChipAction#setFocus method. */ - setActionFocus( - action: MDCChipActionType, behavior: MDCChipActionFocusBehavior): void; - - /** Proxies to the MDCChipAction#setSelected method. */ - setActionSelected(action: MDCChipActionType, isSelected: boolean): void; - - /** Sets the style property to the given value. */ - setStyleProperty(property: string, value: string): void; -} diff --git a/chips/chip/lib/animationframe.ts b/chips/chip/lib/animationframe.ts deleted file mode 100644 index 90d0d8ebfa..0000000000 --- a/chips/chip/lib/animationframe.ts +++ /dev/null @@ -1,68 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// TODO: Remove in favor of AnimationSignal -/** - * AnimationFrame provides a user-friendly abstraction around requesting - * and canceling animation frames. - */ -export class AnimationFrame { - private readonly rafIDs = new Map(); - - /** - * Requests an animation frame. Cancels any existing frame with the same key. - * @param {string} key The key for this callback. - * @param {FrameRequestCallback} callback The callback to be executed. - */ - request(key: string, callback: FrameRequestCallback) { - this.cancel(key); - const frameID = requestAnimationFrame((frame) => { - this.rafIDs.delete(key); - // Callback must come *after* the key is deleted so that nested calls to - // request with the same key are not deleted. - callback(frame); - }); - this.rafIDs.set(key, frameID); - } - - /** - * Cancels a queued callback with the given key. - * @param {string} key The key for this callback. - */ - cancel(key: string) { - const rafID = this.rafIDs.get(key); - if (rafID) { - cancelAnimationFrame(rafID); - this.rafIDs.delete(key); - } - } - - /** - * Cancels all queued callback. - */ - cancelAll() { - // Need to use forEach because it's the only iteration method supported - // by IE11. Suppress the underscore because we don't need it. - // tslint:disable-next-line:enforce-name-casing - this.rafIDs.forEach((_, key) => { - this.cancel(key); - }); - } - - /** - * Returns the queue of unexecuted callback keys. - */ - getQueue(): string[] { - const queue: string[] = []; - // Need to use forEach because it's the only iteration method supported - // by IE11. Suppress the underscore because we don't need it. - // tslint:disable-next-line:enforce-name-casing - this.rafIDs.forEach((_, key) => { - queue.push(key); - }); - return queue; - } -} diff --git a/chips/chip/lib/chip.ts b/chips/chip/lib/chip.ts deleted file mode 100644 index d8a973efd4..0000000000 --- a/chips/chip/lib/chip.ts +++ /dev/null @@ -1,98 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../../elevation/elevation.js'; -import '../../action/delete-action.js'; - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {ActionElement} from '../../../actionelement/action-element.js'; -import {ariaProperty} from '../../../decorators/aria-property.js'; - -/** Defines the border type of a chip. */ -export enum BorderType { - ELEVATED = 'ELEVATED', - HAIRLINE = 'HAIRLINE', -} - -/** Defines the shape of the vertical edge of a chip. */ -export enum EdgeType { - ROUNDED = 'ROUNDED', - STRAIGHT = 'STRAIGHT', -} - -/** @soyCompatible */ -export abstract class Chip extends ActionElement { - @property({type: Boolean, reflect: true}) isFocusable = false; - - @property({type: Boolean, reflect: true}) isTouchable = false; - - @property({type: Boolean, reflect: true}) disabled = false; - - @property({type: Boolean, reflect: true}) hasAvatar = false; - - @property({type: Boolean, reflect: true}) hasDeleteAction = false; - - @property({type: String}) icon = ''; - - @property({type: String}) label = ''; - - @property({type: String}) borderType = BorderType.HAIRLINE; - - @property({type: String}) edgeType = EdgeType.ROUNDED; - - @property({type: String}) addedAnnouncement = ''; - - @property({type: String}) removedAnnouncement = ''; - - @property({type: String}) closeActionAriaLabel = ''; - - /** @soyPrefixAttribute */ - @ariaProperty // tslint:disable-line:no-new-decorators - @property({type: String, attribute: 'aria-label'}) - override ariaLabel!: string; - - /** @soyTemplate */ - protected getRootClasses(): ClassInfo { - const hasIcon = this.icon.trim().length > 0; - return { - 'md3-chip': true, - 'md3-chip--disabled': this.disabled, - 'md3-chip--touch': this.isTouchable, - 'md3-chip--with-primary-graphic': hasIcon, - 'md3-chip--with-primary-icon': hasIcon, - 'md3-chip--with-avatar': this.hasAvatar, - 'md3-chip--with-delete-action': this.hasDeleteAction, - }; - } - - /** @soyTemplate */ - protected renderOverlay(): TemplateResult { - return this.borderType === BorderType.ELEVATED ? - html`` : - html``; - } - - /** @soyTemplate */ - protected renderDeleteAction(): TemplateResult { - if (!this.hasDeleteAction) { - return html``; - } else { - return html` - - - - `; - } - } -} diff --git a/chips/chip/lib/constants.ts b/chips/chip/lib/constants.ts deleted file mode 100644 index 19c4a54369..0000000000 --- a/chips/chip/lib/constants.ts +++ /dev/null @@ -1,47 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -/** - * MDCChipCssClasses provides the named constants for class names. - */ -export enum MDCChipCssClasses { - SELECTING = 'md3-chip--selecting', - DESELECTING = 'md3-chip--deselecting', - SELECTING_WITH_PRIMARY_ICON = 'md3-chip--selecting-with-primary-icon', - DESELECTING_WITH_PRIMARY_ICON = 'md3-chip--deselecting-with-primary-icon', - DISABLED = 'md3-chip--disabled', - ENTER = 'md3n-chip--enter', - EXIT = 'md3-chip--exit', - SELECTED = 'md3-chip--selected', - HIDDEN = 'md3-chip--hidden', - WITH_PRIMARY_ICON = 'md3-chip--with-primary-icon', -} - -/** - * MDCChipEvents provides the named constants for emitted events. - */ -export enum MDCChipEvents { - INTERACTION = 'MDCChip:interaction', - NAVIGATION = 'MDCChip:navigation', - ANIMATION = 'MDCChip:animation', -} - -/** - * MDCChipAttributes provides the named constants for strings used by the - * foundation. - */ -export enum MDCChipAttributes { - DATA_REMOVED_ANNOUNCEMENT = 'data-md3-removed-announcement', - DATA_ADDED_ANNOUNCEMENT = 'data-md3-added-announcement', -} - -/** - * MDCChipAnimation provides the names of runnable animations. - */ -export enum MDCChipAnimation { - ENTER = 'md3-chip-enter', - EXIT = 'md3-chip-exit', -} diff --git a/chips/chip/lib/foundation.ts b/chips/chip/lib/foundation.ts deleted file mode 100644 index 3fce46a3ab..0000000000 --- a/chips/chip/lib/foundation.ts +++ /dev/null @@ -1,318 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../../action/lib/constants.js'; -import {MDCChipActionInteractionEventDetail} from '../../action/lib/types.js'; - -import {MDCChipAdapter} from './adapter.js'; -import {AnimationFrame} from './animationframe.js'; -import {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js'; -import {ActionInteractionEvent, ActionNavigationEvent, MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from './types.js'; - -interface Navigation { - from: MDCChipActionType; - to: MDCChipActionType; -} - -enum Direction { - UNSPECIFIED, // Default - LEFT, - RIGHT, -} - -enum AnimationKeys { - SELECTION = 'selection', - EXIT = 'exit', -} - -/** - * MDCChipFoundation provides a foundation for all chips. - */ -export class MDCChipFoundation { - private readonly adapter: MDCChipAdapter; - - static get defaultAdapter(): MDCChipAdapter { - return { - addClass: () => undefined, - emitEvent: () => undefined, - getActions: () => [], - getAttribute: () => null, - getElementID: () => '', - getOffsetWidth: () => 0, - hasClass: () => false, - isActionDisabled: () => false, - isActionFocusable: () => false, - isActionSelectable: () => false, - isActionSelected: () => false, - isRTL: () => false, - removeClass: () => undefined, - setActionDisabled: () => undefined, - setActionFocus: () => undefined, - setActionSelected: () => undefined, - setStyleProperty: () => undefined, - }; - } - - private readonly animFrame: AnimationFrame; - - constructor(adapter?: Partial) { - this.adapter = {...MDCChipFoundation.defaultAdapter, ...adapter}; - this.animFrame = new AnimationFrame(); - } - - destroy() { - this.animFrame.cancelAll(); - } - - getElementID() { - return this.adapter.getElementID(); - } - - setDisabled(isDisabled: boolean) { - const actions = this.getActions(); - for (const action of actions) { - this.adapter.setActionDisabled(action, isDisabled); - } - - if (isDisabled) { - this.adapter.addClass(MDCChipCssClasses.DISABLED); - } else { - this.adapter.removeClass(MDCChipCssClasses.DISABLED); - } - } - - isDisabled(): boolean { - const actions = this.getActions(); - for (const action of actions) { - if (this.adapter.isActionDisabled(action)) { - return true; - } - } - return false; - } - - getActions(): MDCChipActionType[] { - return this.adapter.getActions(); - } - - isActionFocusable(action: MDCChipActionType): boolean { - return this.adapter.isActionFocusable(action); - } - - isActionSelectable(action: MDCChipActionType): boolean { - return this.adapter.isActionSelectable(action); - } - - isActionSelected(action: MDCChipActionType): boolean { - return this.adapter.isActionSelected(action); - } - - setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) { - this.adapter.setActionFocus(action, focus); - } - - setActionSelected(action: MDCChipActionType, isSelected: boolean) { - this.adapter.setActionSelected(action, isSelected); - this.animateSelection(isSelected); - } - - startAnimation(animation: MDCChipAnimation) { - if (animation === MDCChipAnimation.ENTER) { - this.adapter.addClass(MDCChipCssClasses.ENTER); - return; - } - - if (animation === MDCChipAnimation.EXIT) { - this.adapter.addClass(MDCChipCssClasses.EXIT); - return; - } - } - - handleAnimationEnd(event: AnimationEvent) { - const {animationName} = event; - if (animationName === MDCChipAnimation.ENTER) { - this.adapter.removeClass(MDCChipCssClasses.ENTER); - this.adapter.emitEvent( - MDCChipEvents.ANIMATION, { - chipID: this.getElementID(), - animation: MDCChipAnimation.ENTER, - addedAnnouncement: this.getAddedAnnouncement(), - isComplete: true, - }); - return; - } - - if (animationName === MDCChipAnimation.EXIT) { - this.adapter.removeClass(MDCChipCssClasses.EXIT); - this.adapter.addClass(MDCChipCssClasses.HIDDEN); - const width = this.adapter.getOffsetWidth(); - this.adapter.setStyleProperty('width', `${width}px`); - // Wait two frames so the width gets applied correctly. - this.animFrame.request(AnimationKeys.EXIT, () => { - this.animFrame.request(AnimationKeys.EXIT, () => { - this.adapter.setStyleProperty('width', '0'); - }); - }); - } - } - - handleTransitionEnd() { - if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN)) return; - - this.adapter.emitEvent( - MDCChipEvents.ANIMATION, { - chipID: this.getElementID(), - animation: MDCChipAnimation.EXIT, - removedAnnouncement: this.getRemovedAnnouncement(), - isComplete: true, - }); - } - - handleActionInteraction({detail}: ActionInteractionEvent) { - const {source, actionID} = detail; - const isSelectable = this.adapter.isActionSelectable(source); - const isSelected = this.adapter.isActionSelected(source); - - this.adapter.emitEvent( - MDCChipEvents.INTERACTION, { - chipID: this.getElementID(), - shouldRemove: this.shouldRemove(detail), - actionID, - isSelectable, - isSelected, - source, - }); - } - - handleActionNavigation({detail}: ActionNavigationEvent) { - const {source, key} = detail; - const isRTL = this.adapter.isRTL(); - const isTrailingActionFocusable = - this.adapter.isActionFocusable(MDCChipActionType.TRAILING); - const isPrimaryActionFocusable = - this.adapter.isActionFocusable(MDCChipActionType.PRIMARY); - const dir = this.directionFromKey(key, isRTL); - - const shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY && - dir === Direction.RIGHT && isTrailingActionFocusable; - - const shouldNavigateToPrimary = source === MDCChipActionType.TRAILING && - dir === Direction.LEFT && isPrimaryActionFocusable; - - if (shouldNavigateToTrailing) { - this.navigateActions({from: source, to: MDCChipActionType.TRAILING}); - return; - } - - if (shouldNavigateToPrimary) { - this.navigateActions({from: source, to: MDCChipActionType.PRIMARY}); - return; - } - - this.adapter.emitEvent( - MDCChipEvents.NAVIGATION, { - chipID: this.getElementID(), - isRTL, - source, - key, - }); - } - - private directionFromKey(key: string, isRTL: boolean): Direction { - const isLeftKey = key === 'ArrowLeft'; - const isRightKey = key === 'ArrowRight'; - if (!isRTL && isLeftKey || isRTL && isRightKey) { - return Direction.LEFT; - } - - if (!isRTL && isRightKey || isRTL && isLeftKey) { - return Direction.RIGHT; - } - - return Direction.UNSPECIFIED; - } - - private navigateActions(nav: Navigation) { - this.adapter.setActionFocus( - nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE); - this.adapter.setActionFocus( - nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED); - } - - private shouldRemove({source, trigger}: MDCChipActionInteractionEventDetail): - boolean { - if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY || - trigger === MDCChipActionInteractionTrigger.DELETE_KEY) { - return true; - } - - return source === MDCChipActionType.TRAILING; - } - - private getRemovedAnnouncement(): string|undefined { - const msg = - this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT); - return msg || undefined; - } - - private getAddedAnnouncement(): string|undefined { - const msg = - this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT); - return msg || undefined; - } - - private animateSelection(isSelected: boolean) { - this.resetAnimationStyles(); - // Wait two frames to ensure the animation classes are unset - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.updateSelectionStyles(isSelected); - }); - }); - } - - private resetAnimationStyles() { - this.adapter.removeClass(MDCChipCssClasses.SELECTING); - this.adapter.removeClass(MDCChipCssClasses.DESELECTING); - this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON); - this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON); - } - - private updateSelectionStyles(isSelected: boolean) { - const hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON); - if (hasIcon && isSelected) { - this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON); - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.adapter.addClass(MDCChipCssClasses.SELECTED); - }); - return; - } - - if (hasIcon && !isSelected) { - this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON); - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.adapter.removeClass(MDCChipCssClasses.SELECTED); - }); - return; - } - - if (isSelected) { - this.adapter.addClass(MDCChipCssClasses.SELECTING); - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.adapter.addClass(MDCChipCssClasses.SELECTED); - }); - return; - } - - if (!isSelected) { - this.adapter.addClass(MDCChipCssClasses.DESELECTING); - this.animFrame.request(AnimationKeys.SELECTION, () => { - this.adapter.removeClass(MDCChipCssClasses.SELECTED); - }); - return; - } - } -} diff --git a/chips/chip/lib/link-chip.ts b/chips/chip/lib/link-chip.ts deleted file mode 100644 index 103f782bbf..0000000000 --- a/chips/chip/lib/link-chip.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// import '@material/web/chips/action.js'; -import '../../action/link-action.js'; - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {classMap} from 'lit/directives/class-map.js'; -import {Chip} from './chip.js'; - -/** @soyCompatible */ -export class LinkChip extends Chip { - @property({type: String}) href!: string; - - @property({type: String}) target!: string; - - /** - * @soyTemplate - * @soyAttributes attributes: .md3-chip - * @soyAttributes linkAttributes: .md3-chip__action - */ - protected override render(): TemplateResult { - return html` - - ${this.renderOverlay()} - - ${this.renderPrimaryAction()} - - ${this.renderDeleteAction()} - `; - } - - /** @soyTemplate */ - private renderPrimaryAction(): TemplateResult { - return html` - - `; - } -} diff --git a/chips/chip/lib/presentational-chip.ts b/chips/chip/lib/presentational-chip.ts deleted file mode 100644 index 31ef5c59e5..0000000000 --- a/chips/chip/lib/presentational-chip.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../action/presentational-action.js'; - -import {html, TemplateResult} from 'lit'; -import {classMap} from 'lit/directives/class-map.js'; -import {Chip} from './chip.js'; - -/** @soyCompatible */ -export class PresentationalChip extends Chip { - /** - * @soyTemplate - * @soyAttributes attributes: .md3-chip - */ - protected override render(): TemplateResult { - return html` - - ${this.renderOverlay()} - - ${this.renderPrimaryAction()} - - ${this.renderDeleteAction()} - `; - } - - /** @soyTemplate */ - private renderPrimaryAction(): TemplateResult { - return html` - - `; - } -} - diff --git a/chips/chip/lib/selectable-chip.ts b/chips/chip/lib/selectable-chip.ts deleted file mode 100644 index 6a2ca3522c..0000000000 --- a/chips/chip/lib/selectable-chip.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../action/selectable-action.js'; - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; -import {Chip} from './chip.js'; - -/** @soyCompatible */ -export class SelectableChip extends Chip { - @property({type: Boolean, reflect: true}) selected = false; - - /** - * @soyTemplate - * @soyAttributes attributes: .md3-chip - */ - protected override render(): TemplateResult { - return html` - - ${this.renderOverlay()} - ${this.renderPrimaryAction()} - ${this.renderDeleteAction()} - `; - } - - /** @soyTemplate */ - protected override getRootClasses(): ClassInfo { - return { - ...super.getRootClasses(), - 'md3-chip--with-primary-graphic': true, - 'md3-chip--selectable': true, - 'md3-chip--selected': this.selected, - }; - } - - /** @soyTemplate */ - private renderPrimaryAction(): TemplateResult { - return html` - - `; - } -} - diff --git a/chips/chip/lib/types.ts b/chips/chip/lib/types.ts deleted file mode 100644 index c97ac8227f..0000000000 --- a/chips/chip/lib/types.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionType} from '../../action/lib/constants.js'; -import {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from '../../action/lib/types.js'; - -import {MDCChipAnimation} from './constants.js'; - -/** MDCChipInteractionEventDetail provides details for the interaction event. */ -export interface MDCChipInteractionEventDetail { - actionID: string; - chipID: string; - source: MDCChipActionType; - shouldRemove: boolean; - isSelectable: boolean; - isSelected: boolean; -} - -/** MDCChipNavigationEventDetail provides details for the navigation event. */ -export interface MDCChipNavigationEventDetail { - chipID: string; - source: MDCChipActionType; - key: string; - isRTL: boolean; -} - -/** - * MDCChipAnimationEventDetail provides details for the animation event. - */ -export interface MDCChipAnimationEventDetail { - chipID: string; - animation: MDCChipAnimation; - isComplete: boolean; - addedAnnouncement?: string; - removedAnnouncement?: string; -} - -/** - * MDCChipActionInteractionEvent is the custom event for the interaction event. - */ -export type ActionInteractionEvent = - CustomEvent; - -/** - * MDCChipActionInteractionEvent is the custom event for the interaction event. - */ -export type ActionNavigationEvent = - CustomEvent; diff --git a/chips/chipset/lib/_chip-set-theme.scss b/chips/chipset/lib/_chip-set-theme.scss deleted file mode 100644 index 76c9b9ffef..0000000000 --- a/chips/chipset/lib/_chip-set-theme.scss +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use 'sass:math'; -// go/keep-sorted end - -// stylelint-disable selector-class-pattern -- MDC internal usage. - -$space-between-chips: 8px; - -/// -/// Sets the horiontal space between the chips in the chip set. -/// @param {Number} $space - The horizontal space between the chips. -/// -@mixin horizontal-space-between-chips($space) { - /// - /// We should use the column-gap property when our browser matrix allows. - /// - - .md3-chip-set__chips { - // Set the margin to the negative horizontal space to account for chips - // being inset on the leading edge. - // TODO(b/248173007): Explore using CSS grid layout instead. - margin-inline-start: -$space; - } - - .md3-chip { - margin-inline-start: $space; - } -} - -/// -/// Sets the vertical space between the chips in the chip set. -/// @param {Number} $space - The vertical space between the chips. -/// -@mixin vertical-space-between-chips($space) { - /// - /// We should use the row-gap property when our browser matrix allows. - /// - - .md3-chip { - // Set top and bottom to half the vertical space since there's no - // well supported method for vertical wrapping gaps. - margin-block: math.div($space, 2); - } -} diff --git a/chips/chipset/lib/_chip-set.scss b/chips/chipset/lib/_chip-set.scss deleted file mode 100644 index 7e9047fa11..0000000000 --- a/chips/chipset/lib/_chip-set.scss +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -// go/keep-sorted start -@use './chip-set-theme'; -// go/keep-sorted end - -// stylelint-disable selector-class-pattern -- MDC internal usage. - -@mixin core-styles() { - @include _static-styles(); - @include _theme-styles(); -} - -@mixin _static-styles() { - .md3-chip-set { - display: flex; - } - - .md3-chip-set:focus { - outline: none; - } - - .md3-chip-set__chips { - display: flex; - flex-flow: wrap; - min-width: 0; - } - - .md3-chip-set--overflow .md3-chip-set__chips { - flex-flow: nowrap; - } -} - -@mixin _theme-styles() { - .md3-chip-set { - @include chip-set-theme.horizontal-space-between-chips( - chip-set-theme.$space-between-chips - ); - - @include chip-set-theme.vertical-space-between-chips( - chip-set-theme.$space-between-chips - ); - } -} diff --git a/chips/chipset/lib/adapter.ts b/chips/chipset/lib/adapter.ts deleted file mode 100644 index 965f138d15..0000000000 --- a/chips/chipset/lib/adapter.ts +++ /dev/null @@ -1,66 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js'; -import {MDCChipAnimation} from '../../chip/lib/constants.js'; - -import {MDCChipSetAttributes, MDCChipSetEvents} from './constants.js'; - -/** - * Defines the shape of the adapter expected by the foundation. - * Implement this adapter for your framework of choice to delegate updates to - * the component in your framework of choice. See architecture documentation - * for more details. - * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md - */ -export interface MDCChipSetAdapter { - /** Announces the message via an aria-live region */ - announceMessage(message: string): void; - - /** Emits the given event with the given detail. */ - emitEvent(eventName: MDCChipSetEvents, eventDetail: D): - void; - - /** Returns the value for the given attribute, if it exists. */ - getAttribute(attrName: MDCChipSetAttributes): string|null; - - /** Returns the actions provided by the child chip at the given index. */ - getChipActionsAtIndex(index: number): MDCChipActionType[]; - - /** Returns the number of child chips. */ - getChipCount(): number; - - /** Returns the ID of the chip at the given index. */ - getChipIdAtIndex(index: number): string; - - /** Returns the index of the child chip with the matching ID. */ - getChipIndexById(chipID: string): number; - - /** Proxies to the MDCChip#isActionFocusable method. */ - isChipFocusableAtIndex(index: number, actionType: MDCChipActionType): boolean; - - /** Proxies to the MDCChip#isActionSelectable method. */ - isChipSelectableAtIndex(index: number, actionType: MDCChipActionType): - boolean; - - /** Proxies to the MDCChip#isActionSelected method. */ - isChipSelectedAtIndex(index: number, actionType: MDCChipActionType): boolean; - - /** Removes the chip at the given index. */ - removeChipAtIndex(index: number): void; - - /** Proxies to the MDCChip#setActionFocus method. */ - setChipFocusAtIndex( - index: number, action: MDCChipActionType, - focus: MDCChipActionFocusBehavior): void; - - /** Proxies to the MDCChip#setActionSelected method. */ - setChipSelectedAtIndex( - index: number, actionType: MDCChipActionType, isSelected: boolean): void; - - /** Starts the chip animation at the given index. */ - startChipAnimationAtIndex(index: number, animation: MDCChipAnimation): void; -} diff --git a/chips/chipset/lib/constants.ts b/chips/chipset/lib/constants.ts deleted file mode 100644 index e2c1186867..0000000000 --- a/chips/chipset/lib/constants.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -/** - * MDCChipSetAttributes provides the named constants for attributes used by the - * foundation. - */ -export enum MDCChipSetAttributes { - ARIA_MULTISELECTABLE = 'aria-multiselectable', -} - -/** - * MDCChipSetCssClasses provides the named constants for class names. - */ -export enum MDCChipSetCssClasses { - CHIP = 'md3-chip', -} - -/** - * MDCChipSetEvents provides the constants for emitted events. - */ -export enum MDCChipSetEvents { - INTERACTION = 'MDCChipSet:interaction', - REMOVAL = 'MDCChipSet:removal', - SELECTION = 'MDCChipSet:selection', -} diff --git a/chips/chipset/lib/foundation.ts b/chips/chipset/lib/foundation.ts deleted file mode 100644 index a1ebe2ea4f..0000000000 --- a/chips/chipset/lib/foundation.ts +++ /dev/null @@ -1,396 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js'; -import {MDCChipAnimation} from '../../chip/lib/constants.js'; - -import {MDCChipSetAdapter} from './adapter.js'; -import {MDCChipSetAttributes, MDCChipSetEvents} from './constants.js'; -import {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent, MDCChipSetInteractionEventDetail, MDCChipSetRemovalEventDetail, MDCChipSetSelectionEventDetail} from './types.js'; - -interface FocusAction { - action: MDCChipActionType; - index: number; -} - -enum Operator { - INCREMENT, - DECREMENT, -} - -/** - * MDCChipSetFoundation provides a foundation for all chips. - */ -export class MDCChipSetFoundation { - private readonly adapter: MDCChipSetAdapter; - - static get defaultAdapter(): MDCChipSetAdapter { - return { - announceMessage: () => undefined, - emitEvent: () => undefined, - getAttribute: () => null, - getChipActionsAtIndex: () => [], - getChipCount: () => 0, - getChipIdAtIndex: () => '', - getChipIndexById: () => 0, - isChipFocusableAtIndex: () => false, - isChipSelectableAtIndex: () => false, - isChipSelectedAtIndex: () => false, - removeChipAtIndex: () => {}, - setChipFocusAtIndex: () => undefined, - setChipSelectedAtIndex: () => undefined, - startChipAnimationAtIndex: () => undefined, - }; - } - - constructor(adapter?: Partial) { - this.adapter = {...MDCChipSetFoundation.defaultAdapter, ...adapter}; - } - - handleChipAnimation({detail}: ChipAnimationEvent) { - const { - chipID, - animation, - isComplete, - addedAnnouncement, - removedAnnouncement - } = detail; - const index = this.adapter.getChipIndexById(chipID); - - if (animation === MDCChipAnimation.EXIT && isComplete) { - if (removedAnnouncement) { - this.adapter.announceMessage(removedAnnouncement); - } - this.removeAfterAnimation(index, chipID); - return; - } - - if (animation === MDCChipAnimation.ENTER && isComplete && - addedAnnouncement) { - this.adapter.announceMessage(addedAnnouncement); - return; - } - } - - handleChipInteraction({detail}: ChipInteractionEvent) { - const {source, chipID, isSelectable, isSelected, shouldRemove} = detail; - const index = this.adapter.getChipIndexById(chipID); - - if (shouldRemove) { - this.removeChip(index); - return; - } - - this.focusChip(index, source, MDCChipActionFocusBehavior.FOCUSABLE); - this.adapter.emitEvent( - MDCChipSetEvents.INTERACTION, { - chipIndex: index, - chipID, - }); - - if (isSelectable) { - this.setSelection(index, source, !isSelected); - } - } - - handleChipNavigation({detail}: ChipNavigationEvent) { - const {chipID, key, isRTL, source} = detail; - const index = this.adapter.getChipIndexById(chipID); - - const toNextChip = - (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL); - if (toNextChip) { - // Start from the next chip so we increment the index - this.focusNextChipFrom(index + 1); - return; - } - - const toPreviousChip = - (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL); - if (toPreviousChip) { - // Start from the previous chip so we decrement the index - this.focusPrevChipFrom(index - 1); - return; - } - - if (key === 'ArrowDown') { - // Start from the next chip so we increment the index - this.focusNextChipFrom(index + 1, source); - return; - } - - if (key === 'ArrowUp') { - // Start from the previous chip so we decrement the index - this.focusPrevChipFrom(index - 1, source); - return; - } - - if (key === 'Home') { - this.focusNextChipFrom(0, source); - return; - } - - if (key === 'End') { - this.focusPrevChipFrom(this.adapter.getChipCount() - 1, source); - return; - } - } - - /** Returns the unique selected indexes of the chips. */ - getSelectedChipIndexes(): ReadonlySet { - const selectedIndexes = new Set(); - const chipCount = this.adapter.getChipCount(); - for (let i = 0; i < chipCount; i++) { - const actions = this.adapter.getChipActionsAtIndex(i); - for (const action of actions) { - if (this.adapter.isChipSelectedAtIndex(i, action)) { - selectedIndexes.add(i); - } - } - } - return selectedIndexes; - } - - /** Sets the selected state of the chip at the given index and action. */ - setChipSelected( - index: number, action: MDCChipActionType, isSelected: boolean) { - if (this.adapter.isChipSelectableAtIndex(index, action)) { - this.setSelection(index, action, isSelected); - } - } - - /** Returns the selected state of the chip at the given index and action. */ - isChipSelected(index: number, action: MDCChipActionType): boolean { - return this.adapter.isChipSelectedAtIndex(index, action); - } - - /** Removes the chip at the given index. */ - removeChip(index: number) { - // Early exit if the index is out of bounds - if (index >= this.adapter.getChipCount() || index < 0) return; - this.adapter.startChipAnimationAtIndex(index, MDCChipAnimation.EXIT); - this.adapter.emitEvent( - MDCChipSetEvents.REMOVAL, { - chipID: this.adapter.getChipIdAtIndex(index), - chipIndex: index, - isComplete: false, - }); - } - - addChip(index: number) { - // Early exit if the index is out of bounds - if (index >= this.adapter.getChipCount() || index < 0) return; - this.adapter.startChipAnimationAtIndex(index, MDCChipAnimation.ENTER); - } - - /** - * Increments to find the first focusable chip. - */ - private focusNextChipFrom( - startIndex: number, targetAction?: MDCChipActionType) { - const chipCount = this.adapter.getChipCount(); - for (let i = startIndex; i < chipCount; i++) { - const focusableAction = - this.getFocusableAction(i, Operator.INCREMENT, targetAction); - if (focusableAction) { - this.focusChip( - i, focusableAction, - MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED); - return; - } - } - } - - /** - * Decrements to find the first focusable chip. Takes an optional target - * action that can be used to focus the first matching focusable action. - */ - private focusPrevChipFrom( - startIndex: number, targetAction?: MDCChipActionType) { - for (let i = startIndex; i > -1; i--) { - const focusableAction = - this.getFocusableAction(i, Operator.DECREMENT, targetAction); - if (focusableAction) { - this.focusChip( - i, focusableAction, - MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED); - return; - } - } - } - - /** Returns the appropriate focusable action, or null if none exist. */ - private getFocusableAction( - index: number, op: Operator, - targetAction?: MDCChipActionType): MDCChipActionType|null { - const actions = this.adapter.getChipActionsAtIndex(index); - // Reverse the actions if decrementing - if (op === Operator.DECREMENT) actions.reverse(); - - if (targetAction) { - return this.getMatchingFocusableAction(index, actions, targetAction); - } - - return this.getFirstFocusableAction(index, actions); - } - - /** - * Returs the first focusable action, regardless of type, or null if no - * focusable actions exist. - */ - private getFirstFocusableAction(index: number, actions: MDCChipActionType[]): - MDCChipActionType|null { - for (const action of actions) { - if (this.adapter.isChipFocusableAtIndex(index, action)) { - return action; - } - } - return null; - } - - /** - * If the actions contain a focusable action that matches the target action, - * return that. Otherwise, return the first focusable action, or null if no - * focusable action exists. - */ - private getMatchingFocusableAction( - index: number, actions: MDCChipActionType[], - targetAction: MDCChipActionType): MDCChipActionType|null { - let focusableAction = null; - for (const action of actions) { - if (this.adapter.isChipFocusableAtIndex(index, action)) { - focusableAction = action; - } - - // Exit and return the focusable action if it matches the target - if (focusableAction === targetAction) { - return focusableAction; - } - } - return focusableAction; - } - - private focusChip( - index: number, action: MDCChipActionType, - focus: MDCChipActionFocusBehavior) { - this.adapter.setChipFocusAtIndex(index, action, focus); - const chipCount = this.adapter.getChipCount(); - for (let i = 0; i < chipCount; i++) { - const actions = this.adapter.getChipActionsAtIndex(i); - for (const chipAction of actions) { - // Skip the action and index provided since we set it above - if (chipAction === action && i === index) continue; - this.adapter.setChipFocusAtIndex( - i, chipAction, MDCChipActionFocusBehavior.NOT_FOCUSABLE); - } - } - } - - private supportsMultiSelect(): boolean { - return this.adapter.getAttribute( - MDCChipSetAttributes.ARIA_MULTISELECTABLE) === 'true'; - } - - private setSelection( - index: number, action: MDCChipActionType, isSelected: boolean) { - this.adapter.setChipSelectedAtIndex(index, action, isSelected); - this.adapter.emitEvent( - MDCChipSetEvents.SELECTION, { - chipID: this.adapter.getChipIdAtIndex(index), - chipIndex: index, - isSelected, - }); - // Early exit if we support multi-selection - if (this.supportsMultiSelect()) { - return; - } - - // If we get here, we ony support single selection. This means we need to - // unselect all chips - const chipCount = this.adapter.getChipCount(); - for (let i = 0; i < chipCount; i++) { - const actions = this.adapter.getChipActionsAtIndex(i); - for (const chipAction of actions) { - // Skip the action and index provided since we set it above - if (chipAction === action && i === index) continue; - this.adapter.setChipSelectedAtIndex(i, chipAction, false); - } - } - } - - private removeAfterAnimation(index: number, chipID: string) { - this.adapter.removeChipAtIndex(index); - this.adapter.emitEvent( - MDCChipSetEvents.REMOVAL, { - chipIndex: index, - isComplete: true, - chipID, - }); - - const chipCount = this.adapter.getChipCount(); - // Early exit if we have an empty chip set - if (chipCount <= 0) return; - this.focusNearestFocusableAction(index); - } - - /** - * Find the first focusable action by moving bidirectionally horizontally - * from the start index. - * - * Given chip set [A, B, C, D, E, F, G]... - * Let's say we remove chip "F". We don't know where the nearest focusable - * action is since any of them could be disabled. The nearest focusable - * action could be E, it could be G, it could even be A. To find it, we - * start from the source index (5 for "F" in this case) and move out - * horizontally, checking each chip at each index. - * - */ - private focusNearestFocusableAction(index: number) { - const chipCount = this.adapter.getChipCount(); - let decrIndex = index; - let incrIndex = index; - while (decrIndex > -1 || incrIndex < chipCount) { - const focusAction = this.getNearestFocusableAction( - decrIndex, incrIndex, MDCChipActionType.TRAILING); - if (focusAction) { - this.focusChip( - focusAction.index, focusAction.action, - MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED); - return; - } - - decrIndex--; - incrIndex++; - } - } - - private getNearestFocusableAction( - decrIndex: number, incrIndex: number, - actionType?: MDCChipActionType): FocusAction|null { - const decrAction = - this.getFocusableAction(decrIndex, Operator.DECREMENT, actionType); - if (decrAction) { - return { - index: decrIndex, - action: decrAction, - }; - } - - // Early exit if the incremented and decremented indices are identical - if (incrIndex === decrIndex) return null; - - const incrAction = - this.getFocusableAction(incrIndex, Operator.INCREMENT, actionType); - if (incrAction) { - return { - index: incrIndex, - action: incrAction, - }; - } - - return null; - } -} diff --git a/chips/chipset/lib/types.ts b/chips/chipset/lib/types.ts deleted file mode 100644 index b7afb719a9..0000000000 --- a/chips/chipset/lib/types.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from '../../chip/lib/types.js'; - -/** - * MDCChipSetInteractionEventDetail provides detail about the interaction event. - */ -export interface MDCChipSetInteractionEventDetail { - chipID: string; - chipIndex: number; -} - -/** - * MDCChipSetRemovalEventDetail provides detail about the removal event. - */ -export interface MDCChipSetRemovalEventDetail { - chipID: string; - chipIndex: number; - isComplete: boolean; -} - -/** - * MDCChipSetSelectionEventDetail provides detail about the selection event. - */ -export interface MDCChipSetSelectionEventDetail { - chipID: string; - chipIndex: number; - isSelected: boolean; -} - -/** - * ChipInteractionEvent is the custom event for the interaction event. - */ -export type ChipInteractionEvent = CustomEvent; - -/** - * ChipNavigationEvent is the custom event for the navigation event. - */ -export type ChipNavigationEvent = CustomEvent; - -/** - * ChipAnimationEvent is the custom event for the animation event. - */ -export type ChipAnimationEvent = CustomEvent;