@acorex/components 19.10.1 → 19.10.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +22 -20
- package/fesm2022/acorex-components-badge.mjs +2 -2
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +8 -5
- package/fesm2022/acorex-components-kbd.mjs.map +1 -1
- package/fesm2022/acorex-components-time-line.mjs +2 -2
- package/fesm2022/acorex-components-time-line.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +21 -18
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/kbd/lib/kbd-item/kbd-item.component.d.ts +1 -0
- package/package.json +1 -1
- package/tooltip/lib/tooltip.directive.d.ts +2 -1
package/README.md
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
# ACoreX Components
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/acorex-slang-dark.svg">
|
|
8
|
-
<img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/acorex-slang.svg" width="100%">
|
|
9
|
-
</picture>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
12
|
-
<div style="text-align: center;">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/public/acorex-slang-dark.svg">
|
|
4
|
+
<img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/public/acorex-slang-dark.svg" width="100%">
|
|
5
|
+
</picture>
|
|
13
6
|
|
|
14
7
|
[]()
|
|
15
8
|
|
|
16
|
-
|
|
9
|
+
# ACoreX
|
|
10
|
+
|
|
11
|
+
ACoreX is an UI framework based on angular. With over 50+ beautiful fully responsive and accessible components for everyone.
|
|
17
12
|
|
|
18
13
|
A few links to help you get started:
|
|
19
14
|
|
|
20
15
|
- [ACoreX: Documentation, Guides](https://acorexui.com)
|
|
21
16
|
|
|
22
|
-
##
|
|
17
|
+
## Team Leads
|
|
18
|
+
|
|
19
|
+
| Arash Oshnoudi | Ali Safari |
|
|
20
|
+
|--------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
|
|
21
|
+
|  |  |
|
|
22
|
+
|
|
23
|
+
## Develop Team
|
|
24
|
+
|
|
25
|
+
| Reza Safari | Matin Givi | Shahin Kahrizi | Mohammad Parsaeifard | Mojtaba Erfan Rad |
|
|
26
|
+
|-----------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
|
|
27
|
+
|  |  |  |  |  |
|
|
23
28
|
|
|
24
|
-
| Arash Oshnoudi | Ali Safari | Matin Givi | Reza Safari |
|
|
25
|
-
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
-
|  |  |  |  |
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
## Design Team
|
|
29
31
|
|
|
30
|
-
|
|
|
31
|
-
|
|
32
|
-
|  |  |
|
|
@@ -20,11 +20,11 @@ class AXBadgeComponent extends MXColorComponent {
|
|
|
20
20
|
return `ax-${this.color} ${!this.text() ? 'ax-mini-badge' : ''} ${this.text()?.length == 1 ? 'ax-single-badge' : ''}`;
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXBadgeComponent, isStandalone: false, selector: "ax-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-badge{--ax-comp-badge-border-radius: 9999px}ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-lightest-surface)}.ax-dark ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-darkest-surface)}ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-dark-surface)}ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-dark-surface)}ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-dark-surface)}ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-dark-surface)}ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-light-surface)}.ax-dark ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-light-surface)}.ax-dark ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-light-surface)}.ax-dark ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-light-surface)}.ax-dark ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-light-surface)}ax-badge{display:inline-block;border-width:1px;border-color:transparent;font-size:.75rem;max-height:fit-content;color:rgba(var(--ax-comp-badge-text-color));border-radius:var(--ax-comp-badge-border-radius);border-color:rgba(var(--ax-comp-badge-border-color));background-color:rgba(var(--ax-comp-badge-bg-color))}ax-badge.ax-mini-badge{min-height:.5rem;width:.5rem}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{display:flex;min-height:1.25rem;width:1.25rem;align-items:center;justify-content:center}ax-badge.ax-single-badge .ax-badge-text{padding:0}ax-badge .ax-badge-text{white-space:nowrap;word-break:break-all;padding:.25rem .375rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXBadgeComponent, isStandalone: false, selector: "ax-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-badge{--ax-comp-badge-border-radius: 9999px}ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-lightest-surface)}.ax-dark ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-darkest-surface)}ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-dark-surface)}ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-dark-surface)}ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-dark-surface)}ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-dark-surface)}ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-light-surface)}.ax-dark ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-light-surface)}.ax-dark ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-light-surface)}.ax-dark ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-light-surface)}.ax-dark ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-light-surface)}ax-badge{display:inline-block;border-width:1px;border-color:transparent;font-size:.75rem;max-height:fit-content;line-height:1;color:rgba(var(--ax-comp-badge-text-color));border-radius:var(--ax-comp-badge-border-radius);border-color:rgba(var(--ax-comp-badge-border-color));background-color:rgba(var(--ax-comp-badge-bg-color))}ax-badge.ax-mini-badge{min-height:.5rem;width:.5rem}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{display:flex;min-height:1.25rem;width:1.25rem;align-items:center;justify-content:center}ax-badge.ax-single-badge .ax-badge-text{padding:0}ax-badge .ax-badge-text{display:inline-block;white-space:nowrap;word-break:break-all;padding:.25rem .375rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXBadgeComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'ax-badge', inputs: ['color', 'look'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-badge{--ax-comp-badge-border-radius: 9999px}ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-lightest-surface)}.ax-dark ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-darkest-surface)}ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-dark-surface)}ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-dark-surface)}ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-dark-surface)}ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-dark-surface)}ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-light-surface)}.ax-dark ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-light-surface)}.ax-dark ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-light-surface)}.ax-dark ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-light-surface)}.ax-dark ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-light-surface)}ax-badge{display:inline-block;border-width:1px;border-color:transparent;font-size:.75rem;max-height:fit-content;color:rgba(var(--ax-comp-badge-text-color));border-radius:var(--ax-comp-badge-border-radius);border-color:rgba(var(--ax-comp-badge-border-color));background-color:rgba(var(--ax-comp-badge-bg-color))}ax-badge.ax-mini-badge{min-height:.5rem;width:.5rem}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{display:flex;min-height:1.25rem;width:1.25rem;align-items:center;justify-content:center}ax-badge.ax-single-badge .ax-badge-text{padding:0}ax-badge .ax-badge-text{white-space:nowrap;word-break:break-all;padding:.25rem .375rem}\n"] }]
|
|
27
|
+
args: [{ selector: 'ax-badge', inputs: ['color', 'look'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-badge{--ax-comp-badge-border-radius: 9999px}ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-lightest-surface)}.ax-dark ax-badge.ax-default{--ax-comp-badge-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-badge-border-color: var(--ax-sys-color-border-darkest-surface)}ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-dark-surface)}ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-dark-surface)}ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-dark-surface)}ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-dark-surface)}ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-badge-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-dark-surface)}.ax-dark ax-badge.ax-primary{--ax-comp-badge-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-primary-light-surface)}.ax-dark ax-badge.ax-secondary{--ax-comp-badge-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-secondary-light-surface)}.ax-dark ax-badge.ax-success{--ax-comp-badge-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-success-light-surface)}.ax-dark ax-badge.ax-warning{--ax-comp-badge-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-warning-light-surface)}.ax-dark ax-badge.ax-danger{--ax-comp-badge-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-badge-border-color: var(--ax-sys-color-danger-light-surface)}ax-badge{display:inline-block;border-width:1px;border-color:transparent;font-size:.75rem;max-height:fit-content;line-height:1;color:rgba(var(--ax-comp-badge-text-color));border-radius:var(--ax-comp-badge-border-radius);border-color:rgba(var(--ax-comp-badge-border-color));background-color:rgba(var(--ax-comp-badge-bg-color))}ax-badge.ax-mini-badge{min-height:.5rem;width:.5rem}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{display:flex;min-height:1.25rem;width:1.25rem;align-items:center;justify-content:center}ax-badge.ax-single-badge .ax-badge-text{padding:0}ax-badge .ax-badge-text{display:inline-block;white-space:nowrap;word-break:break-all;padding:.25rem .375rem}\n"] }]
|
|
28
28
|
}], propDecorators: { __hostClass: [{
|
|
29
29
|
type: HostBinding,
|
|
30
30
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-badge.mjs","sources":["../../../../libs/components/badge/src/lib/badge.component.ts","../../../../libs/components/badge/src/lib/badge.component.html","../../../../libs/components/badge/src/lib/badge.module.ts","../../../../libs/components/badge/src/acorex-components-badge.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n inputs: ['color', 'look'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXBadgeComponent extends MXColorComponent {\n /**\n * Defines the text displayed inside the badge.\n *\n * @defaultValue ''\n */\n text = input<string>('');\n\n /**\n * @ignore\n */\n @HostBinding('class')\n private get __hostClass(): string {\n return `ax-${this.color} ${!this.text() ? 'ax-mini-badge' : ''} ${this.text()?.length == 1 ? 'ax-single-badge' : ''}`;\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXBadgeComponent } from './badge.component';\n\n@NgModule({\n declarations: [AXBadgeComponent],\n imports: [CommonModule],\n exports: [AXBadgeComponent],\n providers: [],\n})\nexport class AXBadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAYM,MAAO,gBAAiB,SAAQ,gBAAgB,CAAA;AATtD,IAAA,WAAA,GAAA;;AAUE;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AASzB;AAPC;;AAEG;AACH,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,OAAO,MAAM,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,IAAI,CAAC,GAAG,iBAAiB,GAAG,EAAE,EAAE;;8GAb5G,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,mgBCZ7B,wKAKA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"acorex-components-badge.mjs","sources":["../../../../libs/components/badge/src/lib/badge.component.ts","../../../../libs/components/badge/src/lib/badge.component.html","../../../../libs/components/badge/src/lib/badge.module.ts","../../../../libs/components/badge/src/acorex-components-badge.ts"],"sourcesContent":["import { MXColorComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n inputs: ['color', 'look'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXBadgeComponent extends MXColorComponent {\n /**\n * Defines the text displayed inside the badge.\n *\n * @defaultValue ''\n */\n text = input<string>('');\n\n /**\n * @ignore\n */\n @HostBinding('class')\n private get __hostClass(): string {\n return `ax-${this.color} ${!this.text() ? 'ax-mini-badge' : ''} ${this.text()?.length == 1 ? 'ax-single-badge' : ''}`;\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n@if (text) {\n <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXBadgeComponent } from './badge.component';\n\n@NgModule({\n declarations: [AXBadgeComponent],\n imports: [CommonModule],\n exports: [AXBadgeComponent],\n providers: [],\n})\nexport class AXBadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAYM,MAAO,gBAAiB,SAAQ,gBAAgB,CAAA;AATtD,IAAA,WAAA,GAAA;;AAUE;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AASzB;AAPC;;AAEG;AACH,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,OAAO,MAAM,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,IAAI,CAAC,GAAG,iBAAiB,GAAG,EAAE,EAAE;;8GAb5G,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,mgBCZ7B,wKAKA,EAAA,MAAA,EAAA,CAAA,woGAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDOa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGZ,MAAA,EAAA,CAAC,OAAO,EAAE,MAAM,CAAC,EAAA,aAAA,EACV,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,cACnC,KAAK,EAAA,QAAA,EAAA,wKAAA,EAAA,MAAA,EAAA,CAAA,woGAAA,CAAA,EAAA;8BAcL,WAAW,EAAA,CAAA;sBADtB,WAAW;uBAAC,OAAO;;;MEbT,aAAa,CAAA;8GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAb,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,EALT,YAAA,EAAA,CAAA,gBAAgB,CACrB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAGf,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,YAJd,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAIX,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;oBAChC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACTD;;AAEG;;;;"}
|
|
@@ -5,14 +5,17 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
class AXKBDItemComponent {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.keys = input();
|
|
8
|
-
this.modifierKeys = signal(['
|
|
8
|
+
this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc']);
|
|
9
|
+
}
|
|
10
|
+
capitalizeFirstLetter(text) {
|
|
11
|
+
return text.charAt(0).toUpperCase() + text.slice(1);
|
|
9
12
|
}
|
|
10
13
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXKBDItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXKBDItemComponent, isStandalone: false, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n <kbd>{{ keys() }}</kbd>\n} @else {\n @for (key of keys(); track $index; let last = $last) {\n <kbd>{{ key }}</kbd>\n @if (
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXKBDItemComponent, isStandalone: false, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n <kbd>{{ keys() }}</kbd>\n} @else {\n @for (key of keys(); track $index; let last = $last) {\n @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n <span>+</span>\n }\n }\n @for (key of keys(); track $index; let last = $last) {\n @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n }\n }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12
15
|
}
|
|
13
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXKBDItemComponent, decorators: [{
|
|
14
17
|
type: Component,
|
|
15
|
-
args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (typeof keys() === 'string') {\n <kbd>{{ keys() }}</kbd>\n} @else {\n @for (key of keys(); track $index; let last = $last) {\n <kbd>{{ key }}</kbd>\n @if (
|
|
18
|
+
args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (typeof keys() === 'string') {\n <kbd>{{ keys() }}</kbd>\n} @else {\n @for (key of keys(); track $index; let last = $last) {\n @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n <span>+</span>\n }\n }\n @for (key of keys(); track $index; let last = $last) {\n @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n }\n }\n}\n" }]
|
|
16
19
|
}] });
|
|
17
20
|
|
|
18
21
|
class AXKBDComponent {
|
|
@@ -23,11 +26,11 @@ class AXKBDComponent {
|
|
|
23
26
|
return `ax-${this.look()}`;
|
|
24
27
|
}
|
|
25
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXKBDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AXKBDComponent, isStandalone: false, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AXKBDComponent, isStandalone: false, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
27
30
|
}
|
|
28
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXKBDComponent, decorators: [{
|
|
29
32
|
type: Component,
|
|
30
|
-
args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{
|
|
33
|
+
args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"] }]
|
|
31
34
|
}], propDecorators: { __hostClass: [{
|
|
32
35
|
type: HostBinding,
|
|
33
36
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-kbd.mjs","sources":["../../../../libs/components/kbd/src/lib/kbd-item/kbd-item.component.ts","../../../../libs/components/kbd/src/lib/kbd-item/kbd-item.component.html","../../../../libs/components/kbd/src/lib/kbd.component.ts","../../../../libs/components/kbd/src/lib/kbd.component.html","../../../../libs/components/kbd/src/lib/kbd.module.ts","../../../../libs/components/kbd/src/acorex-components-kbd.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-kbd-item',\n templateUrl: './kbd-item.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXKBDItemComponent {\n keys = input<string[] | string>();\n\n modifierKeys = signal(['
|
|
1
|
+
{"version":3,"file":"acorex-components-kbd.mjs","sources":["../../../../libs/components/kbd/src/lib/kbd-item/kbd-item.component.ts","../../../../libs/components/kbd/src/lib/kbd-item/kbd-item.component.html","../../../../libs/components/kbd/src/lib/kbd.component.ts","../../../../libs/components/kbd/src/lib/kbd.component.html","../../../../libs/components/kbd/src/lib/kbd.module.ts","../../../../libs/components/kbd/src/acorex-components-kbd.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-kbd-item',\n templateUrl: './kbd-item.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXKBDItemComponent {\n keys = input<string[] | string>();\n\n modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc']);\n\n capitalizeFirstLetter(text: string) {\n return text.charAt(0).toUpperCase() + text.slice(1);\n }\n}\n","@if (typeof keys() === 'string') {\n <kbd>{{ keys() }}</kbd>\n} @else {\n @for (key of keys(); track $index; let last = $last) {\n @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n <span>+</span>\n }\n }\n @for (key of keys(); track $index; let last = $last) {\n @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n }\n }\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-kbd',\n templateUrl: './kbd.component.html',\n styleUrls: ['./kbd.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXKBDComponent {\n look = input<'solid' | 'outline' | 'blank'>('outline');\n\n @HostBinding('class')\n private get __hostClass(): string {\n return `ax-${this.look()}`;\n }\n}\n","<ng-content select=\"ax-kbd-item\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXKBDItemComponent } from './kbd-item/kbd-item.component';\nimport { AXKBDComponent } from './kbd.component';\n\n@NgModule({\n declarations: [AXKBDComponent, AXKBDItemComponent],\n imports: [CommonModule],\n exports: [AXKBDComponent, AXKBDItemComponent],\n providers: [],\n})\nexport class AXKBDModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -48,7 +48,7 @@ class AXTimeLineItemComponent {
|
|
|
48
48
|
return [`ax-mode-${this.mode()}`, `${this.isActive() ? 'ax-state-active' : ''}`];
|
|
49
49
|
}
|
|
50
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXTimeLineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXTimeLineItemComponent, isStandalone: false, selector: "ax-time-line-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n", styles: ["ax-time-line{--ax-comp-time-line-active-bg-color: var(--ax-sys-color-primary-
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXTimeLineItemComponent, isStandalone: false, selector: "ax-time-line-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n", styles: ["ax-time-line{--ax-comp-time-line-deactivate-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-time-line-bullet-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-time-line-active-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-time-line-active-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-time-line-icon-bg-color: var(--ax-sys-color-surface);--ax-comp-time-line-icon-text-color: var(--ax-sys-color-on-surface)}.ax-dark ax-time-line{--ax-comp-time-line-deactivate-bg-color: var(--ax-sys-color-lightest-surface)}ax-time-line-item{position:relative;display:flex;flex-direction:column;gap:.75rem}ax-time-line-item.ax-mode-icon{padding-inline-start:3rem}ax-time-line-item.ax-mode-bullet{padding-inline-start:1.75rem}ax-time-line-item.ax-state-active .ax-time-line-bullet{background-color:rgba(var(--ax-comp-time-line-bullet-active-bg-color))!important}ax-time-line-item.ax-state-active .ax-time-line-icon{background-color:rgba(var(--ax-comp-time-line-active-bg-color))!important;color:rgba(var(--ax-comp-time-line-active-text-color))!important}ax-time-line-item .ax-time-line-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}ax-time-line-item .ax-time-line-header .ax-time-line-bullet,ax-time-line-item .ax-time-line-header .ax-time-line-icon{position:absolute;border-radius:999rem}ax-time-line-item .ax-time-line-header .ax-time-line-bullet{width:.75rem;height:.75rem;inset-inline-start:.5rem;background-color:rgba(var(--ax-comp-time-line-deactivate-bg-color))}ax-time-line-item .ax-time-line-header .ax-time-line-icon{width:2.5rem;height:2.5rem;inset-inline-start:-.25rem;display:flex;align-items:center;justify-content:center;background-color:rgba(var(--ax-comp-time-line-icon-bg-color));color:rgba(var(--ax-comp-time-line-icon-text-color))}ax-time-line-item .ax-time-line-header .ax-time-line-text{flex:1}ax-time-line-item .ax-time-line-header .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-time-line-item .ax-time-line-header .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-time-line-item .ax-time-line-header .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
52
52
|
trigger('collapse', [
|
|
53
53
|
state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
|
|
54
54
|
state('true', style({ height: '0', visibility: 'hidden' })),
|
|
@@ -66,7 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
66
66
|
transition('false => true', animate(150 + 'ms ease-in')),
|
|
67
67
|
transition('true => false', animate(150 + 'ms ease-out')),
|
|
68
68
|
]),
|
|
69
|
-
], standalone: false, template: "<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n", styles: ["ax-time-line{--ax-comp-time-line-active-bg-color: var(--ax-sys-color-primary-
|
|
69
|
+
], standalone: false, template: "<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n", styles: ["ax-time-line{--ax-comp-time-line-deactivate-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-time-line-bullet-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-time-line-active-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-time-line-active-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-time-line-icon-bg-color: var(--ax-sys-color-surface);--ax-comp-time-line-icon-text-color: var(--ax-sys-color-on-surface)}.ax-dark ax-time-line{--ax-comp-time-line-deactivate-bg-color: var(--ax-sys-color-lightest-surface)}ax-time-line-item{position:relative;display:flex;flex-direction:column;gap:.75rem}ax-time-line-item.ax-mode-icon{padding-inline-start:3rem}ax-time-line-item.ax-mode-bullet{padding-inline-start:1.75rem}ax-time-line-item.ax-state-active .ax-time-line-bullet{background-color:rgba(var(--ax-comp-time-line-bullet-active-bg-color))!important}ax-time-line-item.ax-state-active .ax-time-line-icon{background-color:rgba(var(--ax-comp-time-line-active-bg-color))!important;color:rgba(var(--ax-comp-time-line-active-text-color))!important}ax-time-line-item .ax-time-line-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}ax-time-line-item .ax-time-line-header .ax-time-line-bullet,ax-time-line-item .ax-time-line-header .ax-time-line-icon{position:absolute;border-radius:999rem}ax-time-line-item .ax-time-line-header .ax-time-line-bullet{width:.75rem;height:.75rem;inset-inline-start:.5rem;background-color:rgba(var(--ax-comp-time-line-deactivate-bg-color))}ax-time-line-item .ax-time-line-header .ax-time-line-icon{width:2.5rem;height:2.5rem;inset-inline-start:-.25rem;display:flex;align-items:center;justify-content:center;background-color:rgba(var(--ax-comp-time-line-icon-bg-color));color:rgba(var(--ax-comp-time-line-icon-text-color))}ax-time-line-item .ax-time-line-header .ax-time-line-text{flex:1}ax-time-line-item .ax-time-line-header .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-time-line-item .ax-time-line-header .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-time-line-item .ax-time-line-header .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}\n"] }]
|
|
70
70
|
}], ctorParameters: () => [], propDecorators: { __hostClass: [{
|
|
71
71
|
type: HostBinding,
|
|
72
72
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-time-line.mjs","sources":["../../../../libs/components/time-line/src/lib/time-line.component.ts","../../../../libs/components/time-line/src/lib/time-line.component.html","../../../../libs/components/time-line/src/lib/time-line-item.component.ts","../../../../libs/components/time-line/src/lib/time-line-item.component.html","../../../../libs/components/time-line/src/lib/time-line.module.ts","../../../../libs/components/time-line/src/acorex-components-time-line.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, input, signal, ViewEncapsulation } from '@angular/core';\n\nexport type AXTimeLineMode = 'icon' | 'bullet';\n\n@Component({\n selector: 'ax-time-line',\n templateUrl: './time-line.component.html',\n styleUrl: './time-line.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXTimeLineComponent {\n mode = input<AXTimeLineMode>('bullet');\n containerStyle = signal<string>('gap: 1rem;padding-block: 0.5rem;');\n #modeChange = effect(() => {\n switch (this.mode()) {\n case 'bullet':\n this.containerStyle.set('gap: 1rem;padding-block: 0.5rem;');\n break;\n case 'icon':\n this.containerStyle.set('gap: 2rem;padding-block: 1rem;');\n break;\n\n default:\n break;\n }\n });\n}\n","<div class=\"ax-time-line-item-container\" [style]=\"containerStyle()\">\n <ng-content></ng-content>\n</div>\n","import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n HostBinding,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXTimeLineComponent, AXTimeLineMode } from './time-line.component';\n\n@Component({\n selector: 'ax-time-line-item',\n templateUrl: './time-line-item.component.html',\n styleUrl: './time-line-item.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('collapse', [\n state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),\n state('true', style({ height: '0', visibility: 'hidden' })),\n transition('false => true', animate(150 + 'ms ease-in')),\n transition('true => false', animate(150 + 'ms ease-out')),\n ]),\n ],\n standalone: false,\n})\nexport class AXTimeLineItemComponent {\n parent = inject(AXTimeLineComponent);\n\n text = input('');\n\n isActive = input(false);\n isCollapsed = model(false);\n\n mode = signal<AXTimeLineMode>('bullet');\n\n constructor() {\n effect(() => {\n this.mode.set(this.parent.mode());\n });\n }\n\n handleClick() {\n this.isCollapsed.set(!this.isCollapsed());\n }\n\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`ax-mode-${this.mode()}`, `${this.isActive() ? 'ax-state-active' : ''}`];\n }\n}\n","<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTimeLineItemComponent } from './time-line-item.component';\nimport { AXTimeLineComponent } from './time-line.component';\n\n@NgModule({\n declarations: [AXTimeLineComponent, AXTimeLineItemComponent],\n imports: [CommonModule],\n exports: [AXTimeLineComponent, AXTimeLineItemComponent],\n})\nexport class AXTimeLineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"acorex-components-time-line.mjs","sources":["../../../../libs/components/time-line/src/lib/time-line.component.ts","../../../../libs/components/time-line/src/lib/time-line.component.html","../../../../libs/components/time-line/src/lib/time-line-item.component.ts","../../../../libs/components/time-line/src/lib/time-line-item.component.html","../../../../libs/components/time-line/src/lib/time-line.module.ts","../../../../libs/components/time-line/src/acorex-components-time-line.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, input, signal, ViewEncapsulation } from '@angular/core';\n\nexport type AXTimeLineMode = 'icon' | 'bullet';\n\n@Component({\n selector: 'ax-time-line',\n templateUrl: './time-line.component.html',\n styleUrl: './time-line.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXTimeLineComponent {\n mode = input<AXTimeLineMode>('bullet');\n containerStyle = signal<string>('gap: 1rem;padding-block: 0.5rem;');\n #modeChange = effect(() => {\n switch (this.mode()) {\n case 'bullet':\n this.containerStyle.set('gap: 1rem;padding-block: 0.5rem;');\n break;\n case 'icon':\n this.containerStyle.set('gap: 2rem;padding-block: 1rem;');\n break;\n\n default:\n break;\n }\n });\n}\n","<div class=\"ax-time-line-item-container\" [style]=\"containerStyle()\">\n <ng-content></ng-content>\n</div>\n","import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n HostBinding,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXTimeLineComponent, AXTimeLineMode } from './time-line.component';\n\n@Component({\n selector: 'ax-time-line-item',\n templateUrl: './time-line-item.component.html',\n styleUrl: './time-line-item.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('collapse', [\n state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),\n state('true', style({ height: '0', visibility: 'hidden' })),\n transition('false => true', animate(150 + 'ms ease-in')),\n transition('true => false', animate(150 + 'ms ease-out')),\n ]),\n ],\n standalone: false,\n})\nexport class AXTimeLineItemComponent {\n parent = inject(AXTimeLineComponent);\n\n text = input('');\n\n isActive = input(false);\n isCollapsed = model(false);\n\n mode = signal<AXTimeLineMode>('bullet');\n\n constructor() {\n effect(() => {\n this.mode.set(this.parent.mode());\n });\n }\n\n handleClick() {\n this.isCollapsed.set(!this.isCollapsed());\n }\n\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`ax-mode-${this.mode()}`, `${this.isActive() ? 'ax-state-active' : ''}`];\n }\n}\n","<div class=\"ax-time-line-header\" (click)=\"handleClick()\">\n @switch (mode()) {\n @case ('bullet') {\n <span class=\"ax-time-line-bullet\"></span>\n }\n @case ('icon') {\n <span class=\"ax-time-line-icon\">\n <ng-content select=\"ax-icon\"></ng-content>\n </span>\n }\n }\n <span class=\"ax-time-line-text\">{{ text() }}</span>\n <span\n class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n ></span>\n</div>\n<div class=\"ax-time-line-content\" [@collapse]=\"isCollapsed()\"><ng-content></ng-content></div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTimeLineItemComponent } from './time-line-item.component';\nimport { AXTimeLineComponent } from './time-line.component';\n\n@NgModule({\n declarations: [AXTimeLineComponent, AXTimeLineItemComponent],\n imports: [CommonModule],\n exports: [AXTimeLineComponent, AXTimeLineItemComponent],\n})\nexport class AXTimeLineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MXBaseComponent, convertToPlacement } from '@acorex/components/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Input, ViewEncapsulation, Component, TemplateRef, Directive, NgModule } from '@angular/core';
|
|
3
|
+
import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, NgZone, TemplateRef, Directive, NgModule } from '@angular/core';
|
|
4
4
|
import { AXPopoverComponent } from '@acorex/components/popover';
|
|
5
5
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
@@ -11,11 +11,11 @@ import { CommonModule } from '@angular/common';
|
|
|
11
11
|
*/
|
|
12
12
|
class AXTooltipComponent extends MXBaseComponent {
|
|
13
13
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXTooltipComponent, isStandalone: false, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-darkest-surface)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-lightest-surface)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXTooltipComponent, isStandalone: false, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-darkest-surface)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-lightest-surface)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXTooltipComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-darkest-surface)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-lightest-surface)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"] }]
|
|
18
|
+
args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-darkest-surface)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tooltip-text-color: var(--ax-sys-color-on-lightest-surface)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"] }]
|
|
19
19
|
}], propDecorators: { text: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}], position: [{
|
|
@@ -53,6 +53,7 @@ class AXTooltipDirective {
|
|
|
53
53
|
constructor(elementRef, vc) {
|
|
54
54
|
this.elementRef = elementRef;
|
|
55
55
|
this.vc = vc;
|
|
56
|
+
this.ngzone = inject(NgZone);
|
|
56
57
|
this._placement = convertToPlacement('top');
|
|
57
58
|
this._openAfter = 100;
|
|
58
59
|
this._closeAfter = 100;
|
|
@@ -60,20 +61,22 @@ class AXTooltipDirective {
|
|
|
60
61
|
this.popupRef.target = this.elementRef.nativeElement;
|
|
61
62
|
}
|
|
62
63
|
ngOnInit() {
|
|
63
|
-
this.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
this.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
this.
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
this.ngzone.runOutsideAngular(() => {
|
|
65
|
+
this.popupRef.target = this.elementRef.nativeElement;
|
|
66
|
+
this.popupRef.openOn = 'hover';
|
|
67
|
+
this.popupRef.closeOn = 'leave';
|
|
68
|
+
this.popupRef.placement = this.placement;
|
|
69
|
+
this.popupRef.openAfter = this.openAfter;
|
|
70
|
+
this.popupRef.closeAfter = this.closeAfter;
|
|
71
|
+
if (typeof this.content === 'string') {
|
|
72
|
+
this.popupRef.content = AXTooltipComponent;
|
|
73
|
+
this.popupRef.context = { text: this.content };
|
|
74
|
+
}
|
|
75
|
+
else if (this.content instanceof TemplateRef) {
|
|
76
|
+
this.popupRef.content = this.content;
|
|
77
|
+
//this.popupRef.context = { text: this.content };
|
|
78
|
+
}
|
|
79
|
+
});
|
|
77
80
|
}
|
|
78
81
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
82
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AXTooltipDirective, isStandalone: false, selector: "[axTooltip]", inputs: { content: ["axTooltip", "content"], placement: ["axTooltipPlacement", "placement"], openAfter: ["axTooltipOpenAfter", "openAfter"], closeAfter: ["axTooltipCloseAfter", "closeAfter"] }, ngImport: i0 }); }
|
|
@@ -82,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
82
85
|
type: Directive,
|
|
83
86
|
args: [{
|
|
84
87
|
selector: '[axTooltip]',
|
|
85
|
-
standalone: false
|
|
88
|
+
standalone: false,
|
|
86
89
|
}]
|
|
87
90
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { content: [{
|
|
88
91
|
type: Input,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../libs/components/tooltip/src/lib/tooltip.component.ts","../../../../libs/components/tooltip/src/lib/tooltip.component.html","../../../../libs/components/tooltip/src/lib/tooltip.directive.ts","../../../../libs/components/tooltip/src/lib/tooltip.module.ts","../../../../libs/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXPlacement, MXBaseComponent } from '@acorex/components/common';\nimport { Component, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A component for displaying tooltips with additional information or context when hovering over elements.\n * @category Components\n */\n@Component({\n
|
|
1
|
+
{"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../libs/components/tooltip/src/lib/tooltip.component.ts","../../../../libs/components/tooltip/src/lib/tooltip.component.html","../../../../libs/components/tooltip/src/lib/tooltip.directive.ts","../../../../libs/components/tooltip/src/lib/tooltip.module.ts","../../../../libs/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXPlacement, MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A component for displaying tooltips with additional information or context when hovering over elements.\n * @category Components\n */\n@Component({\n selector: 'ax-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class AXTooltipComponent extends MXBaseComponent {\n /**\n * The text content displayed in the tooltip.\n * @defaultValue 'string'\n */\n @Input()\n text: string;\n\n /**\n * Specifies the position of the tooltip relative to the target element.\n *\n * @type {AXPlacement}\n */\n @Input()\n position: AXPlacement;\n}\n","<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>","import { AXPlacementType, convertToPlacement } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport { Directive, ElementRef, inject, Input, NgZone, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\n\n@Directive({\n selector: '[axTooltip]',\n standalone: false,\n})\nexport class AXTooltipDirective implements OnInit {\n @Input('axTooltip')\n public content: string | TemplateRef<unknown>;\n ngzone = inject(NgZone);\n\n private _placement: AXPlacementType = convertToPlacement('top');\n @Input('axTooltipPlacement')\n public get placement(): AXPlacementType {\n return this._placement;\n }\n public set placement(v: AXPlacementType) {\n this._placement = v;\n if (this.popupRef) {\n this.popupRef.placement = v;\n }\n }\n\n private _openAfter = 100;\n @Input('axTooltipOpenAfter')\n public get openAfter(): number {\n return this._openAfter;\n }\n public set openAfter(v: number) {\n this._openAfter = v;\n if (this.popupRef) {\n this.popupRef.openAfter = v;\n }\n }\n\n private _closeAfter = 100;\n @Input('axTooltipCloseAfter')\n public get closeAfter(): number {\n return this._closeAfter;\n }\n public set closeAfter(v: number) {\n this._closeAfter = v;\n if (this.popupRef) {\n this.popupRef.closeAfter = v;\n }\n }\n\n private popupRef: AXPopoverComponent;\n\n constructor(\n private elementRef: ElementRef,\n private vc: ViewContainerRef,\n ) {\n this.popupRef = this.vc.createComponent(AXPopoverComponent).instance;\n this.popupRef.target = this.elementRef.nativeElement;\n }\n\n ngOnInit(): void {\n this.ngzone.runOutsideAngular(() => {\n this.popupRef.target = this.elementRef.nativeElement;\n this.popupRef.openOn = 'hover';\n this.popupRef.closeOn = 'leave';\n this.popupRef.placement = this.placement;\n this.popupRef.openAfter = this.openAfter;\n this.popupRef.closeAfter = this.closeAfter;\n if (typeof this.content === 'string') {\n this.popupRef.content = AXTooltipComponent;\n this.popupRef.context = { text: this.content };\n } else if (this.content instanceof TemplateRef) {\n this.popupRef.content = this.content;\n //this.popupRef.context = { text: this.content };\n }\n });\n }\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXTooltipDirective } from './tooltip.directive';\n\nconst COMPONENT = [AXTooltipComponent, AXTooltipDirective];\nconst MODULES = [CommonModule, OverlayModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n})\nexport class AXTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
export declare class AXKBDItemComponent {
|
|
3
3
|
keys: import("@angular/core").InputSignal<string | string[]>;
|
|
4
4
|
modifierKeys: import("@angular/core").WritableSignal<string[]>;
|
|
5
|
+
capitalizeFirstLetter(text: string): string;
|
|
5
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXKBDItemComponent, never>;
|
|
6
7
|
static ɵcmp: i0.ɵɵComponentDeclaration<AXKBDItemComponent, "ax-kbd-item", never, { "keys": { "alias": "keys"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
|
|
7
8
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { AXPlacementType } from '@acorex/components/common';
|
|
2
|
-
import { ElementRef, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
2
|
+
import { ElementRef, NgZone, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class AXTooltipDirective implements OnInit {
|
|
5
5
|
private elementRef;
|
|
6
6
|
private vc;
|
|
7
7
|
content: string | TemplateRef<unknown>;
|
|
8
|
+
ngzone: NgZone;
|
|
8
9
|
private _placement;
|
|
9
10
|
get placement(): AXPlacementType;
|
|
10
11
|
set placement(v: AXPlacementType);
|