ng-hub-ui-buttons 22.6.0 → 22.8.0
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 +59 -27
- package/fesm2022/ng-hub-ui-buttons.mjs +128 -28
- package/fesm2022/ng-hub-ui-buttons.mjs.map +1 -1
- package/ng-hub-ui-buttons-22.8.0.tgz +0 -0
- package/package.json +1 -1
- package/styles/_btn-mixins.scss +58 -17
- package/types/ng-hub-ui-buttons.d.ts +76 -8
- package/ng-hub-ui-buttons-22.6.0.tgz +0 -0
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ This library is part of the **ng-hub-ui** ecosystem:
|
|
|
51
51
|
## Features
|
|
52
52
|
|
|
53
53
|
- **Signal-based API** — all inputs use `input()`, `model()` and `output()`; fully `OnPush`-safe and compatible with zoneless apps.
|
|
54
|
-
- **Five variants ×
|
|
54
|
+
- **Five variants × nine colours** — `solid`, `outline`, `soft`, `ghost` and `link`, each available in `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` and `dark`.
|
|
55
55
|
- **Four sizes** — `sm`, `md`, `lg`, `xl` with proportional padding and font scaling.
|
|
56
56
|
- **FAB with nine positions** — fixed-viewport placement at any corner, edge-center or screen-center via CSS logical properties (RTL-ready).
|
|
57
57
|
- **Speed Dial** — expandable FAB menu with `isOpen` two-way model, directional expansion and Escape close.
|
|
@@ -117,10 +117,9 @@ A single component with a dual selector — use it as an **element** or as an **
|
|
|
117
117
|
| Input | Type | Default | Description |
|
|
118
118
|
|-------|------|---------|-------------|
|
|
119
119
|
| `variant` | `solid \| outline \| soft \| ghost \| link` | `solid` | Visual style |
|
|
120
|
-
| `color` | `primary \| secondary \| success \| danger \| warning \| info` | `primary` | Semantic colour |
|
|
120
|
+
| `color` | `HubSemanticColor` — the nine built-ins (`primary \| secondary \| success \| danger \| warning \| info \| neutral \| light \| dark`) **or any custom accent** registered with `hub-btn-color-rules()` | `primary` | Semantic colour (open set) |
|
|
121
121
|
| `size` | `sm \| md \| lg \| xl` | `md` | Size scale |
|
|
122
|
-
| `
|
|
123
|
-
| `loading` | `boolean` | `false` | Shows spinner and blocks interaction |
|
|
122
|
+
| `loading` | `boolean` | `false` | Shows the spinner and marks the button **busy + disabled** — non-focusable, inert to pointer/keyboard, reflects `aria-busy="true"` and the `disabled` attribute |
|
|
124
123
|
| `disabled` | `boolean` | `false` | Disables the button and sets the `disabled` attribute |
|
|
125
124
|
|
|
126
125
|
```html
|
|
@@ -132,10 +131,27 @@ A single component with a dual selector — use it as an **element** or as an **
|
|
|
132
131
|
<a hubButton variant="link" color="primary" href="/docs">Read more</a>
|
|
133
132
|
```
|
|
134
133
|
|
|
135
|
-
> **Tip:** prefer the attribute form on a native `<button>` / `<a>` when you need real button semantics (focus, keyboard activation, form submission). `<hub-button>` is a styling host
|
|
134
|
+
> **Tip:** prefer the attribute form on a native `<button>` / `<a>` when you need real button semantics (focus, keyboard activation, form submission). The `<hub-button>` element form is a styling host, but it self-advertises `role="button"`, a focusable `tabindex` and Enter/Space activation so it stays keyboard-accessible; because it then reports as a button, don't nest it inside another interactive element.
|
|
136
135
|
>
|
|
137
136
|
> **Deprecated aliases:** `HubBtnComponent` and `HubBtnDirective` still export (pointing to `HubButtonComponent`) for backward compatibility — migrate to `HubButtonComponent`.
|
|
138
137
|
|
|
138
|
+
#### Loading / busy state
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<button hubButton color="primary" [loading]="saving()">Save</button>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
While `loading` is `true` the button shows an animated spinner and is fully inert: it reflects `aria-busy="true"` and the native `disabled` attribute, drops out of the tab order and ignores pointer and keyboard activation — so an in-flight submit can't fire twice.
|
|
145
|
+
|
|
146
|
+
The spinner glyph is the swappable `--hub-button-spinner` token (a `url("data:image/svg+xml,…")` painted through `mask`, so it inherits the button's text colour). Point it at any SVG to replace the loader, and tune `--hub-button-spinner-duration` / `--hub-button-spinner-size`:
|
|
147
|
+
|
|
148
|
+
```css
|
|
149
|
+
hub-button, [hubButton] {
|
|
150
|
+
--hub-button-spinner: url("data:image/svg+xml,%3Csvg …%3E"); /* your loader */
|
|
151
|
+
--hub-button-spinner-duration: 1s;
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
139
155
|
### `HubFabComponent` — `<hub-fab>`
|
|
140
156
|
|
|
141
157
|
| Input | Type | Default | Description |
|
|
@@ -235,8 +251,18 @@ All visual properties are CSS custom properties scoped with `:where()` (zero spe
|
|
|
235
251
|
--hub-button-gap: 0.375rem;
|
|
236
252
|
--hub-button-transition: all 0.15s ease;
|
|
237
253
|
--hub-button-spinner-size: 0.875em;
|
|
254
|
+
--hub-button-spinner-duration: 0.7s;
|
|
255
|
+
--hub-button-spinner: url("data:image/svg+xml,…"); /* the loading glyph — swap for any SVG */
|
|
238
256
|
--hub-button-disabled-opacity: 0.55;
|
|
239
257
|
|
|
258
|
+
/* Button interaction slots (overridable hover / pressed families) */
|
|
259
|
+
--hub-btn-hover-bg: var(--hub-btn-accent-subtle);
|
|
260
|
+
--hub-btn-hover-border: transparent;
|
|
261
|
+
--hub-btn-hover-color: var(--hub-btn-accent-emphasis);
|
|
262
|
+
--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));
|
|
263
|
+
--hub-btn-active-border: transparent;
|
|
264
|
+
--hub-btn-active-color: var(--hub-btn-accent-on);
|
|
265
|
+
|
|
240
266
|
/* FAB */
|
|
241
267
|
--hub-fab-size-mini: 2.5rem;
|
|
242
268
|
--hub-fab-size-standard: 3.5rem;
|
|
@@ -256,17 +282,17 @@ All visual properties are CSS custom properties scoped with `:where()` (zero spe
|
|
|
256
282
|
/* Dropdown panel */
|
|
257
283
|
--hub-dropdown-panel-min-width: 11.25rem;
|
|
258
284
|
--hub-dropdown-panel-max-height: 20rem;
|
|
259
|
-
--hub-dropdown-panel-padding-y: 0.25rem;
|
|
260
|
-
--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #
|
|
261
|
-
--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #
|
|
262
|
-
--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, 0.
|
|
263
|
-
--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg);
|
|
264
|
-
--hub-dropdown-panel-zindex: 1000;
|
|
285
|
+
--hub-dropdown-panel-padding-y: var(--hub-ref-space-1, 0.25rem);
|
|
286
|
+
--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #ffffff);
|
|
287
|
+
--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #dee2e6);
|
|
288
|
+
--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, 0.375rem);
|
|
289
|
+
--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
|
|
290
|
+
--hub-dropdown-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);
|
|
265
291
|
|
|
266
292
|
/* Dropdown item */
|
|
267
|
-
--hub-dropdown-item-padding-x:
|
|
268
|
-
--hub-dropdown-item-padding-y: 0.
|
|
269
|
-
--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #
|
|
293
|
+
--hub-dropdown-item-padding-x: var(--hub-ref-space-3, 1rem);
|
|
294
|
+
--hub-dropdown-item-padding-y: var(--hub-ref-space-2, 0.5rem);
|
|
295
|
+
--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #f8f9fa);
|
|
270
296
|
--hub-dropdown-item-border-radius: var(--hub-sys-radius-sm, 0.25rem);
|
|
271
297
|
--hub-dropdown-item-disabled-opacity: 0.45;
|
|
272
298
|
```
|
|
@@ -285,12 +311,15 @@ Register custom semantic colors without modifying the library. Import the mixin
|
|
|
285
311
|
|
|
286
312
|
### Add a custom color to all five button variants
|
|
287
313
|
|
|
314
|
+
`hub-btn-color-rules('brand')` points the local `--hub-btn-accent` slot at
|
|
315
|
+
`--hub-sys-color-brand`. You only define that **one** value — the button derives
|
|
316
|
+
the whole role family (`-emphasis` / `-subtle` / `-on`) from it at runtime, so
|
|
317
|
+
every appearance (solid/outline/soft/ghost/link) works and `color="brand"`
|
|
318
|
+
type-checks (the `color` input is an open set):
|
|
319
|
+
|
|
288
320
|
```scss
|
|
289
321
|
:root {
|
|
290
|
-
--hub-sys-color-brand
|
|
291
|
-
--hub-sys-color-brand-emphasis: #cc5500;
|
|
292
|
-
--hub-sys-color-brand-subtle: #fff0e6;
|
|
293
|
-
--hub-sys-color-brand-on-default: #fff;
|
|
322
|
+
--hub-sys-color-brand: #ff6b00; // the single accent — that's all it needs
|
|
294
323
|
}
|
|
295
324
|
|
|
296
325
|
hub-button, [hubButton] {
|
|
@@ -305,17 +334,20 @@ hub-button, [hubButton] {
|
|
|
305
334
|
|
|
306
335
|
### Create a fully custom variant
|
|
307
336
|
|
|
308
|
-
`hub-btn-variant-rules` is the generic primitive
|
|
337
|
+
`hub-btn-variant-rules` is the generic primitive — **all parameters are named**
|
|
338
|
+
(there is no positional `$type`). Its defaults match the `ghost` variant, and
|
|
339
|
+
every colour reads the local `--hub-btn-accent*` slot family, so it stays
|
|
340
|
+
accent-agnostic. Override only the values that differ:
|
|
309
341
|
|
|
310
342
|
```scss
|
|
311
343
|
hub-button, [hubButton] {
|
|
312
344
|
&.hub-btn-inverted.hub-btn-brand {
|
|
313
|
-
@include hub.hub-btn-variant-rules(
|
|
314
|
-
$bg: var(--hub-
|
|
315
|
-
$color: var(--hub-
|
|
316
|
-
$border: var(--hub-
|
|
317
|
-
$hover-bg: var(--hub-
|
|
318
|
-
$hover-color: var(--hub-
|
|
345
|
+
@include hub.hub-btn-variant-rules(
|
|
346
|
+
$bg: var(--hub-btn-accent-on),
|
|
347
|
+
$color: var(--hub-btn-accent),
|
|
348
|
+
$border: var(--hub-btn-accent),
|
|
349
|
+
$hover-bg: var(--hub-btn-accent),
|
|
350
|
+
$hover-color: var(--hub-btn-accent-on)
|
|
319
351
|
);
|
|
320
352
|
}
|
|
321
353
|
}
|
|
@@ -341,8 +373,8 @@ hub-button, [hubButton] {
|
|
|
341
373
|
|
|
342
374
|
| Mixin | Context | Description |
|
|
343
375
|
|---|---|---|
|
|
344
|
-
| `hub-btn-variant-rules($
|
|
345
|
-
| `hub-btn-color-rules($type)` | global `hub-button, [hubButton]` block |
|
|
376
|
+
| `hub-btn-variant-rules($bg, $color, $border, $hover-*, $active-*, …)` | inside a `hub-button, [hubButton]` variant selector | Generic primitive — every appearance property as a **named** param (no positional `$type`) |
|
|
377
|
+
| `hub-btn-color-rules($type)` | global `hub-button, [hubButton]` block | Registers one custom accent (`--hub-btn-accent` → `--hub-sys-color-$type`); all five appearances derive from it |
|
|
346
378
|
| `hub-fab-color($type)` | root | Global `.hub-fab-{type}` color rule |
|
|
347
379
|
| `hub-dropdown-panel-color($type)` | root | Global color rule for `hub-dropdown-panel` |
|
|
348
380
|
| `hub-dropdown-panel-color-rules($type)` | inside `hub-dropdown-panel` selector | CSS properties only — bring your own selector |
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, input, HostBinding, ChangeDetectionStrategy, Component, output, signal,
|
|
2
|
+
import { InjectionToken, inject, ElementRef, input, HostListener, HostBinding, ChangeDetectionStrategy, Component, output, signal, DestroyRef, ViewEncapsulation, model, PLATFORM_ID, ViewContainerRef, Directive } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { fromEvent } from 'rxjs';
|
|
5
5
|
import { debounceTime, filter, take } from 'rxjs/operators';
|
|
6
|
+
import { isPlatformBrowser, DOCUMENT } from '@angular/common';
|
|
6
7
|
import { OverlayService } from 'ng-hub-ui-utils';
|
|
7
8
|
|
|
8
9
|
/** Injection token for DropdownContext. */
|
|
@@ -17,8 +18,16 @@ const DROPDOWN_CONTEXT = new InjectionToken('HubDropdownContext');
|
|
|
17
18
|
* - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href="…">Link</a>`.
|
|
18
19
|
*
|
|
19
20
|
* Prefer the attribute form on a native `<button>` / `<a>` when you need real button
|
|
20
|
-
* semantics (focus, keyboard activation, form submission)
|
|
21
|
-
* a styling host
|
|
21
|
+
* semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**
|
|
22
|
+
* form is only a styling host — a component cannot swap its own host tag for a native
|
|
23
|
+
* `<button>` — so it self-advertises `role="button"`, a focusable `tabindex`, and
|
|
24
|
+
* Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on
|
|
25
|
+
* a native `<button>`/`<a>` adds **none** of these bindings (the host is already
|
|
26
|
+
* interactive; a redundant `role`/`tabindex` would be harmful).
|
|
27
|
+
*
|
|
28
|
+
* **Accessibility caveat:** an element-form `<hub-button>` now reports `role="button"`,
|
|
29
|
+
* so it must not be nested inside another interactive element (a `<button>`, `<a>` or any
|
|
30
|
+
* host that is itself a control), which would produce an invalid nested-interactive tree.
|
|
22
31
|
*
|
|
23
32
|
* **Icons:** project whatever you want as content — the button is icon-library
|
|
24
33
|
* agnostic. The icon's position follows the markup order, and the label/icon gap
|
|
@@ -31,6 +40,13 @@ const DROPDOWN_CONTEXT = new InjectionToken('HubDropdownContext');
|
|
|
31
40
|
* ```
|
|
32
41
|
*/
|
|
33
42
|
class HubButtonComponent {
|
|
43
|
+
/**
|
|
44
|
+
* Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a
|
|
45
|
+
* native host). Read once from the host tag at construction — a static host fact that
|
|
46
|
+
* is available immediately (unlike input signals, which are not populated in the
|
|
47
|
+
* constructor). Gates the a11y host bindings so they only apply to the element form.
|
|
48
|
+
*/
|
|
49
|
+
_isElementForm = inject(ElementRef).nativeElement.tagName === 'HUB-BUTTON';
|
|
34
50
|
/** Visual style of the button. */
|
|
35
51
|
variant = input('solid', /* @ts-ignore */
|
|
36
52
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -40,12 +56,26 @@ class HubButtonComponent {
|
|
|
40
56
|
/** Size token. */
|
|
41
57
|
size = input('md', /* @ts-ignore */
|
|
42
58
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
43
|
-
/**
|
|
59
|
+
/**
|
|
60
|
+
* When true, shows the spinner and marks the button **busy and disabled**: it
|
|
61
|
+
* reflects `aria-busy="true"`, becomes non-focusable and inert to pointer and
|
|
62
|
+
* keyboard, and (like {@link disabled}) reflects the native `disabled` attribute
|
|
63
|
+
* so an in-flight submit button cannot be triggered twice.
|
|
64
|
+
*/
|
|
44
65
|
loading = input(false, /* @ts-ignore */
|
|
45
66
|
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
46
67
|
/** Mirrors the native disabled attribute on the host element. */
|
|
47
68
|
disabled = input(false, /* @ts-ignore */
|
|
48
69
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
70
|
+
/**
|
|
71
|
+
* True while the button must not respond to interaction — either explicitly
|
|
72
|
+
* {@link disabled} or busy {@link loading}. Drives the native `disabled`
|
|
73
|
+
* reflection, the tab-order removal and the keyboard-activation guard so both
|
|
74
|
+
* states are inert through a single source of truth.
|
|
75
|
+
*/
|
|
76
|
+
get _isInert() {
|
|
77
|
+
return this.disabled() || this.loading();
|
|
78
|
+
}
|
|
49
79
|
/** Computed CSS classes applied to the host element via HostBinding. */
|
|
50
80
|
get _hostClass() {
|
|
51
81
|
return [
|
|
@@ -58,22 +88,85 @@ class HubButtonComponent {
|
|
|
58
88
|
.filter(Boolean)
|
|
59
89
|
.join(' ');
|
|
60
90
|
}
|
|
61
|
-
/** Reflects the
|
|
91
|
+
/** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */
|
|
62
92
|
get _disabledAttr() {
|
|
63
|
-
return this.
|
|
93
|
+
return this._isInert ? true : null;
|
|
94
|
+
}
|
|
95
|
+
/** Announces the busy state to assistive tech while loading. */
|
|
96
|
+
get _ariaBusy() {
|
|
97
|
+
return this.loading() ? 'true' : null;
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Conveys the inert state to assistive tech on the element form, whose custom
|
|
101
|
+
* host tag does not natively expose `disabled`. Bound to nothing for the
|
|
102
|
+
* attribute form (its native host already exposes the state).
|
|
103
|
+
*/
|
|
104
|
+
get _ariaDisabled() {
|
|
105
|
+
return this._isElementForm && this._isInert ? 'true' : null;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Advertises `role="button"` for the element form only. The attribute form binds
|
|
109
|
+
* nothing (its native host already exposes the correct role).
|
|
110
|
+
*/
|
|
111
|
+
get _role() {
|
|
112
|
+
return this._isElementForm ? 'button' : null;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Makes the element form keyboard-focusable (`0`), or removes it from the tab order
|
|
116
|
+
* when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.
|
|
117
|
+
*/
|
|
118
|
+
get _tabindex() {
|
|
119
|
+
if (!this._isElementForm) {
|
|
120
|
+
return null;
|
|
121
|
+
}
|
|
122
|
+
return this._isInert ? -1 : 0;
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Emulates native button keyboard activation for the element form: Enter or Space
|
|
126
|
+
* triggers a click. Space additionally calls `preventDefault()` to stop the page from
|
|
127
|
+
* scrolling. No-op for the attribute form (the native host already handles keys) and
|
|
128
|
+
* while inert (disabled or loading).
|
|
129
|
+
* @param event The originating keyboard event.
|
|
130
|
+
*/
|
|
131
|
+
_onKeydown(event) {
|
|
132
|
+
if (!this._isElementForm || this._isInert) {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
const isSpace = event.key === ' ' || event.key === 'Spacebar';
|
|
136
|
+
if (event.key === 'Enter' || isSpace) {
|
|
137
|
+
if (isSpace) {
|
|
138
|
+
event.preventDefault();
|
|
139
|
+
}
|
|
140
|
+
event.currentTarget.click();
|
|
141
|
+
}
|
|
64
142
|
}
|
|
65
143
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubButtonComponent, isStandalone: true, selector: "hub-button, [hubButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass", "attr.disabled": "this._disabledAttr" }, classAttribute: "hub-btn" }, ngImport: i0, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: all .15s ease;--hub-button-spinner-size: .875em;--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #
|
|
144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubButtonComponent, isStandalone: true, selector: "hub-button, [hubButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "class": "this._hostClass", "attr.disabled": "this._disabledAttr", "attr.aria-busy": "this._ariaBusy", "attr.aria-disabled": "this._ariaDisabled", "attr.role": "this._role", "attr.tabindex": "this._tabindex" }, classAttribute: "hub-btn" }, ngImport: i0, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-button-spinner-size: .875em;--hub-button-spinner-duration: .7s;--hub-button-spinner: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E\");--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-btn-hover-bg: var(--hub-btn-accent-subtle);--hub-btn-hover-border: transparent;--hub-btn-hover-color: var(--hub-btn-accent-emphasis);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));--hub-btn-active-border: transparent;--hub-btn-active-color: var(--hub-btn-accent-on)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);background-color:currentColor;-webkit-mask:var(--hub-button-spinner) center/contain no-repeat;mask:var(--hub-button-spinner) center/contain no-repeat;animation:hub-btn-spin var(--hub-button-spinner-duration, .7s) linear infinite}@media(prefers-reduced-motion:reduce){.hub-btn__spinner{animation-duration:1.6s}}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent);--hub-btn-hover-bg: var(--hub-btn-accent-emphasis);--hub-btn-hover-border: var(--hub-btn-accent-emphasis);--hub-btn-hover-color: var(--hub-btn-accent-on);--hub-btn-active-border: var(--hub-btn-active-bg);--hub-btn-active-color: var(--hub-btn-accent-on)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-solid):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent);--hub-btn-hover-border: var(--hub-btn-accent);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 70%, var(--hub-btn-accent));--hub-btn-active-border: var(--hub-btn-accent);--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-outline):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-hover-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 60%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-soft):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-ghost):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem;--hub-btn-hover-bg: transparent;--hub-btn-hover-color: var(--hub-btn-accent);--hub-btn-active-bg: transparent;--hub-btn-active-color: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529))}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-link):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67
145
|
}
|
|
68
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubButtonComponent, decorators: [{
|
|
69
147
|
type: Component,
|
|
70
|
-
args: [{ selector: 'hub-button, [hubButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-btn' }, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: all .15s ease;--hub-button-spinner-size: .875em;--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #
|
|
148
|
+
args: [{ selector: 'hub-button, [hubButton]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-btn' }, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-button-padding-x: var(--hub-ref-space-3, 1rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-border-radius: var(--hub-sys-radius-md, .375rem);--hub-button-border-width: 1.5px;--hub-button-font-size: var(--hub-ref-font-size-base, 1rem);--hub-button-font-weight: var(--hub-ref-font-weight-medium, 500);--hub-button-gap: var(--hub-ref-space-2, .5rem);--hub-button-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-button-spinner-size: .875em;--hub-button-spinner-duration: .7s;--hub-button-spinner: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E\");--hub-button-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-btn-accent: var(--hub-sys-color-primary, #0d6efd);--hub-btn-accent-emphasis: color-mix(in oklch, var(--hub-btn-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-btn-accent-subtle: color-mix(in oklch, var(--hub-btn-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-btn-accent-on: oklch(from var(--hub-btn-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-btn-hover-bg: var(--hub-btn-accent-subtle);--hub-btn-hover-border: transparent;--hub-btn-hover-color: var(--hub-btn-accent-emphasis);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529));--hub-btn-active-border: transparent;--hub-btn-active-color: var(--hub-btn-accent-on)}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-button-gap);padding:var(--hub-button-padding-y) var(--hub-button-padding-x);border-radius:var(--hub-button-border-radius);border:var(--hub-button-border-width) solid transparent;font-size:var(--hub-button-font-size);font-weight:var(--hub-button-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-button-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-button-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-button-padding-x: var(--hub-ref-space-2, .5rem);--hub-button-padding-y: var(--hub-ref-space-1, .25rem);--hub-button-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-button-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-2, .5rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}:host(.hub-btn-xl){--hub-button-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-button-padding-y: var(--hub-ref-space-3, 1rem);--hub-button-font-size: var(--hub-ref-font-size-lg, 1.25rem)}.hub-btn__spinner{display:inline-block;width:var(--hub-button-spinner-size);height:var(--hub-button-spinner-size);background-color:currentColor;-webkit-mask:var(--hub-button-spinner) center/contain no-repeat;mask:var(--hub-button-spinner) center/contain no-repeat;animation:hub-btn-spin var(--hub-button-spinner-duration, .7s) linear infinite}@media(prefers-reduced-motion:reduce){.hub-btn__spinner{animation-duration:1.6s}}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-primary){--hub-btn-accent: var(--hub-sys-color-primary, var(--hub-sys-color-primary))}:host(.hub-btn-secondary){--hub-btn-accent: var(--hub-sys-color-secondary, var(--hub-sys-color-primary))}:host(.hub-btn-success){--hub-btn-accent: var(--hub-sys-color-success, var(--hub-sys-color-primary))}:host(.hub-btn-danger){--hub-btn-accent: var(--hub-sys-color-danger, var(--hub-sys-color-primary))}:host(.hub-btn-warning){--hub-btn-accent: var(--hub-sys-color-warning, var(--hub-sys-color-primary))}:host(.hub-btn-info){--hub-btn-accent: var(--hub-sys-color-info, var(--hub-sys-color-primary))}:host(.hub-btn-neutral){--hub-btn-accent: var(--hub-sys-color-neutral, var(--hub-sys-color-primary))}:host(.hub-btn-light){--hub-btn-accent: var(--hub-sys-color-light, var(--hub-sys-color-primary))}:host(.hub-btn-dark){--hub-btn-accent: var(--hub-sys-color-dark, var(--hub-sys-color-primary))}:host(.hub-btn-solid){background:var(--hub-btn-accent);color:var(--hub-btn-accent-on);border-color:var(--hub-btn-accent);--hub-btn-hover-bg: var(--hub-btn-accent-emphasis);--hub-btn-hover-border: var(--hub-btn-accent-emphasis);--hub-btn-hover-color: var(--hub-btn-accent-on);--hub-btn-active-border: var(--hub-btn-active-bg);--hub-btn-active-color: var(--hub-btn-accent-on)}:host(.hub-btn-solid):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-solid):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-outline){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:var(--hub-btn-accent);--hub-btn-hover-border: var(--hub-btn-accent);--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 70%, var(--hub-btn-accent));--hub-btn-active-border: var(--hub-btn-accent);--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-outline):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-outline):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-soft){background:var(--hub-btn-accent-subtle);color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-hover-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 60%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-soft):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-soft):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-ghost){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;--hub-btn-active-bg: color-mix(in oklch, var(--hub-btn-accent-subtle) 80%, var(--hub-btn-accent));--hub-btn-active-color: var(--hub-btn-accent-emphasis)}:host(.hub-btn-ghost):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-ghost):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}:host(.hub-btn-link){background:transparent;color:var(--hub-btn-accent-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem;--hub-btn-hover-bg: transparent;--hub-btn-hover-color: var(--hub-btn-accent);--hub-btn-active-bg: transparent;--hub-btn-active-color: color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529))}:host(.hub-btn-link):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-hover-bg);border-color:var(--hub-btn-hover-border);color:var(--hub-btn-hover-color)}:host(.hub-btn-link):active:not([disabled]):not(.hub-btn-disabled){background:var(--hub-btn-active-bg);border-color:var(--hub-btn-active-border);color:var(--hub-btn-active-color)}\n"] }]
|
|
71
149
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _hostClass: [{
|
|
72
150
|
type: HostBinding,
|
|
73
151
|
args: ['class']
|
|
74
152
|
}], _disabledAttr: [{
|
|
75
153
|
type: HostBinding,
|
|
76
154
|
args: ['attr.disabled']
|
|
155
|
+
}], _ariaBusy: [{
|
|
156
|
+
type: HostBinding,
|
|
157
|
+
args: ['attr.aria-busy']
|
|
158
|
+
}], _ariaDisabled: [{
|
|
159
|
+
type: HostBinding,
|
|
160
|
+
args: ['attr.aria-disabled']
|
|
161
|
+
}], _role: [{
|
|
162
|
+
type: HostBinding,
|
|
163
|
+
args: ['attr.role']
|
|
164
|
+
}], _tabindex: [{
|
|
165
|
+
type: HostBinding,
|
|
166
|
+
args: ['attr.tabindex']
|
|
167
|
+
}], _onKeydown: [{
|
|
168
|
+
type: HostListener,
|
|
169
|
+
args: ['keydown', ['$event']]
|
|
77
170
|
}] } });
|
|
78
171
|
|
|
79
172
|
/**
|
|
@@ -123,11 +216,11 @@ class HubFabComponent {
|
|
|
123
216
|
});
|
|
124
217
|
}
|
|
125
218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubFabComponent, isStandalone: true, selector: "hub-fab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapseOnScroll: { classPropertyName: "collapseOnScroll", publicName: "collapseOnScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fabClick: "fabClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-fab" }, ngImport: i0, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0
|
|
219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubFabComponent, isStandalone: true, selector: "hub-fab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapseOnScroll: { classPropertyName: "collapseOnScroll", publicName: "collapseOnScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fabClick: "fabClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-fab" }, ngImport: i0, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-fab-shadow-hover: var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175));--hub-fab-offset: var(--hub-ref-space-3, 1rem);--hub-fab-extended-height: 3.5rem;--hub-fab-extended-radius: 1.75rem;--hub-fab-extended-padding-x: 1.25rem;--hub-fab-transition: box-shadow .2s ease, transform .15s ease;--hub-fab-zindex: var(--hub-sys-zindex-fixed, 1030)}.hub-fab{position:fixed;display:inline-flex;align-items:center;justify-content:center;width:var(--hub-fab-size-standard);height:var(--hub-fab-size-standard);border-radius:var(--hub-fab-border-radius);border:none;cursor:pointer;box-shadow:var(--hub-fab-shadow);z-index:var(--hub-fab-zindex);transition:var(--hub-fab-transition);color:var(--hub-ref-color-white, #ffffff);font-size:1.4rem}.hub-fab:hover{box-shadow:var(--hub-fab-shadow-hover);transform:translateY(-1px)}.hub-fab.hub-fab-disabled{opacity:.45;pointer-events:none}.hub-fab.hub-fab-extended{width:auto;height:var(--hub-fab-extended-height);border-radius:var(--hub-fab-extended-radius);padding-inline:var(--hub-fab-extended-padding-x);gap:var(--hub-ref-space-2, .5rem);font-size:.95rem;font-weight:var(--hub-ref-font-weight-semibold, 600)}.hub-fab-mini{width:var(--hub-fab-size-mini);height:var(--hub-fab-size-mini);font-size:var(--hub-ref-font-size-base, 1rem)}.hub-fab-large{width:var(--hub-fab-size-large);height:var(--hub-fab-size-large);font-size:1.75rem}.hub-fab-primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-fab-secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-fab-success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-fab-danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-fab-warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-fab-info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}.hub-speed-dial .hub-fab{position:static}.hub-fab-top-start{inset-block-start:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-top-center{inset-block-start:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-top-end{inset-block-start:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}.hub-fab-middle-start{inset-block-start:50%;inset-inline-start:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-center{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.hub-fab-middle-end{inset-block-start:50%;inset-inline-end:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-bottom-start{inset-block-end:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-bottom-center{inset-block-end:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-bottom-end{inset-block-end:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
127
220
|
}
|
|
128
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFabComponent, decorators: [{
|
|
129
222
|
type: Component,
|
|
130
|
-
args: [{ selector: 'hub-fab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-fab' }, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0
|
|
223
|
+
args: [{ selector: 'hub-fab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-fab' }, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-fab-shadow-hover: var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175));--hub-fab-offset: var(--hub-ref-space-3, 1rem);--hub-fab-extended-height: 3.5rem;--hub-fab-extended-radius: 1.75rem;--hub-fab-extended-padding-x: 1.25rem;--hub-fab-transition: box-shadow .2s ease, transform .15s ease;--hub-fab-zindex: var(--hub-sys-zindex-fixed, 1030)}.hub-fab{position:fixed;display:inline-flex;align-items:center;justify-content:center;width:var(--hub-fab-size-standard);height:var(--hub-fab-size-standard);border-radius:var(--hub-fab-border-radius);border:none;cursor:pointer;box-shadow:var(--hub-fab-shadow);z-index:var(--hub-fab-zindex);transition:var(--hub-fab-transition);color:var(--hub-ref-color-white, #ffffff);font-size:1.4rem}.hub-fab:hover{box-shadow:var(--hub-fab-shadow-hover);transform:translateY(-1px)}.hub-fab.hub-fab-disabled{opacity:.45;pointer-events:none}.hub-fab.hub-fab-extended{width:auto;height:var(--hub-fab-extended-height);border-radius:var(--hub-fab-extended-radius);padding-inline:var(--hub-fab-extended-padding-x);gap:var(--hub-ref-space-2, .5rem);font-size:.95rem;font-weight:var(--hub-ref-font-weight-semibold, 600)}.hub-fab-mini{width:var(--hub-fab-size-mini);height:var(--hub-fab-size-mini);font-size:var(--hub-ref-font-size-base, 1rem)}.hub-fab-large{width:var(--hub-fab-size-large);height:var(--hub-fab-size-large);font-size:1.75rem}.hub-fab-primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-fab-secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-fab-success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-fab-danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-fab-warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-fab-info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}.hub-speed-dial .hub-fab{position:static}.hub-fab-top-start{inset-block-start:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-top-center{inset-block-start:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-top-end{inset-block-start:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}.hub-fab-middle-start{inset-block-start:50%;inset-inline-start:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-center{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.hub-fab-middle-end{inset-block-start:50%;inset-inline-end:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-bottom-start{inset-block-end:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-bottom-center{inset-block-end:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-bottom-end{inset-block-end:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}\n"] }]
|
|
131
224
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapseOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOnScroll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fabClick: [{ type: i0.Output, args: ["fabClick"] }], _hostClass: [{
|
|
132
225
|
type: HostBinding,
|
|
133
226
|
args: ['class']
|
|
@@ -165,9 +258,12 @@ class HubSpeedDialComponent {
|
|
|
165
258
|
.join(' ');
|
|
166
259
|
}
|
|
167
260
|
constructor() {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
261
|
+
// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).
|
|
262
|
+
if (isPlatformBrowser(inject(PLATFORM_ID))) {
|
|
263
|
+
fromEvent(inject(DOCUMENT), 'keydown')
|
|
264
|
+
.pipe(filter((e) => e.key === 'Escape' && this.isOpen()), takeUntilDestroyed(this._destroyRef))
|
|
265
|
+
.subscribe(() => this.close());
|
|
266
|
+
}
|
|
171
267
|
}
|
|
172
268
|
/** Toggle the speed dial open/closed. */
|
|
173
269
|
toggle() {
|
|
@@ -211,11 +307,11 @@ class HubSpeedDialItemComponent {
|
|
|
211
307
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
212
308
|
itemClick = output();
|
|
213
309
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
214
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSpeedDialItemComponent, isStandalone: true, selector: "hub-speed-dial-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":host{display:flex;align-items:center;gap
|
|
310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSpeedDialItemComponent, isStandalone: true, selector: "hub-speed-dial-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":where(:host){--hub-speed-dial-label-bg: var(--hub-sys-color-ink, #212529);--hub-speed-dial-label-color: var(--hub-sys-surface-page, #ffffff)}:host{display:flex;align-items:center;gap:var(--hub-speed-dial-gap, .625rem)}.hub-speed-dial-item__label{font-size:.8rem;font-weight:var(--hub-ref-font-weight-medium, 500);background:var(--hub-speed-dial-label-bg);color:var(--hub-speed-dial-label-color);padding:.1875rem .5rem;border-radius:.3125rem;white-space:nowrap;box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-speed-dial-item__btn{width:2.625rem;height:2.625rem;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--hub-sys-color-surface-default, #ffffff);box-shadow:var(--hub-sys-shadow-md, 0 .5rem 1rem rgba(0, 0, 0, .15));transition:transform .15s ease}.hub-speed-dial-item__btn:hover{transform:scale(1.1)}.hub-speed-dial-item__btn:disabled{opacity:.45;pointer-events:none}.hub-speed-dial-item__btn--primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-speed-dial-item__btn--secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-speed-dial-item__btn--success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-speed-dial-item__btn--danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-speed-dial-item__btn--warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-speed-dial-item__btn--info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
215
311
|
}
|
|
216
312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialItemComponent, decorators: [{
|
|
217
313
|
type: Component,
|
|
218
|
-
args: [{ selector: 'hub-speed-dial-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":host{display:flex;align-items:center;gap
|
|
314
|
+
args: [{ selector: 'hub-speed-dial-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":where(:host){--hub-speed-dial-label-bg: var(--hub-sys-color-ink, #212529);--hub-speed-dial-label-color: var(--hub-sys-surface-page, #ffffff)}:host{display:flex;align-items:center;gap:var(--hub-speed-dial-gap, .625rem)}.hub-speed-dial-item__label{font-size:.8rem;font-weight:var(--hub-ref-font-weight-medium, 500);background:var(--hub-speed-dial-label-bg);color:var(--hub-speed-dial-label-color);padding:.1875rem .5rem;border-radius:.3125rem;white-space:nowrap;box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-speed-dial-item__btn{width:2.625rem;height:2.625rem;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--hub-sys-color-surface-default, #ffffff);box-shadow:var(--hub-sys-shadow-md, 0 .5rem 1rem rgba(0, 0, 0, .15));transition:transform .15s ease}.hub-speed-dial-item__btn:hover{transform:scale(1.1)}.hub-speed-dial-item__btn:disabled{opacity:.45;pointer-events:none}.hub-speed-dial-item__btn--primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-speed-dial-item__btn--secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-speed-dial-item__btn--success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-speed-dial-item__btn--danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-speed-dial-item__btn--warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-speed-dial-item__btn--info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}\n"] }]
|
|
219
315
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
220
316
|
|
|
221
317
|
/**
|
|
@@ -231,11 +327,11 @@ class HubDropdownPanelComponent {
|
|
|
231
327
|
return this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';
|
|
232
328
|
}
|
|
233
329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: HubDropdownPanelComponent, isStandalone: true, selector: "hub-dropdown-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: var(--hub-ref-space-1, .25rem);--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #
|
|
330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: HubDropdownPanelComponent, isStandalone: true, selector: "hub-dropdown-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: var(--hub-ref-space-1, .25rem);--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #ffffff);--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #dee2e6);--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, .375rem);--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175));--hub-dropdown-panel-zindex: var(--hub-sys-zindex-dropdown, 1000)}:host{display:block;min-width:var(--hub-dropdown-panel-min-width);max-height:var(--hub-dropdown-panel-max-height);overflow-y:auto;padding-block:var(--hub-dropdown-panel-padding-y);background:var(--hub-dropdown-panel-bg);border:var(--hub-ref-border-width, 1px) solid var(--hub-dropdown-panel-border-color);border-radius:var(--hub-dropdown-panel-border-radius);box-shadow:var(--hub-dropdown-panel-shadow);z-index:var(--hub-dropdown-panel-zindex)}:host(.hub-dropdown-panel-primary){border-top:3px solid var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-dropdown-panel-secondary){border-top:3px solid var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-dropdown-panel-success){border-top:3px solid var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-dropdown-panel-danger){border-top:3px solid var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-dropdown-panel-warning){border-top:3px solid var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-dropdown-panel-info){border-top:3px solid var(--hub-sys-color-info-default, var(--hub-sys-color-info))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
235
331
|
}
|
|
236
332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownPanelComponent, decorators: [{
|
|
237
333
|
type: Component,
|
|
238
|
-
args: [{ selector: 'hub-dropdown-panel', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-panel' }, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: var(--hub-ref-space-1, .25rem);--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #
|
|
334
|
+
args: [{ selector: 'hub-dropdown-panel', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-panel' }, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: var(--hub-ref-space-1, .25rem);--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #ffffff);--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #dee2e6);--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, .375rem);--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175));--hub-dropdown-panel-zindex: var(--hub-sys-zindex-dropdown, 1000)}:host{display:block;min-width:var(--hub-dropdown-panel-min-width);max-height:var(--hub-dropdown-panel-max-height);overflow-y:auto;padding-block:var(--hub-dropdown-panel-padding-y);background:var(--hub-dropdown-panel-bg);border:var(--hub-ref-border-width, 1px) solid var(--hub-dropdown-panel-border-color);border-radius:var(--hub-dropdown-panel-border-radius);box-shadow:var(--hub-dropdown-panel-shadow);z-index:var(--hub-dropdown-panel-zindex)}:host(.hub-dropdown-panel-primary){border-top:3px solid var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-dropdown-panel-secondary){border-top:3px solid var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-dropdown-panel-success){border-top:3px solid var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-dropdown-panel-danger){border-top:3px solid var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-dropdown-panel-warning){border-top:3px solid var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-dropdown-panel-info){border-top:3px solid var(--hub-sys-color-info-default, var(--hub-sys-color-info))}\n"] }]
|
|
239
335
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], _hostClass: [{
|
|
240
336
|
type: HostBinding,
|
|
241
337
|
args: ['class']
|
|
@@ -272,11 +368,11 @@ class HubDropdownItemComponent {
|
|
|
272
368
|
this.itemClick.emit();
|
|
273
369
|
}
|
|
274
370
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubDropdownItemComponent, isStandalone: true, selector: "hub-dropdown-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-item" }, ngImport: i0, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-dropdown-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #
|
|
371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubDropdownItemComponent, isStandalone: true, selector: "hub-dropdown-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-item" }, ngImport: i0, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-dropdown-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #f8f9fa);--hub-dropdown-item-border-radius: var(--hub-sys-radius-sm, .25rem);--hub-dropdown-item-disabled-opacity: .45}:host{display:block}.hub-dropdown-item__inner{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);width:100%;padding:var(--hub-dropdown-item-padding-y) var(--hub-dropdown-item-padding-x);border:none;background:transparent;font-size:var(--hub-ref-font-size-sm, .875rem);color:inherit;cursor:pointer;text-align:start;border-radius:var(--hub-dropdown-item-border-radius);transition:background .1s ease}.hub-dropdown-item__inner:hover{background:var(--hub-dropdown-item-hover-bg)}.hub-dropdown-item__inner:disabled{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}.hub-dropdown-item__label{flex:1}.hub-dropdown-item__check{margin-inline-start:auto}:host(.hub-dropdown-item-disabled) .hub-dropdown-item__inner{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner{color:var(--hub-sys-color-primary-emphasis)}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-primary-subtle)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner{color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-secondary-subtle)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner{color:var(--hub-sys-color-success-emphasis)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-success-subtle)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner{color:var(--hub-sys-color-danger-emphasis)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-danger-subtle)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner{color:var(--hub-sys-color-warning-emphasis)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-warning-subtle)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner{color:var(--hub-sys-color-info-emphasis)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-info-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
276
372
|
}
|
|
277
373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownItemComponent, decorators: [{
|
|
278
374
|
type: Component,
|
|
279
|
-
args: [{ selector: 'hub-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-item' }, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-dropdown-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #
|
|
375
|
+
args: [{ selector: 'hub-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-item' }, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-dropdown-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #f8f9fa);--hub-dropdown-item-border-radius: var(--hub-sys-radius-sm, .25rem);--hub-dropdown-item-disabled-opacity: .45}:host{display:block}.hub-dropdown-item__inner{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);width:100%;padding:var(--hub-dropdown-item-padding-y) var(--hub-dropdown-item-padding-x);border:none;background:transparent;font-size:var(--hub-ref-font-size-sm, .875rem);color:inherit;cursor:pointer;text-align:start;border-radius:var(--hub-dropdown-item-border-radius);transition:background .1s ease}.hub-dropdown-item__inner:hover{background:var(--hub-dropdown-item-hover-bg)}.hub-dropdown-item__inner:disabled{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}.hub-dropdown-item__label{flex:1}.hub-dropdown-item__check{margin-inline-start:auto}:host(.hub-dropdown-item-disabled) .hub-dropdown-item__inner{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner{color:var(--hub-sys-color-primary-emphasis)}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-primary-subtle)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner{color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-secondary-subtle)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner{color:var(--hub-sys-color-success-emphasis)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-success-subtle)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner{color:var(--hub-sys-color-danger-emphasis)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-danger-subtle)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner{color:var(--hub-sys-color-warning-emphasis)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-warning-subtle)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner{color:var(--hub-sys-color-info-emphasis)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-info-subtle)}\n"] }]
|
|
280
376
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], _hostClass: [{
|
|
281
377
|
type: HostBinding,
|
|
282
378
|
args: ['class']
|
|
@@ -285,7 +381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
285
381
|
/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */
|
|
286
382
|
class HubDropdownDividerComponent {
|
|
287
383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownDividerComponent, isStandalone: true, selector: "hub-dropdown-divider", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "hub-dropdown-divider" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownDividerComponent, isStandalone: true, selector: "hub-dropdown-divider", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "hub-dropdown-divider" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #dee2e6));margin:var(--hub-ref-space-1, .25rem) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
289
385
|
}
|
|
290
386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDividerComponent, decorators: [{
|
|
291
387
|
type: Component,
|
|
@@ -293,17 +389,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
293
389
|
class: 'hub-dropdown-divider',
|
|
294
390
|
role: 'separator',
|
|
295
391
|
'aria-hidden': 'true'
|
|
296
|
-
}, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #
|
|
392
|
+
}, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #dee2e6));margin:var(--hub-ref-space-1, .25rem) 0}\n"] }]
|
|
297
393
|
}] });
|
|
298
394
|
|
|
299
395
|
/** Group label for organizing items inside HubDropdownPanelComponent. */
|
|
300
396
|
class HubDropdownHeaderComponent {
|
|
301
397
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownHeaderComponent, isStandalone: true, selector: "hub-dropdown-header", host: { classAttribute: "hub-dropdown-header" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) .1875rem;font-size:var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, .75rem));font-weight:var(--hub-ref-font-weight-bold, 700);color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #
|
|
398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownHeaderComponent, isStandalone: true, selector: "hub-dropdown-header", host: { classAttribute: "hub-dropdown-header" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) .1875rem;font-size:var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, .75rem));font-weight:var(--hub-ref-font-weight-bold, 700);color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #6c757d));text-transform:uppercase;letter-spacing:.06em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
303
399
|
}
|
|
304
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownHeaderComponent, decorators: [{
|
|
305
401
|
type: Component,
|
|
306
|
-
args: [{ selector: 'hub-dropdown-header', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-header' }, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) .1875rem;font-size:var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, .75rem));font-weight:var(--hub-ref-font-weight-bold, 700);color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #
|
|
402
|
+
args: [{ selector: 'hub-dropdown-header', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-header' }, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) .1875rem;font-size:var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, .75rem));font-weight:var(--hub-ref-font-weight-bold, 700);color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #6c757d));text-transform:uppercase;letter-spacing:.06em}\n"] }]
|
|
307
403
|
}] });
|
|
308
404
|
|
|
309
405
|
/**
|
|
@@ -337,10 +433,14 @@ class HubDropdownDirective {
|
|
|
337
433
|
_vcr = inject(ViewContainerRef);
|
|
338
434
|
_overlay = inject(OverlayService);
|
|
339
435
|
_destroyRef = inject(DestroyRef);
|
|
436
|
+
_document = inject(DOCUMENT);
|
|
340
437
|
constructor() {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
438
|
+
// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).
|
|
439
|
+
if (isPlatformBrowser(inject(PLATFORM_ID))) {
|
|
440
|
+
fromEvent(this._document, 'keydown')
|
|
441
|
+
.pipe(filter((e) => e.key === 'Escape' && this.isOpen()), takeUntilDestroyed(this._destroyRef))
|
|
442
|
+
.subscribe(() => this.close());
|
|
443
|
+
}
|
|
344
444
|
}
|
|
345
445
|
/** Open the dropdown and mount the overlay. */
|
|
346
446
|
open() {
|
|
@@ -363,11 +463,11 @@ class HubDropdownDirective {
|
|
|
363
463
|
this.isOpen.set(true);
|
|
364
464
|
this.opened.emit();
|
|
365
465
|
// Close on scroll so the panel stays aligned with the trigger
|
|
366
|
-
fromEvent(
|
|
466
|
+
fromEvent(this._document, 'scroll', { passive: true, capture: true })
|
|
367
467
|
.pipe(take(1), takeUntilDestroyed(this._destroyRef))
|
|
368
468
|
.subscribe(() => this.close());
|
|
369
469
|
// Click-outside detection (document-level)
|
|
370
|
-
fromEvent(
|
|
470
|
+
fromEvent(this._document, 'click')
|
|
371
471
|
.pipe(filter((e) => !this._el.nativeElement.contains(e.target) && !!this._overlayRef?.hasAttached()), take(1), takeUntilDestroyed(this._destroyRef))
|
|
372
472
|
.subscribe(() => this.close());
|
|
373
473
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-hub-ui-buttons.mjs","sources":["../../../projects/buttons/src/lib/tokens/dropdown.token.ts","../../../projects/buttons/src/lib/components/btn/button.component.ts","../../../projects/buttons/src/lib/components/btn/button.component.html","../../../projects/buttons/src/lib/components/fab/fab.component.ts","../../../projects/buttons/src/lib/components/fab/fab.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.html","../../../projects/buttons/src/lib/components/dropdown-panel/dropdown-panel.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.html","../../../projects/buttons/src/lib/components/dropdown-divider/dropdown-divider.component.ts","../../../projects/buttons/src/lib/components/dropdown-header/dropdown-header.component.ts","../../../projects/buttons/src/lib/directives/dropdown.directive.ts","../../../projects/buttons/src/public-api.ts","../../../projects/buttons/src/ng-hub-ui-buttons.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * Context shared between HubDropdownDirective and its panel/item descendants.\n * Injected by the directive; consumed by HubDropdownPanelComponent and\n * HubDropdownItemComponent to implement closeOnSelect without prop drilling.\n */\nexport interface DropdownContext {\n\t/** Whether clicking an item should close the dropdown. */\n\treadonly closeOnSelect: Signal<boolean>;\n\t/** Imperatively close the dropdown. */\n\tclose(): void;\n}\n\n/** Injection token for DropdownContext. */\nexport const DROPDOWN_CONTEXT = new InjectionToken<DropdownContext>('HubDropdownContext');\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubBtnSize, HubBtnVariant, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled button. Applies `hub-btn` CSS classes computed from signal inputs and\n * renders an optional loading spinner around the projected content.\n *\n * Usable in two interchangeable forms from the same class:\n * - As an element: `<hub-button variant=\"solid\" color=\"primary\">Save</hub-button>`.\n * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href=\"…\">Link</a>`.\n *\n * Prefer the attribute form on a native `<button>` / `<a>` when you need real button\n * semantics (focus, keyboard activation, form submission); the `<hub-button>` element is\n * a styling host without native button behaviour.\n *\n * **Icons:** project whatever you want as content — the button is icon-library\n * agnostic. The icon's position follows the markup order, and the label/icon gap\n * is the `--hub-button-gap` token:\n *\n * ```html\n * <button hubButton><hub-icon name=\"floppy-disk\" /> Save</button>\n * <button hubButton>Next <hub-icon name=\"arrow-right\" /></button>\n * <button hubButton aria-label=\"Settings\"><hub-icon name=\"gear\" /></button>\n * ```\n */\n@Component({\n\tselector: 'hub-button, [hubButton]',\n\tstandalone: true,\n\ttemplateUrl: './button.component.html',\n\tstyleUrl: './button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-btn' }\n})\nexport class HubButtonComponent {\n\t/** Visual style of the button. */\n\tvariant = input<HubBtnVariant>('solid');\n\n\t/** Semantic color token. */\n\tcolor = input<HubSemanticColor>('primary');\n\n\t/** Size token. */\n\tsize = input<HubBtnSize>('md');\n\n\t/** When true, shows a spinner and blocks pointer events. */\n\tloading = input(false);\n\n\t/** Mirrors the native disabled attribute on the host element. */\n\tdisabled = input(false);\n\n\t/** Computed CSS classes applied to the host element via HostBinding. */\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-btn-${this.variant()}`,\n\t\t\t`hub-btn-${this.color()}`,\n\t\t\t`hub-btn-${this.size()}`,\n\t\t\tthis.loading() ? 'hub-btn-loading' : '',\n\t\t\tthis.disabled() ? 'hub-btn-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\t/** Reflects the disabled state as a native HTML attribute. */\n\t@HostBinding('attr.disabled')\n\tprotected get _disabledAttr(): true | null {\n\t\treturn this.disabled() ? true : null;\n\t}\n}\n","@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, OnInit, ViewEncapsulation, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Floating Action Button component. Renders fixed in the viewport at the given position.\n * Supports circular and extended (pill with label) variants.\n * When collapseOnScroll is true, an extended FAB collapses to icon-only after 50px scroll.\n * Uses inset-inline-* / inset-block-* CSS logical properties for RTL support.\n */\n@Component({\n\tselector: 'hub-fab',\n\tstandalone: true,\n\ttemplateUrl: './fab.component.html',\n\tstyleUrl: './fab.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-fab' },\n\tencapsulation: ViewEncapsulation.None\n})\nexport class HubFabComponent implements OnInit {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\textended = input(false);\n\t/** Fixed viewport position. 9-slot grid including center. */\n\tposition = input<HubFabPosition>('bottom-end');\n\t/** When true, collapses an extended FAB to icon-only on page scroll. */\n\tcollapseOnScroll = input(false);\n\tdisabled = input(false);\n\tfabClick = output<void>();\n\n\t/** Collapse state driven by scroll — only active when extended + collapseOnScroll. */\n\tprotected readonly _collapsed = signal(false);\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-fab-${this.color()}`,\n\t\t\t`hub-fab-${this.size()}`,\n\t\t\t`hub-fab-${this.position()}`,\n\t\t\tthis.extended() && !this._collapsed() ? 'hub-fab-extended' : '',\n\t\t\tthis.disabled() ? 'hub-fab-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tngOnInit(): void {\n\t\tif (!this.collapseOnScroll()) return;\n\n\t\tfromEvent(window, 'scroll', { passive: true })\n\t\t\t.pipe(debounceTime(50), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis._collapsed.set(window.scrollY > 50);\n\t\t\t});\n\t}\n}\n","<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n","import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, inject, input, model, output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * FAB that expands a stack of HubSpeedDialItemComponent children on click or hover.\n * Supports 4 expansion directions and all 9 FAB viewport positions.\n * Closes automatically on Escape key press.\n */\n@Component({\n\tselector: 'hub-speed-dial',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial.component.html',\n\tstyleUrl: './speed-dial.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-speed-dial' }\n})\nexport class HubSpeedDialComponent {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\tposition = input<HubFabPosition>('bottom-end');\n\tdirection = input<'up' | 'down' | 'left' | 'right'>('up');\n\ttrigger = input<'click' | 'hover'>('click');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-speed-dial-${this.color()}`,\n\t\t\t`hub-speed-dial-${this.position()}`,\n\t\t\t`hub-speed-dial-${this.direction()}`,\n\t\t\tthis.isOpen() ? 'hub-speed-dial-open' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tconstructor() {\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Toggle the speed dial open/closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\t/** Open the speed dial and emit the opened event. */\n\topen(): void {\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\t}\n\n\t/** Close the speed dial and emit the closed event. */\n\tclose(): void {\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n}\n","<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../../models/button.types';\n\n/**\n * Secondary action item rendered inside HubSpeedDialComponent.\n * Emits itemClick when activated. Supports an optional label tooltip.\n */\n@Component({\n\tselector: 'hub-speed-dial-item',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial-item.component.html',\n\tstyleUrl: './speed-dial-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HubSpeedDialItemComponent {\n\t/** Icon character or ligature string displayed in the action button. */\n\ticon = input.required<string>();\n\t/** Tooltip label shown next to the action button. */\n\tlabel = input('');\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\tdisabled = input(false);\n\titemClick = output<void>();\n}\n","@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled container for dropdown content.\n * Renders a shadowed panel with an optional semantic color top-border accent.\n * Place hub-dropdown-item, hub-dropdown-divider, and hub-dropdown-header children inside.\n */\n@Component({\n\tselector: 'hub-dropdown-panel',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tstyleUrl: './dropdown-panel.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-panel' }\n})\nexport class HubDropdownPanelComponent {\n\t/** Adds a semantic color accent to the panel top border. */\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';\n\t}\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Menu item for use inside HubDropdownPanelComponent.\n * Emits itemClick when activated. Supports an optional icon, selected state and semantic color.\n */\n@Component({\n\tselector: 'hub-dropdown-item',\n\tstandalone: true,\n\ttemplateUrl: './dropdown-item.component.html',\n\tstyleUrl: './dropdown-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-item' }\n})\nexport class HubDropdownItemComponent {\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\t/** Optional icon character or ligature displayed before the label. */\n\ticon = input<string>();\n\tdisabled = input(false);\n\t/** Shows a checkmark indicator when selected. */\n\tselected = input(false);\n\titemClick = output<void>();\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\tthis.color() !== 'default' ? `hub-dropdown-item-${this.color()}` : '',\n\t\t\tthis.disabled() ? 'hub-dropdown-item-disabled' : '',\n\t\t\tthis.selected() ? 'hub-dropdown-item-selected' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tprotected _handleClick(): void {\n\t\tif (this.disabled()) return;\n\t\tthis.itemClick.emit();\n\t}\n}\n","<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">✓</span>\n\t}\n</button>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-divider',\n\tstandalone: true,\n\ttemplate: '',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'hub-dropdown-divider',\n\t\trole: 'separator',\n\t\t'aria-hidden': 'true'\n\t},\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1px;\n\t\t\t\tbackground: var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #e2e8f0));\n\t\t\t\tmargin: 0.25rem 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownDividerComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Group label for organizing items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-header',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-header' },\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 0.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) 0.1875rem;\n\t\t\t\tfont-size: var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, 0.75rem));\n\t\t\t\tfont-weight: var(--hub-ref-font-weight-bold, 700);\n\t\t\t\tcolor: var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #94a3b8));\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownHeaderComponent {}\n","import {\n\tDestroyRef,\n\tDirective,\n\tElementRef,\n\tTemplateRef,\n\tViewContainerRef,\n\tinject,\n\tinput,\n\tmodel,\n\toutput,\n\tsignal\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { OverlayService } from 'ng-hub-ui-utils';\nimport type { OverlayRef, ConnectionPosition } from 'ng-hub-ui-utils';\nimport { HubDropdownPlacement } from '../models/button.types';\n\n/**\n * Turns any host element into a dropdown trigger.\n * Renders an ng-template in a body-level overlay managed by OverlayService (no CDK).\n * When closeOnSelect is true, any click inside the panel closes the overlay automatically.\n */\n@Directive({\n\tselector: '[hubDropdown]',\n\tstandalone: true,\n\texportAs: 'hubDropdown',\n\thost: {\n\t\t'(click)': '_onHostClick()',\n\t\t'(mouseenter)': '_onHostEnter()',\n\t\t'(mouseleave)': '_onHostLeave()'\n\t}\n})\nexport class HubDropdownDirective {\n\t/** The ng-template to render inside the overlay panel. */\n\ttpl = input.required<TemplateRef<any>>({ alias: 'hubDropdown' });\n\tplacement = input<HubDropdownPlacement>('bottom-start');\n\ttrigger = input<'click' | 'hover'>('click');\n\t/** When true, any click inside the panel content closes the dropdown. */\n\tcloseOnSelect = input(true);\n\tdisabled = input(false);\n\t/** Vertical offset in pixels between the trigger and the panel. */\n\toffsetY = input(4);\n\tpanelClass = input('');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate _overlayRef: OverlayRef | null = null;\n\n\tprivate readonly _el = inject(ElementRef<HTMLElement>);\n\tprivate readonly _vcr = inject(ViewContainerRef);\n\tprivate readonly _overlay = inject(OverlayService);\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\tconstructor() {\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Open the dropdown and mount the overlay. */\n\topen(): void {\n\t\tif (this.disabled() || this.isOpen()) return;\n\n\t\tconst positionStrategy = this._overlay.position().flexibleConnectedTo(this._el).withPositions(this._buildPositions());\n\n\t\tconst panelClasses = ['hub-dropdown-overlay'];\n\t\tif (this.panelClass()) panelClasses.push(this.panelClass());\n\n\t\tthis._overlayRef = this._overlay.create({ positionStrategy, panelClass: panelClasses });\n\n\t\tconst panelEl = this._overlayRef.attach(this.tpl(), this._vcr);\n\n\t\t// Close on click-outside via backdrop\n\t\tthis._overlayRef.onBackdropClick(() => this.close());\n\n\t\t// Close on click-inside when closeOnSelect is true\n\t\tif (this.closeOnSelect() && panelEl) {\n\t\t\tfromEvent<MouseEvent>(panelEl, 'click')\n\t\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\n\t\t// Close on scroll so the panel stays aligned with the trigger\n\t\tfromEvent(document, 'scroll', { passive: true, capture: true })\n\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => this.close());\n\n\t\t// Click-outside detection (document-level)\n\t\tfromEvent<MouseEvent>(document, 'click')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => !this._el.nativeElement.contains(e.target as Node) && !!this._overlayRef?.hasAttached()),\n\t\t\t\ttake(1),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Close the dropdown and destroy the overlay. */\n\tclose(): void {\n\t\tif (!this.isOpen()) return;\n\t\tthis._overlayRef?.detach();\n\t\tthis._overlayRef?.dispose();\n\t\tthis._overlayRef = null;\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/** Toggle between open and closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\tprotected _onHostClick(): void {\n\t\tif (this.trigger() === 'click') this.toggle();\n\t}\n\n\tprotected _onHostEnter(): void {\n\t\tif (this.trigger() === 'hover') this.open();\n\t}\n\n\tprotected _onHostLeave(): void {\n\t\tif (this.trigger() === 'hover') this.close();\n\t}\n\n\t/**\n\t * Translates HubDropdownPlacement tokens to ConnectionPosition arrays.\n\t * The OverlayPosition tries each entry in order, using the first that fits.\n\t */\n\tprivate _buildPositions(): ConnectionPosition[] {\n\t\tconst o = this.offsetY();\n\t\tconst map: Record<HubDropdownPlacement, ConnectionPosition[]> = {\n\t\t\t'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: o }],\n\t\t\tbottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: o }],\n\t\t\t'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: o }],\n\t\t\t'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -o }],\n\t\t\ttop: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -o }],\n\t\t\t'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -o }],\n\t\t\tstart: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -o }],\n\t\t\tend: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: o }]\n\t\t};\n\t\treturn map[this.placement()];\n\t}\n}\n","/*\n * Public API Surface of ng-hub-ui-buttons\n */\n\n// Types\nexport * from './lib/models/button.types';\n\n// Tokens\nexport * from './lib/tokens/dropdown.token';\n\n// Components\nexport * from './lib/components/btn/button.component';\n/**\n * @deprecated Renamed to `HubButtonComponent`. The component now also matches the\n * `[hubButton]` attribute selector, so it replaces the former `HubBtnDirective`.\n */\nexport { HubButtonComponent as HubBtnComponent } from './lib/components/btn/button.component';\n/**\n * @deprecated Replaced by `HubButtonComponent`, which now matches `[hubButton]` itself\n * (and renders the loading spinner in the attribute form too).\n */\nexport { HubButtonComponent as HubBtnDirective } from './lib/components/btn/button.component';\nexport * from './lib/components/fab/fab.component';\nexport * from './lib/components/speed-dial/speed-dial.component';\nexport * from './lib/components/speed-dial/speed-dial-item/speed-dial-item.component';\nexport * from './lib/components/dropdown-panel/dropdown-panel.component';\nexport * from './lib/components/dropdown-item/dropdown-item.component';\nexport * from './lib/components/dropdown-divider/dropdown-divider.component';\nexport * from './lib/components/dropdown-header/dropdown-header.component';\n\n// Directives\nexport * from './lib/directives/dropdown.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ng-hub-ui-buttons.mjs","sources":["../../../projects/buttons/src/lib/tokens/dropdown.token.ts","../../../projects/buttons/src/lib/components/btn/button.component.ts","../../../projects/buttons/src/lib/components/btn/button.component.html","../../../projects/buttons/src/lib/components/fab/fab.component.ts","../../../projects/buttons/src/lib/components/fab/fab.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial.component.html","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.ts","../../../projects/buttons/src/lib/components/speed-dial/speed-dial-item/speed-dial-item.component.html","../../../projects/buttons/src/lib/components/dropdown-panel/dropdown-panel.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.ts","../../../projects/buttons/src/lib/components/dropdown-item/dropdown-item.component.html","../../../projects/buttons/src/lib/components/dropdown-divider/dropdown-divider.component.ts","../../../projects/buttons/src/lib/components/dropdown-header/dropdown-header.component.ts","../../../projects/buttons/src/lib/directives/dropdown.directive.ts","../../../projects/buttons/src/public-api.ts","../../../projects/buttons/src/ng-hub-ui-buttons.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * Context shared between HubDropdownDirective and its panel/item descendants.\n * Injected by the directive; consumed by HubDropdownPanelComponent and\n * HubDropdownItemComponent to implement closeOnSelect without prop drilling.\n */\nexport interface DropdownContext {\n\t/** Whether clicking an item should close the dropdown. */\n\treadonly closeOnSelect: Signal<boolean>;\n\t/** Imperatively close the dropdown. */\n\tclose(): void;\n}\n\n/** Injection token for DropdownContext. */\nexport const DROPDOWN_CONTEXT = new InjectionToken<DropdownContext>('HubDropdownContext');\n","import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, inject, input } from '@angular/core';\nimport { HubBtnSize, HubBtnVariant, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled button. Applies `hub-btn` CSS classes computed from signal inputs and\n * renders an optional loading spinner around the projected content.\n *\n * Usable in two interchangeable forms from the same class:\n * - As an element: `<hub-button variant=\"solid\" color=\"primary\">Save</hub-button>`.\n * - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href=\"…\">Link</a>`.\n *\n * Prefer the attribute form on a native `<button>` / `<a>` when you need real button\n * semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**\n * form is only a styling host — a component cannot swap its own host tag for a native\n * `<button>` — so it self-advertises `role=\"button\"`, a focusable `tabindex`, and\n * Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on\n * a native `<button>`/`<a>` adds **none** of these bindings (the host is already\n * interactive; a redundant `role`/`tabindex` would be harmful).\n *\n * **Accessibility caveat:** an element-form `<hub-button>` now reports `role=\"button\"`,\n * so it must not be nested inside another interactive element (a `<button>`, `<a>` or any\n * host that is itself a control), which would produce an invalid nested-interactive tree.\n *\n * **Icons:** project whatever you want as content — the button is icon-library\n * agnostic. The icon's position follows the markup order, and the label/icon gap\n * is the `--hub-button-gap` token:\n *\n * ```html\n * <button hubButton><hub-icon name=\"floppy-disk\" /> Save</button>\n * <button hubButton>Next <hub-icon name=\"arrow-right\" /></button>\n * <button hubButton aria-label=\"Settings\"><hub-icon name=\"gear\" /></button>\n * ```\n */\n@Component({\n\tselector: 'hub-button, [hubButton]',\n\tstandalone: true,\n\ttemplateUrl: './button.component.html',\n\tstyleUrl: './button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-btn' }\n})\nexport class HubButtonComponent {\n\t/**\n\t * Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a\n\t * native host). Read once from the host tag at construction — a static host fact that\n\t * is available immediately (unlike input signals, which are not populated in the\n\t * constructor). Gates the a11y host bindings so they only apply to the element form.\n\t */\n\tprivate readonly _isElementForm = inject(ElementRef).nativeElement.tagName === 'HUB-BUTTON';\n\n\t/** Visual style of the button. */\n\tvariant = input<HubBtnVariant>('solid');\n\n\t/** Semantic color token. */\n\tcolor = input<HubSemanticColor>('primary');\n\n\t/** Size token. */\n\tsize = input<HubBtnSize>('md');\n\n\t/**\n\t * When true, shows the spinner and marks the button **busy and disabled**: it\n\t * reflects `aria-busy=\"true\"`, becomes non-focusable and inert to pointer and\n\t * keyboard, and (like {@link disabled}) reflects the native `disabled` attribute\n\t * so an in-flight submit button cannot be triggered twice.\n\t */\n\tloading = input(false);\n\n\t/** Mirrors the native disabled attribute on the host element. */\n\tdisabled = input(false);\n\n\t/**\n\t * True while the button must not respond to interaction — either explicitly\n\t * {@link disabled} or busy {@link loading}. Drives the native `disabled`\n\t * reflection, the tab-order removal and the keyboard-activation guard so both\n\t * states are inert through a single source of truth.\n\t */\n\tprivate get _isInert(): boolean {\n\t\treturn this.disabled() || this.loading();\n\t}\n\n\t/** Computed CSS classes applied to the host element via HostBinding. */\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-btn-${this.variant()}`,\n\t\t\t`hub-btn-${this.color()}`,\n\t\t\t`hub-btn-${this.size()}`,\n\t\t\tthis.loading() ? 'hub-btn-loading' : '',\n\t\t\tthis.disabled() ? 'hub-btn-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\t/** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */\n\t@HostBinding('attr.disabled')\n\tprotected get _disabledAttr(): true | null {\n\t\treturn this._isInert ? true : null;\n\t}\n\n\t/** Announces the busy state to assistive tech while loading. */\n\t@HostBinding('attr.aria-busy')\n\tprotected get _ariaBusy(): 'true' | null {\n\t\treturn this.loading() ? 'true' : null;\n\t}\n\n\t/**\n\t * Conveys the inert state to assistive tech on the element form, whose custom\n\t * host tag does not natively expose `disabled`. Bound to nothing for the\n\t * attribute form (its native host already exposes the state).\n\t */\n\t@HostBinding('attr.aria-disabled')\n\tprotected get _ariaDisabled(): 'true' | null {\n\t\treturn this._isElementForm && this._isInert ? 'true' : null;\n\t}\n\n\t/**\n\t * Advertises `role=\"button\"` for the element form only. The attribute form binds\n\t * nothing (its native host already exposes the correct role).\n\t */\n\t@HostBinding('attr.role')\n\tprotected get _role(): 'button' | null {\n\t\treturn this._isElementForm ? 'button' : null;\n\t}\n\n\t/**\n\t * Makes the element form keyboard-focusable (`0`), or removes it from the tab order\n\t * when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.\n\t */\n\t@HostBinding('attr.tabindex')\n\tprotected get _tabindex(): number | null {\n\t\tif (!this._isElementForm) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._isInert ? -1 : 0;\n\t}\n\n\t/**\n\t * Emulates native button keyboard activation for the element form: Enter or Space\n\t * triggers a click. Space additionally calls `preventDefault()` to stop the page from\n\t * scrolling. No-op for the attribute form (the native host already handles keys) and\n\t * while inert (disabled or loading).\n\t * @param event The originating keyboard event.\n\t */\n\t@HostListener('keydown', ['$event'])\n\tprotected _onKeydown(event: KeyboardEvent): void {\n\t\tif (!this._isElementForm || this._isInert) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isSpace = event.key === ' ' || event.key === 'Spacebar';\n\n\t\tif (event.key === 'Enter' || isSpace) {\n\t\t\tif (isSpace) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\t(event.currentTarget as HTMLElement).click();\n\t\t}\n\t}\n}\n","@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, OnInit, ViewEncapsulation, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * Floating Action Button component. Renders fixed in the viewport at the given position.\n * Supports circular and extended (pill with label) variants.\n * When collapseOnScroll is true, an extended FAB collapses to icon-only after 50px scroll.\n * Uses inset-inline-* / inset-block-* CSS logical properties for RTL support.\n */\n@Component({\n\tselector: 'hub-fab',\n\tstandalone: true,\n\ttemplateUrl: './fab.component.html',\n\tstyleUrl: './fab.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-fab' },\n\tencapsulation: ViewEncapsulation.None\n})\nexport class HubFabComponent implements OnInit {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\textended = input(false);\n\t/** Fixed viewport position. 9-slot grid including center. */\n\tposition = input<HubFabPosition>('bottom-end');\n\t/** When true, collapses an extended FAB to icon-only on page scroll. */\n\tcollapseOnScroll = input(false);\n\tdisabled = input(false);\n\tfabClick = output<void>();\n\n\t/** Collapse state driven by scroll — only active when extended + collapseOnScroll. */\n\tprotected readonly _collapsed = signal(false);\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-fab-${this.color()}`,\n\t\t\t`hub-fab-${this.size()}`,\n\t\t\t`hub-fab-${this.position()}`,\n\t\t\tthis.extended() && !this._collapsed() ? 'hub-fab-extended' : '',\n\t\t\tthis.disabled() ? 'hub-fab-disabled' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tngOnInit(): void {\n\t\tif (!this.collapseOnScroll()) return;\n\n\t\tfromEvent(window, 'scroll', { passive: true })\n\t\t\t.pipe(debounceTime(50), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis._collapsed.set(window.scrollY > 50);\n\t\t\t});\n\t}\n}\n","<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tDestroyRef,\n\tHostBinding,\n\tPLATFORM_ID,\n\tinject,\n\tinput,\n\tmodel,\n\toutput\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { HubFabPosition, HubFabSize, HubSemanticColor } from '../../models/button.types';\n\n/**\n * FAB that expands a stack of HubSpeedDialItemComponent children on click or hover.\n * Supports 4 expansion directions and all 9 FAB viewport positions.\n * Closes automatically on Escape key press.\n */\n@Component({\n\tselector: 'hub-speed-dial',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial.component.html',\n\tstyleUrl: './speed-dial.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-speed-dial' }\n})\nexport class HubSpeedDialComponent {\n\tcolor = input<HubSemanticColor>('primary');\n\tsize = input<HubFabSize>('standard');\n\tposition = input<HubFabPosition>('bottom-end');\n\tdirection = input<'up' | 'down' | 'left' | 'right'>('up');\n\ttrigger = input<'click' | 'hover'>('click');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\t`hub-speed-dial-${this.color()}`,\n\t\t\t`hub-speed-dial-${this.position()}`,\n\t\t\t`hub-speed-dial-${this.direction()}`,\n\t\t\tthis.isOpen() ? 'hub-speed-dial-open' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(inject(DOCUMENT), 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Toggle the speed dial open/closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\t/** Open the speed dial and emit the opened event. */\n\topen(): void {\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\t}\n\n\t/** Close the speed dial and emit the closed event. */\n\tclose(): void {\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n}\n","<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../../models/button.types';\n\n/**\n * Secondary action item rendered inside HubSpeedDialComponent.\n * Emits itemClick when activated. Supports an optional label tooltip.\n */\n@Component({\n\tselector: 'hub-speed-dial-item',\n\tstandalone: true,\n\ttemplateUrl: './speed-dial-item.component.html',\n\tstyleUrl: './speed-dial-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HubSpeedDialItemComponent {\n\t/** Icon character or ligature string displayed in the action button. */\n\ticon = input.required<string>();\n\t/** Tooltip label shown next to the action button. */\n\tlabel = input('');\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\tdisabled = input(false);\n\titemClick = output<void>();\n}\n","@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n","import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Styled container for dropdown content.\n * Renders a shadowed panel with an optional semantic color top-border accent.\n * Place hub-dropdown-item, hub-dropdown-divider, and hub-dropdown-header children inside.\n */\n@Component({\n\tselector: 'hub-dropdown-panel',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tstyleUrl: './dropdown-panel.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-panel' }\n})\nexport class HubDropdownPanelComponent {\n\t/** Adds a semantic color accent to the panel top border. */\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';\n\t}\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, output } from '@angular/core';\nimport { HubSemanticColor } from '../../models/button.types';\n\n/**\n * Menu item for use inside HubDropdownPanelComponent.\n * Emits itemClick when activated. Supports an optional icon, selected state and semantic color.\n */\n@Component({\n\tselector: 'hub-dropdown-item',\n\tstandalone: true,\n\ttemplateUrl: './dropdown-item.component.html',\n\tstyleUrl: './dropdown-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-item' }\n})\nexport class HubDropdownItemComponent {\n\tcolor = input<HubSemanticColor | 'default'>('default');\n\t/** Optional icon character or ligature displayed before the label. */\n\ticon = input<string>();\n\tdisabled = input(false);\n\t/** Shows a checkmark indicator when selected. */\n\tselected = input(false);\n\titemClick = output<void>();\n\n\t@HostBinding('class')\n\tprotected get _hostClass(): string {\n\t\treturn [\n\t\t\tthis.color() !== 'default' ? `hub-dropdown-item-${this.color()}` : '',\n\t\t\tthis.disabled() ? 'hub-dropdown-item-disabled' : '',\n\t\t\tthis.selected() ? 'hub-dropdown-item-selected' : ''\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\t}\n\n\tprotected _handleClick(): void {\n\t\tif (this.disabled()) return;\n\t\tthis.itemClick.emit();\n\t}\n}\n","<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">✓</span>\n\t}\n</button>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-divider',\n\tstandalone: true,\n\ttemplate: '',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'hub-dropdown-divider',\n\t\trole: 'separator',\n\t\t'aria-hidden': 'true'\n\t},\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1px;\n\t\t\t\tbackground: var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #dee2e6));\n\t\t\t\tmargin: var(--hub-ref-space-1, 0.25rem) 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownDividerComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/** Group label for organizing items inside HubDropdownPanelComponent. */\n@Component({\n\tselector: 'hub-dropdown-header',\n\tstandalone: true,\n\ttemplate: `<ng-content></ng-content>`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'hub-dropdown-header' },\n\tstyles: [\n\t\t`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 0.375rem var(--hub-dropdown-header-padding-x, var(--hub-ref-space-3, 1rem)) 0.1875rem;\n\t\t\t\tfont-size: var(--hub-dropdown-header-font-size, var(--hub-ref-font-size-xs, 0.75rem));\n\t\t\t\tfont-weight: var(--hub-ref-font-weight-bold, 700);\n\t\t\t\tcolor: var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #6c757d));\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class HubDropdownHeaderComponent {}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n\tDestroyRef,\n\tDirective,\n\tElementRef,\n\tPLATFORM_ID,\n\tTemplateRef,\n\tViewContainerRef,\n\tinject,\n\tinput,\n\tmodel,\n\toutput,\n\tsignal\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { OverlayService } from 'ng-hub-ui-utils';\nimport type { OverlayRef, ConnectionPosition } from 'ng-hub-ui-utils';\nimport { HubDropdownPlacement } from '../models/button.types';\n\n/**\n * Turns any host element into a dropdown trigger.\n * Renders an ng-template in a body-level overlay managed by OverlayService (no CDK).\n * When closeOnSelect is true, any click inside the panel closes the overlay automatically.\n */\n@Directive({\n\tselector: '[hubDropdown]',\n\tstandalone: true,\n\texportAs: 'hubDropdown',\n\thost: {\n\t\t'(click)': '_onHostClick()',\n\t\t'(mouseenter)': '_onHostEnter()',\n\t\t'(mouseleave)': '_onHostLeave()'\n\t}\n})\nexport class HubDropdownDirective {\n\t/** The ng-template to render inside the overlay panel. */\n\ttpl = input.required<TemplateRef<any>>({ alias: 'hubDropdown' });\n\tplacement = input<HubDropdownPlacement>('bottom-start');\n\ttrigger = input<'click' | 'hover'>('click');\n\t/** When true, any click inside the panel content closes the dropdown. */\n\tcloseOnSelect = input(true);\n\tdisabled = input(false);\n\t/** Vertical offset in pixels between the trigger and the panel. */\n\toffsetY = input(4);\n\tpanelClass = input('');\n\tisOpen = model(false);\n\topened = output<void>();\n\tclosed = output<void>();\n\n\tprivate _overlayRef: OverlayRef | null = null;\n\n\tprivate readonly _el = inject(ElementRef<HTMLElement>);\n\tprivate readonly _vcr = inject(ViewContainerRef);\n\tprivate readonly _overlay = inject(OverlayService);\n\tprivate readonly _destroyRef = inject(DestroyRef);\n\tprivate readonly _document = inject(DOCUMENT);\n\n\tconstructor() {\n\t\t// Escape-to-close relies on DOM events; inert on the server (SSR/prerender).\n\t\tif (isPlatformBrowser(inject(PLATFORM_ID))) {\n\t\t\tfromEvent<KeyboardEvent>(this._document, 'keydown')\n\t\t\t\t.pipe(\n\t\t\t\t\tfilter((e) => e.key === 'Escape' && this.isOpen()),\n\t\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t\t)\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\t}\n\n\t/** Open the dropdown and mount the overlay. */\n\topen(): void {\n\t\tif (this.disabled() || this.isOpen()) return;\n\n\t\tconst positionStrategy = this._overlay.position().flexibleConnectedTo(this._el).withPositions(this._buildPositions());\n\n\t\tconst panelClasses = ['hub-dropdown-overlay'];\n\t\tif (this.panelClass()) panelClasses.push(this.panelClass());\n\n\t\tthis._overlayRef = this._overlay.create({ positionStrategy, panelClass: panelClasses });\n\n\t\tconst panelEl = this._overlayRef.attach(this.tpl(), this._vcr);\n\n\t\t// Close on click-outside via backdrop\n\t\tthis._overlayRef.onBackdropClick(() => this.close());\n\n\t\t// Close on click-inside when closeOnSelect is true\n\t\tif (this.closeOnSelect() && panelEl) {\n\t\t\tfromEvent<MouseEvent>(panelEl, 'click')\n\t\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t\t.subscribe(() => this.close());\n\t\t}\n\n\t\tthis.isOpen.set(true);\n\t\tthis.opened.emit();\n\n\t\t// Close on scroll so the panel stays aligned with the trigger\n\t\tfromEvent(this._document, 'scroll', { passive: true, capture: true })\n\t\t\t.pipe(take(1), takeUntilDestroyed(this._destroyRef))\n\t\t\t.subscribe(() => this.close());\n\n\t\t// Click-outside detection (document-level)\n\t\tfromEvent<MouseEvent>(this._document, 'click')\n\t\t\t.pipe(\n\t\t\t\tfilter((e) => !this._el.nativeElement.contains(e.target as Node) && !!this._overlayRef?.hasAttached()),\n\t\t\t\ttake(1),\n\t\t\t\ttakeUntilDestroyed(this._destroyRef)\n\t\t\t)\n\t\t\t.subscribe(() => this.close());\n\t}\n\n\t/** Close the dropdown and destroy the overlay. */\n\tclose(): void {\n\t\tif (!this.isOpen()) return;\n\t\tthis._overlayRef?.detach();\n\t\tthis._overlayRef?.dispose();\n\t\tthis._overlayRef = null;\n\t\tthis.isOpen.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/** Toggle between open and closed. */\n\ttoggle(): void {\n\t\tthis.isOpen() ? this.close() : this.open();\n\t}\n\n\tprotected _onHostClick(): void {\n\t\tif (this.trigger() === 'click') this.toggle();\n\t}\n\n\tprotected _onHostEnter(): void {\n\t\tif (this.trigger() === 'hover') this.open();\n\t}\n\n\tprotected _onHostLeave(): void {\n\t\tif (this.trigger() === 'hover') this.close();\n\t}\n\n\t/**\n\t * Translates HubDropdownPlacement tokens to ConnectionPosition arrays.\n\t * The OverlayPosition tries each entry in order, using the first that fits.\n\t */\n\tprivate _buildPositions(): ConnectionPosition[] {\n\t\tconst o = this.offsetY();\n\t\tconst map: Record<HubDropdownPlacement, ConnectionPosition[]> = {\n\t\t\t'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: o }],\n\t\t\tbottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: o }],\n\t\t\t'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: o }],\n\t\t\t'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -o }],\n\t\t\ttop: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -o }],\n\t\t\t'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -o }],\n\t\t\tstart: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -o }],\n\t\t\tend: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: o }]\n\t\t};\n\t\treturn map[this.placement()];\n\t}\n}\n","/*\n * Public API Surface of ng-hub-ui-buttons\n */\n\n// Types\nexport * from './lib/models/button.types';\n\n// Tokens\nexport * from './lib/tokens/dropdown.token';\n\n// Components\nexport * from './lib/components/btn/button.component';\n/**\n * @deprecated Renamed to `HubButtonComponent`. The component now also matches the\n * `[hubButton]` attribute selector, so it replaces the former `HubBtnDirective`.\n */\nexport { HubButtonComponent as HubBtnComponent } from './lib/components/btn/button.component';\n/**\n * @deprecated Replaced by `HubButtonComponent`, which now matches `[hubButton]` itself\n * (and renders the loading spinner in the attribute form too).\n */\nexport { HubButtonComponent as HubBtnDirective } from './lib/components/btn/button.component';\nexport * from './lib/components/fab/fab.component';\nexport * from './lib/components/speed-dial/speed-dial.component';\nexport * from './lib/components/speed-dial/speed-dial-item/speed-dial-item.component';\nexport * from './lib/components/dropdown-panel/dropdown-panel.component';\nexport * from './lib/components/dropdown-item/dropdown-item.component';\nexport * from './lib/components/dropdown-divider/dropdown-divider.component';\nexport * from './lib/components/dropdown-header/dropdown-header.component';\n\n// Directives\nexport * from './lib/directives/dropdown.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-hub-ui-buttons",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.8.0",
|
|
4
4
|
"description": "Buttons, FAB, Speed Dial and Dropdown directive for Angular, part of the ng-hub-ui ecosystem",
|
|
5
5
|
"author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
|
|
6
6
|
"repository": {
|
package/styles/_btn-mixins.scss
CHANGED
|
@@ -47,25 +47,42 @@
|
|
|
47
47
|
// }
|
|
48
48
|
|
|
49
49
|
/// Outputs button appearance CSS rules from the local accent slot.
|
|
50
|
-
/// Parameter defaults match the ghost variant — override
|
|
51
|
-
/// All colour inputs read the `--hub-btn-accent*`
|
|
52
|
-
/// accent-agnostic and work for any variant, known
|
|
50
|
+
/// Parameter defaults match the ghost variant's resting/hover look — override
|
|
51
|
+
/// only the values that differ. All colour inputs read the `--hub-btn-accent*`
|
|
52
|
+
/// slot family, so the rules are accent-agnostic and work for any variant, known
|
|
53
|
+
/// or user-registered.
|
|
54
|
+
///
|
|
55
|
+
/// INTERACTION SLOTS — the hover/active states are fully overridable
|
|
56
|
+
/// -----------------------------------------------------------------
|
|
57
|
+
/// The `:hover` and `:active` branches ALWAYS consume the overridable slots
|
|
58
|
+
/// `--hub-btn-hover-*` / `--hub-btn-active-*` (defaults declared on the host in
|
|
59
|
+
/// button.component.scss). Each `$hover-*` / `$active-*` parameter, when given,
|
|
60
|
+
/// simply re-points the matching slot for this appearance, so a consumer can
|
|
61
|
+
/// retune any interaction colour by setting the CSS variable — no recompilation:
|
|
62
|
+
///
|
|
63
|
+
/// hub-button.hub-btn-solid { --hub-btn-hover-bg: rebeccapurple; }
|
|
53
64
|
///
|
|
54
65
|
/// @param {value} $bg - `background` in resting state.
|
|
55
66
|
/// @param {value} $color - `color` in resting state.
|
|
56
67
|
/// @param {value} $border - `border-color` in resting state.
|
|
57
|
-
/// @param {value} $hover-bg -
|
|
58
|
-
/// @param {value} $hover-border -
|
|
59
|
-
/// @param {value} $hover-color -
|
|
68
|
+
/// @param {value} $hover-bg - Override for `--hub-btn-hover-bg` (null = keep host default).
|
|
69
|
+
/// @param {value} $hover-border - Override for `--hub-btn-hover-border` (null = keep host default).
|
|
70
|
+
/// @param {value} $hover-color - Override for `--hub-btn-hover-color` (null = keep host default).
|
|
71
|
+
/// @param {value} $active-bg - Override for `--hub-btn-active-bg` (null = keep host default).
|
|
72
|
+
/// @param {value} $active-border - Override for `--hub-btn-active-border` (null = keep host default).
|
|
73
|
+
/// @param {value} $active-color - Override for `--hub-btn-active-color` (null = keep host default).
|
|
60
74
|
/// @param {value} $text-decoration - Extra text-decoration (null = skip).
|
|
61
75
|
/// @param {value} $padding-inline - Extra padding-inline override (null = skip).
|
|
62
76
|
@mixin hub-btn-variant-rules(
|
|
63
77
|
$bg: transparent,
|
|
64
78
|
$color: var(--hub-btn-accent-emphasis),
|
|
65
79
|
$border: transparent,
|
|
66
|
-
$hover-bg:
|
|
80
|
+
$hover-bg: null,
|
|
67
81
|
$hover-border: null,
|
|
68
82
|
$hover-color: null,
|
|
83
|
+
$active-bg: null,
|
|
84
|
+
$active-border: null,
|
|
85
|
+
$active-color: null,
|
|
69
86
|
$text-decoration: null,
|
|
70
87
|
$padding-inline: null
|
|
71
88
|
) {
|
|
@@ -81,18 +98,42 @@
|
|
|
81
98
|
padding-inline: $padding-inline;
|
|
82
99
|
}
|
|
83
100
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
101
|
+
// Per-appearance overrides of the interaction slots. When a value is given it
|
|
102
|
+
// re-points the slot for this appearance; when null the host default stands.
|
|
103
|
+
@if $hover-bg {
|
|
104
|
+
--hub-btn-hover-bg: #{$hover-bg};
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@if $hover-border {
|
|
108
|
+
--hub-btn-hover-border: #{$hover-border};
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@if $hover-color {
|
|
112
|
+
--hub-btn-hover-color: #{$hover-color};
|
|
113
|
+
}
|
|
88
114
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
115
|
+
@if $active-bg {
|
|
116
|
+
--hub-btn-active-bg: #{$active-bg};
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@if $active-border {
|
|
120
|
+
--hub-btn-active-border: #{$active-border};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@if $active-color {
|
|
124
|
+
--hub-btn-active-color: #{$active-color};
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:hover:not([disabled]):not(.hub-btn-disabled) {
|
|
128
|
+
background: var(--hub-btn-hover-bg);
|
|
129
|
+
border-color: var(--hub-btn-hover-border);
|
|
130
|
+
color: var(--hub-btn-hover-color);
|
|
131
|
+
}
|
|
92
132
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
133
|
+
&:active:not([disabled]):not(.hub-btn-disabled) {
|
|
134
|
+
background: var(--hub-btn-active-bg);
|
|
135
|
+
border-color: var(--hub-btn-active-border);
|
|
136
|
+
color: var(--hub-btn-active-color);
|
|
96
137
|
}
|
|
97
138
|
}
|
|
98
139
|
|
|
@@ -2,10 +2,24 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, Signal, OnInit, TemplateRef } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* The nine canonical accents the button stylesheet registers out of the box,
|
|
6
|
+
* each mapping to a `--hub-sys-color-<color>` design-system family. Includes the
|
|
7
|
+
* three neutral accents (`neutral` / `light` / `dark`) the design-system already
|
|
8
|
+
* ships and the button accent loop already emits.
|
|
7
9
|
*/
|
|
8
|
-
type
|
|
10
|
+
type HubSemanticBuiltinColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral' | 'light' | 'dark';
|
|
11
|
+
/**
|
|
12
|
+
* Semantic color token shared across all button-library components
|
|
13
|
+
* (btn / fab / speed-dial / dropdown).
|
|
14
|
+
*
|
|
15
|
+
* OPEN SET: any of the nine built-in accents, **or any custom string** a product
|
|
16
|
+
* registers with the `hub-btn-color-rules('<name>')` mixin (or a bare
|
|
17
|
+
* `--hub-btn-accent` rule). The `(string & {})` arm keeps IntelliSense listing the
|
|
18
|
+
* built-ins while still accepting arbitrary values, so `color="brand"` type-checks
|
|
19
|
+
* once its accent is registered — the button derives the whole role family
|
|
20
|
+
* (emphasis / subtle / on) from that single slot at runtime.
|
|
21
|
+
*/
|
|
22
|
+
type HubSemanticColor = HubSemanticBuiltinColor | (string & {});
|
|
9
23
|
/** Visual style variant of a button. Controls background, border and text treatment. */
|
|
10
24
|
type HubBtnVariant = 'solid' | 'outline' | 'soft' | 'ghost' | 'link';
|
|
11
25
|
/** Size token for standard buttons. */
|
|
@@ -46,8 +60,16 @@ declare const DROPDOWN_CONTEXT: InjectionToken<DropdownContext>;
|
|
|
46
60
|
* - As an attribute on any host: `<button hubButton>Save</button>` / `<a hubButton href="…">Link</a>`.
|
|
47
61
|
*
|
|
48
62
|
* Prefer the attribute form on a native `<button>` / `<a>` when you need real button
|
|
49
|
-
* semantics (focus, keyboard activation, form submission)
|
|
50
|
-
* a styling host
|
|
63
|
+
* semantics (focus, keyboard activation, form submission). The `<hub-button>` **element**
|
|
64
|
+
* form is only a styling host — a component cannot swap its own host tag for a native
|
|
65
|
+
* `<button>` — so it self-advertises `role="button"`, a focusable `tabindex`, and
|
|
66
|
+
* Enter/Space keyboard activation to stay accessible. The `[hubButton]` attribute form on
|
|
67
|
+
* a native `<button>`/`<a>` adds **none** of these bindings (the host is already
|
|
68
|
+
* interactive; a redundant `role`/`tabindex` would be harmful).
|
|
69
|
+
*
|
|
70
|
+
* **Accessibility caveat:** an element-form `<hub-button>` now reports `role="button"`,
|
|
71
|
+
* so it must not be nested inside another interactive element (a `<button>`, `<a>` or any
|
|
72
|
+
* host that is itself a control), which would produce an invalid nested-interactive tree.
|
|
51
73
|
*
|
|
52
74
|
* **Icons:** project whatever you want as content — the button is icon-library
|
|
53
75
|
* agnostic. The icon's position follows the markup order, and the label/icon gap
|
|
@@ -60,20 +82,65 @@ declare const DROPDOWN_CONTEXT: InjectionToken<DropdownContext>;
|
|
|
60
82
|
* ```
|
|
61
83
|
*/
|
|
62
84
|
declare class HubButtonComponent {
|
|
85
|
+
/**
|
|
86
|
+
* Whether this instance renders as the `<hub-button>` element (vs `[hubButton]` on a
|
|
87
|
+
* native host). Read once from the host tag at construction — a static host fact that
|
|
88
|
+
* is available immediately (unlike input signals, which are not populated in the
|
|
89
|
+
* constructor). Gates the a11y host bindings so they only apply to the element form.
|
|
90
|
+
*/
|
|
91
|
+
private readonly _isElementForm;
|
|
63
92
|
/** Visual style of the button. */
|
|
64
93
|
variant: _angular_core.InputSignal<HubBtnVariant>;
|
|
65
94
|
/** Semantic color token. */
|
|
66
95
|
color: _angular_core.InputSignal<HubSemanticColor>;
|
|
67
96
|
/** Size token. */
|
|
68
97
|
size: _angular_core.InputSignal<HubBtnSize>;
|
|
69
|
-
/**
|
|
98
|
+
/**
|
|
99
|
+
* When true, shows the spinner and marks the button **busy and disabled**: it
|
|
100
|
+
* reflects `aria-busy="true"`, becomes non-focusable and inert to pointer and
|
|
101
|
+
* keyboard, and (like {@link disabled}) reflects the native `disabled` attribute
|
|
102
|
+
* so an in-flight submit button cannot be triggered twice.
|
|
103
|
+
*/
|
|
70
104
|
loading: _angular_core.InputSignal<boolean>;
|
|
71
105
|
/** Mirrors the native disabled attribute on the host element. */
|
|
72
106
|
disabled: _angular_core.InputSignal<boolean>;
|
|
107
|
+
/**
|
|
108
|
+
* True while the button must not respond to interaction — either explicitly
|
|
109
|
+
* {@link disabled} or busy {@link loading}. Drives the native `disabled`
|
|
110
|
+
* reflection, the tab-order removal and the keyboard-activation guard so both
|
|
111
|
+
* states are inert through a single source of truth.
|
|
112
|
+
*/
|
|
113
|
+
private get _isInert();
|
|
73
114
|
/** Computed CSS classes applied to the host element via HostBinding. */
|
|
74
115
|
protected get _hostClass(): string;
|
|
75
|
-
/** Reflects the
|
|
116
|
+
/** Reflects the inert state (disabled or loading) as the native `disabled` attribute. */
|
|
76
117
|
protected get _disabledAttr(): true | null;
|
|
118
|
+
/** Announces the busy state to assistive tech while loading. */
|
|
119
|
+
protected get _ariaBusy(): 'true' | null;
|
|
120
|
+
/**
|
|
121
|
+
* Conveys the inert state to assistive tech on the element form, whose custom
|
|
122
|
+
* host tag does not natively expose `disabled`. Bound to nothing for the
|
|
123
|
+
* attribute form (its native host already exposes the state).
|
|
124
|
+
*/
|
|
125
|
+
protected get _ariaDisabled(): 'true' | null;
|
|
126
|
+
/**
|
|
127
|
+
* Advertises `role="button"` for the element form only. The attribute form binds
|
|
128
|
+
* nothing (its native host already exposes the correct role).
|
|
129
|
+
*/
|
|
130
|
+
protected get _role(): 'button' | null;
|
|
131
|
+
/**
|
|
132
|
+
* Makes the element form keyboard-focusable (`0`), or removes it from the tab order
|
|
133
|
+
* when inert — disabled or loading (`-1`). Bound to nothing for the attribute form.
|
|
134
|
+
*/
|
|
135
|
+
protected get _tabindex(): number | null;
|
|
136
|
+
/**
|
|
137
|
+
* Emulates native button keyboard activation for the element form: Enter or Space
|
|
138
|
+
* triggers a click. Space additionally calls `preventDefault()` to stop the page from
|
|
139
|
+
* scrolling. No-op for the attribute form (the native host already handles keys) and
|
|
140
|
+
* while inert (disabled or loading).
|
|
141
|
+
* @param event The originating keyboard event.
|
|
142
|
+
*/
|
|
143
|
+
protected _onKeydown(event: KeyboardEvent): void;
|
|
77
144
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubButtonComponent, never>;
|
|
78
145
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubButtonComponent, "hub-button, [hubButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
79
146
|
}
|
|
@@ -213,6 +280,7 @@ declare class HubDropdownDirective {
|
|
|
213
280
|
private readonly _vcr;
|
|
214
281
|
private readonly _overlay;
|
|
215
282
|
private readonly _destroyRef;
|
|
283
|
+
private readonly _document;
|
|
216
284
|
constructor();
|
|
217
285
|
/** Open the dropdown and mount the overlay. */
|
|
218
286
|
open(): void;
|
|
@@ -233,4 +301,4 @@ declare class HubDropdownDirective {
|
|
|
233
301
|
}
|
|
234
302
|
|
|
235
303
|
export { DROPDOWN_CONTEXT, HubButtonComponent as HubBtnComponent, HubButtonComponent as HubBtnDirective, HubButtonComponent, HubDropdownDirective, HubDropdownDividerComponent, HubDropdownHeaderComponent, HubDropdownItemComponent, HubDropdownPanelComponent, HubFabComponent, HubSpeedDialComponent, HubSpeedDialItemComponent };
|
|
236
|
-
export type { DropdownContext, HubBtnSize, HubBtnVariant, HubDropdownPlacement, HubFabPosition, HubFabSize, HubSemanticColor };
|
|
304
|
+
export type { DropdownContext, HubBtnSize, HubBtnVariant, HubDropdownPlacement, HubFabPosition, HubFabSize, HubSemanticBuiltinColor, HubSemanticColor };
|
|
Binary file
|