@norconsult-digital-public/isypixel 2.0.2-canary.2 → 2.0.2-canary.3
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/dist/llm.md +5 -4
- package/dist/types/components/ip-icon-button/ip-icon-button.d.ts +25 -0
- package/dist/types/components.d.ts +112 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/web-components/components/index.js +1 -1
- package/dist/web-components/components/ip-button.js +1 -1
- package/dist/web-components/components/ip-icon-button/llm.md +108 -0
- package/dist/web-components/components/ip-icon-button.d.ts +11 -0
- package/dist/web-components/components/ip-icon-button.js +1 -0
- package/dist/web-components/components/ip-tooltip.js +1 -1
- package/dist/web-components/components/p-COraaQeZ.js +1 -0
- package/dist/web-components/components/{p-CW9GjbMh.js → p-Ci0xGmLx.js} +1 -1
- package/dist/web-components/components/{p-CHBDz3Co.js → p-D9Ju9vYr.js} +1 -1
- package/dist/web-components/generated/angular/components.d.ts +37 -0
- package/dist/web-components/generated/angular/components.js +64 -0
- package/dist/web-components/generated/angular/components.ts +52 -0
- package/dist/web-components/generated/angular/index.d.ts +1 -1
- package/dist/web-components/generated/angular/index.js +1 -0
- package/dist/web-components/generated/angular/index.ts +1 -0
- package/dist/web-components/generated/react/components.d.ts +3 -0
- package/dist/web-components/generated/react/components.js +9 -0
- package/dist/web-components/generated/react/components.ts +12 -0
- package/dist/web-components/generated/svelte/components.d.ts +2 -0
- package/dist/web-components/generated/vue/components.d.ts +1 -0
- package/dist/web-components/generated/vue/components.js +10 -0
- package/dist/web-components/generated/vue/components.ts +12 -0
- package/package.json +1 -1
package/dist/llm.md
CHANGED
|
@@ -169,10 +169,11 @@ In `index.html` `<body>`:
|
|
|
169
169
|
|
|
170
170
|
## Components
|
|
171
171
|
|
|
172
|
-
| Component
|
|
173
|
-
|
|
|
174
|
-
| `ip-button`
|
|
175
|
-
| `ip-
|
|
172
|
+
| Component | Description | Docs |
|
|
173
|
+
| ---------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------- |
|
|
174
|
+
| `ip-button` | Clickable button with visual variants, loading state, and icon slot | `web-components/components/ip-button/llm.md` |
|
|
175
|
+
| `ip-icon-button` | Circular icon-only button with CSS ripple, visual variants, and loading state | `web-components/components/ip-icon-button/llm.md` |
|
|
176
|
+
| `ip-tooltip` | Tooltip that wraps a trigger and shows non-interactive content on hover, focus, and Escape | `web-components/components/ip-tooltip/llm.md` |
|
|
176
177
|
|
|
177
178
|
## Services
|
|
178
179
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { JSX } from '../../stencil-public-runtime';
|
|
2
|
+
/** Circular icon-only button with tooltip, five variants, three sizes, and form participation. */
|
|
3
|
+
export declare class IpIconButton {
|
|
4
|
+
internals: ElementInternals;
|
|
5
|
+
/** Visual variant of the button. */
|
|
6
|
+
variant: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
7
|
+
/** Size of the button. */
|
|
8
|
+
size: 'small' | 'medium' | 'large';
|
|
9
|
+
/** Disables the button. Also set implicitly when `loading` is true. */
|
|
10
|
+
disabled: boolean;
|
|
11
|
+
/** Shows a loading spinner replacing the icon and disables interaction. */
|
|
12
|
+
loading: boolean;
|
|
13
|
+
/** Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it. */
|
|
14
|
+
type: 'button' | 'submit' | 'reset';
|
|
15
|
+
/** Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content. */
|
|
16
|
+
label: string;
|
|
17
|
+
/** Hides the tooltip. Useful when the button is already described by surrounding context. */
|
|
18
|
+
disableTooltip: boolean;
|
|
19
|
+
/** Warns at runtime when no accessible label is provided — icon-only buttons have no other accessible name. */
|
|
20
|
+
componentDidLoad(): void;
|
|
21
|
+
/** Delegates form actions to the associated form element based on the `type` prop. */
|
|
22
|
+
private handleClick;
|
|
23
|
+
/** Renders the icon button wrapped in an ip-tooltip. */
|
|
24
|
+
render(): JSX.Element;
|
|
25
|
+
}
|
|
@@ -43,6 +43,46 @@ export namespace Components {
|
|
|
43
43
|
*/
|
|
44
44
|
"variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
45
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* Circular icon-only button with tooltip, five variants, three sizes, and form participation.
|
|
48
|
+
*/
|
|
49
|
+
interface IpIconButton {
|
|
50
|
+
/**
|
|
51
|
+
* Hides the tooltip. Useful when the button is already described by surrounding context.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
"disableTooltip": boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Disables the button. Also set implicitly when `loading` is true.
|
|
57
|
+
* @default false
|
|
58
|
+
*/
|
|
59
|
+
"disabled": boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content.
|
|
62
|
+
* @default ''
|
|
63
|
+
*/
|
|
64
|
+
"label": string;
|
|
65
|
+
/**
|
|
66
|
+
* Shows a loading spinner replacing the icon and disables interaction.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
"loading": boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Size of the button.
|
|
72
|
+
* @default 'medium'
|
|
73
|
+
*/
|
|
74
|
+
"size": 'small' | 'medium' | 'large';
|
|
75
|
+
/**
|
|
76
|
+
* Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it.
|
|
77
|
+
* @default 'button'
|
|
78
|
+
*/
|
|
79
|
+
"type": 'button' | 'submit' | 'reset';
|
|
80
|
+
/**
|
|
81
|
+
* Visual variant of the button.
|
|
82
|
+
* @default 'primary'
|
|
83
|
+
*/
|
|
84
|
+
"variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
85
|
+
}
|
|
46
86
|
interface IpTooltip {
|
|
47
87
|
/**
|
|
48
88
|
* Renders a directional arrow pointing toward the trigger element.
|
|
@@ -92,6 +132,15 @@ declare global {
|
|
|
92
132
|
prototype: HTMLIpButtonElement;
|
|
93
133
|
new (): HTMLIpButtonElement;
|
|
94
134
|
};
|
|
135
|
+
/**
|
|
136
|
+
* Circular icon-only button with tooltip, five variants, three sizes, and form participation.
|
|
137
|
+
*/
|
|
138
|
+
interface HTMLIpIconButtonElement extends Components.IpIconButton, HTMLStencilElement {
|
|
139
|
+
}
|
|
140
|
+
var HTMLIpIconButtonElement: {
|
|
141
|
+
prototype: HTMLIpIconButtonElement;
|
|
142
|
+
new (): HTMLIpIconButtonElement;
|
|
143
|
+
};
|
|
95
144
|
interface HTMLIpTooltipElementEventMap {
|
|
96
145
|
"show": void;
|
|
97
146
|
"hide": void;
|
|
@@ -112,6 +161,7 @@ declare global {
|
|
|
112
161
|
};
|
|
113
162
|
interface HTMLElementTagNameMap {
|
|
114
163
|
"ip-button": HTMLIpButtonElement;
|
|
164
|
+
"ip-icon-button": HTMLIpIconButtonElement;
|
|
115
165
|
"ip-tooltip": HTMLIpTooltipElement;
|
|
116
166
|
}
|
|
117
167
|
}
|
|
@@ -161,6 +211,54 @@ declare namespace LocalJSX {
|
|
|
161
211
|
*/
|
|
162
212
|
"variant"?: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
163
213
|
}
|
|
214
|
+
/**
|
|
215
|
+
* Circular icon-only button with tooltip, five variants, three sizes, and form participation.
|
|
216
|
+
*/
|
|
217
|
+
interface IpIconButton {
|
|
218
|
+
/**
|
|
219
|
+
* Hides the tooltip. Useful when the button is already described by surrounding context.
|
|
220
|
+
* @default false
|
|
221
|
+
*/
|
|
222
|
+
"disableTooltip"?: boolean;
|
|
223
|
+
/**
|
|
224
|
+
* Disables the button. Also set implicitly when `loading` is true.
|
|
225
|
+
* @default false
|
|
226
|
+
*/
|
|
227
|
+
"disabled"?: boolean;
|
|
228
|
+
/**
|
|
229
|
+
* The `id` of a `<form>` element to associate this element with.
|
|
230
|
+
*/
|
|
231
|
+
"form"?: string;
|
|
232
|
+
/**
|
|
233
|
+
* Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content.
|
|
234
|
+
* @default ''
|
|
235
|
+
*/
|
|
236
|
+
"label"?: string;
|
|
237
|
+
/**
|
|
238
|
+
* Shows a loading spinner replacing the icon and disables interaction.
|
|
239
|
+
* @default false
|
|
240
|
+
*/
|
|
241
|
+
"loading"?: boolean;
|
|
242
|
+
/**
|
|
243
|
+
* The name of the element, used when submitting an HTML form.
|
|
244
|
+
*/
|
|
245
|
+
"name"?: string;
|
|
246
|
+
/**
|
|
247
|
+
* Size of the button.
|
|
248
|
+
* @default 'medium'
|
|
249
|
+
*/
|
|
250
|
+
"size"?: 'small' | 'medium' | 'large';
|
|
251
|
+
/**
|
|
252
|
+
* Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it.
|
|
253
|
+
* @default 'button'
|
|
254
|
+
*/
|
|
255
|
+
"type"?: 'button' | 'submit' | 'reset';
|
|
256
|
+
/**
|
|
257
|
+
* Visual variant of the button.
|
|
258
|
+
* @default 'primary'
|
|
259
|
+
*/
|
|
260
|
+
"variant"?: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
261
|
+
}
|
|
164
262
|
interface IpTooltip {
|
|
165
263
|
/**
|
|
166
264
|
* Renders a directional arrow pointing toward the trigger element.
|
|
@@ -216,6 +314,15 @@ declare namespace LocalJSX {
|
|
|
216
314
|
"size": 'small' | 'medium' | 'large';
|
|
217
315
|
"alignIcon": 'start' | 'end';
|
|
218
316
|
}
|
|
317
|
+
interface IpIconButtonAttributes {
|
|
318
|
+
"variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
|
|
319
|
+
"size": 'small' | 'medium' | 'large';
|
|
320
|
+
"disabled": boolean;
|
|
321
|
+
"loading": boolean;
|
|
322
|
+
"type": 'button' | 'submit' | 'reset';
|
|
323
|
+
"label": string;
|
|
324
|
+
"disableTooltip": boolean;
|
|
325
|
+
}
|
|
219
326
|
interface IpTooltipAttributes {
|
|
220
327
|
"position": 'top' | 'right' | 'bottom' | 'left';
|
|
221
328
|
"size": 'small' | 'medium' | 'large';
|
|
@@ -228,6 +335,7 @@ declare namespace LocalJSX {
|
|
|
228
335
|
|
|
229
336
|
interface IntrinsicElements {
|
|
230
337
|
"ip-button": Omit<IpButton, keyof IpButtonAttributes> & { [K in keyof IpButton & keyof IpButtonAttributes]?: IpButton[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `attr:${K}`]?: IpButtonAttributes[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `prop:${K}`]?: IpButton[K] };
|
|
338
|
+
"ip-icon-button": Omit<IpIconButton, keyof IpIconButtonAttributes> & { [K in keyof IpIconButton & keyof IpIconButtonAttributes]?: IpIconButton[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `attr:${K}`]?: IpIconButtonAttributes[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `prop:${K}`]?: IpIconButton[K] };
|
|
231
339
|
"ip-tooltip": Omit<IpTooltip, keyof IpTooltipAttributes> & { [K in keyof IpTooltip & keyof IpTooltipAttributes]?: IpTooltip[K] } & { [K in keyof IpTooltip & keyof IpTooltipAttributes as `attr:${K}`]?: IpTooltipAttributes[K] } & { [K in keyof IpTooltip & keyof IpTooltipAttributes as `prop:${K}`]?: IpTooltip[K] };
|
|
232
340
|
}
|
|
233
341
|
}
|
|
@@ -236,6 +344,10 @@ declare module "@stencil/core" {
|
|
|
236
344
|
export namespace JSX {
|
|
237
345
|
interface IntrinsicElements {
|
|
238
346
|
"ip-button": LocalJSX.IntrinsicElements["ip-button"] & JSXBase.HTMLAttributes<HTMLIpButtonElement>;
|
|
347
|
+
/**
|
|
348
|
+
* Circular icon-only button with tooltip, five variants, three sizes, and form participation.
|
|
349
|
+
*/
|
|
350
|
+
"ip-icon-button": LocalJSX.IntrinsicElements["ip-icon-button"] & JSXBase.HTMLAttributes<HTMLIpIconButtonElement>;
|
|
239
351
|
"ip-tooltip": LocalJSX.IntrinsicElements["ip-tooltip"] & JSXBase.HTMLAttributes<HTMLIpTooltipElement>;
|
|
240
352
|
}
|
|
241
353
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BWyvzXuA.js";export{I as IpButton}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BWyvzXuA.js";export{I as IpButton}from"./p-Ci0xGmLx.js";export{I as IpIconButton}from"./p-COraaQeZ.js";export{I as IpTooltip}from"./p-D9Ju9vYr.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{I as o,d as s}from"./p-
|
|
1
|
+
import{I as o,d as s}from"./p-Ci0xGmLx.js";const m=o,p=s;export{m as IpButton,p as defineCustomElement}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# ip-icon-button
|
|
2
|
+
|
|
3
|
+
A circular icon-only button with a CSS ripple on click and a built-in tooltip on hover. Available in the same five visual variants as `ip-button`. Requires a `label` attribute for screen reader accessibility — `label` is also used as the tooltip text by default.
|
|
4
|
+
|
|
5
|
+
## Attributes
|
|
6
|
+
|
|
7
|
+
| Attribute | Type | Default | Allowed values | Description |
|
|
8
|
+
| ---------------- | ------- | ----------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| `variant` | string | `"primary"` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"brand"` \| `"destructive"` | Visual variant of the button. |
|
|
10
|
+
| `size` | string | `"medium"` | `"small"` \| `"medium"` \| `"large"` | Controls the size of the button. Affects padding and icon size. |
|
|
11
|
+
| `disabled` | boolean | `false` | — | Disables the button. Also set implicitly when `loading` is `true`. |
|
|
12
|
+
| `loading` | boolean | `false` | — | Replaces the icon with a spinner and disables interaction. Renders a screen-reader-only "Loading..." text. |
|
|
13
|
+
| `type` | string | `"button"` | `"button"` \| `"submit"` \| `"reset"` | Controls form behaviour. Defaults to `"button"` to prevent accidental form submission. |
|
|
14
|
+
| `label` | string | `""` | — | **Required.** Sets `aria-label` for screen readers and is used as the default tooltip text. When empty, the tooltip is implicitly hidden and a development warning is logged. |
|
|
15
|
+
| `disableTooltip` | boolean | `false` | — | Hides the built-in tooltip. Useful when the button is already described by surrounding context. |
|
|
16
|
+
|
|
17
|
+
## Slots
|
|
18
|
+
|
|
19
|
+
| Slot | Description |
|
|
20
|
+
| --------- | -------------------------------------------------------------------------------------------- |
|
|
21
|
+
| `icon` | The icon element to display. Hidden when `loading` is `true`. Typically an `<i>` or `<svg>`. |
|
|
22
|
+
| `tooltip` | Optional HTML override for the tooltip content. When omitted, the `label` value is used. |
|
|
23
|
+
|
|
24
|
+
## Size tokens
|
|
25
|
+
|
|
26
|
+
| Size | Padding (all sides) | Icon size |
|
|
27
|
+
| -------- | ----------------------- | ------------------------------------ |
|
|
28
|
+
| `small` | `$ip_spacing_space_100` | `$ip_iconography_size_small` (18px) |
|
|
29
|
+
| `medium` | `$ip_spacing_space_125` | `$ip_iconography_size_medium` (20px) |
|
|
30
|
+
| `large` | `$ip_spacing_space_150` | `$ip_iconography_size_large` (22px) |
|
|
31
|
+
|
|
32
|
+
## Color tokens
|
|
33
|
+
|
|
34
|
+
| Token | Description |
|
|
35
|
+
| --------------------------------------------------------------------- | ------------------------------------------------------ |
|
|
36
|
+
| `$ip_color_icon_button_background_primary_default` | Primary background, default state |
|
|
37
|
+
| `$ip_color_icon_button_background_primary_hover` | Primary background, hover state |
|
|
38
|
+
| `$ip_color_icon_button_background_primary_active` | Primary background, active state |
|
|
39
|
+
| `$ip_color_button_background_[variant]_default/hover/active/disabled` | Background for secondary, tertiary, brand, destructive |
|
|
40
|
+
| `$ip_color_button_icon_[variant]_default` | Icon color, default state |
|
|
41
|
+
| `$ip_color_button_icon_[variant]_disabled` | Icon color, disabled state |
|
|
42
|
+
| `$ip_color_button_focus_default` | Focus outline color |
|
|
43
|
+
|
|
44
|
+
## Usage examples
|
|
45
|
+
|
|
46
|
+
### HTML
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<ip-icon-button label="Save" variant="primary">
|
|
50
|
+
<i slot="icon" class="fas fa-floppy-disk"></i>
|
|
51
|
+
</ip-icon-button>
|
|
52
|
+
|
|
53
|
+
<!-- With HTML tooltip override -->
|
|
54
|
+
<ip-icon-button label="Save" variant="primary">
|
|
55
|
+
<i slot="icon" class="fas fa-floppy-disk"></i>
|
|
56
|
+
<span slot="tooltip">Save <strong>document</strong></span>
|
|
57
|
+
</ip-icon-button>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### React
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/react';
|
|
64
|
+
|
|
65
|
+
<IpIconButton label='Save' variant='primary'>
|
|
66
|
+
<i slot='icon' className='fas fa-floppy-disk' />
|
|
67
|
+
</IpIconButton>;
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Vue
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<IpIconButton label="Save" variant="primary">
|
|
74
|
+
<i slot="icon" class="fas fa-floppy-disk" />
|
|
75
|
+
</IpIconButton>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Angular
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/angular';
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<ip-icon-button label="Save" variant="primary">
|
|
86
|
+
<i slot="icon" class="fas fa-floppy-disk"></i>
|
|
87
|
+
</ip-icon-button>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Svelte
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<script>
|
|
94
|
+
import '@norconsult-digital-public/isypixel/web-components/ip-icon-button.js';
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<ip-icon-button label="Save" variant="primary">
|
|
98
|
+
<i slot="icon" class="fas fa-floppy-disk"></i>
|
|
99
|
+
</ip-icon-button>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Blazor
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<ip-icon-button label="Save" variant="primary">
|
|
106
|
+
<i slot="icon" class="fas fa-floppy-disk"></i>
|
|
107
|
+
</ip-icon-button>
|
|
108
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../../types/components";
|
|
2
|
+
|
|
3
|
+
interface IpIconButton extends Components.IpIconButton, HTMLElement {}
|
|
4
|
+
export const IpIconButton: {
|
|
5
|
+
prototype: IpIconButton;
|
|
6
|
+
new (): IpIconButton;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{I as a,d as o}from"./p-COraaQeZ.js";const r=a,s=o;export{r as IpIconButton,s as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{I as o,d as
|
|
1
|
+
import{I as o,d as r}from"./p-D9Ju9vYr.js";const s=o,p=r;export{s as IpTooltip,p as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as o,p as t,H as i,h as n,F as r}from"./p-BWyvzXuA.js";import{d as a}from"./p-D9Ju9vYr.js";const e=t(class extends i{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.internals=this.attachInternals(),this.variant="primary",this.size="medium",this.disabled=!1,this.loading=!1,this.type="button",this.label="",this.disableTooltip=!1,this.handleClick=()=>"submit"===this.type?this.internals.form?.requestSubmit():"reset"===this.type?this.internals.form?.reset():void 0}componentDidLoad(){this.label||console.warn("[ip-icon-button] Missing required `label` prop. Icon-only buttons have no visible text, so `label` is the only accessible name for screen readers.")}render(){const o=this.disabled||this.loading;return n("ip-tooltip",{key:"cb525faebfed204ff8f82c478a031fd6cfe73884",size:"medium",disabled:this.loading||this.disableTooltip||!this.label},n("button",{key:"7114610e22de9b943a6015e4de3937fba245dd54",slot:"trigger",class:`ip-icon-button ip-icon-button--${this.variant} ip-icon-button--${this.size}`,type:"button",disabled:o,"aria-disabled":o?"true":"false","aria-busy":this.loading?"true":"false","aria-label":this.label||void 0,onClick:this.handleClick},n("span",{key:"06c32d25f152d42d602807a7993cc776f445dd36",class:`ip-icon-button__icon-wrapper ip-icon-button__icon-wrapper--${this.size}`},this.loading?n(r,null,n("span",{class:"ip-icon-button__spinner","aria-hidden":"true"}),n("span",{class:"ip-icon-button__sr-only"},"Loading...")):n("slot",{name:"icon"}))),n("slot",{key:"d616c984c6ddaa72fcb74ba3ee4fb225213f015a",name:"tooltip"},this.label))}static get formAssociated(){return!0}static get style(){return'.ip-icon-button{border:none;border-radius:50%;margin:0;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ip_typography_font_family_primary);transition:background-color 150ms ease-in-out, color 150ms ease-in-out}.ip-icon-button:disabled{cursor:not-allowed}.ip-icon-button:focus-visible{outline:2px solid var(--ip_color_button_focus_default);outline-offset:2px}.ip-icon-button::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);transition:transform 400ms ease-out, opacity 400ms ease-out;pointer-events:none}.ip-icon-button:not(:disabled):active::after{transform:scale(2.5);opacity:0.15;transition:none}.ip-icon-button--small{padding:var(--ip_spacing_space_100)}.ip-icon-button--medium{padding:var(--ip_spacing_space_125)}.ip-icon-button--large{padding:var(--ip_spacing_space_150)}.ip-icon-button--primary{background-color:var(--ip_color_icon_button_background_primary_default);color:var(--ip_color_icon_button_icon_primary_default)}.ip-icon-button--primary:hover:not(:disabled){background-color:var(--ip_color_icon_button_background_primary_hover)}.ip-icon-button--primary:active:not(:disabled){background-color:var(--ip_color_icon_button_background_primary_active)}.ip-icon-button--primary:disabled{background-color:var(--ip_color_button_background_primary_disabled);color:var(--ip_color_button_icon_primary_disabled)}.ip-icon-button--secondary{background-color:var(--ip_color_button_background_secondary_default);color:var(--ip_color_button_icon_secondary_default)}.ip-icon-button--secondary:hover:not(:disabled){background-color:var(--ip_color_button_background_secondary_hover)}.ip-icon-button--secondary:active:not(:disabled){background-color:var(--ip_color_button_background_secondary_active)}.ip-icon-button--secondary:disabled{background-color:var(--ip_color_button_background_secondary_disabled);color:var(--ip_color_button_icon_secondary_disabled)}.ip-icon-button--tertiary{background-color:var(--ip_color_button_background_tertiary_default);color:var(--ip_color_button_icon_tertiary_default)}.ip-icon-button--tertiary:hover:not(:disabled){background-color:var(--ip_color_button_background_tertiary_hover)}.ip-icon-button--tertiary:active:not(:disabled){background-color:var(--ip_color_button_background_tertiary_active)}.ip-icon-button--tertiary:disabled{background-color:var(--ip_color_button_background_tertiary_disabled);color:var(--ip_color_button_icon_tertiary_disabled)}.ip-icon-button--brand{background-color:var(--ip_color_button_background_brand_default);color:var(--ip_color_button_icon_brand_default)}.ip-icon-button--brand:hover:not(:disabled){background-color:var(--ip_color_button_background_brand_hover)}.ip-icon-button--brand:active:not(:disabled){background-color:var(--ip_color_button_background_brand_active)}.ip-icon-button--brand:disabled{background-color:var(--ip_color_button_background_brand_disabled);color:var(--ip_color_button_icon_brand_disabled)}.ip-icon-button--destructive{background-color:var(--ip_color_button_background_destructive_default);color:var(--ip_color_button_icon_destructive_default)}.ip-icon-button--destructive:hover:not(:disabled){background-color:var(--ip_color_button_background_destructive_hover)}.ip-icon-button--destructive:active:not(:disabled){background-color:var(--ip_color_button_background_destructive_active)}.ip-icon-button--destructive:disabled{background-color:var(--ip_color_button_background_destructive_disabled);color:var(--ip_color_button_icon_destructive_disabled)}.ip-icon-button__icon-wrapper{display:inline-flex;align-items:center;justify-content:center}.ip-icon-button__icon-wrapper--small{width:18px;height:18px;font-size:18px}.ip-icon-button__icon-wrapper--medium{width:20px;height:20px;font-size:20px}.ip-icon-button__icon-wrapper--large{width:22px;height:22px;font-size:22px}.ip-icon-button__spinner{width:0.6em;height:0.6em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ip-icon-button-spin 900ms linear infinite;flex-shrink:0}.ip-icon-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes ip-icon-button-spin{to{transform:rotate(360deg)}}::slotted([slot=icon]){display:inline-flex !important;align-items:center;justify-content:center}:host([size=small]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_small);width:18px !important;height:18px !important}:host([size=medium]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_medium);width:20px !important;height:20px !important}:host([size=large]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_large);width:22px !important;height:22px !important}'}},[321,"ip-icon-button",{variant:[513],size:[513],disabled:[516],loading:[516],type:[513],label:[513],disableTooltip:[516,"disable-tooltip"]}]);function c(){"undefined"!=typeof customElements&&["ip-icon-button","ip-tooltip"].forEach((t=>{switch(t){case"ip-icon-button":customElements.get(o(t))||customElements.define(o(t),e);break;case"ip-tooltip":customElements.get(o(t))||a()}}))}c();export{e as I,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as o,H as i,h as r,F as a}from"./p-BWyvzXuA.js";const e=o(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.internals=this.attachInternals(),this.ariaLabel=null,this.hasLabel=!1,this.variant="primary",this.loading=!1,this.disabled=!1,this.type="submit",this.size="medium",this.alignIcon="start",this.onLabelSlotChange=t=>{this.hasLabel=t.target.assignedNodes({flatten:!0}).length>0},this.handleClick=()=>"submit"===this.type?this.internals.form?.requestSubmit():"reset"===this.type?this.internals.form?.reset():void 0}render(){const t=this.disabled||this.loading;return r("button",{key:"
|
|
1
|
+
import{t,p as o,H as i,h as r,F as a}from"./p-BWyvzXuA.js";const e=o(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.internals=this.attachInternals(),this.ariaLabel=null,this.hasLabel=!1,this.variant="primary",this.loading=!1,this.disabled=!1,this.type="submit",this.size="medium",this.alignIcon="start",this.onLabelSlotChange=t=>{this.hasLabel=t.target.assignedNodes({flatten:!0}).length>0},this.handleClick=()=>"submit"===this.type?this.internals.form?.requestSubmit():"reset"===this.type?this.internals.form?.reset():void 0}render(){const t=this.disabled||this.loading;return r("button",{key:"c6d8938e98842fb0200952c8943d7b478820d986",class:`ip-button ip-button--${this.variant} ip-button--${this.size}`,type:"button",disabled:t,"aria-disabled":t?"true":"false","aria-busy":this.loading?"true":"false","aria-label":this.ariaLabel??void 0,onClick:this.handleClick},"start"===this.alignIcon&&r("slot",{key:"icon-start",name:"icon"}),this.hasLabel?r("span",{class:`ip-button__label ip-button__label--${this.size}`},r("slot",{onSlotchange:this.onLabelSlotChange})):r("slot",{onSlotchange:this.onLabelSlotChange}),"end"===this.alignIcon&&r("slot",{key:"icon-end",name:"icon"}),this.loading&&r(a,{key:"5fe0d1bc3c81f14af7758ecf00180550669045c3"},r("span",{key:"ff46a41087f8e4d76f45b914977ea6b07656ce6c",class:"ip-button__spinner","aria-hidden":"true"}),r("span",{key:"1f18c6c152211f6724bb70a8f4ff688589bc6693",class:"ip-button__sr-only"},"Loading...")))}static get formAssociated(){return!0}static get style(){return".ip-button{border:none;border-radius:var(--ip_radius_size_medium);margin:0;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ip_typography_font_family_primary);transition:background-color 150ms ease-in-out, color 150ms ease-in-out}.ip-button:disabled{cursor:not-allowed}.ip-button:focus-visible{outline:2px solid var(--ip_color_button_focus_default);outline-offset:2px}.ip-button--small{padding:var(--ip_spacing_space_100) var(--ip_spacing_space_150);gap:var(--ip_spacing_space_125);font-size:var(--ip_typography_body_font_size_small)}.ip-button--medium{padding:var(--ip_spacing_space_125) var(--ip_spacing_space_200);gap:var(--ip_spacing_space_150);font-size:var(--ip_typography_body_font_size_medium)}.ip-button--large{padding:var(--ip_spacing_space_150) var(--ip_spacing_space_250);gap:var(--ip_spacing_space_200);font-size:var(--ip_typography_body_font_size_large)}.ip-button--primary{background-color:var(--ip_color_button_background_primary_default);color:var(--ip_color_button_text_primary_default)}.ip-button--primary:hover:not(:disabled){background-color:var(--ip_color_button_background_primary_hover)}.ip-button--primary:active:not(:disabled){background-color:var(--ip_color_button_background_primary_active)}.ip-button--primary:disabled{background-color:var(--ip_color_button_background_primary_disabled);color:var(--ip_color_button_text_primary_disabled)}.ip-button--secondary{background-color:var(--ip_color_button_background_secondary_default);color:var(--ip_color_button_text_secondary_default)}.ip-button--secondary:hover:not(:disabled){background-color:var(--ip_color_button_background_secondary_hover)}.ip-button--secondary:active:not(:disabled){background-color:var(--ip_color_button_background_secondary_active)}.ip-button--secondary:disabled{background-color:var(--ip_color_button_background_secondary_disabled);color:var(--ip_color_button_text_secondary_disabled)}.ip-button--tertiary{background-color:var(--ip_color_button_background_tertiary_default);color:var(--ip_color_button_text_tertiary_default)}.ip-button--tertiary:hover:not(:disabled){background-color:var(--ip_color_button_background_tertiary_hover)}.ip-button--tertiary:active:not(:disabled){background-color:var(--ip_color_button_background_tertiary_active)}.ip-button--tertiary:disabled{background-color:var(--ip_color_button_background_tertiary_disabled);color:var(--ip_color_button_text_tertiary_disabled)}.ip-button--brand{background-color:var(--ip_color_button_background_brand_default);color:var(--ip_color_button_text_brand_default)}.ip-button--brand:hover:not(:disabled){background-color:var(--ip_color_button_background_brand_hover)}.ip-button--brand:active:not(:disabled){background-color:var(--ip_color_button_background_brand_active)}.ip-button--brand:disabled{background-color:var(--ip_color_button_background_brand_disabled);color:var(--ip_color_button_text_brand_disabled)}.ip-button--destructive{background-color:var(--ip_color_button_background_destructive_default);color:var(--ip_color_button_text_destructive_default)}.ip-button--destructive:hover:not(:disabled){background-color:var(--ip_color_button_background_destructive_hover)}.ip-button--destructive:active:not(:disabled){background-color:var(--ip_color_button_background_destructive_active)}.ip-button--destructive:disabled{background-color:var(--ip_color_button_background_destructive_disabled);color:var(--ip_color_button_text_destructive_disabled)}.ip-button__label{display:inline-flex;align-items:center}.ip-button__label--small{height:18px}.ip-button__label--medium{height:20px}.ip-button__label--large{height:22px}.ip-button__spinner{width:0.75em;height:0.75em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ip-button-spin 900ms linear infinite;flex-shrink:0}.ip-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes ip-button-spin{to{transform:rotate(360deg)}}::slotted([slot=icon]){display:inline-flex !important;align-items:center;justify-content:center}:host([size=small]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_small);width:18px !important;height:18px !important}:host([size=medium]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_medium);width:20px !important;height:20px !important}:host([size=large]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_large);width:22px !important;height:22px !important}"}},[321,"ip-button",{ariaLabel:[1,"aria-label"],variant:[513],loading:[516],disabled:[516],type:[513],size:[513],alignIcon:[513,"align-icon"],hasLabel:[32]}]);function n(){"undefined"!=typeof customElements&&["ip-button"].forEach((o=>{"ip-button"===o&&(customElements.get(t(o))||customElements.define(t(o),e))}))}n();export{e as I,n as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as i,p as t,H as e,c as o,h as s}from"./p-BWyvzXuA.js";let a=0;const r=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.tooltipShow=o(this,"show"),this.tooltipHide=o(this,"hide"),this.position="top",this.size="medium",this.delay=300,this.visible=!1,this.disabled=!1,this.arrow=!0,this.maxWidth="300px",this.isActive=!1,this.tooltipId="ip-tooltip-"+a++,this.delayTimer=null,this.hideTimer=null,this.clearTimers=()=>{null!==this.delayTimer&&(clearTimeout(this.delayTimer),this.delayTimer=null),null!==this.hideTimer&&(clearTimeout(this.hideTimer),this.hideTimer=null)},this.setActive=i=>{const t=this.isTooltipVisible;this.isActive=i;const e=this.isTooltipVisible;!t&&e&&(document.addEventListener("keydown",this.handleKeyDown),this.tooltipShow.emit()),t&&!e&&(document.removeEventListener("keydown",this.handleKeyDown),this.tooltipHide.emit())},this.handleTriggerMouseEnter=()=>{this.disabled||(this.clearTimers(),this.delayTimer=setTimeout((()=>{this.setActive(!0)}),this.delay))},this.handleTriggerMouseLeave=()=>{this.clearTimers(),this.hideTimer=setTimeout((()=>{this.setActive(!1)}),100)},this.handleTooltipMouseEnter=()=>{this.clearTimers()},this.handleTooltipMouseLeave=()=>{this.clearTimers(),this.hideTimer=setTimeout((()=>{this.setActive(!1)}),100)},this.handleKeyDown=i=>{"Escape"===i.key&&this.isTooltipVisible&&(this.clearTimers(),this.setActive(!1))}}onVisibleChange(i,t){const e=t||this.isActive,o=i||this.isActive;!e&&o&&this.tooltipShow.emit(),e&&!o&&this.tooltipHide.emit()}onDisabledChange(i){i&&(this.clearTimers(),this.setActive(!1))}disconnectedCallback(){this.clearTimers(),document.removeEventListener("keydown",this.handleKeyDown)}get isTooltipVisible(){return this.visible||this.isActive}handleFocusin(){this.disabled||(this.clearTimers(),this.setActive(!0))}handleFocusout(){this.clearTimers(),this.setActive(!1)}render(){const i=this.isTooltipVisible,t=["ip-tooltip__bubble",`ip-tooltip__bubble--${this.position}`,`ip-tooltip__bubble--${this.size}`,i&&"ip-tooltip__bubble--visible",this.arrow&&"ip-tooltip__bubble--arrow"].filter(Boolean).join(" ");return s("div",{key:"
|
|
1
|
+
import{t as i,p as t,H as e,c as o,h as s}from"./p-BWyvzXuA.js";let a=0;const r=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.tooltipShow=o(this,"show"),this.tooltipHide=o(this,"hide"),this.position="top",this.size="medium",this.delay=300,this.visible=!1,this.disabled=!1,this.arrow=!0,this.maxWidth="300px",this.isActive=!1,this.tooltipId="ip-tooltip-"+a++,this.delayTimer=null,this.hideTimer=null,this.clearTimers=()=>{null!==this.delayTimer&&(clearTimeout(this.delayTimer),this.delayTimer=null),null!==this.hideTimer&&(clearTimeout(this.hideTimer),this.hideTimer=null)},this.setActive=i=>{const t=this.isTooltipVisible;this.isActive=i;const e=this.isTooltipVisible;!t&&e&&(document.addEventListener("keydown",this.handleKeyDown),this.tooltipShow.emit()),t&&!e&&(document.removeEventListener("keydown",this.handleKeyDown),this.tooltipHide.emit())},this.handleTriggerMouseEnter=()=>{this.disabled||(this.clearTimers(),this.delayTimer=setTimeout((()=>{this.setActive(!0)}),this.delay))},this.handleTriggerMouseLeave=()=>{this.clearTimers(),this.hideTimer=setTimeout((()=>{this.setActive(!1)}),100)},this.handleTooltipMouseEnter=()=>{this.clearTimers()},this.handleTooltipMouseLeave=()=>{this.clearTimers(),this.hideTimer=setTimeout((()=>{this.setActive(!1)}),100)},this.handleKeyDown=i=>{"Escape"===i.key&&this.isTooltipVisible&&(this.clearTimers(),this.setActive(!1))}}onVisibleChange(i,t){const e=t||this.isActive,o=i||this.isActive;!e&&o&&this.tooltipShow.emit(),e&&!o&&this.tooltipHide.emit()}onDisabledChange(i){i&&(this.clearTimers(),this.setActive(!1))}disconnectedCallback(){this.clearTimers(),document.removeEventListener("keydown",this.handleKeyDown)}get isTooltipVisible(){return this.visible||this.isActive}handleFocusin(){this.disabled||(this.clearTimers(),this.setActive(!0))}handleFocusout(){this.clearTimers(),this.setActive(!1)}render(){const i=this.isTooltipVisible,t=["ip-tooltip__bubble",`ip-tooltip__bubble--${this.position}`,`ip-tooltip__bubble--${this.size}`,i&&"ip-tooltip__bubble--visible",this.arrow&&"ip-tooltip__bubble--arrow"].filter(Boolean).join(" ");return s("div",{key:"9cac1ca2e4870d576703c2705bb7151287aeb1b8",class:"ip-tooltip"},s("div",{key:"e8fdd02de195bf8a72ffb682a23f52bb12551237",class:"ip-tooltip__trigger","aria-describedby":i?this.tooltipId:void 0,onMouseEnter:this.handleTriggerMouseEnter,onMouseLeave:this.handleTriggerMouseLeave},s("slot",{key:"9eb390ae5a0b7ee6dc0ec8ecc188d003289ca084",name:"trigger"})),s("div",{key:"2ca1a0d1a6c54a1738054aa864be6b824811a659",id:this.tooltipId,role:"tooltip",class:t,"aria-hidden":i?"false":"true",style:{maxWidth:this.maxWidth},onMouseEnter:this.handleTooltipMouseEnter,onMouseLeave:this.handleTooltipMouseLeave},s("slot",{key:"044030c5be19836e8d8fa47949d1755c3c7cea32"})))}static get watchers(){return{visible:[{onVisibleChange:0}],disabled:[{onDisabledChange:0}]}}static get style(){return':host{display:inline-block}.ip-tooltip{position:relative;display:inline-block}.ip-tooltip__trigger{display:inline-block}.ip-tooltip__bubble{position:absolute;z-index:1000;width:max-content;background-color:var(--ip_color_surface_primary_inverse);color:var(--ip_color_text_primary_black_inverse);border-radius:var(--ip_radius_size_medium);font-family:var(--ip_typography_font_family_primary);line-height:var(--ip_typography_body_line_height_default);word-wrap:break-word;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 150ms ease-in-out, visibility 150ms ease-in-out}.ip-tooltip__bubble--visible{opacity:1;visibility:visible;pointer-events:auto}.ip-tooltip__bubble--small{padding:var(--ip_spacing_space_050) var(--ip_spacing_space_075);font-size:var(--ip_typography_body_font_size_small)}.ip-tooltip__bubble--medium{padding:var(--ip_spacing_space_075) var(--ip_spacing_space_100);font-size:var(--ip_typography_body_font_size_medium)}.ip-tooltip__bubble--large{padding:var(--ip_spacing_space_100) var(--ip_spacing_space_150);font-size:var(--ip_typography_body_font_size_large)}.ip-tooltip__bubble--top{bottom:calc(100% + var(--ip_spacing_space_100));left:50%;transform:translateX(-50%)}.ip-tooltip__bubble--bottom{top:calc(100% + var(--ip_spacing_space_100));left:50%;transform:translateX(-50%)}.ip-tooltip__bubble--left{right:calc(100% + var(--ip_spacing_space_100));top:50%;transform:translateY(-50%)}.ip-tooltip__bubble--right{left:calc(100% + var(--ip_spacing_space_100));top:50%;transform:translateY(-50%)}.ip-tooltip__bubble--arrow::after{content:"";position:absolute;width:0;height:0;border:6px solid transparent}.ip-tooltip__bubble--arrow.ip-tooltip__bubble--top::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--ip_color_surface_primary_inverse)}.ip-tooltip__bubble--arrow.ip-tooltip__bubble--bottom::after{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--ip_color_surface_primary_inverse)}.ip-tooltip__bubble--arrow.ip-tooltip__bubble--left::after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ip_color_surface_primary_inverse)}.ip-tooltip__bubble--arrow.ip-tooltip__bubble--right::after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ip_color_surface_primary_inverse)}'}},[257,"ip-tooltip",{position:[513],size:[513],delay:[514],visible:[516],disabled:[516],arrow:[516],maxWidth:[513,"max-width"],isActive:[32]},[[0,"focusin","handleFocusin"],[0,"focusout","handleFocusout"]],{visible:[{onVisibleChange:0}],disabled:[{onDisabledChange:0}]}]);function l(){"undefined"!=typeof customElements&&["ip-tooltip"].forEach((t=>{"ip-tooltip"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))}l();export{r as I,l as d}
|
|
@@ -38,6 +38,43 @@ export declare class IpButton {
|
|
|
38
38
|
}
|
|
39
39
|
export declare interface IpButton extends Components.IpButton {
|
|
40
40
|
}
|
|
41
|
+
export declare class IpIconButton {
|
|
42
|
+
protected z: NgZone;
|
|
43
|
+
protected el: HTMLIpIconButtonElement;
|
|
44
|
+
/**
|
|
45
|
+
* Visual variant of the button. @default 'primary'
|
|
46
|
+
*/
|
|
47
|
+
set variant(_: Components.IpIconButton['variant']);
|
|
48
|
+
/**
|
|
49
|
+
* Size of the button. @default 'medium'
|
|
50
|
+
*/
|
|
51
|
+
set size(_: Components.IpIconButton['size']);
|
|
52
|
+
/**
|
|
53
|
+
* Disables the button. Also set implicitly when `loading` is true. @default false
|
|
54
|
+
*/
|
|
55
|
+
set disabled(_: Components.IpIconButton['disabled']);
|
|
56
|
+
/**
|
|
57
|
+
* Shows a loading spinner replacing the icon and disables interaction. @default false
|
|
58
|
+
*/
|
|
59
|
+
set loading(_: Components.IpIconButton['loading']);
|
|
60
|
+
/**
|
|
61
|
+
* Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it. @default 'button'
|
|
62
|
+
*/
|
|
63
|
+
set type(_: Components.IpIconButton['type']);
|
|
64
|
+
/**
|
|
65
|
+
* Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content. @default ''
|
|
66
|
+
*/
|
|
67
|
+
set label(_: Components.IpIconButton['label']);
|
|
68
|
+
/**
|
|
69
|
+
* Hides the tooltip. Useful when the button is already described by surrounding context. @default false
|
|
70
|
+
*/
|
|
71
|
+
set disableTooltip(_: Components.IpIconButton['disableTooltip']);
|
|
72
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
73
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<IpIconButton, never>;
|
|
74
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<IpIconButton, "ip-icon-button", never, { "disableTooltip": { "alias": "disableTooltip"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
75
|
+
}
|
|
76
|
+
export declare interface IpIconButton extends Components.IpIconButton {
|
|
77
|
+
}
|
|
41
78
|
export declare class IpTooltip {
|
|
42
79
|
protected z: NgZone;
|
|
43
80
|
protected el: HTMLIpTooltipElement;
|
|
@@ -9,6 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
9
9
|
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
|
10
10
|
import { ProxyCmp } from './angular-component-lib/utils';
|
|
11
11
|
import { defineCustomElement as defineIpButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-button.js';
|
|
12
|
+
import { defineCustomElement as defineIpIconButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js';
|
|
12
13
|
import { defineCustomElement as defineIpTooltip } from '@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js';
|
|
13
14
|
import * as i0 from "@angular/core";
|
|
14
15
|
let IpButton = class IpButton {
|
|
@@ -74,6 +75,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
74
75
|
inputs: ['alignIcon', 'ariaLabel', 'disabled', 'loading', 'size', 'type', 'variant'],
|
|
75
76
|
}]
|
|
76
77
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
78
|
+
let IpIconButton = class IpIconButton {
|
|
79
|
+
z;
|
|
80
|
+
el;
|
|
81
|
+
/**
|
|
82
|
+
* Visual variant of the button. @default 'primary'
|
|
83
|
+
*/
|
|
84
|
+
set variant(_) { }
|
|
85
|
+
;
|
|
86
|
+
/**
|
|
87
|
+
* Size of the button. @default 'medium'
|
|
88
|
+
*/
|
|
89
|
+
set size(_) { }
|
|
90
|
+
;
|
|
91
|
+
/**
|
|
92
|
+
* Disables the button. Also set implicitly when `loading` is true. @default false
|
|
93
|
+
*/
|
|
94
|
+
set disabled(_) { }
|
|
95
|
+
;
|
|
96
|
+
/**
|
|
97
|
+
* Shows a loading spinner replacing the icon and disables interaction. @default false
|
|
98
|
+
*/
|
|
99
|
+
set loading(_) { }
|
|
100
|
+
;
|
|
101
|
+
/**
|
|
102
|
+
* Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it. @default 'button'
|
|
103
|
+
*/
|
|
104
|
+
set type(_) { }
|
|
105
|
+
;
|
|
106
|
+
/**
|
|
107
|
+
* Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content. @default ''
|
|
108
|
+
*/
|
|
109
|
+
set label(_) { }
|
|
110
|
+
;
|
|
111
|
+
/**
|
|
112
|
+
* Hides the tooltip. Useful when the button is already described by surrounding context. @default false
|
|
113
|
+
*/
|
|
114
|
+
set disableTooltip(_) { }
|
|
115
|
+
;
|
|
116
|
+
constructor(c, r, z) {
|
|
117
|
+
this.z = z;
|
|
118
|
+
c.detach();
|
|
119
|
+
this.el = r.nativeElement;
|
|
120
|
+
}
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IpIconButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: IpIconButton, isStandalone: true, selector: "ip-icon-button", inputs: { disableTooltip: "disableTooltip", disabled: "disabled", label: "label", loading: "loading", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
|
+
};
|
|
124
|
+
IpIconButton = __decorate([
|
|
125
|
+
ProxyCmp({
|
|
126
|
+
defineCustomElementFn: defineIpIconButton,
|
|
127
|
+
inputs: ['disableTooltip', 'disabled', 'label', 'loading', 'size', 'type', 'variant']
|
|
128
|
+
})
|
|
129
|
+
], IpIconButton);
|
|
130
|
+
export { IpIconButton };
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IpIconButton, decorators: [{
|
|
132
|
+
type: Component,
|
|
133
|
+
args: [{
|
|
134
|
+
selector: 'ip-icon-button',
|
|
135
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
136
|
+
template: '<ng-content></ng-content>',
|
|
137
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
138
|
+
inputs: ['disableTooltip', 'disabled', 'label', 'loading', 'size', 'type', 'variant'],
|
|
139
|
+
}]
|
|
140
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
77
141
|
let IpTooltip = class IpTooltip {
|
|
78
142
|
z;
|
|
79
143
|
el;
|
|
@@ -7,6 +7,7 @@ import { ProxyCmp } from './angular-component-lib/utils';
|
|
|
7
7
|
import type { Components } from '@norconsult-digital-public/isypixel/web-components/components';
|
|
8
8
|
|
|
9
9
|
import { defineCustomElement as defineIpButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-button.js';
|
|
10
|
+
import { defineCustomElement as defineIpIconButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js';
|
|
10
11
|
import { defineCustomElement as defineIpTooltip } from '@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js';
|
|
11
12
|
@ProxyCmp({
|
|
12
13
|
defineCustomElementFn: defineIpButton,
|
|
@@ -59,6 +60,57 @@ export class IpButton {
|
|
|
59
60
|
export declare interface IpButton extends Components.IpButton {}
|
|
60
61
|
|
|
61
62
|
|
|
63
|
+
@ProxyCmp({
|
|
64
|
+
defineCustomElementFn: defineIpIconButton,
|
|
65
|
+
inputs: ['disableTooltip', 'disabled', 'label', 'loading', 'size', 'type', 'variant']
|
|
66
|
+
})
|
|
67
|
+
@Component({
|
|
68
|
+
selector: 'ip-icon-button',
|
|
69
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
70
|
+
template: '<ng-content></ng-content>',
|
|
71
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
72
|
+
inputs: ['disableTooltip', 'disabled', 'label', 'loading', 'size', 'type', 'variant'],
|
|
73
|
+
})
|
|
74
|
+
export class IpIconButton {
|
|
75
|
+
protected el: HTMLIpIconButtonElement;
|
|
76
|
+
/**
|
|
77
|
+
* Visual variant of the button. @default 'primary'
|
|
78
|
+
*/
|
|
79
|
+
set variant(_: Components.IpIconButton['variant']) {};
|
|
80
|
+
/**
|
|
81
|
+
* Size of the button. @default 'medium'
|
|
82
|
+
*/
|
|
83
|
+
set size(_: Components.IpIconButton['size']) {};
|
|
84
|
+
/**
|
|
85
|
+
* Disables the button. Also set implicitly when `loading` is true. @default false
|
|
86
|
+
*/
|
|
87
|
+
set disabled(_: Components.IpIconButton['disabled']) {};
|
|
88
|
+
/**
|
|
89
|
+
* Shows a loading spinner replacing the icon and disables interaction. @default false
|
|
90
|
+
*/
|
|
91
|
+
set loading(_: Components.IpIconButton['loading']) {};
|
|
92
|
+
/**
|
|
93
|
+
* Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it. @default 'button'
|
|
94
|
+
*/
|
|
95
|
+
set type(_: Components.IpIconButton['type']) {};
|
|
96
|
+
/**
|
|
97
|
+
* Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content. @default ''
|
|
98
|
+
*/
|
|
99
|
+
set label(_: Components.IpIconButton['label']) {};
|
|
100
|
+
/**
|
|
101
|
+
* Hides the tooltip. Useful when the button is already described by surrounding context. @default false
|
|
102
|
+
*/
|
|
103
|
+
set disableTooltip(_: Components.IpIconButton['disableTooltip']) {};
|
|
104
|
+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
|
|
105
|
+
c.detach();
|
|
106
|
+
this.el = r.nativeElement;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
export declare interface IpIconButton extends Components.IpIconButton {}
|
|
112
|
+
|
|
113
|
+
|
|
62
114
|
@ProxyCmp({
|
|
63
115
|
defineCustomElementFn: defineIpTooltip,
|
|
64
116
|
inputs: ['arrow', 'delay', 'disabled', 'maxWidth', 'position', 'size', 'visible']
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import * as d from './components';
|
|
2
|
-
export declare const DIRECTIVES: (typeof d.IpButton | typeof d.IpTooltip)[];
|
|
2
|
+
export declare const DIRECTIVES: (typeof d.IpButton | typeof d.IpIconButton | typeof d.IpTooltip)[];
|
|
@@ -4,10 +4,13 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import { type IpTooltipCustomEvent } from "@norconsult-digital-public/isypixel";
|
|
6
6
|
import { IpButton as IpButtonElement } from "@norconsult-digital-public/isypixel/web-components/components/ip-button.js";
|
|
7
|
+
import { IpIconButton as IpIconButtonElement } from "@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js";
|
|
7
8
|
import { IpTooltip as IpTooltipElement } from "@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js";
|
|
8
9
|
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
9
10
|
export type IpButtonEvents = NonNullable<unknown>;
|
|
10
11
|
export declare const IpButton: StencilReactComponent<IpButtonElement, IpButtonEvents>;
|
|
12
|
+
export type IpIconButtonEvents = NonNullable<unknown>;
|
|
13
|
+
export declare const IpIconButton: StencilReactComponent<IpIconButtonElement, IpIconButtonEvents>;
|
|
11
14
|
export type IpTooltipEvents = {
|
|
12
15
|
onShow: EventName<IpTooltipCustomEvent<void>>;
|
|
13
16
|
onHide: EventName<IpTooltipCustomEvent<void>>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { IpButton as IpButtonElement, defineCustomElement as defineIpButton } from "@norconsult-digital-public/isypixel/web-components/components/ip-button.js";
|
|
3
|
+
import { IpIconButton as IpIconButtonElement, defineCustomElement as defineIpIconButton } from "@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js";
|
|
3
4
|
import { IpTooltip as IpTooltipElement, defineCustomElement as defineIpTooltip } from "@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js";
|
|
4
5
|
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
5
6
|
import React from 'react';
|
|
@@ -11,6 +12,14 @@ export const IpButton = /*@__PURE__*/ createComponent({
|
|
|
11
12
|
events: {},
|
|
12
13
|
defineCustomElement: defineIpButton
|
|
13
14
|
});
|
|
15
|
+
export const IpIconButton = /*@__PURE__*/ createComponent({
|
|
16
|
+
tagName: 'ip-icon-button',
|
|
17
|
+
elementClass: IpIconButtonElement,
|
|
18
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
19
|
+
react: React,
|
|
20
|
+
events: {},
|
|
21
|
+
defineCustomElement: defineIpIconButton
|
|
22
|
+
});
|
|
14
23
|
export const IpTooltip = /*@__PURE__*/ createComponent({
|
|
15
24
|
tagName: 'ip-tooltip',
|
|
16
25
|
elementClass: IpTooltipElement,
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
import { type IpTooltipCustomEvent } from "@norconsult-digital-public/isypixel";
|
|
11
11
|
import { IpButton as IpButtonElement, defineCustomElement as defineIpButton } from "@norconsult-digital-public/isypixel/web-components/components/ip-button.js";
|
|
12
|
+
import { IpIconButton as IpIconButtonElement, defineCustomElement as defineIpIconButton } from "@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js";
|
|
12
13
|
import { IpTooltip as IpTooltipElement, defineCustomElement as defineIpTooltip } from "@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js";
|
|
13
14
|
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
14
15
|
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
@@ -25,6 +26,17 @@ export const IpButton: StencilReactComponent<IpButtonElement, IpButtonEvents> =
|
|
|
25
26
|
defineCustomElement: defineIpButton
|
|
26
27
|
});
|
|
27
28
|
|
|
29
|
+
export type IpIconButtonEvents = NonNullable<unknown>;
|
|
30
|
+
|
|
31
|
+
export const IpIconButton: StencilReactComponent<IpIconButtonElement, IpIconButtonEvents> = /*@__PURE__*/ createComponent<IpIconButtonElement, IpIconButtonEvents>({
|
|
32
|
+
tagName: 'ip-icon-button',
|
|
33
|
+
elementClass: IpIconButtonElement,
|
|
34
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
35
|
+
react: React,
|
|
36
|
+
events: {} as IpIconButtonEvents,
|
|
37
|
+
defineCustomElement: defineIpIconButton
|
|
38
|
+
});
|
|
39
|
+
|
|
28
40
|
export type IpTooltipEvents = {
|
|
29
41
|
onShow: EventName<IpTooltipCustomEvent<void>>,
|
|
30
42
|
onHide: EventName<IpTooltipCustomEvent<void>>
|
|
@@ -5,6 +5,7 @@ import type { Components } from '@norconsult-digital-public/isypixel/web-compone
|
|
|
5
5
|
declare namespace svelteHTML {
|
|
6
6
|
interface IntrinsicElements {
|
|
7
7
|
'ip-button': Partial<Components.IpButton> & { [key: string]: unknown };
|
|
8
|
+
'ip-icon-button': Partial<Components.IpIconButton> & { [key: string]: unknown };
|
|
8
9
|
'ip-tooltip': Partial<Components.IpTooltip> & { [key: string]: unknown };
|
|
9
10
|
}
|
|
10
11
|
}
|
|
@@ -13,6 +14,7 @@ declare namespace svelteHTML {
|
|
|
13
14
|
declare module 'svelte/elements' {
|
|
14
15
|
interface SvelteHTMLElements {
|
|
15
16
|
'ip-button': Partial<Components.IpButton> & { [key: string]: unknown };
|
|
17
|
+
'ip-icon-button': Partial<Components.IpIconButton> & { [key: string]: unknown };
|
|
16
18
|
'ip-tooltip': Partial<Components.IpTooltip> & { [key: string]: unknown };
|
|
17
19
|
}
|
|
18
20
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
|
|
2
2
|
import type { JSX } from '@norconsult-digital-public/isypixel/web-components/components';
|
|
3
3
|
export declare const IpButton: StencilVueComponent<JSX.IpButton>;
|
|
4
|
+
export declare const IpIconButton: StencilVueComponent<JSX.IpIconButton>;
|
|
4
5
|
export declare const IpTooltip: StencilVueComponent<JSX.IpTooltip>;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
/* auto-generated vue proxies */
|
|
4
4
|
import { defineContainer } from '@stencil/vue-output-target/runtime';
|
|
5
5
|
import { defineCustomElement as defineIpButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-button.js';
|
|
6
|
+
import { defineCustomElement as defineIpIconButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js';
|
|
6
7
|
import { defineCustomElement as defineIpTooltip } from '@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js';
|
|
7
8
|
export const IpButton = /*@__PURE__*/ defineContainer('ip-button', defineIpButton, [
|
|
8
9
|
'ariaLabel',
|
|
@@ -13,6 +14,15 @@ export const IpButton = /*@__PURE__*/ defineContainer('ip-button', defineIpButto
|
|
|
13
14
|
'size',
|
|
14
15
|
'alignIcon'
|
|
15
16
|
]);
|
|
17
|
+
export const IpIconButton = /*@__PURE__*/ defineContainer('ip-icon-button', defineIpIconButton, [
|
|
18
|
+
'variant',
|
|
19
|
+
'size',
|
|
20
|
+
'disabled',
|
|
21
|
+
'loading',
|
|
22
|
+
'type',
|
|
23
|
+
'label',
|
|
24
|
+
'disableTooltip'
|
|
25
|
+
]);
|
|
16
26
|
export const IpTooltip = /*@__PURE__*/ defineContainer('ip-tooltip', defineIpTooltip, [
|
|
17
27
|
'position',
|
|
18
28
|
'size',
|
|
@@ -6,6 +6,7 @@ import { defineContainer, type StencilVueComponent } from '@stencil/vue-output-t
|
|
|
6
6
|
import type { JSX } from '@norconsult-digital-public/isypixel/web-components/components';
|
|
7
7
|
|
|
8
8
|
import { defineCustomElement as defineIpButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-button.js';
|
|
9
|
+
import { defineCustomElement as defineIpIconButton } from '@norconsult-digital-public/isypixel/web-components/components/ip-icon-button.js';
|
|
9
10
|
import { defineCustomElement as defineIpTooltip } from '@norconsult-digital-public/isypixel/web-components/components/ip-tooltip.js';
|
|
10
11
|
|
|
11
12
|
|
|
@@ -21,6 +22,17 @@ export const IpButton: StencilVueComponent<JSX.IpButton> = /*@__PURE__*/ defineC
|
|
|
21
22
|
]);
|
|
22
23
|
|
|
23
24
|
|
|
25
|
+
export const IpIconButton: StencilVueComponent<JSX.IpIconButton> = /*@__PURE__*/ defineContainer<JSX.IpIconButton>('ip-icon-button', defineIpIconButton, [
|
|
26
|
+
'variant',
|
|
27
|
+
'size',
|
|
28
|
+
'disabled',
|
|
29
|
+
'loading',
|
|
30
|
+
'type',
|
|
31
|
+
'label',
|
|
32
|
+
'disableTooltip'
|
|
33
|
+
]);
|
|
34
|
+
|
|
35
|
+
|
|
24
36
|
export const IpTooltip: StencilVueComponent<JSX.IpTooltip> = /*@__PURE__*/ defineContainer<JSX.IpTooltip>('ip-tooltip', defineIpTooltip, [
|
|
25
37
|
'position',
|
|
26
38
|
'size',
|