@momentum-design/components 0.15.2 → 0.15.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,240 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { html } from 'lit';
11
+ import { property } from 'lit/decorators.js';
12
+ import styles from './buttonsimple.styles';
13
+ import { Component } from '../../models';
14
+ import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
15
+ /**
16
+ * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
17
+ * It is used as an internal component and is not intended to be used directly by consumers.
18
+ * Consumers should use the `mdc-button` component instead.
19
+ *
20
+ * @tagname mdc-buttonsimple
21
+ *
22
+ */
23
+ class Buttonsimple extends Component {
24
+ /** @internal */
25
+ get form() {
26
+ return this.internals.form;
27
+ }
28
+ constructor() {
29
+ super();
30
+ /**
31
+ * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
32
+ * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
33
+ * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
34
+ * @default false
35
+ */
36
+ this.active = false;
37
+ /**
38
+ * Indicates whether the button is disabled.
39
+ * When the button is disabled for user interaction; it is not focusable or clickable.
40
+ * @default false
41
+ */
42
+ this.disabled = false;
43
+ /**
44
+ * Indicates whether the button is soft disabled.
45
+ * When set to `true`, the button appears visually disabled but still allows
46
+ * focus, click, and keyboard actions to be passed through.
47
+ *
48
+ * **Important:** When using soft disabled, consumers must ensure that
49
+ * the button behaves like a disabled button, allowing only focus and
50
+ * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
51
+ * @default false
52
+ */
53
+ this.softDisabled = false;
54
+ /**
55
+ * Button sizing is based on the button type.
56
+ * - **Pill button**: 40, 32, 28, 24.
57
+ * - **Icon button**: 64, 52, 40, 32, 28, 24.
58
+ * - Tertiary icon button cam also be 20.
59
+ * @default 32
60
+ */
61
+ this.size = DEFAULTS.SIZE;
62
+ /**
63
+ * The tabindex of the button.
64
+ * @default 0
65
+ */
66
+ this.tabIndex = 0;
67
+ /**
68
+ * This property defines the ARIA role for the element. By default, it is set to 'button'.
69
+ * Consumers should override this role when:
70
+ * - The element is being used in a context where a different role is more appropriate.
71
+ * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
72
+ * @default button
73
+ */
74
+ this.role = DEFAULTS.ROLE;
75
+ /**
76
+ * This property defines the type attribute for the button element.
77
+ * The type attribute specifies the behavior of the button when it is clicked.
78
+ * - **submit**: The button submits the form data to the server.
79
+ * - **reset**: The button resets the form data to its initial state.
80
+ * - **button**: The button does nothing when clicked.
81
+ * @default button
82
+ */
83
+ this.type = DEFAULTS.TYPE;
84
+ /**
85
+ * @internal
86
+ */
87
+ this.prevTabindex = 0;
88
+ this.addEventListener('click', this.executeAction.bind(this));
89
+ this.addEventListener('keydown', this.handleKeyDown.bind(this));
90
+ this.addEventListener('keyup', this.handleKeyUp.bind(this));
91
+ /** @internal */
92
+ this.internals = this.attachInternals();
93
+ }
94
+ update(changedProperties) {
95
+ super.update(changedProperties);
96
+ if (changedProperties.has('disabled')) {
97
+ this.setDisabled(this, this.disabled);
98
+ }
99
+ if (changedProperties.has('softDisabled')) {
100
+ this.setSoftDisabled(this, this.softDisabled);
101
+ }
102
+ if (changedProperties.has('active')) {
103
+ this.setAriaPressed(this, this.active);
104
+ }
105
+ }
106
+ executeAction() {
107
+ if (this.type === BUTTON_TYPE.SUBMIT && this.internals.form) {
108
+ this.internals.form.requestSubmit();
109
+ }
110
+ if (this.type === BUTTON_TYPE.RESET && this.internals.form) {
111
+ this.internals.form.reset();
112
+ }
113
+ }
114
+ /**
115
+ * Sets the aria-pressed attribute based on the active state.
116
+ *
117
+ * @param element - The target element.
118
+ * @param active - The active state.
119
+ */
120
+ setAriaPressed(element, active) {
121
+ if (active) {
122
+ element.setAttribute('aria-pressed', 'true');
123
+ }
124
+ else {
125
+ element.setAttribute('aria-pressed', 'false');
126
+ }
127
+ }
128
+ /**
129
+ * Sets the soft-disabled attribute for the button.
130
+ * When soft-disabled, the button looks to be disabled but remains focusable and clickable.
131
+ * Also sets/removes aria-disabled attribute.
132
+ *
133
+ * @param element - The button element.
134
+ * @param softDisabled - The soft-disabled state.
135
+ */
136
+ setSoftDisabled(element, softDisabled) {
137
+ if (softDisabled) {
138
+ element.setAttribute('aria-disabled', 'true');
139
+ }
140
+ else {
141
+ element.setAttribute('aria-disabled', 'false');
142
+ }
143
+ }
144
+ /**
145
+ * Sets the disabled attribute for the button.
146
+ * When disabled, the button is not focusable or clickable, and tabindex is set to -1.
147
+ * The previous tabindex is stored and restored when enabled.
148
+ * Also sets/removes aria-disabled attribute.
149
+ *
150
+ * @param element - The button element.
151
+ * @param disabled - The disabled state.
152
+ */
153
+ setDisabled(element, disabled) {
154
+ if (disabled) {
155
+ element.setAttribute('aria-disabled', 'true');
156
+ this.prevTabindex = this.tabIndex;
157
+ this.tabIndex = -1;
158
+ }
159
+ else {
160
+ this.tabIndex = this.prevTabindex;
161
+ element.removeAttribute('aria-disabled');
162
+ }
163
+ }
164
+ triggerClickEvent() {
165
+ const clickEvent = new MouseEvent('click', {
166
+ bubbles: true,
167
+ cancelable: true,
168
+ view: window,
169
+ });
170
+ this.dispatchEvent(clickEvent);
171
+ this.executeAction();
172
+ }
173
+ /**
174
+ * Handles the keydown event on the button.
175
+ * If the key is 'Enter' or 'Space', the button is pressed.
176
+ * If the key is 'Enter', the button is pressed. The native HTML button works in the same way.
177
+ *
178
+ * @param event - The keyboard event.
179
+ */
180
+ handleKeyDown(event) {
181
+ if (['Enter', ' '].includes(event.key)) {
182
+ this.classList.add('pressed');
183
+ if (event.key === 'Enter') {
184
+ this.triggerClickEvent();
185
+ }
186
+ }
187
+ }
188
+ /**
189
+ * Handles the keyup event on the button.
190
+ * If the key is 'Enter' or 'Space', the button is clicked.
191
+ * If the key is 'Space', the button is pressed. The native HTML button works in the same way.
192
+ *
193
+ * @param event - The keyboard event.
194
+ */
195
+ handleKeyUp(event) {
196
+ if (['Enter', ' '].includes(event.key)) {
197
+ this.classList.remove('pressed');
198
+ if (event.key === ' ') {
199
+ this.triggerClickEvent();
200
+ }
201
+ }
202
+ }
203
+ render() {
204
+ return html `
205
+ <slot></slot>
206
+ `;
207
+ }
208
+ }
209
+ /** @internal */
210
+ Buttonsimple.formAssociated = true;
211
+ Buttonsimple.styles = [...Component.styles, ...styles];
212
+ __decorate([
213
+ property({ type: Boolean }),
214
+ __metadata("design:type", Object)
215
+ ], Buttonsimple.prototype, "active", void 0);
216
+ __decorate([
217
+ property({ type: Boolean }),
218
+ __metadata("design:type", Object)
219
+ ], Buttonsimple.prototype, "disabled", void 0);
220
+ __decorate([
221
+ property({ type: Boolean, attribute: 'soft-disabled' }),
222
+ __metadata("design:type", Object)
223
+ ], Buttonsimple.prototype, "softDisabled", void 0);
224
+ __decorate([
225
+ property({ type: Number, reflect: true }),
226
+ __metadata("design:type", Number)
227
+ ], Buttonsimple.prototype, "size", void 0);
228
+ __decorate([
229
+ property({ type: Number, reflect: true }),
230
+ __metadata("design:type", Object)
231
+ ], Buttonsimple.prototype, "tabIndex", void 0);
232
+ __decorate([
233
+ property({ type: String, reflect: true }),
234
+ __metadata("design:type", Object)
235
+ ], Buttonsimple.prototype, "role", void 0);
236
+ __decorate([
237
+ property({ reflect: true }),
238
+ __metadata("design:type", String)
239
+ ], Buttonsimple.prototype, "type", void 0);
240
+ export default Buttonsimple;
@@ -0,0 +1,25 @@
1
+ declare const TAG_NAME: "mdc-buttonsimple";
2
+ declare const BUTTON_SIZES: {
3
+ readonly 20: 20;
4
+ readonly 24: 24;
5
+ readonly 28: 28;
6
+ readonly 32: 32;
7
+ readonly 40: 40;
8
+ readonly 48: 48;
9
+ readonly 52: 52;
10
+ readonly 64: 64;
11
+ readonly 72: 72;
12
+ readonly 88: 88;
13
+ readonly 124: 124;
14
+ };
15
+ declare const BUTTON_TYPE: {
16
+ readonly BUTTON: "button";
17
+ readonly SUBMIT: "submit";
18
+ readonly RESET: "reset";
19
+ };
20
+ declare const DEFAULTS: {
21
+ SIZE: 32;
22
+ TYPE: "button";
23
+ ROLE: string;
24
+ };
25
+ export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };
@@ -0,0 +1,26 @@
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('buttonsimple');
3
+ const BUTTON_SIZES = {
4
+ 20: 20,
5
+ 24: 24,
6
+ 28: 28,
7
+ 32: 32,
8
+ 40: 40,
9
+ 48: 48,
10
+ 52: 52,
11
+ 64: 64,
12
+ 72: 72,
13
+ 88: 88,
14
+ 124: 124,
15
+ };
16
+ const BUTTON_TYPE = {
17
+ BUTTON: 'button',
18
+ SUBMIT: 'submit',
19
+ RESET: 'reset',
20
+ };
21
+ const DEFAULTS = {
22
+ SIZE: BUTTON_SIZES[32],
23
+ TYPE: BUTTON_TYPE.BUTTON,
24
+ ROLE: 'button',
25
+ };
26
+ export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };
@@ -0,0 +1,2 @@
1
+ declare const styles: import("lit").CSSResult[];
2
+ export default styles;
@@ -0,0 +1,60 @@
1
+ import { css } from 'lit';
2
+ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
3
+ const styles = [hostFitContentStyles, css `
4
+ :host {
5
+ border: 0.0625rem solid transparent;
6
+ cursor: pointer;
7
+
8
+ background-color: var(--mds-color-theme-text-primary-normal);
9
+ color: var(--mds-color-theme-inverted-text-secondary-normal);
10
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
11
+ outline: none;
12
+
13
+ --mdc-button-height-size-124: 7.75rem;
14
+ --mdc-button-height-size-88: 5.5rem;
15
+ --mdc-button-height-size-72: 4.5rem;
16
+ --mdc-button-height-size-64: 4rem;
17
+ --mdc-button-height-size-52: 3.25rem;
18
+ --mdc-button-height-size-40: 2.5rem;
19
+ --mdc-button-height-size-32: 2rem;
20
+ --mdc-button-height-size-28: 1.75rem;
21
+ --mdc-button-height-size-24: 1.5rem;
22
+ --mdc-button-height-size-20: 1.25rem;
23
+ }
24
+
25
+ :host([disabled]), :host([soft-disabled]){
26
+ background-color: var(--mds-color-theme-text-primary-disabled);
27
+ }
28
+ :host([size="124"]){
29
+ height: var(--mdc-button-height-size-124);
30
+ }
31
+ :host([size="88"]){
32
+ height: var(--mdc-button-height-size-88);
33
+ }
34
+ :host([size="72"]){
35
+ height: var(--mdc-button-height-size-72);
36
+ }
37
+ :host([size="64"]){
38
+ height: var(--mdc-button-height-size-64);
39
+ }
40
+ :host([size="52"]){
41
+ height: var(--mdc-button-height-size-52);
42
+ }
43
+ :host([size="40"]){
44
+ height: var(--mdc-button-height-size-40);
45
+ }
46
+ :host([size="32"]){
47
+ height: var(--mdc-button-height-size-32);
48
+ }
49
+ :host([size="28"]){
50
+ height: var(--mdc-button-height-size-28);
51
+ font-size: var(--mds-font-size-body-midsize);
52
+ }
53
+ :host([size="24"]){
54
+ height: var(--mdc-button-height-size-24);
55
+ }
56
+ :host([size="20"]){
57
+ height: var(--mdc-button-height-size-20);
58
+ }
59
+ `, hostFocusRingStyles];
60
+ export default styles;
@@ -0,0 +1,5 @@
1
+ import type { ValueOf } from '../../utils/types';
2
+ import { BUTTON_TYPE, BUTTON_SIZES } from './buttonsimple.constants';
3
+ type ButtonSize = ValueOf<typeof BUTTON_SIZES>;
4
+ type ButtonType = ValueOf<typeof BUTTON_TYPE>;
5
+ export { ButtonSize, ButtonType, };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,7 @@
1
+ import Buttonsimple from './buttonsimple.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-buttonsimple']: Buttonsimple;
5
+ }
6
+ }
7
+ export default Buttonsimple;
@@ -0,0 +1,4 @@
1
+ import Buttonsimple from './buttonsimple.component';
2
+ import { TAG_NAME } from './buttonsimple.constants';
3
+ Buttonsimple.register(TAG_NAME);
4
+ export default Buttonsimple;