@hichchi/ngx-ui 0.0.1-alpha.1 → 0.0.2
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/fesm2022/hichchi-ngx-ui.mjs +18 -18
- package/fesm2022/hichchi-ngx-ui.mjs.map +1 -1
- package/package.json +5 -5
- package/types/hichchi-ngx-ui.d.ts +216 -0
- package/index.d.ts +0 -1
- package/lib/components/button/button.component.d.ts +0 -93
- package/lib/components/hc-card/hc-card.component.d.ts +0 -53
- package/lib/components/hc-separator/hc-separator.component.d.ts +0 -66
- package/lib/components/index.d.ts +0 -3
- package/lib/types/index.d.ts +0 -1
- package/lib/types/types.d.ts +0 -2
|
@@ -51,7 +51,7 @@ class ButtonComponent {
|
|
|
51
51
|
*
|
|
52
52
|
* @default "primary"
|
|
53
53
|
*/
|
|
54
|
-
color = input("primary");
|
|
54
|
+
color = input("primary", ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
55
55
|
/**
|
|
56
56
|
* Additional CSS classes to apply to the button
|
|
57
57
|
*
|
|
@@ -60,7 +60,7 @@ class ButtonComponent {
|
|
|
60
60
|
*
|
|
61
61
|
* @default ""
|
|
62
62
|
*/
|
|
63
|
-
class = input("");
|
|
63
|
+
class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
64
64
|
/**
|
|
65
65
|
* The HTML button type attribute
|
|
66
66
|
*
|
|
@@ -71,7 +71,7 @@ class ButtonComponent {
|
|
|
71
71
|
*
|
|
72
72
|
* @default "submit"
|
|
73
73
|
*/
|
|
74
|
-
type = input("submit");
|
|
74
|
+
type = input("submit", ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
75
75
|
/**
|
|
76
76
|
* Event emitted when the button is clicked
|
|
77
77
|
*
|
|
@@ -89,13 +89,13 @@ class ButtonComponent {
|
|
|
89
89
|
*/
|
|
90
90
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
91
91
|
onClick = output();
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
92
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ButtonComponent, isStandalone: true, selector: "hc-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [type]=\"type()\" class=\"hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.hc-button{appearance:none;border:0;position:relative;overflow:hidden;box-shadow:var(--shadow-md);border-radius:.75rem;font-weight:600;font-size:.9rem;line-height:1.2;padding:.65rem 1rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.hc-button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.hc-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.hc-button:hover:before{left:100%}.hc-button:active{transform:translateY(0)}.hc-button:focus-visible{outline:2px solid rgba(59,130,246,.7);outline-offset:2px}.hc-button:disabled{cursor:not-allowed;opacity:.7;box-shadow:var(--shadow-sm)}.hc-button-primary{background:var(--primary-gradient);color:#fff}.hc-button-primary:hover,.hc-button-primary:active{color:#fff}.hc-button-secondary{background:var(--secondary-gradient);color:#fff}.hc-button-secondary:hover,.hc-button-secondary:active{color:#fff}.hc-button-success{background:var(--success-gradient);color:#fff}.hc-button-success:hover,.hc-button-success:active{color:#fff}.hc-button-warning{background:var(--warning-gradient);color:#fff}.hc-button-warning:hover,.hc-button-warning:active{color:#fff}.hc-button-danger{background:var(--danger-gradient);color:#fff}.hc-button-danger:hover,.hc-button-danger:active{color:#fff}.hc-button-info{background:var(--info-gradient);color:#fff}.hc-button-info:hover,.hc-button-info:active{color:#fff}.hc-button-light{background:var(--light-gradient);color:var(--text-color)}.hc-button-light:hover,.hc-button-light:active{color:var(--text-color)}.hc-button-dark{background:var(--dark-gradient);color:#fff}.hc-button-dark:hover,.hc-button-dark:active{color:#fff}.hc-button-white{background-color:#fff;border:1px solid var(--border-color);color:var(--text-color)}.hc-button-white:hover,.hc-button-white:active{color:var(--text-color)}\n"] });
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
|
-
args: [{ selector: "hc-button", imports: [], template: "<button [type]=\"type()\" class=\"
|
|
98
|
-
}] });
|
|
97
|
+
args: [{ selector: "hc-button", imports: [], template: "<button [type]=\"type()\" class=\"hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [":root{--primary-color: #3b82f6;--primary-hover-color: #2563eb;--primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--primary-border-color: #2563eb;--secondary-color: #8b5cf6;--secondary-hover-color: #7c3aed;--secondary-gradient: linear-gradient(135deg, #667eea 0%, #6d28d9 100%);--secondary-border-color: #7c3aed;--success-color: #10b981;--success-hover-color: #059669;--success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);--success-border-color: #059669;--warning-color: #f59e0b;--warning-hover-color: #d97706;--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);--warning-border-color: #d97706;--danger-color: #ef4444;--danger-hover-color: #dc2626;--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--danger-border-color: #dc2626;--info-color: #06b6d4;--info-hover-color: #0891b2;--info-gradient: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);--info-border-color: #0891b2;--light-color: #f8fafc;--light-hover-color: #e2e8f0;--light-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--light-border-color: #cbd5e1;--dark-color: #1e293b;--dark-hover-color: #0f172a;--dark-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);--dark-border-color: #334155;--text-color: #2d3748;--text-light: #718096;--bg-light: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.hc-button{appearance:none;border:0;position:relative;overflow:hidden;box-shadow:var(--shadow-md);border-radius:.75rem;font-weight:600;font-size:.9rem;line-height:1.2;padding:.65rem 1rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.hc-button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.hc-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.hc-button:hover:before{left:100%}.hc-button:active{transform:translateY(0)}.hc-button:focus-visible{outline:2px solid rgba(59,130,246,.7);outline-offset:2px}.hc-button:disabled{cursor:not-allowed;opacity:.7;box-shadow:var(--shadow-sm)}.hc-button-primary{background:var(--primary-gradient);color:#fff}.hc-button-primary:hover,.hc-button-primary:active{color:#fff}.hc-button-secondary{background:var(--secondary-gradient);color:#fff}.hc-button-secondary:hover,.hc-button-secondary:active{color:#fff}.hc-button-success{background:var(--success-gradient);color:#fff}.hc-button-success:hover,.hc-button-success:active{color:#fff}.hc-button-warning{background:var(--warning-gradient);color:#fff}.hc-button-warning:hover,.hc-button-warning:active{color:#fff}.hc-button-danger{background:var(--danger-gradient);color:#fff}.hc-button-danger:hover,.hc-button-danger:active{color:#fff}.hc-button-info{background:var(--info-gradient);color:#fff}.hc-button-info:hover,.hc-button-info:active{color:#fff}.hc-button-light{background:var(--light-gradient);color:var(--text-color)}.hc-button-light:hover,.hc-button-light:active{color:var(--text-color)}.hc-button-dark{background:var(--dark-gradient);color:#fff}.hc-button-dark:hover,.hc-button-dark:active{color:#fff}.hc-button-white{background-color:#fff;border:1px solid var(--border-color);color:var(--text-color)}.hc-button-white:hover,.hc-button-white:active{color:var(--text-color)}\n"] }]
|
|
98
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
|
|
99
99
|
|
|
100
100
|
/**
|
|
101
101
|
* Reusable card component for the Hichchi UI library
|
|
@@ -146,12 +146,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
146
146
|
* @see {@link ButtonComponent} Related button component often used within cards
|
|
147
147
|
*/
|
|
148
148
|
class HcCardComponent {
|
|
149
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
149
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: HcCardComponent, isStandalone: true, selector: "hc-card", ngImport: i0, template: "<div class=\"hc-card\">\r\n <div class=\"hc-card-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:min(460px,100%)}.hc-card{position:relative;border-radius:1.5rem;padding:1px;background:linear-gradient(145deg,#2563ebbf,#6366f1a6,#ffffff80);box-shadow:0 20px 40px -22px #0f172aa6,0 12px 22px -16px #3b82f673;overflow:hidden}.hc-card-content{position:relative;z-index:1;width:100%;border-radius:calc(1.5rem - 1px);background:linear-gradient(170deg,#fffffffa,#f8fafcf5);padding:clamp(1.1rem,2.6vw,1.8rem)}@media(max-width:480px){:host{width:100%}.hc-card-content{padding:1rem}}\n"] });
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HcCardComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
|
-
args: [{ selector: "hc-card", imports: [], template: "<div class=\"hc-card
|
|
154
|
+
args: [{ selector: "hc-card", imports: [], template: "<div class=\"hc-card\">\r\n <div class=\"hc-card-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:min(460px,100%)}.hc-card{position:relative;border-radius:1.5rem;padding:1px;background:linear-gradient(145deg,#2563ebbf,#6366f1a6,#ffffff80);box-shadow:0 20px 40px -22px #0f172aa6,0 12px 22px -16px #3b82f673;overflow:hidden}.hc-card-content{position:relative;z-index:1;width:100%;border-radius:calc(1.5rem - 1px);background:linear-gradient(170deg,#fffffffa,#f8fafcf5);padding:clamp(1.1rem,2.6vw,1.8rem)}@media(max-width:480px){:host{width:100%}.hc-card-content{padding:1rem}}\n"] }]
|
|
155
155
|
}] });
|
|
156
156
|
|
|
157
157
|
/**
|
|
@@ -214,14 +214,14 @@ class HcSeparatorComponent {
|
|
|
214
214
|
*
|
|
215
215
|
* @default ""
|
|
216
216
|
*/
|
|
217
|
-
label = input("");
|
|
218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
217
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
218
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HcSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HcSeparatorComponent, isStandalone: true, selector: "hc-separator", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"separator-line\"></div>\r\n@if (label()) {\r\n <span class=\"separator-label\">{{ label() }}</span>\r\n}\r\n", styles: [":host{display:block;position:relative;width:100%;margin:1rem 0 1.15rem}.separator-line{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(148,163,184,.6),transparent)}.separator-label{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 .6rem;background:#f8fafcf2;color:#64748b;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}\n"] });
|
|
220
220
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HcSeparatorComponent, decorators: [{
|
|
222
222
|
type: Component,
|
|
223
|
-
args: [{ selector: "hc-separator", imports: [], template: "<span>{{ label() }}</span>\n", styles: [":
|
|
224
|
-
}] });
|
|
223
|
+
args: [{ selector: "hc-separator", imports: [], template: "<div class=\"separator-line\"></div>\r\n@if (label()) {\r\n <span class=\"separator-label\">{{ label() }}</span>\r\n}\r\n", styles: [":host{display:block;position:relative;width:100%;margin:1rem 0 1.15rem}.separator-line{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(148,163,184,.6),transparent)}.separator-label{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 .6rem;background:#f8fafcf2;color:#64748b;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
224
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
225
225
|
|
|
226
226
|
/**
|
|
227
227
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hichchi-ngx-ui.mjs","sources":["../../../../libs/ngx-ui/src/lib/components/button/button.component.ts","../../../../libs/ngx-ui/src/lib/components/button/button.component.html","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.html","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.html","../../../../libs/ngx-ui/src/hichchi-ngx-ui.ts"],"sourcesContent":["import { Component, input, InputSignal, output, OutputEmitterRef } from \"@angular/core\";\r\nimport { ButtonType, HcColor } from \"../../types\";\r\n\r\n/**\r\n * Reusable button component for the Hichchi UI library\r\n *\r\n * This component provides a customizable button with consistent styling and behavior\r\n * across the application. It supports different colors, types, and custom CSS classes\r\n * while maintaining accessibility and user experience standards.\r\n *\r\n * The component uses Angular's new signal-based inputs and outputs for better\r\n * performance and reactivity.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic button -->\r\n * <hc-button>Click me</hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom color and type -->\r\n * <hc-button\r\n * [color]=\"'secondary'\"\r\n * [type]=\"'button'\"\r\n * (onClick)=\"handleClick($event)\">\r\n * Submit Form\r\n * </hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom CSS classes -->\r\n * <hc-button\r\n * [class]=\"'my-custom-class another-class'\"\r\n * [color]=\"'danger'\">\r\n * Delete Item\r\n * </hc-button>\r\n * ```\r\n *\r\n * @see {@link HcColor} Type defining available color options\r\n * @see {@link ButtonType} Type defining available button types\r\n */\r\n@Component({\r\n selector: \"hc-button\",\r\n imports: [],\r\n templateUrl: \"./button.component.html\",\r\n styleUrl: \"./button.component.scss\",\r\n})\r\nexport class ButtonComponent {\r\n /**\r\n * The color theme of the button\r\n *\r\n * Determines the visual appearance of the button based on predefined color schemes.\r\n * Each color represents a different semantic meaning (primary for main actions,\r\n * secondary for alternative actions, danger for destructive actions, etc.).\r\n *\r\n * @default \"primary\"\r\n */\r\n color: InputSignal<HcColor> = input<HcColor>(\"primary\");\r\n\r\n /**\r\n * Additional CSS classes to apply to the button\r\n *\r\n * Allows for custom styling by adding extra CSS classes to the button element.\r\n * Multiple classes can be specified as a space-separated string.\r\n *\r\n * @default \"\"\r\n */\r\n class: InputSignal<string> = input<string>(\"\");\r\n\r\n /**\r\n * The HTML button type attribute\r\n *\r\n * Specifies the behavior of the button when used within forms.\r\n * - \"submit\": Submits the form (default)\r\n * - \"button\": Regular button with no default behavior\r\n * - \"reset\": Resets the form to its initial state\r\n *\r\n * @default \"submit\"\r\n */\r\n type: InputSignal<ButtonType> = input<ButtonType>(\"submit\");\r\n\r\n /**\r\n * Event emitted when the button is clicked\r\n *\r\n * Emits the native MouseEvent when the user clicks the button, allowing\r\n * parent components to handle the click interaction. The event contains\r\n * information about the click such as coordinates, modifier keys, etc.\r\n *\r\n * @example\r\n * ```typescript\r\n * handleButtonClick(event: MouseEvent) {\r\n * console.log('Button clicked at:', event.clientX, event.clientY);\r\n * // Handle the click event\r\n * }\r\n * ```\r\n */\r\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n onClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\r\n}\r\n","<button [type]=\"type()\" class=\"btn hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\n <ng-content></ng-content>\n</button>\n","import { Component } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable card component for the Hichchi UI library\r\n *\r\n * This component provides a container with consistent card styling that can be used\r\n * to group related content together. Cards are commonly used for displaying information\r\n * in a structured, visually appealing way with proper spacing, borders, and shadows.\r\n *\r\n * The component acts as a content wrapper and uses Angular's content projection\r\n * to display any content passed between the opening and closing tags.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic card -->\r\n * <hc-card>\r\n * <h3>Card Title</h3>\r\n * <p>This is some card content.</p>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with form content -->\r\n * <hc-card>\r\n * <form>\r\n * <input type=\"text\" placeholder=\"Enter your name\">\r\n * <hc-button type=\"submit\">Submit</hc-button>\r\n * </form>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with mixed content -->\r\n * <hc-card>\r\n * <div class=\"card-header\">\r\n * <h2>User Profile</h2>\r\n * </div>\r\n * <div class=\"card-body\">\r\n * <p>User information goes here...</p>\r\n * </div>\r\n * <div class=\"card-footer\">\r\n * <hc-button>Edit Profile</hc-button>\r\n * </div>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @see {@link ButtonComponent} Related button component often used within cards\r\n */\r\n@Component({\r\n selector: \"hc-card\",\r\n imports: [],\r\n templateUrl: \"./hc-card.component.html\",\r\n styleUrl: \"./hc-card.component.scss\",\r\n})\r\nexport class HcCardComponent {}\r\n","<div class=\"hc-card d-flex justify-content-center align-items-center\">\n <div class=\"hc-card-content\">\n <ng-content></ng-content>\n </div>\n</div>\n","import { Component, input, InputSignal } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable separator component for the Hichchi UI library\r\n *\r\n * This component provides a visual separator element that can be used to divide\r\n * content sections within a page or form. It supports an optional label that can\r\n * be displayed within or alongside the separator line.\r\n *\r\n * Separators are useful for creating visual breaks between different sections of\r\n * content, improving readability and organization of the user interface.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic separator without label -->\r\n * <hc-separator></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Separator with label -->\r\n * <hc-separator [label]=\"'Personal Information'\"></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator in a form -->\r\n * <form>\r\n * <input type=\"text\" placeholder=\"First Name\">\r\n * <input type=\"text\" placeholder=\"Last Name\">\r\n *\r\n * <hc-separator [label]=\"'Contact Details'\"></hc-separator>\r\n *\r\n * <input type=\"email\" placeholder=\"Email\">\r\n * <input type=\"tel\" placeholder=\"Phone\">\r\n * </form>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator between content sections -->\r\n * <div>\r\n * <h2>Section 1</h2>\r\n * <p>Content for section 1...</p>\r\n *\r\n * <hc-separator [label]=\"'OR'\"></hc-separator>\r\n *\r\n * <h2>Section 2</h2>\r\n * <p>Content for section 2...</p>\r\n * </div>\r\n * ```\r\n */\r\n@Component({\r\n selector: \"hc-separator\",\r\n imports: [],\r\n templateUrl: \"./hc-separator.component.html\",\r\n styleUrl: \"./hc-separator.component.scss\",\r\n})\r\nexport class HcSeparatorComponent {\r\n /**\r\n * Optional label text to display with the separator\r\n *\r\n * When provided, this text will be displayed as part of the separator,\r\n * typically centered within or alongside the separator line. This is useful\r\n * for creating labeled dividers that help organize content sections.\r\n *\r\n * @default \"\"\r\n */\r\n label: InputSignal<string> = input<string>(\"\");\r\n}\r\n","<span>{{ label() }}</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;MAOU,eAAe,CAAA;AACxB;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAyB,KAAK,CAAU,SAAS,CAAC;AAEvD;;;;;;;AAOG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,CAAC;AAE9C;;;;;;;;;AASG;AACH,IAAA,IAAI,GAA4B,KAAK,CAAa,QAAQ,CAAC;AAE3D;;;;;;;;;;;;;;AAcG;;IAEH,OAAO,GAAiC,MAAM,EAAc;uGAlDnD,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,udCjD5B,uKAGA,EAAA,MAAA,EAAA,CAAA,uvGAAA,CAAA,EAAA,CAAA;;2FD8Ca,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,EAAE,EAAA,QAAA,EAAA,uKAAA,EAAA,MAAA,EAAA,CAAA,uvGAAA,CAAA,EAAA;;;AE3Cf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;MAOU,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,mECxD5B,wKAKA,EAAA,MAAA,EAAA,CAAA,swEAAA,CAAA,EAAA,CAAA;;2FDmDa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,EAAE,EAAA,QAAA,EAAA,wKAAA,EAAA,MAAA,EAAA,CAAA,swEAAA,CAAA,EAAA;;;AElDf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDG;MAOU,oBAAoB,CAAA;AAC7B;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,CAAC;uGAVrC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,4MC1DjC,8BACA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA,CAAA;;2FDyDa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,WACf,EAAE,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA;;;AEtDf;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"hichchi-ngx-ui.mjs","sources":["../../../../libs/ngx-ui/src/lib/components/button/button.component.ts","../../../../libs/ngx-ui/src/lib/components/button/button.component.html","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-card/hc-card.component.html","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts","../../../../libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.html","../../../../libs/ngx-ui/src/hichchi-ngx-ui.ts"],"sourcesContent":["import { Component, input, InputSignal, output, OutputEmitterRef } from \"@angular/core\";\r\nimport { ButtonType, HcColor } from \"../../types\";\r\n\r\n/**\r\n * Reusable button component for the Hichchi UI library\r\n *\r\n * This component provides a customizable button with consistent styling and behavior\r\n * across the application. It supports different colors, types, and custom CSS classes\r\n * while maintaining accessibility and user experience standards.\r\n *\r\n * The component uses Angular's new signal-based inputs and outputs for better\r\n * performance and reactivity.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic button -->\r\n * <hc-button>Click me</hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom color and type -->\r\n * <hc-button\r\n * [color]=\"'secondary'\"\r\n * [type]=\"'button'\"\r\n * (onClick)=\"handleClick($event)\">\r\n * Submit Form\r\n * </hc-button>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Button with custom CSS classes -->\r\n * <hc-button\r\n * [class]=\"'my-custom-class another-class'\"\r\n * [color]=\"'danger'\">\r\n * Delete Item\r\n * </hc-button>\r\n * ```\r\n *\r\n * @see {@link HcColor} Type defining available color options\r\n * @see {@link ButtonType} Type defining available button types\r\n */\r\n@Component({\r\n selector: \"hc-button\",\r\n imports: [],\r\n templateUrl: \"./button.component.html\",\r\n styleUrl: \"./button.component.scss\",\r\n})\r\nexport class ButtonComponent {\r\n /**\r\n * The color theme of the button\r\n *\r\n * Determines the visual appearance of the button based on predefined color schemes.\r\n * Each color represents a different semantic meaning (primary for main actions,\r\n * secondary for alternative actions, danger for destructive actions, etc.).\r\n *\r\n * @default \"primary\"\r\n */\r\n color: InputSignal<HcColor> = input<HcColor>(\"primary\");\r\n\r\n /**\r\n * Additional CSS classes to apply to the button\r\n *\r\n * Allows for custom styling by adding extra CSS classes to the button element.\r\n * Multiple classes can be specified as a space-separated string.\r\n *\r\n * @default \"\"\r\n */\r\n class: InputSignal<string> = input<string>(\"\");\r\n\r\n /**\r\n * The HTML button type attribute\r\n *\r\n * Specifies the behavior of the button when used within forms.\r\n * - \"submit\": Submits the form (default)\r\n * - \"button\": Regular button with no default behavior\r\n * - \"reset\": Resets the form to its initial state\r\n *\r\n * @default \"submit\"\r\n */\r\n type: InputSignal<ButtonType> = input<ButtonType>(\"submit\");\r\n\r\n /**\r\n * Event emitted when the button is clicked\r\n *\r\n * Emits the native MouseEvent when the user clicks the button, allowing\r\n * parent components to handle the click interaction. The event contains\r\n * information about the click such as coordinates, modifier keys, etc.\r\n *\r\n * @example\r\n * ```typescript\r\n * handleButtonClick(event: MouseEvent) {\r\n * console.log('Button clicked at:', event.clientX, event.clientY);\r\n * // Handle the click event\r\n * }\r\n * ```\r\n */\r\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n onClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\r\n}\r\n","<button [type]=\"type()\" class=\"hc-button hc-button-{{ color() }} {{ class() }}\" (click)=\"onClick.emit($event)\">\r\n <ng-content></ng-content>\r\n</button>\r\n","import { Component } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable card component for the Hichchi UI library\r\n *\r\n * This component provides a container with consistent card styling that can be used\r\n * to group related content together. Cards are commonly used for displaying information\r\n * in a structured, visually appealing way with proper spacing, borders, and shadows.\r\n *\r\n * The component acts as a content wrapper and uses Angular's content projection\r\n * to display any content passed between the opening and closing tags.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic card -->\r\n * <hc-card>\r\n * <h3>Card Title</h3>\r\n * <p>This is some card content.</p>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with form content -->\r\n * <hc-card>\r\n * <form>\r\n * <input type=\"text\" placeholder=\"Enter your name\">\r\n * <hc-button type=\"submit\">Submit</hc-button>\r\n * </form>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Card with mixed content -->\r\n * <hc-card>\r\n * <div class=\"card-header\">\r\n * <h2>User Profile</h2>\r\n * </div>\r\n * <div class=\"card-body\">\r\n * <p>User information goes here...</p>\r\n * </div>\r\n * <div class=\"card-footer\">\r\n * <hc-button>Edit Profile</hc-button>\r\n * </div>\r\n * </hc-card>\r\n * ```\r\n *\r\n * @see {@link ButtonComponent} Related button component often used within cards\r\n */\r\n@Component({\r\n selector: \"hc-card\",\r\n imports: [],\r\n templateUrl: \"./hc-card.component.html\",\r\n styleUrl: \"./hc-card.component.scss\",\r\n})\r\nexport class HcCardComponent {}\r\n","<div class=\"hc-card\">\r\n <div class=\"hc-card-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","import { Component, input, InputSignal } from \"@angular/core\";\r\n\r\n/**\r\n * Reusable separator component for the Hichchi UI library\r\n *\r\n * This component provides a visual separator element that can be used to divide\r\n * content sections within a page or form. It supports an optional label that can\r\n * be displayed within or alongside the separator line.\r\n *\r\n * Separators are useful for creating visual breaks between different sections of\r\n * content, improving readability and organization of the user interface.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Basic separator without label -->\r\n * <hc-separator></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Separator with label -->\r\n * <hc-separator [label]=\"'Personal Information'\"></hc-separator>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator in a form -->\r\n * <form>\r\n * <input type=\"text\" placeholder=\"First Name\">\r\n * <input type=\"text\" placeholder=\"Last Name\">\r\n *\r\n * <hc-separator [label]=\"'Contact Details'\"></hc-separator>\r\n *\r\n * <input type=\"email\" placeholder=\"Email\">\r\n * <input type=\"tel\" placeholder=\"Phone\">\r\n * </form>\r\n * ```\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Using separator between content sections -->\r\n * <div>\r\n * <h2>Section 1</h2>\r\n * <p>Content for section 1...</p>\r\n *\r\n * <hc-separator [label]=\"'OR'\"></hc-separator>\r\n *\r\n * <h2>Section 2</h2>\r\n * <p>Content for section 2...</p>\r\n * </div>\r\n * ```\r\n */\r\n@Component({\r\n selector: \"hc-separator\",\r\n imports: [],\r\n templateUrl: \"./hc-separator.component.html\",\r\n styleUrl: \"./hc-separator.component.scss\",\r\n})\r\nexport class HcSeparatorComponent {\r\n /**\r\n * Optional label text to display with the separator\r\n *\r\n * When provided, this text will be displayed as part of the separator,\r\n * typically centered within or alongside the separator line. This is useful\r\n * for creating labeled dividers that help organize content sections.\r\n *\r\n * @default \"\"\r\n */\r\n label: InputSignal<string> = input<string>(\"\");\r\n}\r\n","<div class=\"separator-line\"></div>\r\n@if (label()) {\r\n <span class=\"separator-label\">{{ label() }}</span>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;MAOU,eAAe,CAAA;AACxB;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAyB,KAAK,CAAU,SAAS,iDAAC;AAEvD;;;;;;;AAOG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,iDAAC;AAE9C;;;;;;;;;AASG;AACH,IAAA,IAAI,GAA4B,KAAK,CAAa,QAAQ,gDAAC;AAE3D;;;;;;;;;;;;;;AAcG;;IAEH,OAAO,GAAiC,MAAM,EAAc;uGAlDnD,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,udCjD5B,yKAGA,EAAA,MAAA,EAAA,CAAA,uhHAAA,CAAA,EAAA,CAAA;;2FD8Ca,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,EAAE,EAAA,QAAA,EAAA,yKAAA,EAAA,MAAA,EAAA,CAAA,uhHAAA,CAAA,EAAA;;;AE3Cf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;MAOU,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,mECxD5B,iIAKA,EAAA,MAAA,EAAA,CAAA,yfAAA,CAAA,EAAA,CAAA;;2FDmDa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,EAAE,EAAA,QAAA,EAAA,iIAAA,EAAA,MAAA,EAAA,CAAA,yfAAA,CAAA,EAAA;;;AElDf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDG;MAOU,oBAAoB,CAAA;AAC7B;;;;;;;;AAQG;AACH,IAAA,KAAK,GAAwB,KAAK,CAAS,EAAE,iDAAC;uGAVrC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,4MC1DjC,8HAIA,EAAA,MAAA,EAAA,CAAA,mZAAA,CAAA,EAAA,CAAA;;2FDsDa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,WACf,EAAE,EAAA,QAAA,EAAA,8HAAA,EAAA,MAAA,EAAA,CAAA,mZAAA,CAAA,EAAA;;;AEtDf;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hichchi/ngx-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -13,20 +13,20 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@angular/core": "^
|
|
16
|
+
"@angular/core": "^21.1.4"
|
|
17
17
|
},
|
|
18
18
|
"module": "fesm2022/hichchi-ngx-ui.mjs",
|
|
19
|
-
"typings": "
|
|
19
|
+
"typings": "types/hichchi-ngx-ui.d.ts",
|
|
20
20
|
"exports": {
|
|
21
21
|
"./package.json": {
|
|
22
22
|
"default": "./package.json"
|
|
23
23
|
},
|
|
24
24
|
".": {
|
|
25
|
-
"types": "./
|
|
25
|
+
"types": "./types/hichchi-ngx-ui.d.ts",
|
|
26
26
|
"default": "./fesm2022/hichchi-ngx-ui.mjs"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.3.0"
|
|
31
31
|
}
|
|
32
|
-
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InputSignal, OutputEmitterRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
type HcColor = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "white";
|
|
5
|
+
type ButtonType = "button" | "submit" | "reset";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Reusable button component for the Hichchi UI library
|
|
9
|
+
*
|
|
10
|
+
* This component provides a customizable button with consistent styling and behavior
|
|
11
|
+
* across the application. It supports different colors, types, and custom CSS classes
|
|
12
|
+
* while maintaining accessibility and user experience standards.
|
|
13
|
+
*
|
|
14
|
+
* The component uses Angular's new signal-based inputs and outputs for better
|
|
15
|
+
* performance and reactivity.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```html
|
|
19
|
+
* <!-- Basic button -->
|
|
20
|
+
* <hc-button>Click me</hc-button>
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```html
|
|
25
|
+
* <!-- Button with custom color and type -->
|
|
26
|
+
* <hc-button
|
|
27
|
+
* [color]="'secondary'"
|
|
28
|
+
* [type]="'button'"
|
|
29
|
+
* (onClick)="handleClick($event)">
|
|
30
|
+
* Submit Form
|
|
31
|
+
* </hc-button>
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```html
|
|
36
|
+
* <!-- Button with custom CSS classes -->
|
|
37
|
+
* <hc-button
|
|
38
|
+
* [class]="'my-custom-class another-class'"
|
|
39
|
+
* [color]="'danger'">
|
|
40
|
+
* Delete Item
|
|
41
|
+
* </hc-button>
|
|
42
|
+
* ```
|
|
43
|
+
*
|
|
44
|
+
* @see {@link HcColor} Type defining available color options
|
|
45
|
+
* @see {@link ButtonType} Type defining available button types
|
|
46
|
+
*/
|
|
47
|
+
declare class ButtonComponent {
|
|
48
|
+
/**
|
|
49
|
+
* The color theme of the button
|
|
50
|
+
*
|
|
51
|
+
* Determines the visual appearance of the button based on predefined color schemes.
|
|
52
|
+
* Each color represents a different semantic meaning (primary for main actions,
|
|
53
|
+
* secondary for alternative actions, danger for destructive actions, etc.).
|
|
54
|
+
*
|
|
55
|
+
* @default "primary"
|
|
56
|
+
*/
|
|
57
|
+
color: InputSignal<HcColor>;
|
|
58
|
+
/**
|
|
59
|
+
* Additional CSS classes to apply to the button
|
|
60
|
+
*
|
|
61
|
+
* Allows for custom styling by adding extra CSS classes to the button element.
|
|
62
|
+
* Multiple classes can be specified as a space-separated string.
|
|
63
|
+
*
|
|
64
|
+
* @default ""
|
|
65
|
+
*/
|
|
66
|
+
class: InputSignal<string>;
|
|
67
|
+
/**
|
|
68
|
+
* The HTML button type attribute
|
|
69
|
+
*
|
|
70
|
+
* Specifies the behavior of the button when used within forms.
|
|
71
|
+
* - "submit": Submits the form (default)
|
|
72
|
+
* - "button": Regular button with no default behavior
|
|
73
|
+
* - "reset": Resets the form to its initial state
|
|
74
|
+
*
|
|
75
|
+
* @default "submit"
|
|
76
|
+
*/
|
|
77
|
+
type: InputSignal<ButtonType>;
|
|
78
|
+
/**
|
|
79
|
+
* Event emitted when the button is clicked
|
|
80
|
+
*
|
|
81
|
+
* Emits the native MouseEvent when the user clicks the button, allowing
|
|
82
|
+
* parent components to handle the click interaction. The event contains
|
|
83
|
+
* information about the click such as coordinates, modifier keys, etc.
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```typescript
|
|
87
|
+
* handleButtonClick(event: MouseEvent) {
|
|
88
|
+
* console.log('Button clicked at:', event.clientX, event.clientY);
|
|
89
|
+
* // Handle the click event
|
|
90
|
+
* }
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
onClick: OutputEmitterRef<MouseEvent>;
|
|
94
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
95
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "hc-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Reusable card component for the Hichchi UI library
|
|
100
|
+
*
|
|
101
|
+
* This component provides a container with consistent card styling that can be used
|
|
102
|
+
* to group related content together. Cards are commonly used for displaying information
|
|
103
|
+
* in a structured, visually appealing way with proper spacing, borders, and shadows.
|
|
104
|
+
*
|
|
105
|
+
* The component acts as a content wrapper and uses Angular's content projection
|
|
106
|
+
* to display any content passed between the opening and closing tags.
|
|
107
|
+
*
|
|
108
|
+
* @example
|
|
109
|
+
* ```html
|
|
110
|
+
* <!-- Basic card -->
|
|
111
|
+
* <hc-card>
|
|
112
|
+
* <h3>Card Title</h3>
|
|
113
|
+
* <p>This is some card content.</p>
|
|
114
|
+
* </hc-card>
|
|
115
|
+
* ```
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* ```html
|
|
119
|
+
* <!-- Card with form content -->
|
|
120
|
+
* <hc-card>
|
|
121
|
+
* <form>
|
|
122
|
+
* <input type="text" placeholder="Enter your name">
|
|
123
|
+
* <hc-button type="submit">Submit</hc-button>
|
|
124
|
+
* </form>
|
|
125
|
+
* </hc-card>
|
|
126
|
+
* ```
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```html
|
|
130
|
+
* <!-- Card with mixed content -->
|
|
131
|
+
* <hc-card>
|
|
132
|
+
* <div class="card-header">
|
|
133
|
+
* <h2>User Profile</h2>
|
|
134
|
+
* </div>
|
|
135
|
+
* <div class="card-body">
|
|
136
|
+
* <p>User information goes here...</p>
|
|
137
|
+
* </div>
|
|
138
|
+
* <div class="card-footer">
|
|
139
|
+
* <hc-button>Edit Profile</hc-button>
|
|
140
|
+
* </div>
|
|
141
|
+
* </hc-card>
|
|
142
|
+
* ```
|
|
143
|
+
*
|
|
144
|
+
* @see {@link ButtonComponent} Related button component often used within cards
|
|
145
|
+
*/
|
|
146
|
+
declare class HcCardComponent {
|
|
147
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HcCardComponent, never>;
|
|
148
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HcCardComponent, "hc-card", never, {}, {}, never, ["*"], true, never>;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Reusable separator component for the Hichchi UI library
|
|
153
|
+
*
|
|
154
|
+
* This component provides a visual separator element that can be used to divide
|
|
155
|
+
* content sections within a page or form. It supports an optional label that can
|
|
156
|
+
* be displayed within or alongside the separator line.
|
|
157
|
+
*
|
|
158
|
+
* Separators are useful for creating visual breaks between different sections of
|
|
159
|
+
* content, improving readability and organization of the user interface.
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```html
|
|
163
|
+
* <!-- Basic separator without label -->
|
|
164
|
+
* <hc-separator></hc-separator>
|
|
165
|
+
* ```
|
|
166
|
+
*
|
|
167
|
+
* @example
|
|
168
|
+
* ```html
|
|
169
|
+
* <!-- Separator with label -->
|
|
170
|
+
* <hc-separator [label]="'Personal Information'"></hc-separator>
|
|
171
|
+
* ```
|
|
172
|
+
*
|
|
173
|
+
* @example
|
|
174
|
+
* ```html
|
|
175
|
+
* <!-- Using separator in a form -->
|
|
176
|
+
* <form>
|
|
177
|
+
* <input type="text" placeholder="First Name">
|
|
178
|
+
* <input type="text" placeholder="Last Name">
|
|
179
|
+
*
|
|
180
|
+
* <hc-separator [label]="'Contact Details'"></hc-separator>
|
|
181
|
+
*
|
|
182
|
+
* <input type="email" placeholder="Email">
|
|
183
|
+
* <input type="tel" placeholder="Phone">
|
|
184
|
+
* </form>
|
|
185
|
+
* ```
|
|
186
|
+
*
|
|
187
|
+
* @example
|
|
188
|
+
* ```html
|
|
189
|
+
* <!-- Using separator between content sections -->
|
|
190
|
+
* <div>
|
|
191
|
+
* <h2>Section 1</h2>
|
|
192
|
+
* <p>Content for section 1...</p>
|
|
193
|
+
*
|
|
194
|
+
* <hc-separator [label]="'OR'"></hc-separator>
|
|
195
|
+
*
|
|
196
|
+
* <h2>Section 2</h2>
|
|
197
|
+
* <p>Content for section 2...</p>
|
|
198
|
+
* </div>
|
|
199
|
+
* ```
|
|
200
|
+
*/
|
|
201
|
+
declare class HcSeparatorComponent {
|
|
202
|
+
/**
|
|
203
|
+
* Optional label text to display with the separator
|
|
204
|
+
*
|
|
205
|
+
* When provided, this text will be displayed as part of the separator,
|
|
206
|
+
* typically centered within or alongside the separator line. This is useful
|
|
207
|
+
* for creating labeled dividers that help organize content sections.
|
|
208
|
+
*
|
|
209
|
+
* @default ""
|
|
210
|
+
*/
|
|
211
|
+
label: InputSignal<string>;
|
|
212
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HcSeparatorComponent, never>;
|
|
213
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HcSeparatorComponent, "hc-separator", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
export { ButtonComponent, HcCardComponent, HcSeparatorComponent };
|
package/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./lib/components";
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { InputSignal, OutputEmitterRef } from "@angular/core";
|
|
2
|
-
import { ButtonType, HcColor } from "../../types";
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Reusable button component for the Hichchi UI library
|
|
6
|
-
*
|
|
7
|
-
* This component provides a customizable button with consistent styling and behavior
|
|
8
|
-
* across the application. It supports different colors, types, and custom CSS classes
|
|
9
|
-
* while maintaining accessibility and user experience standards.
|
|
10
|
-
*
|
|
11
|
-
* The component uses Angular's new signal-based inputs and outputs for better
|
|
12
|
-
* performance and reactivity.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```html
|
|
16
|
-
* <!-- Basic button -->
|
|
17
|
-
* <hc-button>Click me</hc-button>
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```html
|
|
22
|
-
* <!-- Button with custom color and type -->
|
|
23
|
-
* <hc-button
|
|
24
|
-
* [color]="'secondary'"
|
|
25
|
-
* [type]="'button'"
|
|
26
|
-
* (onClick)="handleClick($event)">
|
|
27
|
-
* Submit Form
|
|
28
|
-
* </hc-button>
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```html
|
|
33
|
-
* <!-- Button with custom CSS classes -->
|
|
34
|
-
* <hc-button
|
|
35
|
-
* [class]="'my-custom-class another-class'"
|
|
36
|
-
* [color]="'danger'">
|
|
37
|
-
* Delete Item
|
|
38
|
-
* </hc-button>
|
|
39
|
-
* ```
|
|
40
|
-
*
|
|
41
|
-
* @see {@link HcColor} Type defining available color options
|
|
42
|
-
* @see {@link ButtonType} Type defining available button types
|
|
43
|
-
*/
|
|
44
|
-
export declare class ButtonComponent {
|
|
45
|
-
/**
|
|
46
|
-
* The color theme of the button
|
|
47
|
-
*
|
|
48
|
-
* Determines the visual appearance of the button based on predefined color schemes.
|
|
49
|
-
* Each color represents a different semantic meaning (primary for main actions,
|
|
50
|
-
* secondary for alternative actions, danger for destructive actions, etc.).
|
|
51
|
-
*
|
|
52
|
-
* @default "primary"
|
|
53
|
-
*/
|
|
54
|
-
color: InputSignal<HcColor>;
|
|
55
|
-
/**
|
|
56
|
-
* Additional CSS classes to apply to the button
|
|
57
|
-
*
|
|
58
|
-
* Allows for custom styling by adding extra CSS classes to the button element.
|
|
59
|
-
* Multiple classes can be specified as a space-separated string.
|
|
60
|
-
*
|
|
61
|
-
* @default ""
|
|
62
|
-
*/
|
|
63
|
-
class: InputSignal<string>;
|
|
64
|
-
/**
|
|
65
|
-
* The HTML button type attribute
|
|
66
|
-
*
|
|
67
|
-
* Specifies the behavior of the button when used within forms.
|
|
68
|
-
* - "submit": Submits the form (default)
|
|
69
|
-
* - "button": Regular button with no default behavior
|
|
70
|
-
* - "reset": Resets the form to its initial state
|
|
71
|
-
*
|
|
72
|
-
* @default "submit"
|
|
73
|
-
*/
|
|
74
|
-
type: InputSignal<ButtonType>;
|
|
75
|
-
/**
|
|
76
|
-
* Event emitted when the button is clicked
|
|
77
|
-
*
|
|
78
|
-
* Emits the native MouseEvent when the user clicks the button, allowing
|
|
79
|
-
* parent components to handle the click interaction. The event contains
|
|
80
|
-
* information about the click such as coordinates, modifier keys, etc.
|
|
81
|
-
*
|
|
82
|
-
* @example
|
|
83
|
-
* ```typescript
|
|
84
|
-
* handleButtonClick(event: MouseEvent) {
|
|
85
|
-
* console.log('Button clicked at:', event.clientX, event.clientY);
|
|
86
|
-
* // Handle the click event
|
|
87
|
-
* }
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
onClick: OutputEmitterRef<MouseEvent>;
|
|
91
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
92
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "hc-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
|
|
93
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
/**
|
|
3
|
-
* Reusable card component for the Hichchi UI library
|
|
4
|
-
*
|
|
5
|
-
* This component provides a container with consistent card styling that can be used
|
|
6
|
-
* to group related content together. Cards are commonly used for displaying information
|
|
7
|
-
* in a structured, visually appealing way with proper spacing, borders, and shadows.
|
|
8
|
-
*
|
|
9
|
-
* The component acts as a content wrapper and uses Angular's content projection
|
|
10
|
-
* to display any content passed between the opening and closing tags.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```html
|
|
14
|
-
* <!-- Basic card -->
|
|
15
|
-
* <hc-card>
|
|
16
|
-
* <h3>Card Title</h3>
|
|
17
|
-
* <p>This is some card content.</p>
|
|
18
|
-
* </hc-card>
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* ```html
|
|
23
|
-
* <!-- Card with form content -->
|
|
24
|
-
* <hc-card>
|
|
25
|
-
* <form>
|
|
26
|
-
* <input type="text" placeholder="Enter your name">
|
|
27
|
-
* <hc-button type="submit">Submit</hc-button>
|
|
28
|
-
* </form>
|
|
29
|
-
* </hc-card>
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```html
|
|
34
|
-
* <!-- Card with mixed content -->
|
|
35
|
-
* <hc-card>
|
|
36
|
-
* <div class="card-header">
|
|
37
|
-
* <h2>User Profile</h2>
|
|
38
|
-
* </div>
|
|
39
|
-
* <div class="card-body">
|
|
40
|
-
* <p>User information goes here...</p>
|
|
41
|
-
* </div>
|
|
42
|
-
* <div class="card-footer">
|
|
43
|
-
* <hc-button>Edit Profile</hc-button>
|
|
44
|
-
* </div>
|
|
45
|
-
* </hc-card>
|
|
46
|
-
* ```
|
|
47
|
-
*
|
|
48
|
-
* @see {@link ButtonComponent} Related button component often used within cards
|
|
49
|
-
*/
|
|
50
|
-
export declare class HcCardComponent {
|
|
51
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<HcCardComponent, never>;
|
|
52
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HcCardComponent, "hc-card", never, {}, {}, never, ["*"], true, never>;
|
|
53
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { InputSignal } from "@angular/core";
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Reusable separator component for the Hichchi UI library
|
|
5
|
-
*
|
|
6
|
-
* This component provides a visual separator element that can be used to divide
|
|
7
|
-
* content sections within a page or form. It supports an optional label that can
|
|
8
|
-
* be displayed within or alongside the separator line.
|
|
9
|
-
*
|
|
10
|
-
* Separators are useful for creating visual breaks between different sections of
|
|
11
|
-
* content, improving readability and organization of the user interface.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```html
|
|
15
|
-
* <!-- Basic separator without label -->
|
|
16
|
-
* <hc-separator></hc-separator>
|
|
17
|
-
* ```
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* ```html
|
|
21
|
-
* <!-- Separator with label -->
|
|
22
|
-
* <hc-separator [label]="'Personal Information'"></hc-separator>
|
|
23
|
-
* ```
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```html
|
|
27
|
-
* <!-- Using separator in a form -->
|
|
28
|
-
* <form>
|
|
29
|
-
* <input type="text" placeholder="First Name">
|
|
30
|
-
* <input type="text" placeholder="Last Name">
|
|
31
|
-
*
|
|
32
|
-
* <hc-separator [label]="'Contact Details'"></hc-separator>
|
|
33
|
-
*
|
|
34
|
-
* <input type="email" placeholder="Email">
|
|
35
|
-
* <input type="tel" placeholder="Phone">
|
|
36
|
-
* </form>
|
|
37
|
-
* ```
|
|
38
|
-
*
|
|
39
|
-
* @example
|
|
40
|
-
* ```html
|
|
41
|
-
* <!-- Using separator between content sections -->
|
|
42
|
-
* <div>
|
|
43
|
-
* <h2>Section 1</h2>
|
|
44
|
-
* <p>Content for section 1...</p>
|
|
45
|
-
*
|
|
46
|
-
* <hc-separator [label]="'OR'"></hc-separator>
|
|
47
|
-
*
|
|
48
|
-
* <h2>Section 2</h2>
|
|
49
|
-
* <p>Content for section 2...</p>
|
|
50
|
-
* </div>
|
|
51
|
-
* ```
|
|
52
|
-
*/
|
|
53
|
-
export declare class HcSeparatorComponent {
|
|
54
|
-
/**
|
|
55
|
-
* Optional label text to display with the separator
|
|
56
|
-
*
|
|
57
|
-
* When provided, this text will be displayed as part of the separator,
|
|
58
|
-
* typically centered within or alongside the separator line. This is useful
|
|
59
|
-
* for creating labeled dividers that help organize content sections.
|
|
60
|
-
*
|
|
61
|
-
* @default ""
|
|
62
|
-
*/
|
|
63
|
-
label: InputSignal<string>;
|
|
64
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<HcSeparatorComponent, never>;
|
|
65
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HcSeparatorComponent, "hc-separator", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
66
|
-
}
|
package/lib/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./types";
|
package/lib/types/types.d.ts
DELETED