ux4g-components-angular 1.0.0 → 1.1.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 +87 -0
- package/dist/accessibility-bar/README.md +87 -0
- package/dist/accessibility-bar/fesm2022/ux4g-components-angular-accessibility-bar.mjs +1 -0
- package/dist/accessibility-bar/fesm2022/ux4g-components-angular-accessibility-bar.mjs.map +1 -1
- package/dist/accessibility-bar/public-api.d.ts +1 -0
- package/dist/accessibility-bar/public-api.d.ts.map +1 -1
- package/dist/accordion/README.md +87 -0
- package/dist/accordion/fesm2022/ux4g-components-angular-accordion.mjs +1 -0
- package/dist/accordion/fesm2022/ux4g-components-angular-accordion.mjs.map +1 -1
- package/dist/accordion/public-api.d.ts +1 -0
- package/dist/accordion/public-api.d.ts.map +1 -1
- package/dist/alert/README.md +87 -0
- package/dist/alert/fesm2022/ux4g-components-angular-alert.mjs +1 -0
- package/dist/alert/fesm2022/ux4g-components-angular-alert.mjs.map +1 -1
- package/dist/alert/public-api.d.ts +1 -0
- package/dist/alert/public-api.d.ts.map +1 -1
- package/dist/avatar/README.md +87 -0
- package/dist/avatar/fesm2022/ux4g-components-angular-avatar.mjs +1 -0
- package/dist/avatar/fesm2022/ux4g-components-angular-avatar.mjs.map +1 -1
- package/dist/avatar/public-api.d.ts +1 -0
- package/dist/avatar/public-api.d.ts.map +1 -1
- package/dist/badge/README.md +87 -0
- package/dist/badge/fesm2022/ux4g-components-angular-badge.mjs +1 -0
- package/dist/badge/fesm2022/ux4g-components-angular-badge.mjs.map +1 -1
- package/dist/badge/public-api.d.ts +1 -0
- package/dist/badge/public-api.d.ts.map +1 -1
- package/dist/breadcrumb/README.md +87 -0
- package/dist/breadcrumb/fesm2022/ux4g-components-angular-breadcrumb.mjs +1 -0
- package/dist/breadcrumb/fesm2022/ux4g-components-angular-breadcrumb.mjs.map +1 -1
- package/dist/breadcrumb/public-api.d.ts +1 -0
- package/dist/breadcrumb/public-api.d.ts.map +1 -1
- package/dist/button/README.md +87 -0
- package/dist/button/fesm2022/ux4g-components-angular-button.mjs +1 -0
- package/dist/button/fesm2022/ux4g-components-angular-button.mjs.map +1 -1
- package/dist/button/public-api.d.ts +1 -0
- package/dist/button/public-api.d.ts.map +1 -1
- package/dist/card/README.md +87 -0
- package/dist/card/fesm2022/ux4g-components-angular-card.mjs +1 -0
- package/dist/card/fesm2022/ux4g-components-angular-card.mjs.map +1 -1
- package/dist/card/public-api.d.ts +1 -0
- package/dist/card/public-api.d.ts.map +1 -1
- package/dist/carousel/README.md +87 -0
- package/dist/carousel/fesm2022/ux4g-components-angular-carousel.mjs +1 -0
- package/dist/carousel/fesm2022/ux4g-components-angular-carousel.mjs.map +1 -1
- package/dist/carousel/public-api.d.ts +1 -0
- package/dist/carousel/public-api.d.ts.map +1 -1
- package/dist/checkbox/README.md +87 -0
- package/dist/checkbox/fesm2022/ux4g-components-angular-checkbox.mjs +1 -0
- package/dist/checkbox/fesm2022/ux4g-components-angular-checkbox.mjs.map +1 -1
- package/dist/checkbox/public-api.d.ts +1 -0
- package/dist/checkbox/public-api.d.ts.map +1 -1
- package/dist/chip/README.md +87 -0
- package/dist/chip/fesm2022/ux4g-components-angular-chip.mjs +1 -0
- package/dist/chip/fesm2022/ux4g-components-angular-chip.mjs.map +1 -1
- package/dist/chip/public-api.d.ts +1 -0
- package/dist/chip/public-api.d.ts.map +1 -1
- package/dist/chip-group/README.md +87 -0
- package/dist/chip-group/fesm2022/ux4g-components-angular-chip-group.mjs +1 -0
- package/dist/chip-group/fesm2022/ux4g-components-angular-chip-group.mjs.map +1 -1
- package/dist/chip-group/public-api.d.ts +1 -0
- package/dist/chip-group/public-api.d.ts.map +1 -1
- package/dist/combobox/README.md +87 -0
- package/dist/combobox/fesm2022/ux4g-components-angular-combobox.mjs +1 -0
- package/dist/combobox/fesm2022/ux4g-components-angular-combobox.mjs.map +1 -1
- package/dist/combobox/public-api.d.ts +1 -0
- package/dist/combobox/public-api.d.ts.map +1 -1
- package/dist/date-time-picker/README.md +87 -0
- package/dist/date-time-picker/fesm2022/ux4g-components-angular-date-time-picker.mjs +1 -0
- package/dist/date-time-picker/fesm2022/ux4g-components-angular-date-time-picker.mjs.map +1 -1
- package/dist/date-time-picker/public-api.d.ts +1 -0
- package/dist/date-time-picker/public-api.d.ts.map +1 -1
- package/dist/divider/README.md +87 -0
- package/dist/divider/fesm2022/ux4g-components-angular-divider.mjs +1 -0
- package/dist/divider/fesm2022/ux4g-components-angular-divider.mjs.map +1 -1
- package/dist/divider/public-api.d.ts +1 -0
- package/dist/divider/public-api.d.ts.map +1 -1
- package/dist/draft-status-banner/README.md +87 -0
- package/dist/draft-status-banner/fesm2022/ux4g-components-angular-draft-status-banner.mjs +1 -0
- package/dist/draft-status-banner/fesm2022/ux4g-components-angular-draft-status-banner.mjs.map +1 -1
- package/dist/draft-status-banner/public-api.d.ts +1 -0
- package/dist/draft-status-banner/public-api.d.ts.map +1 -1
- package/dist/drawer/README.md +87 -0
- package/dist/drawer/fesm2022/ux4g-components-angular-drawer.mjs +1 -0
- package/dist/drawer/fesm2022/ux4g-components-angular-drawer.mjs.map +1 -1
- package/dist/drawer/public-api.d.ts +1 -0
- package/dist/drawer/public-api.d.ts.map +1 -1
- package/dist/dropdown/README.md +87 -0
- package/dist/dropdown/fesm2022/ux4g-components-angular-dropdown.mjs +1 -0
- package/dist/dropdown/fesm2022/ux4g-components-angular-dropdown.mjs.map +1 -1
- package/dist/dropdown/public-api.d.ts +1 -0
- package/dist/dropdown/public-api.d.ts.map +1 -1
- package/dist/empty-state/README.md +87 -0
- package/dist/empty-state/fesm2022/ux4g-components-angular-empty-state.mjs +1 -0
- package/dist/empty-state/fesm2022/ux4g-components-angular-empty-state.mjs.map +1 -1
- package/dist/empty-state/public-api.d.ts +1 -0
- package/dist/empty-state/public-api.d.ts.map +1 -1
- package/dist/feedback/README.md +87 -0
- package/dist/feedback/fesm2022/ux4g-components-angular-feedback.mjs +1 -0
- package/dist/feedback/fesm2022/ux4g-components-angular-feedback.mjs.map +1 -1
- package/dist/feedback/public-api.d.ts +1 -0
- package/dist/feedback/public-api.d.ts.map +1 -1
- package/dist/footer/README.md +87 -0
- package/dist/footer/fesm2022/ux4g-components-angular-footer.mjs +1 -0
- package/dist/footer/fesm2022/ux4g-components-angular-footer.mjs.map +1 -1
- package/dist/footer/public-api.d.ts +1 -0
- package/dist/footer/public-api.d.ts.map +1 -1
- package/dist/form-field-group/README.md +87 -0
- package/dist/form-field-group/fesm2022/ux4g-components-angular-form-field-group.mjs +1 -0
- package/dist/form-field-group/fesm2022/ux4g-components-angular-form-field-group.mjs.map +1 -1
- package/dist/form-field-group/public-api.d.ts +1 -0
- package/dist/form-field-group/public-api.d.ts.map +1 -1
- package/dist/icon-button/README.md +87 -0
- package/dist/icon-button/fesm2022/ux4g-components-angular-icon-button.mjs +1 -0
- package/dist/icon-button/fesm2022/ux4g-components-angular-icon-button.mjs.map +1 -1
- package/dist/icon-button/public-api.d.ts +1 -0
- package/dist/icon-button/public-api.d.ts.map +1 -1
- package/dist/image/README.md +87 -0
- package/dist/image/fesm2022/ux4g-components-angular-image.mjs +1 -0
- package/dist/image/fesm2022/ux4g-components-angular-image.mjs.map +1 -1
- package/dist/image/public-api.d.ts +1 -0
- package/dist/image/public-api.d.ts.map +1 -1
- package/dist/input/README.md +87 -0
- package/dist/input/fesm2022/ux4g-components-angular-input.mjs +1 -0
- package/dist/input/fesm2022/ux4g-components-angular-input.mjs.map +1 -1
- package/dist/input/public-api.d.ts +1 -0
- package/dist/input/public-api.d.ts.map +1 -1
- package/dist/journey-timeline/README.md +87 -0
- package/dist/journey-timeline/fesm2022/ux4g-components-angular-journey-timeline.mjs +1 -0
- package/dist/journey-timeline/fesm2022/ux4g-components-angular-journey-timeline.mjs.map +1 -1
- package/dist/journey-timeline/public-api.d.ts +1 -0
- package/dist/journey-timeline/public-api.d.ts.map +1 -1
- package/dist/link/README.md +87 -0
- package/dist/link/fesm2022/ux4g-components-angular-link.mjs +1 -0
- package/dist/link/fesm2022/ux4g-components-angular-link.mjs.map +1 -1
- package/dist/link/public-api.d.ts +1 -0
- package/dist/link/public-api.d.ts.map +1 -1
- package/dist/list/README.md +87 -0
- package/dist/list/fesm2022/ux4g-components-angular-list.mjs +1 -0
- package/dist/list/fesm2022/ux4g-components-angular-list.mjs.map +1 -1
- package/dist/list/public-api.d.ts +1 -0
- package/dist/list/public-api.d.ts.map +1 -1
- package/dist/modal/README.md +87 -0
- package/dist/modal/fesm2022/ux4g-components-angular-modal.mjs +1 -0
- package/dist/modal/fesm2022/ux4g-components-angular-modal.mjs.map +1 -1
- package/dist/modal/public-api.d.ts +1 -0
- package/dist/modal/public-api.d.ts.map +1 -1
- package/dist/navbar/README.md +87 -0
- package/dist/navbar/fesm2022/ux4g-components-angular-navbar.mjs +1 -0
- package/dist/navbar/fesm2022/ux4g-components-angular-navbar.mjs.map +1 -1
- package/dist/navbar/public-api.d.ts +1 -0
- package/dist/navbar/public-api.d.ts.map +1 -1
- package/dist/otp-input/README.md +87 -0
- package/dist/otp-input/fesm2022/ux4g-components-angular-otp-input.mjs +1 -0
- package/dist/otp-input/fesm2022/ux4g-components-angular-otp-input.mjs.map +1 -1
- package/dist/otp-input/public-api.d.ts +1 -0
- package/dist/otp-input/public-api.d.ts.map +1 -1
- package/dist/pagination/README.md +87 -0
- package/dist/pagination/fesm2022/ux4g-components-angular-pagination.mjs +1 -0
- package/dist/pagination/fesm2022/ux4g-components-angular-pagination.mjs.map +1 -1
- package/dist/pagination/public-api.d.ts +1 -0
- package/dist/pagination/public-api.d.ts.map +1 -1
- package/dist/popover/README.md +87 -0
- package/dist/popover/fesm2022/ux4g-components-angular-popover.mjs +1 -0
- package/dist/popover/fesm2022/ux4g-components-angular-popover.mjs.map +1 -1
- package/dist/popover/public-api.d.ts +1 -0
- package/dist/popover/public-api.d.ts.map +1 -1
- package/dist/progress-indicator/README.md +87 -0
- package/dist/progress-indicator/fesm2022/ux4g-components-angular-progress-indicator.mjs +1 -0
- package/dist/progress-indicator/fesm2022/ux4g-components-angular-progress-indicator.mjs.map +1 -1
- package/dist/progress-indicator/public-api.d.ts +1 -0
- package/dist/progress-indicator/public-api.d.ts.map +1 -1
- package/dist/radio/README.md +87 -0
- package/dist/radio/fesm2022/ux4g-components-angular-radio.mjs +1 -0
- package/dist/radio/fesm2022/ux4g-components-angular-radio.mjs.map +1 -1
- package/dist/radio/public-api.d.ts +1 -0
- package/dist/radio/public-api.d.ts.map +1 -1
- package/dist/result-list-row/README.md +87 -0
- package/dist/result-list-row/fesm2022/ux4g-components-angular-result-list-row.mjs +1 -0
- package/dist/result-list-row/fesm2022/ux4g-components-angular-result-list-row.mjs.map +1 -1
- package/dist/result-list-row/public-api.d.ts +1 -0
- package/dist/result-list-row/public-api.d.ts.map +1 -1
- package/dist/search/README.md +87 -0
- package/dist/search/fesm2022/ux4g-components-angular-search.mjs +1 -0
- package/dist/search/fesm2022/ux4g-components-angular-search.mjs.map +1 -1
- package/dist/search/public-api.d.ts +1 -0
- package/dist/search/public-api.d.ts.map +1 -1
- package/dist/sla-progress-indicator/README.md +87 -0
- package/dist/sla-progress-indicator/fesm2022/ux4g-components-angular-sla-progress-indicator.mjs +1 -0
- package/dist/sla-progress-indicator/fesm2022/ux4g-components-angular-sla-progress-indicator.mjs.map +1 -1
- package/dist/sla-progress-indicator/public-api.d.ts +1 -0
- package/dist/sla-progress-indicator/public-api.d.ts.map +1 -1
- package/dist/slider/README.md +87 -0
- package/dist/slider/fesm2022/ux4g-components-angular-slider.mjs +1 -0
- package/dist/slider/fesm2022/ux4g-components-angular-slider.mjs.map +1 -1
- package/dist/slider/public-api.d.ts +1 -0
- package/dist/slider/public-api.d.ts.map +1 -1
- package/dist/slot-grid/README.md +87 -0
- package/dist/slot-grid/fesm2022/ux4g-components-angular-slot-grid.mjs +1 -0
- package/dist/slot-grid/fesm2022/ux4g-components-angular-slot-grid.mjs.map +1 -1
- package/dist/slot-grid/public-api.d.ts +1 -0
- package/dist/slot-grid/public-api.d.ts.map +1 -1
- package/dist/social-links/README.md +87 -0
- package/dist/social-links/fesm2022/ux4g-components-angular-social-links.mjs +1 -0
- package/dist/social-links/fesm2022/ux4g-components-angular-social-links.mjs.map +1 -1
- package/dist/social-links/public-api.d.ts +1 -0
- package/dist/social-links/public-api.d.ts.map +1 -1
- package/dist/spinner/README.md +87 -0
- package/dist/spinner/fesm2022/ux4g-components-angular-spinner.mjs +1 -0
- package/dist/spinner/fesm2022/ux4g-components-angular-spinner.mjs.map +1 -1
- package/dist/spinner/public-api.d.ts +1 -0
- package/dist/spinner/public-api.d.ts.map +1 -1
- package/dist/status-pipeline/README.md +87 -0
- package/dist/status-pipeline/fesm2022/ux4g-components-angular-status-pipeline.mjs +1 -0
- package/dist/status-pipeline/fesm2022/ux4g-components-angular-status-pipeline.mjs.map +1 -1
- package/dist/status-pipeline/public-api.d.ts +1 -0
- package/dist/status-pipeline/public-api.d.ts.map +1 -1
- package/dist/stepper/README.md +87 -0
- package/dist/stepper/fesm2022/ux4g-components-angular-stepper.mjs +1 -0
- package/dist/stepper/fesm2022/ux4g-components-angular-stepper.mjs.map +1 -1
- package/dist/stepper/public-api.d.ts +1 -0
- package/dist/stepper/public-api.d.ts.map +1 -1
- package/dist/switch/README.md +87 -0
- package/dist/switch/fesm2022/ux4g-components-angular-switch.mjs +1 -0
- package/dist/switch/fesm2022/ux4g-components-angular-switch.mjs.map +1 -1
- package/dist/switch/public-api.d.ts +1 -0
- package/dist/switch/public-api.d.ts.map +1 -1
- package/dist/tab/README.md +87 -0
- package/dist/tab/fesm2022/ux4g-components-angular-tab.mjs +1 -0
- package/dist/tab/fesm2022/ux4g-components-angular-tab.mjs.map +1 -1
- package/dist/tab/public-api.d.ts +1 -0
- package/dist/tab/public-api.d.ts.map +1 -1
- package/dist/table/README.md +87 -0
- package/dist/table/fesm2022/ux4g-components-angular-table.mjs +1 -0
- package/dist/table/fesm2022/ux4g-components-angular-table.mjs.map +1 -1
- package/dist/table/public-api.d.ts +1 -0
- package/dist/table/public-api.d.ts.map +1 -1
- package/dist/tag/README.md +87 -0
- package/dist/tag/fesm2022/ux4g-components-angular-tag.mjs +1 -0
- package/dist/tag/fesm2022/ux4g-components-angular-tag.mjs.map +1 -1
- package/dist/tag/public-api.d.ts +1 -0
- package/dist/tag/public-api.d.ts.map +1 -1
- package/dist/tooltip/README.md +87 -0
- package/dist/tooltip/fesm2022/ux4g-components-angular-tooltip.mjs +1 -0
- package/dist/tooltip/fesm2022/ux4g-components-angular-tooltip.mjs.map +1 -1
- package/dist/tooltip/public-api.d.ts +1 -0
- package/dist/tooltip/public-api.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/file-upload/fesm2022/ux4g-components-angular-file-upload.mjs +0 -45
- package/dist/file-upload/fesm2022/ux4g-components-angular-file-upload.mjs.map +0 -1
- package/dist/file-upload/index.d.ts +0 -6
- package/dist/file-upload/public-api.d.ts +0 -4
- package/dist/file-upload/public-api.d.ts.map +0 -1
- package/dist/file-upload/ux4g-components-angular-file-upload.d.ts.map +0 -1
- package/dist/file-upload/ux4g-file-upload.component.d.ts +0 -9
- package/dist/file-upload/ux4g-file-upload.component.d.ts.map +0 -1
- package/dist/file-upload/ux4g-file-upload.module.d.ts +0 -9
- package/dist/file-upload/ux4g-file-upload.module.d.ts.map +0 -1
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# ux4g-components-angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper components for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-angular ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the CSS bundle to your `angular.json` styles array:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"styles": [
|
|
18
|
+
"node_modules/ux4g-components-web/styles/ux4g.css",
|
|
19
|
+
"src/styles.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// app.module.ts
|
|
28
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
29
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
imports: [UX4GButtonModule, UX4GSpinnerModule],
|
|
33
|
+
})
|
|
34
|
+
export class AppModule {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- app.component.html -->
|
|
39
|
+
<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
|
|
40
|
+
Save
|
|
41
|
+
</ux4g-button>
|
|
42
|
+
|
|
43
|
+
<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Available Components (50)
|
|
47
|
+
|
|
48
|
+
Each component is available as a sub-path import:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
52
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
53
|
+
import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
|
|
54
|
+
import { UX4GCardModule } from 'ux4g-components-angular/card';
|
|
55
|
+
// ... and 46 more
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
|
|
59
|
+
|
|
60
|
+
## Architecture
|
|
61
|
+
|
|
62
|
+
This package follows a CSS-first architecture:
|
|
63
|
+
|
|
64
|
+
- **CSS is the source of truth** — all visual decisions live in CSS
|
|
65
|
+
- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
|
|
66
|
+
- **No inline styles, no CSS-in-JS** — only `[class]` bindings
|
|
67
|
+
- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
|
|
68
|
+
|
|
69
|
+
## Compatibility
|
|
70
|
+
|
|
71
|
+
- Angular >= 15.0.0
|
|
72
|
+
- Built with Ivy partial compilation (compatible with Angular 15–19+)
|
|
73
|
+
- `typesVersions` included for `moduleResolution: node` compatibility
|
|
74
|
+
|
|
75
|
+
## Peer Dependencies
|
|
76
|
+
|
|
77
|
+
- `@angular/core >= 15.0.0`
|
|
78
|
+
- `@angular/common >= 15.0.0`
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)
|
|
83
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ux4g-components-angular-badge.mjs","sources":["../../../src/badge/ux4g-badge.component.ts","../../../src/badge/ux4g-badge.module.ts","../../../src/badge/ux4g-components-angular-badge.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { BadgeType, BadgeColor, BadgeSize, buildBadgeClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-badge',\r\n standalone: false,\r\n template: `<span [class]=\"badgeClasses\" [attr.aria-label]=\"label || null\">{{ type === 'digit' ? label : '' }}<ng-content></ng-content></span>`,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GBadgeComponent {\r\n @Input() type: BadgeType = 'dot';\r\n @Input() color: BadgeColor = 'primary';\r\n @Input() size?: BadgeSize;\r\n @Input() label?: string;\r\n\r\n get badgeClasses(): string {\r\n return buildBadgeClasses(this.type, this.color, this.size);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GBadgeComponent } from './ux4g-badge.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GBadgeComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GBadgeComponent],\r\n})\r\nexport class UX4GBadgeModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ux4g-components-angular-badge.mjs","sources":["../../../src/badge/ux4g-badge.component.ts","../../../src/badge/ux4g-badge.module.ts","../../../src/badge/ux4g-components-angular-badge.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { BadgeType, BadgeColor, BadgeSize, buildBadgeClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-badge',\r\n standalone: false,\r\n template: `<span [class]=\"badgeClasses\" [attr.aria-label]=\"label || null\">{{ type === 'digit' ? label : '' }}<ng-content></ng-content></span>`,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GBadgeComponent {\r\n @Input() type: BadgeType = 'dot';\r\n @Input() color: BadgeColor = 'primary';\r\n @Input() size?: BadgeSize;\r\n @Input() label?: string;\r\n\r\n get badgeClasses(): string {\r\n return buildBadgeClasses(this.type, this.color, this.size);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GBadgeComponent } from './ux4g-badge.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GBadgeComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GBadgeComponent],\r\n})\r\nexport class UX4GBadgeModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MASa,kBAAkB,CAAA;AAN/B,IAAA,WAAA,GAAA;QAOW,IAAA,CAAA,IAAI,GAAc,KAAK;QACvB,IAAA,CAAA,KAAK,GAAe,SAAS;AAOvC,IAAA;AAHC,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;IAC5D;+GARW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,+IAHnB,CAAA,kIAAA,CAAoI,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGnI,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE,CAAA,kIAAA,CAAoI;oBAC9I,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,IAAI,EAAA,CAAA;sBAAZ;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,KAAK,EAAA,CAAA;sBAAb;;;MCJU,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,CAJX,kBAAkB,CAAA,EAAA,OAAA,EAAA,CACvB,YAAY,aACZ,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAEjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAHhB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,kBAAkB,CAAC;oBAClC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,kBAAkB,CAAC;AAC9B,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/badge/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/badge/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# ux4g-components-angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper components for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-angular ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the CSS bundle to your `angular.json` styles array:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"styles": [
|
|
18
|
+
"node_modules/ux4g-components-web/styles/ux4g.css",
|
|
19
|
+
"src/styles.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// app.module.ts
|
|
28
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
29
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
imports: [UX4GButtonModule, UX4GSpinnerModule],
|
|
33
|
+
})
|
|
34
|
+
export class AppModule {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- app.component.html -->
|
|
39
|
+
<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
|
|
40
|
+
Save
|
|
41
|
+
</ux4g-button>
|
|
42
|
+
|
|
43
|
+
<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Available Components (50)
|
|
47
|
+
|
|
48
|
+
Each component is available as a sub-path import:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
52
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
53
|
+
import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
|
|
54
|
+
import { UX4GCardModule } from 'ux4g-components-angular/card';
|
|
55
|
+
// ... and 46 more
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
|
|
59
|
+
|
|
60
|
+
## Architecture
|
|
61
|
+
|
|
62
|
+
This package follows a CSS-first architecture:
|
|
63
|
+
|
|
64
|
+
- **CSS is the source of truth** — all visual decisions live in CSS
|
|
65
|
+
- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
|
|
66
|
+
- **No inline styles, no CSS-in-JS** — only `[class]` bindings
|
|
67
|
+
- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
|
|
68
|
+
|
|
69
|
+
## Compatibility
|
|
70
|
+
|
|
71
|
+
- Angular >= 15.0.0
|
|
72
|
+
- Built with Ivy partial compilation (compatible with Angular 15–19+)
|
|
73
|
+
- `typesVersions` included for `moduleResolution: node` compatibility
|
|
74
|
+
|
|
75
|
+
## Peer Dependencies
|
|
76
|
+
|
|
77
|
+
- `@angular/core >= 15.0.0`
|
|
78
|
+
- `@angular/common >= 15.0.0`
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)
|
|
83
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ux4g-components-angular-breadcrumb.mjs","sources":["../../../src/breadcrumb/ux4g-breadcrumb.component.ts","../../../src/breadcrumb/ux4g-breadcrumb.module.ts","../../../src/breadcrumb/ux4g-components-angular-breadcrumb.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { BreadcrumbSeparator, buildBreadcrumbClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-breadcrumb',\r\n standalone: false,\r\n template: `\r\n <nav [className]=\"breadcrumbClasses\" [attr.aria-label]=\"ariaLabel\">\r\n <ol class=\"ux4g-breadcrumb-list ux4g-d-flex ux4g-align-center\">\r\n <ng-content></ng-content>\r\n </ol>\r\n </nav>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GBreadcrumbComponent {\r\n @Input() separator: BreadcrumbSeparator = 'divider';\r\n @Input() ariaLabel: string = 'breadcrumb';\r\n\r\n get breadcrumbClasses(): string {\r\n return buildBreadcrumbClasses(this.separator);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GBreadcrumbComponent } from './ux4g-breadcrumb.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GBreadcrumbComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GBreadcrumbComponent],\r\n})\r\nexport class UX4GBreadcrumbModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ux4g-components-angular-breadcrumb.mjs","sources":["../../../src/breadcrumb/ux4g-breadcrumb.component.ts","../../../src/breadcrumb/ux4g-breadcrumb.module.ts","../../../src/breadcrumb/ux4g-components-angular-breadcrumb.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { BreadcrumbSeparator, buildBreadcrumbClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-breadcrumb',\r\n standalone: false,\r\n template: `\r\n <nav [className]=\"breadcrumbClasses\" [attr.aria-label]=\"ariaLabel\">\r\n <ol class=\"ux4g-breadcrumb-list ux4g-d-flex ux4g-align-center\">\r\n <ng-content></ng-content>\r\n </ol>\r\n </nav>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GBreadcrumbComponent {\r\n @Input() separator: BreadcrumbSeparator = 'divider';\r\n @Input() ariaLabel: string = 'breadcrumb';\r\n\r\n get breadcrumbClasses(): string {\r\n return buildBreadcrumbClasses(this.separator);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GBreadcrumbComponent } from './ux4g-breadcrumb.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GBreadcrumbComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GBreadcrumbComponent],\r\n})\r\nexport class UX4GBreadcrumbModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAea,uBAAuB,CAAA;AAZpC,IAAA,WAAA,GAAA;QAaW,IAAA,CAAA,SAAS,GAAwB,SAAS;QAC1C,IAAA,CAAA,SAAS,GAAW,YAAY;AAK1C,IAAA;AAHC,IAAA,IAAI,iBAAiB,GAAA;AACnB,QAAA,OAAO,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC;IAC/C;+GANW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATxB,CAAA;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGU,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAZnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE,CAAA;;;;;;AAMT,EAAA,CAAA;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,SAAS,EAAA,CAAA;sBAAjB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;;;MCRU,oBAAoB,CAAA;+GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,CAJhB,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAC5B,YAAY,aACZ,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAEtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHrB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,uBAAuB,CAAC;oBACvC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,uBAAuB,CAAC;AACnC,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# ux4g-components-angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper components for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-angular ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the CSS bundle to your `angular.json` styles array:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"styles": [
|
|
18
|
+
"node_modules/ux4g-components-web/styles/ux4g.css",
|
|
19
|
+
"src/styles.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// app.module.ts
|
|
28
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
29
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
imports: [UX4GButtonModule, UX4GSpinnerModule],
|
|
33
|
+
})
|
|
34
|
+
export class AppModule {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- app.component.html -->
|
|
39
|
+
<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
|
|
40
|
+
Save
|
|
41
|
+
</ux4g-button>
|
|
42
|
+
|
|
43
|
+
<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Available Components (50)
|
|
47
|
+
|
|
48
|
+
Each component is available as a sub-path import:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
52
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
53
|
+
import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
|
|
54
|
+
import { UX4GCardModule } from 'ux4g-components-angular/card';
|
|
55
|
+
// ... and 46 more
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
|
|
59
|
+
|
|
60
|
+
## Architecture
|
|
61
|
+
|
|
62
|
+
This package follows a CSS-first architecture:
|
|
63
|
+
|
|
64
|
+
- **CSS is the source of truth** — all visual decisions live in CSS
|
|
65
|
+
- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
|
|
66
|
+
- **No inline styles, no CSS-in-JS** — only `[class]` bindings
|
|
67
|
+
- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
|
|
68
|
+
|
|
69
|
+
## Compatibility
|
|
70
|
+
|
|
71
|
+
- Angular >= 15.0.0
|
|
72
|
+
- Built with Ivy partial compilation (compatible with Angular 15–19+)
|
|
73
|
+
- `typesVersions` included for `moduleResolution: node` compatibility
|
|
74
|
+
|
|
75
|
+
## Peer Dependencies
|
|
76
|
+
|
|
77
|
+
- `@angular/core >= 15.0.0`
|
|
78
|
+
- `@angular/common >= 15.0.0`
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)
|
|
83
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ux4g-components-angular-button.mjs","sources":["../../../src/button/ux4g-button.component.ts","../../../src/button/ux4g-button.module.ts","../../../src/button/ux4g-components-angular-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ViewEncapsulation, HostBinding, HostListener } from '@angular/core';\r\nimport { ButtonVariant, ButtonSize, ButtonShape, buildButtonClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-button',\r\n standalone: false,\r\n template: `\r\n <button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || null\"\r\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n [attr.aria-busy]=\"loading ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n >\r\n <span *ngIf=\"loading\" class=\"ux4g-btn-spinner\" aria-hidden=\"true\"></span>\r\n <ng-content></ng-content>\r\n </button>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GButtonComponent {\r\n @Input() variant: ButtonVariant = 'primary';\r\n @Input() size: ButtonSize = 'md';\r\n @Input() shape: ButtonShape = 'rectangle';\r\n @Input() disabled: boolean = false;\r\n @Input() loading: boolean = false;\r\n @Output() clicked = new EventEmitter<MouseEvent>();\r\n\r\n get buttonClasses(): string {\r\n return buildButtonClasses(this.variant, this.size, this.disabled, this.loading, this.shape);\r\n }\r\n\r\n onButtonClick(event: MouseEvent): void {\r\n if (this.disabled) return;\r\n this.clicked.emit(event);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GButtonComponent } from './ux4g-button.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GButtonComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GButtonComponent],\r\n})\r\nexport class UX4GButtonModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ux4g-components-angular-button.mjs","sources":["../../../src/button/ux4g-button.component.ts","../../../src/button/ux4g-button.module.ts","../../../src/button/ux4g-components-angular-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ViewEncapsulation, HostBinding, HostListener } from '@angular/core';\r\nimport { ButtonVariant, ButtonSize, ButtonShape, buildButtonClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-button',\r\n standalone: false,\r\n template: `\r\n <button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || null\"\r\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n [attr.aria-busy]=\"loading ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n >\r\n <span *ngIf=\"loading\" class=\"ux4g-btn-spinner\" aria-hidden=\"true\"></span>\r\n <ng-content></ng-content>\r\n </button>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GButtonComponent {\r\n @Input() variant: ButtonVariant = 'primary';\r\n @Input() size: ButtonSize = 'md';\r\n @Input() shape: ButtonShape = 'rectangle';\r\n @Input() disabled: boolean = false;\r\n @Input() loading: boolean = false;\r\n @Output() clicked = new EventEmitter<MouseEvent>();\r\n\r\n get buttonClasses(): string {\r\n return buildButtonClasses(this.variant, this.size, this.disabled, this.loading, this.shape);\r\n }\r\n\r\n onButtonClick(event: MouseEvent): void {\r\n if (this.disabled) return;\r\n this.clicked.emit(event);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GButtonComponent } from './ux4g-button.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GButtonComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GButtonComponent],\r\n})\r\nexport class UX4GButtonModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAoBa,mBAAmB,CAAA;AAjBhC,IAAA,WAAA,GAAA;QAkBW,IAAA,CAAA,OAAO,GAAkB,SAAS;QAClC,IAAA,CAAA,IAAI,GAAe,IAAI;QACvB,IAAA,CAAA,KAAK,GAAgB,WAAW;QAChC,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,OAAO,GAAY,KAAK;AACvB,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAc;AAUnD,IAAA;AARC,IAAA,IAAI,aAAa,GAAA;QACf,OAAO,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;IAC7F;AAEA,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAC1B;+GAfW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdpB,CAAA;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAjB/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;AAWT,EAAA,CAAA;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACS,OAAO,EAAA,CAAA;sBAAhB;;;MCjBU,gBAAgB,CAAA;+GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,CAJZ,mBAAmB,CAAA,EAAA,OAAA,EAAA,CACxB,YAAY,aACZ,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAElB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHjB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,mBAAmB,CAAC;oBACnC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,mBAAmB,CAAC;AAC/B,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/button/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/button/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# ux4g-components-angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper components for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-angular ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the CSS bundle to your `angular.json` styles array:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"styles": [
|
|
18
|
+
"node_modules/ux4g-components-web/styles/ux4g.css",
|
|
19
|
+
"src/styles.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// app.module.ts
|
|
28
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
29
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
imports: [UX4GButtonModule, UX4GSpinnerModule],
|
|
33
|
+
})
|
|
34
|
+
export class AppModule {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- app.component.html -->
|
|
39
|
+
<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
|
|
40
|
+
Save
|
|
41
|
+
</ux4g-button>
|
|
42
|
+
|
|
43
|
+
<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Available Components (50)
|
|
47
|
+
|
|
48
|
+
Each component is available as a sub-path import:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
52
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
53
|
+
import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
|
|
54
|
+
import { UX4GCardModule } from 'ux4g-components-angular/card';
|
|
55
|
+
// ... and 46 more
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
|
|
59
|
+
|
|
60
|
+
## Architecture
|
|
61
|
+
|
|
62
|
+
This package follows a CSS-first architecture:
|
|
63
|
+
|
|
64
|
+
- **CSS is the source of truth** — all visual decisions live in CSS
|
|
65
|
+
- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
|
|
66
|
+
- **No inline styles, no CSS-in-JS** — only `[class]` bindings
|
|
67
|
+
- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
|
|
68
|
+
|
|
69
|
+
## Compatibility
|
|
70
|
+
|
|
71
|
+
- Angular >= 15.0.0
|
|
72
|
+
- Built with Ivy partial compilation (compatible with Angular 15–19+)
|
|
73
|
+
- `typesVersions` included for `moduleResolution: node` compatibility
|
|
74
|
+
|
|
75
|
+
## Peer Dependencies
|
|
76
|
+
|
|
77
|
+
- `@angular/core >= 15.0.0`
|
|
78
|
+
- `@angular/common >= 15.0.0`
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)
|
|
83
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ux4g-components-angular-card.mjs","sources":["../../../src/card/ux4g-card.component.ts","../../../src/card/ux4g-card.module.ts","../../../src/card/ux4g-components-angular-card.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { CardVariant, CardLayout, buildCardClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-card',\r\n standalone: false,\r\n template: `\r\n <div [className]=\"cardClasses\" [attr.disabled]=\"disabled || null\">\r\n <ng-content></ng-content>\r\n </div>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GCardComponent {\r\n @Input() variant: CardVariant = 'solid';\r\n @Input() layout: CardLayout = 'vertical';\r\n @Input() disabled: boolean = false;\r\n\r\n get cardClasses(): string {\r\n return buildCardClasses(this.variant, this.layout);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GCardComponent } from './ux4g-card.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GCardComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GCardComponent],\r\n})\r\nexport class UX4GCardModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ux4g-components-angular-card.mjs","sources":["../../../src/card/ux4g-card.component.ts","../../../src/card/ux4g-card.module.ts","../../../src/card/ux4g-components-angular-card.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { CardVariant, CardLayout, buildCardClasses } from 'ux4g-components-web/types';\r\n\r\n@Component({\r\n selector: 'ux4g-card',\r\n standalone: false,\r\n template: `\r\n <div [className]=\"cardClasses\" [attr.disabled]=\"disabled || null\">\r\n <ng-content></ng-content>\r\n </div>\r\n `,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GCardComponent {\r\n @Input() variant: CardVariant = 'solid';\r\n @Input() layout: CardLayout = 'vertical';\r\n @Input() disabled: boolean = false;\r\n\r\n get cardClasses(): string {\r\n return buildCardClasses(this.variant, this.layout);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GCardComponent } from './ux4g-card.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GCardComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GCardComponent],\r\n})\r\nexport class UX4GCardModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAaa,iBAAiB,CAAA;AAV9B,IAAA,WAAA,GAAA;QAWW,IAAA,CAAA,OAAO,GAAgB,OAAO;QAC9B,IAAA,CAAA,MAAM,GAAe,UAAU;QAC/B,IAAA,CAAA,QAAQ,GAAY,KAAK;AAKnC,IAAA;AAHC,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC;IACpD;+GAPW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAPlB,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE,CAAA;;;;AAIT,EAAA,CAAA;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,OAAO,EAAA,CAAA;sBAAf;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;;;MCPU,cAAc,CAAA;+GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,CAJV,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACtB,YAAY,aACZ,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/card/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/card/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# ux4g-components-angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper components for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-angular ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the CSS bundle to your `angular.json` styles array:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"styles": [
|
|
18
|
+
"node_modules/ux4g-components-web/styles/ux4g.css",
|
|
19
|
+
"src/styles.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// app.module.ts
|
|
28
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
29
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
imports: [UX4GButtonModule, UX4GSpinnerModule],
|
|
33
|
+
})
|
|
34
|
+
export class AppModule {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- app.component.html -->
|
|
39
|
+
<ux4g-button variant="primary" size="md" (buttonClick)="onSave()">
|
|
40
|
+
Save
|
|
41
|
+
</ux4g-button>
|
|
42
|
+
|
|
43
|
+
<ux4g-spinner variant="primary" size="md" type="full"></ux4g-spinner>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Available Components (50)
|
|
47
|
+
|
|
48
|
+
Each component is available as a sub-path import:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { UX4GButtonModule } from 'ux4g-components-angular/button';
|
|
52
|
+
import { UX4GSpinnerModule } from 'ux4g-components-angular/spinner';
|
|
53
|
+
import { UX4GBadgeModule } from 'ux4g-components-angular/badge';
|
|
54
|
+
import { UX4GCardModule } from 'ux4g-components-angular/card';
|
|
55
|
+
// ... and 46 more
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Full list: `accessibility-bar`, `accordion`, `alert`, `avatar`, `badge`, `breadcrumb`, `button`, `card`, `carousel`, `checkbox`, `chip`, `chip-group`, `combobox`, `date-time-picker`, `divider`, `draft-status-banner`, `drawer`, `dropdown`, `empty-state`, `feedback`, `file-upload`, `footer`, `form-field-group`, `icon-button`, `image`, `input`, `journey-timeline`, `link`, `list`, `modal`, `navbar`, `otp-input`, `pagination`, `popover`, `progress-indicator`, `radio`, `result-list-row`, `search`, `sla-progress-indicator`, `slider`, `slot-grid`, `social-links`, `spinner`, `status-pipeline`, `stepper`, `switch`, `tab`, `table`, `tag`, `tooltip`
|
|
59
|
+
|
|
60
|
+
## Architecture
|
|
61
|
+
|
|
62
|
+
This package follows a CSS-first architecture:
|
|
63
|
+
|
|
64
|
+
- **CSS is the source of truth** — all visual decisions live in CSS
|
|
65
|
+
- **Wrappers are thin** — they map typed inputs to CSS class strings via `buildXxxClasses()` functions
|
|
66
|
+
- **No inline styles, no CSS-in-JS** — only `[class]` bindings
|
|
67
|
+
- **No local `types.ts` copies** — all Class_Builder functions are imported from `ux4g-components-web/types`
|
|
68
|
+
|
|
69
|
+
## Compatibility
|
|
70
|
+
|
|
71
|
+
- Angular >= 15.0.0
|
|
72
|
+
- Built with Ivy partial compilation (compatible with Angular 15–19+)
|
|
73
|
+
- `typesVersions` included for `moduleResolution: node` compatibility
|
|
74
|
+
|
|
75
|
+
## Peer Dependencies
|
|
76
|
+
|
|
77
|
+
- `@angular/core >= 15.0.0`
|
|
78
|
+
- `@angular/common >= 15.0.0`
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- [`ux4g-components-web`](https://www.npmjs.com/package/ux4g-components-web) — CSS bundle and shared types (required)
|
|
83
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ux4g-components-angular-carousel.mjs","sources":["../../../src/carousel/ux4g-carousel.component.ts","../../../src/carousel/ux4g-carousel.module.ts","../../../src/carousel/ux4g-components-angular-carousel.ts"],"sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ux4g-carousel',\r\n standalone: false,\r\n template: `<div [className]=\"carouselClasses\"><ng-content></ng-content></div>`,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GCarouselComponent {\r\n get carouselClasses(): string {\r\n return 'ux4g-carousel';\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GCarouselComponent } from './ux4g-carousel.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GCarouselComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GCarouselComponent],\r\n})\r\nexport class UX4GCarouselModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ux4g-components-angular-carousel.mjs","sources":["../../../src/carousel/ux4g-carousel.component.ts","../../../src/carousel/ux4g-carousel.module.ts","../../../src/carousel/ux4g-components-angular-carousel.ts"],"sourcesContent":["import { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ux4g-carousel',\r\n standalone: false,\r\n template: `<div [className]=\"carouselClasses\"><ng-content></ng-content></div>`,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GCarouselComponent {\r\n get carouselClasses(): string {\r\n return 'ux4g-carousel';\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { UX4GCarouselComponent } from './ux4g-carousel.component';\r\n\r\n@NgModule({\r\n declarations: [UX4GCarouselComponent],\r\n imports: [CommonModule],\r\n exports: [UX4GCarouselComponent],\r\n})\r\nexport class UX4GCarouselModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAQa,qBAAqB,CAAA;AAChC,IAAA,IAAI,eAAe,GAAA;AACjB,QAAA,OAAO,eAAe;IACxB;+GAHW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,0EAHtB,CAAA,kEAAA,CAAoE,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAGnE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,QAAQ,EAAE,CAAA,kEAAA,CAAoE;oBAC9E,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;;;MCEY,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,CAJd,qBAAqB,CAAA,EAAA,OAAA,EAAA,CAC1B,YAAY,aACZ,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;oBACrC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/carousel/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../src/carousel/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
|