6f0ab0cf5f
- Replace incorrect semantic token names with correct ones: • $semantic-border-width-thin → $semantic-border-width-1 • $semantic-color-border-default → $semantic-color-border-primary • $semantic-spacing-content-* → $semantic-spacing-component-* • $semantic-typography-body-* → $semantic-typography-font-size-* • $semantic-typography-caption-* → $semantic-typography-font-size-* • $semantic-motion-easing-standard → $semantic-easing-standard • $semantic-color-surface-tertiary → $semantic-color-surface-secondary • Various hover color tokens → base color tokens - Fix typography map usage errors: • Replace heading map tokens with individual size tokens • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size - Update affected components: • tooltip, divider, progress-circle, range-slider components • Related demo components and SCSS files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
399 lines
13 KiB
TypeScript
399 lines
13 KiB
TypeScript
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/checkbox.component';
|
|
|
|
@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);
|
|
}
|
|
} |