@rossigee/clarity-angular 18.2.1-fixed
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
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
## Installing Clarity Angular [](https://badge.fury.io/js/%40clr%2Fangular)
|
|
2
|
+
|
|
3
|
+
1. Install Clarity packages through npm:
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm install @clr/ui @clr/angular
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
2. Import the ClarityModule into your Angular application's module. Your application's main module might look like this:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
import { NgModule } from '@angular/core';
|
|
13
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
14
|
+
import { ClarityModule } from '@clr/angular';
|
|
15
|
+
import { AppComponent } from './app.component';
|
|
16
|
+
|
|
17
|
+
@NgModule({
|
|
18
|
+
imports: [
|
|
19
|
+
BrowserModule,
|
|
20
|
+
ClarityModule,
|
|
21
|
+
....
|
|
22
|
+
],
|
|
23
|
+
declarations: [ AppComponent ],
|
|
24
|
+
bootstrap: [ AppComponent ]
|
|
25
|
+
})
|
|
26
|
+
export class AppModule { }
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
3. Include the necessary styles in the build. You can do this by either including the compiled/minified css in your angular.json
|
|
30
|
+
file or by importing the scss/css directly in your top level styles.scss/css file.
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
//...
|
|
34
|
+
"styles": [
|
|
35
|
+
"node_modules/@clr/ui/clr-ui.min.css",
|
|
36
|
+
//... any other styles
|
|
37
|
+
]
|
|
38
|
+
//...
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```scss
|
|
42
|
+
@use '@clr/ui/clr-ui.min.css';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**Note**: The above instructions represent the best practice for Clarity Design System. For information about accommodating legacy themes, see the Legacy Styles section in the @clr/ui package.
|
|
46
|
+
|
|
47
|
+
4. Set the Theme
|
|
48
|
+
Add the `cds-theme=”light”` attribute to the body element in your main HTML file:
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
<body cds-theme="light" />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
You can toggle to dark theme by setting cds-theme="dark".
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { NgModule } from '@angular/core';
|
|
3
|
+
import { ClrAccordionModule } from '@clr/angular/accordion';
|
|
4
|
+
export * from '@clr/angular/accordion';
|
|
5
|
+
import { ClrButtonModule } from '@clr/angular/button';
|
|
6
|
+
export * from '@clr/angular/button';
|
|
7
|
+
import { ClrDataModule } from '@clr/angular/data';
|
|
8
|
+
export * from '@clr/angular/data';
|
|
9
|
+
import { ClrEmphasisModule } from '@clr/angular/emphasis';
|
|
10
|
+
export * from '@clr/angular/emphasis';
|
|
11
|
+
import { ClrFormsModule } from '@clr/angular/forms';
|
|
12
|
+
export * from '@clr/angular/forms';
|
|
13
|
+
import { ClrIcon, ClrIconModule } from '@clr/angular/icon';
|
|
14
|
+
export * from '@clr/angular/icon';
|
|
15
|
+
import { ClrLayoutModule } from '@clr/angular/layout';
|
|
16
|
+
export * from '@clr/angular/layout';
|
|
17
|
+
import { ClrModalModule, ClrSidePanelModule } from '@clr/angular/modal';
|
|
18
|
+
export * from '@clr/angular/modal';
|
|
19
|
+
import { ClrPopoverModule } from '@clr/angular/popover';
|
|
20
|
+
export * from '@clr/angular/popover';
|
|
21
|
+
import { ClrPopoverModuleNext } from '@clr/angular/popover/common';
|
|
22
|
+
import { ClrProgressBarModule } from '@clr/angular/progress/progress-bars';
|
|
23
|
+
export * from '@clr/angular/progress/progress-bars';
|
|
24
|
+
import { ClrSpinnerModule } from '@clr/angular/progress/spinner';
|
|
25
|
+
export * from '@clr/angular/progress/spinner';
|
|
26
|
+
import { ClrStepperModule } from '@clr/angular/stepper';
|
|
27
|
+
export * from '@clr/angular/stepper';
|
|
28
|
+
import { ClrTimelineModule } from '@clr/angular/timeline';
|
|
29
|
+
export * from '@clr/angular/timeline';
|
|
30
|
+
import { ClrLoadingModule, ClrConditionalModule, ClrFocusOnViewInitModule } from '@clr/angular/utils';
|
|
31
|
+
export * from '@clr/angular/utils';
|
|
32
|
+
import { ClrWizardModule } from '@clr/angular/wizard';
|
|
33
|
+
export * from '@clr/angular/wizard';
|
|
34
|
+
export * from '@clr/angular/collapsible-panel';
|
|
35
|
+
|
|
36
|
+
/*
|
|
37
|
+
* Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
|
|
38
|
+
* The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
|
|
39
|
+
* This software is released under MIT license.
|
|
40
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
41
|
+
*/
|
|
42
|
+
class ClarityModule {
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClarityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
44
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClarityModule, imports: [ClrIcon], exports: [ClrEmphasisModule,
|
|
45
|
+
ClrDataModule,
|
|
46
|
+
ClrIcon,
|
|
47
|
+
ClrIconModule,
|
|
48
|
+
ClrModalModule,
|
|
49
|
+
ClrLoadingModule,
|
|
50
|
+
ClrConditionalModule,
|
|
51
|
+
ClrFocusOnViewInitModule,
|
|
52
|
+
ClrButtonModule,
|
|
53
|
+
ClrFormsModule,
|
|
54
|
+
ClrLayoutModule,
|
|
55
|
+
ClrPopoverModule,
|
|
56
|
+
ClrWizardModule,
|
|
57
|
+
ClrSidePanelModule,
|
|
58
|
+
ClrAccordionModule,
|
|
59
|
+
ClrStepperModule,
|
|
60
|
+
ClrSpinnerModule,
|
|
61
|
+
ClrProgressBarModule,
|
|
62
|
+
ClrPopoverModuleNext,
|
|
63
|
+
ClrTimelineModule] }); }
|
|
64
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClarityModule, imports: [ClrEmphasisModule,
|
|
65
|
+
ClrDataModule,
|
|
66
|
+
ClrIconModule,
|
|
67
|
+
ClrModalModule,
|
|
68
|
+
ClrLoadingModule,
|
|
69
|
+
ClrConditionalModule,
|
|
70
|
+
ClrFocusOnViewInitModule,
|
|
71
|
+
ClrButtonModule,
|
|
72
|
+
ClrFormsModule,
|
|
73
|
+
ClrLayoutModule,
|
|
74
|
+
ClrPopoverModule,
|
|
75
|
+
ClrWizardModule,
|
|
76
|
+
ClrSidePanelModule,
|
|
77
|
+
ClrAccordionModule,
|
|
78
|
+
ClrStepperModule,
|
|
79
|
+
ClrSpinnerModule,
|
|
80
|
+
ClrProgressBarModule,
|
|
81
|
+
ClrPopoverModuleNext,
|
|
82
|
+
ClrTimelineModule] }); }
|
|
83
|
+
}
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClarityModule, decorators: [{
|
|
85
|
+
type: NgModule,
|
|
86
|
+
args: [{
|
|
87
|
+
imports: [ClrIcon],
|
|
88
|
+
exports: [
|
|
89
|
+
ClrEmphasisModule,
|
|
90
|
+
ClrDataModule,
|
|
91
|
+
ClrIcon,
|
|
92
|
+
ClrIconModule,
|
|
93
|
+
ClrModalModule,
|
|
94
|
+
ClrLoadingModule,
|
|
95
|
+
ClrConditionalModule,
|
|
96
|
+
ClrFocusOnViewInitModule,
|
|
97
|
+
ClrButtonModule,
|
|
98
|
+
ClrFormsModule,
|
|
99
|
+
ClrLayoutModule,
|
|
100
|
+
ClrPopoverModule,
|
|
101
|
+
ClrWizardModule,
|
|
102
|
+
ClrSidePanelModule,
|
|
103
|
+
ClrAccordionModule,
|
|
104
|
+
ClrStepperModule,
|
|
105
|
+
ClrSpinnerModule,
|
|
106
|
+
ClrProgressBarModule,
|
|
107
|
+
ClrPopoverModuleNext,
|
|
108
|
+
ClrTimelineModule,
|
|
109
|
+
],
|
|
110
|
+
}]
|
|
111
|
+
}] });
|
|
112
|
+
|
|
113
|
+
/*
|
|
114
|
+
* Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
|
|
115
|
+
* The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
|
|
116
|
+
* This software is released under MIT license.
|
|
117
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Generated bundle index. Do not edit.
|
|
122
|
+
*/
|
|
123
|
+
|
|
124
|
+
export { ClarityModule };
|
|
125
|
+
//# sourceMappingURL=rossigee-clarity-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rossigee-clarity-angular.mjs","sources":["../../../projects/angular/clr-angular.module.ts","../../../projects/angular/index.ts","../../../projects/angular/rossigee-clarity-angular.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { NgModule } from '@angular/core';\nimport { ClrAccordionModule } from '@clr/angular/accordion';\nimport { ClrButtonModule } from '@clr/angular/button';\nimport { ClrDataModule } from '@clr/angular/data';\nimport { ClrEmphasisModule } from '@clr/angular/emphasis';\nimport { ClrFormsModule } from '@clr/angular/forms';\nimport { ClrIcon, ClrIconModule } from '@clr/angular/icon';\nimport { ClrLayoutModule } from '@clr/angular/layout';\nimport { ClrModalModule, ClrSidePanelModule } from '@clr/angular/modal';\nimport { ClrPopoverModule } from '@clr/angular/popover';\nimport { ClrPopoverModuleNext } from '@clr/angular/popover/common';\nimport { ClrProgressBarModule } from '@clr/angular/progress/progress-bars';\nimport { ClrSpinnerModule } from '@clr/angular/progress/spinner';\nimport { ClrStepperModule } from '@clr/angular/stepper';\nimport { ClrTimelineModule } from '@clr/angular/timeline';\nimport { ClrConditionalModule, ClrFocusOnViewInitModule, ClrLoadingModule } from '@clr/angular/utils';\nimport { ClrWizardModule } from '@clr/angular/wizard';\n\n@NgModule({\n imports: [ClrIcon],\n exports: [\n ClrEmphasisModule,\n ClrDataModule,\n ClrIcon,\n ClrIconModule,\n ClrModalModule,\n ClrLoadingModule,\n ClrConditionalModule,\n ClrFocusOnViewInitModule,\n ClrButtonModule,\n ClrFormsModule,\n ClrLayoutModule,\n ClrPopoverModule,\n ClrWizardModule,\n ClrSidePanelModule,\n ClrAccordionModule,\n ClrStepperModule,\n ClrSpinnerModule,\n ClrProgressBarModule,\n ClrPopoverModuleNext,\n ClrTimelineModule,\n ],\n})\nexport class ClarityModule {}\n","/*\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nexport * from './clr-angular.module';\n\nexport * from '@clr/angular/button';\nexport * from '@clr/angular/data';\nexport * from '@clr/angular/emphasis';\nexport * from '@clr/angular/forms';\nexport * from '@clr/angular/icon';\nexport * from '@clr/angular/layout';\nexport * from '@clr/angular/modal';\nexport * from '@clr/angular/popover';\nexport * from '@clr/angular/utils';\nexport * from '@clr/angular/wizard';\nexport * from '@clr/angular/collapsible-panel';\nexport * from '@clr/angular/accordion';\nexport * from '@clr/angular/stepper';\nexport * from '@clr/angular/progress/spinner';\nexport * from '@clr/angular/progress/progress-bars';\nexport * from '@clr/angular/timeline';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;MA6CU,aAAa,CAAA;8GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAb,aAAa,EAAA,OAAA,EAAA,CAxBd,OAAO,CAAA,EAAA,OAAA,EAAA,CAEf,iBAAiB;YACjB,aAAa;YACb,OAAO;YACP,aAAa;YACb,cAAc;YACd,gBAAgB;YAChB,oBAAoB;YACpB,wBAAwB;YACxB,eAAe;YACf,cAAc;YACd,eAAe;YACf,gBAAgB;YAChB,eAAe;YACf,kBAAkB;YAClB,kBAAkB;YAClB,gBAAgB;YAChB,gBAAgB;YAChB,oBAAoB;YACpB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAtBtB,iBAAiB;YACjB,aAAa;YAEb,aAAa;YACb,cAAc;YACd,gBAAgB;YAChB,oBAAoB;YACpB,wBAAwB;YACxB,eAAe;YACf,cAAc;YACd,eAAe;YACf,gBAAgB;YAChB,eAAe;YACf,kBAAkB;YAClB,kBAAkB;YAClB,gBAAgB;YAChB,gBAAgB;YAChB,oBAAoB;YACpB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;;2FAGR,aAAa,EAAA,UAAA,EAAA,CAAA;kBAzBzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,OAAO,CAAC;AAClB,oBAAA,OAAO,EAAE;wBACP,iBAAiB;wBACjB,aAAa;wBACb,OAAO;wBACP,aAAa;wBACb,cAAc;wBACd,gBAAgB;wBAChB,oBAAoB;wBACpB,wBAAwB;wBACxB,eAAe;wBACf,cAAc;wBACd,eAAe;wBACf,gBAAgB;wBAChB,eAAe;wBACf,kBAAkB;wBAClB,kBAAkB;wBAClB,gBAAgB;wBAChB,gBAAgB;wBAChB,oBAAoB;wBACpB,oBAAoB;wBACpB,iBAAiB;AAClB,qBAAA;AACF,iBAAA;;;ACjDD;;;;;AAKG;;ACLH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rossigee/clarity-angular",
|
|
3
|
+
"version": "18.2.1-fixed",
|
|
4
|
+
"description": "Angular components for Clarity",
|
|
5
|
+
"homepage": "https://clarity.design",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"ng-add",
|
|
8
|
+
"clarity",
|
|
9
|
+
"angular",
|
|
10
|
+
"components"
|
|
11
|
+
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/rossigee/ng-clarity.git"
|
|
15
|
+
},
|
|
16
|
+
"author": "Clarity Design System",
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"bugs": {
|
|
19
|
+
"url": "https://github.com/rossigee/ng-clarity/issues"
|
|
20
|
+
},
|
|
21
|
+
"schematics": "./schematics/collection.json",
|
|
22
|
+
"ng-update": {
|
|
23
|
+
"migrations": "./schematics/collection.json"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"@angular/cdk": ">= 21.1.0",
|
|
27
|
+
"@angular/common": ">= 21.1.0",
|
|
28
|
+
"@angular/core": ">= 21.1.0"
|
|
29
|
+
},
|
|
30
|
+
"module": "fesm2022/rossigee-clarity-angular.mjs",
|
|
31
|
+
"typings": "types/rossigee-clarity-angular.d.ts",
|
|
32
|
+
"exports": {
|
|
33
|
+
"./package.json": {
|
|
34
|
+
"default": "./package.json"
|
|
35
|
+
},
|
|
36
|
+
".": {
|
|
37
|
+
"types": "./types/rossigee-clarity-angular.d.ts",
|
|
38
|
+
"default": "./fesm2022/rossigee-clarity-angular.mjs"
|
|
39
|
+
},
|
|
40
|
+
"./accordion": {
|
|
41
|
+
"types": "./types/rossigee-clarity-angular-accordion.d.ts",
|
|
42
|
+
"default": "./fesm2022/rossigee-clarity-angular-accordion.mjs"
|
|
43
|
+
},
|
|
44
|
+
"./button": {
|
|
45
|
+
"types": "./types/rossigee-clarity-angular-button.d.ts",
|
|
46
|
+
"default": "./fesm2022/rossigee-clarity-angular-button.mjs"
|
|
47
|
+
},
|
|
48
|
+
"./collapsible-panel": {
|
|
49
|
+
"types": "./types/rossigee-clarity-angular-collapsible-panel.d.ts",
|
|
50
|
+
"default": "./fesm2022/rossigee-clarity-angular-collapsible-panel.mjs"
|
|
51
|
+
},
|
|
52
|
+
"./data": {
|
|
53
|
+
"types": "./types/rossigee-clarity-angular-data.d.ts",
|
|
54
|
+
"default": "./fesm2022/rossigee-clarity-angular-data.mjs"
|
|
55
|
+
},
|
|
56
|
+
"./data/datagrid": {
|
|
57
|
+
"types": "./types/rossigee-clarity-angular-data-datagrid.d.ts",
|
|
58
|
+
"default": "./fesm2022/rossigee-clarity-angular-data-datagrid.mjs"
|
|
59
|
+
},
|
|
60
|
+
"./data/stack-view": {
|
|
61
|
+
"types": "./types/rossigee-clarity-angular-data-stack-view.d.ts",
|
|
62
|
+
"default": "./fesm2022/rossigee-clarity-angular-data-stack-view.mjs"
|
|
63
|
+
},
|
|
64
|
+
"./data/tree-view": {
|
|
65
|
+
"types": "./types/rossigee-clarity-angular-data-tree-view.d.ts",
|
|
66
|
+
"default": "./fesm2022/rossigee-clarity-angular-data-tree-view.mjs"
|
|
67
|
+
},
|
|
68
|
+
"./emphasis": {
|
|
69
|
+
"types": "./types/rossigee-clarity-angular-emphasis.d.ts",
|
|
70
|
+
"default": "./fesm2022/rossigee-clarity-angular-emphasis.mjs"
|
|
71
|
+
},
|
|
72
|
+
"./emphasis/alert": {
|
|
73
|
+
"types": "./types/rossigee-clarity-angular-emphasis-alert.d.ts",
|
|
74
|
+
"default": "./fesm2022/rossigee-clarity-angular-emphasis-alert.mjs"
|
|
75
|
+
},
|
|
76
|
+
"./emphasis/badge": {
|
|
77
|
+
"types": "./types/rossigee-clarity-angular-emphasis-badge.d.ts",
|
|
78
|
+
"default": "./fesm2022/rossigee-clarity-angular-emphasis-badge.mjs"
|
|
79
|
+
},
|
|
80
|
+
"./emphasis/common": {
|
|
81
|
+
"types": "./types/rossigee-clarity-angular-emphasis-common.d.ts",
|
|
82
|
+
"default": "./fesm2022/rossigee-clarity-angular-emphasis-common.mjs"
|
|
83
|
+
},
|
|
84
|
+
"./emphasis/label": {
|
|
85
|
+
"types": "./types/rossigee-clarity-angular-emphasis-label.d.ts",
|
|
86
|
+
"default": "./fesm2022/rossigee-clarity-angular-emphasis-label.mjs"
|
|
87
|
+
},
|
|
88
|
+
"./forms": {
|
|
89
|
+
"types": "./types/rossigee-clarity-angular-forms.d.ts",
|
|
90
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms.mjs"
|
|
91
|
+
},
|
|
92
|
+
"./forms/checkbox": {
|
|
93
|
+
"types": "./types/rossigee-clarity-angular-forms-checkbox.d.ts",
|
|
94
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-checkbox.mjs"
|
|
95
|
+
},
|
|
96
|
+
"./forms/combobox": {
|
|
97
|
+
"types": "./types/rossigee-clarity-angular-forms-combobox.d.ts",
|
|
98
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-combobox.mjs"
|
|
99
|
+
},
|
|
100
|
+
"./forms/common": {
|
|
101
|
+
"types": "./types/rossigee-clarity-angular-forms-common.d.ts",
|
|
102
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-common.mjs"
|
|
103
|
+
},
|
|
104
|
+
"./forms/datalist": {
|
|
105
|
+
"types": "./types/rossigee-clarity-angular-forms-datalist.d.ts",
|
|
106
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-datalist.mjs"
|
|
107
|
+
},
|
|
108
|
+
"./forms/datepicker": {
|
|
109
|
+
"types": "./types/rossigee-clarity-angular-forms-datepicker.d.ts",
|
|
110
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-datepicker.mjs"
|
|
111
|
+
},
|
|
112
|
+
"./forms/file-input": {
|
|
113
|
+
"types": "./types/rossigee-clarity-angular-forms-file-input.d.ts",
|
|
114
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-file-input.mjs"
|
|
115
|
+
},
|
|
116
|
+
"./forms/input": {
|
|
117
|
+
"types": "./types/rossigee-clarity-angular-forms-input.d.ts",
|
|
118
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-input.mjs"
|
|
119
|
+
},
|
|
120
|
+
"./forms/number-input": {
|
|
121
|
+
"types": "./types/rossigee-clarity-angular-forms-number-input.d.ts",
|
|
122
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-number-input.mjs"
|
|
123
|
+
},
|
|
124
|
+
"./forms/password": {
|
|
125
|
+
"types": "./types/rossigee-clarity-angular-forms-password.d.ts",
|
|
126
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-password.mjs"
|
|
127
|
+
},
|
|
128
|
+
"./forms/radio": {
|
|
129
|
+
"types": "./types/rossigee-clarity-angular-forms-radio.d.ts",
|
|
130
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-radio.mjs"
|
|
131
|
+
},
|
|
132
|
+
"./forms/range": {
|
|
133
|
+
"types": "./types/rossigee-clarity-angular-forms-range.d.ts",
|
|
134
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-range.mjs"
|
|
135
|
+
},
|
|
136
|
+
"./forms/select": {
|
|
137
|
+
"types": "./types/rossigee-clarity-angular-forms-select.d.ts",
|
|
138
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-select.mjs"
|
|
139
|
+
},
|
|
140
|
+
"./forms/textarea": {
|
|
141
|
+
"types": "./types/rossigee-clarity-angular-forms-textarea.d.ts",
|
|
142
|
+
"default": "./fesm2022/rossigee-clarity-angular-forms-textarea.mjs"
|
|
143
|
+
},
|
|
144
|
+
"./icon": {
|
|
145
|
+
"types": "./types/rossigee-clarity-angular-icon.d.ts",
|
|
146
|
+
"default": "./fesm2022/rossigee-clarity-angular-icon.mjs"
|
|
147
|
+
},
|
|
148
|
+
"./layout": {
|
|
149
|
+
"types": "./types/rossigee-clarity-angular-layout.d.ts",
|
|
150
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout.mjs"
|
|
151
|
+
},
|
|
152
|
+
"./layout/breadcrumbs": {
|
|
153
|
+
"types": "./types/rossigee-clarity-angular-layout-breadcrumbs.d.ts",
|
|
154
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout-breadcrumbs.mjs"
|
|
155
|
+
},
|
|
156
|
+
"./layout/main-container": {
|
|
157
|
+
"types": "./types/rossigee-clarity-angular-layout-main-container.d.ts",
|
|
158
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout-main-container.mjs"
|
|
159
|
+
},
|
|
160
|
+
"./layout/nav": {
|
|
161
|
+
"types": "./types/rossigee-clarity-angular-layout-nav.d.ts",
|
|
162
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout-nav.mjs"
|
|
163
|
+
},
|
|
164
|
+
"./layout/tabs": {
|
|
165
|
+
"types": "./types/rossigee-clarity-angular-layout-tabs.d.ts",
|
|
166
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout-tabs.mjs"
|
|
167
|
+
},
|
|
168
|
+
"./layout/vertical-nav": {
|
|
169
|
+
"types": "./types/rossigee-clarity-angular-layout-vertical-nav.d.ts",
|
|
170
|
+
"default": "./fesm2022/rossigee-clarity-angular-layout-vertical-nav.mjs"
|
|
171
|
+
},
|
|
172
|
+
"./modal": {
|
|
173
|
+
"types": "./types/rossigee-clarity-angular-modal.d.ts",
|
|
174
|
+
"default": "./fesm2022/rossigee-clarity-angular-modal.mjs"
|
|
175
|
+
},
|
|
176
|
+
"./popover": {
|
|
177
|
+
"types": "./types/rossigee-clarity-angular-popover.d.ts",
|
|
178
|
+
"default": "./fesm2022/rossigee-clarity-angular-popover.mjs"
|
|
179
|
+
},
|
|
180
|
+
"./popover/common": {
|
|
181
|
+
"types": "./types/rossigee-clarity-angular-popover-common.d.ts",
|
|
182
|
+
"default": "./fesm2022/rossigee-clarity-angular-popover-common.mjs"
|
|
183
|
+
},
|
|
184
|
+
"./popover/dropdown": {
|
|
185
|
+
"types": "./types/rossigee-clarity-angular-popover-dropdown.d.ts",
|
|
186
|
+
"default": "./fesm2022/rossigee-clarity-angular-popover-dropdown.mjs"
|
|
187
|
+
},
|
|
188
|
+
"./popover/signpost": {
|
|
189
|
+
"types": "./types/rossigee-clarity-angular-popover-signpost.d.ts",
|
|
190
|
+
"default": "./fesm2022/rossigee-clarity-angular-popover-signpost.mjs"
|
|
191
|
+
},
|
|
192
|
+
"./popover/tooltip": {
|
|
193
|
+
"types": "./types/rossigee-clarity-angular-popover-tooltip.d.ts",
|
|
194
|
+
"default": "./fesm2022/rossigee-clarity-angular-popover-tooltip.mjs"
|
|
195
|
+
},
|
|
196
|
+
"./progress/progress-bars": {
|
|
197
|
+
"types": "./types/rossigee-clarity-angular-progress-progress-bars.d.ts",
|
|
198
|
+
"default": "./fesm2022/rossigee-clarity-angular-progress-progress-bars.mjs"
|
|
199
|
+
},
|
|
200
|
+
"./progress/spinner": {
|
|
201
|
+
"types": "./types/rossigee-clarity-angular-progress-spinner.d.ts",
|
|
202
|
+
"default": "./fesm2022/rossigee-clarity-angular-progress-spinner.mjs"
|
|
203
|
+
},
|
|
204
|
+
"./stepper": {
|
|
205
|
+
"types": "./types/rossigee-clarity-angular-stepper.d.ts",
|
|
206
|
+
"default": "./fesm2022/rossigee-clarity-angular-stepper.mjs"
|
|
207
|
+
},
|
|
208
|
+
"./timeline": {
|
|
209
|
+
"types": "./types/rossigee-clarity-angular-timeline.d.ts",
|
|
210
|
+
"default": "./fesm2022/rossigee-clarity-angular-timeline.mjs"
|
|
211
|
+
},
|
|
212
|
+
"./utils": {
|
|
213
|
+
"types": "./types/rossigee-clarity-angular-utils.d.ts",
|
|
214
|
+
"default": "./fesm2022/rossigee-clarity-angular-utils.mjs"
|
|
215
|
+
},
|
|
216
|
+
"./utils/conditional": {
|
|
217
|
+
"types": "./types/rossigee-clarity-angular-utils-conditional.d.ts",
|
|
218
|
+
"default": "./fesm2022/rossigee-clarity-angular-utils-conditional.mjs"
|
|
219
|
+
},
|
|
220
|
+
"./utils/loading": {
|
|
221
|
+
"types": "./types/rossigee-clarity-angular-utils-loading.d.ts",
|
|
222
|
+
"default": "./fesm2022/rossigee-clarity-angular-utils-loading.mjs"
|
|
223
|
+
},
|
|
224
|
+
"./wizard": {
|
|
225
|
+
"types": "./types/rossigee-clarity-angular-wizard.d.ts",
|
|
226
|
+
"default": "./fesm2022/rossigee-clarity-angular-wizard.mjs"
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
"sideEffects": false,
|
|
230
|
+
"type": "module",
|
|
231
|
+
"dependencies": {
|
|
232
|
+
"tslib": "^2.3.0"
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# ClrPopover Utilities
|
|
2
|
+
|
|
3
|
+
The `ClrPopover` implementation is a utility infrastructure based on the Angular Overlay and Portals implementation provided in the Angular CDK. It is not a standalone component, but a set of directives and services used to build Clarity overlay components like **Dropdowns**, **Signposts**, and **Tooltips**.
|
|
4
|
+
|
|
5
|
+
## Goal
|
|
6
|
+
|
|
7
|
+
The goal is to provide a straightforward utility within the Clarity library that allows for popover-like elements to use a consistent API. It offloads all positioning, z-indexing, and layering logic to the Angular CDK, which is better equipped to handle complex rendering situations.
|
|
8
|
+
|
|
9
|
+
## Architecture
|
|
10
|
+
|
|
11
|
+
At its most basic, the popover utility is implemented with a set of directives and a service to track, manage, and subscribe to state change events.
|
|
12
|
+
|
|
13
|
+
### Service: `ClrPopoverService`
|
|
14
|
+
|
|
15
|
+
The **`ClrPopoverService`** acts as the central state manager for a specific popover instance. It is **transient** and must be provided at the component level (e.g., inside `ClrDropdown`, `ClrSignpost`, or `ClrTooltip`) to ensure that each popover maintains its own isolated state.
|
|
16
|
+
|
|
17
|
+
The service is responsible for:
|
|
18
|
+
|
|
19
|
+
- **State Management**:
|
|
20
|
+
- **`open`**: A boolean property to get or set the current visibility state of the popover. Setting this triggers the `openChange` observable.
|
|
21
|
+
- **`position`**: Tracks the current `ClrPopoverPosition` (e.g., `bottom-left`), triggering the `getPositionChange()` stream when updated.
|
|
22
|
+
- **`popoverType`**: Defines the type of popover (Tooltip, Signpost, etc.) to determine offset calculations.
|
|
23
|
+
|
|
24
|
+
- **Event Handling**:
|
|
25
|
+
- **`toggleWithEvent(event: any)`**: A helper method used by triggers. It toggles the `open` state, stores the triggering event (to prevent conflicts like "click outside" closing immediately), and prevents default scrolling behavior for arrow keys.
|
|
26
|
+
- **`openEvent`**: Stores the specific browser event that triggered the opening of the popover.
|
|
27
|
+
|
|
28
|
+
- **Focus & Origin Management**:
|
|
29
|
+
- **`origin`**: Holds the `FlexibleConnectedPositionStrategyOrigin` — either an `ElementRef` (trigger element) or a `ClrPopoverPoint` (`{ x, y }` coordinate). This is used by the CDK to calculate where the overlay should appear.
|
|
30
|
+
- **`originElement`**: Convenience getter that returns the origin as `ElementRef<HTMLElement>` when element-based, or `null` when point-based.
|
|
31
|
+
- **`originPoint`**: Convenience getter that returns the origin as `ClrPopoverPoint` when point-based, or `null` when element-based.
|
|
32
|
+
- **`closeButtonRef`**: Holds the `ElementRef` of the internal close button (if applicable).
|
|
33
|
+
- **`focusOrigin()`**: A utility method to return focus to the origin element (e.g., when the menu closes), ensuring accessibility compliance. No-op for point-based origins.
|
|
34
|
+
- **`focusCloseButton()`**: Moves focus to the close button inside the content when appropriate.
|
|
35
|
+
|
|
36
|
+
- **Reactive Streams**:
|
|
37
|
+
- **`openChange`**: Observable that emits whenever the open state changes.
|
|
38
|
+
- **`popoverVisible`**: Observable used to coordinate when the DOM is actually ready/visible.
|
|
39
|
+
- **`getEventChange()`**: Observable stream of the events that triggered state changes.
|
|
40
|
+
|
|
41
|
+
### Directives
|
|
42
|
+
|
|
43
|
+
1. **`[clrPopoverOrigin]`**:
|
|
44
|
+
|
|
45
|
+
- Used on the element that serves as the reference point for positioning.
|
|
46
|
+
- Passes an `ElementRef` to the service as the `origin`, which is used for focus management and positioning calculations.
|
|
47
|
+
|
|
48
|
+
2. **`*clrPopoverContent`**:
|
|
49
|
+
|
|
50
|
+
- A structural directive that renders the view and hoists it to an Overlay on the `body` element using a `DomPortal`.
|
|
51
|
+
- Accepts configuration arguments for the overlay (open state, position, outside click behavior, scroll behavior).
|
|
52
|
+
- Manages "Click Outside" and "Scroll to Close" logic.
|
|
53
|
+
|
|
54
|
+
3. **`[clrPopoverCloseButton]`**:
|
|
55
|
+
|
|
56
|
+
- Should only be used inside popover content containers.
|
|
57
|
+
- Calls the toggle method on the service and restores focus to the origin element.
|
|
58
|
+
|
|
59
|
+
4. **`[clrPopoverOpenCloseButton]`**:
|
|
60
|
+
|
|
61
|
+
- Handles toggling the popover content open and closed via the popover service.
|
|
62
|
+
- Typically used on triggers (e.g., the button that opens a menu).
|
|
63
|
+
|
|
64
|
+
### ClrPopoverContent Inputs
|
|
65
|
+
|
|
66
|
+
The `*clrPopoverContent` directive is the "workhorse" of the utility. It accepts several inputs to configure behavior:
|
|
67
|
+
|
|
68
|
+
- **`clrPopoverContent`** (boolean):
|
|
69
|
+
- Controls the open/closed state of the popover. When true, the overlay is created and attached; when false, it is detached.
|
|
70
|
+
- **`clrPopoverContentAt`** (`ClrPopoverPosition | ConnectedPosition`):
|
|
71
|
+
- Defines the preferred position of the content relative to the origin (e.g., `top-right`, `bottom-left`). It sets the `preferredPosition` for the CDK overlay.
|
|
72
|
+
- **`clrPopoverContentAvailablePositions`** (`ConnectedPosition[]`):
|
|
73
|
+
- A prioritized list of fallback positions the overlay can attempt to use if the preferred position does not fit within the viewport.
|
|
74
|
+
- **`clrPopoverContentType`** (`ClrPopoverType`):
|
|
75
|
+
- Specifies the type of popover (e.g., `DROPDOWN`, `TOOLTIP`, `SIGNPOST`). This determines specific offsets and behavior variations associated with that type.
|
|
76
|
+
- **`clrPopoverContentOutsideClickToClose`** (boolean):
|
|
77
|
+
- Determines if clicking outside the popover content should automatically close it. Defaults to `true`.
|
|
78
|
+
- **`clrPopoverContentScrollToClose`** (boolean):
|
|
79
|
+
- Determines if scrolling the page should automatically close the popover. Defaults to `false`.
|
|
80
|
+
|
|
81
|
+
## Enums
|
|
82
|
+
|
|
83
|
+
1. **`ClrPopoverType`**: Describes the popover variation: `SIGNPOST`, `TOOLTIP`, `DROPDOWN`, and `DEFAULT`.
|
|
84
|
+
2. **`ClrPopoverPosition`**: Describes the popover position relative to the origin (e.g., `top-left`, `bottom-right`).
|
|
85
|
+
3. **`ClrPosition`**: Describes the specific point of contact on both the origin and content elements.
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Usage Example
|
|
90
|
+
|
|
91
|
+
To use the popover utility, a host component must provide the `ClrPopoverService`. Components generally provide a `ClrPopoverPosition` via the `at` input to describe the preferred content position.
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<button class="btn" clrPopoverOpenCloseButton clrPopoverOrigin [attr.aria-owns]="popoverId">
|
|
95
|
+
<cds-icon shape="home"></cds-icon> Popover Origin
|
|
96
|
+
</button>
|
|
97
|
+
<div
|
|
98
|
+
[id]="popoverId"
|
|
99
|
+
role="dialog"
|
|
100
|
+
cdkTrapFocus
|
|
101
|
+
*clrPopoverContent="open;
|
|
102
|
+
at: position; availablePositions: [...]; outsideClickToClose: true; scrollToClose: true"
|
|
103
|
+
>
|
|
104
|
+
<div role="heading">
|
|
105
|
+
Overlay Header
|
|
106
|
+
<button class="btn btn-sm btn-outline-neutral btn-icon" clrPopoverCloseButton>
|
|
107
|
+
<cds-icon shape="times"></cds-icon>
|
|
108
|
+
</button>
|
|
109
|
+
</div>
|
|
110
|
+
<div>Overlay Content</div>
|
|
111
|
+
</div>
|
|
112
|
+
```
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
|
|
3
|
+
"schematics": {
|
|
4
|
+
"ng-update": {
|
|
5
|
+
"version": "18.0.0",
|
|
6
|
+
"description": "Migrates @clr/angular from v17 to v18",
|
|
7
|
+
"factory": "./ng-update/index#migrate"
|
|
8
|
+
},
|
|
9
|
+
"migrate-v18": {
|
|
10
|
+
"description": "Applies automated @clr/angular v17→v18 source migrations (templates, imports, CSS). Run with: ng generate @clr/angular:migrate-v18",
|
|
11
|
+
"factory": "./ng-update/index#migrate"
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import * as i1 from '@clr/angular/icon';
|
|
3
|
+
export * from '@clr/angular/icon';
|
|
4
|
+
import * as i2 from '@clr/angular/emphasis';
|
|
5
|
+
export * from '@clr/angular/emphasis';
|
|
6
|
+
import * as i3 from '@clr/angular/data';
|
|
7
|
+
export * from '@clr/angular/data';
|
|
8
|
+
import * as i4 from '@clr/angular/modal';
|
|
9
|
+
export * from '@clr/angular/modal';
|
|
10
|
+
import * as i5 from '@clr/angular/utils';
|
|
11
|
+
export * from '@clr/angular/utils';
|
|
12
|
+
import * as i6 from '@clr/angular/button';
|
|
13
|
+
export * from '@clr/angular/button';
|
|
14
|
+
import * as i7 from '@clr/angular/forms';
|
|
15
|
+
export * from '@clr/angular/forms';
|
|
16
|
+
import * as i8 from '@clr/angular/layout';
|
|
17
|
+
export * from '@clr/angular/layout';
|
|
18
|
+
import * as i9 from '@clr/angular/popover';
|
|
19
|
+
export * from '@clr/angular/popover';
|
|
20
|
+
import * as i10 from '@clr/angular/wizard';
|
|
21
|
+
export * from '@clr/angular/wizard';
|
|
22
|
+
import * as i11 from '@clr/angular/accordion';
|
|
23
|
+
export * from '@clr/angular/accordion';
|
|
24
|
+
import * as i12 from '@clr/angular/stepper';
|
|
25
|
+
export * from '@clr/angular/stepper';
|
|
26
|
+
import * as i13 from '@clr/angular/progress/spinner';
|
|
27
|
+
export * from '@clr/angular/progress/spinner';
|
|
28
|
+
import * as i14 from '@clr/angular/progress/progress-bars';
|
|
29
|
+
export * from '@clr/angular/progress/progress-bars';
|
|
30
|
+
import * as i15 from '@clr/angular/popover/common';
|
|
31
|
+
import * as i16 from '@clr/angular/timeline';
|
|
32
|
+
export * from '@clr/angular/timeline';
|
|
33
|
+
export * from '@clr/angular/collapsible-panel';
|
|
34
|
+
|
|
35
|
+
declare class ClarityModule {
|
|
36
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ClarityModule, never>;
|
|
37
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ClarityModule, never, [typeof i1.ClrIcon], [typeof i2.ClrEmphasisModule, typeof i3.ClrDataModule, typeof i1.ClrIcon, typeof i1.ClrIconModule, typeof i4.ClrModalModule, typeof i5.ClrLoadingModule, typeof i5.ClrConditionalModule, typeof i5.ClrFocusOnViewInitModule, typeof i6.ClrButtonModule, typeof i7.ClrFormsModule, typeof i8.ClrLayoutModule, typeof i9.ClrPopoverModule, typeof i10.ClrWizardModule, typeof i4.ClrSidePanelModule, typeof i11.ClrAccordionModule, typeof i12.ClrStepperModule, typeof i13.ClrSpinnerModule, typeof i14.ClrProgressBarModule, typeof i15.ClrPopoverModuleNext, typeof i16.ClrTimelineModule]>;
|
|
38
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<ClarityModule>;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export { ClarityModule };
|