@hichchi/ngx-ui 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -166,7 +166,7 @@ Complete technical reference for all classes, interfaces, methods, and types in
|
|
|
166
166
|
|
|
167
167
|
### ButtonComponent
|
|
168
168
|
|
|
169
|
-
Defined in: [button/button.component.ts:50](https://github.com/hichchidev/hichchi/blob/
|
|
169
|
+
Defined in: [button/button.component.ts:50](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/button/button.component.ts#L50)
|
|
170
170
|
|
|
171
171
|
Reusable button component for the Hichchi UI library
|
|
172
172
|
|
|
@@ -258,7 +258,7 @@ Multiple classes can be specified as a space-separated string.
|
|
|
258
258
|
</td>
|
|
259
259
|
<td>
|
|
260
260
|
|
|
261
|
-
[button/button.component.ts:70](https://github.com/hichchidev/hichchi/blob/
|
|
261
|
+
[button/button.component.ts:70](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/button/button.component.ts#L70)
|
|
262
262
|
|
|
263
263
|
</td>
|
|
264
264
|
</tr>
|
|
@@ -290,7 +290,7 @@ secondary for alternative actions, danger for destructive actions, etc.).
|
|
|
290
290
|
</td>
|
|
291
291
|
<td>
|
|
292
292
|
|
|
293
|
-
[button/button.component.ts:60](https://github.com/hichchidev/hichchi/blob/
|
|
293
|
+
[button/button.component.ts:60](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/button/button.component.ts#L60)
|
|
294
294
|
|
|
295
295
|
</td>
|
|
296
296
|
</tr>
|
|
@@ -325,7 +325,7 @@ handleButtonClick(event: MouseEvent) {
|
|
|
325
325
|
</td>
|
|
326
326
|
<td>
|
|
327
327
|
|
|
328
|
-
[button/button.component.ts:100](https://github.com/hichchidev/hichchi/blob/
|
|
328
|
+
[button/button.component.ts:100](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/button/button.component.ts#L100)
|
|
329
329
|
|
|
330
330
|
</td>
|
|
331
331
|
</tr>
|
|
@@ -359,7 +359,7 @@ Specifies the behavior of the button when used within forms.
|
|
|
359
359
|
</td>
|
|
360
360
|
<td>
|
|
361
361
|
|
|
362
|
-
[button/button.component.ts:82](https://github.com/hichchidev/hichchi/blob/
|
|
362
|
+
[button/button.component.ts:82](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/button/button.component.ts#L82)
|
|
363
363
|
|
|
364
364
|
</td>
|
|
365
365
|
</tr>
|
|
@@ -370,7 +370,7 @@ Specifies the behavior of the button when used within forms.
|
|
|
370
370
|
|
|
371
371
|
### HcCardComponent
|
|
372
372
|
|
|
373
|
-
Defined in: [hc-card/hc-card.component.ts:57](https://github.com/hichchidev/hichchi/blob/
|
|
373
|
+
Defined in: [hc-card/hc-card.component.ts:57](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/hc-card/hc-card.component.ts#L57)
|
|
374
374
|
|
|
375
375
|
Reusable card component for the Hichchi UI library
|
|
376
376
|
|
|
@@ -436,7 +436,7 @@ new HcCardComponent(): HcCardComponent;
|
|
|
436
436
|
|
|
437
437
|
### HcSeparatorComponent
|
|
438
438
|
|
|
439
|
-
Defined in: [hc-separator/hc-separator.component.ts:59](https://github.com/hichchidev/hichchi/blob/
|
|
439
|
+
Defined in: [hc-separator/hc-separator.component.ts:59](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L59)
|
|
440
440
|
|
|
441
441
|
Reusable separator component for the Hichchi UI library
|
|
442
442
|
|
|
@@ -537,7 +537,7 @@ for creating labeled dividers that help organize content sections.
|
|
|
537
537
|
</td>
|
|
538
538
|
<td>
|
|
539
539
|
|
|
540
|
-
[hc-separator/hc-separator.component.ts:69](https://github.com/hichchidev/hichchi/blob/
|
|
540
|
+
[hc-separator/hc-separator.component.ts:69](https://github.com/hichchidev/hichchi/blob/4f0350925a950a3a9e81da44097f63463eade88d/libs/ngx-ui/src/lib/components/hc-separator/hc-separator.component.ts#L69)
|
|
541
541
|
|
|
542
542
|
</td>
|
|
543
543
|
</tr>
|
|
@@ -147,11 +147,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
147
147
|
*/
|
|
148
148
|
class HcCardComponent {
|
|
149
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"] });
|
|
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%)}:host *{box-sizing:border-box}.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
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\">\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"] }]
|
|
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%)}:host *{box-sizing:border-box}.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
|
/**
|
|
@@ -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=\"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;;;;"}
|
|
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,uhBAAA,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,uhBAAA,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;;;;"}
|