@italia/button 0.1.0-alpha.1 → 1.0.0-alpha.10
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.
- package/README.md +2 -2
- package/custom-elements.json +145 -47
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +5 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/it-button.d.ts +13 -6
- package/dist/src/it-button.d.ts.map +1 -1
- package/dist/src/it-button.js +1198 -193
- package/dist/src/it-button.js.map +1 -1
- package/package.json +14 -12
- package/styles/globals.scss +28 -1
package/README.md
CHANGED
|
@@ -5,14 +5,14 @@ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) reco
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm i
|
|
8
|
+
npm i @italia/button
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<script type="module">
|
|
15
|
-
import '@italia/
|
|
15
|
+
import '@italia/button';
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<it-button></it-button>
|
package/custom-elements.json
CHANGED
|
@@ -14,6 +14,14 @@
|
|
|
14
14
|
"name": "ItButton",
|
|
15
15
|
"module": "./it-button.js"
|
|
16
16
|
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "*",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "*",
|
|
23
|
+
"module": "src/types.js"
|
|
24
|
+
}
|
|
17
25
|
}
|
|
18
26
|
]
|
|
19
27
|
},
|
|
@@ -40,21 +48,11 @@
|
|
|
40
48
|
},
|
|
41
49
|
"privacy": "private"
|
|
42
50
|
},
|
|
43
|
-
{
|
|
44
|
-
"kind": "field",
|
|
45
|
-
"name": "_buttonClasses",
|
|
46
|
-
"type": {
|
|
47
|
-
"text": "string"
|
|
48
|
-
},
|
|
49
|
-
"privacy": "private",
|
|
50
|
-
"default": "''",
|
|
51
|
-
"attribute": "_buttonClasses"
|
|
52
|
-
},
|
|
53
51
|
{
|
|
54
52
|
"kind": "field",
|
|
55
53
|
"name": "type",
|
|
56
54
|
"type": {
|
|
57
|
-
"text": "
|
|
55
|
+
"text": "HTMLButtonElement['type']"
|
|
58
56
|
},
|
|
59
57
|
"default": "'button'",
|
|
60
58
|
"attribute": "type",
|
|
@@ -102,27 +100,63 @@
|
|
|
102
100
|
},
|
|
103
101
|
{
|
|
104
102
|
"kind": "field",
|
|
105
|
-
"name": "
|
|
103
|
+
"name": "value",
|
|
104
|
+
"type": {
|
|
105
|
+
"text": "string"
|
|
106
|
+
},
|
|
107
|
+
"default": "''",
|
|
108
|
+
"attribute": "value"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "field",
|
|
112
|
+
"name": "itInert",
|
|
106
113
|
"type": {
|
|
107
114
|
"text": "boolean"
|
|
108
115
|
},
|
|
109
116
|
"default": "false",
|
|
110
|
-
"attribute": "
|
|
117
|
+
"attribute": "it-inert",
|
|
111
118
|
"reflects": true
|
|
112
119
|
},
|
|
113
120
|
{
|
|
114
121
|
"kind": "field",
|
|
115
|
-
"name": "
|
|
122
|
+
"name": "internals",
|
|
123
|
+
"attribute": "internals"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"kind": "field",
|
|
127
|
+
"name": "disabled",
|
|
116
128
|
"type": {
|
|
117
|
-
"text": "
|
|
129
|
+
"text": "boolean | undefined"
|
|
118
130
|
},
|
|
119
|
-
"
|
|
120
|
-
"
|
|
131
|
+
"attribute": "disabled",
|
|
132
|
+
"reflects": true
|
|
121
133
|
},
|
|
122
134
|
{
|
|
123
135
|
"kind": "field",
|
|
124
|
-
"name": "
|
|
125
|
-
"
|
|
136
|
+
"name": "expanded",
|
|
137
|
+
"type": {
|
|
138
|
+
"text": "boolean | undefined"
|
|
139
|
+
},
|
|
140
|
+
"attribute": "it-aria-expanded",
|
|
141
|
+
"reflects": true
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"kind": "field",
|
|
145
|
+
"name": "_hasIcon",
|
|
146
|
+
"type": {
|
|
147
|
+
"text": "boolean"
|
|
148
|
+
},
|
|
149
|
+
"privacy": "private",
|
|
150
|
+
"default": "false"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "field",
|
|
154
|
+
"name": "_hasProgress",
|
|
155
|
+
"type": {
|
|
156
|
+
"text": "boolean"
|
|
157
|
+
},
|
|
158
|
+
"privacy": "private",
|
|
159
|
+
"default": "false"
|
|
126
160
|
},
|
|
127
161
|
{
|
|
128
162
|
"kind": "method",
|
|
@@ -141,25 +175,75 @@
|
|
|
141
175
|
"name": "form",
|
|
142
176
|
"readonly": true
|
|
143
177
|
},
|
|
178
|
+
{
|
|
179
|
+
"kind": "method",
|
|
180
|
+
"name": "focus",
|
|
181
|
+
"privacy": "public"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"kind": "method",
|
|
185
|
+
"name": "setDescribedBy",
|
|
186
|
+
"privacy": "public",
|
|
187
|
+
"return": {
|
|
188
|
+
"type": {
|
|
189
|
+
"text": "void"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
"parameters": [
|
|
193
|
+
{
|
|
194
|
+
"name": "element",
|
|
195
|
+
"type": {
|
|
196
|
+
"text": "Element | null"
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
]
|
|
200
|
+
},
|
|
144
201
|
{
|
|
145
202
|
"kind": "field",
|
|
146
203
|
"name": "_onKeyDown",
|
|
147
204
|
"privacy": "private"
|
|
148
|
-
}
|
|
149
|
-
],
|
|
150
|
-
"attributes": [
|
|
205
|
+
},
|
|
151
206
|
{
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
|
|
207
|
+
"kind": "method",
|
|
208
|
+
"name": "hasMatchingElement",
|
|
209
|
+
"privacy": "private",
|
|
210
|
+
"static": true,
|
|
211
|
+
"return": {
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "boolean"
|
|
214
|
+
}
|
|
155
215
|
},
|
|
156
|
-
"
|
|
157
|
-
|
|
216
|
+
"parameters": [
|
|
217
|
+
{
|
|
218
|
+
"name": "elements",
|
|
219
|
+
"type": {
|
|
220
|
+
"text": "Element[]"
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"name": "selector",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "string"
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"kind": "field",
|
|
233
|
+
"name": "_updateSlottedStates",
|
|
234
|
+
"privacy": "private"
|
|
158
235
|
},
|
|
236
|
+
{
|
|
237
|
+
"kind": "field",
|
|
238
|
+
"name": "_onSlotChange",
|
|
239
|
+
"privacy": "private"
|
|
240
|
+
}
|
|
241
|
+
],
|
|
242
|
+
"attributes": [
|
|
159
243
|
{
|
|
160
244
|
"name": "type",
|
|
161
245
|
"type": {
|
|
162
|
-
"text": "
|
|
246
|
+
"text": "HTMLButtonElement['type']"
|
|
163
247
|
},
|
|
164
248
|
"default": "'button'",
|
|
165
249
|
"fieldName": "type"
|
|
@@ -196,14 +280,6 @@
|
|
|
196
280
|
"default": "false",
|
|
197
281
|
"fieldName": "block"
|
|
198
282
|
},
|
|
199
|
-
{
|
|
200
|
-
"name": "icon",
|
|
201
|
-
"type": {
|
|
202
|
-
"text": "boolean"
|
|
203
|
-
},
|
|
204
|
-
"default": "false",
|
|
205
|
-
"fieldName": "icon"
|
|
206
|
-
},
|
|
207
283
|
{
|
|
208
284
|
"name": "value",
|
|
209
285
|
"type": {
|
|
@@ -212,9 +288,31 @@
|
|
|
212
288
|
"default": "''",
|
|
213
289
|
"fieldName": "value"
|
|
214
290
|
},
|
|
291
|
+
{
|
|
292
|
+
"name": "it-inert",
|
|
293
|
+
"type": {
|
|
294
|
+
"text": "boolean"
|
|
295
|
+
},
|
|
296
|
+
"default": "false",
|
|
297
|
+
"fieldName": "itInert"
|
|
298
|
+
},
|
|
215
299
|
{
|
|
216
300
|
"name": "internals",
|
|
217
301
|
"fieldName": "internals"
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"name": "disabled",
|
|
305
|
+
"type": {
|
|
306
|
+
"text": "boolean | undefined"
|
|
307
|
+
},
|
|
308
|
+
"fieldName": "disabled"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "it-aria-expanded",
|
|
312
|
+
"type": {
|
|
313
|
+
"text": "boolean | undefined"
|
|
314
|
+
},
|
|
315
|
+
"fieldName": "expanded"
|
|
218
316
|
}
|
|
219
317
|
],
|
|
220
318
|
"superclass": {
|
|
@@ -291,7 +389,7 @@
|
|
|
291
389
|
{
|
|
292
390
|
"kind": "variable",
|
|
293
391
|
"name": "meta",
|
|
294
|
-
"default": "{ title: 'Componenti/Button', tags: ['
|
|
392
|
+
"default": "{ title: 'Componenti/Button', tags: ['a11y-ok', 'web-component'], component: 'it-button', args: { slot: 'Testo del pulsante', variant: 'primary', size: undefined, block: false, outline: false, disabled: false, type: 'button', value: '', }, argTypes: { variant: { control: 'select', description: 'Varianti di colore', options: BUTTON_VARIANTS, }, size: { control: 'select', description: 'Dimensione del pulsante', options: BUTTON_SIZES, }, block: { control: 'boolean', type: 'boolean', description: 'Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile', table: { defaultValue: { summary: 'false' } }, }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, outline: { control: 'boolean', type: 'boolean', description: 'Applica il colore solamente al bordo, usando il colore di sfondo come colore interno del pulsante.', table: { defaultValue: { summary: 'false' } }, }, slot: { control: 'text', description: 'Testo del pulsante', }, type: { control: 'select', description: 'Tipologia di pulsante', options: ['button', 'submit', 'reset'], table: { defaultValue: { summary: 'button' } }, }, value: { control: 'text', }, }, } satisfies Meta<ButtonProps>"
|
|
295
393
|
},
|
|
296
394
|
{
|
|
297
395
|
"kind": "variable",
|
|
@@ -299,15 +397,15 @@
|
|
|
299
397
|
"type": {
|
|
300
398
|
"text": "Story"
|
|
301
399
|
},
|
|
302
|
-
"default": "{ ...meta, name: 'Esempio interattivo', args: { variant: 'primary', }, tags: ['!
|
|
400
|
+
"default": "{ ...meta, name: 'Esempio interattivo', args: { variant: 'primary', }, tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
|
|
303
401
|
},
|
|
304
402
|
{
|
|
305
403
|
"kind": "variable",
|
|
306
|
-
"name": "
|
|
404
|
+
"name": "Disabilitato",
|
|
307
405
|
"type": {
|
|
308
406
|
"text": "Story"
|
|
309
407
|
},
|
|
310
|
-
"default": "{ name: '
|
|
408
|
+
"default": "{ name: 'Stato disabilitato', args: { slot: '', disabled: true }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, }, disabled: { table: { disable: true, }, }, }, render: (args) => html` ${renderComponent({ ...args, variant: 'primary' }, 'Primary')} ${renderComponent({ ...args, variant: 'secondary' }, 'Secondary')} ${renderComponent({ ...args, variant: 'success' }, 'Success')} ${renderComponent({ ...args, variant: 'danger' }, 'Danger')} ${renderComponent({ ...args, variant: 'warning' }, 'Warning')} ${renderComponent({ ...args, variant: 'link' }, 'Pulsante link')} `, }"
|
|
311
409
|
},
|
|
312
410
|
{
|
|
313
411
|
"kind": "variable",
|
|
@@ -315,7 +413,7 @@
|
|
|
315
413
|
"type": {
|
|
316
414
|
"text": "Story"
|
|
317
415
|
},
|
|
318
|
-
"default": "{ name: 'Varianti di colore', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, },
|
|
416
|
+
"default": "{ name: 'Varianti di colore', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, }, disabled: { table: { disable: true, }, }, }, render: (args) => html` ${renderVariant({ ...args, variant: 'primary' }, 'Primary')} ${renderVariant({ ...args, variant: 'secondary' }, 'Secondary')} ${renderVariant({ ...args, variant: 'success' }, 'Success')} ${renderVariant({ ...args, variant: 'danger' }, 'Danger')} ${renderVariant({ ...args, variant: 'warning' }, 'Warning')} ${renderVariant({ ...args, variant: 'link' }, 'Pulsante link')} `, }"
|
|
319
417
|
},
|
|
320
418
|
{
|
|
321
419
|
"kind": "variable",
|
|
@@ -323,7 +421,7 @@
|
|
|
323
421
|
"type": {
|
|
324
422
|
"text": "Story"
|
|
325
423
|
},
|
|
326
|
-
"default": "{ name: 'Varianti di dimensione', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, block: { table: { disable: true, }, }, },
|
|
424
|
+
"default": "{ name: 'Varianti di dimensione', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, block: { table: { disable: true, }, }, }, render: (args) => html` ${renderSizeVariant({ ...args, size: 'lg' }, 'Large')} ${renderSizeVariant({ ...args }, 'Default')} ${renderSizeVariant({ ...args, size: 'xs' }, 'Extra Small')} <div class=\"flex\"> ${renderComponent( { ...args, block: true, variant: 'primary', }, 'Primary Block', )} </div> <div class=\"flex\"> ${renderComponent( { ...args, block: true, variant: 'secondary', }, 'Secondary Block', )} </div> `, }"
|
|
327
425
|
},
|
|
328
426
|
{
|
|
329
427
|
"kind": "variable",
|
|
@@ -339,7 +437,7 @@
|
|
|
339
437
|
"type": {
|
|
340
438
|
"text": "Story"
|
|
341
439
|
},
|
|
342
|
-
"default": "{ name: 'Sfondo scuro', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, },
|
|
440
|
+
"default": "{ name: 'Sfondo scuro', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, }, disabled: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Trasmettere significato alle tecnologie assistive</span></div> <p> L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe <code>.visually-hidden</code>.</p></div></div>`, }, }, }, render: (args) => html` <div class=\"bg-dark p-4\"> ${renderVariant({ ...args, variant: 'primary' }, 'Primary')} ${renderVariant({ ...args, variant: 'secondary' }, 'Secondary')} ${renderVariant({ ...args, variant: 'link' }, 'Pulsante link')} </div> `, }"
|
|
343
441
|
},
|
|
344
442
|
{
|
|
345
443
|
"kind": "variable",
|
|
@@ -347,7 +445,7 @@
|
|
|
347
445
|
"type": {
|
|
348
446
|
"text": "Story"
|
|
349
447
|
},
|
|
350
|
-
"default": "{ ...meta, name: 'Con icona', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: `
|
|
448
|
+
"default": "{ ...meta, name: 'Con icona', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Le icone sono di default puramente decorative. Nel caso in cui l'icona non debba essere un elemento decorativo, è necessario utilizzare correttamente gli attributi \\`label\\`, \\`role\\` e \\`aria-hidden\\` sul componente \\`<it-icon>\\`. Per maggiori dettagli visita la [guida dedicata](?path=/docs/componenti-icon--documentazione) al componente \\`<it-icon>\\`.</p></div></div> `, }, }, }, render: (params) => { const slot = params.slot?.length > 0 ? params.slot : null; return html` <div class=\"flex align-items-center\"> <it-button variant=\"success\" size=\"lg\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"inverse\" size=\"sm\"></it-icon> <span>${slot ?? 'Pulsante Large con icona'}</span> </it-button> <it-button variant=\"primary\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"inverse\" size=\"sm\"></it-icon> <span>${slot ?? 'Pulsante con icona'}</span> </it-button> <it-button variant=\"danger\" size=\"xs\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"inverse\" size=\"xs\"></it-icon> <span>${slot ?? 'Pulsante Extra Small con icona'}</span> </it-button> <it-button variant=\"link\" size=\"xs\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"primary\" size=\"xs\"></it-icon> <span>${slot ?? 'Pulsante Link Extra Small con icona'}</span> </it-button> </div>`; }, }"
|
|
351
449
|
},
|
|
352
450
|
{
|
|
353
451
|
"kind": "variable",
|
|
@@ -355,7 +453,7 @@
|
|
|
355
453
|
"type": {
|
|
356
454
|
"text": "Story"
|
|
357
455
|
},
|
|
358
|
-
"default": "{ ...meta, name: 'Con icona cerchiata', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, },
|
|
456
|
+
"default": "{ ...meta, name: 'Con icona cerchiata', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, render: (params) => { const slot = params.slot?.length > 0 ? params.slot : null; return html` <div class=\"flex align-items-center\"> <it-button variant=\"success\" size=\"lg\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"success\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Large con icona'}</span> </it-button> <it-button variant=\"primary\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\" size=\"sm\"> <it-icon name=\"it-user\" color=\"primary\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante con icona'}</span> </it-button> <it-button variant=\"danger\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"danger\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Small con icona'}</span> </it-button> <it-button variant=\"secondary\" size=\"xs\" ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"secondary\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Link Extra Small con icona'}</span> </it-button> </div>`; }, }"
|
|
359
457
|
}
|
|
360
458
|
],
|
|
361
459
|
"exports": [
|
|
@@ -377,9 +475,9 @@
|
|
|
377
475
|
},
|
|
378
476
|
{
|
|
379
477
|
"kind": "js",
|
|
380
|
-
"name": "
|
|
478
|
+
"name": "Disabilitato",
|
|
381
479
|
"declaration": {
|
|
382
|
-
"name": "
|
|
480
|
+
"name": "Disabilitato",
|
|
383
481
|
"module": "stories/it-button.stories.ts"
|
|
384
482
|
}
|
|
385
483
|
},
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,cAAc,YAAY,CAAC"}
|
package/dist/src/index.js
CHANGED
|
@@ -3,4 +3,9 @@ import 'lit/directive.js';
|
|
|
3
3
|
import 'lit';
|
|
4
4
|
import 'lit/decorators.js';
|
|
5
5
|
import 'lit/directives/if-defined.js';
|
|
6
|
+
|
|
7
|
+
const BUTTON_SIZES = ['lg', 'sm', 'xs'];
|
|
8
|
+
const BUTTON_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'link'];
|
|
9
|
+
|
|
10
|
+
export { BUTTON_SIZES, BUTTON_VARIANTS };
|
|
6
11
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/types.ts"],"sourcesContent":["export const BUTTON_SIZES = ['lg', 'sm', 'xs'];\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'link'];\n\nexport type Sizes = (typeof BUTTON_SIZES)[number];\nexport type Variants = (typeof BUTTON_VARIANTS)[number] | string;\n"],"names":[],"mappings":";;;;;;AAAO,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI;AACtC,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM;;;;"}
|
package/dist/src/it-button.d.ts
CHANGED
|
@@ -1,26 +1,33 @@
|
|
|
1
1
|
import { BaseComponent } from '@italia/globals';
|
|
2
|
-
import { PropertyValues } from 'lit';
|
|
2
|
+
import { type PropertyValues } from 'lit';
|
|
3
3
|
import { type Sizes, type Variants } from './types.js';
|
|
4
4
|
export declare class ItButton extends BaseComponent {
|
|
5
5
|
static styles: import("lit").CSSResultGroup;
|
|
6
6
|
static get formAssociated(): boolean;
|
|
7
7
|
private _nativeButton;
|
|
8
|
-
|
|
9
|
-
type: string;
|
|
8
|
+
type: HTMLButtonElement['type'];
|
|
10
9
|
variant: Variants;
|
|
11
10
|
size: Sizes;
|
|
12
11
|
outline: boolean;
|
|
13
12
|
block: boolean;
|
|
14
|
-
icon: boolean;
|
|
15
13
|
value: string;
|
|
14
|
+
itInert: boolean;
|
|
16
15
|
internals: ElementInternals;
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
expanded?: boolean;
|
|
18
|
+
private _hasIcon;
|
|
19
|
+
private _hasProgress;
|
|
19
20
|
surfaceSubmitEvent(event: any): void;
|
|
20
21
|
get form(): HTMLFormElement | null;
|
|
22
|
+
focus(): void;
|
|
23
|
+
setDescribedBy(element: Element | null): void;
|
|
21
24
|
private _onKeyDown;
|
|
22
25
|
connectedCallback(): void;
|
|
23
26
|
disconnectedCallback(): void;
|
|
27
|
+
private static hasMatchingElement;
|
|
28
|
+
firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
29
|
+
private _updateSlottedStates;
|
|
30
|
+
private _onSlotChange;
|
|
24
31
|
render(): import("lit").TemplateResult<1>;
|
|
25
32
|
}
|
|
26
33
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-button.d.ts","sourceRoot":"","sources":["../../src/it-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"it-button.d.ts","sourceRoot":"","sources":["../../src/it-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvD,qBACa,QAAS,SAAQ,aAAa;IACzC,MAAM,CAAC,MAAM,+BAAU;IAEvB,MAAM,KAAK,cAAc,YAExB;IAEgB,OAAO,CAAC,aAAa,CAAqB;IAEhB,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAY;IAE3C,OAAO,EAAE,QAAQ,CAAM;IAEvB,IAAI,EAAE,KAAK,CAAM;IAEhB,OAAO,UAAS;IAEhB,KAAK,UAAS;IAE9B,KAAK,SAAM;IAE4B,OAAO,UAAS;IAEvE,SAAS,mBAA0B;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEY,QAAQ,CAAC,EAAE,OAAO,CAAC;IAErF,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,YAAY,CAAS;IAEtC,kBAAkB,CAAC,KAAK,EAAE,GAAG;IAmC7B,IAAI,IAAI,2BAEP;IAEe,KAAK;IAId,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI;IAYpD,OAAO,CAAC,UAAU,CAShB;IAEF,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAIxB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAKpE,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,aAAa,CAKnB;IAGO,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|