View difference between Paste ID: RMczVF6C and 2nfpYApy
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 };