mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
chore: move list into the new directory
PiperOrigin-RevId: 460539830
This commit is contained in:
parent
5aafcaafb4
commit
24ff3621e4
229
list/lib/_list-item-theme.scss
Normal file
229
list/lib/_list-item-theme.scss
Normal file
@ -0,0 +1,229 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
// TODO(b/228217731): Remove compat dependencies
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
@use '@material/web/compat/theme/state';
|
||||
@use '@material/web/sass/resolvers';
|
||||
@use '@material/web/sass/theme';
|
||||
|
||||
$selectors: (
|
||||
disabled: '.md3-list-item--disabled',
|
||||
);
|
||||
|
||||
$light-theme: (
|
||||
container-height: 56px,
|
||||
container-color: transparent,
|
||||
label-text-font: string.unquote('Roboto, sans-serif'),
|
||||
label-text-size: 16px,
|
||||
label-text-tracking: 0.03125rem,
|
||||
label-text-weight: 400,
|
||||
label-text-color: #1f1f1f,
|
||||
supporting-text-font: string.unquote('Roboto, sans-serif'),
|
||||
supporting-text-size: 14px,
|
||||
supporting-text-tracking: 0.015625rem,
|
||||
supporting-text-weight: 300,
|
||||
supporting-text-color: #444746,
|
||||
trailing-supporting-text-font: string.unquote('Roboto, sans-serif'),
|
||||
trailing-supporting-text-size: 12px,
|
||||
trailing-supporting-text-tracking: 0.015625rem,
|
||||
trailing-supporting-text-weight: 300,
|
||||
trailing-supporting-text-color: #646766,
|
||||
icon-color: #444746,
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, list);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, list);
|
||||
|
||||
@include _set_container-color(
|
||||
(
|
||||
default: map.get($theme, container-color),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set-label-text-typography(
|
||||
(
|
||||
family: map.get($theme, label-text-font),
|
||||
size: map.get($theme, label-text-size),
|
||||
tracking: map.get($theme, label-text-tracking),
|
||||
weight: map.get($theme, label-text-weight),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set_label-text-ink-color(
|
||||
(
|
||||
default: map.get($theme, label-text-color),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set-supporting-text-typography(
|
||||
(
|
||||
family: map.get($theme, supporting-text-font),
|
||||
size: map.get($theme, supporting-text-size),
|
||||
tracking: map.get($theme, supporting-text-tracking),
|
||||
weight: map.get($theme, supporting-text-weight),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set_supporting-text-ink-color(
|
||||
(
|
||||
default: map.get($theme, supporting-text-color),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set-trailing-supporting-text-typography(
|
||||
(
|
||||
family: map.get($theme, supporting-text-font),
|
||||
size: map.get($theme, supporting-text-size),
|
||||
tracking: map.get($theme, supporting-text-tracking),
|
||||
weight: map.get($theme, supporting-text-weight),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set_trailing-supporting-text-ink-color(
|
||||
(
|
||||
default: map.get($theme, trailing-supporting-text-color),
|
||||
)
|
||||
);
|
||||
|
||||
@include _set-icon-ink-color(
|
||||
(
|
||||
default: map.get($theme, icon-color),
|
||||
)
|
||||
);
|
||||
|
||||
$container-height: map.get($theme, container-height);
|
||||
@include _set-height($container-height);
|
||||
}
|
||||
|
||||
@mixin _set-container-color($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-container-background-color(state.get-default-state($colors));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-label-text-typography($typography-map) {
|
||||
$family: map.get($typography-map, family);
|
||||
$size: map.get($typography-map, size);
|
||||
$tracking: map.get($typography-map, tracking);
|
||||
$weight: map.get($typography-map, weight);
|
||||
$transform: map.get($typography-map, transform);
|
||||
|
||||
.md3-list-item__label-text {
|
||||
font-family: $family;
|
||||
font-size: $size;
|
||||
letter-spacing: $tracking;
|
||||
font-weight: $weight;
|
||||
text-transform: $transform;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-label-text-ink-color($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-label-text-color(state.get-default-state($colors));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-supporting-text-typography($typography-map) {
|
||||
$family: map.get($typography-map, family);
|
||||
$size: map.get($typography-map, size);
|
||||
$tracking: map.get($typography-map, tracking);
|
||||
$weight: map.get($typography-map, weight);
|
||||
$transform: map.get($typography-map, transform);
|
||||
|
||||
.md3-list-item__supporting-text {
|
||||
font-family: $family;
|
||||
font-size: $size;
|
||||
letter-spacing: $tracking;
|
||||
font-weight: $weight;
|
||||
text-transform: $transform;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-supporting-text-ink-color($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-supporting-text-color(state.get-default-state($colors));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-trailing-supporting-text-typography($typography-map) {
|
||||
$family: map.get($typography-map, family);
|
||||
$size: map.get($typography-map, size);
|
||||
$tracking: map.get($typography-map, tracking);
|
||||
$weight: map.get($typography-map, weight);
|
||||
$transform: map.get($typography-map, transform);
|
||||
|
||||
.md3-list-item__trailing-supporting-text {
|
||||
font-family: $family;
|
||||
font-size: $size;
|
||||
letter-spacing: $tracking;
|
||||
font-weight: $weight;
|
||||
text-transform: $transform;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-trailing-supporting-text-ink-color($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-trailing-supporting-text-color(
|
||||
state.get-default-state($colors)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-icon-ink-color($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-icon-color(state.get-default-state($colors));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-height($height) {
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin _set-container-background-color($color) {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin _set-label-text-color($color) {
|
||||
.md3-list-item__label-text {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-supporting-text-color($color) {
|
||||
.md3-list-item__supporting-text {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-trailing-supporting-text-color($color) {
|
||||
.md3-list-item__trailing-supporting-text {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-icon-color($color) {
|
||||
&.md3-list-item--with-leading-icon .md3-list-item__start {
|
||||
color: $color;
|
||||
}
|
||||
}
|
129
list/lib/_list-item.scss
Normal file
129
list/lib/_list-item.scss
Normal file
@ -0,0 +1,129 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin static-styles() {
|
||||
:host {
|
||||
@include host-root;
|
||||
}
|
||||
|
||||
.md3-list-item {
|
||||
@include item-root;
|
||||
}
|
||||
|
||||
.md3-list-item--with-leading-icon {
|
||||
@include icon-item-root;
|
||||
}
|
||||
|
||||
.md3-list-item--with-leading-avatar {
|
||||
@include avatar-item-root;
|
||||
}
|
||||
|
||||
.md3-list-item--with-leading-thumbnail {
|
||||
@include thumbnail-item-root;
|
||||
}
|
||||
|
||||
.md3-list-item--with-leading-image {
|
||||
@include image-item-root;
|
||||
}
|
||||
|
||||
.md3-list-item--with-leading-video {
|
||||
@include video-item-root;
|
||||
}
|
||||
|
||||
.md3-list-item__icon {
|
||||
@include icon-root;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin host-root() {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
@mixin item-root() {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
.md3-list-item__start {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.md3-list-item__body {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.md3-list-item__end {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.md3-list-item__label-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md3-list-item__supporting-text {
|
||||
display: block;
|
||||
margin-block-start: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-item-root() {
|
||||
.md3-list-item__start {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar-item-root() {
|
||||
.md3-list-item__start {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumbnail-item-root() {
|
||||
.md3-list-item__start {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin image-item-root() {
|
||||
.md3-list-item__start {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin video-item-root() {
|
||||
.md3-list-item__start {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-root() {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
52
list/lib/_list-theme.scss
Normal file
52
list/lib/_list-theme.scss
Normal file
@ -0,0 +1,52 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// TODO(b/228217731): Remove MDC/MWC dependencies
|
||||
@use 'sass:map';
|
||||
@use '@material/web/compat/theme/state';
|
||||
@use '@material/web/sass/resolvers';
|
||||
@use '@material/web/sass/theme';
|
||||
|
||||
$selectors: (
|
||||
disabled: '.md3-list--disabled',
|
||||
);
|
||||
|
||||
$light-theme: (
|
||||
color: unset,
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, list);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, list);
|
||||
|
||||
@include _colors(
|
||||
(
|
||||
default: map.get($theme, color),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin _colors($colors) {
|
||||
@include state.enabled($selectors) {
|
||||
@include _set-color(state.get-default-state($colors));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _set-color($color) {
|
||||
color: $color;
|
||||
}
|
30
list/lib/_list.scss
Normal file
30
list/lib/_list.scss
Normal file
@ -0,0 +1,30 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@mixin static-styles() {
|
||||
:host {
|
||||
@include host-root;
|
||||
}
|
||||
|
||||
.md3-list {
|
||||
@include root;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin host-root() {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
@mixin root() {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-block: 8px;
|
||||
list-style-type: none;
|
||||
min-width: 300px;
|
||||
}
|
21
list/lib/constants.ts
Normal file
21
list/lib/constants.ts
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ListItemState} from './state';
|
||||
|
||||
/**
|
||||
* ListItemInteractionEventDetail provides details for the interaction
|
||||
* event.
|
||||
*/
|
||||
export interface ListItemInteractionEventDetail {
|
||||
state: ListItemState;
|
||||
}
|
||||
|
||||
/**
|
||||
* ListItemInteractionEvent is the custom event for the interaction event.
|
||||
*/
|
||||
export type ListItemInteractionEvent =
|
||||
CustomEvent<ListItemInteractionEventDetail>;
|
20
list/lib/list-item-icon.ts
Normal file
20
list/lib/list-item-icon.ts
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {html, LitElement, TemplateResult} from 'lit';
|
||||
import {property} from 'lit/decorators';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class ListItemIcon extends LitElement {
|
||||
@property({type: String, reflect: true}) media = 'icon';
|
||||
|
||||
/** @soyTemplate */
|
||||
override render(): TemplateResult {
|
||||
return html`
|
||||
<span class="md3-list-item__icon"><slot></slot></span>
|
||||
`;
|
||||
}
|
||||
}
|
16
list/lib/list-item-styles.scss
Normal file
16
list/lib/list-item-styles.scss
Normal file
@ -0,0 +1,16 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './list-item-theme';
|
||||
@use './list-item';
|
||||
|
||||
@include list-item.static-styles;
|
||||
|
||||
.md3-list-item {
|
||||
@include list-item-theme.theme-styles(list-item-theme.$light-theme);
|
||||
}
|
114
list/lib/list-item.ts
Normal file
114
list/lib/list-item.ts
Normal file
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ARIARole} from '@material/web/types/aria';
|
||||
import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
|
||||
import {property, queryAssignedElements, state} from 'lit/decorators';
|
||||
import {ClassInfo, classMap} from 'lit/directives/class-map';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class ListItem extends LitElement {
|
||||
@property({type: String}) supportingText = '';
|
||||
@property({type: String}) trailingSupportingText = '';
|
||||
|
||||
@queryAssignedElements(
|
||||
{slot: 'start', flatten: true, selector: '[media=icon]'})
|
||||
protected leadingIcon!: HTMLElement[];
|
||||
|
||||
@queryAssignedElements({slot: 'end', flatten: true, selector: '[media=icon]'})
|
||||
protected trailingIcon!: HTMLElement[];
|
||||
|
||||
@property() hasLeadingIcon = false;
|
||||
@property() hasTrailingIcon = false;
|
||||
|
||||
/** @soyTemplate */
|
||||
override render(): TemplateResult {
|
||||
return html`
|
||||
<li
|
||||
tabindex="0"
|
||||
role=${this.getAriaRole()}
|
||||
class="md3-list-item ${classMap(this.getRenderClasses())}"
|
||||
@click=${this.handleClick}>
|
||||
${this.renderStart()}
|
||||
${this.renderBody()}
|
||||
${this.renderEnd()}
|
||||
</li>`;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected getAriaRole(): ARIARole {
|
||||
return 'listitem';
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected getRenderClasses(): ClassInfo {
|
||||
return {
|
||||
'md3-list-item--with-one-line': this.supportingText === '',
|
||||
'md3-list-item--with-two-lines': this.supportingText !== '',
|
||||
'md3-list-item--with-leading-icon': this.hasLeadingIcon,
|
||||
'md3-list-item--with-trailing-icon': this.hasTrailingIcon,
|
||||
};
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderStart(): TemplateResult {
|
||||
return html`<div class="md3-list-item__start"><!--
|
||||
--><slot name="start" @slotchange=${this.handleSlotChange}></slot><!--
|
||||
--></div>`;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderBody(): TemplateResult {
|
||||
return html`<div class="md3-list-item__body"><!--
|
||||
--><span class="md3-list-item__label-text"><!--
|
||||
--><slot @slotchange=${this.handleSlotChange}></slot><!--
|
||||
--></span><!--
|
||||
-->${this.supportingText !== '' ? this.renderSupportingText() : ''}<!--
|
||||
--></div>`;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderSupportingText(): TemplateResult {
|
||||
return html`<span class="md3-list-item__supporting-text"><!--
|
||||
-->${this.supportingText}<!--
|
||||
--></span>`;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderEnd(): TemplateResult {
|
||||
return html`<div class="md3-list-item__end"><!--
|
||||
--><slot name="end" @slotchange=${this.handleSlotChange}><!--
|
||||
-->${
|
||||
this.trailingSupportingText !== '' ?
|
||||
this.renderTrailingSupportingText() :
|
||||
''}<!--
|
||||
--></slot><!--
|
||||
--></div>`;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderTrailingSupportingText(): TemplateResult {
|
||||
return html`<span class="md3-list-item__trailing-supporting-text"><!--
|
||||
-->${this.trailingSupportingText}<!--
|
||||
--></span>`;
|
||||
}
|
||||
|
||||
protected handleSlotChange() {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
handleClick() {}
|
||||
|
||||
override update(changedProperties: PropertyValues<this>) {
|
||||
this.updateMetadata();
|
||||
super.update(changedProperties);
|
||||
}
|
||||
|
||||
private updateMetadata() {
|
||||
this.hasLeadingIcon = this.leadingIcon.length > 0;
|
||||
this.hasTrailingIcon = this.trailingIcon.length > 0;
|
||||
}
|
||||
}
|
16
list/lib/list-styles.scss
Normal file
16
list/lib/list-styles.scss
Normal file
@ -0,0 +1,16 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './list-theme';
|
||||
@use './list';
|
||||
|
||||
@include list.static-styles;
|
||||
|
||||
.md3-list {
|
||||
@include list-theme.theme-styles(list-theme.$light-theme);
|
||||
}
|
40
list/lib/list.ts
Normal file
40
list/lib/list.ts
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ARIARole} from '@material/web/types/aria';
|
||||
import {html, LitElement, TemplateResult} from 'lit';
|
||||
|
||||
import {ListItemInteractionEvent} from './constants';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class List extends LitElement {
|
||||
static override shadowRootOptions:
|
||||
ShadowRootInit = {mode: 'open', delegatesFocus: true};
|
||||
|
||||
/** @soyTemplate */
|
||||
protected getAriaRole(): ARIARole {
|
||||
return 'list';
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
override render(): TemplateResult {
|
||||
return html`
|
||||
<ul class="md3-list"
|
||||
tabindex="0"
|
||||
role=${this.getAriaRole()}
|
||||
@list-item-interaction=${this.handleItemInteraction}>
|
||||
<slot></slot>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
handleItemInteraction(event: ListItemInteractionEvent) {
|
||||
if (event.detail.state.isSelected) {
|
||||
// TODO: manage selection state.
|
||||
}
|
||||
}
|
||||
}
|
23
list/lib/option-list-item.ts
Normal file
23
list/lib/option-list-item.ts
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ARIARole} from '@material/web/types/aria';
|
||||
|
||||
import {ListItem} from './list-item';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class OptionListItem extends ListItem {
|
||||
/** @soyTemplate */
|
||||
protected override getAriaRole(): ARIARole {
|
||||
return 'option';
|
||||
}
|
||||
|
||||
override handleClick() {
|
||||
this.dispatchEvent(new CustomEvent(
|
||||
'list-item-interaction',
|
||||
{detail: {state: {isSelected: false}}, bubbles: true, composed: true}));
|
||||
}
|
||||
}
|
17
list/lib/option-list.ts
Normal file
17
list/lib/option-list.ts
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ARIARole} from '@material/web/types/aria';
|
||||
|
||||
import {List} from './list';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class OptionList extends List {
|
||||
/** @soyTemplate */
|
||||
protected override getAriaRole(): ARIARole {
|
||||
return 'listbox';
|
||||
}
|
||||
}
|
15
list/lib/state.ts
Normal file
15
list/lib/state.ts
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* The state of a list item.
|
||||
*/
|
||||
export interface ListItemState {
|
||||
/**
|
||||
* Whether the item is currently selected.
|
||||
*/
|
||||
isSelected: boolean;
|
||||
}
|
26
list/list-item-icon.ts
Normal file
26
list/list-item-icon.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {customElement} from 'lit/decorators';
|
||||
|
||||
import {ListItemIcon} from './lib/list-item-icon';
|
||||
import {styles} from './lib/list-item-styles.css';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-list-item-icon': MdListItemIcon;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-list-item-icon')
|
||||
export class MdListItemIcon extends ListItemIcon {
|
||||
static override styles = [styles];
|
||||
}
|
26
list/list-item.ts
Normal file
26
list/list-item.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {customElement} from 'lit/decorators';
|
||||
|
||||
import {ListItem} from './lib/list-item';
|
||||
import {styles} from './lib/list-item-styles.css';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-list-item': MdListItem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-list-item')
|
||||
export class MdListItem extends ListItem {
|
||||
static override styles = [styles];
|
||||
}
|
26
list/list.ts
Normal file
26
list/list.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {customElement} from 'lit/decorators';
|
||||
|
||||
import {List} from './lib/list';
|
||||
import {styles} from './lib/list-styles.css';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-list': MdList;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-list')
|
||||
export class MdList extends List {
|
||||
static override styles = [styles];
|
||||
}
|
26
list/option-list-item.ts
Normal file
26
list/option-list-item.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {customElement} from 'lit/decorators';
|
||||
|
||||
import {styles} from './lib/list-item-styles.css'
|
||||
import {OptionListItem} from './lib/option-list-item';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-option-list-item': MdOptionListItem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-option-list-item')
|
||||
export class MdOptionListItem extends OptionListItem {
|
||||
static override styles = [styles];
|
||||
}
|
26
list/option-list.ts
Normal file
26
list/option-list.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {customElement} from 'lit/decorators';
|
||||
|
||||
import {styles} from './lib/list-styles.css';
|
||||
import {OptionList} from './lib/option-list';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-option-list': MdOptionList;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-option-list')
|
||||
export class MdOptionList extends OptionList {
|
||||
static override styles = [styles];
|
||||
}
|
Loading…
Reference in New Issue
Block a user