View difference between Paste ID: 37keZg4B and RMczVF6C
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 = [];
25+
26
    let _target_decorators;
27-
    let _href_initializers = [];
27+
28
    let _hasIcon_decorators;
29-
    let _target_initializers = [];
29+
30
    let _value_decorators;
31-
    let _trailingIcon_initializers = [];
31+
32
    let _assignedIcons_decorators;
33-
    let _hasIcon_initializers = [];
33+
34
        static {
35-
    let _type_initializers = [];
35+
36
            __esDecorate(this, null, _disabled_decorators, __esContext(84, "disabled", null, _metadata), _instanceExtraInitializers);
37-
    let _value_initializers = [];
37+
            __esDecorate(this, null, _href_decorators, __esContext(84, "href", null, _metadata), _instanceExtraInitializers);
38
            __esDecorate(this, null, _target_decorators, __esContext(84, "target", null, _metadata), _instanceExtraInitializers);
39-
    let _buttonElement_initializers = [];
39+
            __esDecorate(this, null, _trailingIcon_decorators, __esContext(84, "trailingIcon", null, _metadata),  _instanceExtraInitializers);
40
            __esDecorate(this, null, _hasIcon_decorators, __esContext(84, "hasIcon", null, _metadata), _instanceExtraInitializers);
41-
    let _assignedIcons_initializers = [];
41+
            __esDecorate(this, null, _type_decorators, __esContext(84, "type", null, _metadata), _instanceExtraInitializers);
42
            __esDecorate(this, null, _value_decorators, __esContext(84, "value", null, _metadata), _instanceExtraInitializers);
43
            __esDecorate(this, null, _buttonElement_decorators, __esContext(84, "buttonElement", null, _metadata), 
44
_instanceExtraInitializers);
45-
            __esDecorate(this, null, _disabled_decorators, __esContext(84, "disabled", null, _metadata), _disabled_initializers, _instanceExtraInitializers);
45+
            __esDecorate(this, null, _assignedIcons_decorators, __esContext(84, "assignedIcons", null, _metadata),  _instanceExtraInitializers);
46-
            __esDecorate(this, null, _href_decorators, __esContext(84, "href", null, _metadata), _href_initializers, _instanceExtraInitializers);
46+
47-
            __esDecorate(this, null, _target_decorators, __esContext(84, "target", null, _metadata), _target_initializers, _instanceExtraInitializers);
47+
48-
            __esDecorate(this, null, _trailingIcon_decorators, __esContext(84, "trailingIcon", null, _metadata), _trailingIcon_initializers, _instanceExtraInitializers);
48+
49-
            __esDecorate(this, null, _hasIcon_decorators, __esContext(84, "hasIcon", null, _metadata), _hasIcon_initializers, _instanceExtraInitializers);
49+
50-
            __esDecorate(this, null, _type_decorators, __esContext(84, "type", null, _metadata), _type_initializers, _instanceExtraInitializers);
50+
51-
            __esDecorate(this, null, _value_decorators, __esContext(84, "value", null, _metadata), _value_initializers, _instanceExtraInitializers);
51+
52-
            __esDecorate(this, null, _buttonElement_decorators, __esContext(84, "buttonElement", null, _metadata), _buttonElement_initializers, _instanceExtraInitializers);
52+
53-
            __esDecorate(this, null, _assignedIcons_decorators, __esContext(84, "assignedIcons", null, _metadata), _assignedIcons_initializers, _instanceExtraInitializers);
53+
54
        /** @nocollapse */
55
        static shadowRootOptions = { mode: 'open', delegatesFocus: true };
56
        #disabled_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, "disabled", false));
57
        /**
58
         * Whether or not the button is disabled.
59
         */
60
        get disabled() { return this.#disabled_accessor_storage; }
61
        set disabled(value) { this.#disabled_accessor_storage = value; }
62
        #href_accessor_storage = __runInitializers(this, "href", '');
63
        /**
64-
        #disabled_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false));
64+
65
         */
66
        get href() { return this.#href_accessor_storage; }
67
        set href(value) { this.#href_accessor_storage = value; }
68
        #target_accessor_storage = __runInitializers(this, "target", '');
69
        /**
70-
        #href_accessor_storage = __runInitializers(this, _href_initializers, '');
70+
71
         * include `_blank` to open in a new tab.
72
         */
73
        get target() { return this.#target_accessor_storage; }
74
        set target(value) { this.#target_accessor_storage = value; }
75
        #trailingIcon_accessor_storage = __runInitializers(this, "trailingIcon", false);
76-
        #target_accessor_storage = __runInitializers(this, _target_initializers, '');
76+
77
         * Whether to render the icon at the inline end of the label rather than the
78
         * inline start.
79
         *
80
         * _Note:_ Link buttons cannot have trailing icons.
81
         */
82
        get trailingIcon() { return this.#trailingIcon_accessor_storage; }
83-
        #trailingIcon_accessor_storage = __runInitializers(this, _trailingIcon_initializers, false);
83+
84
        #hasIcon_accessor_storage = __runInitializers(this, "hasIcon", false);
85
        /**
86
         * Whether to display the icon or not.
87
         */
88
        get hasIcon() { return this.#hasIcon_accessor_storage; }
89
        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
90
        #type_accessor_storage = __runInitializers(this, "type", 'submit');
91
        get type() { return this.#type_accessor_storage; }
92-
        #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, false);
92+
93
        #value_accessor_storage = __runInitializers(this, "value", '');
94
        get value() { return this.#value_accessor_storage; }
95
        set value(value) { this.#value_accessor_storage = value; }
96
        get name() {
97
            return this.getAttribute('name') ?? '';
98-
        #type_accessor_storage = __runInitializers(this, _type_initializers, 'submit');
98+
99
        set name(name) {
100
            this.setAttribute('name', name);
101-
        #value_accessor_storage = __runInitializers(this, _value_initializers, '');
101+
102
        /**
103
         * The associated form element with which this element's value will submit.
104
         */
105
        get form() {
106
            return this[internals].form;
107
        }
108
        #buttonElement_accessor_storage = __runInitializers(this, "buttonElement", void 0);
109
        get buttonElement() { return this.#buttonElement_accessor_storage; }
110
        set buttonElement(value) { this.#buttonElement_accessor_storage = value; }
111
        #assignedIcons_accessor_storage = __runInitializers(this, "assignedIcons", void 0);
112
        get assignedIcons() { return this.#assignedIcons_accessor_storage; }
113
        set assignedIcons(value) { this.#assignedIcons_accessor_storage = value; }
114
        /** @private */
115
        [(_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();
116-
        #buttonElement_accessor_storage = __runInitializers(this, _buttonElement_initializers, void 0);
116+
117
            super();
118
            if (!isServer) {
119-
        #assignedIcons_accessor_storage = __runInitializers(this, _assignedIcons_initializers, void 0);
119+
120
            }
121
        }
122
        focus() {
123
            this.buttonElement?.focus();
124
        }
125
        blur() {
126
            this.buttonElement?.blur();
127
        }
128
        render() {
129
            // Link buttons may not be disabled
130
            const isDisabled = this.disabled && !this.href;
131
            const button = this.href ? literal `a` : literal `button`;
132
            // Needed for closure conformance
133
            const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
134
            return html `
135
      <${button}
136
        class="button ${classMap(this.getRenderClasses())}"
137
        ?disabled=${isDisabled}
138
        aria-label="${ariaLabel || nothing}"
139
        aria-haspopup="${ariaHasPopup || nothing}"
140
        aria-expanded="${ariaExpanded || nothing}"
141
        href=${this.href || nothing}
142
        target=${this.target || nothing}
143
      >${this.renderContent()}</${button}>`;
144
        }
145
        getRenderClasses() {
146
            return {
147
                'button--icon-leading': !this.trailingIcon && this.hasIcon,
148
                'button--icon-trailing': this.trailingIcon && this.hasIcon,
149
            };
150
        }
151
        renderContent() {
152
            // Link buttons may not be disabled
153
            const isDisabled = this.disabled && !this.href;
154
            const icon = html$1 `<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
155
            return html$1 `
156
      ${this.renderElevation?.()}
157
      ${this.renderOutline?.()}
158
      <md-focus-ring part="focus-ring"></md-focus-ring>
159
      <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
160
      <span class="touch"></span>
161
      ${this.trailingIcon ? nothing : icon}
162
      <span class="button__label"><slot></slot></span>
163
      ${this.trailingIcon ? icon : nothing}
164
    `;
165
        }
166
        handleActivationClick = (event) => {
167
            if (!isActivationClick((event)) || !this.buttonElement) {
168
                return;
169
            }
170
            this.focus();
171
            dispatchActivationClick(this.buttonElement);
172
        };
173
        handleSlotChange() {
174
            this.hasIcon = this.assignedIcons.length > 0;
175
        }
176
    };
177
})();
178
179
export { Button };