Add comprehensive component library and demo application
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,399 @@
|
||||
import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CheckboxComponent } from '../../../../../ui-essentials/src/lib/components/forms/checkbox';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-checkbox-demo',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
CheckboxComponent
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div style="padding: 2rem;">
|
||||
<h2>Checkbox Component Showcase</h2>
|
||||
|
||||
<!-- Basic Checkboxes -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Basic Checkboxes</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
|
||||
<ui-checkbox
|
||||
label="Accept terms and conditions"
|
||||
[(ngModel)]="basicChecked1"
|
||||
(checkboxChange)="onCheckboxChange('basic-1', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Subscribe to newsletter"
|
||||
description="Receive updates about our products and services"
|
||||
[(ngModel)]="basicChecked2"
|
||||
(checkboxChange)="onCheckboxChange('basic-2', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Remember me"
|
||||
[(ngModel)]="basicChecked3"
|
||||
(checkboxChange)="onCheckboxChange('basic-3', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Size Variants</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
|
||||
<ui-checkbox
|
||||
label="Small checkbox"
|
||||
size="sm"
|
||||
[(ngModel)]="sizeSmall"
|
||||
(checkboxChange)="onCheckboxChange('size-sm', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Medium checkbox (default)"
|
||||
size="md"
|
||||
[(ngModel)]="sizeMedium"
|
||||
(checkboxChange)="onCheckboxChange('size-md', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Large checkbox"
|
||||
size="lg"
|
||||
[(ngModel)]="sizeLarge"
|
||||
(checkboxChange)="onCheckboxChange('size-lg', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant Colors -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Color Variants</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
|
||||
<ui-checkbox
|
||||
label="Primary variant"
|
||||
variant="primary"
|
||||
[(ngModel)]="variantPrimary"
|
||||
(checkboxChange)="onCheckboxChange('variant-primary', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Secondary variant"
|
||||
variant="secondary"
|
||||
[(ngModel)]="variantSecondary"
|
||||
(checkboxChange)="onCheckboxChange('variant-secondary', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Success variant"
|
||||
variant="success"
|
||||
[(ngModel)]="variantSuccess"
|
||||
(checkboxChange)="onCheckboxChange('variant-success', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Warning variant"
|
||||
variant="warning"
|
||||
[(ngModel)]="variantWarning"
|
||||
(checkboxChange)="onCheckboxChange('variant-warning', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Danger variant"
|
||||
variant="danger"
|
||||
[(ngModel)]="variantDanger"
|
||||
(checkboxChange)="onCheckboxChange('variant-danger', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- States -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>States</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
|
||||
<ui-checkbox
|
||||
label="Disabled unchecked"
|
||||
[disabled]="true"
|
||||
[(ngModel)]="stateDisabledUnchecked"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Disabled checked"
|
||||
[disabled]="true"
|
||||
[(ngModel)]="stateDisabledChecked"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Required field"
|
||||
[required]="true"
|
||||
[(ngModel)]="stateRequired"
|
||||
(checkboxChange)="onCheckboxChange('state-required', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Error state"
|
||||
state="error"
|
||||
[(ngModel)]="stateError"
|
||||
(checkboxChange)="onCheckboxChange('state-error', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- With Descriptions -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>With Descriptions</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
|
||||
<ui-checkbox
|
||||
label="Marketing emails"
|
||||
description="Receive promotional emails and special offers"
|
||||
[(ngModel)]="descChecked1"
|
||||
(checkboxChange)="onCheckboxChange('desc-1', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Product updates"
|
||||
description="Get notified about new features and product announcements"
|
||||
[(ngModel)]="descChecked2"
|
||||
(checkboxChange)="onCheckboxChange('desc-2', $event)"
|
||||
/>
|
||||
<ui-checkbox
|
||||
label="Security alerts"
|
||||
description="Important notifications about your account security"
|
||||
[required]="true"
|
||||
[(ngModel)]="descChecked3"
|
||||
(checkboxChange)="onCheckboxChange('desc-3', $event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Controls -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Interactive Controls</h3>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
|
||||
<button
|
||||
style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||
(click)="checkAll()"
|
||||
>
|
||||
Check All
|
||||
</button>
|
||||
<button
|
||||
style="padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||
(click)="uncheckAll()"
|
||||
>
|
||||
Uncheck All
|
||||
</button>
|
||||
<button
|
||||
style="padding: 0.5rem 1rem; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;"
|
||||
(click)="toggleDisabled()"
|
||||
>
|
||||
{{ globalDisabled() ? 'Enable All' : 'Disable All' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (lastSelection()) {
|
||||
<div style="margin-top: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
|
||||
<strong>Last selection:</strong> {{ lastSelection() }}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- Code Examples -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Code Examples</h3>
|
||||
<div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
|
||||
<h4>Basic Usage:</h4>
|
||||
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-checkbox
|
||||
label="Accept terms"
|
||||
[(ngModel)]="isAccepted"
|
||||
(checkboxChange)="onAccept($event)">
|
||||
</ui-checkbox></code></pre>
|
||||
|
||||
<h4>With Description:</h4>
|
||||
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-checkbox
|
||||
label="Marketing emails"
|
||||
description="Receive promotional content"
|
||||
variant="success"
|
||||
size="lg"
|
||||
[(ngModel)]="emailOptIn">
|
||||
</ui-checkbox></code></pre>
|
||||
|
||||
<h4>Required Field:</h4>
|
||||
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-checkbox
|
||||
label="I agree to terms"
|
||||
[required]="true"
|
||||
state="error"
|
||||
[(ngModel)]="agreedToTerms">
|
||||
</ui-checkbox></code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Current Values -->
|
||||
<section style="margin-bottom: 3rem;">
|
||||
<h3>Current Values</h3>
|
||||
<div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; max-height: 400px; overflow-y: auto;">
|
||||
<pre>{{ getCurrentValues() }}</pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
h2 {
|
||||
color: hsl(279, 14%, 11%);
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid hsl(258, 100%, 47%);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: hsl(279, 14%, 25%);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: hsl(279, 14%, 35%);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
code {
|
||||
color: hsl(279, 14%, 15%);
|
||||
}
|
||||
|
||||
section {
|
||||
border: 1px solid #e9ecef;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class CheckboxDemoComponent {
|
||||
// Basic checkboxes
|
||||
basicChecked1 = signal<boolean>(false);
|
||||
basicChecked2 = signal<boolean>(true);
|
||||
basicChecked3 = signal<boolean>(false);
|
||||
|
||||
// Size variants
|
||||
sizeSmall = signal<boolean>(false);
|
||||
sizeMedium = signal<boolean>(true);
|
||||
sizeLarge = signal<boolean>(false);
|
||||
|
||||
// Color variants
|
||||
variantPrimary = signal<boolean>(true);
|
||||
variantSecondary = signal<boolean>(false);
|
||||
variantSuccess = signal<boolean>(true);
|
||||
variantWarning = signal<boolean>(false);
|
||||
variantDanger = signal<boolean>(false);
|
||||
|
||||
// States
|
||||
stateDisabledUnchecked = signal<boolean>(false);
|
||||
stateDisabledChecked = signal<boolean>(true);
|
||||
stateRequired = signal<boolean>(false);
|
||||
stateError = signal<boolean>(false);
|
||||
|
||||
// With descriptions
|
||||
descChecked1 = signal<boolean>(false);
|
||||
descChecked2 = signal<boolean>(true);
|
||||
descChecked3 = signal<boolean>(true);
|
||||
|
||||
// Control states
|
||||
globalDisabled = signal<boolean>(false);
|
||||
lastSelection = signal<string>('');
|
||||
|
||||
onCheckboxChange(checkboxId: string, checked: boolean): void {
|
||||
this.lastSelection.set(`${checkboxId}: ${checked ? 'checked' : 'unchecked'}`);
|
||||
console.log(`Checkbox ${checkboxId} changed:`, checked);
|
||||
}
|
||||
|
||||
checkAll(): void {
|
||||
// Update all non-disabled checkboxes to checked
|
||||
this.basicChecked1.set(true);
|
||||
this.basicChecked2.set(true);
|
||||
this.basicChecked3.set(true);
|
||||
this.sizeSmall.set(true);
|
||||
this.sizeMedium.set(true);
|
||||
this.sizeLarge.set(true);
|
||||
this.variantPrimary.set(true);
|
||||
this.variantSecondary.set(true);
|
||||
this.variantSuccess.set(true);
|
||||
this.variantWarning.set(true);
|
||||
this.variantDanger.set(true);
|
||||
this.stateRequired.set(true);
|
||||
this.stateError.set(true);
|
||||
this.descChecked1.set(true);
|
||||
this.descChecked2.set(true);
|
||||
this.descChecked3.set(true);
|
||||
|
||||
this.lastSelection.set('All checkboxes checked');
|
||||
}
|
||||
|
||||
uncheckAll(): void {
|
||||
// Update all non-disabled checkboxes to unchecked
|
||||
this.basicChecked1.set(false);
|
||||
this.basicChecked2.set(false);
|
||||
this.basicChecked3.set(false);
|
||||
this.sizeSmall.set(false);
|
||||
this.sizeMedium.set(false);
|
||||
this.sizeLarge.set(false);
|
||||
this.variantPrimary.set(false);
|
||||
this.variantSecondary.set(false);
|
||||
this.variantSuccess.set(false);
|
||||
this.variantWarning.set(false);
|
||||
this.variantDanger.set(false);
|
||||
this.stateRequired.set(false);
|
||||
this.stateError.set(false);
|
||||
this.descChecked1.set(false);
|
||||
this.descChecked2.set(false);
|
||||
this.descChecked3.set(false);
|
||||
|
||||
this.lastSelection.set('All checkboxes unchecked');
|
||||
}
|
||||
|
||||
toggleDisabled(): void {
|
||||
this.globalDisabled.update(disabled => !disabled);
|
||||
this.lastSelection.set(`Global disabled: ${this.globalDisabled() ? 'enabled' : 'disabled'}`);
|
||||
}
|
||||
|
||||
getCurrentValues(): string {
|
||||
const values = {
|
||||
basic: {
|
||||
checked1: this.basicChecked1(),
|
||||
checked2: this.basicChecked2(),
|
||||
checked3: this.basicChecked3()
|
||||
},
|
||||
sizes: {
|
||||
small: this.sizeSmall(),
|
||||
medium: this.sizeMedium(),
|
||||
large: this.sizeLarge()
|
||||
},
|
||||
variants: {
|
||||
primary: this.variantPrimary(),
|
||||
secondary: this.variantSecondary(),
|
||||
success: this.variantSuccess(),
|
||||
warning: this.variantWarning(),
|
||||
danger: this.variantDanger()
|
||||
},
|
||||
states: {
|
||||
disabledUnchecked: this.stateDisabledUnchecked(),
|
||||
disabledChecked: this.stateDisabledChecked(),
|
||||
required: this.stateRequired(),
|
||||
error: this.stateError()
|
||||
},
|
||||
descriptions: {
|
||||
desc1: this.descChecked1(),
|
||||
desc2: this.descChecked2(),
|
||||
desc3: this.descChecked3()
|
||||
},
|
||||
controls: {
|
||||
globalDisabled: this.globalDisabled(),
|
||||
lastSelection: this.lastSelection()
|
||||
}
|
||||
};
|
||||
|
||||
return JSON.stringify(values, null, 2);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user