SHOW:
|
|
- or go back to the newest paste.
| 1 | import { __esDecorate, __runInitializers } from '../../node_modules/tslib/tslib.es6.js';
| |
| 2 | import '../../focus/md-focus-ring.js'; | |
| 3 | import '../../ripple/ripple.js'; | |
| 4 | import { isServer, nothing, html as html$1, LitElement } from 'lit';
| |
| 5 | import { property, query, queryAssignedElements } from 'lit/decorators.js';
| |
| 6 | import { classMap } from 'lit/directives/class-map.js';
| |
| 7 | import { literal, html } from 'lit/static-html.js';
| |
| 8 | import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
| |
| 9 | import { internals } from '../../internal/controller/element-internals.js';
| |
| 10 | import { isActivationClick, dispatchActivationClick } from '../../internal/controller/events.js';
| |
| 11 | import { setupFormSubmitter } from '../../internal/controller/form-submitter.js';
| |
| 12 | ||
| 13 | /** | |
| 14 | * @license | |
| 15 | * Copyright 2019 Google LLC | |
| 16 | * SPDX-License-Identifier: Apache-2.0 | |
| 17 | */ | |
| 18 | /** | |
| 19 | * A button component. | |
| 20 | */ | |
| 21 | let Button = (() => {
| |
| 22 | let _classSuper = LitElement; | |
| 23 | let _instanceExtraInitializers = []; | |
| 24 | let _disabled_decorators; | |
| 25 | let _disabled_initializers = []; | |
| 26 | let _href_decorators; | |
| 27 | let _href_initializers = []; | |
| 28 | let _target_decorators; | |
| 29 | let _target_initializers = []; | |
| 30 | let _trailingIcon_decorators; | |
| 31 | let _trailingIcon_initializers = []; | |
| 32 | let _hasIcon_decorators; | |
| 33 | let _hasIcon_initializers = []; | |
| 34 | let _type_decorators; | |
| 35 | let _type_initializers = []; | |
| 36 | let _value_decorators; | |
| 37 | let _value_initializers = []; | |
| 38 | let _buttonElement_decorators; | |
| 39 | let _buttonElement_initializers = []; | |
| 40 | let _assignedIcons_decorators; | |
| 41 | let _assignedIcons_initializers = []; | |
| 42 | return class Button extends _classSuper {
| |
| 43 | static {
| |
| 44 | const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0; | |
| 45 | - | __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _instanceExtraInitializers);
|
| 45 | + | __esDecorate(this, null, _disabled_decorators, __esContext(84, "disabled", null, _metadata), _disabled_initializers, _instanceExtraInitializers); |
| 46 | - | __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _instanceExtraInitializers);
|
| 46 | + | __esDecorate(this, null, _href_decorators, __esContext(84, "href", null, _metadata), _href_initializers, _instanceExtraInitializers); |
| 47 | - | __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _instanceExtraInitializers);
|
| 47 | + | __esDecorate(this, null, _target_decorators, __esContext(84, "target", null, _metadata), _target_initializers, _instanceExtraInitializers); |
| 48 | - | __esDecorate(this, null, _trailingIcon_decorators, { kind: "accessor", name: "trailingIcon", static: false, private: false, access: { has: obj => "trailingIcon" in obj, get: obj => obj.trailingIcon, set: (obj, value) => { obj.trailingIcon = value; } }, metadata: _metadata }, _trailingIcon_initializers, _instanceExtraInitializers);
|
| 48 | + | __esDecorate(this, null, _trailingIcon_decorators, __esContext(84, "trailingIcon", null, _metadata), _trailingIcon_initializers, _instanceExtraInitializers); |
| 49 | - | __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _instanceExtraInitializers);
|
| 49 | + | __esDecorate(this, null, _hasIcon_decorators, __esContext(84, "hasIcon", null, _metadata), _hasIcon_initializers, _instanceExtraInitializers); |
| 50 | - | __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _instanceExtraInitializers);
|
| 50 | + | __esDecorate(this, null, _type_decorators, __esContext(84, "type", null, _metadata), _type_initializers, _instanceExtraInitializers); |
| 51 | - | __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _instanceExtraInitializers);
|
| 51 | + | __esDecorate(this, null, _value_decorators, __esContext(84, "value", null, _metadata), _value_initializers, _instanceExtraInitializers); |
| 52 | - | __esDecorate(this, null, _buttonElement_decorators, { kind: "accessor", name: "buttonElement", static: false, private: false, access: { has: obj => "buttonElement" in obj, get: obj => obj.buttonElement, set: (obj, value) => { obj.buttonElement = value; } }, metadata: _metadata }, _buttonElement_initializers, _instanceExtraInitializers);
|
| 52 | + | __esDecorate(this, null, _buttonElement_decorators, __esContext(84, "buttonElement", null, _metadata), _buttonElement_initializers, _instanceExtraInitializers); |
| 53 | - | __esDecorate(this, null, _assignedIcons_decorators, { kind: "accessor", name: "assignedIcons", static: false, private: false, access: { has: obj => "assignedIcons" in obj, get: obj => obj.assignedIcons, set: (obj, value) => { obj.assignedIcons = value; } }, metadata: _metadata }, _assignedIcons_initializers, _instanceExtraInitializers);
|
| 53 | + | __esDecorate(this, null, _assignedIcons_decorators, __esContext(84, "assignedIcons", null, _metadata), _assignedIcons_initializers, _instanceExtraInitializers); |
| 54 | if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
| |
| 55 | } | |
| 56 | static {
| |
| 57 | requestUpdateOnAriaChange(Button); | |
| 58 | setupFormSubmitter(Button); | |
| 59 | } | |
| 60 | /** @nocollapse */ | |
| 61 | static formAssociated = true; | |
| 62 | /** @nocollapse */ | |
| 63 | static shadowRootOptions = { mode: 'open', delegatesFocus: true };
| |
| 64 | #disabled_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false)); | |
| 65 | /** | |
| 66 | * Whether or not the button is disabled. | |
| 67 | */ | |
| 68 | get disabled() { return this.#disabled_accessor_storage; }
| |
| 69 | set disabled(value) { this.#disabled_accessor_storage = value; }
| |
| 70 | #href_accessor_storage = __runInitializers(this, _href_initializers, ''); | |
| 71 | /** | |
| 72 | * The URL that the link button points to. | |
| 73 | */ | |
| 74 | get href() { return this.#href_accessor_storage; }
| |
| 75 | set href(value) { this.#href_accessor_storage = value; }
| |
| 76 | #target_accessor_storage = __runInitializers(this, _target_initializers, ''); | |
| 77 | /** | |
| 78 | * Where to display the linked `href` URL for a link button. Common options | |
| 79 | * include `_blank` to open in a new tab. | |
| 80 | */ | |
| 81 | get target() { return this.#target_accessor_storage; }
| |
| 82 | set target(value) { this.#target_accessor_storage = value; }
| |
| 83 | #trailingIcon_accessor_storage = __runInitializers(this, _trailingIcon_initializers, false); | |
| 84 | /** | |
| 85 | * Whether to render the icon at the inline end of the label rather than the | |
| 86 | * inline start. | |
| 87 | * | |
| 88 | * _Note:_ Link buttons cannot have trailing icons. | |
| 89 | */ | |
| 90 | get trailingIcon() { return this.#trailingIcon_accessor_storage; }
| |
| 91 | set trailingIcon(value) { this.#trailingIcon_accessor_storage = value; }
| |
| 92 | #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, false); | |
| 93 | /** | |
| 94 | * Whether to display the icon or not. | |
| 95 | */ | |
| 96 | get hasIcon() { return this.#hasIcon_accessor_storage; }
| |
| 97 | set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
| |
| 98 | #type_accessor_storage = __runInitializers(this, _type_initializers, 'submit'); | |
| 99 | get type() { return this.#type_accessor_storage; }
| |
| 100 | set type(value) { this.#type_accessor_storage = value; }
| |
| 101 | #value_accessor_storage = __runInitializers(this, _value_initializers, ''); | |
| 102 | get value() { return this.#value_accessor_storage; }
| |
| 103 | set value(value) { this.#value_accessor_storage = value; }
| |
| 104 | get name() {
| |
| 105 | return this.getAttribute('name') ?? '';
| |
| 106 | } | |
| 107 | set name(name) {
| |
| 108 | this.setAttribute('name', name);
| |
| 109 | } | |
| 110 | /** | |
| 111 | * The associated form element with which this element's value will submit. | |
| 112 | */ | |
| 113 | get form() {
| |
| 114 | return this[internals].form; | |
| 115 | } | |
| 116 | #buttonElement_accessor_storage = __runInitializers(this, _buttonElement_initializers, void 0); | |
| 117 | get buttonElement() { return this.#buttonElement_accessor_storage; }
| |
| 118 | set buttonElement(value) { this.#buttonElement_accessor_storage = value; }
| |
| 119 | #assignedIcons_accessor_storage = __runInitializers(this, _assignedIcons_initializers, void 0); | |
| 120 | get assignedIcons() { return this.#assignedIcons_accessor_storage; }
| |
| 121 | set assignedIcons(value) { this.#assignedIcons_accessor_storage = value; }
| |
| 122 | /** @private */ | |
| 123 | [(_disabled_decorators = [property({ type: Boolean, reflect: true })], _href_decorators = [property()], _target_decorators = [property()], _trailingIcon_decorators = [property({ type: Boolean, attribute: 'trailing-icon' })], _hasIcon_decorators = [property({ type: Boolean, attribute: 'has-icon' })], _type_decorators = [property()], _value_decorators = [property()], _buttonElement_decorators = [query('.button')], _assignedIcons_decorators = [queryAssignedElements({ slot: 'icon', flatten: true })], internals)] = this /* needed for closure */.attachInternals();
| |
| 124 | constructor() {
| |
| 125 | super(); | |
| 126 | if (!isServer) {
| |
| 127 | this.addEventListener('click', this.handleActivationClick);
| |
| 128 | } | |
| 129 | } | |
| 130 | focus() {
| |
| 131 | this.buttonElement?.focus(); | |
| 132 | } | |
| 133 | blur() {
| |
| 134 | this.buttonElement?.blur(); | |
| 135 | } | |
| 136 | render() {
| |
| 137 | // Link buttons may not be disabled | |
| 138 | const isDisabled = this.disabled && !this.href; | |
| 139 | const button = this.href ? literal `a` : literal `button`; | |
| 140 | // Needed for closure conformance | |
| 141 | const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
| |
| 142 | return html ` | |
| 143 | <${button}
| |
| 144 | class="button ${classMap(this.getRenderClasses())}"
| |
| 145 | ?disabled=${isDisabled}
| |
| 146 | aria-label="${ariaLabel || nothing}"
| |
| 147 | aria-haspopup="${ariaHasPopup || nothing}"
| |
| 148 | aria-expanded="${ariaExpanded || nothing}"
| |
| 149 | href=${this.href || nothing}
| |
| 150 | target=${this.target || nothing}
| |
| 151 | >${this.renderContent()}</${button}>`;
| |
| 152 | } | |
| 153 | getRenderClasses() {
| |
| 154 | return {
| |
| 155 | 'button--icon-leading': !this.trailingIcon && this.hasIcon, | |
| 156 | 'button--icon-trailing': this.trailingIcon && this.hasIcon, | |
| 157 | }; | |
| 158 | } | |
| 159 | renderContent() {
| |
| 160 | // Link buttons may not be disabled | |
| 161 | const isDisabled = this.disabled && !this.href; | |
| 162 | const icon = html$1 `<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
| |
| 163 | return html$1 ` | |
| 164 | ${this.renderElevation?.()}
| |
| 165 | ${this.renderOutline?.()}
| |
| 166 | <md-focus-ring part="focus-ring"></md-focus-ring> | |
| 167 | <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
| |
| 168 | <span class="touch"></span> | |
| 169 | ${this.trailingIcon ? nothing : icon}
| |
| 170 | <span class="button__label"><slot></slot></span> | |
| 171 | ${this.trailingIcon ? icon : nothing}
| |
| 172 | `; | |
| 173 | } | |
| 174 | handleActivationClick = (event) => {
| |
| 175 | if (!isActivationClick((event)) || !this.buttonElement) {
| |
| 176 | return; | |
| 177 | } | |
| 178 | this.focus(); | |
| 179 | dispatchActivationClick(this.buttonElement); | |
| 180 | }; | |
| 181 | handleSlotChange() {
| |
| 182 | this.hasIcon = this.assignedIcons.length > 0; | |
| 183 | } | |
| 184 | }; | |
| 185 | })(); | |
| 186 | ||
| 187 | export { Button }; |