mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 10:38:19 +03:00
41d41cc278
PiperOrigin-RevId: 455635969
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {html, TemplateResult} from 'lit';
|
|
import {ClassInfo} from 'lit/directives/class-map';
|
|
|
|
import {Field} from './field';
|
|
|
|
/** @soyCompatible */
|
|
export class OutlinedField extends Field {
|
|
/** @soyTemplate */
|
|
protected override getRenderClasses(): ClassInfo {
|
|
return {
|
|
...super.getRenderClasses(),
|
|
'md3-field--outlined': true,
|
|
};
|
|
}
|
|
|
|
/** @soyTemplate */
|
|
protected override renderContainerContents(): TemplateResult {
|
|
return html`
|
|
${this.renderOutline()}
|
|
${super.renderContainerContents()}
|
|
`;
|
|
}
|
|
|
|
/** @soyTemplate */
|
|
protected renderOutline(): TemplateResult {
|
|
return html`
|
|
<span class="md3-field__outline">
|
|
<span class="md3-field__outline-start"></span>
|
|
<span class="md3-field__outline-notch">
|
|
<span class="md3-field__outline-panel-inactive"></span>
|
|
<span class="md3-field__outline-panel-active"></span>
|
|
${this.renderFloatingLabel()}
|
|
</span>
|
|
<span class="md3-field__outline-end"></span>
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
/** @soyTemplate */
|
|
protected override renderMiddleContents(): TemplateResult {
|
|
return html`
|
|
${this.renderRestingLabel()}
|
|
${super.renderMiddleContents()}
|
|
`;
|
|
}
|
|
}
|