diff --git a/.agents/skills/angular-developer/references/angular-animations.md b/.agents/skills/angular-developer/references/angular-animations.md index 4abc961a..d91d6c95 100644 --- a/.agents/skills/angular-developer/references/angular-animations.md +++ b/.agents/skills/angular-developer/references/angular-animations.md @@ -16,7 +16,7 @@ Use these directly on elements to apply CSS classes during the enter or leave ph ```html @if (isShown()) {
-

The box is entering.

+

The box is entering.

} ``` @@ -24,27 +24,27 @@ Use these directly on elements to apply CSS classes during the enter or leave ph ```css /* Ensure you have a starting style if using transitions instead of keyframes */ .enter-container { - border: 1px solid #dddddd; - margin-top: 1em; - padding: 20px; - font-weight: bold; - font-size: 20px; + border: 1px solid #dddddd; + margin-top: 1em; + padding: 20px; + font-weight: bold; + font-size: 20px; } .enter-container p { - margin: 0; + margin: 0; } .enter-animation { - animation: slide-fade 1s; + animation: slide-fade 1s; } @keyframes slide-fade { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } } ``` @@ -84,11 +84,11 @@ Toggle CSS classes on elements using property binding to trigger transitions. ```css div { - transition: height 0.3s ease-out; - height: 100px; + transition: height 0.3s ease-out; + height: 100px; } div.open { - height: 200px; + height: 200px; } ``` @@ -98,15 +98,15 @@ You can use `css-grid` to animate to auto height. ```css .container { - display: grid; - grid-template-rows: 0fr; - transition: grid-template-rows 0.3s; + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.3s; } .container.open { - grid-template-rows: 1fr; + grid-template-rows: 1fr; } .container > div { - overflow: hidden; + overflow: hidden; } ``` @@ -134,27 +134,29 @@ For older projects (pre v20.2 or where `@angular/animations` is already heavily ```ts bootstrapApplication(App, { - providers: [provideAnimationsAsync()], + providers: [provideAnimationsAsync()], }); ``` ### Defining Transitions ```ts -import {signal} from '@angular/core'; -import {trigger, state, style, animate, transition} from '@angular/animations'; +import { signal } from '@angular/core'; +import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ - animations: [ - trigger('openClose', [ - state('open', style({opacity: 1})), - state('closed', style({opacity: 0})), - transition('open <=> closed', [animate('0.5s')]), - ]), - ], - template: `
...
`, + animations: [ + trigger('openClose', [ + state('open', style({ opacity: 1 })), + state('closed', style({ opacity: 0 })), + transition('open <=> closed', [animate('0.5s')]), + ]), + ], + template: ` +
...
+ `, }) export class OpenClose { - protected readonly isOpen = signal(true); + protected readonly isOpen = signal(true); } ``` diff --git a/.agents/skills/angular-developer/references/angular-aria.md b/.agents/skills/angular-developer/references/angular-aria.md index 4241a257..297d20e5 100644 --- a/.agents/skills/angular-developer/references/angular-aria.md +++ b/.agents/skills/angular-developer/references/angular-aria.md @@ -31,29 +31,31 @@ Organizes related content into expandable/collapsible sections. ```ts @Component({ - selector: 'app-cmp', - imports: [AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger], - template: `...`, - styles: [], + selector: 'app-cmp', + imports: [AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger], + template: ` + ... + `, + styles: [], }) export class App { - protected readonly title = signal('angular-app'); + protected readonly title = signal('angular-app'); } ``` ```html
-
- -
- -

Lazy loaded content here.

- -
-
+
+ +
+ +

Lazy loaded content here.

+ +
+
``` @@ -62,13 +64,13 @@ Target the `[aria-expanded]` attribute on the trigger to rotate icons, and style ```css .accordion-header[aria-expanded='true'] .icon { - transform: rotate(180deg); + transform: rotate(180deg); } /* The panel directive handles DOM removal, but you can style the transition */ .accordion-panel { - padding: 1rem; - border-top: 1px solid #ccc; + padding: 1rem; + border-top: 1px solid #ccc; } ``` @@ -86,21 +88,23 @@ A foundational directive for displaying a list of options. Used for visible sele ```ts @Component({ - selector: 'app-cmp', - imports: [Listbox, Option], - template: `...`, - styles: [], + selector: 'app-cmp', + imports: [Listbox, Option], + template: ` + ... + `, + styles: [], }) export class App { - protected readonly title = signal('angular-app'); + protected readonly title = signal('angular-app'); } ``` ```html ``` @@ -109,16 +113,16 @@ Target `[aria-selected="true"]` for selected state and `:focus-visible` or `[dat ```css .option { - padding: 8px; - cursor: pointer; + padding: 8px; + cursor: pointer; } .option[aria-selected='true'] { - background: #e0f7fa; - font-weight: bold; + background: #e0f7fa; + font-weight: bold; } /* Focus state managed by aria */ .option:focus-visible { - outline: 2px solid blue; + outline: 2px solid blue; } ``` @@ -135,8 +139,8 @@ These patterns combine the `ngCombobox` directive (applied directly to the trigg **Imports:** ```ts -import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox'; -import {Listbox, Option} from '@angular/aria/listbox'; +import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox'; +import { Listbox, Option } from '@angular/aria/listbox'; ``` **Directives:** `ngCombobox`, `ngComboboxPopup`, `ngComboboxWidget`, `ngListbox`, `ngOption`. @@ -144,50 +148,47 @@ import {Listbox, Option} from '@angular/aria/listbox'; ```html
- - - - - + + + + +
- {{ selectedValue() ?? 'Choose an option' }} - ▼ + {{ selectedValue() ?? 'Choose an option' }} + ▼
- + ``` @@ -196,17 +197,17 @@ Style the popup container to look like a dropdown floating above content (often ```css .select-trigger { - width: 200px; - padding: 8px; - text-align: left; + width: 200px; + padding: 8px; + text-align: left; } .dropdown-menu { - list-style: none; - padding: 0; - margin: 0; - border: 1px solid #ccc; - background: white; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + list-style: none; + padding: 0; + margin: 0; + border: 1px solid #ccc; + background: white; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } ``` @@ -225,22 +226,22 @@ For actions, commands, and context menus (not for form selection). ```html
-
File
-
Edit
+
File
+
Edit
- -
New
-
Open
- + +
New
+
Open
+
- -
Cut
-
Copy
- + +
Cut
+
Copy
+
``` @@ -249,19 +250,19 @@ Use flexbox for the menubar. Hide/show submenus based on the trigger's state. ```css .menubar { - display: flex; - gap: 10px; - list-style: none; - padding: 0; + display: flex; + gap: 10px; + list-style: none; + padding: 0; } .menu { - background: white; - border: 1px solid #ccc; - padding: 5px 0; + background: white; + border: 1px solid #ccc; + padding: 5px 0; } .menu li { - padding: 5px 15px; - cursor: pointer; + padding: 5px 15px; + cursor: pointer; } ``` @@ -279,17 +280,17 @@ Layered content sections where only one panel is visible. ```html
- - -
- Profile Settings -
-
- Security Settings -
+ + +
+ Profile Settings +
+
+ Security Settings +
``` @@ -298,22 +299,22 @@ Target `[aria-selected="true"]` on the tab buttons. ```css .tab-list { - display: flex; - border-bottom: 2px solid #ccc; - list-style: none; - padding: 0; + display: flex; + border-bottom: 2px solid #ccc; + list-style: none; + padding: 0; } .tab-btn { - padding: 10px 20px; - cursor: pointer; - border-bottom: 2px solid transparent; + padding: 10px 20px; + cursor: pointer; + border-bottom: 2px solid transparent; } .tab-btn[aria-selected='true'] { - border-bottom-color: blue; - font-weight: bold; + border-bottom-color: blue; + font-weight: bold; } .tab-panel { - padding: 20px; + padding: 20px; } ``` @@ -331,10 +332,10 @@ Groups related controls (like text formatting). ```html
-
- - -
+
+ + +
``` @@ -343,18 +344,18 @@ Target `[aria-pressed="true"]` (for toggle buttons) or `[aria-checked="true"]` ( ```css .toolbar { - display: flex; - gap: 5px; - padding: 8px; - background: #f5f5f5; + display: flex; + gap: 5px; + padding: 8px; + background: #f5f5f5; } .tool-btn { - padding: 5px 10px; - border: 1px solid #ccc; + padding: 5px 10px; + border: 1px solid #ccc; } .tool-btn[aria-pressed='true'], .tool-btn[aria-checked='true'] { - background: #ddd; + background: #ddd; } ``` @@ -372,15 +373,15 @@ Displays hierarchical data (file systems, nested nav). ```html ``` @@ -390,16 +391,16 @@ Target `[aria-expanded]` to show/hide children or rotate chevron icons. Use `pad ```css .tree, .tree-group { - list-style: none; - padding-left: 20px; + list-style: none; + padding-left: 20px; } .tree-label::before { - content: '▶ '; - display: inline-block; - transition: transform 0.2s; + content: '▶ '; + display: inline-block; + transition: transform 0.2s; } li[aria-expanded='true'] > .tree-label::before { - transform: rotate(90deg); + transform: rotate(90deg); } ``` @@ -412,16 +413,16 @@ A two-dimensional interactive collection of cells enabling navigation via arrow ```html - - - - - - - - + + + + + + + +
NameStatus
Project A - -
NameStatus
Project A + +
``` @@ -430,19 +431,19 @@ Target `[aria-selected="true"]` for selected cells and `:focus-visible` for the ```css .grid-table { - border-collapse: collapse; + border-collapse: collapse; } [ngGridCell] { - padding: 8px; - border: 1px solid #ddd; + padding: 8px; + border: 1px solid #ddd; } [ngGridCell][aria-selected='true'] { - background: #e3f2fd; + background: #e3f2fd; } /* Focus state managed by roving tabindex */ [ngGridCell]:focus-visible { - outline: 2px solid #2196f3; - outline-offset: -2px; + outline: 2px solid #2196f3; + outline-offset: -2px; } ``` @@ -453,36 +454,36 @@ Angular Aria provides standard Component Harnesses (based on `@angular/cdk/testi **Imports:** ```ts -import {HarnessLoader} from '@angular/cdk/testing'; -import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {AccordionGroupHarness, AccordionHarness} from '@angular/aria/accordion/testing'; -import {ListboxHarness, ListboxOptionHarness} from '@angular/aria/listbox/testing'; +import { HarnessLoader } from '@angular/cdk/testing'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { AccordionGroupHarness, AccordionHarness } from '@angular/aria/accordion/testing'; +import { ListboxHarness, ListboxOptionHarness } from '@angular/aria/listbox/testing'; ``` ### Example: Testing an Accordion with Harnesses ```ts describe('MyAccordionComponent', () => { - let fixture: ComponentFixture; - let loader: HarnessLoader; + let fixture: ComponentFixture; + let loader: HarnessLoader; - beforeEach(async () => { - fixture = TestBed.createComponent(MyAccordionComponent); - await fixture.whenStable(); - loader = TestbedHarnessEnvironment.loader(fixture); - }); + beforeEach(async () => { + fixture = TestBed.createComponent(MyAccordionComponent); + await fixture.whenStable(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); - it('should expand accordion on toggle', async () => { - // Get the harness by its trigger title - const accordion = await loader.getHarness(AccordionHarness.with({title: 'Section 1'})); + it('should expand accordion on toggle', async () => { + // Get the harness by its trigger title + const accordion = await loader.getHarness(AccordionHarness.with({ title: 'Section 1' })); - expect(await accordion.isExpanded()).toBeFalse(); + expect(await accordion.isExpanded()).toBeFalse(); - // Expand the accordion - await accordion.expand(); + // Expand the accordion + await accordion.expand(); - expect(await accordion.isExpanded()).toBeTrue(); - }); + expect(await accordion.isExpanded()).toBeTrue(); + }); }); ``` @@ -495,9 +496,9 @@ The `[formField]` directive automatically detects directives like `ngCombobox` o **Imports:** ```ts -import {form, schema, required} from '@angular/forms/signals'; -import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox'; -import {Listbox, Option} from '@angular/aria/listbox'; +import { form, schema, required } from '@angular/forms/signals'; +import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox'; +import { Listbox, Option } from '@angular/aria/listbox'; ``` ### Example 1: Autocomplete Combobox inside a Form @@ -515,29 +516,27 @@ You bind it directly using `[formField]`: ```html
- - - - -
    -
  • San Francisco
    • -
  • New York
    • -
- + + + + +
    +
  • San Francisco
    • +
  • New York
    • +
+
``` @@ -547,34 +546,32 @@ Apply `ngCombobox` directly to a focusable `div` trigger and bind to `[formField ```html
- -
- {{ myForm.city.value() || 'Choose your city' }} - ▼ -
- - -
    -
  • San Francisco
    • -
  • New York
    • -
- + +
+ {{ myForm.city.value() || 'Choose your city' }} + ▼ +
+ + +
    +
  • San Francisco
    • +
  • New York
    • +
+
``` @@ -584,9 +581,9 @@ You can bind a multi-selectable Listbox directly to a form array: ```html ``` diff --git a/.agents/skills/angular-developer/references/cli.md b/.agents/skills/angular-developer/references/cli.md index d589fb13..ac9b0e25 100644 --- a/.agents/skills/angular-developer/references/cli.md +++ b/.agents/skills/angular-developer/references/cli.md @@ -48,7 +48,7 @@ To proxy API requests during development (e.g., rerouting `/api` to a local Node 1. Create `src/proxy.conf.json`: ```json { - "/api/**": {"target": "http://localhost:3000", "secure": false} + "/api/**": { "target": "http://localhost:3000", "secure": false } } ``` 2. Update `angular.json` under the `serve` target: diff --git a/.agents/skills/angular-developer/references/component-harnesses.md b/.agents/skills/angular-developer/references/component-harnesses.md index 384c5baa..84602574 100644 --- a/.agents/skills/angular-developer/references/component-harnesses.md +++ b/.agents/skills/angular-developer/references/component-harnesses.md @@ -17,32 +17,32 @@ The `TestbedHarnessEnvironment` is the entry point for using harnesses in unit t ### Example: Testing with a `MatButtonHarness` ```ts -import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatButtonHarness} from '@angular/material/button/testing'; -import {MyButtonContainerComponent} from './my-button-container.component'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatButtonHarness } from '@angular/material/button/testing'; +import { MyButtonContainerComponent } from './my-button-container.component'; describe('MyButtonContainerComponent', () => { - let fixture: ComponentFixture; - let loader: HarnessLoader; + let fixture: ComponentFixture; + let loader: HarnessLoader; - beforeEach(() => { - TestBed.configureTestingModule({}); + beforeEach(() => { + TestBed.configureTestingModule({}); - fixture = TestBed.createComponent(MyButtonContainerComponent); - // Create a harness loader for the component's fixture - loader = TestbedHarnessEnvironment.loader(fixture); - }); + fixture = TestBed.createComponent(MyButtonContainerComponent); + // Create a harness loader for the component's fixture + loader = TestbedHarnessEnvironment.loader(fixture); + }); - it('should find a button with specific text', async () => { - // Load the harness for a MatButton with the text "Submit" - const submitButton = await loader.getHarness(MatButtonHarness.with({text: 'Submit'})); + it('should find a button with specific text', async () => { + // Load the harness for a MatButton with the text "Submit" + const submitButton = await loader.getHarness(MatButtonHarness.with({ text: 'Submit' })); - // Use the harness API to interact with the component - expect(await submitButton.isDisabled()).toBe(false); - await submitButton.click(); + // Use the harness API to interact with the component + expect(await submitButton.isDisabled()).toBe(false); + await submitButton.click(); - // ... assertions - }); + // ... assertions + }); }); ``` diff --git a/.agents/skills/angular-developer/references/component-styling.md b/.agents/skills/angular-developer/references/component-styling.md index 3a1c222a..4f8d95dc 100644 --- a/.agents/skills/angular-developer/references/component-styling.md +++ b/.agents/skills/angular-developer/references/component-styling.md @@ -8,15 +8,15 @@ Styles can be defined inline or in separate files. ```ts @Component({ - selector: 'app-photo', - // Inline styles - styles: ` - img { - border-radius: 50%; - } - `, - // OR external file - styleUrl: 'photo.component.css', + selector: 'app-photo', + // Inline styles + styles: ` + img { + border-radius: 50%; + } + `, + // OR external file + styleUrl: 'photo.component.css', }) export class Photo {} ``` @@ -52,8 +52,8 @@ Targets the component's host element (the element matching the component's selec ```css :host { - display: block; - border: 1px solid black; + display: block; + border: 1px solid black; } ``` @@ -64,7 +64,7 @@ Targets the host element based on some condition in its ancestry. ```css /* Apply styles if any ancestor has the 'theme-dark' class */ :host-context(.theme-dark) { - background-color: #333; + background-color: #333; } ``` @@ -79,9 +79,9 @@ You can use `
Hello
``` diff --git a/.agents/skills/angular-developer/references/components.md b/.agents/skills/angular-developer/references/components.md index 829a46d8..96778b01 100644 --- a/.agents/skills/angular-developer/references/components.md +++ b/.agents/skills/angular-developer/references/components.md @@ -8,21 +8,21 @@ Use the `@Component` decorator to define a component's metadata. ```ts @Component({ - selector: 'app-profile', - template: ` - Profile photo - - `, - styles: ` - img { - border-radius: 50%; - } - `, + selector: 'app-profile', + template: ` + Profile photo + + `, + styles: ` + img { + border-radius: 50%; + } + `, }) export class Profile { - save() { - /* ... */ - } + save() { + /* ... */ + } } ``` @@ -41,9 +41,11 @@ To use a component, add it to the `imports` array of the consuming component and ```ts @Component({ - selector: 'app-root', - imports: [Profile], - template: ``, + selector: 'app-root', + imports: [Profile], + template: ` + + `, }) export class App {} ``` @@ -80,11 +82,11 @@ The `@for` block iterates over collections. The `track` expression is **required ```html
    - @for (item of items(); track item.id; let i = $index, total = $count) { -
  • {{ i + 1 }}/{{ total }}: {{ item.name }}
    • - } @empty { -
  • No items to display.
    • - } + @for (item of items(); track item.id; let i = $index, total = $count) { +
  • {{ i + 1 }}/{{ total }}: {{ item.name }}
    • + } @empty { +
  • No items to display.
    • + }
``` @@ -95,8 +97,13 @@ The `@for` block iterates over collections. The `track` expression is **required The `@switch` block renders content based on a value. It uses strict equality (`===`) and has **no fallthrough**. ```html -@switch (status()) { @case ('loading') { } @case ('error') { } -@case ('success') { } @default { +@switch (status()) { @case ('loading') { + +} @case ('error') { + +} @case ('success') { + +} @default {

Unknown status

} } ``` @@ -104,8 +111,8 @@ The `@switch` block renders content based on a value. It uses strict equality (` **Exhaustive Type Checking**: Use `@default never;` to ensure all cases of a union type are handled. ```html -@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new -state like 'standby' is added } +@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new state like 'standby' is +added } ``` ## Core Concepts diff --git a/.agents/skills/angular-developer/references/creating-services.md b/.agents/skills/angular-developer/references/creating-services.md index 00ba49a4..8f2fbfc1 100644 --- a/.agents/skills/angular-developer/references/creating-services.md +++ b/.agents/skills/angular-developer/references/creating-services.md @@ -13,19 +13,19 @@ ng generate service my-data Or you can manually create a TypeScript class and decorate it with `@Service()`. ```ts -import {Service} from '@angular/core'; +import { Service } from '@angular/core'; @Service() export class BasicDataStore { - private data: string[] = []; + private data: string[] = []; - addData(item: string): void { - this.data.push(item); - } + addData(item: string): void { + this.data.push(item); + } - getData(): string[] { - return [...this.data]; - } + getData(): string[] { + return [...this.data]; + } } ``` @@ -48,21 +48,21 @@ Once a service is created, you can inject it into components, directives, or oth ### Injecting into a Component ```ts -import {Component, inject} from '@angular/core'; -import {BasicDataStore} from './basic-data-store.service'; +import { Component, inject } from '@angular/core'; +import { BasicDataStore } from './basic-data-store.service'; @Component({ - selector: 'app-example', - template: ` -
-

Data items: {{ dataStore.getData().length }}

- -
- `, + selector: 'app-example', + template: ` +
+

Data items: {{ dataStore.getData().length }}

+ +
+ `, }) export class Example { - // Inject the service as a class field - dataStore = inject(BasicDataStore); + // Inject the service as a class field + dataStore = inject(BasicDataStore); } ``` @@ -71,20 +71,20 @@ export class Example { Services can inject other services in the exact same way. ```ts -import {Injectable, inject} from '@angular/core'; -import {AdvancedDataStore} from './advanced-data-store.service'; +import { Injectable, inject } from '@angular/core'; +import { AdvancedDataStore } from './advanced-data-store.service'; @Service() export class BasicDataStore { - // Injecting another service - private advancedDataStore = inject(AdvancedDataStore); + // Injecting another service + private advancedDataStore = inject(AdvancedDataStore); - private data: string[] = []; + private data: string[] = []; - getData(): string[] { - // Combine data from this service and the injected service - return [...this.data, ...this.advancedDataStore.getData()]; - } + getData(): string[] { + // Combine data from this service and the injected service + return [...this.data, ...this.advancedDataStore.getData()]; + } } ``` diff --git a/.agents/skills/angular-developer/references/data-resolvers.md b/.agents/skills/angular-developer/references/data-resolvers.md index d76cc1b6..76b78e3d 100644 --- a/.agents/skills/angular-developer/references/data-resolvers.md +++ b/.agents/skills/angular-developer/references/data-resolvers.md @@ -8,9 +8,9 @@ Implement the `ResolveFn` type. ```ts export const userResolver: ResolveFn = (route, state) => { - const userService = inject(UserService); - const id = route.paramMap.get('id')!; - return userService.getUser(id); + const userService = inject(UserService); + const id = route.paramMap.get('id')!; + return userService.getUser(id); }; ``` @@ -58,9 +58,7 @@ Navigation is blocked if a resolver fails. - Use `catchError` within the resolver to return a `RedirectCommand` or fallback data. ```ts -return userService - .get(id) - .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error'))))); +return userService.get(id).pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error'))))); ``` ## Best Practices diff --git a/.agents/skills/angular-developer/references/define-routes.md b/.agents/skills/angular-developer/references/define-routes.md index e36bdf06..0c76899e 100644 --- a/.agents/skills/angular-developer/references/define-routes.md +++ b/.agents/skills/angular-developer/references/define-routes.md @@ -9,13 +9,13 @@ Define routes in a `Routes` array and provide them using `provideRouter` in your ```ts // app.routes.ts export const routes: Routes = [ - {path: '', component: HomePage}, - {path: 'admin', component: AdminPage}, + { path: '', component: HomePage }, + { path: 'admin', component: AdminPage }, ]; // app.config.ts export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)], + providers: [provideRouter(routes)], }; ``` diff --git a/.agents/skills/angular-developer/references/defining-providers.md b/.agents/skills/angular-developer/references/defining-providers.md index 544b63ac..844679cc 100644 --- a/.agents/skills/angular-developer/references/defining-providers.md +++ b/.agents/skills/angular-developer/references/defining-providers.md @@ -11,15 +11,15 @@ The most common way to provide a service is using `providedIn: 'root'` on an `@I Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided. ```ts -import {InjectionToken} from '@angular/core'; +import { InjectionToken } from '@angular/core'; export interface AppConfig { - apiUrl: string; + apiUrl: string; } export const APP_CONFIG = new InjectionToken('app.config', { - providedIn: 'root', - factory: () => ({apiUrl: 'https://api.example.com'}), + providedIn: 'root', + factory: () => ({ apiUrl: 'https://api.example.com' }), }); ``` @@ -29,28 +29,28 @@ You use the `providers` array when a service lacks `providedIn`, when you want a ```ts @Component({ - providers: [ - // Shorthand for { provide: LocalService, useClass: LocalService } - LocalService, + providers: [ + // Shorthand for { provide: LocalService, useClass: LocalService } + LocalService, - // useClass: Swap implementations - {provide: Logger, useClass: BetterLogger}, + // useClass: Swap implementations + { provide: Logger, useClass: BetterLogger }, - // useValue: Provide static values - {provide: API_URL_TOKEN, useValue: 'https://api.example.com'}, + // useValue: Provide static values + { provide: API_URL_TOKEN, useValue: 'https://api.example.com' }, - // useFactory: Generate value dynamically - { - provide: ApiClient, - useFactory: (http = inject(HttpClient)) => new ApiClient(http), - }, + // useFactory: Generate value dynamically + { + provide: ApiClient, + useFactory: (http = inject(HttpClient)) => new ApiClient(http), + }, - // useExisting: Create an alias - {provide: OldLogger, useExisting: NewLogger}, + // useExisting: Create an alias + { provide: OldLogger, useExisting: NewLogger }, - // multi: Provide multiple values for the same token as an array - {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true}, - ], + // multi: Provide multiple values for the same token as an array + { provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true }, + ], }) export class Example {} ``` @@ -67,6 +67,6 @@ Library authors should export functions that return provider arrays to encapsula ```ts export function provideAnalytics(config: AnalyticsConfig): Provider[] { - return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService]; + return [{ provide: ANALYTICS_CONFIG, useValue: config }, AnalyticsService]; } ``` diff --git a/.agents/skills/angular-developer/references/di-fundamentals.md b/.agents/skills/angular-developer/references/di-fundamentals.md index 5befd573..fa0a9f40 100644 --- a/.agents/skills/angular-developer/references/di-fundamentals.md +++ b/.agents/skills/angular-developer/references/di-fundamentals.md @@ -20,13 +20,13 @@ A **service** is the most common way to share data and functionality across an a Use the `@Service()` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services. ```ts -import {Service} from '@angular/core'; +import { Service } from '@angular/core'; @Service() export class AnalyticsLogger { - trackEvent(category: string, value: string) { - console.log('Analytics event logged:', {category, value}); - } + trackEvent(category: string, value: string) { + console.log('Analytics event logged:', { category, value }); + } } ``` @@ -47,24 +47,26 @@ Use Angular's `inject()` function to request dependencies. You can use the `inject()` function to get an instance of a service (or any other provided token). ```ts -import {Component, inject} from '@angular/core'; -import {Router} from '@angular/router'; -import {AnalyticsLogger} from './analytics-logger.service'; +import { Component, inject } from '@angular/core'; +import { Router } from '@angular/router'; +import { AnalyticsLogger } from './analytics-logger.service'; @Component({ - selector: 'app-navbar', - template: `Detail Page`, + selector: 'app-navbar', + template: ` + Detail Page + `, }) export class Navbar { - // Injecting dependencies using class field initializers - private readonly router = inject(Router); - private readonly analytics = inject(AnalyticsLogger); - - navigateToDetail(event: Event) { - event.preventDefault(); - this.analytics.trackEvent('navigation', '/details'); - this.router.navigate(['/details']); - } + // Injecting dependencies using class field initializers + private readonly router = inject(Router); + private readonly analytics = inject(AnalyticsLogger); + + navigateToDetail(event: Event) { + event.preventDefault(); + this.analytics.trackEvent('navigation', '/details'); + this.router.navigate(['/details']); + } } ``` @@ -80,39 +82,39 @@ Valid places to call `inject()`: 4. **Factory functions** used in providers ```typescript -import {Component, Directive, Service, inject, ElementRef} from '@angular/core'; -import {HttpClient} from '@angular/common/http'; +import { Component, Directive, Service, inject, ElementRef } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; // 1. In a Component (Field Initializer & Constructor) @Component({ - /*...*/ + /*...*/ }) export class Example { - private service1 = inject(MyService); // ✅ Field initializer + private service1 = inject(MyService); // ✅ Field initializer - private service2: MyService; - constructor() { - this.service2 = inject(MyService); // ✅ Constructor body - } + private service2: MyService; + constructor() { + this.service2 = inject(MyService); // ✅ Constructor body + } } // 2. In a Directive @Directive({ - /*...*/ + /*...*/ }) export class MyDirective { - private element = inject(ElementRef); // ✅ Field initializer + private element = inject(ElementRef); // ✅ Field initializer } // 3. In a Service @Service() export class MyService { - private http = inject(HttpClient); // ✅ Field initializer + private http = inject(HttpClient); // ✅ Field initializer } // 4. In a Route Guard (Functional) export const authGuard = () => { - const auth = inject(AuthService); // ✅ Route Guard - return auth.isAuthenticated(); + const auth = inject(AuthService); // ✅ Route Guard + return auth.isAuthenticated(); }; ``` diff --git a/.agents/skills/angular-developer/references/e2e-testing.md b/.agents/skills/angular-developer/references/e2e-testing.md index 1677f6c9..ecfa5005 100644 --- a/.agents/skills/angular-developer/references/e2e-testing.md +++ b/.agents/skills/angular-developer/references/e2e-testing.md @@ -36,26 +36,26 @@ A typical test might look like this: // in devtools/cypress/integration/profiler.spec.ts describe('Profiler', () => { - beforeEach(() => { - cy.visit('/?e2e-app'); - cy.wait(1000); - cy.get('ng-devtools-tabs').find('a').contains('Profiler').click(); - }); - - it('should record and display profiling data', () => { - // Find the record button and click it - cy.get('button[aria-label="start-recording-button"]').click(); - - // Interact with the test application to generate profiling data - cy.get('body').find('#cards button').first().click(); - cy.wait(500); - - // Stop recording - cy.get('button[aria-label="stop-recording-button"]').click(); - - // Assert that the flame graph is now visible - cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible'); - }); + beforeEach(() => { + cy.visit('/?e2e-app'); + cy.wait(1000); + cy.get('ng-devtools-tabs').find('a').contains('Profiler').click(); + }); + + it('should record and display profiling data', () => { + // Find the record button and click it + cy.get('button[aria-label="start-recording-button"]').click(); + + // Interact with the test application to generate profiling data + cy.get('body').find('#cards button').first().click(); + cy.wait(500); + + // Stop recording + cy.get('button[aria-label="stop-recording-button"]').click(); + + // Assert that the flame graph is now visible + cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible'); + }); }); ``` diff --git a/.agents/skills/angular-developer/references/environment-configuration.md b/.agents/skills/angular-developer/references/environment-configuration.md index 311e935c..027658ba 100644 --- a/.agents/skills/angular-developer/references/environment-configuration.md +++ b/.agents/skills/angular-developer/references/environment-configuration.md @@ -31,21 +31,21 @@ This creates environment-specific files such as: ```ts // environment.ts export const environment = { - apiUrl: 'https://api.example.com', + apiUrl: 'https://api.example.com', }; ``` ```ts // environment.development.ts export const environment = { - apiUrl: 'http://localhost:3000', + apiUrl: 'http://localhost:3000', }; ``` Import the environment where needed: ```ts -import {environment} from '../environments/environment'; +import { environment } from '../environments/environment'; const apiUrl = environment.apiUrl; ``` @@ -72,44 +72,44 @@ initialization. ```json // src/assets/config.json { - "apiUrl": "https://api.example.com" + "apiUrl": "https://api.example.com" } ``` Load the configuration before the application starts: ```ts -import {Service, inject} from '@angular/core'; -import {HttpClient} from '@angular/common/http'; +import { Service, inject } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; @Service() export class AppConfigService { - private config!: {apiUrl: string}; + private config!: { apiUrl: string }; - private readonly http = inject(HttpClient); + private readonly http = inject(HttpClient); - loadConfig() { - return this.http.get('/assets/config.json').pipe( - tap((data) => { - this.config = data; - }), - ); - } + loadConfig() { + return this.http.get('/assets/config.json').pipe( + tap((data) => { + this.config = data; + }), + ); + } - get apiUrl(): string { - return this.config.apiUrl; - } + get apiUrl(): string { + return this.config.apiUrl; + } } ``` Register the loader during application bootstrap: ```ts -import {provideAppInitializer, inject} from '@angular/core'; +import { provideAppInitializer, inject } from '@angular/core'; provideAppInitializer(() => { - const config = inject(AppConfigService); - return config.loadConfig(); + const config = inject(AppConfigService); + return config.loadConfig(); }); ``` diff --git a/.agents/skills/angular-developer/references/host-elements.md b/.agents/skills/angular-developer/references/host-elements.md index 939161f1..0f87ff27 100644 --- a/.agents/skills/angular-developer/references/host-elements.md +++ b/.agents/skills/angular-developer/references/host-elements.md @@ -8,25 +8,25 @@ Use the `host` property in the `@Component` decorator to bind properties, attrib ```ts @Component({ - selector: 'custom-slider', - host: { - 'role': 'slider', // Static attribute - '[attr.aria-valuenow]': 'value', // Attribute binding - '[class.active]': 'isActive()', // Class binding - '[style.color]': 'color()', // Style binding - '[tabIndex]': 'disabled ? -1 : 0', // Property binding - '(keydown)': 'onKeyDown($event)', // Event binding - }, + selector: 'custom-slider', + host: { + role: 'slider', // Static attribute + '[attr.aria-valuenow]': 'value', // Attribute binding + '[class.active]': 'isActive()', // Class binding + '[style.color]': 'color()', // Style binding + '[tabIndex]': 'disabled ? -1 : 0', // Property binding + '(keydown)': 'onKeyDown($event)', // Event binding + }, }) export class CustomSlider { - protected readonly value = 0; - protected readonly disabled = false; - protected readonly isActive = signal(false); - protected readonly color = signal('blue'); - - onKeyDown(event: KeyboardEvent) { - /* ... */ - } + protected readonly value = 0; + protected readonly disabled = false; + protected readonly isActive = signal(false); + protected readonly color = signal('blue'); + + onKeyDown(event: KeyboardEvent) { + /* ... */ + } } ``` @@ -36,15 +36,15 @@ export class CustomSlider { ```ts export class CustomSlider { - @HostBinding('tabIndex') - get tabIndex() { - return this.disabled ? -1 : 0; - } - - @HostListener('keydown', ['$event']) - onKeyDown(event: KeyboardEvent) { - /* ... */ - } + @HostBinding('tabIndex') + get tabIndex() { + return this.disabled ? -1 : 0; + } + + @HostListener('keydown', ['$event']) + onKeyDown(event: KeyboardEvent) { + /* ... */ + } } ``` @@ -61,15 +61,17 @@ If both the component (host binding) and the consumer (template binding) bind to Use `HostAttributeToken` with the `inject` function to read static attributes from the host element at construction time. ```ts -import {Component, HostAttributeToken, inject} from '@angular/core'; +import { Component, HostAttributeToken, inject } from '@angular/core'; @Component({ - selector: 'app-btn', - template: ``, + selector: 'app-btn', + template: ` + + `, }) export class AppButton { - // Throws error if 'type' is missing unless injected with { optional: true } - type = inject(new HostAttributeToken('type')); + // Throws error if 'type' is missing unless injected with { optional: true } + type = inject(new HostAttributeToken('type')); } ``` diff --git a/.agents/skills/angular-developer/references/injection-context.md b/.agents/skills/angular-developer/references/injection-context.md index c62d2ee3..8959aa96 100644 --- a/.agents/skills/angular-developer/references/injection-context.md +++ b/.agents/skills/angular-developer/references/injection-context.md @@ -34,18 +34,18 @@ export class Example { If you need to run a function within an injection context (often needed for dynamic component creation or testing), use `runInInjectionContext`. This requires access to an existing injector (like `EnvironmentInjector` or `Injector`). ```ts -import {inject, EnvironmentInjector, runInInjectionContext, Service} from '@angular/core'; +import { inject, EnvironmentInjector, runInInjectionContext, Service } from '@angular/core'; @Service() export class MyService { - private injector = inject(EnvironmentInjector); - - doSomethingDynamic() { - runInInjectionContext(this.injector, () => { - // ✅ Now valid to use inject() here - const router = inject(Router); - }); - } + private injector = inject(EnvironmentInjector); + + doSomethingDynamic() { + runInInjectionContext(this.injector, () => { + // ✅ Now valid to use inject() here + const router = inject(Router); + }); + } } ``` @@ -54,10 +54,10 @@ export class MyService { Use `assertInInjectionContext` in utility functions to guarantee they are called from a valid context. It throws a clear error if not. ```ts -import {assertInInjectionContext, inject, ElementRef} from '@angular/core'; +import { assertInInjectionContext, inject, ElementRef } from '@angular/core'; export function injectNativeElement(): T { - assertInInjectionContext(injectNativeElement); - return inject(ElementRef).nativeElement; + assertInInjectionContext(injectNativeElement); + return inject(ElementRef).nativeElement; } ``` diff --git a/.agents/skills/angular-developer/references/inputs.md b/.agents/skills/angular-developer/references/inputs.md index 69932e04..4f6d2bc1 100644 --- a/.agents/skills/angular-developer/references/inputs.md +++ b/.agents/skills/angular-developer/references/inputs.md @@ -7,21 +7,23 @@ Inputs allow data to flow from a parent component to a child component. Angular Declare inputs using the `input()` function. This returns an `InputSignal`. ```ts -import {Component, input, computed} from '@angular/core'; +import { Component, input, computed } from '@angular/core'; @Component({ - selector: 'app-user', - template: `

{{ label() }} ({{ age() }})

`, + selector: 'app-user', + template: ` +

{{ label() }} ({{ age() }})

+ `, }) export class User { - // Optional input with default value - readonly name = input('Guest'); + // Optional input with default value + readonly name = input('Guest'); - // Required input - readonly age = input.required(); + // Required input + readonly age = input.required(); - // Inputs are reactive signals - protected readonly label = computed(() => `Name: ${this.name()}`); + // Inputs are reactive signals + protected readonly label = computed(() => `Name: ${this.name()}`); } ``` @@ -57,15 +59,17 @@ Use `model()` to create an input that supports two-way data binding. ```ts @Component({ - selector: 'custom-counter', - template: ``, + selector: 'custom-counter', + template: ` + + `, }) export class CustomCounter { - readonly value = model(0); + readonly value = model(0); - increment() { - this.value.update((v) => v + 1); - } + increment() { + this.value.update((v) => v + 1); + } } ``` diff --git a/.agents/skills/angular-developer/references/mcp.md b/.agents/skills/angular-developer/references/mcp.md index 54460876..d43fcbe0 100644 --- a/.agents/skills/angular-developer/references/mcp.md +++ b/.agents/skills/angular-developer/references/mcp.md @@ -37,12 +37,12 @@ Create a file named `.antigravity/mcp.json` in your project's root: ```json { - "mcpServers": { - "angular-cli": { - "command": "npx", - "args": ["-y", "@angular/cli", "mcp"] - } - } + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + } + } } ``` @@ -52,12 +52,12 @@ Create `.gemini/settings.json` in the project root: ```json { - "mcpServers": { - "angular-cli": { - "command": "npx", - "args": ["-y", "@angular/cli", "mcp"] - } - } + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + } + } } ``` @@ -67,12 +67,12 @@ Create `.cursor/mcp.json` in the project root (or globally at `~/.cursor/mcp.jso ```json { - "mcpServers": { - "angular-cli": { - "command": "npx", - "args": ["-y", "@angular/cli", "mcp"] - } - } + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + } + } } ``` @@ -82,12 +82,12 @@ Create `.vscode/mcp.json`: ```json { - "servers": { - "angular-cli": { - "command": "npx", - "args": ["-y", "@angular/cli", "mcp"] - } - } + "servers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + } + } } ``` diff --git a/.agents/skills/angular-developer/references/navigate-to-routes.md b/.agents/skills/angular-developer/references/navigate-to-routes.md index 3a1eaa0f..b677c4d2 100644 --- a/.agents/skills/angular-developer/references/navigate-to-routes.md +++ b/.agents/skills/angular-developer/references/navigate-to-routes.md @@ -7,19 +7,19 @@ Angular provides both declarative and programmatic ways to navigate between rout Use the `RouterLink` directive on anchor elements. ```ts -import {RouterLink, RouterLinkActive} from '@angular/router'; +import { RouterLink, RouterLinkActive } from '@angular/router'; @Component({ - imports: [RouterLink, RouterLinkActive], - template: ` - - `, + imports: [RouterLink, RouterLinkActive], + template: ` + + `, }) export class Nav { - userId = '123'; + userId = '123'; } ``` @@ -59,7 +59,7 @@ Uses a string path. Ideal for absolute navigation or full URLs. this.router.navigateByUrl('/products/123?view=details'); // Replace current entry in history -this.router.navigateByUrl('/login', {replaceUrl: true}); +this.router.navigateByUrl('/login', { replaceUrl: true }); ``` ## URL Parameters diff --git a/.agents/skills/angular-developer/references/outputs.md b/.agents/skills/angular-developer/references/outputs.md index 66b84e37..0f3e37e6 100644 --- a/.agents/skills/angular-developer/references/outputs.md +++ b/.agents/skills/angular-developer/references/outputs.md @@ -7,22 +7,24 @@ Outputs allow a child component to emit custom events that a parent component ca Declare outputs using the `output()` function. This returns an `OutputEmitterRef`. ```ts -import {Component, output} from '@angular/core'; +import { Component, output } from '@angular/core'; @Component({ - selector: 'custom-slider', - template: ``, + selector: 'custom-slider', + template: ` + + `, }) export class CustomSlider { - // Output without event data - readonly panelClosed = output(); + // Output without event data + readonly panelClosed = output(); - // Output with event data (number) - readonly valueChanged = output(); + // Output with event data (number) + readonly valueChanged = output(); - changeValue(newValue: number) { - this.valueChanged.emit(newValue); - } + changeValue(newValue: number) { + this.valueChanged.emit(newValue); + } } ``` @@ -55,7 +57,7 @@ When creating components dynamically, you can subscribe to outputs programmatica const componentRef = viewContainerRef.createComponent(CustomSlider); const subscription = componentRef.instance.valueChanged.subscribe((val) => { - console.log('Value changed:', val); + console.log('Value changed:', val); }); // Clean up manually if needed (Angular cleans up destroyed components automatically) diff --git a/.agents/skills/angular-developer/references/reactive-forms.md b/.agents/skills/angular-developer/references/reactive-forms.md index 124da143..9e91bb58 100644 --- a/.agents/skills/angular-developer/references/reactive-forms.md +++ b/.agents/skills/angular-developer/references/reactive-forms.md @@ -16,31 +16,31 @@ Reactive forms are built using these fundamental classes from `@angular/forms`: Import `ReactiveFormsModule` into your component. ```ts -import {Component, inject} from '@angular/core'; -import {ReactiveFormsModule, NonNullableFormBuilder, Validators} from '@angular/forms'; +import { Component, inject } from '@angular/core'; +import { ReactiveFormsModule, NonNullableFormBuilder, Validators } from '@angular/forms'; @Component({ - selector: 'app-profile-editor', - imports: [ReactiveFormsModule], - templateUrl: './profile-editor.component.html', + selector: 'app-profile-editor', + imports: [ReactiveFormsModule], + templateUrl: './profile-editor.component.html', }) export class ProfileEditor { - private readonly fb = inject(NonNullableFormBuilder); - - // Using FormBuilder for concise definition - protected readonly profileForm = this.fb.group({ - firstName: ['', Validators.required], - lastName: '', - address: this.fb.group({ - street: '', - city: '', - }), - aliases: this.fb.array([this.fb.control('')]), - }); - - protected onSubmit() { - console.warn(this.profileForm.value); - } + private readonly fb = inject(NonNullableFormBuilder); + + // Using FormBuilder for concise definition + protected readonly profileForm = this.fb.group({ + firstName: ['', Validators.required], + lastName: '', + address: this.fb.group({ + street: '', + city: '', + }), + aliases: this.fb.array([this.fb.control('')]), + }); + + protected onSubmit() { + console.warn(this.profileForm.value); + } } ``` @@ -56,19 +56,19 @@ Use directives to bind the model to the view: ```html
- + -
- -
+
+ +
-
- @for (alias of profileForm.controls.aliases.controls; track alias) { - - } -
+
+ @for (alias of profileForm.controls.aliases.controls; track alias) { + + } +
- +
``` @@ -101,12 +101,12 @@ updateProfile() { Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events. ```ts -import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms'; +import { ValueChangeEvent, StatusChangeEvent } from '@angular/forms'; this.profileForm.events.subscribe((event) => { - if (event instanceof ValueChangeEvent) { - console.log('New value:', event.value); - } + if (event instanceof ValueChangeEvent) { + console.log('New value:', event.value); + } }); ``` diff --git a/.agents/skills/angular-developer/references/resource.md b/.agents/skills/angular-developer/references/resource.md index e8efe8c8..8b7d3c83 100644 --- a/.agents/skills/angular-developer/references/resource.md +++ b/.agents/skills/angular-developer/references/resource.md @@ -66,7 +66,7 @@ The `Resource` object provides several signals to read its current state: You can optimistically update the resource's value directly. This changes the status to `'local'`. ```ts -this.userResource.value.set({name: 'Optimistic Update'}); +this.userResource.value.set({ name: 'Optimistic Update' }); ``` ## Reactive Data Fetching with `httpResource` diff --git a/.agents/skills/angular-developer/references/route-animations.md b/.agents/skills/angular-developer/references/route-animations.md index 56cebbed..2cb3ccc4 100644 --- a/.agents/skills/angular-developer/references/route-animations.md +++ b/.agents/skills/angular-developer/references/route-animations.md @@ -28,10 +28,10 @@ Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements. ```css /* Example: Cross-fade + Slide */ ::view-transition-old(root) { - animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out; + animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out; } ::view-transition-new(root) { - animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in; + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in; } ``` @@ -41,12 +41,12 @@ Use `onViewTransitionCreated` to skip transitions or customize behavior based on ```ts withViewTransitions({ - onViewTransitionCreated: ({transition, from, to}) => { - // Skip animation for specific routes - if (to.url === '/no-animation') { - transition.skipTransition(); - } - }, + onViewTransitionCreated: ({ transition, from, to }) => { + // Skip animation for specific routes + if (to.url === '/no-animation') { + transition.skipTransition(); + } + }, }); ``` diff --git a/.agents/skills/angular-developer/references/route-guards.md b/.agents/skills/angular-developer/references/route-guards.md index 9169d543..a15be587 100644 --- a/.agents/skills/angular-developer/references/route-guards.md +++ b/.agents/skills/angular-developer/references/route-guards.md @@ -15,15 +15,15 @@ Guards are typically functional since Angular 15. ```ts export const authGuard: CanActivateFn = (route, state) => { - const authService = inject(AuthService); - const router = inject(Router); + const authService = inject(AuthService); + const router = inject(Router); - if (authService.isLoggedIn()) { - return true; - } + if (authService.isLoggedIn()) { + return true; + } - // Redirect to login - return router.parseUrl('/login'); + // Redirect to login + return router.parseUrl('/login'); }; ``` diff --git a/.agents/skills/angular-developer/references/router-lifecycle.md b/.agents/skills/angular-developer/references/router-lifecycle.md index be9aeb6e..f1aff9ce 100644 --- a/.agents/skills/angular-developer/references/router-lifecycle.md +++ b/.agents/skills/angular-developer/references/router-lifecycle.md @@ -17,16 +17,16 @@ Angular Router emits events through the `Router.events` observable, allowing you Inject the `Router` and filter the `events` observable. ```ts -import {Router, NavigationStart, NavigationEnd} from '@angular/router'; +import { Router, NavigationStart, NavigationEnd } from '@angular/router'; export class MyService { - private router = inject(Router); + private router = inject(Router); - constructor() { - this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => { - console.log('Navigated to:', event.url); - }); - } + constructor() { + this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => { + console.log('Navigated to:', event.url); + }); + } } ``` diff --git a/.agents/skills/angular-developer/references/router-testing.md b/.agents/skills/angular-developer/references/router-testing.md index 35328e41..4dccc9ce 100644 --- a/.agents/skills/angular-developer/references/router-testing.md +++ b/.agents/skills/angular-developer/references/router-testing.md @@ -11,30 +11,30 @@ The `RouterTestingHarness` is the primary tool for testing routing scenarios. Yo ### Example Setup ```ts -import {TestBed} from '@angular/core/testing'; -import {provideRouter} from '@angular/router'; -import {RouterTestingHarness} from '@angular/router/testing'; -import {Dashboard} from './dashboard.component'; -import {HeroDetail} from './hero-detail.component'; +import { TestBed } from '@angular/core/testing'; +import { provideRouter } from '@angular/router'; +import { RouterTestingHarness } from '@angular/router/testing'; +import { Dashboard } from './dashboard.component'; +import { HeroDetail } from './hero-detail.component'; describe('Dashboard Component Routing', () => { - let harness: RouterTestingHarness; - - beforeEach(async () => { - // 1. Configure TestBed with test routes - TestBed.configureTestingModule({ - providers: [ - // Use provideRouter with your test-specific routes - provideRouter([ - {path: '', component: Dashboard}, - {path: 'heroes/:id', component: HeroDetail}, - ]), - ], - }); - - // 2. Create the RouterTestingHarness - harness = await RouterTestingHarness.create(); - }); + let harness: RouterTestingHarness; + + beforeEach(async () => { + // 1. Configure TestBed with test routes + TestBed.configureTestingModule({ + providers: [ + // Use provideRouter with your test-specific routes + provideRouter([ + { path: '', component: Dashboard }, + { path: 'heroes/:id', component: HeroDetail }, + ]), + ], + }); + + // 2. Create the RouterTestingHarness + harness = await RouterTestingHarness.create(); + }); }); ``` @@ -51,31 +51,31 @@ Once the harness is created, you can use it to drive navigation and make asserti ```ts it('should navigate to a hero detail when a hero is selected', async () => { - // 1. Navigate to the initial component and get its instance - const dashboard = await harness.navigateByUrl('/', Dashboard); + // 1. Navigate to the initial component and get its instance + const dashboard = await harness.navigateByUrl('/', Dashboard); - // Suppose the dashboard has a method to select a hero - const heroToSelect = {id: 42, name: 'Test Hero'}; - dashboard.selectHero(heroToSelect); + // Suppose the dashboard has a method to select a hero + const heroToSelect = { id: 42, name: 'Test Hero' }; + dashboard.selectHero(heroToSelect); - // Wait for stability after the action that triggers navigation - await harness.fixture.whenStable(); + // Wait for stability after the action that triggers navigation + await harness.fixture.whenStable(); - // 2. Assert on the URL - expect(harness.router.url).toEqual('/heroes/42'); + // 2. Assert on the URL + expect(harness.router.url).toEqual('/heroes/42'); - // 3. Get the activated component after navigation - const heroDetail = await harness.getHarness(HeroDetail); + // 3. Get the activated component after navigation + const heroDetail = await harness.getHarness(HeroDetail); - // 4. Assert on the state of the new component - expect(await heroDetail.componentInstance.hero.name).toBe('Test Hero'); + // 4. Assert on the state of the new component + expect(await heroDetail.componentInstance.hero.name).toBe('Test Hero'); }); it('should get the activated component directly', async () => { - // Navigate and get the component instance in one step - const dashboardInstance = await harness.navigateByUrl('/', Dashboard); + // Navigate and get the component instance in one step + const dashboardInstance = await harness.navigateByUrl('/', Dashboard); - expect(dashboardInstance).toBeInstanceOf(Dashboard); + expect(dashboardInstance).toBeInstanceOf(Dashboard); }); ``` diff --git a/.agents/skills/angular-developer/references/show-routes-with-outlets.md b/.agents/skills/angular-developer/references/show-routes-with-outlets.md index af43f014..903785cd 100644 --- a/.agents/skills/angular-developer/references/show-routes-with-outlets.md +++ b/.agents/skills/angular-developer/references/show-routes-with-outlets.md @@ -7,7 +7,8 @@ The `RouterOutlet` directive is a placeholder where Angular renders the componen Include `` in your template. Angular inserts the routed component as a sibling immediately following the outlet. ```html - + + ``` diff --git a/.agents/skills/angular-developer/references/signal-forms.md b/.agents/skills/angular-developer/references/signal-forms.md index b702e6b6..75f450c6 100644 --- a/.agents/skills/angular-developer/references/signal-forms.md +++ b/.agents/skills/angular-developer/references/signal-forms.md @@ -10,24 +10,24 @@ You can import the following from `@angular/forms/signals`: ```ts import { - form, - FormField, - submit, - // Rules for field state - disabled, - hidden, - readonly, - debounce, - // Schema helpers - applyWhen, - applyEach, - schema, - // Custom validation - validate, - validateHttp, - validateStandardSchema, - // Metadata - metadata, + form, + FormField, + submit, + // Rules for field state + disabled, + hidden, + readonly, + debounce, + // Schema helpers + applyWhen, + applyEach, + schema, + // Custom validation + validate, + validateHttp, + validateStandardSchema, + // Metadata + metadata, } from '@angular/forms/signals'; ``` @@ -36,35 +36,35 @@ import { Use the `form()` function with a Signal model. The structure of the form is derived directly from the model. ```ts -import {Component, signal} from '@angular/core'; -import {form, FormField} from '@angular/forms/signals'; +import { Component, signal } from '@angular/core'; +import { form, FormField } from '@angular/forms/signals'; @Component({ - // ... - imports: [FormField], + // ... + imports: [FormField], }) export class Example { - // 1. Define your model with initial values (avoid undefined) - protected readonly userModel = signal({ - name: '', // CRITICAL: NEVER use null or undefined as initial values - email: '', - age: 0, // Use 0 for numbers, NOT null - address: { - street: '', - city: '', - }, - hobbies: [] as string[], // Use [] for arrays, NOT null - }); - - // WRONG - DO NOT DO THIS: - // badModel = signal({ - // name: null, // ERROR: use '' instead - // age: null, // ERROR: use 0 instead - // items: null // ERROR: use [] instead - // }); - - // 2. Create the form - protected readonly userForm = form(this.userModel); + // 1. Define your model with initial values (avoid undefined) + protected readonly userModel = signal({ + name: '', // CRITICAL: NEVER use null or undefined as initial values + email: '', + age: 0, // Use 0 for numbers, NOT null + address: { + street: '', + city: '', + }, + hobbies: [] as string[], // Use [] for arrays, NOT null + }); + + // WRONG - DO NOT DO THIS: + // badModel = signal({ + // name: null, // ERROR: use '' instead + // age: null, // ERROR: use 0 instead + // items: null // ERROR: use [] instead + // }); + + // 2. Create the form + protected readonly userForm = form(this.userModel); } ``` @@ -73,38 +73,38 @@ export class Example { Import validators from `@angular/forms/signals`. ```ts -import {required, email, min, max, minLength, maxLength, pattern} from '@angular/forms/signals'; +import { required, email, min, max, minLength, maxLength, pattern } from '@angular/forms/signals'; ``` Use them in the schema function passed to `form()`: ```ts userForm = form(this.userModel, (schemaPath) => { - // Required - required(schemaPath.name, {message: 'Name is required'}); - - // Conditional required. - required(schemaPath.name, { - when({valueOf}) { - return valueOf(schemaPath.age) > 10; - }, - }); - // when is only available for required - // Do NOT do this: pattern(p.name, /xxx/, {when /* ERROR */) - - // Email - email(schemaPath.email, {message: 'Invalid email'}); - - // Min/Max for numbers - min(schemaPath.age, 18); - max(schemaPath.age, 100); - - // MinLength/MaxLength for strings/arrays - minLength(schemaPath.password, 8); - maxLength(schemaPath.description, 500); - - // Pattern (Regex) - pattern(schemaPath.zipCode, /^\d{5}$/); + // Required + required(schemaPath.name, { message: 'Name is required' }); + + // Conditional required. + required(schemaPath.name, { + when({ valueOf }) { + return valueOf(schemaPath.age) > 10; + }, + }); + // when is only available for required + // Do NOT do this: pattern(p.name, /xxx/, {when /* ERROR */) + + // Email + email(schemaPath.email, { message: 'Invalid email' }); + + // Min/Max for numbers + min(schemaPath.age, 18); + max(schemaPath.age, 100); + + // MinLength/MaxLength for strings/arrays + minLength(schemaPath.password, 8); + maxLength(schemaPath.description, 500); + + // Pattern (Regex) + pattern(schemaPath.zipCode, /^\d{5}$/); }); ``` @@ -116,7 +116,7 @@ It's important to understand the difference between **FormField** (the structure ```ts // f is a FormField (structural) -const f = form(signal({cat: {name: 'pirojok-the-cat', age: 5}})); +const f = form(signal({ cat: { name: 'pirojok-the-cat', age: 5 } })); f.cat.name; // FormField: You can't get flags from here! f.cat.name.touched(); // ERROR: touched() does not exist on FormField @@ -141,17 +141,17 @@ Similarly in a template: Control field status using rules in the schema. ```ts -import {disabled, readonly, hidden} from '@angular/forms/signals'; +import { disabled, readonly, hidden } from '@angular/forms/signals'; userForm = form(this.userModel, (schemaPath) => { - // Conditionally disabled - disabled(schemaPath.password, {when: ({valueOf}) => !valueOf(schemaPath.createAccount)}); + // Conditionally disabled + disabled(schemaPath.password, { when: ({ valueOf }) => !valueOf(schemaPath.createAccount) }); - // Conditionally hidden (does NOT remove from model, just marks as hidden) - hidden(schemaPath.shippingAddress, {when: ({valueOf}) => valueOf(schemaPath.sameAsBilling)}); + // Conditionally hidden (does NOT remove from model, just marks as hidden) + hidden(schemaPath.shippingAddress, { when: ({ valueOf }) => valueOf(schemaPath.sameAsBilling) }); - // Readonly - readonly(schemaPath.username); + // Readonly + readonly(schemaPath.username); }); ``` @@ -160,7 +160,7 @@ userForm = form(this.userModel, (schemaPath) => { Import `FormField` and use the `[formField]` directive. ```ts -import {FormField} from '@angular/forms/signals'; +import { FormField } from '@angular/forms/signals'; ``` All props on state, such as `disabled`, `hidden`, `readonly` and `name` are bound automatically. @@ -195,7 +195,7 @@ Do NOT do this: `` or ` @@ -284,8 +284,8 @@ onSubmit() { ```ts interface ValidationError { - readonly kind: string; - readonly message?: string; + readonly kind: string; + readonly message?: string; } ``` @@ -298,22 +298,22 @@ Functions passed to rules like `validate()`, `disabled()`, `applyWhen` take a co ```ts validate( - schemaPath.username, - ({ - value, // Signal: Writable current value of the field - fieldTree, // FieldTree: Sub-fields (if it's a group/array) - state, // FieldState: Access flags like state.valid(), state.dirty() - valueOf, // (path) => T: Read values of OTHER fields (tracking dependencies), e.g. valueOf(schemaPath.password) - stateOf, // (path) => FieldState: Access state (valid/dirty) of OTHER fields, e.g. stateOf(schemaPath.password).valid() - pathKeys, // Signal: Path from root to this field - }) => { - // WRONG: if (touched()) ... (touched is not in context) - // RIGHT: if (state.touched()) ... - - if (value() === 'admin') { - return {kind: 'reserved', message: 'Username admin is reserved'}; - } - }, + schemaPath.username, + ({ + value, // Signal: Writable current value of the field + fieldTree, // FieldTree: Sub-fields (if it's a group/array) + state, // FieldState: Access flags like state.valid(), state.dirty() + valueOf, // (path) => T: Read values of OTHER fields (tracking dependencies), e.g. valueOf(schemaPath.password) + stateOf, // (path) => FieldState: Access state (valid/dirty) of OTHER fields, e.g. stateOf(schemaPath.password).valid() + pathKeys, // Signal: Path from root to this field + }) => { + // WRONG: if (touched()) ... (touched is not in context) + // RIGHT: if (state.touched()) ... + + if (value() === 'admin') { + return { kind: 'reserved', message: 'Username admin is reserved' }; + } + }, ); ``` @@ -340,13 +340,13 @@ applyWhen(p.ssn, ({ valueOf }) => valueOf(p.ssn) !== '', (ssnField) => { ... }); ```ts // CORRECT - single argument applyEach(s.items, (item) => { - required(item.name); + required(item.name); }); // WRONG - do NOT pass index applyEach(s.items, (item, index) => { - // ERROR: callback takes 1 argument - required(item.name); + // ERROR: callback takes 1 argument + required(item.name); }); ``` @@ -366,8 +366,7 @@ applyEach(s.items, (item, index) => { } } -@for (item of form.items; track $index; let outerIndex = $index) { @for (option of item.options; -track $index) { +@for (item of form.items; track $index; let outerIndex = $index) { @for (option of item.options; track $index) { } } ``` @@ -394,31 +393,30 @@ Do not use `validate()` for async, instead use `validateAsync()`: 2. The `onError` handler is **REQUIRED** - it is NOT optional! ```ts -import {resource} from '@angular/core'; -import {validateAsync} from '@angular/forms/signals'; +import { resource } from '@angular/core'; +import { validateAsync } from '@angular/forms/signals'; userForm = form(this.userModel, (s) => { - validateAsync(s.username, { - // 1. MUST be a function - params takes context and returns the value - params: ({value}) => value(), - - // 2. Create the resource - factory receives a Signal - factory: (username) => - resource({ - params: username, // Use 'params' in resource() - loader: async ({params: value}) => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - return value === 'taken'; - }, - }), - - // 3. Map success to errors - onSuccess: (isTaken) => - isTaken ? {kind: 'taken', message: 'Username is already taken'} : undefined, - - // 4. Handle errors - THIS IS REQUIRED! - onError: () => ({kind: 'error', message: 'Validation failed'}), - }); + validateAsync(s.username, { + // 1. MUST be a function - params takes context and returns the value + params: ({ value }) => value(), + + // 2. Create the resource - factory receives a Signal + factory: (username) => + resource({ + params: username, // Use 'params' in resource() + loader: async ({ params: value }) => { + await new Promise((resolve) => setTimeout(resolve, 1000)); + return value === 'taken'; + }, + }), + + // 3. Map success to errors + onSuccess: (isTaken) => (isTaken ? { kind: 'taken', message: 'Username is already taken' } : undefined), + + // 4. Handle errors - THIS IS REQUIRED! + onError: () => ({ kind: 'error', message: 'Validation failed' }), + }); }); ``` @@ -427,19 +425,19 @@ userForm = form(this.userModel, (s) => { ```ts // WRONG - params must be a function validateAsync(s.username, { - params: s.username, // ERROR: must be ({ value }) => value() - // ... + params: s.username, // ERROR: must be ({ value }) => value() + // ... }); // WRONG - missing onError (it's required!) validateAsync(s.username, { - params: ({value}) => value(), - factory: (username) => - resource({ - /* ... */ - }), - onSuccess: (result) => (result ? {kind: 'error'} : undefined), - // ERROR: 'onError' is missing but required! + params: ({ value }) => value(), + factory: (username) => + resource({ + /* ... */ + }), + onSuccess: (result) => (result ? { kind: 'error' } : undefined), + // ERROR: 'onError' is missing but required! }); ``` @@ -450,29 +448,29 @@ validateAsync(s.username, { ```ts // CORRECT resource({ - params: mySignal, - loader: async ({params: value}) => { - /* ... */ - }, + params: mySignal, + loader: async ({ params: value }) => { + /* ... */ + }, }); // WRONG resource({ - request: mySignal, // ERROR: should be 'params' - loader: async ({request}) => { - /* ... */ - }, + request: mySignal, // ERROR: should be 'params' + loader: async ({ request }) => { + /* ... */ + }, }); ``` Use `debounce()` to delay synchronization between the UI and the model. ```ts -import {debounce} from '@angular/forms/signals'; +import { debounce } from '@angular/forms/signals'; userForm = form(this.userModel, (s) => { - // Delay model updates by 300ms - debounce(s.username, 300); + // Delay model updates by 300ms + debounce(s.username, 300); }); ``` @@ -480,18 +478,18 @@ userForm = form(this.userModel, (s) => { ```ts form( - data, - (path) => { - applyWhen( - name, - ({value}) => value() !== 'admin', - (namePath) => { - validate(namePath.last /* ... */); - disable(namePath.last /* ... */); - }, - ); - }, - {injector: TestBed.inject(Injector)}, + data, + (path) => { + applyWhen( + name, + ({ value }) => value() !== 'admin', + (namePath) => { + validate(namePath.last /* ... */); + disable(namePath.last /* ... */); + }, + ); + }, + { injector: TestBed.inject(Injector) }, ); ``` @@ -500,17 +498,17 @@ If you need parent field, just pass it to `applyWhen`: ```ts form( - data, - (path) => { - applyWhen( - cat, - ({value}) => value().name !== 'admin', - (catPath) => { - require(cat.catPath /* ... */); - }, - ); - }, - {injector: TestBed.inject(Injector)}, + data, + (path) => { + applyWhen( + cat, + ({ value }) => value().name !== 'admin', + (catPath) => { + require(cat.catPath /* ... */); + }, + ); + }, + { injector: TestBed.inject(Injector) }, ); ``` @@ -548,96 +546,86 @@ form( ### `src/app/app.ts` ```ts -import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; -import { - form, - FormField, - submit, - required, - email, - min, - hidden, - applyEach, - validate, -} from '@angular/forms/signals'; +import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; +import { form, FormField, submit, required, email, min, hidden, applyEach, validate } from '@angular/forms/signals'; @Component({ - selector: 'app-root', - standalone: true, - imports: [FormField], - templateUrl: './app.html', - changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-root', + standalone: true, + imports: [FormField], + templateUrl: './app.html', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class App { - protected readonly model = signal({ - personalInfo: { - firstName: '', - lastName: '', - email: '', - age: 0, - }, - tripDetails: { - destination: 'Mars', - launchDate: '', - }, - package: { - tier: 'economy', - extras: [] as string[], - }, - companions: [] as Array<{name: string; relation: string}>, - }); - - protected readonly bookingForm = form(this.model, (s) => { - required(s.personalInfo.firstName, {message: 'First name is required'}); - required(s.personalInfo.lastName, {message: 'Last name is required'}); - required(s.personalInfo.email, {message: 'Email is required'}); - email(s.personalInfo.email, {message: 'Invalid email address'}); - required(s.personalInfo.age, {message: 'Age is required'}); - min(s.personalInfo.age, 18, {message: 'Must be at least 18'}); - - required(s.tripDetails.destination); - required(s.tripDetails.launchDate); - validate(s.tripDetails.launchDate, ({value}) => { - const date = new Date(value()); - if (isNaN(date.getTime())) return undefined; - const today = new Date(); - if (date < today) { - return {kind: 'pastData', message: 'Launch date must be in the future'}; - } - return undefined; - }); - - // valueOf is used to access values of other fields in rules - hidden(s.package.extras, {when: ({valueOf}) => valueOf(s.package.tier) === 'economy'}); - - applyEach(s.companions, (companion) => { - required(companion.name, {message: 'Companion name required'}); - required(companion.relation, {message: 'Relation required'}); - }); - }); - - addCompanion() { - this.model.update((m) => ({ - ...m, - companions: [...m.companions, {name: '', relation: ''}], - })); - } - - removeCompanion(index: number) { - this.model.update((m) => ({ - ...m, - companions: m.companions.filter((_, i) => i !== index), - })); - } - - onSubmit() { - // CRITICAL: submit callback MUST be async - submit(this.bookingForm, async () => { - console.log('Booking Confirmed:', this.model()); - // If you need to do async work: - // await this.apiService.save(this.model()); - }); - } + protected readonly model = signal({ + personalInfo: { + firstName: '', + lastName: '', + email: '', + age: 0, + }, + tripDetails: { + destination: 'Mars', + launchDate: '', + }, + package: { + tier: 'economy', + extras: [] as string[], + }, + companions: [] as Array<{ name: string; relation: string }>, + }); + + protected readonly bookingForm = form(this.model, (s) => { + required(s.personalInfo.firstName, { message: 'First name is required' }); + required(s.personalInfo.lastName, { message: 'Last name is required' }); + required(s.personalInfo.email, { message: 'Email is required' }); + email(s.personalInfo.email, { message: 'Invalid email address' }); + required(s.personalInfo.age, { message: 'Age is required' }); + min(s.personalInfo.age, 18, { message: 'Must be at least 18' }); + + required(s.tripDetails.destination); + required(s.tripDetails.launchDate); + validate(s.tripDetails.launchDate, ({ value }) => { + const date = new Date(value()); + if (isNaN(date.getTime())) return undefined; + const today = new Date(); + if (date < today) { + return { kind: 'pastData', message: 'Launch date must be in the future' }; + } + return undefined; + }); + + // valueOf is used to access values of other fields in rules + hidden(s.package.extras, { when: ({ valueOf }) => valueOf(s.package.tier) === 'economy' }); + + applyEach(s.companions, (companion) => { + required(companion.name, { message: 'Companion name required' }); + required(companion.relation, { message: 'Relation required' }); + }); + }); + + addCompanion() { + this.model.update((m) => ({ + ...m, + companions: [...m.companions, { name: '', relation: '' }], + })); + } + + removeCompanion(index: number) { + this.model.update((m) => ({ + ...m, + companions: m.companions.filter((_, i) => i !== index), + })); + } + + onSubmit() { + // CRITICAL: submit callback MUST be async + submit(this.bookingForm, async () => { + console.log('Booking Confirmed:', this.model()); + // If you need to do async work: + // await this.apiService.save(this.model()); + }); + } } ``` @@ -645,120 +633,115 @@ export class App { ```html
-

Interstellar Booking

- -
-

Personal Info

- - - - - - - - -
- -
-

Trip Details

- - - - -
- -
-

Package

- - - - - - @if (!bookingForm.package.extras().hidden()) { -
-

Extras

- - -
- } -
- -
-

Companions

- - - @for (companion of bookingForm.companions; track $index) { -
- - @if (companion.name().touched() && companion.name().errors().length) { - {{ companion.name().errors()[0].message }} - } - - - @if (companion.relation().touched() && companion.relation().errors().length) { - {{ companion.relation().errors()[0].message }} - } - - -
- } -
- - +

Interstellar Booking

+ +
+

Personal Info

+ + + + + + + + +
+ +
+

Trip Details

+ + + + +
+ +
+

Package

+ + + + + + @if (!bookingForm.package.extras().hidden()) { +
+

Extras

+ + +
+ } +
+ +
+

Companions

+ + + @for (companion of bookingForm.companions; track $index) { +
+ + @if (companion.name().touched() && companion.name().errors().length) { + {{ companion.name().errors()[0].message }} + } + + + @if (companion.relation().touched() && companion.relation().errors().length) { + {{ companion.relation().errors()[0].message }} + } + + +
+ } +
+ +
``` @@ -785,7 +768,7 @@ const val = this.form.field().value(); // WRONG this.form.address.street.set('Main St'); // RIGHT - update the model signal instead -this.model.update((m) => ({...m, address: {...m.address, street: 'Main St'}})); +this.model.update((m) => ({ ...m, address: { ...m.address, street: 'Main St' } })); ``` ### `Type 'string[]' is not assignable to type 'string'` @@ -795,12 +778,12 @@ this.model.update((m) => ({...m, address: {...m.address, street: 'Main St'}})); ```html ``` @@ -828,7 +811,7 @@ min(s.age, 18); max(s.age, 99); // Then just: @@ -842,11 +825,11 @@ protected readonly model = signal({ hasWifi: false, hasGym: false }); ```ts // WRONG - when only works with required -pattern(s.ssn, /^\d{3}-\d{2}-\d{4}$/, {when: isJoint}); +pattern(s.ssn, /^\d{3}-\d{2}-\d{4}$/, { when: isJoint }); // RIGHT - use applyWhen for conditional non-required validators applyWhen(s.ssn, isJoint, (ssnPath) => { - pattern(ssnPath, /^\d{3}-\d{2}-\d{4}$/); + pattern(ssnPath, /^\d{3}-\d{2}-\d{4}$/); }); ``` @@ -870,7 +853,7 @@ applyWhen(s.spouse, ({valueOf}) => valueOf(s.status) === 'joint', (spousePath) = ```ts // WRONG -import {FormState} from '@angular/forms/signals'; +import { FormState } from '@angular/forms/signals'; // FormState does not exist. If you need type access, the form // instance provides all necessary state through field().valid(), etc. diff --git a/.agents/skills/angular-developer/references/signals-overview.md b/.agents/skills/angular-developer/references/signals-overview.md index 07fb6ed9..22ca6f53 100644 --- a/.agents/skills/angular-developer/references/signals-overview.md +++ b/.agents/skills/angular-developer/references/signals-overview.md @@ -7,7 +7,7 @@ Signals are the foundation of reactivity in modern Angular applications. A **sig Use `signal()` to create state that can be directly updated. ```ts -import {signal} from '@angular/core'; +import { signal } from '@angular/core'; // Create a writable signal const count = signal(0); @@ -41,7 +41,7 @@ Use `computed()` to create read-only signals that derive their value from other - **Dynamic Dependencies**: Only the signals _actually read_ during the derivation are tracked. ```ts -import {signal, computed} from '@angular/core'; +import { signal, computed } from '@angular/core'; const count = signal(0); const doubleCount = computed(() => count() * 2); @@ -65,12 +65,12 @@ Angular automatically enters a reactive context when evaluating: If you need to read a signal inside a reactive context _without_ creating a dependency (so that the context doesn't re-run when the signal changes), use `untracked()`. ```ts -import {effect, untracked} from '@angular/core'; +import { effect, untracked } from '@angular/core'; effect(() => { - // This effect only runs when currentUser changes. - // It does NOT run when counter changes, even though counter is read here. - console.log(`User: ${currentUser()}, Count: ${untracked(counter)}`); + // This effect only runs when currentUser changes. + // It does NOT run when counter changes, even though counter is read here. + console.log(`User: ${currentUser()}, Count: ${untracked(counter)}`); }); ``` @@ -81,14 +81,14 @@ The reactive context is only active for **synchronous** code. Signal reads after ```ts // ❌ INCORRECT: theme() is not tracked because it is read after await effect(async () => { - const data = await fetchUserData(); - console.log(theme()); + const data = await fetchUserData(); + console.log(theme()); }); // ✅ CORRECT: Read the signal before the await effect(async () => { - const currentTheme = theme(); - const data = await fetchUserData(); - console.log(currentTheme); + const currentTheme = theme(); + const data = await fetchUserData(); + console.log(currentTheme); }); ``` diff --git a/.agents/skills/angular-developer/references/tailwind-css.md b/.agents/skills/angular-developer/references/tailwind-css.md index 9139fcdc..9bcde064 100644 --- a/.agents/skills/angular-developer/references/tailwind-css.md +++ b/.agents/skills/angular-developer/references/tailwind-css.md @@ -36,9 +36,9 @@ Create a `.postcssrc.json` file in the project root: ```json { - "plugins": { - "@tailwindcss/postcss": {} - } + "plugins": { + "@tailwindcss/postcss": {} + } } ``` diff --git a/.agents/skills/angular-developer/references/template-driven-forms.md b/.agents/skills/angular-developer/references/template-driven-forms.md index 1907eeb9..908e3f12 100644 --- a/.agents/skills/angular-developer/references/template-driven-forms.md +++ b/.agents/skills/angular-developer/references/template-driven-forms.md @@ -15,20 +15,20 @@ Template-driven forms rely on the `FormsModule` which provides these key directi First, import `FormsModule` into your component or module. ```ts -import {Component} from '@angular/core'; -import {FormsModule} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; @Component({ - selector: 'app-user-form', - imports: [FormsModule], - templateUrl: './user-form.component.html', + selector: 'app-user-form', + imports: [FormsModule], + templateUrl: './user-form.component.html', }) export class UserForm { - user = {name: '', role: 'Guest'}; + user = { name: '', role: 'Guest' }; - onSubmit() { - console.log('Form submitted!', this.user); - } + onSubmit() { + console.log('Form submitted!', this.user); + } } ``` @@ -40,23 +40,23 @@ Use `[(ngModel)]` on input elements. **Every element using `[(ngModel)]` MUST ha ```html
- -
- - -
- - -
- - -
- - - + +
+ + +
+ + +
+ + +
+ + +
``` @@ -76,10 +76,10 @@ You can use these classes to provide visual feedback in your CSS: ```css .ng-valid[required], .ng-valid.required { - border-left: 5px solid #42a948; /* green */ + border-left: 5px solid #42a948; /* green */ } .ng-invalid:not(form) { - border-left: 5px solid #a94442; /* red */ + border-left: 5px solid #a94442; /* red */ } ``` @@ -93,9 +93,9 @@ To display error messages conditionally, export the `ngModel` directive to a tem @if (nameCtrl.invalid && (nameCtrl.dirty || nameCtrl.touched)) {
- @if (nameCtrl.errors?.['required']) { -
Name is required.
- } + @if (nameCtrl.errors?.['required']) { +
Name is required.
+ }
} ``` diff --git a/.agents/skills/angular-developer/references/testing-fundamentals.md b/.agents/skills/angular-developer/references/testing-fundamentals.md index 2bd2e0f1..e784f066 100644 --- a/.agents/skills/angular-developer/references/testing-fundamentals.md +++ b/.agents/skills/angular-developer/references/testing-fundamentals.md @@ -16,41 +16,41 @@ This project follows a modern, zoneless testing approach. State changes schedule ### Basic Test Structure Example ```ts -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MyComponent} from './my.component'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MyComponent } from './my.component'; describe('MyComponent', () => { - let component: MyComponent; - let fixture: ComponentFixture; - let h1: HTMLElement; - - beforeEach(() => { - TestBed.configureTestingModule({}); - - // Create the component fixture - fixture = TestBed.createComponent(MyComponent); - component = fixture.componentInstance; - h1 = fixture.nativeElement.querySelector('h1'); - }); - - it('should display the default title', async () => { - // ACT: (Implicit) Component is created with default state. - // WAIT for initial data binding. - await fixture.whenStable(); - // ASSERT the initial state. - expect(h1.textContent).toContain('Default Title'); - }); - - it('should display a different title after a change', async () => { - // ACT: Change the component's title property. - component.title.set('New Test Title'); - - // WAIT for the asynchronous update to complete. - await fixture.whenStable(); - - // ASSERT the DOM has been updated. - expect(h1.textContent).toContain('New Test Title'); - }); + let component: MyComponent; + let fixture: ComponentFixture; + let h1: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({}); + + // Create the component fixture + fixture = TestBed.createComponent(MyComponent); + component = fixture.componentInstance; + h1 = fixture.nativeElement.querySelector('h1'); + }); + + it('should display the default title', async () => { + // ACT: (Implicit) Component is created with default state. + // WAIT for initial data binding. + await fixture.whenStable(); + // ASSERT the initial state. + expect(h1.textContent).toContain('Default Title'); + }); + + it('should display a different title after a change', async () => { + // ACT: Change the component's title property. + component.title.set('New Test Title'); + + // WAIT for the asynchronous update to complete. + await fixture.whenStable(); + + // ASSERT the DOM has been updated. + expect(h1.textContent).toContain('New Test Title'); + }); }); ``` diff --git a/.agents/skills/playwright-cli/SKILL.md b/.agents/skills/playwright-cli/SKILL.md index f034c324..1267ec51 100644 --- a/.agents/skills/playwright-cli/SKILL.md +++ b/.agents/skills/playwright-cli/SKILL.md @@ -193,11 +193,13 @@ playwright-cli --raw localstorage-get theme ``` For structured output wrapping every reply as JSON, pass --json + ```bash playwright-cli list --json ``` ## Open parameters + ```bash # Use specific browser when creating session playwright-cli open --browser=chrome @@ -376,13 +378,13 @@ playwright-cli show --annotate ## Specific tasks -* **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) -* **Request mocking** [references/request-mocking.md](references/request-mocking.md) -* **Running Playwright code** [references/running-code.md](references/running-code.md) -* **Browser session management** [references/session-management.md](references/session-management.md) -* **Spec-driven testing (plan / generate / heal)** [references/spec-driven-testing.md](references/spec-driven-testing.md) -* **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) -* **Test generation** [references/test-generation.md](references/test-generation.md) -* **Tracing** [references/tracing.md](references/tracing.md) -* **Video recording** [references/video-recording.md](references/video-recording.md) -* **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md) +- **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) +- **Request mocking** [references/request-mocking.md](references/request-mocking.md) +- **Running Playwright code** [references/running-code.md](references/running-code.md) +- **Browser session management** [references/session-management.md](references/session-management.md) +- **Spec-driven testing (plan / generate / heal)** [references/spec-driven-testing.md](references/spec-driven-testing.md) +- **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) +- **Test generation** [references/test-generation.md](references/test-generation.md) +- **Tracing** [references/tracing.md](references/tracing.md) +- **Video recording** [references/video-recording.md](references/video-recording.md) +- **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md) diff --git a/.agents/skills/playwright-cli/references/running-code.md b/.agents/skills/playwright-cli/references/running-code.md index 98b541fb..06645ec1 100644 --- a/.agents/skills/playwright-cli/references/running-code.md +++ b/.agents/skills/playwright-cli/references/running-code.md @@ -17,7 +17,6 @@ You can also load the function from a file: playwright-cli run-code --filename=./my-script.js ``` - The code must be a single function expression, it is wrapped in `(...)` and evaluated. import/export/require syntax is not supported. diff --git a/.agents/skills/playwright-cli/references/session-management.md b/.agents/skills/playwright-cli/references/session-management.md index bf39acd5..287e77fb 100644 --- a/.agents/skills/playwright-cli/references/session-management.md +++ b/.agents/skills/playwright-cli/references/session-management.md @@ -21,6 +21,7 @@ playwright-cli -s=public snapshot ## Browser Session Isolation Properties Each browser session has independent: + - Cookies - LocalStorage / SessionStorage - IndexedDB diff --git a/.agents/skills/playwright-cli/references/spec-driven-testing.md b/.agents/skills/playwright-cli/references/spec-driven-testing.md index f37bdb44..84794aed 100644 --- a/.agents/skills/playwright-cli/references/spec-driven-testing.md +++ b/.agents/skills/playwright-cli/references/spec-driven-testing.md @@ -32,7 +32,7 @@ npm init playwright@latest ### 1.2 Prerequisite: seed test -A **seed test** is a minimal test that lands the page in the state every scenario starts from: navigation to the app, any required login, feature flags, etc. Scenarios assume a fresh start *after* the seed. `--debug=cli` pauses *inside* this test, so the seed is where every planning and generation session begins. +A **seed test** is a minimal test that lands the page in the state every scenario starts from: navigation to the app, any required login, feature flags, etc. Scenarios assume a fresh start _after_ the seed. `--debug=cli` pauses _inside_ this test, so the seed is where every planning and generation session begins. Minimum viable seed: @@ -41,7 +41,7 @@ Minimum viable seed: import { test } from '@playwright/test'; test('seed', async ({ page }) => { - await page.goto('https://example.com/'); + await page.goto('https://example.com/'); }); ``` @@ -53,10 +53,10 @@ import { test as baseTest } from '@playwright/test'; export { expect } from '@playwright/test'; export const test = baseTest.extend({ - page: async ({ page }, use) => { - await page.goto('https://example.com/'); - await use(page); - }, + page: async ({ page }, use) => { + await page.goto('https://example.com/'); + await use(page); + }, }); ``` @@ -65,7 +65,7 @@ export const test = baseTest.extend({ import { test } from './fixtures'; test('seed', async ({ page }) => { - // Fixture already navigates. This empty body tells agents where to start. + // Fixture already navigates. This empty body tells agents where to start. }); ``` @@ -124,13 +124,20 @@ Save under `specs/.plan.md`. Use this structure: **File:** `tests//.spec.ts` **Steps:** - 1. + +1. + + - expect: - expect: - 2. + +2. + + - expect: #### 1.2. + ... ### 2. @@ -189,24 +196,24 @@ Collect the generated code and write the test file at the path given in the spec ```ts // spec: specs/basic-operations.plan.md // seed: tests/seed.spec.ts -import { test, expect } from './fixtures'; // or '@playwright/test' if no fixtures file +import { test, expect } from './fixtures'; // or '@playwright/test' if no fixtures file test.describe('Singing in and out', () => { - test('should sign in', async ({ page }) => { - // 1. Navigate to the application - // (handled by the seed fixture) + test('should sign in', async ({ page }) => { + // 1. Navigate to the application + // (handled by the seed fixture) - // 2. Type 'John Doe' into the username field - await page.getByRole('textbox', { name: 'username' }).fill('John Doe'); + // 2. Type 'John Doe' into the username field + await page.getByRole('textbox', { name: 'username' }).fill('John Doe'); - // 3. Type password - await page.getByRole('textbox', { name: 'password' }).fill('TestPassword'); + // 3. Type password + await page.getByRole('textbox', { name: 'password' }).fill('TestPassword'); - // 4. Press Enter to submit - await page.getByRole('textbox', { name: 'password' }).press('Enter'); + // 4. Press Enter to submit + await page.getByRole('textbox', { name: 'password' }).press('Enter'); - await expect(page.getByRole('heading')).toContainText('Welcome, John Doe!'); - }); + await expect(page.getByRole('heading')).toContainText('Welcome, John Doe!'); + }); }); ``` @@ -291,15 +298,15 @@ Only after the user answers, either update the spec (intentional change) or file ### 3.5 Iteration and giving up - Fix failures one at a time; rerun after each. -- If after thorough investigation you are confident the test is correct but the app is wrong *and* the user has confirmed it's a bug: mark the test `test.fixme(...)` with a comment pointing at the user's decision or issue link. Never silently skip. +- If after thorough investigation you are confident the test is correct but the app is wrong _and_ the user has confirmed it's a bug: mark the test `test.fixme(...)` with a comment pointing at the user's decision or issue link. Never silently skip. --- ## Cross-references -| For... | See | -|---|---| -| `--debug=cli` / attach mechanics | [playwright-tests.md](playwright-tests.md) | -| How `playwright-cli` actions become TS | [test-generation.md](test-generation.md) | -| Mocking requests during exploration/generation | [request-mocking.md](request-mocking.md) | -| Managing the CLI browser session | [session-management.md](session-management.md) | +| For... | See | +| ---------------------------------------------- | ---------------------------------------------- | +| `--debug=cli` / attach mechanics | [playwright-tests.md](playwright-tests.md) | +| How `playwright-cli` actions become TS | [test-generation.md](test-generation.md) | +| Mocking requests during exploration/generation | [request-mocking.md](request-mocking.md) | +| Managing the CLI browser session | [session-management.md](session-management.md) | diff --git a/.agents/skills/playwright-cli/references/storage-state.md b/.agents/skills/playwright-cli/references/storage-state.md index c856db5e..efa61971 100644 --- a/.agents/skills/playwright-cli/references/storage-state.md +++ b/.agents/skills/playwright-cli/references/storage-state.md @@ -32,27 +32,27 @@ The saved file contains: ```json { - "cookies": [ - { - "name": "session_id", - "value": "abc123", - "domain": "example.com", - "path": "/", - "expires": 1735689600, - "httpOnly": true, - "secure": true, - "sameSite": "Lax" - } - ], - "origins": [ - { - "origin": "https://example.com", - "localStorage": [ - { "name": "theme", "value": "dark" }, - { "name": "user_id", "value": "12345" } - ] - } - ] + "cookies": [ + { + "name": "session_id", + "value": "abc123", + "domain": "example.com", + "path": "/", + "expires": 1735689600, + "httpOnly": true, + "secure": true, + "sameSite": "Lax" + } + ], + "origins": [ + { + "origin": "https://example.com", + "localStorage": [ + { "name": "theme", "value": "dark" }, + { "name": "user_id", "value": "12345" } + ] + } + ] } ``` diff --git a/.agents/skills/playwright-cli/references/test-generation.md b/.agents/skills/playwright-cli/references/test-generation.md index a045c55d..92d2fda9 100644 --- a/.agents/skills/playwright-cli/references/test-generation.md +++ b/.agents/skills/playwright-cli/references/test-generation.md @@ -39,14 +39,14 @@ Collect the generated code into a Playwright test: import { test, expect } from '@playwright/test'; test('login flow', async ({ page }) => { - // Generated code from playwright-cli session: - await page.goto('https://example.com/login'); - await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); - await page.getByRole('textbox', { name: 'Password' }).fill('password123'); - await page.getByRole('button', { name: 'Sign In' }).click(); - - // Add assertions - await expect(page).toHaveURL(/.*dashboard/); + // Generated code from playwright-cli session: + await page.goto('https://example.com/login'); + await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); + await page.getByRole('textbox', { name: 'Password' }).fill('password123'); + await page.getByRole('button', { name: 'Sign In' }).click(); + + // Add assertions + await expect(page).toHaveURL(/.*dashboard/); }); ``` diff --git a/.agents/skills/playwright-cli/references/tracing.md b/.agents/skills/playwright-cli/references/tracing.md index 7ce7babb..d81cdeb1 100644 --- a/.agents/skills/playwright-cli/references/tracing.md +++ b/.agents/skills/playwright-cli/references/tracing.md @@ -24,6 +24,7 @@ When you start tracing, Playwright creates a `traces/` directory with several fi ### `trace-{timestamp}.trace` **Action log** - The main trace file containing: + - Every action performed (clicks, fills, navigations) - DOM snapshots before and after each action - Screenshots at each step @@ -34,6 +35,7 @@ When you start tracing, Playwright creates a `traces/` directory with several fi ### `trace-{timestamp}.network` **Network log** - Complete network activity: + - All HTTP requests and responses - Request headers and bodies - Response headers and bodies @@ -44,20 +46,21 @@ When you start tracing, Playwright creates a `traces/` directory with several fi ### `resources/` **Resources directory** - Cached resources: + - Images, fonts, stylesheets, scripts - Response bodies for replay - Assets needed to reconstruct page state ## What Traces Capture -| Category | Details | -|----------|---------| -| **Actions** | Clicks, fills, hovers, keyboard input, navigations | -| **DOM** | Full DOM snapshot before/after each action | -| **Screenshots** | Visual state at each step | -| **Network** | All requests, responses, headers, bodies, timing | -| **Console** | All console.log, warn, error messages | -| **Timing** | Precise timing for each operation | +| Category | Details | +| --------------- | -------------------------------------------------- | +| **Actions** | Clicks, fills, hovers, keyboard input, navigations | +| **DOM** | Full DOM snapshot before/after each action | +| **Screenshots** | Visual state at each step | +| **Network** | All requests, responses, headers, bodies, timing | +| **Console** | All console.log, warn, error messages | +| **Timing** | Precise timing for each operation | ## Use Cases @@ -102,14 +105,14 @@ playwright-cli tracing-stop ## Trace vs Video vs Screenshot -| Feature | Trace | Video | Screenshot | -|---------|-------|-------|------------| -| **Format** | .trace file | .webm video | .png/.jpeg image | -| **DOM inspection** | Yes | No | No | -| **Network details** | Yes | No | No | -| **Step-by-step replay** | Yes | Continuous | Single frame | -| **File size** | Medium | Large | Small | -| **Best for** | Debugging | Demos | Quick capture | +| Feature | Trace | Video | Screenshot | +| ----------------------- | ----------- | ----------- | ---------------- | +| **Format** | .trace file | .webm video | .png/.jpeg image | +| **DOM inspection** | Yes | No | No | +| **Network details** | Yes | No | No | +| **Step-by-step replay** | Yes | Continuous | Single frame | +| **File size** | Medium | Large | Small | +| **Best for** | Debugging | Demos | Quick capture | ## Best Practices diff --git a/.agents/skills/playwright-cli/references/video-recording.md b/.agents/skills/playwright-cli/references/video-recording.md index ce9ad6a6..79b518f1 100644 --- a/.agents/skills/playwright-cli/references/video-recording.md +++ b/.agents/skills/playwright-cli/references/video-recording.md @@ -42,40 +42,40 @@ playwright-cli video-start recordings/checkout-test-run-42.webm When recording a video for the user or as a proof of work, it is best to create a code snippet and execute it with run-code. It allows pulling appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that. -1) Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight. -2) Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses. -3) Use playwright-cli run-code --filename your-script.js +1. Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight. +2. Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses. +3. Use playwright-cli run-code --filename your-script.js **Important**: Overlays are `pointer-events: none` — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page. ```js -async page => { - await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } }); - await page.goto('https://demo.playwright.dev/todomvc'); - - // Show a chapter card — blurs the page and shows a dialog. - // Blocks until duration expires, then auto-removes. - // Use this for simple use cases, but always feel free to hand-craft your own beautiful - // overlay via await page.screencast.showOverlay(). - await page.screencast.showChapter('Adding Todo Items', { - description: 'We will add several items to the todo list.', - duration: 2000, - }); - - // Perform action - await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 }); - await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); - await page.waitForTimeout(1000); - - // Show next chapter - await page.screencast.showChapter('Verifying Results', { - description: 'Checking the item appeared in the list.', - duration: 2000, - }); - - // Add a sticky annotation that stays while you perform actions. - // Overlays are pointer-events: none, so they won't block clicks. - const annotation = await page.screencast.showOverlay(` +async (page) => { + await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } }); + await page.goto('https://demo.playwright.dev/todomvc'); + + // Show a chapter card — blurs the page and shows a dialog. + // Blocks until duration expires, then auto-removes. + // Use this for simple use cases, but always feel free to hand-craft your own beautiful + // overlay via await page.screencast.showOverlay(). + await page.screencast.showChapter('Adding Todo Items', { + description: 'We will add several items to the todo list.', + duration: 2000, + }); + + // Perform action + await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 }); + await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); + await page.waitForTimeout(1000); + + // Show next chapter + await page.screencast.showChapter('Verifying Results', { + description: 'Checking the item appeared in the list.', + duration: 2000, + }); + + // Add a sticky annotation that stays while you perform actions. + // Overlays are pointer-events: none, so they won't block clicks. + const annotation = await page.screencast.showOverlay(`
@@ -83,17 +83,18 @@ async page => {
`); - // Perform more actions while the annotation is visible - await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 }); - await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); - await page.waitForTimeout(1500); + // Perform more actions while the annotation is visible + await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 }); + await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); + await page.waitForTimeout(1500); - // Remove the annotation when done - await annotation.dispose(); + // Remove the annotation when done + await annotation.dispose(); - // You can also highlight relevant locators and provide contextual annotations. - const bounds = await page.getByText('Walk the dog').boundingBox(); - await page.screencast.showOverlay(` + // You can also highlight relevant locators and provide contextual annotations. + const bounds = await page.getByText('Walk the dog').boundingBox(); + await page.screencast.showOverlay( + `
Check it out, it is right above this text
- `, { duration: 2000 }); + `, + { duration: 2000 }, + ); - await page.screencast.stop(); -} + await page.screencast.stop(); +}; ``` Embrace creativity, overlays are powerful. ### Overlay API Summary -| Method | Use Case | -|--------|----------| +| Method | Use Case | +| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | | `page.screencast.showChapter(title, { description?, duration?, styleSheet? })` | Full-screen chapter card with blurred backdrop — ideal for section transitions | -| `page.screencast.showOverlay(html, { duration? })` | Custom HTML overlay — use for callouts, labels, highlights | -| `disposable.dispose()` | Remove a sticky overlay added without duration | -| `page.screencast.hideOverlays()` / `page.screencast.showOverlays()` | Temporarily hide/show all overlays | +| `page.screencast.showOverlay(html, { duration? })` | Custom HTML overlay — use for callouts, labels, highlights | +| `disposable.dispose()` | Remove a sticky overlay added without duration | +| `page.screencast.hideOverlays()` / `page.screencast.showOverlays()` | Temporarily hide/show all overlays | ## Tracing vs Video -| Feature | Video | Tracing | -|---------|-------|---------| -| Output | WebM file | Trace file (viewable in Trace Viewer) | -| Shows | Visual recording | DOM snapshots, network, console, actions | -| Use case | Demos, documentation | Debugging, analysis | -| Size | Larger | Smaller | +| Feature | Video | Tracing | +| -------- | -------------------- | ---------------------------------------- | +| Output | WebM file | Trace file (viewable in Trace Viewer) | +| Shows | Visual recording | DOM snapshots, network, console, actions | +| Use case | Demos, documentation | Debugging, analysis | +| Size | Larger | Smaller | ## Limitations diff --git a/README.md b/README.md index a26810e3..67f4d1d1 100644 --- a/README.md +++ b/README.md @@ -56,19 +56,19 @@ Built on top of **[Spartan UI](https://spartan.ng)** (headless primitives) and p Browse all components and copy the source code at **[simui.dev](https://simui.dev)**. -| Component | Variants | Component | Variants | -| --- | :---: | --- | :---: | -| [Input](https://simui.dev/components/input) | 55 | [Notification](https://simui.dev/components/notification) | 33 | -| [Button](https://simui.dev/components/button) | 54 | [Badge](https://simui.dev/components/badge) | 23 | -| [Dialog](https://simui.dev/components/dialog) | 35 | [Accordion](https://simui.dev/components/accordion) | 22 | -| [Avatar](https://simui.dev/components/avatar) | 22 | [Checkbox](https://simui.dev/components/checkbox) | 22 | -| [Tabs](https://simui.dev/components/tabs) | 20 | [Radio](https://simui.dev/components/radio) | 20 | -| [Slider](https://simui.dev/components/slider) | 19 | [Alert](https://simui.dev/components/alert) | 18 | -| [Switch](https://simui.dev/components/switch) | 18 | [Dropdown](https://simui.dev/components/dropdown) | 16 | -| [File Upload](https://simui.dev/components/file-upload) | 13 | [Pagination](https://simui.dev/components/pagination) | 12 | -| [Banner](https://simui.dev/components/banner) | 11 | [Card](https://simui.dev/components/card) | 11 | -| [Popover](https://simui.dev/components/popover) | 11 | [Breadcrumb](https://simui.dev/components/breadcrumb) | 9 | -| [Event Calendar](https://simui.dev/components/event-calendar) | 1 | | | +| Component | Variants | Component | Variants | +| ------------------------------------------------------------- | :------: | --------------------------------------------------------- | :------: | +| [Input](https://simui.dev/components/input) | 55 | [Notification](https://simui.dev/components/notification) | 33 | +| [Button](https://simui.dev/components/button) | 54 | [Badge](https://simui.dev/components/badge) | 23 | +| [Dialog](https://simui.dev/components/dialog) | 35 | [Accordion](https://simui.dev/components/accordion) | 22 | +| [Avatar](https://simui.dev/components/avatar) | 22 | [Checkbox](https://simui.dev/components/checkbox) | 22 | +| [Tabs](https://simui.dev/components/tabs) | 20 | [Radio](https://simui.dev/components/radio) | 20 | +| [Slider](https://simui.dev/components/slider) | 19 | [Alert](https://simui.dev/components/alert) | 18 | +| [Switch](https://simui.dev/components/switch) | 18 | [Dropdown](https://simui.dev/components/dropdown) | 16 | +| [File Upload](https://simui.dev/components/file-upload) | 13 | [Pagination](https://simui.dev/components/pagination) | 12 | +| [Banner](https://simui.dev/components/banner) | 11 | [Card](https://simui.dev/components/card) | 11 | +| [Popover](https://simui.dev/components/popover) | 11 | [Breadcrumb](https://simui.dev/components/breadcrumb) | 9 | +| [Event Calendar](https://simui.dev/components/event-calendar) | 1 | | | --- @@ -100,14 +100,14 @@ Visit **[simui.dev](https://simui.dev)**, pick a component variant you like, and import { SimButtonComponent } from './ui/button/sim-button.component'; @Component({ - selector: 'app-root', - standalone: true, - imports: [SimButtonComponent], - template: ` - Get started - Learn more - Cancel - `, + selector: 'app-root', + standalone: true, + imports: [SimButtonComponent], + template: ` + Get started + Learn more + Cancel + `, }) export class AppComponent {} ``` @@ -154,10 +154,10 @@ NG_APP_GOOGLE_CLIENT_ID=... **For Netlify deployments**, set these in **Site → Configuration → Environment variables**: -| Variable | Description | -| --- | --- | -| `NG_APP_BASE_URL` | API base URL | -| `NG_APP_API_URL` | Full API URL | +| Variable | Description | +| ------------------------- | ---------------------- | +| `NG_APP_BASE_URL` | API base URL | +| `NG_APP_API_URL` | Full API URL | | `NG_APP_GOOGLE_CLIENT_ID` | Google OAuth Client ID | The build command (`node scripts/set-env.js && ng build`) generates the environment files automatically on every build. @@ -166,29 +166,29 @@ The build command (`node scripts/set-env.js && ng build`) generates the environm ### Useful Commands -| Command | Description | -| --- | --- | -| `pnpm start` | Start the development server | -| `pnpm build` | Production build | -| `pnpm test` | Run unit tests (Karma + Jasmine) | +| Command | Description | +| ---------------- | ---------------------------------- | +| `pnpm start` | Start the development server | +| `pnpm build` | Production build | +| `pnpm test` | Run unit tests (Karma + Jasmine) | | `pnpm run codes` | Regenerate component registry JSON | -| `pnpm lint` | Lint the codebase | +| `pnpm lint` | Lint the codebase | --- ## 🛠️ Tech Stack -| Technology | Version | Purpose | -| --- | --- | --- | -| [Angular](https://angular.dev) | 20 | Core framework | -| [Spartan UI](https://spartan.ng) | alpha | Headless component primitives | -| [Tailwind CSS](https://tailwindcss.com) | v4 | Utility-first styling | -| [TanStack Table](https://tanstack.com/table) | v8 | Advanced table functionality | -| [@ng-icons](https://github.com/ng-icons/ng-icons) | v32 | Icon sets (Lucide, Remix, Tabler) | -| [class-variance-authority](https://cva.style) | 0.7 | Component variant management | -| [date-fns](https://date-fns.org) | v4 | Date utilities | -| [ngx-sonner](https://github.com/tutkli/ngx-sonner) | v3 | Toast notifications | -| [Express](https://expressjs.com) | v4 | SSR server runtime | +| Technology | Version | Purpose | +| -------------------------------------------------- | ------- | --------------------------------- | +| [Angular](https://angular.dev) | 20 | Core framework | +| [Spartan UI](https://spartan.ng) | alpha | Headless component primitives | +| [Tailwind CSS](https://tailwindcss.com) | v4 | Utility-first styling | +| [TanStack Table](https://tanstack.com/table) | v8 | Advanced table functionality | +| [@ng-icons](https://github.com/ng-icons/ng-icons) | v32 | Icon sets (Lucide, Remix, Tabler) | +| [class-variance-authority](https://cva.style) | 0.7 | Component variant management | +| [date-fns](https://date-fns.org) | v4 | Date utilities | +| [ngx-sonner](https://github.com/tutkli/ngx-sonner) | v3 | Toast notifications | +| [Express](https://expressjs.com) | v4 | SSR server runtime | --- diff --git a/e2e/components/accordion.spec.ts b/e2e/components/accordion.spec.ts index f48576e6..cbe5e357 100644 --- a/e2e/components/accordion.spec.ts +++ b/e2e/components/accordion.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; test.describe('Accordion', () => { test.beforeEach(async ({ navigateToComponent }) => { @@ -14,7 +14,7 @@ test.describe('Accordion', () => { test.describe('Expanded snapshots', () => { for (const id of COMPONENT_IDS.accordion) { test(`captures expanded states in ${id}`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) @@ -47,7 +47,7 @@ test.describe('Accordion', () => { test.describe('Behavior', () => { for (const id of COMPONENT_IDS.accordion) { test(`expands an item in ${id}`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) diff --git a/e2e/components/badge.spec.ts b/e2e/components/badge.spec.ts index 6e8658d0..a2170121 100644 --- a/e2e/components/badge.spec.ts +++ b/e2e/components/badge.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; const HOVER_BADGE_IDS = ['badge-20', 'badge-21', 'badge-22', 'badge-23'] as const; @@ -16,7 +16,7 @@ test.describe('Badge', () => { test.describe('Hover badges', () => { for (const id of HOVER_BADGE_IDS) { test(`hover state snapshot for ${id}`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); await card.waitFor({ state: 'visible', timeout: 5000 }); const badge = card.locator(`sim-${id} > span`).first(); @@ -26,7 +26,7 @@ test.describe('Badge', () => { }); test(`changes visual style on hover for ${id}`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); await card.waitFor({ state: 'visible', timeout: 5000 }); const badge = card.locator(`sim-${id} > span`).first(); diff --git a/e2e/components/breadcrumb.spec.ts b/e2e/components/breadcrumb.spec.ts index a8494023..d17ad9af 100644 --- a/e2e/components/breadcrumb.spec.ts +++ b/e2e/components/breadcrumb.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; test.describe('Breadcrumb', () => { test.beforeEach(async ({ navigateToComponent }) => { @@ -13,7 +13,7 @@ test.describe('Breadcrumb', () => { test.describe('Behavior', () => { test('breadcrumb links have href attributes', async ({ page }) => { - const links = page.locator('#breadcrumb-01 a'); + const links = componentCard(page, 'breadcrumb-01').locator('a'); const count = await links.count(); expect(count).toBeGreaterThan(0); for (let i = 0; i < count; i++) { @@ -23,17 +23,21 @@ test.describe('Breadcrumb', () => { }); test('opens the dropdown menu when pressing the breadcrumb ellipsis in breadcrumb-01', async ({ page }) => { - const trigger = page.locator('#breadcrumb-01 hlm-breadcrumb-ellipsis'); + const card = componentCard(page, 'breadcrumb-01'); + const trigger = card.locator('hlm-breadcrumb-ellipsis'); const menu = page.locator('[role="menu"]').first(); - await trigger.click(); + await card.scrollIntoViewIfNeeded(); + await trigger.dispatchEvent('click'); await expect(menu).toBeVisible({ timeout: 3000 }); await expect.soft(menu).toHaveScreenshot(`breadcrumb-menu/breadcrumb-01.png`); }); test('opens the dropdown menu when pressing the breadcrumb ellipsis in breadcrumb-02', async ({ page }) => { - const trigger = page.locator('#breadcrumb-02 [data-slot="dropdown-menu-trigger"]'); + const card = componentCard(page, 'breadcrumb-02'); + const trigger = card.locator('[data-slot="dropdown-menu-trigger"]'); const menu = page.locator('[role="menu"]').first(); - await trigger.click(); + await card.scrollIntoViewIfNeeded(); + await trigger.dispatchEvent('click'); await expect(menu).toBeVisible({ timeout: 3000 }); await expect.soft(menu).toHaveScreenshot(`breadcrumb-menu/breadcrumb-02.png`); }); diff --git a/e2e/components/calendar.spec.ts b/e2e/components/calendar.spec.ts index f877647e..7037519c 100644 --- a/e2e/components/calendar.spec.ts +++ b/e2e/components/calendar.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; // Fixed date so the calendar always renders the same month/day regardless of when the test runs. const FIXED_DATE = new Date('2025-01-15T12:00:00.000Z'); @@ -42,12 +42,12 @@ test.describe('Calendar', () => { test.describe('Behavior', () => { test('renders calendar grid', async ({ page }) => { - const calendar = page.locator('component-card#calendar-01 hlm-calendar'); + const calendar = componentCard(page, 'calendar-01').locator('hlm-calendar'); await expect(calendar).toBeVisible(); }); test('navigation buttons are present', async ({ page }) => { - const card = page.locator('component-card#calendar-01'); + const card = componentCard(page, 'calendar-01'); // Spartan calendar renders prev/next navigation buttons const buttons = card.locator('button'); await expect(buttons.first()).toBeVisible(); diff --git a/e2e/components/card.spec.ts b/e2e/components/card.spec.ts index 9c584706..88c1d234 100644 --- a/e2e/components/card.spec.ts +++ b/e2e/components/card.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; // --------------------------------------------------------------------------- // Helpers @@ -13,6 +13,12 @@ async function isCardPresent(card: ReturnType false); } +async function selectMeetingCategory(card: ReturnType): Promise { + const meetingSwatch = card.locator('label[for="meeting"] div').last(); + await meetingSwatch.click({ force: true }); + await expect(card.getByText('Meeting')).toBeVisible({ timeout: 3000 }); +} + // Fixed date so card-15 (calendar) always renders the same month/day regardless of when the test runs. const FIXED_DATE = new Date('2025-01-15T12:00:00.000Z'); @@ -64,7 +70,7 @@ test.describe('Card', () => { test.describe('card-01 — Create project form', () => { test('name input accepts text', async ({ page }) => { - const card = page.locator('component-card#card-01'); + const card = componentCard(page, 'card-01'); await card.scrollIntoViewIfNeeded(); const input = card.locator('input[type="text"]').first(); await expect(input).toBeVisible(); @@ -73,7 +79,7 @@ test.describe('Card', () => { }); test('select trigger opens framework dropdown', async ({ page }) => { - const card = page.locator('component-card#card-01'); + const card = componentCard(page, 'card-01'); await card.scrollIntoViewIfNeeded(); const trigger = card.locator('hlm-select-trigger button').first(); await expect(trigger).toBeVisible(); @@ -87,7 +93,7 @@ test.describe('Card', () => { }); test('deploy button is clickable', async ({ page }) => { - const card = page.locator('component-card#card-01'); + const card = componentCard(page, 'card-01'); await card.scrollIntoViewIfNeeded(); const btn = card.locator('button[type="submit"]').first(); await expect(btn).toBeVisible(); @@ -96,7 +102,7 @@ test.describe('Card', () => { }); test('snapshot — filled form', async ({ page }) => { - const card = page.locator('component-card#card-01'); + const card = componentCard(page, 'card-01'); await card.scrollIntoViewIfNeeded(); await card.locator('input[type="text"]').first().fill('My Project'); await expect.soft(card).toHaveScreenshot('card/card-01-filled.png'); @@ -109,7 +115,7 @@ test.describe('Card', () => { test.describe('card-02 — Login form', () => { test('email and password inputs accept values', async ({ page }) => { - const card = page.locator('component-card#card-02'); + const card = componentCard(page, 'card-02'); await card.scrollIntoViewIfNeeded(); const email = card.locator('input[type="email"]').first(); const password = card.locator('input[type="password"]').first(); @@ -120,13 +126,13 @@ test.describe('Card', () => { }); test('sign-up link button is visible', async ({ page }) => { - const card = page.locator('component-card#card-02'); + const card = componentCard(page, 'card-02'); await card.scrollIntoViewIfNeeded(); await expect(card.getByRole('button', { name: 'Sign up' })).toBeVisible(); }); test('login button is enabled', async ({ page }) => { - const card = page.locator('component-card#card-02'); + const card = componentCard(page, 'card-02'); await card.scrollIntoViewIfNeeded(); const btn = card.locator('button[type="submit"]').first(); await expect(btn).toBeVisible(); @@ -134,7 +140,7 @@ test.describe('Card', () => { }); test('snapshot — filled login form', async ({ page }) => { - const card = page.locator('component-card#card-02'); + const card = componentCard(page, 'card-02'); await card.scrollIntoViewIfNeeded(); await card.locator('input[type="email"]').first().fill('user@example.com'); await card.locator('input[type="password"]').first().fill('s3cr3t!'); @@ -148,14 +154,14 @@ test.describe('Card', () => { test.describe('card-03 — Login with security footer', () => { test('email and password inputs are present', async ({ page }) => { - const card = page.locator('component-card#card-03'); + const card = componentCard(page, 'card-03'); await card.scrollIntoViewIfNeeded(); await expect(card.locator('input[type="email"]').first()).toBeVisible(); await expect(card.locator('input[type="password"]').first()).toBeVisible(); }); test('login button is enabled', async ({ page }) => { - const card = page.locator('component-card#card-03'); + const card = componentCard(page, 'card-03'); await card.scrollIntoViewIfNeeded(); const btn = card.locator('button[type="submit"]').first(); await expect(btn).toBeVisible(); @@ -163,7 +169,7 @@ test.describe('Card', () => { }); test('security footer text is visible', async ({ page }) => { - const card = page.locator('component-card#card-03'); + const card = componentCard(page, 'card-03'); await card.scrollIntoViewIfNeeded(); await expect(card.getByText(/encrypted/i)).toBeVisible(); }); @@ -176,7 +182,7 @@ test.describe('Card', () => { test.describe('card-04 — Nested card with muted footer', () => { test('name input and deploy button are present', async ({ page }) => { - const card = page.locator('component-card#card-04'); + const card = componentCard(page, 'card-04'); await card.scrollIntoViewIfNeeded(); const input = card.locator('input[type="text"]').first(); await expect(input).toBeVisible(); @@ -191,7 +197,7 @@ test.describe('Card', () => { for (const id of ['card-05', 'card-06', 'card-07', 'card-08', 'card-09', 'card-10']) { test(`${id} — submit button is visible and enabled`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const present = await isCardPresent(card); test.skip(!present, `${id} is not rendered`); await card.scrollIntoViewIfNeeded(); @@ -207,7 +213,7 @@ test.describe('Card', () => { test.describe('card-11 — Empty project state', () => { test('Add button is visible and clickable', async ({ page }) => { - const card = page.locator('component-card#card-11'); + const card = componentCard(page, 'card-11'); const present = await isCardPresent(card); test.skip(!present, 'card-11 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -218,7 +224,7 @@ test.describe('Card', () => { }); test('empty-state title is visible', async ({ page }) => { - const card = page.locator('component-card#card-11'); + const card = componentCard(page, 'card-11'); const present = await isCardPresent(card); test.skip(!present, 'card-11 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -232,7 +238,7 @@ test.describe('Card', () => { test.describe('card-12 — Currency converter', () => { test('swap button is visible and enabled', async ({ page }) => { - const card = page.locator('component-card#card-12'); + const card = componentCard(page, 'card-12'); const present = await isCardPresent(card); test.skip(!present, 'card-12 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -242,7 +248,7 @@ test.describe('Card', () => { }); test('cycle send currency changes the rate badge', async ({ page }) => { - const card = page.locator('component-card#card-12'); + const card = componentCard(page, 'card-12'); const present = await isCardPresent(card); test.skip(!present, 'card-12 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -262,7 +268,7 @@ test.describe('Card', () => { }); test('cycle receive currency changes the rate badge', async ({ page }) => { - const card = page.locator('component-card#card-12'); + const card = componentCard(page, 'card-12'); const present = await isCardPresent(card); test.skip(!present, 'card-12 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -280,7 +286,7 @@ test.describe('Card', () => { }); test('swap exchanges send and receive currency codes in the rate badge', async ({ page }) => { - const card = page.locator('component-card#card-12'); + const card = componentCard(page, 'card-12'); const present = await isCardPresent(card); test.skip(!present, 'card-12 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -308,7 +314,7 @@ test.describe('Card', () => { }); test('snapshot — after currency swap', async ({ page }) => { - const card = page.locator('component-card#card-12'); + const card = componentCard(page, 'card-12'); const present = await isCardPresent(card); test.skip(!present, 'card-12 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -323,7 +329,7 @@ test.describe('Card', () => { test.describe('card-13 — Onboarding steps (accordion)', () => { test('step counter badge is visible', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -332,7 +338,7 @@ test.describe('Card', () => { }); test('first step accordion is open by default', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -341,7 +347,7 @@ test.describe('Card', () => { }); test('"Got it" button marks a step as done and advances to next', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -369,7 +375,7 @@ test.describe('Card', () => { }); test('completing all steps shows "All done" and Start over button', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -390,7 +396,7 @@ test.describe('Card', () => { }); test('"Start over" resets all steps', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -412,7 +418,7 @@ test.describe('Card', () => { }); test('snapshot — after first step completed', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -425,7 +431,7 @@ test.describe('Card', () => { }); test('snapshot — all steps completed', async ({ page }) => { - const card = page.locator('component-card#card-13'); + const card = componentCard(page, 'card-13'); const present = await isCardPresent(card); test.skip(!present, 'card-13 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -438,6 +444,7 @@ test.describe('Card', () => { await gotItBtn.click(); } // Wait for the completion state to fully render (accordion animations settle) + await expect(card.getByText("You're all set")).toBeVisible({ timeout: 5000 }); await expect(card.getByRole('button', { name: 'Start over' })).toBeVisible({ timeout: 5000 }); // Wait for layout to stabilize — animate.enter schedules class addition via // afterNextRender which can cause brief height variance across frames. @@ -446,17 +453,19 @@ test.describe('Card', () => { new Promise((resolve) => { let prevHeight = el.getBoundingClientRect().height; let stable = 0; + let frames = 0; const check = () => { const h = el.getBoundingClientRect().height; stable = h === prevHeight ? stable + 1 : 0; prevHeight = h; - if (stable >= 5) resolve(); + frames++; + if (stable >= 12 && frames >= 15) resolve(); else requestAnimationFrame(check); }; requestAnimationFrame(check); }), ); - await expect.soft(card).toHaveScreenshot('card/card-13-done.png'); + await expect.soft(card.locator('sim-card-13')).toHaveScreenshot('card/card-13-done.png'); }); }); @@ -466,7 +475,7 @@ test.describe('Card', () => { test.describe('card-14 — Sandbox pipeline', () => { test('task list is rendered with task names', async ({ page }) => { - const card = page.locator('component-card#card-14'); + const card = componentCard(page, 'card-14'); const present = await isCardPresent(card); test.skip(!present, 'card-14 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -475,7 +484,7 @@ test.describe('Card', () => { }); test('progress bar is present', async ({ page }) => { - const card = page.locator('component-card#card-14'); + const card = componentCard(page, 'card-14'); const present = await isCardPresent(card); test.skip(!present, 'card-14 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -484,7 +493,7 @@ test.describe('Card', () => { test('"Re-run" button appears after pipeline completes and restarts it', async ({ page }) => { test.setTimeout(30_000); - const card = page.locator('component-card#card-14'); + const card = componentCard(page, 'card-14'); const present = await isCardPresent(card); test.skip(!present, 'card-14 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -501,7 +510,7 @@ test.describe('Card', () => { test('snapshot — pipeline completed state', async ({ page }) => { test.setTimeout(30_000); - const card = page.locator('component-card#card-14'); + const card = componentCard(page, 'card-14'); const present = await isCardPresent(card); test.skip(!present, 'card-14 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -517,7 +526,7 @@ test.describe('Card', () => { test.describe('card-15 — Calendar event card', () => { test('calendar is visible with month/year heading', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -526,7 +535,7 @@ test.describe('Card', () => { }); test('"Today" button navigates calendar back to current month', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -545,7 +554,7 @@ test.describe('Card', () => { }); test('previous/next month buttons navigate the calendar', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -569,7 +578,7 @@ test.describe('Card', () => { }); test('"Add event" button opens the event form', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -582,7 +591,7 @@ test.describe('Card', () => { }); test('cancel button hides the event form', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -600,7 +609,7 @@ test.describe('Card', () => { }); test('submitting event form without required fields does not close form', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -614,7 +623,7 @@ test.describe('Card', () => { }); test('submitting a valid event adds it to the day list', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -624,7 +633,7 @@ test.describe('Card', () => { await card.locator('input[placeholder="--:--"]').fill('09:00'); // Select the first color radio (meeting / sky) - await card.locator('label hlm-radio').first().click(); + await selectMeetingCategory(card); await card.getByRole('button', { name: /^Add$/ }).click(); @@ -633,7 +642,7 @@ test.describe('Card', () => { }); test('snapshot — event form open', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -643,14 +652,14 @@ test.describe('Card', () => { }); test('snapshot — after adding an event', async ({ page }) => { - const card = page.locator('component-card#card-15'); + const card = componentCard(page, 'card-15'); const present = await isCardPresent(card); test.skip(!present, 'card-15 is not rendered'); await card.scrollIntoViewIfNeeded(); await card.getByRole('button', { name: /add event/i }).click(); await card.locator('input[placeholder="What\'s on?"]').fill('Team standup'); await card.locator('input[placeholder="--:--"]').fill('09:00'); - await card.locator('label hlm-radio').first().click(); + await selectMeetingCategory(card); await card.getByRole('button', { name: /^Add$/ }).click(); await expect(card.getByText('Team standup')).toBeVisible({ timeout: 3000 }); await expect.soft(card).toHaveScreenshot('card/card-15-event-added.png'); @@ -663,7 +672,7 @@ test.describe('Card', () => { test.describe('card-16 — Tools list', () => { test('ENABLED and AVAILABLE section labels are visible', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -672,7 +681,7 @@ test.describe('Card', () => { }); test('tool count badge reflects enabled tools', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -681,7 +690,7 @@ test.describe('Card', () => { }); test('"Disable all" moves all tools to AVAILABLE', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -697,7 +706,7 @@ test.describe('Card', () => { }); test('"Enable all" moves all tools to ENABLED', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -713,7 +722,7 @@ test.describe('Card', () => { }); test('clicking an enabled tool row moves it to AVAILABLE', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -739,7 +748,7 @@ test.describe('Card', () => { }); test('clicking an available tool row moves it to ENABLED', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -762,7 +771,7 @@ test.describe('Card', () => { }); test('snapshot — all tools disabled', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); @@ -774,7 +783,7 @@ test.describe('Card', () => { }); test('snapshot — all tools enabled', async ({ page }) => { - const card = page.locator('component-card#card-16'); + const card = componentCard(page, 'card-16'); const present = await isCardPresent(card); test.skip(!present, 'card-16 is not rendered'); await card.scrollIntoViewIfNeeded(); diff --git a/e2e/components/checkbox.spec.ts b/e2e/components/checkbox.spec.ts index 38f268fa..7d2216cb 100644 --- a/e2e/components/checkbox.spec.ts +++ b/e2e/components/checkbox.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; test.describe('Checkbox', () => { test.beforeEach(async ({ navigateToComponent }) => { @@ -13,7 +13,7 @@ test.describe('Checkbox', () => { test.describe('Behavior', () => { test('toggles checked state with the keyboard', async ({ page }) => { - const card = page.locator('component-card#checkbox-01'); + const card = componentCard(page, 'checkbox-01'); const checkbox = card.locator('[role="checkbox"]:visible').first(); await expect(checkbox).toBeVisible(); @@ -28,7 +28,7 @@ test.describe('Checkbox', () => { }); test('disabled checkbox does not change state on click', async ({ page }) => { - const disabled = page.locator('component-card#checkbox-01 [role="checkbox"][aria-disabled="true"]').first(); + const disabled = componentCard(page, 'checkbox-01').locator('[role="checkbox"][aria-disabled="true"]').first(); if ((await disabled.count()) > 0) { const before = await disabled.getAttribute('aria-checked'); await disabled.click({ force: true }); @@ -45,13 +45,13 @@ test.describe('Checkbox', () => { await expect.poll(() => root.evaluate((element) => element.classList.contains('dark'))).toBe(!wasDark); await page.goto('/components/checkbox#checkbox-01'); - const card = page.locator('component-card#checkbox-01'); + const card = componentCard(page, 'checkbox-01'); await expect(card).toHaveClass(/ring-2/); await card.locator('button:has(ng-icon[name="lucideCode"])').click(); const sheet = page.getByRole('dialog'); await expect(sheet.getByRole('heading', { name: 'Code', level: 3 })).toBeVisible(); - await expect(sheet.locator('code-preview').last().locator('pre')).toBeVisible(); + await expect(sheet.locator('sim-code-preview').last().locator('pre')).toBeVisible(); }); test.describe('Checked snapshots', () => { @@ -62,7 +62,7 @@ test.describe('Checkbox', () => { 'checkbox-13 includes interactive label content and is covered by behavior tests', ); - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) diff --git a/e2e/components/dialog.spec.ts b/e2e/components/dialog.spec.ts index 1f924f92..2bef2553 100644 --- a/e2e/components/dialog.spec.ts +++ b/e2e/components/dialog.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; test.describe('Dialog', () => { test.beforeEach(async ({ navigateToComponent }) => { @@ -14,7 +14,7 @@ test.describe('Dialog', () => { test.describe('Open snapshots', () => { for (const id of COMPONENT_IDS.dialog) { test(`captures open state in ${id}`, async ({ page }) => { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) @@ -39,13 +39,13 @@ test.describe('Dialog', () => { test.describe('Behavior', () => { test('opens dialog on trigger button click', async ({ page }) => { - const trigger = page.locator('component-card#dialog-01 button').first(); + const trigger = componentCard(page, 'dialog-01').locator('button').first(); await trigger.click(); await expect(page.locator('[role="dialog"]').first()).toBeVisible({ timeout: 3000 }); }); test('closes dialog on Escape key', async ({ page }) => { - const trigger = page.locator('component-card#dialog-01 button').first(); + const trigger = componentCard(page, 'dialog-01').locator('button').first(); await trigger.click(); await expect(page.locator('[role="dialog"]').first()).toBeVisible({ timeout: 3000 }); await page.keyboard.press('Escape'); @@ -53,7 +53,7 @@ test.describe('Dialog', () => { }); test('closes dialog on close button click', async ({ page }) => { - const trigger = page.locator('component-card#dialog-01 button').first(); + const trigger = componentCard(page, 'dialog-01').locator('button').first(); await trigger.click(); const dialog = page.locator('[role="dialog"]').first(); await expect(dialog).toBeVisible({ timeout: 3000 }); diff --git a/e2e/components/dropdown.spec.ts b/e2e/components/dropdown.spec.ts index 2427649b..a695dc12 100644 --- a/e2e/components/dropdown.spec.ts +++ b/e2e/components/dropdown.spec.ts @@ -1,7 +1,7 @@ import type { Locator, Page } from '@playwright/test'; import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; async function getOpenMenu(page: Page): Promise { const menu = page.locator('[role="menu"]').first(); @@ -10,7 +10,7 @@ async function getOpenMenu(page: Page): Promise { } async function snapshotOpenDropdownVariant(page: Page, id: string): Promise { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const trigger = card.getByRole('button').first(); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) @@ -70,7 +70,7 @@ test.describe('Dropdown', () => { test.describe('Behavior', () => { test('opens menu on trigger press and closes on Escape', async ({ page }) => { - const trigger = page.locator('component-card#dropdown-01 button').first(); + const trigger = componentCard(page, 'dropdown-01').locator('button').first(); await trigger.focus(); await page.keyboard.press('Enter'); @@ -82,7 +82,7 @@ test.describe('Dropdown', () => { }); test('menu closes after selecting an item', async ({ page }) => { - const trigger = page.locator('component-card#dropdown-01 button').first(); + const trigger = componentCard(page, 'dropdown-01').locator('button').first(); await trigger.click(); const menu = await getOpenMenu(page); const item = menu.locator('[role="menuitem"]').first(); @@ -91,27 +91,24 @@ test.describe('Dropdown', () => { }); test('supports submenu and checkbox interactions in rich dropdown content', async ({ page }) => { - const trigger = page.locator('component-card#dropdown-09 button').first(); - await trigger.click(); - - const rootMenu = await getOpenMenu(page); - const notificationsTrigger = rootMenu.getByRole('menuitem', { name: 'Notifications' }); - await notificationsTrigger.hover(); - - const notificationMenu = page - .locator('[role="menu"]') - .filter({ has: page.getByRole('menuitemcheckbox', { name: 'Email' }) }) - .first(); - await expect(notificationMenu).toBeVisible({ timeout: 3000 }); - - const pushItem = notificationMenu.getByRole('menuitemcheckbox', { name: 'Push' }); + const trigger = componentCard(page, 'dropdown-09').locator('button').first(); + const openNotificationsMenu = async (): Promise => { + await trigger.dispatchEvent('click'); + const rootMenu = await getOpenMenu(page); + await rootMenu.getByRole('menuitem', { name: 'Notifications' }).hover(); + const notificationMenu = page + .locator('[role="menu"]') + .filter({ has: page.getByRole('menuitemcheckbox', { name: 'Email' }) }) + .first(); + await expect(notificationMenu).toBeVisible({ timeout: 3000 }); + }; + + await openNotificationsMenu(); + + const pushItem = page.getByRole('menuitemcheckbox', { name: 'Push' }); await expect(pushItem).toHaveAttribute('aria-checked', 'false'); await pushItem.click(); - - await trigger.click(); - await rootMenu.getByRole('menuitem', { name: 'Notifications' }).hover(); - const reopenedPushItem = page.getByRole('menuitemcheckbox', { name: 'Push' }); - await expect(reopenedPushItem).toHaveAttribute('aria-checked', 'true'); + await expect(pushItem).toHaveAttribute('aria-checked', 'true'); }); }); }); diff --git a/e2e/components/file-upload.spec.ts b/e2e/components/file-upload.spec.ts index 944d94f9..3ed2a57d 100644 --- a/e2e/components/file-upload.spec.ts +++ b/e2e/components/file-upload.spec.ts @@ -3,7 +3,7 @@ import { Buffer } from 'node:buffer'; import { join } from 'node:path'; import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; const TEST_IMAGE_NAME = 'bg-01.jpg'; const TEST_IMAGE_PATH = join(process.cwd(), 'src/assets/backgrounds', TEST_IMAGE_NAME); @@ -120,7 +120,7 @@ const uploadedStateConfigs: Record = { }; async function uploadFilesInCard(page: Page, cardId: string, files: string | string[] | FilePayload | FilePayload[]) { - const card = page.locator(`component-card#${cardId}`); + const card = componentCard(page, cardId); const input = card.locator('input[type="file"]'); await expect(card).toBeVisible(); await input.setInputFiles(files); @@ -128,7 +128,7 @@ async function uploadFilesInCard(page: Page, cardId: string, files: string | str } async function prepareUploadedState(page: Page, cardId: string): Promise { - const card = page.locator(`component-card#${cardId}`); + const card = componentCard(page, cardId); const config = uploadedStateConfigs[cardId]; await expect(card).toBeVisible(); @@ -164,7 +164,7 @@ test.describe('File Upload', () => { test.describe('Behavior', () => { test('pressing upload opens file chooser and selecting a file shows it', async ({ page }) => { - const card = page.locator('component-card#file-upload-01'); + const card = componentCard(page, 'file-upload-01'); const button = card.getByRole('button', { name: 'Upload image' }); await expect(button).toBeVisible(); @@ -192,7 +192,7 @@ test.describe('File Upload', () => { }); test('supports picking multiple files and removing them from the list', async ({ page }) => { - const card = page.locator('component-card#file-upload-10'); + const card = componentCard(page, 'file-upload-10'); const input = card.locator('input[type="file"]'); const removeAllButton = card.locator('button', { hasText: 'Remove all' }); diff --git a/e2e/components/notification.spec.ts b/e2e/components/notification.spec.ts index e6682b39..a31b8f9e 100644 --- a/e2e/components/notification.spec.ts +++ b/e2e/components/notification.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; // Fixed date so notification-27 toast description always renders the same timestamp. const FIXED_DATE = new Date('2025-01-15T12:00:00.000Z'); @@ -49,7 +49,7 @@ test.describe('Notification', () => { test('visual regression — toast trigger variants', async ({ page }) => { for (const variantId of TOAST_TRIGGER_VARIANTS) { - const trigger = page.locator(`component-card#${variantId} button`).first(); + const trigger = componentCard(page, variantId).locator('button').first(); await expect(trigger).toBeVisible(); await trigger.click(); @@ -66,13 +66,13 @@ test.describe('Notification', () => { test.describe('Behavior', () => { test('static notification renders with expected structure', async ({ page }) => { // notification-01 is a static alert card; verify it renders - const card = page.locator('component-card#notification-01'); + const card = componentCard(page, 'notification-01'); await expect(card).toBeVisible(); }); for (const variantId of TOAST_TRIGGER_VARIANTS) { test(`${variantId} toast trigger button fires a toast`, async ({ page }) => { - const trigger = page.locator(`component-card#${variantId} button`).first(); + const trigger = componentCard(page, variantId).locator('button').first(); await expect(trigger).toBeVisible(); await trigger.click(); await expect(page.locator('[data-sonner-toast]').first()).toBeVisible({ timeout: 5000 }); diff --git a/e2e/components/popover.spec.ts b/e2e/components/popover.spec.ts index 9d93b72a..17525875 100644 --- a/e2e/components/popover.spec.ts +++ b/e2e/components/popover.spec.ts @@ -1,7 +1,7 @@ import type { Locator, Page } from '@playwright/test'; import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; async function getPopoverTrigger(card: Locator, id: string): Promise { const variantHost = card.locator(`sim-${id}`); @@ -14,7 +14,7 @@ async function getPopoverTrigger(card: Locator, id: string): Promise { } async function openPopoverForVariant(page: Page, id: string): Promise<{ card: Locator; trigger: Locator }> { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) diff --git a/e2e/components/radio.spec.ts b/e2e/components/radio.spec.ts index 4ede272c..d5140810 100644 --- a/e2e/components/radio.spec.ts +++ b/e2e/components/radio.spec.ts @@ -1,14 +1,15 @@ import type { Locator } from '@playwright/test'; import { expect, test } from '../fixtures/base.fixture'; import { COMPONENT_IDS } from '../utils/component-ids'; -import { snapshotVariants } from '../utils/visual.helpers'; +import { componentCard, snapshotVariants } from '../utils/visual.helpers'; async function getCheckedValue(card: Locator): Promise { const checkedRadio = card.locator('.brn-radio-checked').first(); if ((await checkedRadio.count()) === 0) return null; - const id = await checkedRadio.getAttribute('id'); - if (id) return id; - return checkedRadio.getAttribute('data-value'); + return checkedRadio.evaluate((element) => { + const radio = element.closest('hlm-radio') ?? element; + return radio.getAttribute('id') ?? radio.getAttribute('data-value'); + }); } async function ensureCheckedState(card: Locator): Promise { @@ -91,7 +92,7 @@ test.describe('Radio', () => { test('visual regression — checked state for all variants', async ({ page }) => { for (const id of COMPONENT_IDS.radio) { - const card = page.locator(`component-card#${id}`); + const card = componentCard(page, id); const isPresent = await card .waitFor({ state: 'visible', timeout: 5000 }) .then(() => true) @@ -110,28 +111,32 @@ test.describe('Radio', () => { test.describe('Behavior', () => { test('selects a radio option on label click', async ({ page }) => { // BRN radio uses CDK radio, not role="radio"; click via the \n\t`,\n})\nexport class Checkbox10Component {\n\tpublic readonly checked = model(false);\n}" + "content": "import { Component, model } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-10',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tCheckbox label\n\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\n\t\t\t\t\tThe description of the checkbox here.\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox10Component {\n\tpublic readonly checked = model(false);\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-11.json b/public/registry/checkbox-11.json index 86186591..86419f76 100644 --- a/public/registry/checkbox-11.json +++ b/public/registry/checkbox-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-11',\n\timports: [HlmCheckbox, HlmLabel],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox11Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-11',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox11Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-12.json b/public/registry/checkbox-12.json index 63413320..9d2c7255 100644 --- a/public/registry/checkbox-12.json +++ b/public/registry/checkbox-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-12',\n\timports: [HlmCheckbox, HlmLabel],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox12Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-12',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox12Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-13.json b/public/registry/checkbox-13.json index f41b942e..489ecfde 100644 --- a/public/registry/checkbox-13.json +++ b/public/registry/checkbox-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-13',\n\timports: [HlmCheckbox, HlmLabel],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox13Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-13',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox13Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-14.json b/public/registry/checkbox-14.json index d752a6ff..cb74c359 100644 --- a/public/registry/checkbox-14.json +++ b/public/registry/checkbox-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRocket } from '@ng-icons/lucide';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-14',\n\timports: [HlmCheckbox, HlmLabel, HlmIcon, NgIcon],\n\tproviders: [provideIcons({ lucideRocket })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tBasic plan\n\t\t\t\t\tIncludes up to 10 users and 5 projects\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox14Component {\n\tpublic readonly checked = model(false);\n}" + "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRocket } from '@ng-icons/lucide';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-14',\n\timports: [NgIcon, HlmCheckboxImports, HlmLabelImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideRocket })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tBasic plan\n\t\t\t\t\tIncludes up to 10 users and 5 projects\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox14Component {\n\tpublic readonly checked = model(false);\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-15.json b/public/registry/checkbox-15.json index 13042b52..7d54f296 100644 --- a/public/registry/checkbox-15.json +++ b/public/registry/checkbox-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-15',\n\timports: [HlmCheckbox, HlmLabel],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tMastercard ending in 1234\n\t\t\t\t\tExpiry 06/2024\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox15Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-15',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tMastercard ending in 1234\n\t\t\t\t\tExpiry 06/2024\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox15Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-16.json b/public/registry/checkbox-16.json index 8144cf26..1f3c5c24 100644 --- a/public/registry/checkbox-16.json +++ b/public/registry/checkbox-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-16',\n\timports: [HlmCheckbox, HlmLabel, HlmAvatar, HlmAvatarImage, HlmAvatarFallback],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\"Alan\n\t\t\t\t\tAC\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t@alan\n\t\t\t\t\t\n\t\t\t\t\tFrontend Developer, Payment\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox16Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-16',\n\timports: [HlmCheckboxImports, HlmLabelImports, HlmAvatarImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\"Alan\n\t\t\t\t\tAC\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t@alan\n\t\t\t\t\t\n\t\t\t\t\tFrontend Developer, Payment\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Checkbox16Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-17.json b/public/registry/checkbox-17.json index b12a3ba6..eee41d54 100644 --- a/public/registry/checkbox-17.json +++ b/public/registry/checkbox-17.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideFrame, lucideHand, lucideMousePointer2, lucidePenTool } from '@ng-icons/lucide';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-17',\n\timports: [HlmCheckbox, HlmLabel, HlmIcon, NgIcon],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideMousePointer2,\n\t\t\tlucideFrame,\n\t\t\tlucidePenTool,\n\t\t\tlucideHand,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
{{ item.label }}
\n\t\t\t\t\n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Checkbox17Component {\n\titems: { id: number; value: string; label: string; icon: string }[] = [\n\t\t{ id: 1, value: 'frame', label: 'Frame', icon: 'lucideFrame' },\n\t\t{ id: 2, value: 'pointer', label: 'Pointer', icon: 'lucideMousePointer2' },\n\t\t{ id: 3, value: 'pen', label: 'Pen', icon: 'lucidePenTool' },\n\t\t{ id: 4, value: 'handTool', label: 'Hand tool', icon: 'lucideHand' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideFrame, lucideHand, lucideMousePointer2, lucidePenTool } from '@ng-icons/lucide';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\ninterface CheckboxItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n\ticon: string;\n}\n\n@Component({\n\tselector: 'sim-checkbox-17',\n\timports: [NgIcon, HlmCheckboxImports, HlmLabelImports, HlmIconImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideMousePointer2,\n\t\t\tlucideFrame,\n\t\t\tlucidePenTool,\n\t\t\tlucideHand,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
{{ item.label }}
\n\t\t\t\t\n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Checkbox17Component {\n\tprotected readonly items: CheckboxItem[] = [\n\t\t{ id: 1, value: 'frame', label: 'Frame', icon: 'lucideFrame' },\n\t\t{ id: 2, value: 'pointer', label: 'Pointer', icon: 'lucideMousePointer2' },\n\t\t{ id: 3, value: 'pen', label: 'Pen', icon: 'lucidePenTool' },\n\t\t{ id: 4, value: 'handTool', label: 'Hand tool', icon: 'lucideHand' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-18.json b/public/registry/checkbox-18.json index 2ac9679f..f7408f7d 100644 --- a/public/registry/checkbox-18.json +++ b/public/registry/checkbox-18.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-18',\n\timports: [HlmCheckbox, HlmLabel],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox18Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-18',\n\timports: [HlmCheckboxImports, HlmLabelImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Checkbox18Component {}" } \ No newline at end of file diff --git a/public/registry/checkbox-19.json b/public/registry/checkbox-19.json index 4e0a06e2..10d32c9a 100644 --- a/public/registry/checkbox-19.json +++ b/public/registry/checkbox-19.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRocket } from '@ng-icons/lucide';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-19',\n\timports: [HlmCheckbox, HlmLabel, HlmIcon, NgIcon, HlmBadge],\n\tproviders: [provideIcons({ lucideRocket })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\tBasic plan\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t$10\n\t\t\t\t\t\tper month\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tLimited\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tIncludes up to 10 users, 20GB individual data and access to all features.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Checkbox19Component {\n\tpublic readonly checked = model(false);\n}" + "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRocket } from '@ng-icons/lucide';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-19',\n\timports: [NgIcon, HlmCheckboxImports, HlmLabelImports, HlmIconImports, HlmBadgeImports],\n\tproviders: [provideIcons({ lucideRocket })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\tBasic plan\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t$10\n\t\t\t\t\t\tper month\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tLimited\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tIncludes up to 10 users, 20GB individual data and access to all features.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Checkbox19Component {\n\tpublic readonly checked = model(false);\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-20.json b/public/registry/checkbox-20.json index 7d4aacfd..d17ab57f 100644 --- a/public/registry/checkbox-20.json +++ b/public/registry/checkbox-20.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideZap } from '@ng-icons/lucide';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-20',\n\timports: [HlmCheckbox, HlmLabel, HlmIcon, NgIcon, HlmBadge],\n\tproviders: [provideIcons({ lucideZap })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\tEnterprise plan\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tLimited\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t$40\n\t\t\t\t\tper month\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tUnlimited users, unlimited individual data and access to all features.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Checkbox20Component {\n\tpublic readonly checked = model(false);\n}" + "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideZap } from '@ng-icons/lucide';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-20',\n\timports: [NgIcon, HlmCheckboxImports, HlmLabelImports, HlmIconImports, HlmBadgeImports],\n\tproviders: [provideIcons({ lucideZap })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\tEnterprise plan\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tLimited\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t$40\n\t\t\t\t\tper month\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tUnlimited users, unlimited individual data and access to all features.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Checkbox20Component {\n\tpublic readonly checked = model(false);\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-21.json b/public/registry/checkbox-21.json index 70907122..565897fc 100644 --- a/public/registry/checkbox-21.json +++ b/public/registry/checkbox-21.json @@ -1,3 +1,3 @@ { - "content": "import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideZap } from '@ng-icons/lucide';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-21',\n\timports: [HlmCheckbox, HlmLabel, NgClass],\n\tproviders: [provideIcons({ lucideZap })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tDays of the week\n\t\t\t
\n\t\t\t\t@for (item of items; track item.value) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label[0] }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Checkbox21Component {\n\titems: {\n\t\tvalue: string;\n\t\tlabel: string;\n\t\tdefaultChecked: boolean;\n\t\tdisabled: boolean;\n\t}[] = [\n\t\t{ value: '0', label: 'Sunday', defaultChecked: false, disabled: false },\n\t\t{ value: '1', label: 'Monday', defaultChecked: true, disabled: false },\n\t\t{ value: '2', label: 'Tuesday', defaultChecked: false, disabled: true },\n\t\t{ value: '3', label: 'Wednesday', defaultChecked: false, disabled: false },\n\t\t{ value: '4', label: 'Thursday', defaultChecked: false, disabled: false },\n\t\t{ value: '5', label: 'Friday', defaultChecked: false, disabled: false },\n\t\t{ value: '6', label: 'Saturday', defaultChecked: true, disabled: false },\n\t];\n}" + "content": "import { NgClass } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideZap } from '@ng-icons/lucide';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\ninterface CheckboxItem {\n\tvalue: string;\n\tlabel: string;\n\tdefaultChecked: boolean;\n\tdisabled: boolean;\n}\n\n@Component({\n\tselector: 'sim-checkbox-21',\n\timports: [NgClass, HlmCheckboxImports, HlmLabelImports],\n\tproviders: [provideIcons({ lucideZap })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tDays of the week\n\t\t\t
\n\t\t\t\t@for (item of items; track item.value) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label[0] }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Checkbox21Component {\n\tprotected readonly items: CheckboxItem[] = [\n\t\t{ value: '0', label: 'Sunday', defaultChecked: false, disabled: false },\n\t\t{ value: '1', label: 'Monday', defaultChecked: true, disabled: false },\n\t\t{ value: '2', label: 'Tuesday', defaultChecked: false, disabled: true },\n\t\t{ value: '3', label: 'Wednesday', defaultChecked: false, disabled: false },\n\t\t{ value: '4', label: 'Thursday', defaultChecked: false, disabled: false },\n\t\t{ value: '5', label: 'Friday', defaultChecked: false, disabled: false },\n\t\t{ value: '6', label: 'Saturday', defaultChecked: true, disabled: false },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/checkbox-22.json b/public/registry/checkbox-22.json index d910660a..741cca7b 100644 --- a/public/registry/checkbox-22.json +++ b/public/registry/checkbox-22.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMoon, lucideSun } from '@ng-icons/lucide';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-22',\n\tproviders: [provideIcons({ lucideSun, lucideMoon })],\n\timports: [HlmCheckbox, HlmLabel, HlmIcon, NgIcon],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tAppearance mode toggle checkbox\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Checkbox22Component {\n\tpublic readonly checked = model(false);\n}" + "content": "import { Component, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMoon, lucideSun } from '@ng-icons/lucide';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-checkbox-22',\n\timports: [NgIcon, HlmCheckboxImports, HlmLabelImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideSun, lucideMoon })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tAppearance mode toggle checkbox\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Checkbox22Component {\n\tpublic readonly checked = model(false);\n}" } \ No newline at end of file diff --git a/public/registry/dialog-01.json b/public/registry/dialog-01.json index d5c8aebc..49bd577b 100644 --- a/public/registry/dialog-01.json +++ b/public/registry/dialog-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogDescription, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-01',\n\timports: [HlmButton, HlmDialogDescription, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Are you sure?

\n\t\t\t\t\t

\n\t\t\t\t\t\tTake a moment to review the details provided to ensure you understand the implications.\n\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog01Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-01',\n\timports: [HlmButtonImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Are you sure?

\n\t\t\t\t\t

\n\t\t\t\t\t\tTake a moment to review the details provided to ensure you understand the implications.\n\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog01Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-02.json b/public/registry/dialog-02.json index 319249d9..9f5894d3 100644 --- a/public/registry/dialog-02.json +++ b/public/registry/dialog-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-02',\n\tproviders: [provideIcons({ lucideCircleAlert })],\n\timports: [HlmButton, NgIcon, HlmIcon, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Are you sure?

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tTake a moment to review the details provided to ensure you understand the implications.\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog02Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-02',\n\tproviders: [provideIcons({ lucideCircleAlert })],\n\timports: [NgIcon, HlmButtonImports, HlmIconImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Are you sure?

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tTake a moment to review the details provided to ensure you understand the implications.\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog02Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-03.json b/public/registry/dialog-03.json index df921397..85689aa0 100644 --- a/public/registry/dialog-03.json +++ b/public/registry/dialog-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-03',\n\timports: [HlmButton, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog03Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-03',\n\timports: [HlmButtonImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog03Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-04.json b/public/registry/dialog-04.json index ec400e64..042a02d9 100644 --- a/public/registry/dialog-04.json +++ b/public/registry/dialog-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmScrollArea } from '@spartan-ng/helm/scroll-area';\nimport { NgScrollbarModule } from 'ngx-scrollbar';\n\n@Component({\n\tselector: 'sim-dialog-04',\n\timports: [HlmButton, HlmScrollArea, NgScrollbarModule, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog04Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmScrollAreaImports } from '@spartan-ng/helm/scroll-area';\nimport { NgScrollbarModule } from 'ngx-scrollbar';\n\n@Component({\n\tselector: 'sim-dialog-04',\n\timports: [NgScrollbarModule, HlmButtonImports, HlmScrollAreaImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog04Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-05.json b/public/registry/dialog-05.json index 704eeded..0a035abb 100644 --- a/public/registry/dialog-05.json +++ b/public/registry/dialog-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-05',\n\timports: [HlmButton, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address. You\n\t\t\t\t\t\t\t\t\t\tcan sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot Password"\n\t\t\t\t\t\t\t\t\t\tand follow the email verification steps to regain account access quickly and securely.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support, live\n\t\t\t\t\t\t\t\t\t\tchat during business hours, an integrated support ticket system, and phone support specifically for\n\t\t\t\t\t\t\t\t\t\tenterprise-level customers.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers like\n\t\t\t\t\t\t\t\t\t\tChrome and Firefox, mobile applications for iOS and Android, and desktop applications compatible\n\t\t\t\t\t\t\t\t\t\twith Windows and macOS.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard, and\n\t\t\t\t\t\t\t\t\t\tAmerican Express, digital payment platforms like PayPal, and direct bank transfers. Regional payment\n\t\t\t\t\t\t\t\t\t\toptions may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog05Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-05',\n\timports: [HlmButtonImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address. You\n\t\t\t\t\t\t\t\t\t\tcan sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot Password"\n\t\t\t\t\t\t\t\t\t\tand follow the email verification steps to regain account access quickly and securely.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support, live\n\t\t\t\t\t\t\t\t\t\tchat during business hours, an integrated support ticket system, and phone support specifically for\n\t\t\t\t\t\t\t\t\t\tenterprise-level customers.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers like\n\t\t\t\t\t\t\t\t\t\tChrome and Firefox, mobile applications for iOS and Android, and desktop applications compatible\n\t\t\t\t\t\t\t\t\t\twith Windows and macOS.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard, and\n\t\t\t\t\t\t\t\t\t\tAmerican Express, digital payment platforms like PayPal, and direct bank transfers. Regional payment\n\t\t\t\t\t\t\t\t\t\toptions may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog05Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-06.json b/public/registry/dialog-06.json index 047f0cc8..f8d00060 100644 --- a/public/registry/dialog-06.json +++ b/public/registry/dialog-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-06',\n\timports: [HlmButton, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog06Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-06',\n\timports: [HlmButtonImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Frequently Asked Questions (FAQ)

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tAccount Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tNavigate to the registration page, provide required information, and verify your email address.\n\t\t\t\t\t\t\t\t\t\t\tYou can sign up using your email or through social media platforms.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPassword Reset Process\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tUsers can reset their password through the account settings page. Click "Forgot\n\t\t\t\t\t\t\t\t\t\t\tPassword" and follow the email verification steps to regain account access quickly and\n\t\t\t\t\t\t\t\t\t\t\tsecurely.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tService Pricing Tiers\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe offer three primary subscription levels designed to meet diverse user needs: Basic (free with\n\t\t\t\t\t\t\t\t\t\t\tlimited features), Professional (monthly fee with comprehensive access), and Enterprise (custom\n\t\t\t\t\t\t\t\t\t\t\tpricing with full platform capabilities).\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tTechnical Support Channels\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer support is accessible through multiple communication methods including email support,\n\t\t\t\t\t\t\t\t\t\t\tlive chat during business hours, an integrated support ticket system, and phone support\n\t\t\t\t\t\t\t\t\t\t\tspecifically for enterprise-level customers.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tData Protection Strategies\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur platform implements rigorous security measures including 256-bit SSL encryption, regular\n\t\t\t\t\t\t\t\t\t\t\tcomprehensive security audits, strict data access controls, and compliance with international\n\t\t\t\t\t\t\t\t\t\t\tprivacy protection standards.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPlatform Compatibility\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tThe service supports multiple device and operating system environments, including web browsers\n\t\t\t\t\t\t\t\t\t\t\tlike Chrome and Firefox, mobile applications for iOS and Android, and desktop applications\n\t\t\t\t\t\t\t\t\t\t\tcompatible with Windows and macOS.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscription Management\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tSubscriptions can be cancelled at any time through account settings, with pro-rated refunds\n\t\t\t\t\t\t\t\t\t\t\tavailable within 30 days of payment. Both monthly and annual billing options are provided, with\n\t\t\t\t\t\t\t\t\t\t\tspecial discounts offered for annual commitments.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPayment Method Options\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tWe accept a wide range of payment methods including major credit cards such as Visa, MasterCard,\n\t\t\t\t\t\t\t\t\t\t\tand American Express, digital payment platforms like PayPal, and direct bank transfers. Regional\n\t\t\t\t\t\t\t\t\t\t\tpayment options may also be available depending on user location.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tCustomer Support\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur dedicated customer support team is available 24/7, providing quick and efficient assistance to\n\t\t\t\t\t\t\t\t\t\t\taddress any inquiries or issues you may have.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\tOur privacy policy outlines how we collect, use, and protect your personal data, ensuring your\n\t\t\t\t\t\t\t\t\t\t\tprivacy is protected at all times.\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog06Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-07.json b/public/registry/dialog-07.json index 9f184a94..a2bbbd18 100644 --- a/public/registry/dialog-07.json +++ b/public/registry/dialog-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-07',\n\timports: [HlmButton, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Terms & Conditions

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAcceptance of Terms\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tBy accessing and using this application, you agree to comply with and be bound by these Terms of\n\t\t\t\t\t\t\t\t\t\tService. If you disagree with any part of these terms, please discontinue use immediately.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUser Account Security\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tYou are responsible for safeguarding your account credentials and promptly reporting any\n\t\t\t\t\t\t\t\t\t\tunauthorized access. All activities under your account remain your responsibility regardless of who\n\t\t\t\t\t\t\t\t\t\tperforms them.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tIntellectual Property Rights\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAll content provided through this application is protected by copyright and other intellectual\n\t\t\t\t\t\t\t\t\t\tproperty laws. Unauthorized reproduction, distribution, or commercial exploitation of any content is\n\t\t\t\t\t\t\t\t\t\tstrictly prohibited without express written consent.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tLimitation of Liability\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThis application provides content \"as is\" without warranties of any kind. The owners shall not be\n\t\t\t\t\t\t\t\t\t\tliable for any damages arising from your use of or inability to use this service.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUser Conduct Guidelines\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t
  • Do not submit content that is illegal, harmful, or offensive
    • \n\t\t\t\t\t\t\t\t\t\t
  • Respect the privacy and rights of other users
    • \n\t\t\t\t\t\t\t\t\t\t
  • Do not attempt to interfere with the proper functioning of the service
    • \n\t\t\t\t\t\t\t\t\t\t
  • Follow all applicable laws and regulations when using this application
    • \n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tTerms Modification\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe reserve the right to modify these terms at any time without notice. Your continued use of the\n\t\t\t\t\t\t\t\t\t\tapplication following any changes constitutes acceptance of those modifications.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAccount Termination\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe may suspend or terminate your access to the service immediately, without prior notice or\n\t\t\t\t\t\t\t\t\t\tliability, for any reason including, but not limited to, a breach of these Terms.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tGoverning Law\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThese terms shall be governed by and construed in accordance with the laws of the jurisdiction in\n\t\t\t\t\t\t\t\t\t\twhich the service is primarily operated, without regard to its conflict of law provisions.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog07Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-07',\n\timports: [HlmButtonImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Terms & Conditions

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAcceptance of Terms\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tBy accessing and using this application, you agree to comply with and be bound by these Terms of\n\t\t\t\t\t\t\t\t\t\tService. If you disagree with any part of these terms, please discontinue use immediately.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUser Account Security\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tYou are responsible for safeguarding your account credentials and promptly reporting any\n\t\t\t\t\t\t\t\t\t\tunauthorized access. All activities under your account remain your responsibility regardless of who\n\t\t\t\t\t\t\t\t\t\tperforms them.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tIntellectual Property Rights\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAll content provided through this application is protected by copyright and other intellectual\n\t\t\t\t\t\t\t\t\t\tproperty laws. Unauthorized reproduction, distribution, or commercial exploitation of any content is\n\t\t\t\t\t\t\t\t\t\tstrictly prohibited without express written consent.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tLimitation of Liability\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThis application provides content \"as is\" without warranties of any kind. The owners shall not be\n\t\t\t\t\t\t\t\t\t\tliable for any damages arising from your use of or inability to use this service.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tUser Conduct Guidelines\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t
  • Do not submit content that is illegal, harmful, or offensive
    • \n\t\t\t\t\t\t\t\t\t\t
  • Respect the privacy and rights of other users
    • \n\t\t\t\t\t\t\t\t\t\t
  • Do not attempt to interfere with the proper functioning of the service
    • \n\t\t\t\t\t\t\t\t\t\t
  • Follow all applicable laws and regulations when using this application
    • \n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tTerms Modification\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe reserve the right to modify these terms at any time without notice. Your continued use of the\n\t\t\t\t\t\t\t\t\t\tapplication following any changes constitutes acceptance of those modifications.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tAccount Termination\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tWe may suspend or terminate your access to the service immediately, without prior notice or\n\t\t\t\t\t\t\t\t\t\tliability, for any reason including, but not limited to, a breach of these Terms.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tGoverning Law\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\tThese terms shall be governed by and construed in accordance with the laws of the jurisdiction in\n\t\t\t\t\t\t\t\t\t\twhich the service is primarily operated, without regard to its conflict of law provisions.\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog07Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-08.json b/public/registry/dialog-08.json index a878bb3d..88a96517 100644 --- a/public/registry/dialog-08.json +++ b/public/registry/dialog-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, model, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-08',\n\tproviders: [provideIcons({ lucideCircleAlert })],\n\timports: [HlmButton, NgIcon, HlmIcon, HlmInput, FormsModule, HlmLabel, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Final confirmation

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis action cannot be undone. To confirm, please enter the project name\n\t\t\t\t\t\t\t{{ projectName() }}.\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog08Component {\n\tprojectName = signal('Sim UI');\n\tinputValue = model('');\n\tisDisabled = computed(() => this.inputValue() !== this.projectName());\n\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, computed, model, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-08',\n\tproviders: [provideIcons({ lucideCircleAlert })],\n\timports: [FormsModule, NgIcon, HlmButtonImports, HlmIconImports, HlmInputImports, HlmLabelImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Final confirmation

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis action cannot be undone. To confirm, please enter the project name\n\t\t\t\t\t\t\t{{ projectName() }}.\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog08Component {\n\tprotected readonly projectName = signal('Sim UI');\n\tprotected readonly inputValue = model('');\n\tprotected readonly isDisabled = computed(() => this.inputValue() !== this.projectName());\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-09.json b/public/registry/dialog-09.json index 84a0c628..05f8fee7 100644 --- a/public/registry/dialog-09.json +++ b/public/registry/dialog-09.json @@ -1,3 +1,3 @@ { - "content": "import { HlmInputGroupImports } from '@/libs/ui/input-group/src';\nimport { Component, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideMail } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-09',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideMail })],\n\timports: [NgIcon, FormsModule, HlmButton, HlmDialogImports, HlmInputGroupImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Never miss an update

\n\t\t\t\t\t\t

Subscribe to receive news and special offers.

\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\tBy subscribing you agree to our\n\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t.\n\t\t\t\t

\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog09Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { HlmInputGroupImports } from '@/libs/ui/input-group/src';\nimport { Component, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideMail } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-09',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideMail })],\n\timports: [NgIcon, FormsModule, HlmButtonImports, HlmDialogImports, HlmInputGroupImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t

Never miss an update

\n\t\t\t\t\t\t

Subscribe to receive news and special offers.

\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\tBy subscribing you agree to our\n\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t.\n\t\t\t\t

\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog09Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-10.json b/public/registry/dialog-10.json index ba2dbde4..faee1d85 100644 --- a/public/registry/dialog-10.json +++ b/public/registry/dialog-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\n\n@Component({\n\tselector: 'sim-dialog-10',\n\timports: [HlmButton, HlmInput, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Send us feedback

\n\t\t\t\t\t\n\t\t\t\t\t\tWatch\n\t\t\t\t\t\ttutorials\n\t\t\t\t\t\t, read Sim UI's\n\t\t\t\t\t\tdocumentation\n\t\t\t\t\t\t, or join our\n\t\t\t\t\t\tDiscord\n\t\t\t\t\t\tfor community help.\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog10Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\n\n@Component({\n\tselector: 'sim-dialog-10',\n\timports: [HlmButtonImports, HlmInputImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Send us feedback

\n\t\t\t\t\t\n\t\t\t\t\t\tWatch\n\t\t\t\t\t\ttutorials\n\t\t\t\t\t\t, read Sim UI's\n\t\t\t\t\t\tdocumentation\n\t\t\t\t\t\t, or join our\n\t\t\t\t\t\tDiscord\n\t\t\t\t\t\tfor community help.\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog10Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-11.json b/public/registry/dialog-11.json index 648461ce..68f24368 100644 --- a/public/registry/dialog-11.json +++ b/public/registry/dialog-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-dialog-11',\n\timports: [HlmButton, HlmInput, HlmLabel, HlmRadioGroup, HlmRadio, FormsModule, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Help us improve

\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (item of [0, 1, 2, 3, 4, 5, 6, 7, 8]; track item) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tVery easy\n\t\t\t\t\t\tVery difficult\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog11Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic ratingNumber = model();\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, model, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-dialog-11',\n\timports: [\n\t\tFormsModule,\n\t\tHlmButtonImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmRadioGroupImports,\n\t\tHlmRadioGroupImports,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Help us improve

\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (item of [0, 1, 2, 3, 4, 5, 6, 7, 8]; track item) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tVery easy\n\t\t\t\t\t\tVery difficult\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog11Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly ratingNumber = model();\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-12.json b/public/registry/dialog-12.json index b0ee3053..67216bef 100644 --- a/public/registry/dialog-12.json +++ b/public/registry/dialog-12.json @@ -1,3 +1,3 @@ { - "content": "import { afterNextRender, Component, computed, model, OnDestroy, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-12',\n\timports: [FormsModule, HlmButton, HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot, BrnInputOtp, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Code verified!

\n\t\t\t\t\t\t\t

Your code has been successfully verified.

\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Enter confirmation code

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tCheck your email and enter the code - Try {{ defaultOtpValue }}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t@if (isInvalidCode()) {\n\t\t\t\t\t\t\t

Invalid code. Please try again.

\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tResend code {{ countdown() }}s\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog12Component implements OnDestroy {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic defaultOtpValue = '1234';\n\tpublic otpValue = model('');\n\tpublic countdown = signal(60);\n\tpublic isVerified = signal(false);\n\tpublic isInvalidCode = signal(false);\n\tpublic isResendDisabled = computed(() => this.countdown() > 0);\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\totpChanged(event: string) {\n\t\tthis.otpValue.set(event);\n\n\t\t// Reset validation state when input is empty\n\t\tif (event.length === 0) {\n\t\t\tthis.isVerified.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\t// When code is not yet complete\n\t\tif (event.length < 4) {\n\t\t\tthis.isInvalidCode.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle completed OTP entry\n\t\tif (event === this.defaultOtpValue) {\n\t\t\tthis.isVerified.set(true);\n\t\t\tthis.isInvalidCode.set(false);\n\t\t} else {\n\t\t\tthis.isVerified.set(false);\n\t\t\tthis.isInvalidCode.set(true);\n\t\t\tthis.otpValue.set('');\n\t\t}\n\t}\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tresendCode() {\n\t\tthis.resetCountdown();\n\t}\n\n\tresendOtp() {\n\t\tthis.resetCountdown();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.otpValue.set('');\n\t\tthis.stopCountdown();\n\t}\n\n\tprivate resetCountdown() {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown() {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown() {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" + "content": "import { afterNextRender, Component, computed, model, OnDestroy, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-12',\n\timports: [FormsModule, HlmButtonImports, HlmInputOtpImports, BrnInputOtpImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Code verified!

\n\t\t\t\t\t\t\t

Your code has been successfully verified.

\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Enter confirmation code

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tCheck your email and enter the code - Try {{ defaultOtpValue }}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t@if (isInvalidCode()) {\n\t\t\t\t\t\t\t

Invalid code. Please try again.

\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tResend code {{ countdown() }}s\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog12Component implements OnDestroy {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly defaultOtpValue = '1234';\n\tprotected readonly otpValue = model('');\n\tprotected readonly countdown = signal(60);\n\tprotected readonly isVerified = signal(false);\n\tprotected readonly isInvalidCode = signal(false);\n\tprotected readonly isResendDisabled = computed(() => this.countdown() > 0);\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\tngOnDestroy() {\n\t\tthis.otpValue.set('');\n\t\tthis.stopCountdown();\n\t}\n\n\tprotected otpChanged(event: string): void {\n\t\tthis.otpValue.set(event);\n\n\t\t// Reset validation state when input is empty\n\t\tif (event.length === 0) {\n\t\t\tthis.isVerified.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\t// When code is not yet complete\n\t\tif (event.length < 4) {\n\t\t\tthis.isInvalidCode.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle completed OTP entry\n\t\tif (event === this.defaultOtpValue) {\n\t\t\tthis.isVerified.set(true);\n\t\t\tthis.isInvalidCode.set(false);\n\t\t} else {\n\t\t\tthis.isVerified.set(false);\n\t\t\tthis.isInvalidCode.set(true);\n\t\t\tthis.otpValue.set('');\n\t\t}\n\t}\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tprotected resendCode(): void {\n\t\tthis.resetCountdown();\n\t}\n\n\tprotected resendOtp(): void {\n\t\tthis.resetCountdown();\n\t}\n\tprivate resetCountdown(): void {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown(): void {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown(): void {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-13.json b/public/registry/dialog-13.json index 15628231..6eb39b68 100644 --- a/public/registry/dialog-13.json +++ b/public/registry/dialog-13.json @@ -1,3 +1,3 @@ { - "content": "import { afterNextRender, Component, computed, model, OnDestroy, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail } from '@ng-icons/lucide';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-13',\n\tproviders: [provideIcons({ lucideMail })],\n\timports: [\n\t\tFormsModule,\n\t\tNgIcon,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmInputOtp,\n\t\tHlmInputOtpGroup,\n\t\tHlmInputOtpSlot,\n\t\tBrnInputOtp,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Code verified!

\n\t\t\t\t\t\t\t

Your code has been successfully verified.

\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Please check your email

\n\t\t\t\t\t\t\t

We've sent a code to alan@siumui.com

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tDidn't get a code?\n\t\t\t\t\t\t\t@if (isResendDisabled()) {\n\t\t\t\t\t\t\t\tResend after {{ countdown() }}s\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tClick to resend\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t@if (isInvalidCode()) {\n\t\t\t\t\t\t\t

Invalid code. Please try again.

\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog13Component implements OnDestroy {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic defaultOtpValue = '1234';\n\tpublic otpValue = model('');\n\tpublic countdown = signal(60);\n\tpublic isVerified = signal(false);\n\tpublic isInvalidCode = signal(false);\n\tpublic isResendDisabled = computed(() => this.countdown() > 0);\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\totpChanged(event: string) {\n\t\tthis.otpValue.set(event);\n\n\t\tif (this.otpValue().length === 0) {\n\t\t\tthis.isVerified.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.otpValue().length < 4) {\n\t\t\tthis.isInvalidCode.set(false);\n\t\t\treturn;\n\t\t}\n\t}\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tsubmit() {\n\t\tif (this.otpValue() === this.defaultOtpValue) {\n\t\t\tthis.isVerified.set(true);\n\t\t\tthis.isInvalidCode.set(false);\n\t\t} else {\n\t\t\tthis.isVerified.set(false);\n\t\t\tthis.isInvalidCode.set(true);\n\t\t\tthis.otpValue.set('');\n\t\t}\n\t}\n\n\tresendCode() {\n\t\tthis.resetCountdown();\n\t}\n\n\tresendOtp() {\n\t\tthis.resetCountdown();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.otpValue.set('');\n\t\tthis.stopCountdown();\n\t}\n\n\tprivate resetCountdown() {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown() {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown() {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" + "content": "import { afterNextRender, Component, computed, model, OnDestroy, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail } from '@ng-icons/lucide';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-13',\n\tproviders: [provideIcons({ lucideMail })],\n\timports: [\n\t\tFormsModule,\n\t\tNgIcon,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmInputOtpImports,\n\t\tBrnInputOtpImports,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Code verified!

\n\t\t\t\t\t\t\t

Your code has been successfully verified.

\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Please check your email

\n\t\t\t\t\t\t\t

We've sent a code to alan@siumui.com

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tDidn't get a code?\n\t\t\t\t\t\t\t@if (isResendDisabled()) {\n\t\t\t\t\t\t\t\tResend after {{ countdown() }}s\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tClick to resend\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t@if (isInvalidCode()) {\n\t\t\t\t\t\t\t

Invalid code. Please try again.

\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (isVerified()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog13Component implements OnDestroy {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly defaultOtpValue = '1234';\n\tprotected readonly otpValue = model('');\n\tprotected readonly countdown = signal(60);\n\tprotected readonly isVerified = signal(false);\n\tprotected readonly isInvalidCode = signal(false);\n\tprotected readonly isResendDisabled = computed(() => this.countdown() > 0);\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\tprotected otpChanged(event: string) {\n\t\tthis.otpValue.set(event);\n\n\t\tif (this.otpValue().length === 0) {\n\t\t\tthis.isVerified.set(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.otpValue().length < 4) {\n\t\t\tthis.isInvalidCode.set(false);\n\t\t\treturn;\n\t\t}\n\t}\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tprotected submit() {\n\t\tif (this.otpValue() === this.defaultOtpValue) {\n\t\t\tthis.isVerified.set(true);\n\t\t\tthis.isInvalidCode.set(false);\n\t\t} else {\n\t\t\tthis.isVerified.set(false);\n\t\t\tthis.isInvalidCode.set(true);\n\t\t\tthis.otpValue.set('');\n\t\t}\n\t}\n\n\tprotected resendCode(): void {\n\t\tthis.resetCountdown();\n\t}\n\n\tprotected resendOtp(): void {\n\t\tthis.resetCountdown();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.otpValue.set('');\n\t\tthis.stopCountdown();\n\t}\n\n\tprivate resetCountdown(): void {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown(): void {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown(): void {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-14.json b/public/registry/dialog-14.json index 93e71882..97589945 100644 --- a/public/registry/dialog-14.json +++ b/public/registry/dialog-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-14',\n\timports: [FormsModule, ReactiveFormsModule, HlmButton, HlmLabel, HlmInput, HlmButton, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Sign up SimUI

\n\t\t\t\t\t\t\t

We just need a few details to get you started.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tBy signing up you agree to our\n\t\t\t\t\t\t\t\tTerms & Condition\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog14Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tprivate _formBuilder = inject(FormBuilder);\n\n\tpublic form = this._formBuilder.group({\n\t\tfullName: ['', Validators.required],\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t\tpassword: ['', Validators.required],\n\t});\n\n\tcloseDialog() {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" + "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-14',\n\timports: [\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmButtonImports,\n\t\tHlmLabelImports,\n\t\tHlmInputImports,\n\t\tHlmButtonImports,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Sign up SimUI

\n\t\t\t\t\t\t\t

We just need a few details to get you started.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tBy signing up you agree to our\n\t\t\t\t\t\t\t\tTerms & Condition\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog14Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprivate readonly formBuilder = inject(FormBuilder);\n\n\tprotected readonly form = this.formBuilder.group({\n\t\tfullName: ['', Validators.required],\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t\tpassword: ['', Validators.required],\n\t});\n\n\tprotected closeDialog(): void {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-15.json b/public/registry/dialog-15.json index 11279c60..5ba15ec9 100644 --- a/public/registry/dialog-15.json +++ b/public/registry/dialog-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-15',\n\timports: [FormsModule, ReactiveFormsModule, HlmButton, HlmDialogImports, HlmLabel, HlmInput, HlmButton, HlmCheckbox],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Log in to your account

\n\t\t\t\t\t\t\t

Welcome back! Please enter your details.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tForgot password?\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog15Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tprivate _formBuilder = inject(FormBuilder);\n\n\tpublic form = this._formBuilder.group({\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t\tpassword: ['', Validators.required],\n\t\trememberMe: [false],\n\t});\n\n\tcloseDialog() {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" + "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-15',\n\timports: [\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmButtonImports,\n\t\tHlmDialogImports,\n\t\tHlmLabelImports,\n\t\tHlmInputImports,\n\t\tHlmButtonImports,\n\t\tHlmCheckboxImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Log in to your account

\n\t\t\t\t\t\t\t

Welcome back! Please enter your details.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tForgot password?\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog15Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprivate readonly formBuilder = inject(FormBuilder);\n\n\tprotected readonly form = this.formBuilder.group({\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t\tpassword: ['', Validators.required],\n\t\trememberMe: [false],\n\t});\n\n\tprotected closeDialog(): void {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-16.json b/public/registry/dialog-16.json index 1ca70d61..8a5cbff5 100644 --- a/public/registry/dialog-16.json +++ b/public/registry/dialog-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\n\n@Component({\n\tselector: 'sim-dialog-16',\n\timports: [FormsModule, ReactiveFormsModule, HlmButton, HlmDialogImports, HlmInput, HlmButton],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Create an account

\n\t\t\t\t\t\t\t

Start your free 30-day trial. Cancel anytime.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog16Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tprivate _formBuilder = inject(FormBuilder);\n\n\tpublic form = this._formBuilder.group({\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t});\n\n\tcloseDialog() {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" + "content": "import { Component, inject, viewChild } from '@angular/core';\nimport { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\n\n@Component({\n\tselector: 'sim-dialog-16',\n\timports: [FormsModule, ReactiveFormsModule, HlmButtonImports, HlmDialogImports, HlmInputImports, HlmButtonImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t

Create an account

\n\t\t\t\t\t\t\t

Start your free 30-day trial. Cancel anytime.

\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tOr\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog16Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprivate readonly formBuilder = inject(FormBuilder);\n\n\tprotected readonly form = this.formBuilder.group({\n\t\temail: ['', Validators.compose([Validators.required, Validators.email])],\n\t});\n\n\tprotected closeDialog(): void {\n\t\tthis.form.updateValueAndValidity();\n\t\tif (this.form.valid) {\n\t\t\tthis.dialogRef()?.close({});\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-17.json b/public/registry/dialog-17.json index 8fbeaf60..809759d5 100644 --- a/public/registry/dialog-17.json +++ b/public/registry/dialog-17.json @@ -1,3 +1,3 @@ { - "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy, lucidePlus, lucideTrash2, lucideUserPlus } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmTooltipImports } from '@spartan-ng/helm/tooltip';\n\n@Component({\n\tselector: 'sim-dialog-17',\n\tproviders: [provideIcons({ lucideUserPlus, lucidePlus, lucideTrash2, lucideCheck, lucideCopy })],\n\timports: [NgIcon, NgClass, ReactiveFormsModule, HlmIcon, HlmInput, HlmButton, HlmDialogImports, HlmTooltipImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Invite contributors

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tYour new project has been created. Invite new member to contribute on this project.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tInvite via email\n\t\t\t\t\t\t\t@for (memberControl of members.controls; track memberControl) {\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t@if (members.length > 1) {\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t+ Add another\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
Invite via link
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog17Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic copied = signal(false);\n\tpublic clipboard = inject(Clipboard);\n\tpublic form: FormGroup;\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\n\tconstructor() {\n\t\tthis.form = this._formBuilder.group({\n\t\t\tmembers: this._formBuilder.array(['alancooper@simui.com', 'christina@siumui.com']),\n\t\t});\n\t}\n\n\tget members(): FormArray {\n\t\treturn this.form.get('members') as FormArray;\n\t}\n\n\taddMember(): void {\n\t\tthis.members.push(this._formBuilder.control('', Validators.email));\n\t}\n\n\tremoveMember(index: number): void {\n\t\tthis.members.removeAt(index, { emitEvent: true });\n\t}\n\n\tcloseDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tonSelect(): void {\n\t\tthis.copied.set(true);\n\t\tthis.clipboard.copy('https://simui.dev/reference/12374');\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" + "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy, lucidePlus, lucideTrash2, lucideUserPlus } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmTooltipImports } from '@spartan-ng/helm/tooltip';\n\n@Component({\n\tselector: 'sim-dialog-17',\n\tproviders: [provideIcons({ lucideUserPlus, lucidePlus, lucideTrash2, lucideCheck, lucideCopy })],\n\timports: [\n\t\tNgIcon,\n\t\tNgClass,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmInputImports,\n\t\tHlmButtonImports,\n\t\tHlmDialogImports,\n\t\tHlmTooltipImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Invite contributors

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tYour new project has been created. Invite new member to contribute on this project.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tInvite via email\n\t\t\t\t\t\t\t@for (memberControl of members.controls; track memberControl) {\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t@if (members.length > 1) {\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t+ Add another\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
Invite via link
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog17Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly copied = signal(false);\n\tprotected readonly clipboard = inject(Clipboard);\n\tprotected readonly form: FormGroup;\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\n\tconstructor() {\n\t\tthis.form = this._formBuilder.group({\n\t\t\tmembers: this._formBuilder.array(['alancooper@simui.com', 'christina@siumui.com']),\n\t\t});\n\t}\n\n\tget members(): FormArray {\n\t\treturn this.form.get('members') as FormArray;\n\t}\n\n\tprotected addMember(): void {\n\t\tthis.members.push(this._formBuilder.control('', Validators.email));\n\t}\n\n\tprotected removeMember(index: number): void {\n\t\tthis.members.removeAt(index, { emitEvent: true });\n\t}\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n\n\tprotected onSelect(): void {\n\t\tthis.copied.set(true);\n\t\tthis.clipboard.copy('https://simui.dev/reference/12374');\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-18.json b/public/registry/dialog-18.json index b7b49aea..83523bf2 100644 --- a/public/registry/dialog-18.json +++ b/public/registry/dialog-18.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWallet } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmSpinner } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-18',\n\tproviders: [provideIcons({ lucideWallet, lucideCreditCard })],\n\timports: [\n\t\tNgIcon,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmButton,\n\t\tHlmInput,\n\t\tHlmLabel,\n\t\tHlmSpinner,\n\t\tHlmCheckbox,\n\t\tMaskitoDirective,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Update your card

\n\t\t\t\t\t\t

Your new card will replace your current card.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog18Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tfullName: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\tcardNumber: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\texpiryDate: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\tisDefault: [false],\n\t\t\tcvc: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tpublic readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tpublic readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tpublic readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tpublic readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tpublic isProcessing = signal(false);\n\n\tpublic onSubmit() {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" + "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWallet } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmSpinnerImports } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-18',\n\timports: [\n\t\tNgIcon,\n\t\tMaskitoDirective,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmSpinnerImports,\n\t\tHlmCheckboxImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideWallet, lucideCreditCard })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Update your card

\n\t\t\t\t\t\t

Your new card will replace your current card.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog18Component {\n\tprivate readonly formBuilder = inject(FormBuilder);\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly isProcessing = signal(false);\n\tprotected readonly form: FormGroup = this.formBuilder.group(\n\t\t{\n\t\t\tfullName: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\tcardNumber: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\texpiryDate: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t\tisDefault: [false],\n\t\t\tcvc: [\n\t\t\t\t'',\n\t\t\t\t{\n\t\t\t\t\tvalidators: Validators.required,\n\t\t\t\t\tupdateOn: 'submit',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tprotected readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tprotected readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tprotected readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tprotected readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tprotected onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-19.json b/public/registry/dialog-19.json index 30d119f6..43b7c042 100644 --- a/public/registry/dialog-19.json +++ b/public/registry/dialog-19.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmSpinner } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-19',\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard })],\n\timports: [\n\t\tNgIcon,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmButton,\n\t\tHlmInput,\n\t\tHlmLabel,\n\t\tHlmSpinner,\n\t\tHlmCheckbox,\n\t\tMaskitoDirective,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Update payment method

\n\t\t\t\t\t\t

Your new card will replace your current card.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tSet as default payment method\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Dialog19Component {\n\tprivate _formBuilder = inject(FormBuilder);\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tfullName: ['', Validators.required],\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tisDefault: [false],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tpublic readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tpublic readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tpublic readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tpublic readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tpublic isProcessing = signal(false);\n\n\tpublic onSubmit() {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" + "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmSpinnerImports } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-19',\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard })],\n\timports: [\n\t\tNgIcon,\n\t\tMaskitoDirective,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmButtonImports,\n\t\tHlmDialogImports,\n\t\tHlmSpinnerImports,\n\t\tHlmCheckboxImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Update payment method

\n\t\t\t\t\t\t

Your new card will replace your current card.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tSet as default payment method\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Dialog19Component {\n\tprivate readonly formBuilder = inject(FormBuilder);\n\tprotected readonly isProcessing = signal(false);\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly form: FormGroup = this.formBuilder.group(\n\t\t{\n\t\t\tfullName: ['', Validators.required],\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tisDefault: [false],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tprotected readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tprotected readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tprotected readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tprotected readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tprotected onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-20.json b/public/registry/dialog-20.json index 47c66c6c..8141f159 100644 --- a/public/registry/dialog-20.json +++ b/public/registry/dialog-20.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinner } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-20',\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard })],\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmInput,\n\t\tHlmLabel,\n\t\tHlmSpinner,\n\t\tHlmRadio,\n\t\tHlmRadioGroup,\n\t\tHlmBadge,\n\t\tMaskitoDirective,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Confirm and pay

\n\t\t\t\t\t\t\t

Pay securely and cancel any time.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\tMonthly\n\t\t\t\t\t\t\t\t\t\t25$/month\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\tYearly\n\t\t\t\t\t\t\t\t\t\t\tPopular\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t19$/month\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog20Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tplan: ['yearly'],\n\t\t\tfullName: ['', Validators.required],\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tpublic readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tpublic readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tpublic readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tpublic readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tpublic isProcessing = signal(false);\n\n\tpublic onSubmit() {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" + "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinnerImports } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-20',\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard })],\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tMaskitoDirective,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmSpinnerImports,\n\t\tHlmRadioGroupImports,\n\t\tHlmBadgeImports,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Confirm and pay

\n\t\t\t\t\t\t\t

Pay securely and cancel any time.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\tMonthly\n\t\t\t\t\t\t\t\t\t\t25$/month\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\tYearly\n\t\t\t\t\t\t\t\t\t\t\tPopular\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t19$/month\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog20Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\tprotected readonly isProcessing = signal(false);\n\n\tprotected dialogRef = viewChild(HlmDialog);\n\tprotected form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tplan: ['yearly'],\n\t\t\tfullName: ['', Validators.required],\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n\tprotected readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tprotected readonly expiryDateMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /[0-9]/, '/', /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t};\n\tprotected readonly nameMask: MaskitoOptions = {\n\t\tmask: /.+/,\n\t\toverwriteMode: 'replace',\n\t\tpostprocessors: [({ value, selection }) => ({ value: value.toUpperCase(), selection })],\n\t};\n\tprotected readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tprotected onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-21.json b/public/registry/dialog-21.json index 6c55f935..3e4c9dd4 100644 --- a/public/registry/dialog-21.json +++ b/public/registry/dialog-21.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBadgeCheck, lucideCreditCard, lucideMessagesSquare, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinner } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-21',\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard, lucideBadgeCheck, lucideMessagesSquare })],\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmLabel,\n\t\tHlmSpinner,\n\t\tHlmRadio,\n\t\tHlmRadioGroup,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Select plan

\n\t\t\t\t\t\t\t

Simple and flexible per-user pricing.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t10$ per month\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\tBasic plan\n\t\t\t\t\t\t\t\t\t\tBilled annually\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tBasic features\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tBasic reporting\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tUp to 10 individual users\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t20 GB data per user\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t25$ per month\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tBusiness plan\n\t\t\t\t\t\t\t\t\t\tBilled annually\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tAdvanced features\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tAdvanced reporting\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tUp to 20 individual users\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t40 GB data per user\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t@if (isProcessing()) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tProcessing...\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\tSelect plan\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog21Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic form: FormGroup = this._formBuilder.group({\n\t\tplan: ['basic'],\n\t});\n\tpublic isProcessing = signal(false);\n\n\tpublic onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 1000);\n\t\t}\n\t}\n}" + "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBadgeCheck, lucideCreditCard, lucideMessagesSquare, lucideWalletCards } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinnerImports } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-21',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmLabelImports,\n\t\tHlmSpinnerImports,\n\t\tHlmRadioGroupImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideWalletCards, lucideCreditCard, lucideBadgeCheck, lucideMessagesSquare })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Select plan

\n\t\t\t\t\t\t\t

Simple and flexible per-user pricing.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t10$ per month\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\tBasic plan\n\t\t\t\t\t\t\t\t\t\tBilled annually\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tBasic features\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tBasic reporting\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tUp to 10 individual users\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t20 GB data per user\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t25$ per month\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tBusiness plan\n\t\t\t\t\t\t\t\t\t\tBilled annually\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tAdvanced features\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tAdvanced reporting\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tUp to 20 individual users\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t40 GB data per user\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t@if (isProcessing()) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tProcessing...\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\tSelect plan\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog21Component {\n\tprivate readonly formBuilder = inject(FormBuilder);\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly form: FormGroup = this.formBuilder.group({\n\t\tplan: ['basic'],\n\t});\n\tprotected readonly isProcessing = signal(false);\n\n\tprotected onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 1000);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-22.json b/public/registry/dialog-22.json index 0b5def74..80818b76 100644 --- a/public/registry/dialog-22.json +++ b/public/registry/dialog-22.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideRefreshCw } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinner } from '@spartan-ng/helm/spinner';\n\n@Component({\n\tselector: 'sim-dialog-22',\n\tproviders: [provideIcons({ lucideCheck, lucideRefreshCw })],\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmLabel,\n\t\tHlmSpinner,\n\t\tHlmRadio,\n\t\tHlmRadioGroup,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Change your plan

\n\t\t\t\t\t\t\t

Pick one of the following plans.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t@for (option of options; track option.value) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t{{ option.title }}\n\t\t\t\t\t\t\t\t\t\t\t\t{{ option.subtitle }}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFeatures include:\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tCreate unlimited projects.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove watermarks.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd unlimited users and free viewers.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tUpload unlimited files.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t7-day money back guarantee.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdvanced permissions.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog22Component {\n\tprivate _formBuilder = inject(FormBuilder);\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic form: FormGroup = this._formBuilder.group({\n\t\tplan: ['standard'],\n\t});\n\tpublic isProcessing = signal(false);\n\n\tpublic options = [\n\t\t{\n\t\t\ttitle: 'Essential',\n\t\t\tsubtitle: '$4 per member/month',\n\t\t\tvalue: 'essential',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Standard',\n\t\t\tsubtitle: '$19 per member/month',\n\t\t\tvalue: 'standard',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Enterprise',\n\t\t\tsubtitle: '$32 per member/month',\n\t\t\tvalue: 'enterprise',\n\t\t},\n\t];\n\n\tpublic onSubmit() {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" + "content": "import { Component, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideRefreshCw } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\nimport { HlmSpinnerImports } from '@spartan-ng/helm/spinner';\n\ninterface PlanOption {\n\ttitle: string;\n\tsubtitle: string;\n\tvalue: string;\n}\n\n@Component({\n\tselector: 'sim-dialog-22',\n\tproviders: [provideIcons({ lucideCheck, lucideRefreshCw })],\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmLabelImports,\n\t\tHlmSpinnerImports,\n\t\tHlmRadioGroupImports,\n\t\tHlmDialogImports,\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Change your plan

\n\t\t\t\t\t\t\t

Pick one of the following plans.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t@for (option of options; track option.value) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t{{ option.title }}\n\t\t\t\t\t\t\t\t\t\t\t\t{{ option.subtitle }}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFeatures include:\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tCreate unlimited projects.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove watermarks.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd unlimited users and free viewers.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tUpload unlimited files.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t7-day money back guarantee.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdvanced permissions.\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog22Component {\n\tprivate readonly formBuilder = inject(FormBuilder);\n\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly form: FormGroup = this.formBuilder.group({\n\t\tplan: ['standard'],\n\t});\n\tprotected readonly isProcessing = signal(false);\n\tprotected readonly options: PlanOption[] = [\n\t\t{\n\t\t\ttitle: 'Essential',\n\t\t\tsubtitle: '$4 per member/month',\n\t\t\tvalue: 'essential',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Standard',\n\t\t\tsubtitle: '$19 per member/month',\n\t\t\tvalue: 'standard',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Enterprise',\n\t\t\tsubtitle: '$32 per member/month',\n\t\t\tvalue: 'enterprise',\n\t\t},\n\t];\n\n\tprotected onSubmit(): void {\n\t\tif (this.form.valid) {\n\t\t\tthis.isProcessing.set(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.isProcessing.set(false);\n\t\t\t\tthis.dialogRef()?.close();\n\t\t\t}, 2000);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-23.json b/public/registry/dialog-23.json index dcf825af..060522b2 100644 --- a/public/registry/dialog-23.json +++ b/public/registry/dialog-23.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideImagePlus, lucideX } from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'profile-background',\n\timports: [NgIcon, HlmButton, HlmIcon],\n\tproviders: [provideIcons({ lucideImagePlus, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t@if (backgroundUrl()) {\n\t\t\t\t\t\"Background\n\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class ProfileBackgroundComponent {\n\tbackgroundUrl = signal('assets/backgrounds/bg-01.jpg');\n\n\tpublic removeBackground(): void {\n\t\tthis.backgroundUrl.set(null);\n\t}\n\n\tpublic onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.backgroundUrl.set(url);\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: 'profile-avatar',\n\timports: [NgIcon, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmButton, HlmIcon],\n\tproviders: [provideIcons({ lucideImagePlus })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\"Mathilde\n\t\t\t\tML\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class ProfileAvatarComponent {\n\tavatarUrl = signal('assets/avatars/mathilde-lewis.png');\n\n\tpublic onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.avatarUrl.set(url);\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: 'sim-dialog-23',\n\timports: [\n\t\tNgIcon,\n\t\tHlmIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmInput,\n\t\tHlmLabel,\n\t\tHlmButton,\n\t\tProfileBackgroundComponent,\n\t\tProfileAvatarComponent,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Edit profile

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tMake changes to your profile here. You can change your photo and set a username.\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog23Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic maxLength = 180;\n\tpublic lengthCount = signal(0);\n\tpublic isValidUserName = signal(true);\n\tpublic form: FormGroup = this._formBuilder.group({\n\t\tfirstName: ['Alan'],\n\t\tlastName: ['Cooper'],\n\t\tuserName: ['alan-cooper-dev-12'],\n\t\twebsite: ['www.simui.dev'],\n\t\tbiography: [\n\t\t\t'Hi, I am Alan Cooper. I am a software engineer and designer. I love to create beautiful and functional user interfaces.',\n\t\t],\n\t});\n\tpublic leftCharacters = computed(() => this.maxLength - this.lengthCount());\n\n\tconstructor() {\n\t\tthis.lengthCount.set(this.form.get('biography')?.value.length);\n\n\t\tthis.form.get('biography')?.valueChanges.subscribe((value) => {\n\t\t\tthis.lengthCount.set(value.length);\n\t\t});\n\n\t\tthis.form.get('userName')?.valueChanges.subscribe((value) => {\n\t\t\tthis.isValidUserName.set(value.length > 17);\n\t\t});\n\t}\n\n\tpublic closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, computed, inject, signal, viewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideImagePlus, lucideX } from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-profile-background',\n\timports: [NgIcon, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideImagePlus, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t@if (backgroundUrl()) {\n\t\t\t\t\t\"Background\n\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class ProfileBackgroundComponent {\n\tprotected readonly backgroundUrl = signal('assets/backgrounds/bg-01.jpg');\n\n\tprotected removeBackground(): void {\n\t\tthis.backgroundUrl.set(null);\n\t}\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.backgroundUrl.set(url);\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: 'sim-profile-avatar',\n\timports: [NgIcon, HlmAvatarImports, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideImagePlus })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\"Mathilde\n\t\t\t\tML\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class ProfileAvatarComponent {\n\tprotected readonly avatarUrl = signal('assets/avatars/mathilde-lewis.png');\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.avatarUrl.set(url);\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: 'sim-dialog-23',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tProfileAvatarComponent,\n\t\tProfileBackgroundComponent,\n\t\tHlmIconImports,\n\t\tHlmDialogImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmButtonImports,\n\t],\n\tproviders: [provideIcons({ lucideCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Edit profile

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tMake changes to your profile here. You can change your photo and set a username.\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog23Component {\n\tprivate readonly formBuilder = inject(FormBuilder);\n\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly maxLength = 180;\n\tprotected readonly lengthCount = signal(0);\n\tprotected readonly isValidUserName = signal(true);\n\tprotected readonly form: FormGroup = this.formBuilder.group({\n\t\tfirstName: ['Alan'],\n\t\tlastName: ['Cooper'],\n\t\tuserName: ['alan-cooper-dev-12'],\n\t\twebsite: ['www.simui.dev'],\n\t\tbiography: [\n\t\t\t'Hi, I am Alan Cooper. I am a software engineer and designer. I love to create beautiful and functional user interfaces.',\n\t\t],\n\t});\n\tprotected readonly leftCharacters = computed(() => this.maxLength - this.lengthCount());\n\n\tconstructor() {\n\t\tthis.lengthCount.set(this.form.get('biography')?.value.length);\n\n\t\tthis.form.get('biography')?.valueChanges.subscribe((value) => {\n\t\t\tthis.lengthCount.set(value.length);\n\t\t});\n\n\t\tthis.form.get('userName')?.valueChanges.subscribe((value) => {\n\t\t\tthis.isValidUserName.set(value.length > 17);\n\t\t});\n\t}\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-24.json b/public/registry/dialog-24.json index 31bf2dad..39c5008a 100644 --- a/public/registry/dialog-24.json +++ b/public/registry/dialog-24.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogContent, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-24',\n\timports: [NgIcon, HlmIcon, HlmDialog, HlmDialogContent, HlmButton, HlmDialogImports],\n\tproviders: [provideIcons({ lucideArrowRight })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t\"Logo\"\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

{{ currentStep()?.title }}

\n\t\t\t\t\t\t

{{ currentStep()?.description }}

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t@for (step of steps; track step.id) {\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog24Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\tpublic currentStepIndex = signal(1);\n\tpublic currentStep = computed(() => this.steps.find((step) => step.id === this.currentStepIndex()));\n\n\tpublic steps = [\n\t\t{\n\t\t\tid: 1,\n\t\t\ttitle: 'Welcome to SimUI',\n\t\t\tdescription: 'Discover a powerful collection of components designed to enhance your development workflow.',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\ttitle: 'Explore the Components',\n\t\t\tdescription: 'Browse through a wide range of components that can be easily integrated into your projects.',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\ttitle: 'Join the Community',\n\t\t\tdescription: 'Connect with other developers, share your projects, and get inspired by the SimUI community.',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\ttitle: 'Get Started',\n\t\t\tdescription: 'Start building amazing applications with SimUI and take your development to the next level.',\n\t\t},\n\t];\n\n\tonNextStep(): void {\n\t\tif (this.currentStepIndex() < this.steps.length) {\n\t\t\tthis.currentStepIndex.update((index) => index + 1);\n\t\t} else {\n\t\t\tthis.closeDialog();\n\t\t}\n\t}\n\n\tcloseDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\ninterface DialogStep {\n\tid: number;\n\ttitle: string;\n\tdescription: string;\n}\n\n@Component({\n\tselector: 'sim-dialog-24',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideArrowRight })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t\"Logo\"\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

{{ currentStep()?.title }}

\n\t\t\t\t\t\t

{{ currentStep()?.description }}

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t@for (step of steps; track step.id) {\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog24Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\tprotected readonly currentStepIndex = signal(1);\n\tprotected readonly currentStep = computed(() => this.steps.find((step) => step.id === this.currentStepIndex()));\n\n\tprotected readonly steps: DialogStep[] = [\n\t\t{\n\t\t\tid: 1,\n\t\t\ttitle: 'Welcome to SimUI',\n\t\t\tdescription: 'Discover a powerful collection of components designed to enhance your development workflow.',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\ttitle: 'Explore the Components',\n\t\t\tdescription: 'Browse through a wide range of components that can be easily integrated into your projects.',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\ttitle: 'Join the Community',\n\t\t\tdescription: 'Connect with other developers, share your projects, and get inspired by the SimUI community.',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\ttitle: 'Get Started',\n\t\t\tdescription: 'Start building amazing applications with SimUI and take your development to the next level.',\n\t\t},\n\t];\n\n\tprotected onNextStep(): void {\n\t\tif (this.currentStepIndex() < this.steps.length) {\n\t\t\tthis.currentStepIndex.update((index) => index + 1);\n\t\t} else {\n\t\t\tthis.closeDialog();\n\t\t}\n\t}\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-25.json b/public/registry/dialog-25.json index dc5c67a6..74eff54b 100644 --- a/public/registry/dialog-25.json +++ b/public/registry/dialog-25.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBellRing, lucideCalendar, lucideClock, lucidePlus } from '@ng-icons/lucide';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-25',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCalendar, lucideClock, lucideBellRing, lucidePlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] !w-100 max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
JAN
\n\t\t\t\t\t\t
10
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Invitation: Product demo
\n\t\t\t\t\t
Phuong Tran - Friday, Jan 10, 2025
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tDetails\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tFriday, Jan 10, 2025\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t1:30 PM - 3:30 PM\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t10 min before\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tOrganizer\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\tlewis@simui.dev\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tAttendees\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Skylar\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Alexis\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t+3\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t7 guests\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t5 accept\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t2 pending\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog25Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\tpublic acceptInvitation(): void {\n\t\ttoast.success('Accepted!', {\n\t\t\tdescription: 'Your response has been sent to the organizer.',\n\t\t});\n\t\tthis.dialogRef()?.close();\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBellRing, lucideCalendar, lucideClock, lucidePlus } from '@ng-icons/lucide';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-25',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCalendar, lucideClock, lucideBellRing, lucidePlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-100! max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
JAN
\n\t\t\t\t\t\t
10
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Invitation: Product demo
\n\t\t\t\t\t
Phuong Tran - Friday, Jan 10, 2025
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tDetails\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tFriday, Jan 10, 2025\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t1:30 PM - 3:30 PM\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t10 min before\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tOrganizer\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\tlewis@simui.dev\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\tAttendees\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Skylar\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\"Alexis\n\t\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t+3\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t7 guests\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t5 accept\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t2 pending\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog25Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\n\tprotected acceptInvitation(): void {\n\t\ttoast.success('Accepted!', {\n\t\t\tdescription: 'Your response has been sent to the organizer.',\n\t\t});\n\t\tthis.dialogRef()?.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-26.json b/public/registry/dialog-26.json index 815a59f6..9aeb4ce0 100644 --- a/public/registry/dialog-26.json +++ b/public/registry/dialog-26.json @@ -1,3 +1,3 @@ { - "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideChartColumnStacked,\n\tlucideChevronDown,\n\tlucideImagePlus,\n\tlucideMic,\n\tlucideNotepadText,\n\tlucidePaperclip,\n\tlucidePenLine,\n\tlucideSparkles,\n\tlucideSquareSlash,\n\tlucideZap,\n} from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\n\n@Component({\n\tselector: 'sim-dialog-26',\n\timports: [\n\t\tNgIcon,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmAvatar,\n\t\tHlmAvatarFallback,\n\t\tHlmAvatarImage,\n\t\tHlmCheckbox,\n\t\tHlmInput,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideImagePlus,\n\t\t\tlucideChartColumnStacked,\n\t\t\tlucideZap,\n\t\t\tlucideNotepadText,\n\t\t\tlucidePenLine,\n\t\t\tlucideSparkles,\n\t\t\tlucideChevronDown,\n\t\t\tlucideSquareSlash,\n\t\t\tlucidePaperclip,\n\t\t\tlucideMic,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\"Logo\"\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tHi Alexa\n\t\t\t\t\t\t\tWelcome back! How can I help you?\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tI’m here to help tackle your tasks. Choose from the prompts below or tell me what you need!\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (item of reasons; track item.id) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
{{ item.text }}
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tShortcuts\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAttach\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog26Component {\n\tpublic dialogRef = viewChild(HlmDialog);\n\n\treasons = [\n\t\t{\n\t\t\tid: 1,\n\t\t\ttext: 'Create image',\n\t\t\ticon: 'lucideImagePlus',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\ttext: 'Analyze data',\n\t\t\ticon: 'lucideChartColumnStacked',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\ttext: 'Make a plan',\n\t\t\ticon: 'lucideZap',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\ttext: 'Summarize text',\n\t\t\ticon: 'lucideNotepadText',\n\t\t},\n\t\t{\n\t\t\tid: 5,\n\t\t\ttext: 'Help me write',\n\t\t\ticon: 'lucidePenLine',\n\t\t},\n\t\t{\n\t\t\tid: 6,\n\t\t\ttext: 'More',\n\t\t\ticon: 'lucideSparkles',\n\t\t},\n\t];\n\n\tcloseDialog() {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" + "content": "import { Component, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideChartColumnStacked,\n\tlucideChevronDown,\n\tlucideImagePlus,\n\tlucideMic,\n\tlucideNotepadText,\n\tlucidePaperclip,\n\tlucidePenLine,\n\tlucideSparkles,\n\tlucideSquareSlash,\n\tlucideZap,\n} from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmDialog, HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\n\ninterface SupportReason {\n\tid: number;\n\ttext: string;\n\ticon: string;\n}\n\n@Component({\n\tselector: 'sim-dialog-26',\n\timports: [\n\t\tNgIcon,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmAvatarImports,\n\t\tHlmCheckboxImports,\n\t\tHlmInputImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideImagePlus,\n\t\t\tlucideChartColumnStacked,\n\t\t\tlucideZap,\n\t\t\tlucideNotepadText,\n\t\t\tlucidePenLine,\n\t\t\tlucideSparkles,\n\t\t\tlucideChevronDown,\n\t\t\tlucideSquareSlash,\n\t\t\tlucidePaperclip,\n\t\t\tlucideMic,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\"Logo\"\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tHi Alexa\n\t\t\t\t\t\t\tWelcome back! How can I help you?\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tI’m here to help tackle your tasks. Choose from the prompts below or tell me what you need!\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (item of reasons; track item.id) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
{{ item.text }}
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tShortcuts\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAttach\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog26Component {\n\tprotected readonly dialogRef = viewChild(HlmDialog);\n\n\tprotected readonly reasons: SupportReason[] = [\n\t\t{\n\t\t\tid: 1,\n\t\t\ttext: 'Create image',\n\t\t\ticon: 'lucideImagePlus',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\ttext: 'Analyze data',\n\t\t\ticon: 'lucideChartColumnStacked',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\ttext: 'Make a plan',\n\t\t\ticon: 'lucideZap',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\ttext: 'Summarize text',\n\t\t\ticon: 'lucideNotepadText',\n\t\t},\n\t\t{\n\t\t\tid: 5,\n\t\t\ttext: 'Help me write',\n\t\t\ticon: 'lucidePenLine',\n\t\t},\n\t\t{\n\t\t\tid: 6,\n\t\t\ttext: 'More',\n\t\t\ticon: 'lucideSparkles',\n\t\t},\n\t];\n\n\tprotected closeDialog(): void {\n\t\tthis.dialogRef()?.close({});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-27.json b/public/registry/dialog-27.json index a72f41ca..2b806147 100644 --- a/public/registry/dialog-27.json +++ b/public/registry/dialog-27.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideUserPlus } from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-27',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarFallback, HlmAvatarImage, HlmDialogImports],\n\tproviders: [provideIcons({ lucideUserPlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Candice has requested edit access

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tOne of your team has requested edit access to your project\n\t\t\t\t\t\t\t\tMarketing Website Design\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\tmathilde@simui.dev\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog27Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideUserPlus } from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-27',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideUserPlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Candice has requested edit access

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tOne of your team has requested edit access to your project\n\t\t\t\t\t\t\t\tMarketing Website Design\n\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\tmathilde@simui.dev\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog27Component {}" } \ No newline at end of file diff --git a/public/registry/dialog-28.json b/public/registry/dialog-28.json index 3b3812e7..e2425532 100644 --- a/public/registry/dialog-28.json +++ b/public/registry/dialog-28.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-28',\n\timports: [HlmButton, HlmAvatar, HlmAvatarFallback, HlmAvatarImage, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

You've been added to the team

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThanks for accepting the invitation to join the team. You can now access all the features and\n\t\t\t\t\t\t\tfunctionality of the app.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog28Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\n\n@Component({\n\tselector: 'sim-dialog-28',\n\timports: [HlmButtonImports, HlmAvatarImports, HlmDialogImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

You've been added to the team

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThanks for accepting the invitation to join the team. You can now access all the features and\n\t\t\t\t\t\t\tfunctionality of the app.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog28Component {}" } \ No newline at end of file diff --git a/public/registry/dialog-29.json b/public/registry/dialog-29.json index 88914289..d828de4a 100644 --- a/public/registry/dialog-29.json +++ b/public/registry/dialog-29.json @@ -1,3 +1,3 @@ { - "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass, NgOptimizedImage } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy } from '@ng-icons/lucide';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-29',\n\timports: [NgIcon, NgClass, HlmIcon, HlmButton, NgOptimizedImage, HlmAspectRatioImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCopy, lucideCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Logo\"\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tBlog post published\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tThis blog post has been published. Team members will be able to edit this post and republish changes.\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog29Component {\n\tclipboard = inject(Clipboard);\n\tcopied = signal(false);\n\n\tpublic onSelect(): void {\n\t\tthis.copied.set(true);\n\t\tthis.clipboard.copy('I love Angular!');\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" + "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass, NgOptimizedImage } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy } from '@ng-icons/lucide';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-29',\n\timports: [\n\t\tNgIcon,\n\t\tNgClass,\n\t\tNgOptimizedImage,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmAspectRatioImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideCopy, lucideCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\tbutton>ng-icon]:text-primary-foreground top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-0 rounded-lg p-0 sm:max-h-[min(640px,80vh)] sm:max-w-[400px]\"\n\t\t\t\t*hlmDialogPortal=\"let ctx\">\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Logo\"\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tBlog post published\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tThis blog post has been published. Team members will be able to edit this post and republish changes.\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog29Component {\n\tprivate readonly clipboard = inject(Clipboard);\n\tprotected readonly copied = signal(false);\n\n\tprotected onSelect(): void {\n\t\tthis.copied.set(true);\n\t\tthis.clipboard.copy('I love Angular!');\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-30.json b/public/registry/dialog-30.json index afa9bd2a..c7969ca5 100644 --- a/public/registry/dialog-30.json +++ b/public/registry/dialog-30.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmSwitch } from '@spartan-ng/helm/switch';\n\n@Component({\n\tselector: 'sim-dialog-30',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmLabel, HlmSwitch, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCircleCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tBlog post published\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tThis blog post has been published. Team members will be able to edit this post and republish changes.\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog30Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmSwitchImports } from '@spartan-ng/helm/switch';\n\n@Component({\n\tselector: 'sim-dialog-30',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmLabelImports, HlmSwitchImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCircleCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tBlog post published\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tThis blog post has been published. Team members will be able to edit this post and republish changes.\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog30Component {}" } \ No newline at end of file diff --git a/public/registry/dialog-31.json b/public/registry/dialog-31.json index aeac54cc..1edd00e7 100644 --- a/public/registry/dialog-31.json +++ b/public/registry/dialog-31.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-31',\n\timports: [HlmInput, HlmButton, HlmLabel, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCircleCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tProject created\n\t\t\t\t\t\tPlease enter a name for this project.\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog31Component {}" + "content": "import { Component } from '@angular/core';\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-31',\n\timports: [HlmInputImports, HlmButtonImports, HlmLabelImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCircleCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tProject created\n\t\t\t\t\t\tPlease enter a name for this project.\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog31Component {}" } \ No newline at end of file diff --git a/public/registry/dialog-32.json b/public/registry/dialog-32.json index 2d0436b3..6979fc12 100644 --- a/public/registry/dialog-32.json +++ b/public/registry/dialog-32.json @@ -1,3 +1,3 @@ { - "content": "import { afterNextRender, Component, computed, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideLockKeyhole } from '@ng-icons/lucide';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-32',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmInputOtp,\n\t\tHlmInputOtpGroup,\n\t\tHlmInputOtpSlot,\n\t\tBrnInputOtp,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideLockKeyhole })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Set up two-factor authentication

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tTo authorize transactions, please scan this QR code with your Google Authenticator App and enter the\n\t\t\t\t\t\t\t\tverification code below.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"qr-code\"\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tVerification code\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t-\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tDidn't get a code?\n\t\t\t\t\t\t\t\t@if (this.isResendDisabled()) {\n\t\t\t\t\t\t\t\t\t{{ this.countdown() }} seconds\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tClick to resend\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog32Component {\n\tpublic otpValue = model('');\n\tpublic isResendDisabled = computed(() => this.countdown() > 0);\n\tpublic countdown = signal(60);\n\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\tresendCode(): void {\n\t\tthis.resetCountdown();\n\t}\n\n\tprivate resetCountdown(): void {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown(): void {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown(): void {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" + "content": "import { afterNextRender, Component, computed, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideLockKeyhole } from '@ng-icons/lucide';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\n\n@Component({\n\tselector: 'sim-dialog-32',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmInputOtpImports,\n\t\tBrnInputOtpImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideLockKeyhole })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Set up two-factor authentication

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tTo authorize transactions, please scan this QR code with your Google Authenticator App and enter the\n\t\t\t\t\t\t\t\tverification code below.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"qr-code\"\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tVerification code\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t-\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tDidn't get a code?\n\t\t\t\t\t\t\t\t@if (this.isResendDisabled()) {\n\t\t\t\t\t\t\t\t\t{{ this.countdown() }} seconds\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tClick to resend\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog32Component {\n\tprotected readonly otpValue = model('');\n\tprotected readonly isResendDisabled = computed(() => this.countdown() > 0);\n\tprotected readonly countdown = signal(60);\n\n\tprivate _intervalId?: NodeJS.Timeout;\n\n\tconstructor() {\n\t\tafterNextRender(() => this.startCountdown());\n\t}\n\n\tprotected resendCode(): void {\n\t\tthis.resetCountdown();\n\t}\n\n\tprivate resetCountdown(): void {\n\t\tthis.countdown.set(60);\n\t\tthis.startCountdown();\n\t}\n\n\tprivate startCountdown(): void {\n\t\tthis.stopCountdown();\n\t\tthis._intervalId = setInterval(() => {\n\t\t\tthis.countdown.update((countdown) => Math.max(0, countdown - 1));\n\t\t\tif (this.countdown() === 0) {\n\t\t\t\tthis.stopCountdown();\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\tprivate stopCountdown(): void {\n\t\tif (this._intervalId) {\n\t\t\tclearInterval(this._intervalId);\n\t\t\tthis._intervalId = undefined;\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dialog-33.json b/public/registry/dialog-33.json index 43bc12e2..2460b6b3 100644 --- a/public/registry/dialog-33.json +++ b/public/registry/dialog-33.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleDollarSign } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-33',\n\timports: [NgIcon, FormsModule, ReactiveFormsModule, HlmIcon, HlmButton, HlmCheckbox, HlmLabel, HlmDialogImports],\n\tproviders: [provideIcons({ lucideCircleDollarSign })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Change your payment method

\n\t\t\t\t\t\t\t

Update your plan payment details.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tVisa ending in\n\t\t\t\t\t\t\t\t\tExpiry 06/2024\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tMastercard ending in 1234\n\t\t\t\t\t\t\t\t\tExpiry 06/2024\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tApple Pay ending in 2299\n\t\t\t\t\t\t\t\t\tExpiry 11/2026\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog33Component {\n\tformGroup = new FormGroup({\n\t\tvisa: new FormControl(true),\n\t\tmastercard: new FormControl(false),\n\t\tapplepay: new FormControl(false),\n\t});\n}" + "content": "import { Component } from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleDollarSign } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-dialog-33',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmCheckboxImports,\n\t\tHlmLabelImports,\n\t\tHlmDialogImports,\n\t],\n\tproviders: [provideIcons({ lucideCircleDollarSign })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Change your payment method

\n\t\t\t\t\t\t\t

Update your plan payment details.

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tVisa ending in\n\t\t\t\t\t\t\t\t\tExpiry 06/2024\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tMastercard ending in 1234\n\t\t\t\t\t\t\t\t\tExpiry 06/2024\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tApple Pay ending in 2299\n\t\t\t\t\t\t\t\t\tExpiry 11/2026\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog33Component {\n\tprotected readonly formGroup = new FormGroup({\n\t\tvisa: new FormControl(true),\n\t\tmastercard: new FormControl(false),\n\t\tapplepay: new FormControl(false),\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/dialog-34.json b/public/registry/dialog-34.json index 69e4c8ff..93ded48a 100644 --- a/public/registry/dialog-34.json +++ b/public/registry/dialog-34.json @@ -1,3 +1,3 @@ { - "content": "import { HlmInputGroupImports } from '@/libs/ui/input-group/src';\nimport { NgOptimizedImage } from '@angular/common';\nimport { Component, signal } from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail, lucideSave } from '@ng-icons/lucide';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\n@Component({\n\tselector: 'sim-dialog-34',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tHlmIcon,\n\t\tHlmButton,\n\t\tHlmInput,\n\t\tHlmLabel,\n\t\tNgOptimizedImage,\n\t\tHlmAvatarImports,\n\t\tBrnSelectImports,\n\t\tHlmSelectImports,\n\t\tHlmDialogImports,\n\t\tHlmAspectRatioImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideSave, lucideMail })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t@matlewis\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFollowers\n\t\t\t\t\t\t\t\t47,198\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFollowing\n\t\t\t\t\t\t\t\t2,421\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tPosts\n\t\t\t\t\t\t\t\t873\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tCollections\n\t\t\t\t\t\t\t\t87\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t@if (isEmailVerified()) {\n\t\t\t\t\t\t\t\t\t\t\tVerified 12 Feb, 2025\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ value.timezone }}\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t@for (country of countries; track country.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ country.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ country.timezone }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tEstimates based on recent IP address.\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog34Component {\n\tisEmailVerified = signal(true);\n\tcountries = [\n\t\t{\n\t\t\tid: 1,\n\t\t\tlabel: 'Australia',\n\t\t\ticon: 'AU.svg',\n\t\t\ttimezone: 'UTC/GMT+10',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\tlabel: 'Switzerland',\n\t\t\ticon: 'CH.svg',\n\t\t\ttimezone: 'UTC/GMT+1',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\tlabel: 'China',\n\t\t\ticon: 'CN.svg',\n\t\t\ttimezone: 'UTC/GMT+8',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\tlabel: 'Japan',\n\t\t\ticon: 'JP.svg',\n\t\t\ttimezone: 'UTC/GMT+9',\n\t\t},\n\t\t{\n\t\t\tid: 5,\n\t\t\tlabel: 'Korea',\n\t\t\ticon: 'KR.svg',\n\t\t\ttimezone: 'UTC/GMT+9',\n\t\t},\n\t\t{\n\t\t\tid: 6,\n\t\t\tlabel: 'United States',\n\t\t\ticon: 'US.svg',\n\t\t\ttimezone: 'UTC/GMT-5',\n\t\t},\n\t\t{\n\t\t\tid: 7,\n\t\t\tlabel: 'Vietnam',\n\t\t\ticon: 'VN.svg',\n\t\t\ttimezone: 'UTC/GMT+7',\n\t\t},\n\t];\n\n\tformGroup = new FormGroup({\n\t\tfirstName: new FormControl('Mathilde'),\n\t\tlastName: new FormControl('Lewis'),\n\t\temail: new FormControl('mathilde@simui.dev'),\n\t\tuserName: new FormControl('mathilde.lewis842'),\n\t\tcountry: new FormControl(this.countries[0]),\n\t});\n}" + "content": "import { HlmInputGroupImports } from '@/libs/ui/input-group/src';\nimport { NgOptimizedImage } from '@angular/common';\nimport { Component, signal } from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail, lucideSave } from '@ng-icons/lucide';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ninterface Country {\n\tid: number;\n\tlabel: string;\n\ticon: string;\n\ttimezone: string;\n}\n\n@Component({\n\tselector: 'sim-dialog-34',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tNgOptimizedImage,\n\t\tBrnSelectImports,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmInputImports,\n\t\tHlmLabelImports,\n\t\tHlmAvatarImports,\n\t\tHlmSelectImports,\n\t\tHlmDialogImports,\n\t\tHlmAspectRatioImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideSave, lucideMail })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"dialog-24-background\"\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\t\tML\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t@matlewis\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFollowers\n\t\t\t\t\t\t\t\t47,198\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tFollowing\n\t\t\t\t\t\t\t\t2,421\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tPosts\n\t\t\t\t\t\t\t\t873\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tCollections\n\t\t\t\t\t\t\t\t87\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tName\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t@if (isEmailVerified()) {\n\t\t\t\t\t\t\t\t\t\t\tVerified 12 Feb, 2025\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\"flag-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ value.timezone }}\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t@for (country of countries; track country.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"flag-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ country.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ country.timezone }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tEstimates based on recent IP address.\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog34Component {\n\tprotected readonly isEmailVerified = signal(true);\n\tprotected readonly countries: Country[] = [\n\t\t{\n\t\t\tid: 1,\n\t\t\tlabel: 'Australia',\n\t\t\ticon: 'AU.svg',\n\t\t\ttimezone: 'UTC/GMT+10',\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\tlabel: 'Switzerland',\n\t\t\ticon: 'CH.svg',\n\t\t\ttimezone: 'UTC/GMT+1',\n\t\t},\n\t\t{\n\t\t\tid: 3,\n\t\t\tlabel: 'China',\n\t\t\ticon: 'CN.svg',\n\t\t\ttimezone: 'UTC/GMT+8',\n\t\t},\n\t\t{\n\t\t\tid: 4,\n\t\t\tlabel: 'Japan',\n\t\t\ticon: 'JP.svg',\n\t\t\ttimezone: 'UTC/GMT+9',\n\t\t},\n\t\t{\n\t\t\tid: 5,\n\t\t\tlabel: 'Korea',\n\t\t\ticon: 'KR.svg',\n\t\t\ttimezone: 'UTC/GMT+9',\n\t\t},\n\t\t{\n\t\t\tid: 6,\n\t\t\tlabel: 'United States',\n\t\t\ticon: 'US.svg',\n\t\t\ttimezone: 'UTC/GMT-5',\n\t\t},\n\t\t{\n\t\t\tid: 7,\n\t\t\tlabel: 'Vietnam',\n\t\t\ticon: 'VN.svg',\n\t\t\ttimezone: 'UTC/GMT+7',\n\t\t},\n\t];\n\n\tprotected readonly formGroup = new FormGroup({\n\t\tfirstName: new FormControl('Mathilde'),\n\t\tlastName: new FormControl('Lewis'),\n\t\temail: new FormControl('mathilde@simui.dev'),\n\t\tuserName: new FormControl('mathilde.lewis842'),\n\t\tcountry: new FormControl(this.countries[0]),\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/dialog-35.json b/public/registry/dialog-35.json index 5d2bdd14..c1d02098 100644 --- a/public/registry/dialog-35.json +++ b/public/registry/dialog-35.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus, lucidePlus, lucideUserRoundCheck } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-35',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmButton, HlmDialogImports],\n\tproviders: [provideIcons({ lucideUserRoundCheck, lucideMinus, lucidePlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Purchase seats

\n\t\t\t\t\t\t

Select how many seats you need.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ purchaseSeats() }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tPrice per seat\n\t\t\t\t\t\t\t$ {{ pricePerSeat() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal\n\t\t\t\t\t\t\t$ {{ totalPrice() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog35Component {\n\tpurchaseSeats = signal(28);\n\tpricePerSeat = signal(10);\n\ttotalPrice = computed(() => this.purchaseSeats() * this.pricePerSeat());\n\n\tincreaseSeats(): void {\n\t\tthis.purchaseSeats.set(this.purchaseSeats() + 1);\n\t}\n\n\tdecreaseSeats(): void {\n\t\tif (this.purchaseSeats() > 1) {\n\t\t\tthis.purchaseSeats.set(this.purchaseSeats() - 1);\n\t\t}\n\t}\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus, lucidePlus, lucideUserRoundCheck } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDialogImports } from '@spartan-ng/helm/dialog';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dialog-35',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmButtonImports, HlmDialogImports],\n\tproviders: [provideIcons({ lucideUserRoundCheck, lucideMinus, lucidePlus })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Purchase seats

\n\t\t\t\t\t\t

Select how many seats you need.

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ purchaseSeats() }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tPrice per seat\n\t\t\t\t\t\t\t$ {{ pricePerSeat() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal\n\t\t\t\t\t\t\t$ {{ totalPrice() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dialog35Component {\n\tprotected readonly purchaseSeats = signal(28);\n\tprotected readonly pricePerSeat = signal(10);\n\tprotected readonly totalPrice = computed(() => this.purchaseSeats() * this.pricePerSeat());\n\n\tprotected increaseSeats(): void {\n\t\tthis.purchaseSeats.set(this.purchaseSeats() + 1);\n\t}\n\n\tprotected decreaseSeats(): void {\n\t\tif (this.purchaseSeats() > 1) {\n\t\t\tthis.purchaseSeats.set(this.purchaseSeats() - 1);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/dropdown-01.json b/public/registry/dropdown-01.json index 88c56177..d329ff6e 100644 --- a/public/registry/dropdown-01.json +++ b/public/registry/dropdown-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEllipsis } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-01',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideEllipsis })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown01Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEllipsis } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-01',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideEllipsis })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown01Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-02.json b/public/registry/dropdown-02.json index e453a316..f76e440c 100644 --- a/public/registry/dropdown-02.json +++ b/public/registry/dropdown-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-02',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown02Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-02',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown02Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-03.json b/public/registry/dropdown-03.json index 5ecef711..f7a92e34 100644 --- a/public/registry/dropdown-03.json +++ b/public/registry/dropdown-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-03',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown03Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-03',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown03Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-04.json b/public/registry/dropdown-04.json index 99154860..97cda30b 100644 --- a/public/registry/dropdown-04.json +++ b/public/registry/dropdown-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-04',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile, lucideTrash })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown04Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-04',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile, lucideTrash })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown04Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-05.json b/public/registry/dropdown-05.json index e09b6efc..46eff3df 100644 --- a/public/registry/dropdown-05.json +++ b/public/registry/dropdown-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-05',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile, lucideTrash })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tQuick action\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tPinned action\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown05Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-05',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile, lucideTrash })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tQuick action\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tPinned action\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown05Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-06.json b/public/registry/dropdown-06.json index e465d841..12587df4 100644 --- a/public/registry/dropdown-06.json +++ b/public/registry/dropdown-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-06',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown06Component {\n\tangular = signal(true);\n\ttailwind = signal(false);\n\trxjs = signal(false);\n\ttypescript = signal(true);\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-06',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown06Component {\n\tangular = signal(true);\n\ttailwind = signal(false);\n\trxjs = signal(false);\n\ttypescript = signal(true);\n}" } \ No newline at end of file diff --git a/public/registry/dropdown-07.json b/public/registry/dropdown-07.json index bff29df6..eefe06bf 100644 --- a/public/registry/dropdown-07.json +++ b/public/registry/dropdown-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-07',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown07Component {\n\tvalue = signal('angular');\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBolt, lucideChevronDown, lucideCopyPlus, lucideFile, lucideLayers2 } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-07',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideCopyPlus, lucideBolt, lucideLayers2, lucideFile })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown07Component {\n\tprotected readonly value = signal('angular');\n}" } \ No newline at end of file diff --git a/public/registry/dropdown-08.json b/public/registry/dropdown-08.json index 53c7eb85..f8f31cbc 100644 --- a/public/registry/dropdown-08.json +++ b/public/registry/dropdown-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideChevronRight,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-08',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideChevronRight,\n\t\t\tlucideCopyPlus,\n\t\t\tlucideBolt,\n\t\t\tlucideLayers2,\n\t\t\tlucideFile,\n\t\t\tlucideTrash,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tMore\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t⌘⌫\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown08Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBolt,\n\tlucideChevronDown,\n\tlucideChevronRight,\n\tlucideCopyPlus,\n\tlucideFile,\n\tlucideLayers2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-08',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideChevronRight,\n\t\t\tlucideCopyPlus,\n\t\t\tlucideBolt,\n\t\t\tlucideLayers2,\n\t\t\tlucideFile,\n\t\t\tlucideTrash,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tMore\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t⌘⌫\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown08Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-09.json b/public/registry/dropdown-09.json index 23f2f974..2ebf811e 100644 --- a/public/registry/dropdown-09.json +++ b/public/registry/dropdown-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideArchiveRestore,\n\tlucideBell,\n\tlucideChevronDown,\n\tlucideChevronRight,\n\tlucideCpu,\n\tlucidePlus,\n\tlucideShare2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-09',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideChevronRight,\n\t\t\tlucidePlus,\n\t\t\tlucideTrash,\n\t\t\tlucideCpu,\n\t\t\tlucideBell,\n\t\t\tlucideShare2,\n\t\t\tlucideArchiveRestore,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tFramework\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tNotifications\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t⌘⌫\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown09Component {\n\tvalue = signal('angular');\n\temail = signal(true);\n\tpush = signal(false);\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideArchiveRestore,\n\tlucideBell,\n\tlucideChevronDown,\n\tlucideChevronRight,\n\tlucideCpu,\n\tlucidePlus,\n\tlucideShare2,\n\tlucideTrash,\n} from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-09',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideChevronRight,\n\t\t\tlucidePlus,\n\t\t\tlucideTrash,\n\t\t\tlucideCpu,\n\t\t\tlucideBell,\n\t\t\tlucideShare2,\n\t\t\tlucideArchiveRestore,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tFramework\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tNotifications\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t⌘⌫\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown09Component {\n\tprotected readonly value = signal('angular');\n\tprotected readonly email = signal(true);\n\tprotected readonly push = signal(false);\n}" } \ No newline at end of file diff --git a/public/registry/dropdown-10.json b/public/registry/dropdown-10.json index 2a0cdd3d..e807fcb6 100644 --- a/public/registry/dropdown-10.json +++ b/public/registry/dropdown-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUser } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-10',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideCircleUser })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tSigned in as\n\t\t\t\t\t\ttdphuong@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown10Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUser } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-10',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideCircleUser })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tSigned in as\n\t\t\t\t\t\ttdphuong@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown10Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-11.json b/public/registry/dropdown-11.json index fbd5b7d5..26e92c6e 100644 --- a/public/registry/dropdown-11.json +++ b/public/registry/dropdown-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleUser,\n\tlucideLifeBuoy,\n\tlucideLogOut,\n\tlucideMessageSquareWarning,\n\tlucideSettings,\n\tlucideShieldCheck,\n\tlucideUserPen,\n} from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-11',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideCircleUser,\n\t\t\tlucideUserPen,\n\t\t\tlucideSettings,\n\t\t\tlucideShieldCheck,\n\t\t\tlucideLifeBuoy,\n\t\t\tlucideMessageSquareWarning,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\tML\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown11Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleUser,\n\tlucideLifeBuoy,\n\tlucideLogOut,\n\tlucideMessageSquareWarning,\n\tlucideSettings,\n\tlucideShieldCheck,\n\tlucideUserPen,\n} from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-11',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideCircleUser,\n\t\t\tlucideUserPen,\n\t\t\tlucideSettings,\n\t\t\tlucideShieldCheck,\n\t\t\tlucideLifeBuoy,\n\t\t\tlucideMessageSquareWarning,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\tML\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown11Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-12.json b/public/registry/dropdown-12.json index 32c3bd87..d118bf95 100644 --- a/public/registry/dropdown-12.json +++ b/public/registry/dropdown-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideChevronDown,\n\tlucideLifeBuoy,\n\tlucideLogOut,\n\tlucideMessageSquareWarning,\n\tlucideSettings,\n\tlucideShieldCheck,\n\tlucideUserPen,\n} from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-12',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideUserPen,\n\t\t\tlucideSettings,\n\t\t\tlucideShieldCheck,\n\t\t\tlucideLifeBuoy,\n\t\t\tlucideMessageSquareWarning,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\tng-icon]:px-[3px]\"\n\t\t\t\t[hlmDropdownMenuTrigger]=\"menu\">\n\t\t\t\t\n\t\t\t\t\t\"Mathilde\n\t\t\t\t\tML\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown12Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideChevronDown,\n\tlucideLifeBuoy,\n\tlucideLogOut,\n\tlucideMessageSquareWarning,\n\tlucideSettings,\n\tlucideShieldCheck,\n\tlucideUserPen,\n} from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-12',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideUserPen,\n\t\t\tlucideSettings,\n\t\t\tlucideShieldCheck,\n\t\t\tlucideLifeBuoy,\n\t\t\tlucideMessageSquareWarning,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\tng-icon]:px-[3px]\"\n\t\t\t\t[hlmDropdownMenuTrigger]=\"menu\">\n\t\t\t\t\n\t\t\t\t\t\"Mathilde\n\t\t\t\t\tML\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown12Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-13.json b/public/registry/dropdown-13.json index 1f47deba..6c5cc1b3 100644 --- a/public/registry/dropdown-13.json +++ b/public/registry/dropdown-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBookText, lucideCircleAlert, lucideLifeBuoy, lucideMessageCircleMore } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-13',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideCircleAlert, lucideLifeBuoy, lucideMessageCircleMore, lucideBookText })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tNeed help?\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown13Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBookText, lucideCircleAlert, lucideLifeBuoy, lucideMessageCircleMore } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-13',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideCircleAlert, lucideLifeBuoy, lucideMessageCircleMore, lucideBookText })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tNeed help?\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown13Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-14.json b/public/registry/dropdown-14.json index 1f7a5210..931aa686 100644 --- a/public/registry/dropdown-14.json +++ b/public/registry/dropdown-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideHeading1, lucideHeading2, lucideMinus, lucidePlus, lucideTextQuote, lucideType } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-14',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucidePlus, lucideType, lucideTextQuote, lucideMinus, lucideHeading1, lucideHeading2 })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tAdd block\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown14Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideHeading1, lucideHeading2, lucideMinus, lucidePlus, lucideTextQuote, lucideType } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-14',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucidePlus, lucideType, lucideTextQuote, lucideMinus, lucideHeading1, lucideHeading2 })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tAdd block\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown14Component {}" } \ No newline at end of file diff --git a/public/registry/dropdown-15.json b/public/registry/dropdown-15.json index 79e2b99d..c4c5ada7 100644 --- a/public/registry/dropdown-15.json +++ b/public/registry/dropdown-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMonitorCog, lucideMoon, lucideSun } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-15',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideSun, lucideMoon, lucideMonitorCog })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown15Component {\n\tthemeValue = signal<'light' | 'dark' | 'system'>('light');\n\tcomputedIcon = computed(() => {\n\t\tswitch (this.themeValue()) {\n\t\t\tcase 'light':\n\t\t\t\treturn 'lucideSun';\n\t\t\tcase 'dark':\n\t\t\t\treturn 'lucideMoon';\n\t\t\tcase 'system':\n\t\t\t\treturn 'lucideMonitorCog';\n\t\t}\n\t});\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMonitorCog, lucideMoon, lucideSun } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-dropdown-15',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmDropdownMenuImports],\n\tproviders: [provideIcons({ lucideSun, lucideMoon, lucideMonitorCog })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown15Component {\n\tprotected readonly themeValue = signal<'light' | 'dark' | 'system'>('light');\n\tprotected readonly computedIcon = computed(() => {\n\t\tswitch (this.themeValue()) {\n\t\t\tcase 'light':\n\t\t\t\treturn 'lucideSun';\n\t\t\tcase 'dark':\n\t\t\t\treturn 'lucideMoon';\n\t\t\tcase 'system':\n\t\t\t\treturn 'lucideMonitorCog';\n\t\t}\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/dropdown-16.json b/public/registry/dropdown-16.json index 01dce58c..5dcbd0d1 100644 --- a/public/registry/dropdown-16.json +++ b/public/registry/dropdown-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBox,\n\tlucideChevronDown,\n\tlucideLayers2,\n\tlucideLogOut,\n\tlucideMessageCircleQuestion,\n\tlucideSettings,\n\tlucideSlack,\n\tlucideUser,\n\tlucideUserPlus,\n\tlucideUsers,\n\tlucideWarehouse,\n\tlucideZap,\n} from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-16',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideUser,\n\t\t\tlucideSettings,\n\t\t\tlucideZap,\n\t\t\tlucideWarehouse,\n\t\t\tlucideUsers,\n\t\t\tlucideUserPlus,\n\t\t\tlucideLayers2,\n\t\t\tlucideSlack,\n\t\t\tlucideMessageCircleQuestion,\n\t\t\tlucideBox,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\tML\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown16Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideBox,\n\tlucideChevronDown,\n\tlucideLayers2,\n\tlucideLogOut,\n\tlucideMessageCircleQuestion,\n\tlucideSettings,\n\tlucideSlack,\n\tlucideUser,\n\tlucideUserPlus,\n\tlucideUsers,\n\tlucideWarehouse,\n\tlucideZap,\n} from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-dropdown-16',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports, HlmDropdownMenuImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideChevronDown,\n\t\t\tlucideUser,\n\t\t\tlucideSettings,\n\t\t\tlucideZap,\n\t\t\tlucideWarehouse,\n\t\t\tlucideUsers,\n\t\t\tlucideUserPlus,\n\t\t\tlucideLayers2,\n\t\t\tlucideSlack,\n\t\t\tlucideMessageCircleQuestion,\n\t\t\tlucideBox,\n\t\t\tlucideLogOut,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Mathilde\n\t\t\t\t\t\tML\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tMathilde Lewis\n\t\t\t\t\t\tm.lewis@simui.dev\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Dropdown16Component {}" } \ No newline at end of file diff --git a/public/registry/file-upload-01.json b/public/registry/file-upload-01.json index 18c3f2e7..9f1920c4 100644 --- a/public/registry/file-upload-01.json +++ b/public/registry/file-upload-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, ElementRef, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-01',\n\tproviders: [provideIcons({ lucideCircleUserRound })],\n\timports: [HlmButton, HlmIcon, NgIcon],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (previewUrl()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (previewUrl()) {\n\t\t\t\t
\n\t\t\t\t\t

\n\t\t\t\t\t\t{{ fileName() }}\n\t\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t}\n\t\t\t

Basic image uploader

\n\t\t\n\t`,\n})\nexport class FileUpload01Component {\n\tpreviewUrl = signal(null);\n\tfileName = signal(null);\n\tfileInput = viewChild('fileInput');\n\tbuttonLabel = computed(() => (this.previewUrl() ? 'Change image' : 'Upload image'));\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.previewUrl.set(url);\n\t\t\tthis.fileName.set(file.name);\n\t\t}\n\t}\n\n\tonRemoveImage(): void {\n\t\tthis.previewUrl.set(null);\n\t\tthis.fileName.set(null);\n\t\tconst fileInputElement = this.fileInput()?.nativeElement;\n\t\tif (fileInputElement) {\n\t\t\tfileInputElement.value = '';\n\t\t}\n\t}\n}" + "content": "import { Component, computed, ElementRef, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-01',\n\tproviders: [provideIcons({ lucideCircleUserRound })],\n\timports: [NgIcon, HlmButtonImports, HlmIconImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (previewUrl()) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (previewUrl()) {\n\t\t\t\t
\n\t\t\t\t\t

\n\t\t\t\t\t\t{{ fileName() }}\n\t\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t}\n\t\t\t

Basic image uploader

\n\t\t\n\t`,\n})\nexport class FileUpload01Component {\n\tprotected readonly previewUrl = signal(null);\n\tprotected readonly fileName = signal(null);\n\tprotected readonly fileInput = viewChild('fileInput');\n\tprotected readonly buttonLabel = computed(() => (this.previewUrl() ? 'Change image' : 'Upload image'));\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.previewUrl.set(url);\n\t\t\tthis.fileName.set(file.name);\n\t\t}\n\t}\n\n\tprotected onRemoveImage(): void {\n\t\tthis.previewUrl.set(null);\n\t\tthis.fileName.set(null);\n\t\tconst fileInputElement = this.fileInput()?.nativeElement;\n\t\tif (fileInputElement) {\n\t\t\tfileInputElement.value = '';\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-02.json b/public/registry/file-upload-02.json index 3a4d363a..f206ef5a 100644 --- a/public/registry/file-upload-02.json +++ b/public/registry/file-upload-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, ElementRef, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-02',\n\tproviders: [provideIcons({ lucideCircleUserRound, lucideX })],\n\timports: [HlmButton, HlmIcon, NgIcon],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t@if (previewUrl()) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (previewUrl()) {\n\t\t\t\t

\n\t\t\t\t\t{{ fileName() }}\n\t\t\t\t

\n\t\t\t}\n\t\t\t

Avatar upload button

\n\t\t
\n\t`,\n})\nexport class FileUpload02Component {\n\tpreviewUrl = signal(null);\n\tfileName = signal(null);\n\tfileInput = viewChild('fileInput');\n\tbuttonLabel = computed(() => (this.previewUrl() ? 'Change image' : 'Upload image'));\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.previewUrl.set(url);\n\t\t\tthis.fileName.set(file.name);\n\t\t}\n\t}\n\n\tonRemoveImage(): void {\n\t\tthis.previewUrl.set(null);\n\t\tthis.fileName.set(null);\n\t\tconst fileInputElement = this.fileInput()?.nativeElement;\n\t\tif (fileInputElement) {\n\t\t\tfileInputElement.value = '';\n\t\t}\n\t}\n}" + "content": "import { Component, computed, ElementRef, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-02',\n\tproviders: [provideIcons({ lucideCircleUserRound, lucideX })],\n\timports: [NgIcon, HlmButtonImports, HlmIconImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t@if (previewUrl()) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (previewUrl()) {\n\t\t\t\t

\n\t\t\t\t\t{{ fileName() }}\n\t\t\t\t

\n\t\t\t}\n\t\t\t

Avatar upload button

\n\t\t
\n\t`,\n})\nexport class FileUpload02Component {\n\tprotected readonly previewUrl = signal(null);\n\tprotected readonly fileName = signal(null);\n\tprotected readonly fileInput = viewChild('fileInput');\n\tprotected readonly buttonLabel = computed(() => (this.previewUrl() ? 'Change image' : 'Upload image'));\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tconst file = input.files[0];\n\t\t\tconst url = URL.createObjectURL(file);\n\t\t\tthis.previewUrl.set(url);\n\t\t\tthis.fileName.set(file.name);\n\t\t}\n\t}\n\n\tprotected onRemoveImage(): void {\n\t\tthis.previewUrl.set(null);\n\t\tthis.fileName.set(null);\n\t\tconst fileInputElement = this.fileInput()?.nativeElement;\n\t\tif (fileInputElement) {\n\t\t\tfileInputElement.value = '';\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-03.json b/public/registry/file-upload-03.json index 61af54a4..871b76bb 100644 --- a/public/registry/file-upload-03.json +++ b/public/registry/file-upload-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-03',\n\tproviders: [provideIcons({ lucideCircleUserRound, lucideX })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (this.files().length > 0) {\n\t\t\t\t

\n\t\t\t\t\t{{ this.files()[0].file.name }}\n\t\t\t\t

\n\t\t\t}\n\t\t\t

Avatar uploader with droppable area

\n\t\t
\n\t`,\n})\nexport class FileUpload03Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleUserRound, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-03',\n\tproviders: [provideIcons({ lucideCircleUserRound, lucideX })],\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\t@if (this.files().length > 0) {\n\t\t\t\t

\n\t\t\t\t\t{{ this.files()[0].file.name }}\n\t\t\t\t

\n\t\t\t}\n\t\t\t

Avatar uploader with droppable area

\n\t\t
\n\t`,\n})\nexport class FileUpload03Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-04.json b/public/registry/file-upload-04.json index 3a554073..9feda0d5 100644 --- a/public/registry/file-upload-04.json +++ b/public/registry/file-upload-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-04',\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here or click to browse\n\t\t\t\t\t\t\tMax size: 5MB\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t\n\t\t\t\t\n\t\t\t\t{{ this.errors()[0] }}\n\t\t\t\n\t\t}\n\t\t

Single image uploader w/ max size

\n\t`,\n})\nexport class FileUpload04Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-04',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here or click to browse\n\t\t\t\t\t\t\tMax size: 5MB\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t\n\t\t\t\t\n\t\t\t\t{{ this.errors()[0] }}\n\t\t\t\n\t\t}\n\t\t

Single image uploader w/ max size

\n\t`,\n})\nexport class FileUpload04Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-05.json b/public/registry/file-upload-05.json index 514a87d5..48d42686 100644 --- a/public/registry/file-upload-05.json +++ b/public/registry/file-upload-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-05',\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here\n\t\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t\n\t\t\t\t\n\t\t\t\t{{ this.errors()[0] }}\n\t\t\t\n\t\t}\n\t\t

\n\t\t\tSingle image uploader w/ max size (drop area + button)\n\t\t

\n\t`,\n})\nexport class FileUpload05Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tacceptedFileTypes = 'image/svg+xml,image/jpeg,image/jpg,image/gif';\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileUploadState } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-05',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here\n\t\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t\n\t\t\t\t\n\t\t\t\t{{ this.errors()[0] }}\n\t\t\t\n\t\t}\n\t\t

\n\t\t\tSingle image uploader w/ max size (drop area + button)\n\t\t

\n\t`,\n})\nexport class FileUpload05Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly acceptedFileTypes = 'image/svg+xml,image/jpeg,image/jpg,image/gif';\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-06.json b/public/registry/file-upload-06.json index 24f72e1d..0e4012c3 100644 --- a/public/registry/file-upload-06.json +++ b/public/registry/file-upload-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideTrash2, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-06',\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload, lucideTrash2 })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here or click to browse\n\t\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple image uploader w/ image grid

\n\t`,\n})\nexport class FileUpload06Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\taccept = 'image/svg+xml,image/png,image/jpeg,image/jpg,image/gif';\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tinitialFiles = signal([\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '234',\n\t\t\tname: 'bg-04.jpg',\n\t\t\turl: 'assets/backgrounds/bg-04.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '345',\n\t\t\tname: 'bg-05.jpg',\n\t\t\turl: 'assets/backgrounds/bg-05.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '456',\n\t\t\tname: 'bg-06.jpg',\n\t\t\turl: 'assets/backgrounds/bg-06.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t]);\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideTrash2, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-06',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload, lucideTrash2 })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your image here or click to browse\n\t\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple image uploader w/ image grid

\n\t`,\n})\nexport class FileUpload06Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\tprotected readonly accept = 'image/svg+xml,image/png,image/jpeg,image/jpg,image/gif';\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '234',\n\t\t\tname: 'bg-04.jpg',\n\t\t\turl: 'assets/backgrounds/bg-04.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '345',\n\t\t\tname: 'bg-05.jpg',\n\t\t\turl: 'assets/backgrounds/bg-05.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '456',\n\t\t\tname: 'bg-06.jpg',\n\t\t\turl: 'assets/backgrounds/bg-06.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t]);\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-07.json b/public/registry/file-upload-07.json index ce24837f..fe9525d2 100644 --- a/public/registry/file-upload-07.json +++ b/public/registry/file-upload-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-07',\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tDrop your image here\n\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t@if (this.files().length > 1) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple image uploader w/ image list

\n\t`,\n})\nexport class FileUpload07Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\taccept = 'image/svg+xml,image/png,image/jpeg,image/jpg,image/gif';\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tformatBytes = formatBytes;\n\tinitialFiles: FileMetadata[] = [\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '234',\n\t\t\tname: 'bg-04.jpg',\n\t\t\turl: 'assets/backgrounds/bg-04.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '345',\n\t\t\tname: 'bg-05.jpg',\n\t\t\turl: 'assets/backgrounds/bg-05.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '456',\n\t\t\tname: 'bg-06.jpg',\n\t\t\turl: 'assets/backgrounds/bg-06.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t];\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideImageUp, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-07',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideX, lucideImageUp, lucideCircleAlert, lucideUpload })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tDrop your image here\n\t\t\t\t\t\tSVG, PNG, JPG or GIF (max. 5MB)\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\"Preview\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t@if (this.files().length > 1) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple image uploader w/ image list

\n\t`,\n})\nexport class FileUpload07Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\tprotected readonly accept = 'image/svg+xml,image/png,image/jpeg,image/jpg,image/gif';\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly formatBytes = formatBytes;\n\tprotected readonly initialFiles: FileMetadata[] = [\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '234',\n\t\t\tname: 'bg-04.jpg',\n\t\t\turl: 'assets/backgrounds/bg-04.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '345',\n\t\t\tname: 'bg-05.jpg',\n\t\t\turl: 'assets/backgrounds/bg-05.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tid: '456',\n\t\t\tname: 'bg-06.jpg',\n\t\t\turl: 'assets/backgrounds/bg-06.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t];\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-08.json b/public/registry/file-upload-08.json index 7adcd54e..bc3a4c6d 100644 --- a/public/registry/file-upload-08.json +++ b/public/registry/file-upload-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucidePaperclip, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-file-upload-08',\n\tproviders: [provideIcons({ lucideX, lucideCircleAlert, lucideUpload, lucidePaperclip })],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\tDrag & drop or click to browse (max. 10MB)\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Single file uploader w/ max size

\n\t`,\n})\nexport class FileUpload08Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxSize = 10 * 1024 * 1024; // 10MB\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tdisabled = computed(() => this.files().length >= 1);\n\tinitialFiles = signal([\n\t\t{\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\tname: 'background-01.jpg',\n\t\t\tsize: 1258291.2,\n\t\t\tid: '123',\n\t\t\ttype: 'image/jpeg',\n\t\t},\n\t]);\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucidePaperclip, lucideUpload, lucideX } from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n@Component({\n\tselector: 'sim-file-upload-08',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideX, lucideCircleAlert, lucideUpload, lucidePaperclip })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\tDrag & drop or click to browse (max. 10MB)\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Single file uploader w/ max size

\n\t`,\n})\nexport class FileUpload08Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxSize = 10 * 1024 * 1024; // 10MB\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly disabled = computed(() => this.files().length >= 1);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\tname: 'background-01.jpg',\n\t\t\tsize: 1258291.2,\n\t\t\tid: '123',\n\t\t\ttype: 'image/jpeg',\n\t\t},\n\t]);\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-09.json b/public/registry/file-upload-09.json index 7891550a..3a9841a9 100644 --- a/public/registry/file-upload-09.json +++ b/public/registry/file-upload-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-09',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\tDrag & drop or click to browse\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tUp to 100MB\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal files: {{ files().length }}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal size: {{ totalSize() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Single file uploader w/ max size

\n\t`,\n})\nexport class FileUpload09Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxTotalSize = 100 * 1024 * 1024; // 100MB\n\tmaxFiles = 10;\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\ttotalSize = computed(() => formatBytes(this.files().reduce((acc, file) => acc + file.file.size, 0)));\n\tinitialFiles = signal([\n\t\t{\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\tname: 'background-01.jpg',\n\t\t\tsize: 1258291.2,\n\t\t\tid: '123',\n\t\t\ttype: 'image/jpeg',\n\t\t},\n\t]);\n\tformatBytes = formatBytes;\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tgetFileIcon = (file: { file: File | { type: string; name: string } }) => {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t};\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-09',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\tDrag & drop or click to browse\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tUp to 100MB\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t@if (this.files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal files: {{ files().length }}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTotal size: {{ totalSize() }}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Single file uploader w/ max size

\n\t`,\n})\nexport class FileUpload09Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxTotalSize = 100 * 1024 * 1024; // 100MB\n\tprotected readonly maxFiles = 10;\n\tprotected readonly filesState = signal(null);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\tname: 'background-01.jpg',\n\t\t\tsize: 1258291.2,\n\t\t\tid: '123',\n\t\t\ttype: 'image/jpeg',\n\t\t},\n\t]);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly totalSize = computed(() =>\n\t\tformatBytes(this.files().reduce((acc, file) => acc + file.file.size, 0)),\n\t);\n\n\tprotected formatBytes = formatBytes;\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tprotected getFileIcon(file: { file: File | { type: string; name: string } }): IconName {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-10.json b/public/registry/file-upload-10.json index 9de13b85..ccb5b39d 100644 --- a/public/registry/file-upload-10.json +++ b/public/registry/file-upload-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-10',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple files uploader w/ list inside

\n\t`,\n})\nexport class FileUpload10Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxTotalSize = 200 * 1024 * 1024;\n\tmaxFiles = 10;\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tinitialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-11',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-11',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-11',\n\t\t},\n\t]);\n\tformatBytes = formatBytes;\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tgetFileIcon = (file: { file: File | { type: string; name: string } }) => {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t};\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-10',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple files uploader w/ list inside

\n\t`,\n})\nexport class FileUpload10Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxTotalSize = 200 * 1024 * 1024;\n\tprotected readonly maxFiles = 10;\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-11',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-11',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-11',\n\t\t},\n\t]);\n\tprotected formatBytes = formatBytes;\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tprotected getFileIcon(file: { file: File | { type: string; name: string } }): IconName {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-11.json b/public/registry/file-upload-11.json index 6a256e6d..cf140888 100644 --- a/public/registry/file-upload-11.json +++ b/public/registry/file-upload-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideCloudUpload,\n\tlucideDownload,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmTable, HlmTd, HlmTh, HlmTr } from '@spartan-ng/helm/table';\n\n@Component({\n\tselector: 'sim-file-upload-11',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideCloudUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t\tlucideDownload,\n\t\t}),\n\t],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective, HlmTable, HlmTr, HlmTh, HlmTd],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tFiles: {{ files().length }} ∙ ({{ this.totalSize() }})\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tAdd files\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t@for (file of files(); track file.id) {\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
NameTypeSizeAction
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t		\n\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.type.split('/')[1].toUpperCase() || 'UNKNOWN' }}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{{ formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t 0\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tclass=\"border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors motion-reduce:transition-none has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:items-start! has-[input:focus]:ring-[3px]\"\n\t\t\t\t\tdragClass=\"bg-accent/50\"\n\t\t\t\t\t[multiple]=\"true\"\n\t\t\t\t\t[maxFiles]=\"maxFiles\"\n\t\t\t\t\t[maxTotalSize]=\"maxTotalSize\"\n\t\t\t\t\t[initialFiles]=\"initialFiles()\"\n\t\t\t\t\t(filesChange)=\"onFileStateChange($event)\">\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple files uploader w/ table

\n\t`,\n})\nexport class FileUpload11Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxTotalSize = 200 * 1024 * 1024;\n\tmaxFiles = 10;\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\ttotalSize = computed(() => formatBytes(this.files().reduce((acc, file) => acc + file.file.size, 0)));\n\tinitialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-10',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-10',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-10',\n\t\t},\n\t]);\n\tformatBytes = formatBytes;\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tgetFileIcon = (file: { file: File | { type: string; name: string } }) => {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t};\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideCloudUpload,\n\tlucideDownload,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmTableImports } from '@spartan-ng/helm/table';\n\n@Component({\n\tselector: 'sim-file-upload-11',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideCloudUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t\tlucideDownload,\n\t\t}),\n\t],\n\timports: [HlmButtonImports, HlmIconImports, NgIcon, FileDragDropDirective, HlmTableImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tFiles: {{ files().length }} ∙ ({{ this.totalSize() }})\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tAdd files\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t@for (file of files(); track file.id) {\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
NameTypeSizeAction
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t		\n\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.type.split('/')[1].toUpperCase() || 'UNKNOWN' }}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{{ formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t 0\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tclass=\"border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:items-start! has-[input:focus]:ring-[3px] motion-reduce:transition-none\"\n\t\t\t\t\tdragClass=\"bg-accent/50\"\n\t\t\t\t\t[multiple]=\"true\"\n\t\t\t\t\t[maxFiles]=\"maxFiles\"\n\t\t\t\t\t[maxTotalSize]=\"maxTotalSize\"\n\t\t\t\t\t[initialFiles]=\"initialFiles()\"\n\t\t\t\t\t(filesChange)=\"onFileStateChange($event)\">\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Multiple files uploader w/ table

\n\t`,\n})\nexport class FileUpload11Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxTotalSize = 200 * 1024 * 1024;\n\tprotected readonly maxFiles = 10;\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly totalSize = computed(() =>\n\t\tformatBytes(this.files().reduce((acc, file) => acc + file.file.size, 0)),\n\t);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-10',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-10',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-10',\n\t\t},\n\t]);\n\tprotected formatBytes = formatBytes;\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tprotected getFileIcon(file: { file: File | { type: string; name: string } }): IconName {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-12.json b/public/registry/file-upload-12.json index fa06df70..0255869b 100644 --- a/public/registry/file-upload-12.json +++ b/public/registry/file-upload-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideDownload,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideImageUp,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-12',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideImageUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t\tlucideDownload,\n\t\t}),\n\t],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t@if (file.file.type.startsWith('image/')) {\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t

{{ file.file.name }}

\n\t\t\t\t\t\t\t\t\t\t\t

{{ formatBytes(file.file.size) }}

\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your files here\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 6 files\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Mixed content w/ card

\n\t`,\n})\nexport class FileUpload12Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxSize = 5 * 1024 * 1024; // 5MB\n\tmaxFiles = 6;\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tinitialFiles = signal([\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-10',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-10',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-10',\n\t\t},\n\t]);\n\tformatBytes = formatBytes;\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tgetFileIcon(file: { file: File | { type: string; name: string } }) {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n}" + "content": "import { Component, computed, signal, viewChild } from '@angular/core';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideDownload,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideImageUp,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { FileDragDropDirective, FileMetadata, FileUploadState, formatBytes } from '@sim/file';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-file-upload-12',\n\timports: [NgIcon, FileDragDropDirective, HlmButtonImports, HlmIconImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideImageUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t\tlucideDownload,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t@if (file.file.type.startsWith('image/')) {\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t

{{ file.file.name }}

\n\t\t\t\t\t\t\t\t\t\t\t

{{ formatBytes(file.file.size) }}

\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDrop your files here\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 6 files\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

Mixed content w/ card

\n\t`,\n})\nexport class FileUpload12Component {\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxSize = 5 * 1024 * 1024; // 5MB\n\tprotected readonly maxFiles = 6;\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\tid: '123',\n\t\t\tname: 'bg-03.jpg',\n\t\t\turl: 'assets/backgrounds/bg-03.jpg',\n\t\t\ttype: 'image/jpeg',\n\t\t\tsize: 1.2 * 1024 * 1024,\n\t\t},\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-10',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-10',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-10',\n\t\t},\n\t]);\n\tprotected formatBytes = formatBytes;\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState): void {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles(): void {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tprotected getFileIcon(file: { file: File | { type: string; name: string } }): IconName {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/file-upload-13.json b/public/registry/file-upload-13.json index 748f4f11..c74a3e22 100644 --- a/public/registry/file-upload-13.json +++ b/public/registry/file-upload-13.json @@ -1,3 +1,3 @@ { - "content": "import {\n\tFileDragDropDirective,\n\tFileMetadata,\n\tFileUploadState,\n\tFileWithPreview,\n\tformatBytes,\n} from '@/libs/sim/file/file-drag-drop.directive';\nimport { Component, computed, input, signal, viewChild } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\ntype UploadProgress = {\n\tfileId: string;\n\tprogress: number;\n\tcompleted: boolean;\n};\n\n@Component({\n\tselector: 'sim-progress-bar',\n\ttemplate: `\n\t\t@if (fileProgress() && !completed()) {\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t{{ progress() }}%\n\t\t\t
\n\t\t}\n\t`,\n})\nexport class ProgressBarComponent {\n\tfileId = input();\n\tuploadProgress = input([]);\n\n\tfileProgress = computed(() => {\n\t\treturn this.uploadProgress().find((item) => item.fileId === this.fileId());\n\t});\n\tprogress = computed(() => {\n\t\treturn this.uploadProgress().find((item) => item.fileId === this.fileId())?.progress ?? 0;\n\t});\n\tcompleted = computed(() => {\n\t\treturn this.fileProgress() ? this.fileProgress()?.completed : false;\n\t});\n}\n\n@Component({\n\tselector: 'sim-file-upload-13',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\timports: [HlmButton, HlmIcon, NgIcon, FileDragDropDirective, ProgressBarComponent],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

With simulated progress track

\n\t`,\n})\nexport class FileUpload13Component {\n\tfileUploadDirective = viewChild(FileDragDropDirective);\n\tmaxTotalSize = 200 * 1024 * 1024;\n\tmaxFiles = 10;\n\tfilesState = signal(null);\n\tfiles = computed(() => this.filesState()?.files ?? []);\n\terrors = computed(() => this.filesState()?.errors ?? []);\n\tinitialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-11',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-11',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-11',\n\t\t},\n\t]);\n\tformatBytes = formatBytes;\n\n\tuploadProgress = signal([]);\n\n\tonFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tonFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tremoveAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tonRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tgetFileIcon = (file: { file: File | { type: string; name: string } }) => {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t};\n\n\tsimulateUpload = (totalBytes: number, onProgress: (progress: number) => void, onComplete: () => void) => {\n\t\tlet timeoutId: NodeJS.Timeout;\n\t\tlet uploadedBytes = 0;\n\t\tlet lastProgressReport = 0;\n\n\t\tconst simulateChunk = () => {\n\t\t\t// Simulate variable network conditions with random chunk sizes\n\t\t\tconst chunkSize = Math.floor(Math.random() * 300000) + 2000;\n\t\t\tuploadedBytes = Math.min(totalBytes, uploadedBytes + chunkSize);\n\n\t\t\t// Calculate progress percentage (0-100)\n\t\t\tconst progressPercent = Math.floor((uploadedBytes / totalBytes) * 100);\n\n\t\t\t// Only report progress if it's changed by at least 1%\n\t\t\tif (progressPercent > lastProgressReport) {\n\t\t\t\tlastProgressReport = progressPercent;\n\t\t\t\tonProgress(progressPercent);\n\t\t\t}\n\n\t\t\t// Continue simulation if not complete\n\t\t\tif (uploadedBytes < totalBytes) {\n\t\t\t\t// Variable delay between 50ms and 500ms to simulate network fluctuations (reduced for faster uploads)\n\t\t\t\tconst delay = Math.floor(Math.random() * 450) + 50;\n\n\t\t\t\t// Occasionally add a longer pause to simulate network congestion (5% chance, shorter duration)\n\t\t\t\tconst extraDelay = Math.random() < 0.05 ? 500 : 0;\n\n\t\t\t\ttimeoutId = setTimeout(simulateChunk, delay + extraDelay);\n\t\t\t} else {\n\t\t\t\t// Upload complete\n\t\t\t\tonComplete();\n\t\t\t}\n\t\t};\n\n\t\t// Start the simulation\n\t\ttimeoutId = setTimeout(simulateChunk, 100);\n\n\t\t// Return a cleanup function to cancel the simulation\n\t\treturn () => {\n\t\t\tif (timeoutId) {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t}\n\t\t};\n\t};\n\n\thandleFilesAdded = (addedFiles: FileWithPreview[]) => {\n\t\t// Initialize progress tracking for each new file\n\t\tconst newProgressItems = addedFiles.map((file) => ({\n\t\t\tfileId: file.id,\n\t\t\tprogress: 0,\n\t\t\tcompleted: false,\n\t\t}));\n\n\t\t// Add new progress items to state\n\t\tthis.uploadProgress.update((prev) => [...prev, ...newProgressItems]);\n\n\t\t// Store cleanup functions\n\t\tconst cleanupFunctions: Array<() => void> = [];\n\n\t\t// Start simulated upload for each file\n\t\taddedFiles.forEach((file) => {\n\t\t\tconst fileSize = file.file instanceof File ? file.file.size : file.file.size;\n\n\t\t\t// Start the upload simulation and store the cleanup function\n\t\t\tconst cleanup = this.simulateUpload(\n\t\t\t\tfileSize,\n\t\t\t\t// Progress callback\n\t\t\t\t(progress) => {\n\t\t\t\t\tthis.uploadProgress.update((prev) =>\n\t\t\t\t\t\tprev.map((item) => (item.fileId === file.id ? { ...item, progress } : item)),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t// Complete callback\n\t\t\t\t() => {\n\t\t\t\t\tthis.uploadProgress.update((prev) =>\n\t\t\t\t\t\tprev.map((item) => (item.fileId === file.id ? { ...item, completed: true } : item)),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t);\n\n\t\t\tcleanupFunctions.push(cleanup);\n\t\t});\n\n\t\t// Return a cleanup function that cancels all animations\n\t\treturn () => {\n\t\t\tcleanupFunctions.forEach((cleanup) => cleanup());\n\t\t};\n\t};\n}" + "content": "import {\n\tFileDragDropDirective,\n\tFileMetadata,\n\tFileUploadState,\n\tFileWithPreview,\n\tformatBytes,\n} from '@/libs/sim/file/file-drag-drop.directive';\nimport { Component, computed, input, signal, viewChild } from '@angular/core';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n\tlucideCircleAlert,\n\tlucideFile,\n\tlucideFileArchive,\n\tlucideFileSpreadsheet,\n\tlucideFileText,\n\tlucideFileUp,\n\tlucideHeadphones,\n\tlucideImage,\n\tlucideTrash2,\n\tlucideUpload,\n\tlucideVideo,\n\tlucideX,\n} from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\ninterface UploadProgress {\n\tfileId: string;\n\tprogress: number;\n\tcompleted: boolean;\n}\n\n@Component({\n\tselector: 'sim-progress-bar',\n\ttemplate: `\n\t\t@if (fileProgress() && !completed()) {\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t{{ progress() }}%\n\t\t\t\n\t\t}\n\t`,\n})\nexport class ProgressBarComponent {\n\tpublic readonly fileId = input();\n\tpublic readonly uploadProgress = input([]);\n\n\tprotected readonly fileProgress = computed(() => {\n\t\treturn this.uploadProgress().find((item) => item.fileId === this.fileId());\n\t});\n\tprotected readonly progress = computed(() => {\n\t\treturn this.uploadProgress().find((item) => item.fileId === this.fileId())?.progress ?? 0;\n\t});\n\tprotected readonly completed = computed(() => {\n\t\treturn this.fileProgress() ? this.fileProgress()?.completed : false;\n\t});\n}\n\n@Component({\n\tselector: 'sim-file-upload-13',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideFileUp,\n\t\t\tlucideCircleAlert,\n\t\t\tlucideUpload,\n\t\t\tlucideTrash2,\n\t\t\tlucideFileText,\n\t\t\tlucideFileArchive,\n\t\t\tlucideFileSpreadsheet,\n\t\t\tlucideVideo,\n\t\t\tlucideHeadphones,\n\t\t\tlucideImage,\n\t\t\tlucideFile,\n\t\t}),\n\t],\n\timports: [HlmButtonImports, HlmIconImports, NgIcon, FileDragDropDirective, ProgressBarComponent],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@if (files().length > 0) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tUploaded files: {{ files().length }}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tAdd more\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRemove all\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t@for (file of this.files(); track file.id; let idx = $index) {\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t{{ file.file.name }}\n\t\t\t\t\t\t\t\t\t\t\t\t{{ this.formatBytes(file.file.size) }}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tUpload file\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tAll files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tMax 10 files\n\t\t\t\t\t\t\t\t∙\n\t\t\t\t\t\t\t\tUp to 200MB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t@if (this.errors().length > 0) {\n\t\t\t@for (error of this.errors(); track error) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{ error }}\n\t\t\t\t\n\t\t\t}\n\t\t}\n\t\t

With simulated progress track

\n\t`,\n})\nexport class FileUpload13Component {\n\tprotected readonly uploadProgress = signal([]);\n\tprotected readonly fileUploadDirective = viewChild(FileDragDropDirective);\n\tprotected readonly maxTotalSize = 200 * 1024 * 1024;\n\tprotected readonly maxFiles = 10;\n\tprotected readonly filesState = signal(null);\n\tprotected readonly files = computed(() => this.filesState()?.files ?? []);\n\tprotected readonly errors = computed(() => this.filesState()?.errors ?? []);\n\tprotected readonly initialFiles = signal([\n\t\t{\n\t\t\tname: 'certificate.pdf',\n\t\t\tsize: 312412,\n\t\t\ttype: 'application/pdf',\n\t\t\turl: 'https://example.com/document.pdf',\n\t\t\tid: 'document.pdf-11',\n\t\t},\n\t\t{\n\t\t\tname: 'software.zip',\n\t\t\tsize: 534234,\n\t\t\ttype: 'application/zip',\n\t\t\turl: 'https://example.com/intro.zip',\n\t\t\tid: 'intro.zip-11',\n\t\t},\n\t\t{\n\t\t\tname: 'sheet.xlsx',\n\t\t\tsize: 154235,\n\t\t\ttype: 'application/xlsx',\n\t\t\turl: 'https://example.com/conclusion.xlsx',\n\t\t\tid: 'conclusion.xlsx-11',\n\t\t},\n\t]);\n\tprotected formatBytes = formatBytes;\n\n\tprotected onFileSelected(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tif (input.files && input.files.length > 0) {\n\t\t\tthis.fileUploadDirective()?.addFiles(input.files);\n\t\t}\n\t}\n\n\tprotected onFileStateChange(event: FileUploadState) {\n\t\tthis.filesState.set(event);\n\t}\n\n\tprotected removeAllFiles() {\n\t\tthis.fileUploadDirective()?.clearFiles();\n\t}\n\n\tprotected onRemoveImage(id: string): void {\n\t\tthis.fileUploadDirective()?.removeFile(id);\n\t}\n\n\tprotected getFileIcon(file: { file: File | { type: string; name: string } }): IconName {\n\t\tconst fileType = file.file instanceof File ? file.file.type : file.file.type;\n\t\tconst fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n\t\tif (\n\t\t\tfileType.includes('pdf') ||\n\t\t\tfileName.endsWith('.pdf') ||\n\t\t\tfileType.includes('word') ||\n\t\t\tfileName.endsWith('.doc') ||\n\t\t\tfileName.endsWith('.docx')\n\t\t) {\n\t\t\treturn 'lucideFileText';\n\t\t} else if (\n\t\t\tfileType.includes('zip') ||\n\t\t\tfileType.includes('archive') ||\n\t\t\tfileName.endsWith('.zip') ||\n\t\t\tfileName.endsWith('.rar')\n\t\t) {\n\t\t\treturn 'lucideFileArchive';\n\t\t} else if (fileType.includes('excel') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {\n\t\t\treturn 'lucideFileSpreadsheet';\n\t\t} else if (fileType.includes('video/')) {\n\t\t\treturn 'lucideVideo';\n\t\t} else if (fileType.includes('audio/')) {\n\t\t\treturn 'lucideHeadphones';\n\t\t} else if (fileType.startsWith('image/')) {\n\t\t\treturn 'lucideImage';\n\t\t}\n\t\treturn 'lucideFile';\n\t}\n\n\tprotected simulateUpload = (totalBytes: number, onProgress: (progress: number) => void, onComplete: () => void) => {\n\t\tlet timeoutId: NodeJS.Timeout;\n\t\tlet uploadedBytes = 0;\n\t\tlet lastProgressReport = 0;\n\n\t\tconst simulateChunk = () => {\n\t\t\t// Simulate variable network conditions with random chunk sizes\n\t\t\tconst chunkSize = Math.floor(Math.random() * 300000) + 2000;\n\t\t\tuploadedBytes = Math.min(totalBytes, uploadedBytes + chunkSize);\n\n\t\t\t// Calculate progress percentage (0-100)\n\t\t\tconst progressPercent = Math.floor((uploadedBytes / totalBytes) * 100);\n\n\t\t\t// Only report progress if it's changed by at least 1%\n\t\t\tif (progressPercent > lastProgressReport) {\n\t\t\t\tlastProgressReport = progressPercent;\n\t\t\t\tonProgress(progressPercent);\n\t\t\t}\n\n\t\t\t// Continue simulation if not complete\n\t\t\tif (uploadedBytes < totalBytes) {\n\t\t\t\t// Variable delay between 50ms and 500ms to simulate network fluctuations (reduced for faster uploads)\n\t\t\t\tconst delay = Math.floor(Math.random() * 450) + 50;\n\n\t\t\t\t// Occasionally add a longer pause to simulate network congestion (5% chance, shorter duration)\n\t\t\t\tconst extraDelay = Math.random() < 0.05 ? 500 : 0;\n\n\t\t\t\ttimeoutId = setTimeout(simulateChunk, delay + extraDelay);\n\t\t\t} else {\n\t\t\t\t// Upload complete\n\t\t\t\tonComplete();\n\t\t\t}\n\t\t};\n\n\t\t// Start the simulation\n\t\ttimeoutId = setTimeout(simulateChunk, 100);\n\n\t\t// Return a cleanup function to cancel the simulation\n\t\treturn () => {\n\t\t\tif (timeoutId) {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t}\n\t\t};\n\t};\n\n\tprotected handleFilesAdded = (addedFiles: FileWithPreview[]) => {\n\t\t// Initialize progress tracking for each new file\n\t\tconst newProgressItems = addedFiles.map((file) => ({\n\t\t\tfileId: file.id,\n\t\t\tprogress: 0,\n\t\t\tcompleted: false,\n\t\t}));\n\n\t\t// Add new progress items to state\n\t\tthis.uploadProgress.update((prev) => [...prev, ...newProgressItems]);\n\n\t\t// Store cleanup functions\n\t\tconst cleanupFunctions: (() => void)[] = [];\n\n\t\t// Start simulated upload for each file\n\t\taddedFiles.forEach((file) => {\n\t\t\tconst fileSize = file.file instanceof File ? file.file.size : file.file.size;\n\n\t\t\t// Start the upload simulation and store the cleanup function\n\t\t\tconst cleanup = this.simulateUpload(\n\t\t\t\tfileSize,\n\t\t\t\t// Progress callback\n\t\t\t\t(progress) => {\n\t\t\t\t\tthis.uploadProgress.update((prev) =>\n\t\t\t\t\t\tprev.map((item) => (item.fileId === file.id ? { ...item, progress } : item)),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t// Complete callback\n\t\t\t\t() => {\n\t\t\t\t\tthis.uploadProgress.update((prev) =>\n\t\t\t\t\t\tprev.map((item) => (item.fileId === file.id ? { ...item, completed: true } : item)),\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t);\n\n\t\t\tcleanupFunctions.push(cleanup);\n\t\t});\n\n\t\t// Return a cleanup function that cancels all animations\n\t\treturn () => {\n\t\t\tcleanupFunctions.forEach((cleanup) => cleanup());\n\t\t};\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/image-cropper-10.json b/public/registry/image-cropper-10.json index ad5633e7..d4d89f74 100644 --- a/public/registry/image-cropper-10.json +++ b/public/registry/image-cropper-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component, OnDestroy, signal } from '@angular/core';\nimport {\n\tArea,\n\tCropperComponent,\n\tCropperCropAreaComponent,\n\tCropperDescriptionComponent,\n\tCropperImageComponent,\n} from '@sim-space/image-cropper';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'app-image-cropper-10',\n\timports: [CropperComponent, CropperImageComponent, CropperCropAreaComponent, CropperDescriptionComponent, HlmButton],\n\thost: { class: 'flex flex-col gap-2 size-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t@if (croppedImageUrl()) {\n\t\t\t\t\t\t\"Cropped\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tImage preview\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\n\t\t

\n\t\t\tCropper with image preview ·\n\t\t\t\n\t\t\t\tAPI\n\t\t\t\n\t\t

\n\t`,\n})\nexport class ImageCropper10Component implements OnDestroy {\n\tprotected readonly imageUrl = 'assets/backgrounds/bg-12.webp';\n\tprotected readonly croppedAreaPixels = signal(null);\n\tprotected readonly croppedImageUrl = signal(null);\n\n\tprivate cachedImage: HTMLImageElement | null = null;\n\n\tngOnDestroy(): void {\n\t\tconst url = this.croppedImageUrl();\n\t\tif (url?.startsWith('blob:')) {\n\t\t\tURL.revokeObjectURL(url);\n\t\t}\n\t\tthis.cachedImage = null;\n\t}\n\n\tprotected onCropChange(pixels: Area | null): void {\n\t\tthis.croppedAreaPixels.set(pixels);\n\t}\n\n\tprotected async handleCrop(): Promise {\n\t\tconst pixels = this.croppedAreaPixels();\n\t\tif (!pixels) return;\n\n\t\ttry {\n\t\t\tconst croppedBlob = await this.getCroppedImg(this.imageUrl, pixels);\n\t\t\tif (!croppedBlob) {\n\t\t\t\tthrow new Error('Failed to generate cropped image blob.');\n\t\t\t}\n\n\t\t\tconst oldUrl = this.croppedImageUrl();\n\t\t\tif (oldUrl) {\n\t\t\t\tURL.revokeObjectURL(oldUrl);\n\t\t\t}\n\n\t\t\tthis.croppedImageUrl.set(URL.createObjectURL(croppedBlob));\n\t\t} catch (error) {\n\t\t\tconsole.error('Error during cropping:', error);\n\t\t\tconst oldUrl = this.croppedImageUrl();\n\t\t\tif (oldUrl) {\n\t\t\t\tURL.revokeObjectURL(oldUrl);\n\t\t\t}\n\t\t\tthis.croppedImageUrl.set(null);\n\t\t}\n\t}\n\n\tprivate async getCroppedImg(\n\t\timageSrc: string,\n\t\tpixelCrop: Area,\n\t\toutputWidth: number = pixelCrop.width,\n\t\toutputHeight: number = pixelCrop.height,\n\t): Promise {\n\t\ttry {\n\t\t\tthis.cachedImage ??= await this.createImage(imageSrc);\n\t\t\tconst image = this.cachedImage;\n\t\t\tconst canvas = document.createElement('canvas');\n\t\t\tconst ctx = canvas.getContext('2d');\n\n\t\t\tif (!ctx) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tcanvas.width = outputWidth;\n\t\t\tcanvas.height = outputHeight;\n\n\t\t\tctx.drawImage(\n\t\t\t\timage,\n\t\t\t\tpixelCrop.x,\n\t\t\t\tpixelCrop.y,\n\t\t\t\tpixelCrop.width,\n\t\t\t\tpixelCrop.height,\n\t\t\t\t0,\n\t\t\t\t0,\n\t\t\t\toutputWidth,\n\t\t\t\toutputHeight,\n\t\t\t);\n\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tcanvas.toBlob((blob) => {\n\t\t\t\t\tresolve(blob);\n\t\t\t\t}, 'image/jpeg');\n\t\t\t});\n\t\t} catch (error) {\n\t\t\tconsole.error('Error in getCroppedImg:', error);\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tprivate createImage(url: string): Promise {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst image = new Image();\n\t\t\timage.addEventListener('load', () => resolve(image));\n\t\t\timage.addEventListener('error', () => reject(new Error(`Failed to load image: ${url}`)));\n\t\t\timage.setAttribute('crossOrigin', 'anonymous');\n\t\t\timage.src = url;\n\t\t});\n\t}\n}" + "content": "import { Component, OnDestroy, signal } from '@angular/core';\nimport {\n\tArea,\n\tCropperComponent,\n\tCropperCropAreaComponent,\n\tCropperDescriptionComponent,\n\tCropperImageComponent,\n} from '@sim-space/image-cropper';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'app-image-cropper-10',\n\timports: [\n\t\tCropperComponent,\n\t\tCropperImageComponent,\n\t\tCropperCropAreaComponent,\n\t\tCropperDescriptionComponent,\n\t\tHlmButtonImports,\n\t],\n\thost: { class: 'flex flex-col gap-2 size-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t@if (croppedImageUrl()) {\n\t\t\t\t\t\t\"Cropped\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tImage preview\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\n\t\t

\n\t\t\tCropper with image preview ·\n\t\t\t\n\t\t\t\tAPI\n\t\t\t\n\t\t

\n\t`,\n})\nexport class ImageCropper10Component implements OnDestroy {\n\tprotected readonly imageUrl = 'assets/backgrounds/bg-12.webp';\n\tprotected readonly croppedAreaPixels = signal(null);\n\tprotected readonly croppedImageUrl = signal(null);\n\n\tprivate cachedImage: HTMLImageElement | null = null;\n\n\tngOnDestroy(): void {\n\t\tconst url = this.croppedImageUrl();\n\t\tif (url?.startsWith('blob:')) {\n\t\t\tURL.revokeObjectURL(url);\n\t\t}\n\t\tthis.cachedImage = null;\n\t}\n\n\tprotected onCropChange(pixels: Area | null): void {\n\t\tthis.croppedAreaPixels.set(pixels);\n\t}\n\n\tprotected async handleCrop(): Promise {\n\t\tconst pixels = this.croppedAreaPixels();\n\t\tif (!pixels) return;\n\n\t\ttry {\n\t\t\tconst croppedBlob = await this.getCroppedImg(this.imageUrl, pixels);\n\t\t\tif (!croppedBlob) {\n\t\t\t\tthrow new Error('Failed to generate cropped image blob.');\n\t\t\t}\n\n\t\t\tconst oldUrl = this.croppedImageUrl();\n\t\t\tif (oldUrl) {\n\t\t\t\tURL.revokeObjectURL(oldUrl);\n\t\t\t}\n\n\t\t\tthis.croppedImageUrl.set(URL.createObjectURL(croppedBlob));\n\t\t} catch (error) {\n\t\t\tconsole.error('Error during cropping:', error);\n\t\t\tconst oldUrl = this.croppedImageUrl();\n\t\t\tif (oldUrl) {\n\t\t\t\tURL.revokeObjectURL(oldUrl);\n\t\t\t}\n\t\t\tthis.croppedImageUrl.set(null);\n\t\t}\n\t}\n\n\tprivate async getCroppedImg(\n\t\timageSrc: string,\n\t\tpixelCrop: Area,\n\t\toutputWidth: number = pixelCrop.width,\n\t\toutputHeight: number = pixelCrop.height,\n\t): Promise {\n\t\ttry {\n\t\t\tthis.cachedImage ??= await this.createImage(imageSrc);\n\t\t\tconst image = this.cachedImage;\n\t\t\tconst canvas = document.createElement('canvas');\n\t\t\tconst ctx = canvas.getContext('2d');\n\n\t\t\tif (!ctx) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tcanvas.width = outputWidth;\n\t\t\tcanvas.height = outputHeight;\n\n\t\t\tctx.drawImage(\n\t\t\t\timage,\n\t\t\t\tpixelCrop.x,\n\t\t\t\tpixelCrop.y,\n\t\t\t\tpixelCrop.width,\n\t\t\t\tpixelCrop.height,\n\t\t\t\t0,\n\t\t\t\t0,\n\t\t\t\toutputWidth,\n\t\t\t\toutputHeight,\n\t\t\t);\n\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tcanvas.toBlob((blob) => {\n\t\t\t\t\tresolve(blob);\n\t\t\t\t}, 'image/jpeg');\n\t\t\t});\n\t\t} catch (error) {\n\t\t\tconsole.error('Error in getCroppedImg:', error);\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tprivate createImage(url: string): Promise {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tconst image = new Image();\n\t\t\timage.addEventListener('load', () => resolve(image));\n\t\t\timage.addEventListener('error', () => reject(new Error(`Failed to load image: ${url}`)));\n\t\t\timage.setAttribute('crossOrigin', 'anonymous');\n\t\t\timage.src = url;\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-01.json b/public/registry/input-01.json index c14c5b1e..27ece2e7 100644 --- a/public/registry/input-01.json +++ b/public/registry/input-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-01',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input01Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-01',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input01Component {}" } \ No newline at end of file diff --git a/public/registry/input-02.json b/public/registry/input-02.json index 636fc40d..1aeb0335 100644 --- a/public/registry/input-02.json +++ b/public/registry/input-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-02',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input02Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-02',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input02Component {}" } \ No newline at end of file diff --git a/public/registry/input-03.json b/public/registry/input-03.json index e3d4e2b0..12f7e54d 100644 --- a/public/registry/input-03.json +++ b/public/registry/input-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-03',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t

\n\t\t\tWe won‘t share your email with anyone\n\t\t

\n\t`,\n})\nexport class Input03Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-03',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t

\n\t\t\tWe won‘t share your email with anyone\n\t\t

\n\t`,\n})\nexport class Input03Component {}" } \ No newline at end of file diff --git a/public/registry/input-04.json b/public/registry/input-04.json index 955fdb8d..e6e0c086 100644 --- a/public/registry/input-04.json +++ b/public/registry/input-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-04',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\tOptional\n\t\t
\n\t\t\n\t`,\n})\nexport class Input04Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-04',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\tOptional\n\t\t
\n\t\t\n\t`,\n})\nexport class Input04Component {}" } \ No newline at end of file diff --git a/public/registry/input-05.json b/public/registry/input-05.json index aecffb1a..e5fd0e9e 100644 --- a/public/registry/input-05.json +++ b/public/registry/input-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-05',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input05Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-05',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input05Component {}" } \ No newline at end of file diff --git a/public/registry/input-06.json b/public/registry/input-06.json index 739d52cc..1b0a5073 100644 --- a/public/registry/input-06.json +++ b/public/registry/input-06.json @@ -1,3 +1,3 @@ { - "content": "import { HlmFieldImports } from '@/libs/ui/field/src';\nimport { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-06',\n\timports: [HlmLabel, HlmInput, HlmFieldImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\tEmail is invalid\n\t\t\n\t`,\n})\nexport class Input06Component {}" + "content": "import { HlmFieldImports } from '@/libs/ui/field/src';\nimport { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-06',\n\timports: [HlmLabelImports, HlmInputImports, HlmFieldImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\tEmail is invalid\n\t\t\n\t`,\n})\nexport class Input06Component {}" } \ No newline at end of file diff --git a/public/registry/input-07.json b/public/registry/input-07.json index 81e54138..9ced45ea 100644 --- a/public/registry/input-07.json +++ b/public/registry/input-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-07',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input07Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-07',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input07Component {}" } \ No newline at end of file diff --git a/public/registry/input-08.json b/public/registry/input-08.json index 2b1c9f42..c135ba70 100644 --- a/public/registry/input-08.json +++ b/public/registry/input-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-08',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input08Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-08',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input08Component {}" } \ No newline at end of file diff --git a/public/registry/input-09.json b/public/registry/input-09.json index 8dfa5f01..0fd37af8 100644 --- a/public/registry/input-09.json +++ b/public/registry/input-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAtSign } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-09',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideAtSign })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input09Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAtSign } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-09',\n\timports: [HlmLabelImports, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideAtSign })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input09Component {}" } \ No newline at end of file diff --git a/public/registry/input-10.json b/public/registry/input-10.json index 859b395b..c48af42c 100644 --- a/public/registry/input-10.json +++ b/public/registry/input-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-10',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideMail })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input10Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMail } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-10',\n\timports: [HlmLabelImports, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideMail })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input10Component {}" } \ No newline at end of file diff --git a/public/registry/input-11.json b/public/registry/input-11.json index 8902c43d..14204984 100644 --- a/public/registry/input-11.json +++ b/public/registry/input-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-11',\n\timports: [HlmLabel, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
https://
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input11Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-11',\n\timports: [HlmLabelImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
https://
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input11Component {}" } \ No newline at end of file diff --git a/public/registry/input-12.json b/public/registry/input-12.json index d6deecd6..a67be0a8 100644 --- a/public/registry/input-12.json +++ b/public/registry/input-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-12',\n\timports: [HlmLabel, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
.com
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input12Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-12',\n\timports: [HlmLabelImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
.com
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input12Component {}" } \ No newline at end of file diff --git a/public/registry/input-13.json b/public/registry/input-13.json index 5ae1d54d..9a86bcec 100644 --- a/public/registry/input-13.json +++ b/public/registry/input-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEuro } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-13',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEuro })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
EUR
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input13Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEuro } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-13',\n\timports: [NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEuro })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t
EUR
\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input13Component {}" } \ No newline at end of file diff --git a/public/registry/input-14.json b/public/registry/input-14.json index 77feb45a..c64e297e 100644 --- a/public/registry/input-14.json +++ b/public/registry/input-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-14',\n\timports: [HlmLabel, HlmButtonGroupImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input14Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-14',\n\timports: [HlmLabelImports, HlmButtonGroupImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input14Component {}" } \ No newline at end of file diff --git a/public/registry/input-15.json b/public/registry/input-15.json index d89e0a83..eb811a33 100644 --- a/public/registry/input-15.json +++ b/public/registry/input-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-15',\n\timports: [HlmLabel, HlmInputGroupImports, HlmButtonGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input15Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-15',\n\timports: [HlmLabelImports, HlmInputGroupImports, HlmButtonGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input15Component {}" } \ No newline at end of file diff --git a/public/registry/input-16.json b/public/registry/input-16.json index 706ba12c..f09d988b 100644 --- a/public/registry/input-16.json +++ b/public/registry/input-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSend } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-16',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideSend })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input16Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSend } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-16',\n\timports: [NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideSend })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input16Component {}" } \ No newline at end of file diff --git a/public/registry/input-17.json b/public/registry/input-17.json index d89ae8b0..908b8eb3 100644 --- a/public/registry/input-17.json +++ b/public/registry/input-17.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideDownload } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-17',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports, HlmButtonGroupImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideDownload })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input17Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideDownload } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-17',\n\timports: [NgIcon, HlmLabelImports, HlmInputGroupImports, HlmButtonGroupImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideDownload })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input17Component {}" } \ No newline at end of file diff --git a/public/registry/input-18.json b/public/registry/input-18.json index 8629267f..f5009d97 100644 --- a/public/registry/input-18.json +++ b/public/registry/input-18.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-18',\n\timports: [HlmLabel, HlmInputGroupImports, HlmButtonGroupImports, HlmButtonImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input18Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-18',\n\timports: [HlmLabelImports, HlmInputGroupImports, HlmButtonGroupImports, HlmButtonImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input18Component {}" } \ No newline at end of file diff --git a/public/registry/input-19.json b/public/registry/input-19.json index 3fe95020..921024d1 100644 --- a/public/registry/input-19.json +++ b/public/registry/input-19.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-19',\n\timports: [HlmLabel, HlmInput, HlmButton],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input19Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-19',\n\timports: [HlmLabelImports, HlmInputImports, HlmButtonImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input19Component {}" } \ No newline at end of file diff --git a/public/registry/input-20.json b/public/registry/input-20.json index d80e8eee..2b4b3187 100644 --- a/public/registry/input-20.json +++ b/public/registry/input-20.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-20',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEye, lucideEyeOff })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input20Component {\n\tpublic readonly visibility = signal(false);\n\tpublic readonly computedIcon = computed(() => (this.visibility() ? 'lucideEyeOff' : 'lucideEye'));\n\tpublic readonly inputType = computed(() => (this.visibility() ? 'text' : 'password'));\n\n\tpublic handleUpdateVisibility(): void {\n\t\tthis.visibility.update((v) => !v);\n\t}\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-20',\n\timports: [HlmLabelImports, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEye, lucideEyeOff })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input20Component {\n\tpublic readonly visibility = signal(false);\n\tpublic readonly computedIcon = computed(() => (this.visibility() ? 'lucideEyeOff' : 'lucideEye'));\n\tpublic readonly inputType = computed(() => (this.visibility() ? 'text' : 'password'));\n\n\tpublic handleUpdateVisibility(): void {\n\t\tthis.visibility.update((v) => !v);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-21.json b/public/registry/input-21.json index 71765f6e..c992df3a 100644 --- a/public/registry/input-21.json +++ b/public/registry/input-21.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleX } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-21',\n\timports: [HlmLabel, NgIcon, ReactiveFormsModule, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCircleX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t@if (!!this.form.get('something')?.value) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Input21Component {\n\tpublic readonly form = new FormGroup({\n\t\tsomething: new FormControl('You can clear me!'),\n\t});\n\n\tpublic clearInput(): void {\n\t\tthis.form.get('something')?.setValue('');\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleX } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-21',\n\timports: [HlmLabelImports, NgIcon, ReactiveFormsModule, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCircleX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t@if (!!this.form.get('something')?.value) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Input21Component {\n\tprotected readonly form = new FormGroup({\n\t\tsomething: new FormControl('You can clear me!'),\n\t});\n\n\tprotected clearInput(): void {\n\t\tthis.form.get('something')?.setValue('');\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-22.json b/public/registry/input-22.json index d1125e9b..77259878 100644 --- a/public/registry/input-22.json +++ b/public/registry/input-22.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmKbdImports } from '@spartan-ng/helm/kbd';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-22',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports, HlmKbdImports],\n\tproviders: [provideIcons({ lucideSearch })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t⌘K\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input22Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmKbdImports } from '@spartan-ng/helm/kbd';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-22',\n\timports: [NgIcon, HlmLabelImports, HlmInputGroupImports, HlmKbdImports],\n\tproviders: [provideIcons({ lucideSearch })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t⌘K\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input22Component {}" } \ No newline at end of file diff --git a/public/registry/input-23.json b/public/registry/input-23.json index e0a0e8b3..76cdaafd 100644 --- a/public/registry/input-23.json +++ b/public/registry/input-23.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-23',\n\timports: [HlmLabel, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideSearch, lucideArrowRight })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input23Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-23',\n\timports: [NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideSearch, lucideArrowRight })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input23Component {}" } \ No newline at end of file diff --git a/public/registry/input-24.json b/public/registry/input-24.json index 74a3ab9e..0863b1eb 100644 --- a/public/registry/input-24.json +++ b/public/registry/input-24.json @@ -1,3 +1,3 @@ { - "content": "import { Component, OnInit, signal } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMic, lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { debounceTime } from 'rxjs';\n\n@Component({\n\tselector: 'sim-input-24',\n\timports: [HlmLabel, HlmInputGroupImports, NgIcon, ReactiveFormsModule],\n\tproviders: [provideIcons({ lucideSearch, lucideMic })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input24Component implements OnInit {\n\tpublic readonly form = new FormGroup({\n\t\tsearchField: new FormControl(''),\n\t});\n\tpublic isSearching = signal(false);\n\n\tpublic ngOnInit(): void {\n\t\tthis.form\n\t\t\t.get('searchField')\n\t\t\t?.valueChanges.pipe(debounceTime(300))\n\t\t\t.subscribe((value) => {\n\t\t\t\tthis.isSearching.set(true);\n\t\t\t\tsetTimeout(() => this.isSearching.set(false), 1500);\n\t\t\t});\n\t}\n}" + "content": "import { Component, OnInit, signal } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMic, lucideSearch } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { debounceTime } from 'rxjs';\n\n@Component({\n\tselector: 'sim-input-24',\n\timports: [NgIcon, ReactiveFormsModule, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideSearch, lucideMic })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input24Component implements OnInit {\n\tprotected readonly form = new FormGroup({\n\t\tsearchField: new FormControl(''),\n\t});\n\tprotected readonly isSearching = signal(false);\n\n\tngOnInit(): void {\n\t\tthis.form\n\t\t\t.get('searchField')\n\t\t\t?.valueChanges.pipe(debounceTime(300))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.isSearching.set(true);\n\t\t\t\tsetTimeout(() => this.isSearching.set(false), 1500);\n\t\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-25.json b/public/registry/input-25.json index 2e93cbb6..8ace8d24 100644 --- a/public/registry/input-25.json +++ b/public/registry/input-25.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoNumberOptionsGenerator, maskitoParseNumber } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus, lucidePlus } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-25',\n\timports: [\n\t\tHlmLabel,\n\t\tMaskitoDirective,\n\t\tNgIcon,\n\t\tReactiveFormsModule,\n\t\tHlmButtonGroupImports,\n\t\tHlmButtonImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideMinus, lucidePlus })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input25Component {\n\tprotected readonly form = new FormGroup({\n\t\tcontrol: new FormControl('2048'),\n\t});\n\tprotected readonly isDecreaseDisabled = computed(() => this.formValueChange()?.control === '0');\n\tprotected readonly numberMaskedInput = maskitoNumberOptionsGenerator({\n\t\tmaximumFractionDigits: 2,\n\t\tthousandSeparator: ',',\n\t\tdecimalSeparator: '.',\n\t});\n\n\tprivate readonly formValueChange = toSignal(this.form.valueChanges);\n\n\tprotected descreaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value > 0) {\n\t\t\tconst newValue = value - 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toString());\n\t\t}\n\t}\n\n\tprotected increaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value >= 0) {\n\t\t\tconst newValue = value + 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toString());\n\t\t} else if (currentValue === '') {\n\t\t\tthis.form.get('control')?.setValue('1');\n\t\t}\n\t}\n}" + "content": "import { Component, computed } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoNumber, maskitoParseNumber } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus, lucidePlus } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-25',\n\timports: [\n\t\tMaskitoDirective,\n\t\tNgIcon,\n\t\tReactiveFormsModule,\n\t\tHlmLabelImports,\n\t\tHlmButtonGroupImports,\n\t\tHlmButtonImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideMinus, lucidePlus })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input25Component {\n\tprotected readonly form = new FormGroup({\n\t\tcontrol: new FormControl('2048'),\n\t});\n\tprotected readonly isDecreaseDisabled = computed(() => this.formValueChange()?.control === '0');\n\tprotected readonly numberMaskedInput = maskitoNumber({\n\t\tmaximumFractionDigits: 2,\n\t\tthousandSeparator: ',',\n\t\tdecimalSeparator: '.',\n\t});\n\n\tprivate readonly formValueChange = toSignal(this.form.valueChanges);\n\n\tprotected descreaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value > 0) {\n\t\t\tconst newValue = value - 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toString());\n\t\t}\n\t}\n\n\tprotected increaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value >= 0) {\n\t\t\tconst newValue = value + 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toString());\n\t\t} else if (currentValue === '') {\n\t\t\tthis.form.get('control')?.setValue('1');\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-26.json b/public/registry/input-26.json index 9c6e4205..17722266 100644 --- a/public/registry/input-26.json +++ b/public/registry/input-26.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoNumberOptionsGenerator, maskitoParseNumber } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown, lucideChevronUp, lucideEuro } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-26',\n\timports: [HlmLabel, HlmInput, NgIcon, HlmIcon, ReactiveFormsModule, MaskitoDirective],\n\tproviders: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideEuro })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input26Component {\n\tprotected readonly form = new FormGroup({\n\t\tcontrol: new FormControl('99.00'),\n\t});\n\tprotected readonly formValueChange = toSignal(this.form.valueChanges);\n\tprotected readonly isDecreaseDisabled = computed(() => this.formValueChange()?.control === '0');\n\tprotected readonly numberMaskedInput = maskitoNumberOptionsGenerator({\n\t\tmaximumFractionDigits: 2,\n\t\tthousandSeparator: ',',\n\t\tdecimalSeparator: '.',\n\t});\n\n\tprotected descreaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\t\tconsole.log(value);\n\n\t\tif (!Number.isNaN(value) && value > 0) {\n\t\t\tconst newValue = value - 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toFixed(2));\n\t\t}\n\t}\n\n\tprotected increaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value >= 0) {\n\t\t\tconst newValue = value + 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toFixed(2));\n\t\t} else if (currentValue === '') {\n\t\t\tthis.form.get('control')?.setValue('1');\n\t\t}\n\t}\n}" + "content": "import { Component, computed } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoNumber, maskitoParseNumber } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown, lucideChevronUp, lucideEuro } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-26',\n\timports: [NgIcon, ReactiveFormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports, HlmIconImports],\n\tproviders: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideEuro })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input26Component {\n\tprotected readonly form = new FormGroup({\n\t\tcontrol: new FormControl('99.00'),\n\t});\n\tprotected readonly formValueChange = toSignal(this.form.valueChanges);\n\tprotected readonly isDecreaseDisabled = computed(() => this.formValueChange()?.control === '0');\n\tprotected readonly numberMaskedInput = maskitoNumber({\n\t\tmaximumFractionDigits: 2,\n\t\tthousandSeparator: ',',\n\t\tdecimalSeparator: '.',\n\t});\n\n\tprotected descreaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value > 0) {\n\t\t\tconst newValue = value - 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toFixed(2));\n\t\t}\n\t}\n\n\tprotected increaseValue(): void {\n\t\tconst currentValue = this.form.get('control')?.value ?? '';\n\t\tconst value = maskitoParseNumber(currentValue);\n\n\t\tif (!Number.isNaN(value) && value >= 0) {\n\t\t\tconst newValue = value + 1;\n\t\t\tthis.form.get('control')?.setValue(newValue.toFixed(2));\n\t\t} else if (currentValue === '') {\n\t\t\tthis.form.get('control')?.setValue('1');\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-27.json b/public/registry/input-27.json index 084b90e1..4e346856 100644 --- a/public/registry/input-27.json +++ b/public/registry/input-27.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-27',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input27Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-27',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input27Component {}" } \ No newline at end of file diff --git a/public/registry/input-28.json b/public/registry/input-28.json index 2bbc5647..13ba09d6 100644 --- a/public/registry/input-28.json +++ b/public/registry/input-28.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-28',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\tInput with overlapping label\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input28Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-28',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\tInput with overlapping label\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input28Component {}" } \ No newline at end of file diff --git a/public/registry/input-29.json b/public/registry/input-29.json index 1bd79f96..3682927b 100644 --- a/public/registry/input-29.json +++ b/public/registry/input-29.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-29',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\tInput with overlapping label\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input29Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-29',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\tInput with overlapping label\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input29Component {}" } \ No newline at end of file diff --git a/public/registry/input-30.json b/public/registry/input-30.json index 68df8a61..3f9125ac 100644 --- a/public/registry/input-30.json +++ b/public/registry/input-30.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-30',\n\timports: [HlmLabel, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input30Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-30',\n\timports: [HlmLabelImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input30Component {}" } \ No newline at end of file diff --git a/public/registry/input-31.json b/public/registry/input-31.json index ab1709e6..5dd722eb 100644 --- a/public/registry/input-31.json +++ b/public/registry/input-31.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-31',\n\timports: [HlmLabel, FormsModule, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{{ computedCharacterCount() }}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input31Component {\n\tprotected readonly maxLength = 50;\n\tprotected readonly value = model('');\n\tprotected readonly computedCharacterCount = computed(() => `${this.value().length}/${this.maxLength}`);\n}" + "content": "import { Component, computed, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-31',\n\timports: [FormsModule, HlmLabelImports, HlmInputGroupImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{{ computedCharacterCount() }}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input31Component {\n\tprotected readonly maxLength = 50;\n\tprotected readonly value = model('');\n\tprotected readonly computedCharacterCount = computed(() => `${this.value().length}/${this.maxLength}`);\n}" } \ No newline at end of file diff --git a/public/registry/input-32.json b/public/registry/input-32.json index f4b7bad2..6a17a103 100644 --- a/public/registry/input-32.json +++ b/public/registry/input-32.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-32',\n\timports: [HlmLabel, HlmInput, FormsModule],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t

\n\t\t\t{{ computedCharacterCount() }}\n\t\t

\n\t`,\n})\nexport class Input32Component {\n\tprotected readonly maxLength = 10;\n\tprotected readonly value = model('');\n\tprotected readonly computedCharacterCount = computed(() => `${this.maxLength - this.value().length} characters left`);\n}" + "content": "import { Component, computed, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-32',\n\timports: [FormsModule, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t

\n\t\t\t{{ computedCharacterCount() }}\n\t\t

\n\t`,\n})\nexport class Input32Component {\n\tprotected readonly maxLength = 10;\n\tprotected readonly value = model('');\n\tprotected readonly computedCharacterCount = computed(() => `${this.maxLength - this.value().length} characters left`);\n}" } \ No newline at end of file diff --git a/public/registry/input-33.json b/public/registry/input-33.json index fc84b219..26cb6eb9 100644 --- a/public/registry/input-33.json +++ b/public/registry/input-33.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateOptionsGenerator } from '@maskito/kit';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-33',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input33Component {\n\tprotected readonly mask: MaskitoOptions = maskitoDateOptionsGenerator({ mode: 'mm/dd/yyyy', separator: '/' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDate } from '@maskito/kit';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-33',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input33Component {\n\tprotected readonly mask: MaskitoOptions = maskitoDate({ mode: 'mm/dd/yyyy', separator: '/' });\n}" } \ No newline at end of file diff --git a/public/registry/input-34.json b/public/registry/input-34.json index f3db27ed..863321e4 100644 --- a/public/registry/input-34.json +++ b/public/registry/input-34.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-34',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input34Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTimeOptionsGenerator({ mode: 'HH:MM AA' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTime } from '@maskito/kit';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-34',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input34Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTime({ mode: 'HH:MM AA' });\n}" } \ No newline at end of file diff --git a/public/registry/input-35.json b/public/registry/input-35.json index 69465795..5544c105 100644 --- a/public/registry/input-35.json +++ b/public/registry/input-35.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-35',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input35Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTimeOptionsGenerator({ mode: 'HH:MM AA' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTime } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-35',\n\timports: [FormsModule, MaskitoDirective, NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input35Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTime({ mode: 'HH:MM AA' });\n}" } \ No newline at end of file diff --git a/public/registry/input-36.json b/public/registry/input-36.json index 5e6783e7..5ce68562 100644 --- a/public/registry/input-36.json +++ b/public/registry/input-36.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-36',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input36Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTimeOptionsGenerator({ mode: 'HH:MM AA' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTime } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-36',\n\timports: [FormsModule, MaskitoDirective, NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input36Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTime({ mode: 'HH:MM AA' });\n}" } \ No newline at end of file diff --git a/public/registry/input-37.json b/public/registry/input-37.json index a6a9096b..9e4b6d7b 100644 --- a/public/registry/input-37.json +++ b/public/registry/input-37.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateTimeOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-37',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, NgIcon, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input37Component {\n\tprotected readonly mask: MaskitoOptions = maskitoDateTimeOptionsGenerator({\n\t\tdateMode: 'mm/dd/yyyy',\n\t\ttimeMode: 'HH:MM',\n\t\tdateTimeSeparator: ' , ',\n\t});\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateTime } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-37',\n\timports: [FormsModule, MaskitoDirective, NgIcon, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input37Component {\n\tprotected readonly mask: MaskitoOptions = maskitoDateTime({\n\t\tdateMode: 'mm/dd/yyyy',\n\t\ttimeMode: 'HH:MM',\n\t\tdateTimeSeparator: ' , ',\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/input-38.json b/public/registry/input-38.json index ce1db43f..4b2a6bfa 100644 --- a/public/registry/input-38.json +++ b/public/registry/input-38.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCalendar } from '@spartan-ng/helm/calendar';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { format, isValid, parse } from 'date-fns';\n\n@Component({\n\tselector: 'sim-input-38',\n\timports: [\n\t\tHlmLabel,\n\t\tFormsModule,\n\t\tMaskitoDirective,\n\t\tNgIcon,\n\t\tHlmCalendar,\n\t\tHlmButtonImports,\n\t\tHlmPopoverImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input38Component {\n\tprotected readonly selectedDate = model(new Date());\n\tprotected readonly mask: MaskitoOptions = maskitoDateOptionsGenerator({ mode: 'mm/dd/yyyy', separator: '/' });\n\n\tprotected inputValue = this.formatDate(this.selectedDate());\n\n\tprotected onInputChange(value: string): void {\n\t\tconst date = this.parseDate(value);\n\t\tif (date && isValid(date)) {\n\t\t\tthis.selectedDate.set(date);\n\t\t}\n\t}\n\n\tprotected onDateChange(date: Date | null, ctx: any): void {\n\t\tthis.selectedDate.set(date);\n\t\tthis.inputValue = this.formatDate(date);\n\t\tctx.close();\n\t}\n\n\tprivate formatDate(date: Date | null): string {\n\t\tif (!date || !isValid(date)) {\n\t\t\treturn '';\n\t\t}\n\t\treturn format(date, 'MM/dd/yyyy');\n\t}\n\n\tprivate parseDate(value: string): Date | null {\n\t\tif (!value || value.length < 10) {\n\t\t\treturn null;\n\t\t}\n\t\ttry {\n\t\t\treturn parse(value, 'MM/dd/yyyy', new Date());\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDate } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCalendarImports } from '@spartan-ng/helm/calendar';\nimport { HlmCardImports } from '@spartan-ng/helm/card';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { format, isValid, parse } from 'date-fns';\n\n@Component({\n\tselector: 'sim-input-38',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tMaskitoDirective,\n\t\tHlmLabelImports,\n\t\tHlmCalendarImports,\n\t\tHlmButtonImports,\n\t\tHlmPopoverImports,\n\t\tHlmInputGroupImports,\n\t\tHlmCardImports,\n\t],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input38Component {\n\tprotected readonly selectedDate = model(new Date());\n\tprotected readonly mask: MaskitoOptions = maskitoDate({ mode: 'mm/dd/yyyy', separator: '/' });\n\n\tprotected inputValue = this.formatDate(this.selectedDate());\n\n\tprotected onInputChange(value: string): void {\n\t\tconst date = this.parseDate(value);\n\t\tif (date && isValid(date)) {\n\t\t\tthis.selectedDate.set(date);\n\t\t}\n\t}\n\n\tprotected onDateChange(date: Date | null, ctx: any): void {\n\t\tthis.selectedDate.set(date);\n\t\tthis.inputValue = this.formatDate(date);\n\t\tctx.close();\n\t}\n\n\tprivate formatDate(date: Date | null): string {\n\t\tif (!date || !isValid(date)) {\n\t\t\treturn '';\n\t\t}\n\t\treturn format(date, 'MM/dd/yyyy');\n\t}\n\n\tprivate parseDate(value: string): Date | null {\n\t\tif (!value || value.length < 10) {\n\t\t\treturn null;\n\t\t}\n\t\ttry {\n\t\t\treturn parse(value, 'MM/dd/yyyy', new Date());\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-39.json b/public/registry/input-39.json index efc3a30e..5cb512b6 100644 --- a/public/registry/input-39.json +++ b/public/registry/input-39.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateRangeOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmCalendarRange } from '@spartan-ng/helm/calendar';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { addDays, format, isValid, parse } from 'date-fns';\n\ntype ParsedDate = { startDate: Date | null; endDate: Date | null };\n\n@Component({\n\tselector: 'sim-input-39',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, NgIcon, HlmCalendarRange, HlmInputGroupImports, HlmPopoverImports],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input39Component {\n\tprotected readonly selectedStartDate = model(new Date());\n\tprotected readonly selectedEndDate = model(addDays(new Date(), 5));\n\tprotected readonly mask: MaskitoOptions = maskitoDateRangeOptionsGenerator({\n\t\tmode: 'mm/dd/yyyy',\n\t\tdateSeparator: '/',\n\t\trangeSeparator: ' - ',\n\t});\n\n\tprotected inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\n\tprotected onInputChange(value: string): void {\n\t\tconst { startDate, endDate } = this.parseDateRange(value);\n\t\tif (startDate && isValid(startDate)) {\n\t\t\tthis.selectedStartDate.set(startDate);\n\t\t}\n\t\tif (endDate && isValid(endDate)) {\n\t\t\tthis.selectedEndDate.set(endDate);\n\t\t}\n\t}\n\n\tprotected onDateRangeChange(ctx: any): void {\n\t\tthis.inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\t\t// Close popover when both dates are selected\n\t\tif (this.selectedStartDate() && this.selectedEndDate()) {\n\t\t\tctx.close();\n\t\t}\n\t}\n\n\tprivate formatDateRange(startDate: Date | null, endDate: Date | null): string {\n\t\tconst start = startDate && isValid(startDate) ? format(startDate, 'MM/dd/yyyy') : '';\n\t\tconst end = endDate && isValid(endDate) ? format(endDate, 'MM/dd/yyyy') : '';\n\n\t\tif (start && end) {\n\t\t\treturn `${start} - ${end}`;\n\t\t} else if (start) {\n\t\t\treturn `${start} - `;\n\t\t}\n\t\treturn '';\n\t}\n\n\tprivate parseDateRange(value: string): ParsedDate {\n\t\tif (!value) {\n\t\t\treturn { startDate: null, endDate: null };\n\t\t}\n\n\t\tconst parts = value.split(' - ');\n\t\tconst startDateStr = parts[0]?.trim();\n\t\tconst endDateStr = parts[1]?.trim();\n\n\t\tlet startDate: Date | null = null;\n\t\tlet endDate: Date | null = null;\n\n\t\tif (startDateStr && startDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tstartDate = parse(startDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(startDate)) {\n\t\t\t\t\tstartDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tstartDate = null;\n\t\t\t}\n\t\t}\n\n\t\tif (endDateStr && endDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tendDate = parse(endDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(endDate)) {\n\t\t\t\t\tendDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tendDate = null;\n\t\t\t}\n\t\t}\n\n\t\treturn { startDate, endDate };\n\t}\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateRange } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmCalendarImports } from '@spartan-ng/helm/calendar';\nimport { HlmCardImports } from '@spartan-ng/helm/card';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { addDays, format, isValid, parse } from 'date-fns';\n\ninterface ParsedDate {\n\tstartDate: Date | null;\n\tendDate: Date | null;\n}\n\n@Component({\n\tselector: 'sim-input-39',\n\timports: [\n\t\tFormsModule,\n\t\tMaskitoDirective,\n\t\tNgIcon,\n\t\tHlmLabelImports,\n\t\tHlmCalendarImports,\n\t\tHlmInputGroupImports,\n\t\tHlmPopoverImports,\n\t\tHlmCardImports,\n\t],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input39Component {\n\tprotected readonly selectedStartDate = model(new Date());\n\tprotected readonly selectedEndDate = model(addDays(new Date(), 5));\n\tprotected readonly mask: MaskitoOptions = maskitoDateRange({\n\t\tmode: 'mm/dd/yyyy',\n\t\tdateSeparator: '/',\n\t\trangeSeparator: ' - ',\n\t});\n\n\tprotected inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\n\tprotected onInputChange(value: string): void {\n\t\tconst { startDate, endDate } = this.parseDateRange(value);\n\t\tif (startDate && isValid(startDate)) {\n\t\t\tthis.selectedStartDate.set(startDate);\n\t\t}\n\t\tif (endDate && isValid(endDate)) {\n\t\t\tthis.selectedEndDate.set(endDate);\n\t\t}\n\t}\n\n\tprotected onDateRangeChange(ctx: any): void {\n\t\tthis.inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\t\t// Close popover when both dates are selected\n\t\tif (this.selectedStartDate() && this.selectedEndDate()) {\n\t\t\tctx.close();\n\t\t}\n\t}\n\n\tprivate formatDateRange(startDate: Date | null, endDate: Date | null): string {\n\t\tconst start = startDate && isValid(startDate) ? format(startDate, 'MM/dd/yyyy') : '';\n\t\tconst end = endDate && isValid(endDate) ? format(endDate, 'MM/dd/yyyy') : '';\n\n\t\tif (start && end) {\n\t\t\treturn `${start} - ${end}`;\n\t\t} else if (start) {\n\t\t\treturn `${start} - `;\n\t\t}\n\t\treturn '';\n\t}\n\n\tprivate parseDateRange(value: string): ParsedDate {\n\t\tif (!value) {\n\t\t\treturn { startDate: null, endDate: null };\n\t\t}\n\n\t\tconst parts = value.split(' - ');\n\t\tconst startDateStr = parts[0]?.trim();\n\t\tconst endDateStr = parts[1]?.trim();\n\n\t\tlet startDate: Date | null = null;\n\t\tlet endDate: Date | null = null;\n\n\t\tif (startDateStr && startDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tstartDate = parse(startDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(startDate)) {\n\t\t\t\t\tstartDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tstartDate = null;\n\t\t\t}\n\t\t}\n\n\t\tif (endDateStr && endDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tendDate = parse(endDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(endDate)) {\n\t\t\t\t\tendDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tendDate = null;\n\t\t\t}\n\t\t}\n\n\t\treturn { startDate, endDate };\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-40.json b/public/registry/input-40.json index 8406f4f0..8190b549 100644 --- a/public/registry/input-40.json +++ b/public/registry/input-40.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateRangeOptionsGenerator } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmCalendarRange } from '@spartan-ng/helm/calendar';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { addDays, format, isValid, parse } from 'date-fns';\n\ntype ParsedDate = { startDate: Date | null; endDate: Date | null };\n\n@Component({\n\tselector: 'sim-input-40',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, NgIcon, HlmCalendarRange, HlmPopoverImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input40Component {\n\treadonly selectedStartDate = model(null);\n\treadonly selectedEndDate = model(null);\n\treadonly mask: MaskitoOptions = maskitoDateRangeOptionsGenerator({\n\t\tmode: 'mm/dd/yyyy',\n\t\tdateSeparator: '/',\n\t\trangeSeparator: ' - ',\n\t});\n\treadonly minDate = new Date();\n\treadonly maxDate = addDays(new Date(), 5);\n\n\tinputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\n\tonInputChange(value: string): void {\n\t\tconst { startDate, endDate } = this.parseDateRange(value);\n\t\tif (startDate && isValid(startDate)) {\n\t\t\tthis.selectedStartDate.set(startDate);\n\t\t}\n\t\tif (endDate && isValid(endDate)) {\n\t\t\tthis.selectedEndDate.set(endDate);\n\t\t}\n\t}\n\n\tonDateRangeChange(ctx: any): void {\n\t\tthis.inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\t\t// Close popover when both dates are selected\n\t\tif (this.selectedStartDate() && this.selectedEndDate()) {\n\t\t\tctx.close();\n\t\t}\n\t}\n\n\tprivate formatDateRange(startDate: Date | null, endDate: Date | null): string {\n\t\tconst start = startDate && isValid(startDate) ? format(startDate, 'MM/dd/yyyy') : '';\n\t\tconst end = endDate && isValid(endDate) ? format(endDate, 'MM/dd/yyyy') : '';\n\n\t\tif (start && end) {\n\t\t\treturn `${start} - ${end}`;\n\t\t} else if (start) {\n\t\t\treturn `${start} - `;\n\t\t}\n\t\treturn '';\n\t}\n\n\tprivate parseDateRange(value: string): ParsedDate {\n\t\tif (!value) {\n\t\t\treturn { startDate: null, endDate: null };\n\t\t}\n\n\t\tconst parts = value.split(' - ');\n\t\tconst startDateStr = parts[0]?.trim();\n\t\tconst endDateStr = parts[1]?.trim();\n\n\t\tlet startDate: Date | null = null;\n\t\tlet endDate: Date | null = null;\n\n\t\tif (startDateStr && startDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tstartDate = parse(startDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(startDate)) {\n\t\t\t\t\tstartDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tstartDate = null;\n\t\t\t}\n\t\t}\n\n\t\tif (endDateStr && endDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tendDate = parse(endDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(endDate)) {\n\t\t\t\t\tendDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tendDate = null;\n\t\t\t}\n\t\t}\n\n\t\treturn { startDate, endDate };\n\t}\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateRange } from '@maskito/kit';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCalendar } from '@ng-icons/lucide';\nimport { HlmCalendarImports } from '@spartan-ng/helm/calendar';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\nimport { addDays, format, isValid, parse } from 'date-fns';\n\ninterface ParsedDate {\n\tstartDate: Date | null;\n\tendDate: Date | null;\n}\n\n@Component({\n\tselector: 'sim-input-40',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tMaskitoDirective,\n\t\tHlmLabelImports,\n\t\tHlmCalendarImports,\n\t\tHlmPopoverImports,\n\t\tHlmInputGroupImports,\n\t],\n\tproviders: [provideIcons({ lucideCalendar })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input40Component {\n\tprotected readonly selectedStartDate = model(null);\n\tprotected readonly selectedEndDate = model(null);\n\tprotected readonly mask: MaskitoOptions = maskitoDateRange({\n\t\tmode: 'mm/dd/yyyy',\n\t\tdateSeparator: '/',\n\t\trangeSeparator: ' - ',\n\t});\n\tprotected readonly minDate: Date = new Date();\n\tprotected readonly maxDate: Date = addDays(new Date(), 5);\n\n\tprotected inputValue: string = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\n\tprotected onInputChange(value: string): void {\n\t\tconst { startDate, endDate } = this.parseDateRange(value);\n\t\tif (startDate && isValid(startDate)) {\n\t\t\tthis.selectedStartDate.set(startDate);\n\t\t}\n\t\tif (endDate && isValid(endDate)) {\n\t\t\tthis.selectedEndDate.set(endDate);\n\t\t}\n\t}\n\n\tprotected onDateRangeChange(ctx: any): void {\n\t\tthis.inputValue = this.formatDateRange(this.selectedStartDate(), this.selectedEndDate());\n\t\t// Close popover when both dates are selected\n\t\tif (this.selectedStartDate() && this.selectedEndDate()) {\n\t\t\tctx.close();\n\t\t}\n\t}\n\n\tprivate formatDateRange(startDate: Date | null, endDate: Date | null): string {\n\t\tconst start = startDate && isValid(startDate) ? format(startDate, 'MM/dd/yyyy') : '';\n\t\tconst end = endDate && isValid(endDate) ? format(endDate, 'MM/dd/yyyy') : '';\n\n\t\tif (start && end) {\n\t\t\treturn `${start} - ${end}`;\n\t\t} else if (start) {\n\t\t\treturn `${start} - `;\n\t\t}\n\t\treturn '';\n\t}\n\n\tprivate parseDateRange(value: string): ParsedDate {\n\t\tif (!value) {\n\t\t\treturn { startDate: null, endDate: null };\n\t\t}\n\n\t\tconst parts = value.split(' - ');\n\t\tconst startDateStr = parts[0]?.trim();\n\t\tconst endDateStr = parts[1]?.trim();\n\n\t\tlet startDate: Date | null = null;\n\t\tlet endDate: Date | null = null;\n\n\t\tif (startDateStr && startDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tstartDate = parse(startDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(startDate)) {\n\t\t\t\t\tstartDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tstartDate = null;\n\t\t\t}\n\t\t}\n\n\t\tif (endDateStr && endDateStr.length >= 10) {\n\t\t\ttry {\n\t\t\t\tendDate = parse(endDateStr, 'MM/dd/yyyy', new Date());\n\t\t\t\tif (!isValid(endDate)) {\n\t\t\t\t\tendDate = null;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\tendDate = null;\n\t\t\t}\n\t\t}\n\n\t\treturn { startDate, endDate };\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-41.json b/public/registry/input-41.json index 1dcb33ad..7ac89702 100644 --- a/public/registry/input-41.json +++ b/public/registry/input-41.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-41',\n\timports: [HlmLabel, HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot, BrnInputOtp, FormsModule],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input41Component {\n\treadonly otpValue = model('');\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-41',\n\timports: [FormsModule, HlmLabelImports, HlmInputOtpImports, BrnInputOtpImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input41Component {\n\tprotected readonly otpValue = model('');\n}" } \ No newline at end of file diff --git a/public/registry/input-42.json b/public/registry/input-42.json index c8791c46..8ebdf29a 100644 --- a/public/registry/input-42.json +++ b/public/registry/input-42.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus } from '@ng-icons/lucide';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-42',\n\timports: [NgIcon, HlmIcon, HlmLabel, HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot, BrnInputOtp, FormsModule],\n\tproviders: [provideIcons({ lucideMinus })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input42Component {\n\treadonly otpValue = model('');\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus } from '@ng-icons/lucide';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-42',\n\timports: [NgIcon, FormsModule, HlmIconImports, HlmLabelImports, HlmInputOtpImports, BrnInputOtpImports],\n\tproviders: [provideIcons({ lucideMinus })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\thlm-input-otp-slot]:first:rounded-l-md [&>hlm-input-otp-slot]:last:rounded-r-md\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input42Component {\n\tprotected readonly otpValue = model('');\n}" } \ No newline at end of file diff --git a/public/registry/input-43.json b/public/registry/input-43.json index c696179a..e346814e 100644 --- a/public/registry/input-43.json +++ b/public/registry/input-43.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtp } from '@spartan-ng/brain/input-otp';\nimport { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-43',\n\timports: [HlmLabel, HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot, BrnInputOtp, FormsModule],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input43Component {\n\treadonly otpValue = model('');\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrnInputOtpImports } from '@spartan-ng/brain/input-otp';\nimport { HlmInputOtpImports } from '@spartan-ng/helm/input-otp';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-43',\n\timports: [FormsModule, HlmLabelImports, HlmInputOtpImports, BrnInputOtpImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input43Component {\n\tprotected readonly otpValue = model('');\n}" } \ No newline at end of file diff --git a/public/registry/input-44.json b/public/registry/input-44.json index 18b463ab..c3481967 100644 --- a/public/registry/input-44.json +++ b/public/registry/input-44.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-44',\n\timports: [HlmLabel, NgIcon, MaskitoDirective, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCreditCard })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input44Component {\n\tpublic readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n}" + "content": "import { Component } from '@angular/core';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCreditCard } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-44',\n\timports: [NgIcon, MaskitoDirective, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCreditCard })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input44Component {\n\tpublic readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t' ',\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t\t/\\d/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/input-45.json b/public/registry/input-45.json index c627df47..c13ccda3 100644 --- a/public/registry/input-45.json +++ b/public/registry/input-45.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateOptionsGenerator } from '@maskito/kit';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-45',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input45Component {\n\tmask: MaskitoOptions = maskitoDateOptionsGenerator({ mode: 'mm/dd', separator: ' / ' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDate } from '@maskito/kit';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-45',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input45Component {\n\tprotected readonly mask: MaskitoOptions = maskitoDate({ mode: 'mm/dd', separator: ' / ' });\n}" } \ No newline at end of file diff --git a/public/registry/input-46.json b/public/registry/input-46.json index c41524cb..1a07d645 100644 --- a/public/registry/input-46.json +++ b/public/registry/input-46.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-46',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input46Component {\n\treadonly cvcMask: MaskitoOptions = {\n\t\tmask: [...new Array(3).fill(/\\d/)],\n\t};\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-46',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input46Component {\n\tprotected readonly cvcMask: MaskitoOptions = {\n\t\tmask: [...new Array(3).fill(/\\d/)],\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/input-47.json b/public/registry/input-47.json index c0c32b1f..f8fba9a9 100644 --- a/public/registry/input-47.json +++ b/public/registry/input-47.json @@ -1,3 +1,3 @@ { - "content": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDateOptionsGenerator } from '@maskito/kit';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-47',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput, ReactiveFormsModule],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input47Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\treadonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\treadonly expiryDateMask: MaskitoOptions = maskitoDateOptionsGenerator({ mode: 'mm/dd', separator: ' / ' });\n\treadonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tpublic form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n}" + "content": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoDate } from '@maskito/kit';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-47',\n\timports: [FormsModule, MaskitoDirective, ReactiveFormsModule, HlmInputImports, HlmLabelImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\tCard details\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input47Component {\n\tprivate readonly _formBuilder = inject(FormBuilder);\n\tprotected readonly cvcMask: MaskitoOptions = {\n\t\tmask: [/\\d/, /\\d/, /\\d/],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [\n\t\t\t({ elementState, data }) => ({\n\t\t\t\telementState,\n\t\t\t\tdata: data.replace(/\\D/g, ''),\n\t\t\t}),\n\t\t],\n\t};\n\tprotected readonly expiryDateMask: MaskitoOptions = maskitoDate({ mode: 'mm/dd', separator: ' / ' });\n\tprotected readonly creditCardMask: MaskitoOptions = {\n\t\tmask: [\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t' ',\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t\t/[0-9]/,\n\t\t],\n\t\toverwriteMode: 'replace',\n\t\tpreprocessors: [({ elementState, data }) => ({ elementState, data: data.replace(/\\D/g, '') })],\n\t};\n\n\tpublic form: FormGroup = this._formBuilder.group(\n\t\t{\n\t\t\tcardNumber: ['', Validators.required],\n\t\t\texpiryDate: ['', Validators.required],\n\t\t\tcvc: ['', Validators.required],\n\t\t},\n\t\t{ updateOn: 'submit' },\n\t);\n}" } \ No newline at end of file diff --git a/public/registry/input-48.json b/public/registry/input-48.json index 64f4b1a9..9fce3c58 100644 --- a/public/registry/input-48.json +++ b/public/registry/input-48.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideEye, lucideEyeOff, lucideX } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-48',\n\timports: [HlmLabel, NgIcon, HlmIcon, FormsModule, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEye, lucideEyeOff, lucideCheck, lucideX })],\n\thost: { class: 'w-full' },\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t

{{ strengthText() }}. Must contain:

\n\t\t
    \n\t\t\t@for (str of strength(); track str.text) {\n\t\t\t\t
  • \n\t\t\t\t\t@if (str.met) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t{{ str.text }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ str.met ? ' - Requirement met' : ' - Requirement not met' }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Input48Component {\n\treadonly visibility = signal(false);\n\treadonly passwordValue = model('');\n\n\treadonly computedIcon = computed(() => (this.visibility() ? 'lucideEyeOff' : 'lucideEye'));\n\treadonly inputType = computed(() => (this.visibility() ? 'text' : 'password'));\n\treadonly strength = computed(() => {\n\t\tconst requirements = [\n\t\t\t{ regex: /.{8,}/, text: 'At least 8 characters' },\n\t\t\t{ regex: /[0-9]/, text: 'At least 1 number' },\n\t\t\t{ regex: /[a-z]/, text: 'At least 1 lowercase letter' },\n\t\t\t{ regex: /[A-Z]/, text: 'At least 1 uppercase letter' },\n\t\t];\n\t\treturn requirements.map((req) => ({\n\t\t\tmet: req.regex.test(this.passwordValue()),\n\t\t\ttext: req.text,\n\t\t}));\n\t});\n\treadonly score = computed(() => this.strength().filter((req) => req.met).length);\n\treadonly strengthText = computed(() => {\n\t\tif (this.score() === 0) {\n\t\t\treturn 'Enter a password';\n\t\t}\n\t\tif (this.score() <= 2) {\n\t\t\treturn 'Weak password';\n\t\t}\n\t\tif (this.score() === 3) {\n\t\t\treturn 'Medium password';\n\t\t}\n\t\treturn 'Strong password';\n\t});\n\treadonly strengthColor = computed(() => {\n\t\tif (this.score() === 0) {\n\t\t\treturn 'bg-border';\n\t\t}\n\t\tif (this.score() <= 1) {\n\t\t\treturn 'bg-red-500';\n\t\t}\n\t\tif (this.score() <= 2) {\n\t\t\treturn 'bg-orange-500';\n\t\t}\n\t\tif (this.score() === 3) {\n\t\t\treturn 'bg-amber-500';\n\t\t}\n\t\treturn 'bg-emerald-500';\n\t});\n\n\thandleUpdateVisibility(): void {\n\t\tthis.visibility.update((v) => !v);\n\t}\n}" + "content": "import { ChangeDetectionStrategy, Component, computed, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideEye, lucideEyeOff, lucideX } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-48',\n\timports: [NgIcon, FormsModule, HlmIconImports, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideEye, lucideEyeOff, lucideCheck, lucideX })],\n\thost: { class: 'w-full' },\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t

{{ strengthText() }}. Must contain:

\n\t\t
    \n\t\t\t@for (str of strength(); track str.text) {\n\t\t\t\t
  • \n\t\t\t\t\t@if (str.met) {\n\t\t\t\t\t\t\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t{{ str.text }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ str.met ? ' - Requirement met' : ' - Requirement not met' }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Input48Component {\n\tprotected readonly visibility = signal(false);\n\tprotected readonly passwordValue = model('');\n\n\tprotected readonly computedIcon = computed(() => (this.visibility() ? 'lucideEyeOff' : 'lucideEye'));\n\tprotected readonly inputType = computed(() => (this.visibility() ? 'text' : 'password'));\n\tprotected readonly strength = computed(() => {\n\t\tconst requirements = [\n\t\t\t{ regex: /.{8,}/, text: 'At least 8 characters' },\n\t\t\t{ regex: /[0-9]/, text: 'At least 1 number' },\n\t\t\t{ regex: /[a-z]/, text: 'At least 1 lowercase letter' },\n\t\t\t{ regex: /[A-Z]/, text: 'At least 1 uppercase letter' },\n\t\t];\n\t\treturn requirements.map((req) => ({\n\t\t\tmet: req.regex.test(this.passwordValue()),\n\t\t\ttext: req.text,\n\t\t}));\n\t});\n\tprotected readonly score = computed(() => this.strength().filter((req) => req.met).length);\n\tprotected readonly strengthText = computed(() => {\n\t\tif (this.score() === 0) {\n\t\t\treturn 'Enter a password';\n\t\t}\n\t\tif (this.score() <= 2) {\n\t\t\treturn 'Weak password';\n\t\t}\n\t\tif (this.score() === 3) {\n\t\t\treturn 'Medium password';\n\t\t}\n\t\treturn 'Strong password';\n\t});\n\tprotected readonly strengthColor = computed(() => {\n\t\tif (this.score() === 0) {\n\t\t\treturn 'bg-border';\n\t\t}\n\t\tif (this.score() <= 1) {\n\t\t\treturn 'bg-red-500';\n\t\t}\n\t\tif (this.score() <= 2) {\n\t\t\treturn 'bg-orange-500';\n\t\t}\n\t\tif (this.score() === 3) {\n\t\t\treturn 'bg-amber-500';\n\t\t}\n\t\treturn 'bg-emerald-500';\n\t});\n\n\tprotected handleUpdateVisibility(): void {\n\t\tthis.visibility.update((v) => !v);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-49.json b/public/registry/input-49.json index 87ce1045..5bffdd8a 100644 --- a/public/registry/input-49.json +++ b/public/registry/input-49.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-49',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input49Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-49',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input49Component {}" } \ No newline at end of file diff --git a/public/registry/input-50.json b/public/registry/input-50.json index bf6b45c5..bde875c1 100644 --- a/public/registry/input-50.json +++ b/public/registry/input-50.json @@ -1,3 +1,3 @@ { - "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-50',\n\timports: [HlmLabel, NgIcon, NgClass, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCopy, lucideCheck })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input50Component {\n\tpublic readonly shareUrl = 'https://simui.dev/JGGH0N';\n\tpublic readonly copied = signal(false);\n\tprivate readonly _clipboard = inject(Clipboard);\n\n\tpublic onCopy(): void {\n\t\tthis.copied.set(true);\n\t\tthis._clipboard.copy(this.shareUrl);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" + "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy } from '@ng-icons/lucide';\nimport { HlmInputGroupImports } from '@spartan-ng/helm/input-group';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-50',\n\timports: [NgIcon, NgClass, HlmLabelImports, HlmInputGroupImports],\n\tproviders: [provideIcons({ lucideCopy, lucideCheck })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Input50Component {\n\tprotected readonly shareUrl = 'https://simui.dev/JGGH0N';\n\tprotected readonly copied = signal(false);\n\tprivate readonly _clipboard = inject(Clipboard);\n\n\tprotected onCopy(): void {\n\t\tthis.copied.set(true);\n\t\tthis._clipboard.copy(this.shareUrl);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-51.json b/public/registry/input-51.json index f519a4db..913b9258 100644 --- a/public/registry/input-51.json +++ b/public/registry/input-51.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-51',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input51Component {\n\treadonly mask: MaskitoOptions = {\n\t\tmask: [/[A-Za-z]/, /[A-Za-z]/, /[0-9]/, /[0-9]/, ' ', /[A-Za-z]/, /[A-Za-z]/, /[A-Za-z]/],\n\t};\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-51',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input51Component {\n\tprotected readonly mask: MaskitoOptions = {\n\t\tmask: [/[A-Za-z]/, /[A-Za-z]/, /[0-9]/, /[0-9]/, ' ', /[A-Za-z]/, /[A-Za-z]/, /[A-Za-z]/],\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/input-52.json b/public/registry/input-52.json index 266d07cc..622d2be6 100644 --- a/public/registry/input-52.json +++ b/public/registry/input-52.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-52',\n\timports: [HlmLabel, FormsModule, MaskitoDirective, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input52Component {\n\tmask: MaskitoOptions = maskitoTimeOptionsGenerator({ mode: 'HH:MM:SS' });\n}" + "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MaskitoOptions } from '@maskito/core';\nimport { maskitoTime } from '@maskito/kit';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-52',\n\timports: [FormsModule, MaskitoDirective, HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t`,\n})\nexport class Input52Component {\n\tprotected readonly mask: MaskitoOptions = maskitoTime({ mode: 'HH:MM:SS' });\n}" } \ No newline at end of file diff --git a/public/registry/input-53.json b/public/registry/input-53.json index 5b3e9d44..a7e67731 100644 --- a/public/registry/input-53.json +++ b/public/registry/input-53.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-53',\n\timports: [HlmLabel, HlmInput],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input53Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\n@Component({\n\tselector: 'sim-input-53',\n\timports: [HlmLabelImports, HlmInputImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\tSimple input\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Input53Component {}" } \ No newline at end of file diff --git a/public/registry/input-54.json b/public/registry/input-54.json index 9ed453a4..0df8884f 100644 --- a/public/registry/input-54.json +++ b/public/registry/input-54.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\ntype TagItem = {\n\tid: number;\n\tvalue: string;\n};\n\n@Component({\n\tselector: 'sim-input-54',\n\timports: [HlmLabel, HlmInput, FormsModule, NgIcon, HlmIcon],\n\tproviders: [provideIcons({ lucideX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t
\n\t\t\t@for (tag of tags(); track tag.id) {\n\t\t\t\t\n\t\t\t\t\t{{ tag.value }}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Input54Component {\n\treadonly value = model('');\n\treadonly tags = signal([\n\t\t{\n\t\t\tid: 1,\n\t\t\tvalue: 'Sport',\n\t\t},\n\t\t{ id: 2, value: 'Music' },\n\t\t{ id: 3, value: 'Movies' },\n\t]);\n\n\taddTag(): void {\n\t\tconst currentTags = this.tags();\n\t\tconst isValueExist = currentTags.some((tag) => tag.value.toLowerCase() === this.value().toLowerCase());\n\t\tif (!isValueExist) {\n\t\t\tconst newTag: TagItem = { id: currentTags.length + 1, value: this.value() };\n\t\t\tthis.tags.set([...currentTags, newTag]);\n\t\t}\n\t\tthis.value.set('');\n\t}\n\n\tremoveTag(id: number): void {\n\t\tthis.tags.set(this.tags().filter((tag) => tag.id !== id));\n\t}\n}" + "content": "import { Component, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\ninterface TagItem {\n\tid: number;\n\tvalue: string;\n}\n\n@Component({\n\tselector: 'sim-input-54',\n\timports: [FormsModule, NgIcon, HlmIconImports, HlmLabelImports, HlmInputImports],\n\tproviders: [provideIcons({ lucideX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t
\n\t\t\t@for (tag of tags(); track tag.id) {\n\t\t\t\t\n\t\t\t\t\t{{ tag.value }}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t
\n\t`,\n})\nexport class Input54Component {\n\tprotected readonly value = model('');\n\tprotected readonly tags = signal([\n\t\t{ id: 1, value: 'Sport' },\n\t\t{ id: 2, value: 'Music' },\n\t\t{ id: 3, value: 'Movies' },\n\t]);\n\n\tprotected addTag(): void {\n\t\tconst currentTags = this.tags();\n\t\tconst isValueExist = currentTags.some((tag) => tag.value.toLowerCase() === this.value().toLowerCase());\n\t\tif (!isValueExist) {\n\t\t\tconst newTag: TagItem = { id: currentTags.length + 1, value: this.value() };\n\t\t\tthis.tags.set([...currentTags, newTag]);\n\t\t}\n\t\tthis.value.set('');\n\t}\n\n\tprotected removeTag(id: number): void {\n\t\tthis.tags.set(this.tags().filter((tag) => tag.id !== id));\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/input-55.json b/public/registry/input-55.json index 961b0e07..b852146b 100644 --- a/public/registry/input-55.json +++ b/public/registry/input-55.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\n\ntype TagItem = {\n\tid: number;\n\tvalue: string;\n};\n\n@Component({\n\tselector: 'sim-input-55',\n\timports: [HlmLabel, FormsModule, NgIcon, HlmIcon],\n\tproviders: [provideIcons({ lucideX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t@for (tag of tags(); track tag.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t{{ tag.value }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input55Component {\n\treadonly value = model('');\n\treadonly tags = signal([\n\t\t{\n\t\t\tid: 1,\n\t\t\tvalue: 'Angular',\n\t\t},\n\t]);\n\n\taddTag(): void {\n\t\tconst currentTags = this.tags();\n\t\tconst isValueExist = currentTags.some((tag) => tag.value.toLowerCase() === this.value().toLowerCase());\n\t\tif (!isValueExist) {\n\t\t\tconst newTag: TagItem = { id: currentTags.length + 1, value: this.value() };\n\t\t\tthis.tags.set([...currentTags, newTag]);\n\t\t}\n\t\tthis.value.set('');\n\t}\n\n\tremoveTag(id: number): void {\n\t\tthis.tags.set(this.tags().filter((tag) => tag.id !== id));\n\t}\n}" + "content": "import { Component, model, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\n\ninterface TagItem {\n\tid: number;\n\tvalue: string;\n}\n\n@Component({\n\tselector: 'sim-input-55',\n\timports: [FormsModule, NgIcon, HlmIconImports, HlmLabelImports],\n\tproviders: [provideIcons({ lucideX })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t@for (tag of tags(); track tag.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t{{ tag.value }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Input55Component {\n\tprotected readonly value = model('');\n\tprotected readonly tags = signal([{ id: 1, value: 'Angular' }]);\n\n\tprotected addTag(): void {\n\t\tconst currentTags = this.tags();\n\t\tconst isValueExist = currentTags.some((tag) => tag.value.toLowerCase() === this.value().toLowerCase());\n\t\tif (!isValueExist) {\n\t\t\tconst newTag: TagItem = { id: currentTags.length + 1, value: this.value() };\n\t\t\tthis.tags.set([...currentTags, newTag]);\n\t\t}\n\t\tthis.value.set('');\n\t}\n\n\tprotected removeTag(id: number): void {\n\t\tthis.tags.set(this.tags().filter((tag) => tag.id !== id));\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-01.json b/public/registry/notification-01.json index fb042bbc..69b45431 100644 --- a/public/registry/notification-01.json +++ b/public/registry/notification-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAlert } from '@spartan-ng/helm/alert';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-01',\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmAlert, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Some information is missing

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification01Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAlertImports } from '@spartan-ng/helm/alert';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-01',\n\timports: [NgIcon, HlmIconImports, HlmAlertImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Some information is missing

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification01Component {}" } \ No newline at end of file diff --git a/public/registry/notification-02.json b/public/registry/notification-02.json index bb06b818..2775a587 100644 --- a/public/registry/notification-02.json +++ b/public/registry/notification-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmAlert } from '@spartan-ng/helm/alert';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-02',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmAlert, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

An error occurred!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification02Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmAlertImports } from '@spartan-ng/helm/alert';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-02',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmAlertImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

An error occurred!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification02Component {}" } \ No newline at end of file diff --git a/public/registry/notification-03.json b/public/registry/notification-03.json index 1847ac51..8f639ef6 100644 --- a/public/registry/notification-03.json +++ b/public/registry/notification-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmAlert } from '@spartan-ng/helm/alert';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-03',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmAlert, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Completed successfully!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification03Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmAlertImports } from '@spartan-ng/helm/alert';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-03',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmAlertImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Completed successfully!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification03Component {}" } \ No newline at end of file diff --git a/public/registry/notification-04.json b/public/registry/notification-04.json index b99246a1..6a85881b 100644 --- a/public/registry/notification-04.json +++ b/public/registry/notification-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAlertImports } from '@spartan-ng/helm/alert';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-04',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmAlertImports, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Just a quick note!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification04Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAlertImports } from '@spartan-ng/helm/alert';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-04',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmAlertImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

Just a quick note!

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification04Component {}" } \ No newline at end of file diff --git a/public/registry/notification-05.json b/public/registry/notification-05.json index d65ff475..e0bc443a 100644 --- a/public/registry/notification-05.json +++ b/public/registry/notification-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-05',\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Some information is missing!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification05Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-05',\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Some information is missing!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification05Component {}" } \ No newline at end of file diff --git a/public/registry/notification-06.json b/public/registry/notification-06.json index 8d23d760..189ad22d 100644 --- a/public/registry/notification-06.json +++ b/public/registry/notification-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-06',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

An error occurred!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification06Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-06',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

An error occurred!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification06Component {}" } \ No newline at end of file diff --git a/public/registry/notification-07.json b/public/registry/notification-07.json index 9c19114b..6fc1a3a9 100644 --- a/public/registry/notification-07.json +++ b/public/registry/notification-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-07',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Completed successfully!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification07Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-07',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Completed successfully!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification07Component {}" } \ No newline at end of file diff --git a/public/registry/notification-08.json b/public/registry/notification-08.json index 9afdfe06..45ebbe46 100644 --- a/public/registry/notification-08.json +++ b/public/registry/notification-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-08',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Just a quick note!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification08Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-08',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Just a quick note!

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification08Component {}" } \ No newline at end of file diff --git a/public/registry/notification-09.json b/public/registry/notification-09.json index c675007f..9b73317b 100644 --- a/public/registry/notification-09.json +++ b/public/registry/notification-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-09',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

You‘ve made changes!

\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification09Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-09',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

You‘ve made changes!

\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification09Component {}" } \ No newline at end of file diff --git a/public/registry/notification-10.json b/public/registry/notification-10.json index a1e36fe3..8029db9a 100644 --- a/public/registry/notification-10.json +++ b/public/registry/notification-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-10',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Message sent

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t·\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification10Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-10',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Message sent

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t·\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification10Component {}" } \ No newline at end of file diff --git a/public/registry/notification-11.json b/public/registry/notification-11.json index 8d7fb8a3..402f27a1 100644 --- a/public/registry/notification-11.json +++ b/public/registry/notification-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-11',\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Something requires your action!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt conveys that a specific action is needed to resolve or address a situation.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification11Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideTriangleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-11',\n\tproviders: [provideIcons({ lucideTriangleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Something requires your action!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt conveys that a specific action is needed to resolve or address a situation.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification11Component {}" } \ No newline at end of file diff --git a/public/registry/notification-12.json b/public/registry/notification-12.json index 8c1d1337..f22acd21 100644 --- a/public/registry/notification-12.json +++ b/public/registry/notification-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-12',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

We couldn‘t complete your request!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt indicates that an issue has prevented the processing of the request.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification12Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-12',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

We couldn‘t complete your request!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt indicates that an issue has prevented the processing of the request.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification12Component {}" } \ No newline at end of file diff --git a/public/registry/notification-13.json b/public/registry/notification-13.json index eabe378a..e9ed32ef 100644 --- a/public/registry/notification-13.json +++ b/public/registry/notification-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-13',\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Your request was completed!

\n\t\t\t\t\t\t\t

It demonstrates that the task or request has been processed.

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification13Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleCheck, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-13',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideCircleCheck, lucideArrowRight, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Your request was completed!

\n\t\t\t\t\t\t\t

It demonstrates that the task or request has been processed.

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification13Component {}" } \ No newline at end of file diff --git a/public/registry/notification-14.json b/public/registry/notification-14.json index 325b7ac0..b6f7b3b2 100644 --- a/public/registry/notification-14.json +++ b/public/registry/notification-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-14',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Here is some helpful information!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt aims to provide clarity or support for better decision-making.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification14Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-14',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Here is some helpful information!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tIt aims to provide clarity or support for better decision-making.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification14Component {}" } \ No newline at end of file diff --git a/public/registry/notification-15.json b/public/registry/notification-15.json index bf1c90d3..7337b36c 100644 --- a/public/registry/notification-15.json +++ b/public/registry/notification-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-15',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

We Value Your Privacy 🍪

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tWe use cookies to improve your experience, and show personalized content.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification15Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-15',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

We Value Your Privacy 🍪

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tWe use cookies to improve your experience, and show personalized content.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification15Component {}" } \ No newline at end of file diff --git a/public/registry/notification-16.json b/public/registry/notification-16.json index d6e8bef4..a24ae32a 100644 --- a/public/registry/notification-16.json +++ b/public/registry/notification-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRefreshCw, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-16',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideRefreshCw,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification16Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRefreshCw, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-16',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideX, lucideRefreshCw })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification16Component {}" } \ No newline at end of file diff --git a/public/registry/notification-17.json b/public/registry/notification-17.json index 78cd2b1b..75ce88e1 100644 --- a/public/registry/notification-17.json +++ b/public/registry/notification-17.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRadio, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-17',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideRadio,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Live in 27 hours

\n\t\t\t\t\t\t

November 20 at 8:00 PM.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification17Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRadio, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-17',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideX, lucideRadio })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Live in 27 hours

\n\t\t\t\t\t\t

November 20 at 8:00 PM.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification17Component {}" } \ No newline at end of file diff --git a/public/registry/notification-18.json b/public/registry/notification-18.json index a9a7539c..9a86b73e 100644 --- a/public/registry/notification-18.json +++ b/public/registry/notification-18.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRefreshCw, lucideX } from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-18',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideRefreshCw,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\tAC\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t• 2 mins ago\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tI’ve finished adding my notes. Happy for us to review whenever you’re ready!\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification18Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideRefreshCw, lucideX } from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-18',\n\tproviders: [provideIcons({ lucideX, lucideRefreshCw })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\tAC\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t• 2 mins ago\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tI’ve finished adding my notes. Happy for us to review whenever you’re ready!\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification18Component {}" } \ No newline at end of file diff --git a/public/registry/notification-19.json b/public/registry/notification-19.json index b34bae91..95ee7983 100644 --- a/public/registry/notification-19.json +++ b/public/registry/notification-19.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-19',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAvatar, HlmAvatarImage],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\t\tAC\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t• 2 mins ago\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tI’ve finished adding my notes. Happy for us to review whenever you’re ready!\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Notification19Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-19',\n\tproviders: [provideIcons({ lucideX })],\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAvatarImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\t\tAC\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t• 2 mins ago\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tI’ve finished adding my notes. Happy for us to review whenever you’re ready!\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification19Component {}" } \ No newline at end of file diff --git a/public/registry/notification-20.json b/public/registry/notification-20.json index 5fa55a27..63297f03 100644 --- a/public/registry/notification-20.json +++ b/public/registry/notification-20.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmAspectRatio } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-20',\n\tproviders: [provideIcons({ lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAspectRatio],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

We’ve just released a new update!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tCheck out the all new dashboard view. Pages and exports now load faster.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\"Mountain\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification20Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-20',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAspectRatioImports],\n\tproviders: [provideIcons({ lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

We’ve just released a new update!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tCheck out the all new dashboard view. Pages and exports now load faster.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\"Mountain\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification20Component {}" } \ No newline at end of file diff --git a/public/registry/notification-21.json b/public/registry/notification-21.json index e0561273..adf97f7e 100644 --- a/public/registry/notification-21.json +++ b/public/registry/notification-21.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAspectRatio } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-21',\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\timports: [NgIcon, HlmIcon, HlmButton, HlmAspectRatio],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

We’ve just released a new update!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tCheck out the all new dashboard view. Pages and exports now load faster.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification21Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight, lucideCircleAlert, lucideX } from '@ng-icons/lucide';\nimport { HlmAspectRatioImports } from '@spartan-ng/helm/aspect-ratio';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-21',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmAspectRatioImports],\n\tproviders: [provideIcons({ lucideCircleAlert, lucideArrowRight, lucideX })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

We’ve just released a new update!

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tCheck out the all new dashboard view. Pages and exports now load faster.\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification21Component {}" } \ No newline at end of file diff --git a/public/registry/notification-22.json b/public/registry/notification-22.json index af20ed2f..beeb8bcc 100644 --- a/public/registry/notification-22.json +++ b/public/registry/notification-22.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-22',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideBox,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification22Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-22',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideX, lucideBox })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification22Component {}" } \ No newline at end of file diff --git a/public/registry/notification-23.json b/public/registry/notification-23.json index 838df031..d1ed699c 100644 --- a/public/registry/notification-23.json +++ b/public/registry/notification-23.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-23',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideBox,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification23Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-23',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideX, lucideBox })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Version 1.4 is now available!

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThis update contains several bug fixes and performance improvements.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification23Component {}" } \ No newline at end of file diff --git a/public/registry/notification-24.json b/public/registry/notification-24.json index eb56ad37..7d97c0e9 100644 --- a/public/registry/notification-24.json +++ b/public/registry/notification-24.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-24',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideBox,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Updates have been made to your profile

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tYour team has made changes to your company profile since you last logged in.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification24Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBox, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-24',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideX, lucideBox })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Updates have been made to your profile

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tYour team has made changes to your company profile since you last logged in.\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification24Component {}" } \ No newline at end of file diff --git a/public/registry/notification-25.json b/public/registry/notification-25.json index 4d84598d..56f18099 100644 --- a/public/registry/notification-25.json +++ b/public/registry/notification-25.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCloudUpload, lucideX } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmProgress, HlmProgressIndicator } from '@spartan-ng/helm/progress';\n\n@Component({\n\tselector: 'sim-notification-25',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideCloudUpload,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton, HlmProgressIndicator, HlmProgress],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Uploading ‘my-avatar.png’

\n\t\t\t\t\t\t

Please wait while we upload your file.

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification25Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCloudUpload, lucideX } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmProgressImports } from '@spartan-ng/helm/progress';\n\n@Component({\n\tselector: 'sim-notification-25',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmProgressImports],\n\tproviders: [provideIcons({ lucideX, lucideCloudUpload })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Uploading ‘my-avatar.png’

\n\t\t\t\t\t\t

Please wait while we upload your file.

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Notification25Component {}" } \ No newline at end of file diff --git a/public/registry/notification-26.json b/public/registry/notification-26.json index c9b7b19c..39d924ab 100644 --- a/public/registry/notification-26.json +++ b/public/registry/notification-26.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCloudUpload, lucideX } from '@ng-icons/lucide';\nimport { BrnProgress, BrnProgressIndicator } from '@spartan-ng/brain/progress';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmProgress, HlmProgressIndicator } from '@spartan-ng/helm/progress';\n\n@Component({\n\tselector: 'sim-notification-26',\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideX,\n\t\t\tlucideCloudUpload,\n\t\t}),\n\t],\n\timports: [NgIcon, HlmIcon, HlmButton, BrnProgress, BrnProgressIndicator, HlmProgressIndicator, HlmProgress],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Uploading ‘my-avatar.png’

\n\t\t\t\t\t\t

Please wait while we upload your file.

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification26Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCloudUpload, lucideX } from '@ng-icons/lucide';\nimport { BrnProgressImports } from '@spartan-ng/brain/progress';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmProgressImports } from '@spartan-ng/helm/progress';\n\n@Component({\n\tselector: 'sim-notification-26',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, BrnProgressImports, HlmProgressImports],\n\tproviders: [provideIcons({ lucideX, lucideCloudUpload })],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Uploading ‘my-avatar.png’

\n\t\t\t\t\t\t

Please wait while we upload your file.

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Notification26Component {}" } \ No newline at end of file diff --git a/public/registry/notification-27.json b/public/registry/notification-27.json index 185347bb..befb94b9 100644 --- a/public/registry/notification-27.json +++ b/public/registry/notification-27.json @@ -1,3 +1,3 @@ { - "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-27',\n\tproviders: [DatePipe],\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification27Component {\n\tdatePipe = inject(DatePipe);\n\n\tshowNotification() {\n\t\ttoast('Your request is created!', {\n\t\t\tdescription: this.datePipe.transform(new Date(), \"EEEE, MMMM dd 'at' hh:mm:ss a\") ?? '',\n\t\t});\n\t}\n}" + "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-27',\n\timports: [HlmButtonImports],\n\tproviders: [DatePipe],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification27Component {\n\tprivate readonly datePipe = inject(DatePipe);\n\n\tprotected showNotification(): void {\n\t\ttoast('Your request is created!', {\n\t\t\tdescription: this.datePipe.transform(new Date(), \"EEEE, MMMM dd 'at' hh:mm:ss a\") ?? '',\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-28.json b/public/registry/notification-28.json index e7387f5c..82697c06 100644 --- a/public/registry/notification-28.json +++ b/public/registry/notification-28.json @@ -1,3 +1,3 @@ { - "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-28',\n\tproviders: [DatePipe],\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification28Component {\n\tdatePipe = inject(DatePipe);\n\n\tshowNotification() {\n\t\ttoast.success('Request is approved', {\n\t\t\tdescription: 'Your manager has approved your request.',\n\t\t});\n\t}\n}" + "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-28',\n\tproviders: [DatePipe],\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification28Component {\n\tprivate readonly datePipe = inject(DatePipe);\n\n\tprotected showNotification(): void {\n\t\ttoast.success('Request is approved', {\n\t\t\tdescription: 'Your manager has approved your request.',\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-29.json b/public/registry/notification-29.json index 0890a4f3..c12c7f3a 100644 --- a/public/registry/notification-29.json +++ b/public/registry/notification-29.json @@ -1,3 +1,3 @@ { - "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-29',\n\tproviders: [DatePipe],\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification29Component {\n\tdatePipe = inject(DatePipe);\n\n\tshowNotification() {\n\t\ttoast('Event has been created', {\n\t\t\taction: {\n\t\t\t\tlabel: 'Undo',\n\t\t\t\tonClick: () => console.log('Undo'),\n\t\t\t},\n\t\t});\n\t}\n}" + "content": "import { DatePipe } from '@angular/common';\nimport { Component, inject } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-29',\n\tproviders: [DatePipe],\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification29Component {\n\tprivate readonly datePipe = inject(DatePipe);\n\n\tprotected showNotification(): void {\n\t\ttoast('Event has been created', {\n\t\t\taction: {\n\t\t\t\tlabel: 'Undo',\n\t\t\t\tonClick: () => console.log('Undo'),\n\t\t\t},\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-30.json b/public/registry/notification-30.json index d25fd239..087e93d5 100644 --- a/public/registry/notification-30.json +++ b/public/registry/notification-30.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-30',\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification30Component {\n\tshowNotification() {\n\t\tconst promise = new Promise<{ name: string }>((resolve, reject) =>\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (Math.random() > 0.5) {\n\t\t\t\t\tresolve({ name: '20 images' });\n\t\t\t\t} else {\n\t\t\t\t\treject();\n\t\t\t\t}\n\t\t\t}, 1500),\n\t\t);\n\n\t\ttoast.promise(promise, {\n\t\t\tloading: 'Uploading...',\n\t\t\tsuccess: (data) => {\n\t\t\t\treturn 'Successfully uploaded ' + data.name;\n\t\t\t},\n\t\t\terror: 'Error... :( Try again!',\n\t\t});\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-30',\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification30Component {\n\tprotected showNotification() {\n\t\tconst promise = new Promise<{ name: string }>((resolve, reject) =>\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (Math.random() > 0.5) {\n\t\t\t\t\tresolve({ name: '20 images' });\n\t\t\t\t} else {\n\t\t\t\t\treject();\n\t\t\t\t}\n\t\t\t}, 1500),\n\t\t);\n\n\t\ttoast.promise(promise, {\n\t\t\tloading: 'Uploading...',\n\t\t\tsuccess: (data) => {\n\t\t\t\treturn 'Successfully uploaded ' + data.name;\n\t\t\t},\n\t\t\terror: 'Error... :( Try again!',\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-31.json b/public/registry/notification-31.json index 1eecb69b..17bc9f96 100644 --- a/public/registry/notification-31.json +++ b/public/registry/notification-31.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-31',\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification31Component {\n\tshowNotification() {\n\t\ttoast.success('Saved your changes', { position: 'bottom-center' });\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-31',\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification31Component {\n\tprotected showNotification(): void {\n\t\ttoast.success('Saved your changes', { position: 'bottom-center' });\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-32.json b/public/registry/notification-32.json index 8a603ac0..7f129483 100644 --- a/public/registry/notification-32.json +++ b/public/registry/notification-32.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-32',\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification32Component {\n\tshowNotification() {\n\t\ttoast.success('Saved your changes', {\n\t\t\tcloseButton: true,\n\t\t});\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\n\n@Component({\n\tselector: 'sim-notification-32',\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification32Component {\n\tprotected showNotification(): void {\n\t\ttoast.success('Saved your changes', {\n\t\t\tcloseButton: true,\n\t\t});\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/notification-33.json b/public/registry/notification-33.json index 67da6891..4ebbed23 100644 --- a/public/registry/notification-33.json +++ b/public/registry/notification-33.json @@ -1,3 +1,3 @@ { - "content": "import { Component, input } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-33',\n\timports: [HlmButton],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification33Component {\n\tnotificationId = 0;\n\n\tshowNotification() {\n\t\ttoast(MacOsNotificationComponent, {\n\t\t\tunstyled: true,\n\t\t\tposition: 'top-right',\n\t\t\tcomponentProps: {\n\t\t\t\tnotificationId: this.notificationId++,\n\t\t\t},\n\t\t});\n\t}\n}\n\n@Component({\n\tselector: 'sim-macos-notification',\n\tproviders: [provideIcons({ lucideX })],\n\timports: [NgIcon, HlmIcon],\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\tAlan Cooper\n\t\t\t\tHey, could you please review my PR again? 😎\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class MacOsNotificationComponent {\n\tnotificationId = input.required();\n\n\tonDismiss() {\n\t\ttoast.dismiss(this.notificationId());\n\t}\n}" + "content": "import { Component, input } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideX } from '@ng-icons/lucide';\nimport { toast } from '@spartan-ng/brain/sonner';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\n\n@Component({\n\tselector: 'sim-notification-33',\n\timports: [HlmButtonImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Notification33Component {\n\tprivate notificationId = 0;\n\n\tprotected showNotification(): void {\n\t\ttoast(MacOsNotificationComponent, {\n\t\t\tunstyled: true,\n\t\t\tposition: 'top-right',\n\t\t\tcomponentProps: {\n\t\t\t\tnotificationId: this.notificationId++,\n\t\t\t},\n\t\t});\n\t}\n}\n\n@Component({\n\tselector: 'sim-macos-notification',\n\timports: [NgIcon, HlmIconImports],\n\tproviders: [provideIcons({ lucideX })],\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\tAlan Cooper\n\t\t\t\tHey, could you please review my PR again? 😎\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class MacOsNotificationComponent {\n\tpublic readonly notificationId = input.required();\n\n\tprotected onDismiss(): void {\n\t\ttoast.dismiss(this.notificationId());\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-02.json b/public/registry/pagination-02.json index 5431241d..1f475018 100644 --- a/public/registry/pagination-02.json +++ b/public/registry/pagination-02.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-02',\n\timports: [HlmPaginationImports],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination02Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-02',\n\timports: [HlmPaginationImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination02Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-03.json b/public/registry/pagination-03.json index a048c3dd..19167ddb 100644 --- a/public/registry/pagination-03.json +++ b/public/registry/pagination-03.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-03',\n\timports: [HlmPaginationImports],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination03Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-03',\n\timports: [HlmPaginationImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination03Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-04.json b/public/registry/pagination-04.json index c6858cd9..e0d20865 100644 --- a/public/registry/pagination-04.json +++ b/public/registry/pagination-04.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-04',\n\timports: [HlmPaginationImports],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination04Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-04',\n\timports: [HlmPaginationImports],\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination04Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-05.json b/public/registry/pagination-05.json index 1099a1c4..4be1d4fe 100644 --- a/public/registry/pagination-05.json +++ b/public/registry/pagination-05.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-05',\n\timports: [HlmPaginationImports],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t

\n\t\t\t\tPage\n\t\t\t\t{{ currentPage() }}\n\t\t\t\tof\n\t\t\t\t{{ totalPages() }}\n\t\t\t

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Pagination05Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { buttonVariants } from '@spartan-ng/helm/button';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-05',\n\timports: [HlmPaginationImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t

\n\t\t\t\tPage\n\t\t\t\t{{ currentPage() }}\n\t\t\t\tof\n\t\t\t\t{{ totalPages() }}\n\t\t\t

\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Pagination05Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t}),\n\t\t\tisDisabled && 'opacity-50 select-none pointer-events-none',\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-06.json b/public/registry/pagination-06.json index b76b18f6..d60f6614 100644 --- a/public/registry/pagination-06.json +++ b/public/registry/pagination-06.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\ntype PaginationReturn = {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n};\n\n@Component({\n\tselector: 'sim-pagination-06',\n\timports: [HlmPaginationImports],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination06Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\ninterface PaginationReturn {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n}\n\n@Component({\n\tselector: 'sim-pagination-06',\n\timports: [HlmPaginationImports],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination06Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/pagination-07.json b/public/registry/pagination-07.json index 98624170..3a492b73 100644 --- a/public/registry/pagination-07.json +++ b/public/registry/pagination-07.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\ntype PaginationReturn = {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n};\n\n@Component({\n\tselector: 'sim-pagination-07',\n\timports: [HlmPaginationImports, HlmButton, NgIcon, HlmIcon],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination07Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { map } from 'rxjs';\n\ninterface PaginationReturn {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n}\n\n@Component({\n\tselector: 'sim-pagination-07',\n\timports: [HlmPaginationImports, HlmButtonImports, NgIcon, HlmIconImports],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination07Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/pagination-08.json b/public/registry/pagination-08.json index 7f842bca..940193f7 100644 --- a/public/registry/pagination-08.json +++ b/public/registry/pagination-08.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';\nimport { buttonVariants, HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\ntype PaginationReturn = {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n};\n\n@Component({\n\tselector: 'sim-pagination-08',\n\timports: [HlmPaginationImports, NgIcon, HlmIcon, HlmButton],\n\tproviders: [provideIcons({ lucideChevronRight, lucideChevronLeft })],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination08Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly computedPreviousClass = computed(() => {\n\t\tconst isDisabled = this.currentPage() <= 1;\n\t\treturn hlm(\n\t\t\tisDisabled ? 'opacity-50 pointer-events-none' : '',\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-e-none',\n\t\t);\n\t});\n\tprotected readonly computedNextClass = computed(() => {\n\t\tconst isDisabled = this.currentPage() >= this.pages.length;\n\t\treturn hlm(\n\t\t\tisDisabled ? 'opacity-50 pointer-events-none' : '',\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-s-none',\n\t\t);\n\t});\n\n\tprotected generatePageStyle(page: number): string {\n\t\treturn hlm('rounded-none shadow-none focus-visible:z-10', this.currentPage() === page ? 'bg-accent ' : '');\n\t}\n\n\tprotected generateEllipsisStyle(): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-none shadow-none focus-visible:z-10',\n\t\t);\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';\nimport { buttonVariants, HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { hlm } from '@spartan-ng/helm/utils';\nimport { map } from 'rxjs';\n\ninterface PaginationReturn {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n}\n\n@Component({\n\tselector: 'sim-pagination-08',\n\timports: [HlmPaginationImports, NgIcon, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideChevronRight, lucideChevronLeft })],\n\thost: { class: 'w-full' },\n\ttemplate: `\n\t\t\n\t`,\n})\nexport class Pagination08Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\tprotected readonly computedPreviousClass = computed(() => {\n\t\tconst isDisabled = this.currentPage() <= 1;\n\t\treturn hlm(\n\t\t\tisDisabled ? 'opacity-50 pointer-events-none' : '',\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-e-none',\n\t\t);\n\t});\n\tprotected readonly computedNextClass = computed(() => {\n\t\tconst isDisabled = this.currentPage() >= this.pages.length;\n\t\treturn hlm(\n\t\t\tisDisabled ? 'opacity-50 pointer-events-none' : '',\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-s-none',\n\t\t);\n\t});\n\n\tprotected generatePageStyle(page: number): string {\n\t\treturn hlm('rounded-none shadow-none focus-visible:z-10', this.currentPage() === page ? 'bg-accent ' : '');\n\t}\n\n\tprotected generateEllipsisStyle(): string {\n\t\treturn hlm(\n\t\t\tbuttonVariants({\n\t\t\t\tvariant: 'outline',\n\t\t\t\tsize: 'icon',\n\t\t\t}),\n\t\t\t'rounded-none shadow-none focus-visible:z-10',\n\t\t);\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/pagination-09.json b/public/registry/pagination-09.json index f2168b25..d4d80d89 100644 --- a/public/registry/pagination-09.json +++ b/public/registry/pagination-09.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, model, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\ntype PaginationReturn = {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n};\n\n@Component({\n\tselector: 'sim-pagination-09',\n\timports: [HlmPaginationImports, HlmSelectImports, FormsModule],\n\thost: { class: 'block w-full' },\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t
\n\t\t\t

\n\t\t\t\tPage\n\t\t\t\t{{ currentPage() }}\n\t\t\t\tof\n\t\t\t\t{{ totalPages() }}\n\t\t\t

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t@for (pageSize of pageSizes; track pageSize) {\n\t\t\t\t\t\t\t{{ pageSize }} / page\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination09Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\n\tprotected readonly itemsPerPage = model(this.pageSizes[1]);\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" + "content": "import { Component, computed, inject, model, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\ninterface PaginationReturn {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n}\n\n@Component({\n\tselector: 'sim-pagination-09',\n\timports: [FormsModule, HlmPaginationImports, HlmSelectImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t

\n\t\t\t\tPage\n\t\t\t\t{{ currentPage() }}\n\t\t\t\tof\n\t\t\t\t{{ totalPages() }}\n\t\t\t

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (pageSize of pageSizes; track pageSize) {\n\t\t\t\t\t\t\t\t{{ pageSize }} / page\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination09Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\n\tprotected readonly itemsPerPage = model(this.pageSizes[1]);\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/pagination-10.json b/public/registry/pagination-10.json index 2f83be0e..667326bd 100644 --- a/public/registry/pagination-10.json +++ b/public/registry/pagination-10.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, model, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-10',\n\timports: [HlmPaginationImports, HlmSelectImports, FormsModule, NgIcon, HlmIcon, HlmButton, HlmLabel],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t@for (pageSize of pageSizes; track pageSize) {\n\t\t\t\t\t\t\t{{ pageSize }}\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t

\n\t\t\t\t1-25\n\t\t\t\tof\n\t\t\t\t100\n\t\t\t

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination10Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\tprotected itemsPerPage = model(this.pageSizes[1]);\n\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" + "content": "import { ChangeDetectionStrategy, Component, computed, inject, model, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-10',\n\timports: [\n\t\tHlmPaginationImports,\n\t\tHlmSelectImports,\n\t\tFormsModule,\n\t\tNgIcon,\n\t\tHlmIconImports,\n\t\tHlmButtonImports,\n\t\tHlmLabelImports,\n\t],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (pageSize of pageSizes; track pageSize) {\n\t\t\t\t\t\t\t\t{{ pageSize }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t

\n\t\t\t\t1-25\n\t\t\t\tof\n\t\t\t\t100\n\t\t\t

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination10Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\tprotected itemsPerPage = model(this.pageSizes[1]);\n\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-11.json b/public/registry/pagination-11.json index 450db600..b8f19a6f 100644 --- a/public/registry/pagination-11.json +++ b/public/registry/pagination-11.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute, RouterLink } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-11',\n\timports: [HlmPaginationImports, HlmSelectImports, FormsModule, NgIcon, HlmIcon, HlmButton, RouterLink],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Pagination11Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute, RouterLink } from '@angular/router';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronFirst, lucideChevronLast } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\n@Component({\n\tselector: 'sim-pagination-11',\n\timports: [FormsModule, NgIcon, RouterLink, HlmPaginationImports, HlmSelectImports, HlmIconImports, HlmButtonImports],\n\tproviders: [provideIcons({ lucideChevronLast, lucideChevronFirst })],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Pagination11Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/pagination-12.json b/public/registry/pagination-12.json index d79b4200..735bec84 100644 --- a/public/registry/pagination-12.json +++ b/public/registry/pagination-12.json @@ -1,3 +1,3 @@ { - "content": "import { ChangeDetectionStrategy, Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\ntype PaginationReturn = {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n};\n\n@Component({\n\tselector: 'sim-pagination-12',\n\timports: [HlmPaginationImports, BrnSelectImports, HlmSelectImports, FormsModule, HlmLabel, HlmInput],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination12Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" + "content": "import { Component, computed, inject, numberAttribute } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { ActivatedRoute } from '@angular/router';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPaginationImports } from '@spartan-ng/helm/pagination';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { map } from 'rxjs';\n\ninterface PaginationReturn {\n\tpages: number[];\n\tshowLeftEllipsis: boolean;\n\tshowRightEllipsis: boolean;\n}\n\n@Component({\n\tselector: 'sim-pagination-12',\n\timports: [FormsModule, HlmPaginationImports, BrnSelectImports, HlmSelectImports, HlmLabelImports, HlmInputImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Pagination12Component {\n\tprivate readonly _route = inject(ActivatedRoute);\n\tprivate readonly _pageQuery = toSignal(\n\t\tthis._route.queryParamMap.pipe(\n\t\t\tmap((params) => {\n\t\t\t\tconst pageQuery = params.get('page');\n\t\t\t\treturn pageQuery ? numberAttribute(pageQuery, 1) : undefined;\n\t\t\t}),\n\t\t),\n\t);\n\n\tprotected readonly pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\tprotected readonly pageSizes = [5, 10, 20, 50, 100];\n\tprotected readonly currentPage = computed(() => this._pageQuery() ?? 1);\n\tprotected readonly totalPages = computed(() => this.pages.length);\n\tprotected readonly computedPreviousClass = computed(() => this.navButtonClass(this.currentPage() <= 1));\n\tprotected readonly computedNextClass = computed(() => this.navButtonClass(this.currentPage() >= this.pages.length));\n\tprotected readonly paginationRange = computed(() =>\n\t\tcalculatePaginationRange(this.currentPage(), this.totalPages(), 5),\n\t);\n\n\tprivate navButtonClass(isDisabled: boolean): string {\n\t\treturn isDisabled ? 'opacity-50 select-none pointer-events-none' : '';\n\t}\n}\n\nfunction calculatePaginationRange(\n\tcurrentPage: number,\n\ttotalPages: number,\n\tpaginationItemsToDisplay: number,\n): PaginationReturn {\n\tconst showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n\tconst showRightEllipsis = totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n\tfunction calculatePaginationRange(): number[] {\n\t\tif (totalPages <= paginationItemsToDisplay) {\n\t\t\treturn Array.from({ length: totalPages }, (_, i) => i + 1);\n\t\t}\n\n\t\tconst halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n\t\tconst initialRange = {\n\t\t\tend: currentPage + halfDisplay,\n\t\t\tstart: currentPage - halfDisplay,\n\t\t};\n\n\t\tconst adjustedRange = {\n\t\t\tend: Math.min(totalPages, initialRange.end),\n\t\t\tstart: Math.max(1, initialRange.start),\n\t\t};\n\n\t\tif (adjustedRange.start === 1) {\n\t\t\tadjustedRange.end = paginationItemsToDisplay;\n\t\t}\n\t\tif (adjustedRange.end === totalPages) {\n\t\t\tadjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n\t\t}\n\n\t\tif (showLeftEllipsis) adjustedRange.start++;\n\t\tif (showRightEllipsis) adjustedRange.end--;\n\n\t\treturn Array.from({ length: adjustedRange.end - adjustedRange.start + 1 }, (_, i) => adjustedRange.start + i);\n\t}\n\n\tconst pages = calculatePaginationRange();\n\n\treturn {\n\t\tpages,\n\t\tshowLeftEllipsis,\n\t\tshowRightEllipsis,\n\t};\n}" } \ No newline at end of file diff --git a/public/registry/popover-01.json b/public/registry/popover-01.json index 2c4296d5..3eb1586a 100644 --- a/public/registry/popover-01.json +++ b/public/registry/popover-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideListFilter } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmCheckbox } from '@spartan-ng/helm/checkbox';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-01',\n\tproviders: [provideIcons({ lucideListFilter })],\n\timports: [FormsModule, HlmButton, HlmCheckbox, HlmIcon, HlmLabel, NgIcon, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Filters
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover01Component {\n\tfilters = {\n\t\trealTime: false,\n\t\ttopChannels: false,\n\t\tlastOrders: false,\n\t\ttotalSpent: false,\n\t};\n\n\tpublic clearFilters(ctx: { close: () => void }): void {\n\t\tthis.filters = {\n\t\t\trealTime: false,\n\t\t\ttopChannels: false,\n\t\t\tlastOrders: false,\n\t\t\ttotalSpent: false,\n\t\t};\n\t\tctx.close();\n\t}\n\n\tpublic applyFilters(ctx: { close: () => void }): void {\n\t\tconsole.log('Applied filters:', this.filters);\n\t\tctx.close();\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideListFilter } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface FilterState {\n\trealTime: boolean;\n\ttopChannels: boolean;\n\tlastOrders: boolean;\n\ttotalSpent: boolean;\n}\n\ntype FilterKey = keyof FilterState;\n\n@Component({\n\tselector: 'sim-popover-01',\n\timports: [\n\t\tNgIcon,\n\t\tFormsModule,\n\t\tHlmButtonImports,\n\t\tHlmCheckboxImports,\n\t\tHlmIconImports,\n\t\tHlmLabelImports,\n\t\tHlmPopoverImports,\n\t],\n\tproviders: [provideIcons({ lucideListFilter })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Filters
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover01Component {\n\tprotected readonly filters = signal({\n\t\trealTime: false,\n\t\ttopChannels: false,\n\t\tlastOrders: false,\n\t\ttotalSpent: false,\n\t});\n\n\tprotected updateFilter(key: FilterKey, checked: boolean): void {\n\t\tthis.filters.update((filters) => ({ ...filters, [key]: checked }));\n\t}\n\n\tpublic clearFilters(ctx: { close: () => void }): void {\n\t\tthis.filters.set({\n\t\t\trealTime: false,\n\t\t\ttopChannels: false,\n\t\t\tlastOrders: false,\n\t\t\ttotalSpent: false,\n\t\t});\n\t\tctx.close();\n\t}\n\n\tpublic applyFilters(ctx: { close: () => void }): void {\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-02.json b/public/registry/popover-02.json index 807f4857..1b5eed5e 100644 --- a/public/registry/popover-02.json +++ b/public/registry/popover-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBell } from '@ng-icons/lucide';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-02',\n\tproviders: [provideIcons({ lucideBell })],\n\timports: [HlmBadge, HlmButton, HlmIcon, NgIcon, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tNotifications\n\t\t\t\t\t@if (unreadCount() > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
    \n\t\t\t\t\t@for (notification of notifications(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t{{ notification.user }}\n\t\t\t\t\t\t\t\t\t{{ notification.action }}\n\t\t\t\t\t\t\t\t\t{{ notification.subject }}\n\t\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    {{ notification.time }}
    \n\t\t\t\t\t\t\t
    \n\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t@if (notification.unread) {\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover02Component {\n\tnotifications = signal([\n\t\t{\n\t\t\tuser: 'Chris Tompson',\n\t\t\taction: 'requested review on',\n\t\t\tsubject: 'PR #42: Feature implementation',\n\t\t\ttime: '15 minutes ago',\n\t\t\tunread: true,\n\t\t},\n\t\t{ user: 'Emma Davis', action: 'shared', subject: 'New component library', time: '45 minutes ago', unread: true },\n\t\t{\n\t\t\tuser: 'James Wilson',\n\t\t\taction: 'assigned you to',\n\t\t\tsubject: 'API integration task',\n\t\t\ttime: '4 hours ago',\n\t\t\tunread: false,\n\t\t},\n\t\t{\n\t\t\tuser: 'Alex Morgan',\n\t\t\taction: 'replied to your comment in',\n\t\t\tsubject: 'Authentication flow',\n\t\t\ttime: '12 hours ago',\n\t\t\tunread: false,\n\t\t},\n\t]);\n\tunreadCount = computed(() => this.notifications().filter((notification) => notification.unread).length);\n\n\tpublic markAsRead(index: number): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification, i) =>\n\t\t\t\ti === index && notification.unread ? { ...notification, unread: false } : notification,\n\t\t\t),\n\t\t);\n\t}\n\n\tpublic markAllAsRead(): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification) => ({\n\t\t\t\t...notification,\n\t\t\t\tunread: false,\n\t\t\t})),\n\t\t);\n\t}\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBell } from '@ng-icons/lucide';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface NotificationItem {\n\tuser: string;\n\taction: string;\n\tsubject: string;\n\ttime: string;\n\tunread: boolean;\n}\n\n@Component({\n\tselector: 'sim-popover-02',\n\timports: [NgIcon, HlmBadgeImports, HlmButtonImports, HlmIconImports, HlmPopoverImports],\n\tproviders: [provideIcons({ lucideBell })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tNotifications\n\t\t\t\t\t@if (unreadCount() > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
    \n\t\t\t\t\t@for (notification of notifications(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t{{ notification.user }}\n\t\t\t\t\t\t\t\t\t{{ notification.action }}\n\t\t\t\t\t\t\t\t\t{{ notification.subject }}\n\t\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    {{ notification.time }}
    \n\t\t\t\t\t\t\t
    \n\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t@if (notification.unread) {\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover02Component {\n\tprotected readonly notifications = signal([\n\t\t{\n\t\t\tuser: 'Chris Tompson',\n\t\t\taction: 'requested review on',\n\t\t\tsubject: 'PR #42: Feature implementation',\n\t\t\ttime: '15 minutes ago',\n\t\t\tunread: true,\n\t\t},\n\t\t{\n\t\t\tuser: 'Emma Davis',\n\t\t\taction: 'shared',\n\t\t\tsubject: 'New component library',\n\t\t\ttime: '45 minutes ago',\n\t\t\tunread: true,\n\t\t},\n\t\t{\n\t\t\tuser: 'James Wilson',\n\t\t\taction: 'assigned you to',\n\t\t\tsubject: 'API integration task',\n\t\t\ttime: '4 hours ago',\n\t\t\tunread: false,\n\t\t},\n\t\t{\n\t\t\tuser: 'Alex Morgan',\n\t\t\taction: 'replied to your comment in',\n\t\t\tsubject: 'Authentication flow',\n\t\t\ttime: '12 hours ago',\n\t\t\tunread: false,\n\t\t},\n\t]);\n\n\tprotected readonly unreadCount = computed(\n\t\t() => this.notifications().filter((notification) => notification.unread).length,\n\t);\n\n\tpublic markAsRead(index: number): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification, i) =>\n\t\t\t\ti === index && notification.unread ? { ...notification, unread: false } : notification,\n\t\t\t),\n\t\t);\n\t}\n\n\tpublic markAllAsRead(): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification) => ({\n\t\t\t\t...notification,\n\t\t\t\tunread: false,\n\t\t\t})),\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-03.json b/public/registry/popover-03.json index 25964779..944bde52 100644 --- a/public/registry/popover-03.json +++ b/public/registry/popover-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBell } from '@ng-icons/lucide';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-03',\n\tproviders: [provideIcons({ lucideBell })],\n\timports: [HlmAvatar, HlmAvatarFallback, HlmAvatarImage, HlmBadge, HlmButton, HlmIcon, NgIcon, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tNotifications\n\t\t\t\t\t@if (unreadCount() > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
    \n\t\t\t\t\t@for (notification of notifications(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ notification.initials }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t{{ notification.user }}\n\t\t\t\t\t\t\t\t\t\t{{ notification.action }}\n\t\t\t\t\t\t\t\t\t\t{{ notification.subject }}.\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    {{ notification.time }}
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t@if (notification.unread) {\n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover03Component {\n\tnotifications = signal([\n\t\t{\n\t\t\tuser: 'Alan Cooper',\n\t\t\taction: 'requested review on',\n\t\t\tsubject: 'PR #42: Feature implementation',\n\t\t\ttime: '15 minutes ago',\n\t\t\tunread: true,\n\t\t\tavatar: 'assets/avatars/alan-cooper.png',\n\t\t\tinitials: 'AC',\n\t\t},\n\t\t{\n\t\t\tuser: 'Alexis Sears',\n\t\t\taction: 'shared',\n\t\t\tsubject: 'New component library',\n\t\t\ttime: '45 minutes ago',\n\t\t\tunread: true,\n\t\t\tavatar: 'assets/avatars/alexis-sears.png',\n\t\t\tinitials: 'AS',\n\t\t},\n\t\t{\n\t\t\tuser: 'Jessica Lambert',\n\t\t\taction: 'assigned you to',\n\t\t\tsubject: 'API integration task',\n\t\t\ttime: '4 hours ago',\n\t\t\tunread: false,\n\t\t\tavatar: 'assets/avatars/jessica-lambert.png',\n\t\t\tinitials: 'JL',\n\t\t},\n\t\t{\n\t\t\tuser: 'Skylar Dias',\n\t\t\taction: 'replied to your comment in',\n\t\t\tsubject: 'Authentication flow',\n\t\t\ttime: '12 hours ago',\n\t\t\tunread: false,\n\t\t\tavatar: 'assets/avatars/skylar-dias.png',\n\t\t\tinitials: 'SD',\n\t\t},\n\t]);\n\n\tunreadCount = computed(() => this.notifications().filter((notification) => notification.unread).length);\n\n\tpublic markAsRead(index: number): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification, i) =>\n\t\t\t\ti === index && notification.unread ? { ...notification, unread: false } : notification,\n\t\t\t),\n\t\t);\n\t}\n\n\tpublic markAllAsRead(): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification) => ({\n\t\t\t\t...notification,\n\t\t\t\tunread: false,\n\t\t\t})),\n\t\t);\n\t}\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBell } from '@ng-icons/lucide';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface NotificationItem {\n\tuser: string;\n\taction: string;\n\tsubject: string;\n\ttime: string;\n\tunread: boolean;\n\tavatar: string;\n\tinitials: string;\n}\n\n@Component({\n\tselector: 'sim-popover-03',\n\timports: [NgIcon, HlmAvatarImports, HlmBadgeImports, HlmButtonImports, HlmIconImports, HlmPopoverImports],\n\tproviders: [provideIcons({ lucideBell })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tNotifications\n\t\t\t\t\t@if (unreadCount() > 0) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
    \n\t\t\t\t\t@for (notification of notifications(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ notification.initials }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t{{ notification.user }}\n\t\t\t\t\t\t\t\t\t\t{{ notification.action }}\n\t\t\t\t\t\t\t\t\t\t{{ notification.subject }}.\n\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    {{ notification.time }}
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t@if (notification.unread) {\n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover03Component {\n\tprotected readonly notifications = signal([\n\t\t{\n\t\t\tuser: 'Alan Cooper',\n\t\t\taction: 'requested review on',\n\t\t\tsubject: 'PR #42: Feature implementation',\n\t\t\ttime: '15 minutes ago',\n\t\t\tunread: true,\n\t\t\tavatar: 'assets/avatars/alan-cooper.png',\n\t\t\tinitials: 'AC',\n\t\t},\n\t\t{\n\t\t\tuser: 'Alexis Sears',\n\t\t\taction: 'shared',\n\t\t\tsubject: 'New component library',\n\t\t\ttime: '45 minutes ago',\n\t\t\tunread: true,\n\t\t\tavatar: 'assets/avatars/alexis-sears.png',\n\t\t\tinitials: 'AS',\n\t\t},\n\t\t{\n\t\t\tuser: 'Jessica Lambert',\n\t\t\taction: 'assigned you to',\n\t\t\tsubject: 'API integration task',\n\t\t\ttime: '4 hours ago',\n\t\t\tunread: false,\n\t\t\tavatar: 'assets/avatars/jessica-lambert.png',\n\t\t\tinitials: 'JL',\n\t\t},\n\t\t{\n\t\t\tuser: 'Skylar Dias',\n\t\t\taction: 'replied to your comment in',\n\t\t\tsubject: 'Authentication flow',\n\t\t\ttime: '12 hours ago',\n\t\t\tunread: false,\n\t\t\tavatar: 'assets/avatars/skylar-dias.png',\n\t\t\tinitials: 'SD',\n\t\t},\n\t]);\n\n\tprotected readonly unreadCount = computed(\n\t\t() => this.notifications().filter((notification) => notification.unread).length,\n\t);\n\n\tpublic markAsRead(index: number): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification, i) =>\n\t\t\t\ti === index && notification.unread ? { ...notification, unread: false } : notification,\n\t\t\t),\n\t\t);\n\t}\n\n\tpublic markAllAsRead(): void {\n\t\tthis.notifications.update((notifications) =>\n\t\t\tnotifications.map((notification) => ({\n\t\t\t\t...notification,\n\t\t\t\tunread: false,\n\t\t\t})),\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-04.json b/public/registry/popover-04.json index 1310284f..e0ddf5cb 100644 --- a/public/registry/popover-04.json +++ b/public/registry/popover-04.json @@ -1,3 +1,3 @@ { - "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCode, lucideCopy, lucideFacebook, lucideLinkedin, lucideMail } from '@ng-icons/lucide';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-04',\n\tproviders: [provideIcons({ lucideCode, lucideCopy, lucideFacebook, lucideLinkedin, lucideMail, lucideCheck })],\n\timports: [NgClass, NgIcon, HlmButton, HlmIcon, HlmInput, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Share code
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover04Component {\n\tpublic readonly shareUrl = 'https://simui.dev/JGGH0N';\n\tpublic copied = signal(false);\n\tprivate _clipboard = inject(Clipboard);\n\n\tpublic onCopy(): void {\n\t\tthis.copied.set(true);\n\t\tthis._clipboard.copy(this.shareUrl);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" + "content": "import { Clipboard } from '@angular/cdk/clipboard';\nimport { NgClass } from '@angular/common';\nimport { Component, inject, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCode, lucideCopy, lucideFacebook, lucideLinkedin, lucideMail } from '@ng-icons/lucide';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-04',\n\timports: [NgClass, NgIcon, HlmButtonImports, HlmIconImports, HlmInputImports, HlmPopoverImports],\n\tproviders: [provideIcons({ lucideCode, lucideCopy, lucideFacebook, lucideLinkedin, lucideMail, lucideCheck })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Share code
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover04Component {\n\tprotected readonly copied = signal(false);\n\tprotected readonly shareUrl = 'https://simui.dev/JGGH0N';\n\tprivate readonly clipboard = inject(Clipboard);\n\n\tpublic onCopy(): void {\n\t\tthis.copied.set(true);\n\t\tthis.clipboard.copy(this.shareUrl);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.copied.set(false);\n\t\t}, 1500);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-05.json b/public/registry/popover-05.json index 910cbcc3..0a1617b0 100644 --- a/public/registry/popover-05.json +++ b/public/registry/popover-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-05',\n\timports: [HlmButton, HlmInput, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Send us feedback
\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover05Component {\n\tpublic close(ctx: { close: () => void }): void {\n\t\tctx.close();\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-05',\n\timports: [HlmButtonImports, HlmInputImports, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Send us feedback
\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover05Component {\n\tprotected close(ctx: { close: () => void }): void {\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-06.json b/public/registry/popover-06.json index 7cef6397..8c2dc204 100644 --- a/public/registry/popover-06.json +++ b/public/registry/popover-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-06',\n\timports: [HlmButton, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{ steps[currentStep()].title }}\n\t\t\t\t
\n\n\t\t\t\t

\n\t\t\t\t\t{{ steps[currentStep()].description }}\n\t\t\t\t

\n\n\t\t\t\t
\n\t\t\t\t\t{{ currentStep() + 1 }}/{{ steps.length }}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover06Component {\n\tpublic readonly steps = [\n\t\t{\n\t\t\ttitle: 'Welcome',\n\t\t\tdescription: 'Get started with a quick overview of the interface.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Quick actions',\n\t\t\tdescription: 'Access your most frequent actions right from here.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Help',\n\t\t\tdescription: 'Need assistance? Visit our Help Center anytime.',\n\t\t},\n\t];\n\tcurrentStep = signal(0);\n\n\tnextStep() {\n\t\tthis.currentStep.update((value: number) => (value + 1) % this.steps.length);\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface PopoverStep {\n\ttitle: string;\n\tdescription: string;\n}\n\n@Component({\n\tselector: 'sim-popover-06',\n\timports: [HlmButtonImports, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{ steps[currentStep()].title }}\n\t\t\t\t
\n\n\t\t\t\t

\n\t\t\t\t\t{{ steps[currentStep()].description }}\n\t\t\t\t

\n\n\t\t\t\t
\n\t\t\t\t\t{{ currentStep() + 1 }}/{{ steps.length }}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover06Component {\n\tprotected readonly steps: PopoverStep[] = [\n\t\t{\n\t\t\ttitle: 'Welcome',\n\t\t\tdescription: 'Get started with a quick overview of the interface.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Quick actions',\n\t\t\tdescription: 'Access your most frequent actions right from here.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Help',\n\t\t\tdescription: 'Need assistance? Visit our Help Center anytime.',\n\t\t},\n\t];\n\tprotected readonly currentStep = signal(0);\n\n\tprotected nextStep(): void {\n\t\tthis.currentStep.update((value: number) => (value + 1) % this.steps.length);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-07.json b/public/registry/popover-07.json index 8490e62f..55a43f29 100644 --- a/public/registry/popover-07.json +++ b/public/registry/popover-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-07',\n\timports: [HlmButton, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\n\t\t\t
\n\t\t\t\t
Choose a color
\n\n\t\t\t\t
\n\t\t\t\t\t@for (color of colors; track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\n\t\t\t\t@if (selectedColor) {\n\t\t\t\t\t
Selected: {{ selectedColor }}
\n\t\t\t\t}\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover07Component {\n\tpublic readonly colors = [\n\t\t'#F87171',\n\t\t'#33BF24',\n\t\t'#60A5FA',\n\t\t'#A78BFA',\n\t\t'#F472B6',\n\t\t'#10B981',\n\t\t'#FACC15',\n\t\t'#F97316',\n\t\t'#ADDCF6',\n\t\t'#000000',\n\t];\n\tselectedColor = '#60A5FA';\n\n\tpublic selectColor(color: string, ctx: { close: () => void }): void {\n\t\tthis.selectedColor = color;\n\t\tctx.close();\n\t}\n}" + "content": "import { Component } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-07',\n\timports: [HlmButtonImports, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
Choose a color
\n\t\t\t\t
\n\t\t\t\t\t@for (color of colors; track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t@if (selectedColor) {\n\t\t\t\t\t
Selected: {{ selectedColor }}
\n\t\t\t\t}\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover07Component {\n\tprotected readonly colors: string[] = [\n\t\t'#F87171',\n\t\t'#33BF24',\n\t\t'#60A5FA',\n\t\t'#A78BFA',\n\t\t'#F472B6',\n\t\t'#10B981',\n\t\t'#FACC15',\n\t\t'#F97316',\n\t\t'#ADDCF6',\n\t\t'#000000',\n\t];\n\tprotected selectedColor = '#60A5FA';\n\n\tpublic selectColor(color: string, ctx: { close: () => void }): void {\n\t\tthis.selectedColor = color;\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-08.json b/public/registry/popover-08.json index 82361361..d5e0b631 100644 --- a/public/registry/popover-08.json +++ b/public/registry/popover-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-08',\n\timports: [HlmButton, HlmAvatar, HlmAvatarImage, HlmAvatarFallback, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Switch account
\n\t\t\t\t\t
    \n\t\t\t\t\t\t@for (user of users; track $index) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ user.initials }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ user.name }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t
\n\n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover08Component {\n\tpublic readonly users = [\n\t\t{ name: 'Alan Cooper', initials: 'AC', avatar: 'assets/avatars/alan-cooper.png' },\n\t\t{ name: 'Skylar Dias', initials: 'JW', avatar: 'assets/avatars/skylar-dias.png' },\n\t\t{ name: 'Alexis Sears', initials: 'AS', avatar: 'assets/avatars/alexis-sears.png' },\n\t];\n\n\tcurrentAccount = signal(this.users[0]);\n\n\tpublic switchUser(user: any, ctx: { close: () => void }): void {\n\t\tthis.currentAccount.set(user);\n\t\tctx.close();\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface User {\n\tname: string;\n\tinitials: string;\n\tavatar: string;\n}\n\n@Component({\n\tselector: 'sim-popover-08',\n\timports: [HlmButtonImports, HlmAvatarImports, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Switch account
\n\t\t\t\t\t
    \n\t\t\t\t\t\t@for (user of users; track $index) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ user.initials }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ user.name }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover08Component {\n\tprotected readonly users: User[] = [\n\t\t{ name: 'Alan Cooper', initials: 'AC', avatar: 'assets/avatars/alan-cooper.png' },\n\t\t{ name: 'Skylar Dias', initials: 'JW', avatar: 'assets/avatars/skylar-dias.png' },\n\t\t{ name: 'Alexis Sears', initials: 'AS', avatar: 'assets/avatars/alexis-sears.png' },\n\t];\n\n\tprotected readonly currentAccount = signal(this.users[0]);\n\n\tpublic switchUser(user: User, ctx: { close: () => void }): void {\n\t\tthis.currentAccount.set(user);\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-09.json b/public/registry/popover-09.json index 6bb9ba2c..da0c1b6e 100644 --- a/public/registry/popover-09.json +++ b/public/registry/popover-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-09',\n\timports: [HlmButton, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{ currentEmoji() }}\n\t\t\t\n\n\t\t\t
\n\t\t\t\t
Pick an emoji
\n\n\t\t\t\t
\n\t\t\t\t\t@for (emoji of emojis; track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ emoji }}\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover09Component {\n\tpublic readonly emojis = ['😀', '😂', '😍', '😎', '🤔', '👍', '🎉', '😢', '🔥', '🙏', '🙌', '🚀'];\n\tcurrentEmoji = signal(this.emojis[0]);\n\n\tpublic selectEmoji(emoji: string, ctx: { close: () => void }): void {\n\t\tthis.currentEmoji.set(emoji);\n\t\tctx.close();\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-09',\n\timports: [HlmButtonImports, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{ currentEmoji() }}\n\t\t\t\n\n\t\t\t
\n\t\t\t\t
Pick an emoji
\n\n\t\t\t\t
\n\t\t\t\t\t@for (emoji of emojis; track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ emoji }}\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover09Component {\n\tprotected readonly emojis = ['😀', '😂', '😍', '😎', '🤔', '👍', '🎉', '😢', '🔥', '🙏', '🙌', '🚀'];\n\tprotected readonly currentEmoji = signal(this.emojis[0]);\n\n\tprotected selectEmoji(emoji: string, ctx: { close: () => void }): void {\n\t\tthis.currentEmoji.set(emoji);\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-10.json b/public/registry/popover-10.json index 60dbae5e..3883d565 100644 --- a/public/registry/popover-10.json +++ b/public/registry/popover-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-10',\n\timports: [HlmButton, HlmInput, FormsModule, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\n\t\t\t
\n\t\t\t\t\n\n\t\t\t\t
    \n\t\t\t\t\t@for (action of filteredActions(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ action.label }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ action.shortcut }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\n\t\t\t\t@if (filteredActions().length === 0) {\n\t\t\t\t\t

No commands found.

\n\t\t\t\t}\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover10Component {\n\tpublic readonly actions = [\n\t\t{ label: 'Open Settings', shortcut: '⌘ + ,' },\n\t\t{ label: 'New File', shortcut: '⌘ + N' },\n\t\t{ label: 'Save Project', shortcut: '⌘ + S' },\n\t\t{ label: 'Search Files', shortcut: '⌘ + P' },\n\t\t{ label: 'Toggle Sidebar', shortcut: '⌘ + B' },\n\t];\n\n\tquery = signal('');\n\tfilteredActions = computed(() => {\n\t\tconst q = this.query().toLowerCase();\n\t\treturn this.actions.filter((a) => a.label.toLowerCase().includes(q));\n\t});\n\n\tpublic execute(action: { label: string }, ctx: { close: () => void }): void {\n\t\tctx.close();\n\t}\n}" + "content": "import { Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface CommandAction {\n\tlabel: string;\n\tshortcut: string;\n}\n\n@Component({\n\tselector: 'sim-popover-10',\n\timports: [HlmButtonImports, HlmInputImports, FormsModule, HlmPopoverImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\n\t\t\t\t
    \n\t\t\t\t\t@for (action of filteredActions(); track $index) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ action.label }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ action.shortcut }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t
\n\n\t\t\t\t@if (filteredActions().length === 0) {\n\t\t\t\t\t

No commands found.

\n\t\t\t\t}\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover10Component {\n\tprotected readonly actions: CommandAction[] = [\n\t\t{ label: 'Open Settings', shortcut: '⌘ + ,' },\n\t\t{ label: 'New File', shortcut: '⌘ + N' },\n\t\t{ label: 'Save Project', shortcut: '⌘ + S' },\n\t\t{ label: 'Search Files', shortcut: '⌘ + P' },\n\t\t{ label: 'Toggle Sidebar', shortcut: '⌘ + B' },\n\t];\n\n\tprotected readonly query = signal('');\n\tprotected readonly filteredActions = computed(() => {\n\t\tconst q = this.query().toLowerCase();\n\t\treturn this.actions.filter((a) => a.label.toLowerCase().includes(q));\n\t});\n\n\tpublic execute(action: CommandAction, ctx: { close: () => void }): void {\n\t\tctx.close();\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/popover-11.json b/public/registry/popover-11.json index 9478edc4..fe4a1253 100644 --- a/public/registry/popover-11.json +++ b/public/registry/popover-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowLeft, lucideArrowRight } from '@ng-icons/lucide';\nimport { BrnAccordionImports } from '@spartan-ng/brain/accordion';\nimport { HlmButton } from '@spartan-ng/helm/button';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\n@Component({\n\tselector: 'sim-popover-11',\n\timports: [NgIcon, HlmIcon, HlmButton, HlmPopoverImports, BrnAccordionImports],\n\tproviders: [provideIcons({ lucideArrowLeft, lucideArrowRight })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{ steps[currentStep()].title }}\n\t\t\t\t
\n\n\t\t\t\t

\n\t\t\t\t\t{{ steps[currentStep()].description }}\n\t\t\t\t

\n\n\t\t\t\t
\n\t\t\t\t\t{{ currentStep() + 1 }}/{{ steps.length }}\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover11Component {\n\tpublic readonly steps = [\n\t\t{\n\t\t\ttitle: 'Welcome',\n\t\t\tdescription:\n\t\t\t\t'Get started with a comprehensive quick overview of the interface and learn about the main features available to you.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Quick actions',\n\t\t\tdescription:\n\t\t\t\t'Access your most frequently used actions and shortcuts right from here to streamline your workflow and boost productivity.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Help',\n\t\t\tdescription:\n\t\t\t\t'Need assistance or have questions about any feature? Visit our comprehensive Help Center anytime for detailed guides.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Settings',\n\t\t\tdescription:\n\t\t\t\t'Customize your experience by adjusting preferences, themes, and configurations to match your working style and needs.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Explore',\n\t\t\tdescription:\n\t\t\t\t'Discover advanced features and hidden gems throughout the application to unlock its full potential and capabilities.',\n\t\t},\n\t];\n\tcurrentStep = signal(0);\n\n\tnextStep() {\n\t\tif (this.currentStep() < this.steps.length - 1) {\n\t\t\tthis.currentStep.update((value: number) => value + 1);\n\t\t}\n\t}\n\n\tpublic previousStep() {\n\t\tif (this.currentStep() > 0) {\n\t\t\tthis.currentStep.update((value: number) => value - 1);\n\t\t}\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowLeft, lucideArrowRight } from '@ng-icons/lucide';\nimport { BrnAccordionImports } from '@spartan-ng/brain/accordion';\nimport { HlmButtonImports } from '@spartan-ng/helm/button';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmPopoverImports } from '@spartan-ng/helm/popover';\n\ninterface PopoverStep {\n\ttitle: string;\n\tdescription: string;\n}\n\n@Component({\n\tselector: 'sim-popover-11',\n\timports: [NgIcon, HlmIconImports, HlmButtonImports, HlmPopoverImports, BrnAccordionImports],\n\tproviders: [provideIcons({ lucideArrowLeft, lucideArrowRight })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{ steps[currentStep()].title }}\n\t\t\t\t
\n\t\t\t\t

\n\t\t\t\t\t{{ steps[currentStep()].description }}\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t{{ currentStep() + 1 }}/{{ steps.length }}\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Popover11Component {\n\tprotected readonly steps: PopoverStep[] = [\n\t\t{\n\t\t\ttitle: 'Welcome',\n\t\t\tdescription:\n\t\t\t\t'Get started with a comprehensive quick overview of the interface and learn about the main features available to you.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Quick actions',\n\t\t\tdescription:\n\t\t\t\t'Access your most frequently used actions and shortcuts right from here to streamline your workflow and boost productivity.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Help',\n\t\t\tdescription:\n\t\t\t\t'Need assistance or have questions about any feature? Visit our comprehensive Help Center anytime for detailed guides.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Settings',\n\t\t\tdescription:\n\t\t\t\t'Customize your experience by adjusting preferences, themes, and configurations to match your working style and needs.',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Explore',\n\t\t\tdescription:\n\t\t\t\t'Discover advanced features and hidden gems throughout the application to unlock its full potential and capabilities.',\n\t\t},\n\t];\n\tprotected readonly currentStep = signal(0);\n\n\tprotected nextStep(): void {\n\t\tif (this.currentStep() < this.steps.length - 1) {\n\t\t\tthis.currentStep.update((value: number) => value + 1);\n\t\t}\n\t}\n\n\tprotected previousStep(): void {\n\t\tif (this.currentStep() > 0) {\n\t\t\tthis.currentStep.update((value: number) => value - 1);\n\t\t}\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/radio-01.json b/public/registry/radio-01.json index 8e9aa9be..a7c815ec 100644 --- a/public/registry/radio-01.json +++ b/public/registry/radio-01.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-01',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio01Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-01',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio01Component {}" } \ No newline at end of file diff --git a/public/registry/radio-02.json b/public/registry/radio-02.json index 71a586f0..654aa452 100644 --- a/public/registry/radio-02.json +++ b/public/registry/radio-02.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-02',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio02Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-02',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio02Component {}" } \ No newline at end of file diff --git a/public/registry/radio-03.json b/public/registry/radio-03.json index e646feb6..bd8ad6cf 100644 --- a/public/registry/radio-03.json +++ b/public/registry/radio-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-03',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio03Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-03',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio03Component {}" } \ No newline at end of file diff --git a/public/registry/radio-04.json b/public/registry/radio-04.json index f6fab012..d97f81cd 100644 --- a/public/registry/radio-04.json +++ b/public/registry/radio-04.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-04',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio04Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-04',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio04Component {}" } \ No newline at end of file diff --git a/public/registry/radio-05.json b/public/registry/radio-05.json index 2d4d53eb..88c26037 100644 --- a/public/registry/radio-05.json +++ b/public/registry/radio-05.json @@ -1,3 +1,3 @@ { - "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInput } from '@spartan-ng/helm/input';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-05',\n\timports: [FormsModule, HlmRadioGroup, HlmRadio, HlmLabel, HlmInput],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio05Component {\n\tpublic value = model('2');\n}" + "content": "import { Component, model } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmInputImports } from '@spartan-ng/helm/input';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-05',\n\timports: [FormsModule, HlmRadioGroupImports, HlmLabelImports, HlmInputImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio05Component {\n\tpublic value = model('2');\n}" } \ No newline at end of file diff --git a/public/registry/radio-06.json b/public/registry/radio-06.json index 5487ef50..731ed551 100644 --- a/public/registry/radio-06.json +++ b/public/registry/radio-06.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { remixStarFill } from '@ng-icons/remixicon';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-06',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, HlmIcon, NgIcon],\n\tproviders: [provideIcons({ remixStarFill })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio06Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { remixStarFill } from '@ng-icons/remixicon';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-06',\n\timports: [HlmRadioGroupImports, HlmLabelImports, HlmIconImports, NgIcon],\n\tproviders: [provideIcons({ remixStarFill })],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio06Component {}" } \ No newline at end of file diff --git a/public/registry/radio-07.json b/public/registry/radio-07.json index 411b86ce..c2899a05 100644 --- a/public/registry/radio-07.json +++ b/public/registry/radio-07.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\nimport { hlm } from '@spartan-ng/helm/utils';\n\ntype OptionColor = 'sky' | 'amber' | 'violet' | 'rose' | 'emerald' | 'orange';\n\n@Component({\n\tselector: 'sim-radio-07',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of colorOptions; track item) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio07Component {\n\tcolorOptions: Array<{\n\t\tvalue: OptionColor;\n\t\tlabel: string;\n\t\tbgClass: string;\n\t}> = [\n\t\t{\n\t\t\tvalue: 'sky',\n\t\t\tlabel: 'Sky',\n\t\t\tbgClass: 'bg-sky-400 data-[state=checked]:bg-sky-400 border-sky-400 data-[state=checked]:border-sky-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'amber',\n\t\t\tlabel: 'Amber',\n\t\t\tbgClass: 'bg-amber-400 data-[state=checked]:bg-amber-400 border-amber-400 data-[state=checked]:border-amber-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'violet',\n\t\t\tlabel: 'Violet',\n\t\t\tbgClass:\n\t\t\t\t'bg-violet-400 data-[state=checked]:bg-violet-400 border-violet-400 data-[state=checked]:border-violet-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'rose',\n\t\t\tlabel: 'Rose',\n\t\t\tbgClass: 'bg-rose-400 data-[state=checked]:bg-rose-400 border-rose-400 data-[state=checked]:border-rose-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'emerald',\n\t\t\tlabel: 'Emerald',\n\t\t\tbgClass:\n\t\t\t\t'bg-emerald-400 data-[state=checked]:bg-emerald-400 border-emerald-400 data-[state=checked]:border-emerald-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'orange',\n\t\t\tlabel: 'Orange',\n\t\t\tbgClass:\n\t\t\t\t'bg-orange-400 data-[state=checked]:bg-orange-400 border-orange-400 data-[state=checked]:border-orange-400',\n\t\t},\n\t];\n\tcolor = signal(this.colorOptions[0]);\n\n\ttagColor(color: string) {\n\t\treturn hlm(\n\t\t\t'ring-offset-background group-[.cdk-keyboard-focused]:ring-ring aspect-square rounded-full border group-[.cdk-keyboard-focused]:ring-2 group-[.cdk-keyboard-focused]:ring-offset-2',\n\t\t\tcolor,\n\t\t);\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\nimport { hlm } from '@spartan-ng/helm/utils';\n\ntype OptionColor = 'sky' | 'amber' | 'violet' | 'rose' | 'emerald' | 'orange';\n\ninterface ColorOption {\n\tvalue: OptionColor;\n\tlabel: string;\n\tbgClass: string;\n}\n\n@Component({\n\tselector: 'sim-radio-07',\n\timports: [HlmRadioGroupImports, HlmLabelImports, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of colorOptions; track item) {\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio07Component {\n\tprotected readonly colorOptions: ColorOption[] = [\n\t\t{\n\t\t\tvalue: 'sky',\n\t\t\tlabel: 'Sky',\n\t\t\tbgClass: 'bg-sky-400 data-[state=checked]:bg-sky-400 border-sky-400 data-[state=checked]:border-sky-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'amber',\n\t\t\tlabel: 'Amber',\n\t\t\tbgClass: 'bg-amber-400 data-[state=checked]:bg-amber-400 border-amber-400 data-[state=checked]:border-amber-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'violet',\n\t\t\tlabel: 'Violet',\n\t\t\tbgClass:\n\t\t\t\t'bg-violet-400 data-[state=checked]:bg-violet-400 border-violet-400 data-[state=checked]:border-violet-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'rose',\n\t\t\tlabel: 'Rose',\n\t\t\tbgClass: 'bg-rose-400 data-[state=checked]:bg-rose-400 border-rose-400 data-[state=checked]:border-rose-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'emerald',\n\t\t\tlabel: 'Emerald',\n\t\t\tbgClass:\n\t\t\t\t'bg-emerald-400 data-[state=checked]:bg-emerald-400 border-emerald-400 data-[state=checked]:border-emerald-400',\n\t\t},\n\t\t{\n\t\t\tvalue: 'orange',\n\t\t\tlabel: 'Orange',\n\t\t\tbgClass:\n\t\t\t\t'bg-orange-400 data-[state=checked]:bg-orange-400 border-orange-400 data-[state=checked]:border-orange-400',\n\t\t},\n\t];\n\tprotected readonly color = signal(this.colorOptions[0]);\n\n\tprotected tagColor(color: string) {\n\t\treturn hlm(\n\t\t\t'ring-offset-background group-[.cdk-keyboard-focused]:ring-ring aspect-square rounded-full border group-[.cdk-keyboard-focused]:ring-2 group-[.cdk-keyboard-focused]:ring-offset-2',\n\t\t\tcolor,\n\t\t);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/radio-08.json b/public/registry/radio-08.json index d294cfd0..fc53db1e 100644 --- a/public/registry/radio-08.json +++ b/public/registry/radio-08.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-08',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLarge\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio08Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-08',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLarge\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio08Component {}" } \ No newline at end of file diff --git a/public/registry/radio-09.json b/public/registry/radio-09.json index 3d7ebbe6..f4f5ba02 100644 --- a/public/registry/radio-09.json +++ b/public/registry/radio-09.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-09',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLarge\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio09Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-09',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSmall\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tLarge\n\t\t\t\t\t\t\t(Sublabel)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

This is a small radio button with a sublabel.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio09Component {}" } \ No newline at end of file diff --git a/public/registry/radio-10.json b/public/registry/radio-10.json index ab0af49b..7acaf072 100644 --- a/public/registry/radio-10.json +++ b/public/registry/radio-10.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-10',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, HlmAvatar, HlmAvatar, HlmAvatarImage, HlmAvatarFallback],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\tAC\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t(FE Dev)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Working on the design system.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Jessica\n\t\t\t\t\t\tJL\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tJessica\n\t\t\t\t\t\t\t(Designer)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Working on Web and App at Acme Corp

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio10Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmAvatarImports } from '@spartan-ng/helm/avatar';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-10',\n\timports: [HlmRadioGroupImports, HlmLabelImports, HlmAvatarImports],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Alan\n\t\t\t\t\t\tAC\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAlan Cooper\n\t\t\t\t\t\t\t(FE Dev)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Working on the design system.

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"Jessica\n\t\t\t\t\t\tJL\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tJessica\n\t\t\t\t\t\t\t(Designer)\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Working on Web and App at Acme Corp

\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio10Component {}" } \ No newline at end of file diff --git a/public/registry/radio-11.json b/public/registry/radio-11.json index 43f86f9a..71c857b2 100644 --- a/public/registry/radio-11.json +++ b/public/registry/radio-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideFrame, lucideHand, lucideMousePointer2, lucidePenTool } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-11',\n\timports: [NgIcon, HlmIcon, HlmRadioGroup, HlmRadio, HlmLabel],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideMousePointer2,\n\t\t\tlucideFrame,\n\t\t\tlucidePenTool,\n\t\t\tlucideHand,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t

{{ item.label }}

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Radio11Component {\n\titems: { id: number; value: string; label: string; icon: string }[] = [\n\t\t{ id: 1, value: 'frame', label: 'Frame', icon: 'lucideFrame' },\n\t\t{ id: 2, value: 'pointer', label: 'Pointer', icon: 'lucideMousePointer2' },\n\t\t{ id: 3, value: 'pen', label: 'Pen', icon: 'lucidePenTool' },\n\t\t{ id: 4, value: 'handTool', label: 'Hand tool', icon: 'lucideHand' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideFrame, lucideHand, lucideMousePointer2, lucidePenTool } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n\ticon: string;\n}\n\n@Component({\n\tselector: 'sim-radio-11',\n\timports: [NgIcon, HlmIconImports, HlmRadioGroupImports, HlmLabelImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideMousePointer2,\n\t\t\tlucideFrame,\n\t\t\tlucidePenTool,\n\t\t\tlucideHand,\n\t\t}),\n\t],\n\ttemplate: `\n\t\t\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t

{{ item.label }}

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Radio11Component {\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 'frame', label: 'Frame', icon: 'lucideFrame' },\n\t\t{ id: 2, value: 'pointer', label: 'Pointer', icon: 'lucideMousePointer2' },\n\t\t{ id: 3, value: 'pen', label: 'Pen', icon: 'lucidePenTool' },\n\t\t{ id: 4, value: 'handTool', label: 'Hand tool', icon: 'lucideHand' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-12.json b/public/registry/radio-12.json index bea9a309..7b0216d2 100644 --- a/public/registry/radio-12.json +++ b/public/registry/radio-12.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideWalletCards } from '@ng-icons/lucide';\nimport { remixAppleFill, remixPaypalFill } from '@ng-icons/remixicon';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-12',\n\timports: [NgIcon, HlmIcon, HlmRadioGroup, HlmRadio, HlmLabel],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideWalletCards,\n\t\t\tremixPaypalFill,\n\t\t\tremixAppleFill,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Radio12Component {\n\titems: { id: number; value: string; label: string; icon: string }[] = [\n\t\t{ id: 1, value: 'card', label: 'Card', icon: 'lucideWalletCards' },\n\t\t{ id: 2, value: 'paypal', label: 'PayPal', icon: 'remixPaypalFill' },\n\t\t{ id: 3, value: 'applePay', label: 'Apple Pay', icon: 'remixAppleFill' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideWalletCards } from '@ng-icons/lucide';\nimport { remixAppleFill, remixPaypalFill } from '@ng-icons/remixicon';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n\ticon: string;\n}\n\n@Component({\n\tselector: 'sim-radio-12',\n\timports: [NgIcon, HlmIconImports, HlmRadioGroupImports, HlmLabelImports],\n\tproviders: [\n\t\tprovideIcons({\n\t\t\tlucideWalletCards,\n\t\t\tremixPaypalFill,\n\t\t\tremixAppleFill,\n\t\t}),\n\t],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\n\t`,\n})\nexport class Radio12Component {\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 'card', label: 'Card', icon: 'lucideWalletCards' },\n\t\t{ id: 2, value: 'paypal', label: 'PayPal', icon: 'remixPaypalFill' },\n\t\t{ id: 3, value: 'applePay', label: 'Apple Pay', icon: 'remixAppleFill' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-13.json b/public/registry/radio-13.json index 07e242e5..ab687151 100644 --- a/public/registry/radio-13.json +++ b/public/registry/radio-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-13',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tCPU Cores Option:\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio13Component {\n\titems: { id: number; value: string; label: string }[] = [\n\t\t{ id: 1, value: '2cpu', label: '2 CPU' },\n\t\t{ id: 2, value: '4cpu', label: '4 CPU' },\n\t\t{ id: 3, value: '6cpu', label: '6 CPU' },\n\t\t{ id: 4, value: '8cpu', label: '8 CPU' },\n\t\t{ id: 5, value: '10cpu', label: '10 CPU' },\n\t\t{ id: 6, value: '12cpu', label: '12 CPU' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n}\n\n@Component({\n\tselector: 'sim-radio-13',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tCPU Cores Option:\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio13Component {\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: '2cpu', label: '2 CPU' },\n\t\t{ id: 2, value: '4cpu', label: '4 CPU' },\n\t\t{ id: 3, value: '6cpu', label: '6 CPU' },\n\t\t{ id: 4, value: '8cpu', label: '8 CPU' },\n\t\t{ id: 5, value: '10cpu', label: '10 CPU' },\n\t\t{ id: 6, value: '12cpu', label: '12 CPU' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-14.json b/public/registry/radio-14.json index 52573beb..06a5e294 100644 --- a/public/registry/radio-14.json +++ b/public/registry/radio-14.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-14',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tServer location\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio14Component {\n\titems: { id: number; value: string; label: string }[] = [\n\t\t{ id: 1, value: 'usa', label: 'USA' },\n\t\t{ id: 2, value: 'uk', label: 'UK' },\n\t\t{ id: 3, value: 'sea', label: 'SEA' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n}\n\n@Component({\n\tselector: 'sim-radio-14',\n\timports: [HlmRadioGroupImports, HlmLabelImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tServer location\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio14Component {\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 'usa', label: 'USA' },\n\t\t{ id: 2, value: 'uk', label: 'UK' },\n\t\t{ id: 3, value: 'sea', label: 'SEA' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-15.json b/public/registry/radio-15.json index b4e3874f..e09996bd 100644 --- a/public/registry/radio-15.json +++ b/public/registry/radio-15.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmBadge } from '@spartan-ng/helm/badge';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-15',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, HlmBadge],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tChoose a plan\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t@if (item.isPopular) {\n\t\t\t\t\t\t\t\t\t\tPopular\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ item.price }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio15Component {\n\titems: { id: number; value: string; label: string; isPopular: boolean; price: string }[] = [\n\t\t{ id: 1, value: 'hobby', label: 'Hobby', isPopular: false, price: '$9/month' },\n\t\t{ id: 2, value: 'plus', label: 'Plus', isPopular: true, price: '$29/month' },\n\t\t{ id: 3, value: 'team', label: 'Team', isPopular: false, price: '$49/month' },\n\t\t{ id: 4, value: 'enterprise', label: 'Enterprise', isPopular: false, price: 'Custom' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { HlmBadgeImports } from '@spartan-ng/helm/badge';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n\tisPopular: boolean;\n\tprice: string;\n}\n\n@Component({\n\tselector: 'sim-radio-15',\n\timports: [HlmRadioGroupImports, HlmLabelImports, HlmBadgeImports],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tChoose a plan\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t@if (item.isPopular) {\n\t\t\t\t\t\t\t\t\t\tPopular\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{{ item.price }}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio15Component {\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 'hobby', label: 'Hobby', isPopular: false, price: '$9/month' },\n\t\t{ id: 2, value: 'plus', label: 'Plus', isPopular: true, price: '$29/month' },\n\t\t{ id: 3, value: 'team', label: 'Team', isPopular: false, price: '$49/month' },\n\t\t{ id: 4, value: 'enterprise', label: 'Enterprise', isPopular: false, price: 'Custom' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-16.json b/public/registry/radio-16.json index 1075be6e..2fc545b6 100644 --- a/public/registry/radio-16.json +++ b/public/registry/radio-16.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { remixStarFill } from '@ng-icons/remixicon';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\nimport { hlm } from '@spartan-ng/helm/utils';\n\n@Component({\n\tselector: 'sim-radio-16',\n\timports: [NgIcon, HlmIcon, HlmRadioGroup, HlmRadio, HlmLabel, FormsModule],\n\tproviders: [provideIcons({ remixStarFill })],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio16Component {\n\trating = signal(3);\n\thoverRating = signal(null);\n\titems: { id: number; value: number }[] = [\n\t\t{ id: 1, value: 1 },\n\t\t{ id: 2, value: 2 },\n\t\t{ id: 3, value: 3 },\n\t\t{ id: 4, value: 4 },\n\t\t{ id: 5, value: 5 },\n\t];\n\n\tcomputedStarClass(value: number) {\n\t\tconst colorStyle = (this.hoverRating() || this.rating()) >= value ? 'text-amber-500' : 'text-input';\n\t\treturn hlm(colorStyle);\n\t}\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { remixStarFill } from '@ng-icons/remixicon';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\nimport { hlm } from '@spartan-ng/helm/utils';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: number;\n}\n\n@Component({\n\tselector: 'sim-radio-16',\n\timports: [NgIcon, HlmIconImports, HlmRadioGroupImports, HlmLabelImports, FormsModule],\n\tproviders: [provideIcons({ remixStarFill })],\n\ttemplate: `\n\t\t
\n\t\t\tRate your experience\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio16Component {\n\tprotected readonly rating = signal(3);\n\tprotected readonly hoverRating = signal(null);\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 1 },\n\t\t{ id: 2, value: 2 },\n\t\t{ id: 3, value: 3 },\n\t\t{ id: 4, value: 4 },\n\t\t{ id: 5, value: 5 },\n\t];\n\n\tprotected computedStarClass(value: number) {\n\t\tconst colorStyle = (this.hoverRating() || this.rating()) >= value ? 'text-amber-500' : 'text-input';\n\t\treturn hlm(colorStyle);\n\t}\n}" } \ No newline at end of file diff --git a/public/registry/radio-17.json b/public/registry/radio-17.json index 69776e9e..d559ed71 100644 --- a/public/registry/radio-17.json +++ b/public/registry/radio-17.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-17',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio17Component {\n\trating = signal(3);\n\titems: { id: number; value: number; label: string }[] = [\n\t\t{ id: 1, value: 1, label: '😠' },\n\t\t{ id: 2, value: 2, label: '😐' },\n\t\t{ id: 3, value: 3, label: '😃' },\n\t\t{ id: 4, value: 4, label: '😍' },\n\t\t{ id: 5, value: 5, label: '🤩' },\n\t];\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: number;\n\tlabel: string;\n}\n\n@Component({\n\tselector: 'sim-radio-17',\n\timports: [HlmRadioGroupImports, HlmLabelImports, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\tHow do you feel?\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio17Component {\n\tprotected readonly rating = signal(3);\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 1, label: '😠' },\n\t\t{ id: 2, value: 2, label: '😐' },\n\t\t{ id: 3, value: 3, label: '😃' },\n\t\t{ id: 4, value: 4, label: '😍' },\n\t\t{ id: 5, value: 5, label: '🤩' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-18.json b/public/registry/radio-18.json index 0a288f60..2bd561fd 100644 --- a/public/registry/radio-18.json +++ b/public/registry/radio-18.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-18',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t😡\n\t\t\t\t\tNot likely\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tVery likely\n\t\t\t\t\t😃\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio18Component {\n\trating = signal(3);\n\titems: { id: number; value: number; label: string }[] = [\n\t\t{ id: 1, value: 1, label: '1' },\n\t\t{ id: 2, value: 2, label: '2' },\n\t\t{ id: 3, value: 3, label: '3' },\n\t\t{ id: 4, value: 4, label: '4' },\n\t\t{ id: 5, value: 5, label: '5' },\n\t];\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: number;\n\tlabel: string;\n}\n\n@Component({\n\tselector: 'sim-radio-18',\n\timports: [HlmRadioGroupImports, HlmLabelImports, FormsModule],\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t@for (item of items; track item) {\n\t\t\t\t\t\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t😡\n\t\t\t\t\tNot likely\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tVery likely\n\t\t\t\t\t😃\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Radio18Component {\n\tprotected readonly rating = signal(3);\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 1, label: '1' },\n\t\t{ id: 2, value: 2, label: '2' },\n\t\t{ id: 3, value: 3, label: '3' },\n\t\t{ id: 4, value: 4, label: '4' },\n\t\t{ id: 5, value: 5, label: '5' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-19.json b/public/registry/radio-19.json index 5a5eba8a..a2f0612a 100644 --- a/public/registry/radio-19.json +++ b/public/registry/radio-19.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideMinus } from '@ng-icons/lucide';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-19',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, FormsModule, NgIcon, HlmIcon],\n\tproviders: [provideIcons({ lucideCheck, lucideMinus })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tChoose a theme\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio19Component {\n\ttheme = signal('light');\n\titems: { id: number; value: string; label: string; thumbnailPath: string }[] = [\n\t\t{ id: 1, value: 'light', label: 'Light', thumbnailPath: '/assets/thumbnails/light-theme.png' },\n\t\t{ id: 2, value: 'dark', label: 'Dark', thumbnailPath: '/assets/thumbnails/dark-theme.png' },\n\t\t{ id: 3, value: 'system', label: 'System', thumbnailPath: '/assets/thumbnails/system-theme.png' },\n\t];\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideMinus } from '@ng-icons/lucide';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\ninterface RadioItem {\n\tid: number;\n\tvalue: string;\n\tlabel: string;\n\tthumbnailPath: string;\n}\n\n@Component({\n\tselector: 'sim-radio-19',\n\timports: [HlmRadioGroupImports, HlmLabelImports, FormsModule, NgIcon, HlmIconImports],\n\tproviders: [provideIcons({ lucideCheck, lucideMinus })],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\tChoose a theme\n\t\t\t\n\t\t\t\t@for (item of items; track item.id) {\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\n\t\t\n\t`,\n})\nexport class Radio19Component {\n\tprotected readonly theme = signal('light');\n\tprotected readonly items: RadioItem[] = [\n\t\t{ id: 1, value: 'light', label: 'Light', thumbnailPath: '/assets/thumbnails/light-theme.png' },\n\t\t{ id: 2, value: 'dark', label: 'Dark', thumbnailPath: '/assets/thumbnails/dark-theme.png' },\n\t\t{ id: 3, value: 'system', label: 'System', thumbnailPath: '/assets/thumbnails/system-theme.png' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/radio-20.json b/public/registry/radio-20.json index 4c185ec0..5dbbbf78 100644 --- a/public/registry/radio-20.json +++ b/public/registry/radio-20.json @@ -1,3 +1,3 @@ { - "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabel } from '@spartan-ng/helm/label';\nimport { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-20',\n\timports: [HlmRadioGroup, HlmRadio, HlmLabel, FormsModule],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tBill Monthly\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tBill Yearly\n\t\t\t\t\t\t-20%\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Radio20Component {\n\tvalue = signal<'month' | 'year'>('month');\n}" + "content": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HlmLabelImports } from '@spartan-ng/helm/label';\nimport { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';\n\n@Component({\n\tselector: 'sim-radio-20',\n\timports: [HlmRadioGroupImports, HlmLabelImports, FormsModule],\n\thost: {\n\t\tclass: 'w-full',\n\t},\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tBill Monthly\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tBill Yearly\n\t\t\t\t\t\t-20%\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n})\nexport class Radio20Component {\n\tvalue = signal<'month' | 'year'>('month');\n}" } \ No newline at end of file diff --git a/public/registry/select-03.json b/public/registry/select-03.json index 5ba96844..0e26b6c6 100644 --- a/public/registry/select-03.json +++ b/public/registry/select-03.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-03',\n\timports: [NgIcon, HlmIcon, HlmNativeSelectImports, HlmFieldImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tselect]:ps-9\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select03Component {}" + "content": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideClock } from '@ng-icons/lucide';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-03',\n\timports: [NgIcon, HlmIconImports, HlmNativeSelectImports, HlmFieldImports],\n\tproviders: [provideIcons({ lucideClock })],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tselect]:ps-9\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select03Component {}" } \ No newline at end of file diff --git a/public/registry/select-11.json b/public/registry/select-11.json index 071a34b2..0e3e5fea 100644 --- a/public/registry/select-11.json +++ b/public/registry/select-11.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed } from '@angular/core';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-11',\n\timports: [HlmNativeSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t@for (timezone of formattedTimezones(); track timezone.label) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select11Component {\n\tprivate readonly timezones = Intl.supportedValuesOf('timeZone');\n\tprotected readonly formattedTimezones = computed(() => {\n\t\treturn this.timezones\n\t\t\t.map((timezone) => {\n\t\t\t\tconst formatter = new Intl.DateTimeFormat('en', {\n\t\t\t\t\ttimeZone: timezone,\n\t\t\t\t\ttimeZoneName: 'shortOffset',\n\t\t\t\t});\n\t\t\t\tconst parts = formatter.formatToParts(new Date());\n\t\t\t\tconst offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';\n\t\t\t\tconst modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;\n\n\t\t\t\treturn {\n\t\t\t\t\tlabel: `(${modifiedOffset}) ${timezone.replaceAll('_', ' ')}`,\n\t\t\t\t\tnumericOffset: Number.parseInt(offset.replace('GMT', '').replace('+', '') || '0', 10),\n\t\t\t\t\tvalue: timezone,\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => a.numericOffset - b.numericOffset);\n\t});\n}" + "content": "import { Component, computed } from '@angular/core';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-11',\n\timports: [HlmNativeSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t@for (timezone of formattedTimezones(); track timezone.label) {\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select11Component {\n\tprivate readonly timezones = Intl.supportedValuesOf('timeZone');\n\n\tprotected readonly formattedTimezones = computed(() => {\n\t\treturn this.timezones\n\t\t\t.map((timezone) => {\n\t\t\t\tconst formatter = new Intl.DateTimeFormat('en', {\n\t\t\t\t\ttimeZone: timezone,\n\t\t\t\t\ttimeZoneName: 'shortOffset',\n\t\t\t\t});\n\t\t\t\tconst parts = formatter.formatToParts(new Date());\n\t\t\t\tconst offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';\n\t\t\t\tconst modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;\n\n\t\t\t\treturn {\n\t\t\t\t\tlabel: `(${modifiedOffset}) ${timezone.replaceAll('_', ' ')}`,\n\t\t\t\t\tnumericOffset: Number.parseInt(offset.replace('GMT', '').replace('+', '') || '0', 10),\n\t\t\t\t\tvalue: timezone,\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => a.numericOffset - b.numericOffset);\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/select-13.json b/public/registry/select-13.json index 17c9064d..7a4379f0 100644 --- a/public/registry/select-13.json +++ b/public/registry/select-13.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-13',\n\timports: [HlmNativeSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\tselect]:border-none [&>select]:bg-transparent [&>select]:focus-visible:ring-0 [&>select]:focus-visible:ring-offset-0\">\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select13Component {}" + "content": "import { Component } from '@angular/core';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';\n\n@Component({\n\tselector: 'sim-select-13',\n\timports: [HlmNativeSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\tselect]:border-none [&>select]:bg-transparent [&>select]:focus-visible:ring-0 [&>select]:focus-visible:ring-offset-0\">\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select13Component {}" } \ No newline at end of file diff --git a/public/registry/select-25.json b/public/registry/select-25.json index 88fd3ebb..533ebaff 100644 --- a/public/registry/select-25.json +++ b/public/registry/select-25.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\n@Component({\n\tselector: 'sim-select-25',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full [&>button]:border-none [&>button]:bg-transparent [&>button]:focus-visible:ring-0 [&>button]:focus-visible:ring-offset-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAngular\n\t\t\t\t\t\t\tReact\n\t\t\t\t\t\t\tVue\n\t\t\t\t\t\t\tSvelte\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select25Component {}" + "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\n@Component({\n\tselector: 'sim-select-25',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full [&>button]:border-none [&>button]:bg-transparent [&>button]:focus-visible:ring-0 [&>button]:focus-visible:ring-offset-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAngular\n\t\t\t\t\t\t\tReact\n\t\t\t\t\t\t\tVue\n\t\t\t\t\t\t\tSvelte\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n})\nexport class Select25Component {}" } \ No newline at end of file diff --git a/public/registry/select-26.json b/public/registry/select-26.json index d1335dbf..a21411fb 100644 --- a/public/registry/select-26.json +++ b/public/registry/select-26.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\n@Component({\n\tselector: 'sim-select-26',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tdiv]:[-ms-overflow-style:none] [&>div]:[-webkit-overflow-scrolling:touch] [&>div]:[scrollbar-width:none] [&>div]:[&::-webkit-scrollbar]:hidden\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (timezone of formattedTimezones(); track timezone.label) {\n\t\t\t\t\t\t\t\t{{ timezone.label }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select26Component {\n\tprivate readonly timezones = Intl.supportedValuesOf('timeZone');\n\tprotected readonly formattedTimezones = computed(() => {\n\t\treturn this.timezones\n\t\t\t.map((timezone) => {\n\t\t\t\tconst formatter = new Intl.DateTimeFormat('en', {\n\t\t\t\t\ttimeZone: timezone,\n\t\t\t\t\ttimeZoneName: 'shortOffset',\n\t\t\t\t});\n\t\t\t\tconst parts = formatter.formatToParts(new Date());\n\t\t\t\tconst offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';\n\t\t\t\tconst modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;\n\n\t\t\t\treturn {\n\t\t\t\t\tlabel: `(${modifiedOffset}) ${timezone.replaceAll('_', ' ')}`,\n\t\t\t\t\tnumericOffset: Number.parseInt(offset.replace('GMT', '').replace('+', '') || '0', 10),\n\t\t\t\t\tvalue: timezone,\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => a.numericOffset - b.numericOffset);\n\t});\n}" + "content": "import { Component, computed } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\n@Component({\n\tselector: 'sim-select-26',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tdiv]:[-ms-overflow-style:none] [&>div]:[-webkit-overflow-scrolling:touch] [&>div]:[scrollbar-width:none] [&>div]:[&::-webkit-scrollbar]:hidden\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (timezone of formattedTimezones(); track timezone.label) {\n\t\t\t\t\t\t\t\t{{ timezone.label }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select26Component {\n\tprivate readonly timezones = Intl.supportedValuesOf('timeZone');\n\n\tprotected readonly formattedTimezones = computed(() => {\n\t\treturn this.timezones\n\t\t\t.map((timezone) => {\n\t\t\t\tconst formatter = new Intl.DateTimeFormat('en', {\n\t\t\t\t\ttimeZone: timezone,\n\t\t\t\t\ttimeZoneName: 'shortOffset',\n\t\t\t\t});\n\t\t\t\tconst parts = formatter.formatToParts(new Date());\n\t\t\t\tconst offset = parts.find((part) => part.type === 'timeZoneName')?.value || '';\n\t\t\t\tconst modifiedOffset = offset === 'GMT' ? 'GMT+0' : offset;\n\n\t\t\t\treturn {\n\t\t\t\t\tlabel: `(${modifiedOffset}) ${timezone.replaceAll('_', ' ')}`,\n\t\t\t\t\tnumericOffset: Number.parseInt(offset.replace('GMT', '').replace('+', '') || '0', 10),\n\t\t\t\t\tvalue: timezone,\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => a.numericOffset - b.numericOffset);\n\t});\n}" } \ No newline at end of file diff --git a/public/registry/select-27.json b/public/registry/select-27.json index a738c450..0facad93 100644 --- a/public/registry/select-27.json +++ b/public/registry/select-27.json @@ -1,3 +1,3 @@ { - "content": "import { Component, input } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { ClassValue } from 'clsx';\n\ntype Option = {\n\tvalue: string;\n\tlabel: string;\n\tdotColor: string;\n};\n\n@Component({\n\tselector: 'sim-status-dot',\n\thost: { class: 'flex items-center gap-2' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class StatusDot {\n\tpublic readonly userClass = input('', { alias: 'class' });\n}\n\n@Component({\n\tselector: 'sim-select-27',\n\timports: [StatusDot, BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select27Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'completed', label: 'Completed', dotColor: 'text-emerald-500' },\n\t\t{ value: 'in-progress', label: 'In Progress', dotColor: 'text-yellow-500' },\n\t\t{ value: 'on-hold', label: 'On Hold', dotColor: 'text-blue-500' },\n\t\t{ value: 'cancelled', label: 'Cancelled', dotColor: 'text-gray-500' },\n\t\t{ value: 'failed', label: 'Failed', dotColor: 'text-red-500' },\n\t];\n}" + "content": "import { Component, input } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { ClassValue } from 'clsx';\n\ninterface Option {\n\tvalue: string;\n\tlabel: string;\n\tdotColor: string;\n}\n\n@Component({\n\tselector: 'sim-status-dot',\n\thost: { class: 'flex items-center gap-2' },\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`,\n})\nexport class StatusDot {\n\tpublic readonly userClass = input('', { alias: 'class' });\n}\n\n@Component({\n\tselector: 'sim-select-27',\n\timports: [StatusDot, BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select27Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'completed', label: 'Completed', dotColor: 'fill-emerald-500' },\n\t\t{ value: 'in-progress', label: 'In Progress', dotColor: 'fill-yellow-500' },\n\t\t{ value: 'on-hold', label: 'On Hold', dotColor: 'fill-blue-500' },\n\t\t{ value: 'cancelled', label: 'Cancelled', dotColor: 'fill-gray-500' },\n\t\t{ value: 'failed', label: 'Failed', dotColor: 'fill-red-500' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/select-28.json b/public/registry/select-28.json index 6c05bb9f..c3217981 100644 --- a/public/registry/select-28.json +++ b/public/registry/select-28.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAlertCircle, lucideCirclePause, lucideClock, lucideSquareCheck, lucideSquareX } from '@ng-icons/lucide';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmIcon } from '@spartan-ng/helm/icon';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ntype Option = {\n\tvalue: string;\n\tlabel: string;\n\ticon: IconType;\n\ticonColor: string;\n};\n\n@Component({\n\tselector: 'sim-select-28',\n\timports: [NgIcon, HlmIcon, BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\tproviders: [provideIcons({ lucideSquareCheck, lucideClock, lucideCirclePause, lucideSquareX, lucideAlertCircle })],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select28Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'completed', label: 'Completed', icon: 'lucideSquareCheck', iconColor: 'text-emerald-500' },\n\t\t{ value: 'in-progress', label: 'In Progress', icon: 'lucideClock', iconColor: 'text-yellow-500' },\n\t\t{ value: 'on-hold', label: 'On Hold', icon: 'lucideCirclePause', iconColor: 'text-blue-500' },\n\t\t{ value: 'cancelled', label: 'Cancelled', icon: 'lucideSquareX', iconColor: 'text-gray-500' },\n\t\t{ value: 'failed', label: 'Failed', icon: 'lucideAlertCircle', iconColor: 'text-red-500' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAlertCircle, lucideCirclePause, lucideClock, lucideSquareCheck, lucideSquareX } from '@ng-icons/lucide';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmIconImports } from '@spartan-ng/helm/icon';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ninterface Option {\n\tvalue: string;\n\tlabel: string;\n\ticon: IconType;\n\ticonColor: string;\n}\n\n@Component({\n\tselector: 'sim-select-28',\n\timports: [NgIcon, HlmIconImports, BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\tproviders: [provideIcons({ lucideSquareCheck, lucideClock, lucideCirclePause, lucideSquareX, lucideAlertCircle })],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select28Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'completed', label: 'Completed', icon: 'lucideSquareCheck', iconColor: 'text-emerald-500' },\n\t\t{ value: 'in-progress', label: 'In Progress', icon: 'lucideClock', iconColor: 'text-yellow-500' },\n\t\t{ value: 'on-hold', label: 'On Hold', icon: 'lucideCirclePause', iconColor: 'text-blue-500' },\n\t\t{ value: 'cancelled', label: 'Cancelled', icon: 'lucideSquareX', iconColor: 'text-gray-500' },\n\t\t{ value: 'failed', label: 'Failed', icon: 'lucideAlertCircle', iconColor: 'text-red-500' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/select-29.json b/public/registry/select-29.json index af115365..083057a8 100644 --- a/public/registry/select-29.json +++ b/public/registry/select-29.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ntype Option = {\n\tlabel: string;\n\tdescription: string;\n};\n\n@Component({\n\tselector: 'sim-select-29',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{{ value.flag }}\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\tdiv]:[-ms-overflow-style:none] [&>div]:[-webkit-overflow-scrolling:touch] [&>div]:[scrollbar-width:none] [&>div]:[&::-webkit-scrollbar]:hidden\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t@for (country of countries; track country.continent) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ country.continent }}\n\t\t\t\t\t\t\t\t@for (item of country.items; track item.label) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ item.flag }}\n\t\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select29Component {\n\tprotected readonly countries = [\n\t\t{\n\t\t\tcontinent: 'America',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇺🇸', label: 'United States', value: '1' },\n\t\t\t\t{ flag: '🇨🇦', label: 'Canada', value: '2' },\n\t\t\t\t{ flag: '🇲🇽', label: 'Mexico', value: '3' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Africa',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇿🇦', label: 'South Africa', value: '4' },\n\t\t\t\t{ flag: '🇳🇬', label: 'Nigeria', value: '5' },\n\t\t\t\t{ flag: '🇲🇦', label: 'Morocco', value: '6' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Asia',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇻🇳', label: 'Vietnam', value: '7' },\n\t\t\t\t{ flag: '🇯🇵', label: 'Japan', value: '8' },\n\t\t\t\t{ flag: '🇮🇳', label: 'India', value: '9' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Europe',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇬🇧', label: 'United Kingdom', value: '10' },\n\t\t\t\t{ flag: '🇫🇷', label: 'France', value: '11' },\n\t\t\t\t{ flag: '🇩🇪', label: 'Germany', value: '12' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Oceania',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇦🇺', label: 'Australia', value: '13' },\n\t\t\t\t{ flag: '🇳🇿', label: 'New Zealand', value: '14' },\n\t\t\t],\n\t\t},\n\t];\n\tprotected readonly selectedCountry = this.countries[2].items[0];\n}" + "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ninterface CountryItem {\n\tflag: string;\n\tlabel: string;\n\tvalue: string;\n}\n\ninterface CountryGroup {\n\tcontinent: string;\n\titems: CountryItem[];\n}\n\n@Component({\n\tselector: 'sim-select-29',\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\thost: { class: 'block w-full' },\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{{ value.flag }}\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\tdiv]:[-ms-overflow-style:none] [&>div]:[-webkit-overflow-scrolling:touch] [&>div]:[scrollbar-width:none] [&>div]:[&::-webkit-scrollbar]:hidden\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t@for (country of countries; track country.continent) {\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ country.continent }}\n\t\t\t\t\t\t\t\t@for (item of country.items; track item.label) {\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{{ item.flag }}\n\t\t\t\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select29Component {\n\tprotected readonly countries: CountryGroup[] = [\n\t\t{\n\t\t\tcontinent: 'America',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇺🇸', label: 'United States', value: '1' },\n\t\t\t\t{ flag: '🇨🇦', label: 'Canada', value: '2' },\n\t\t\t\t{ flag: '🇲🇽', label: 'Mexico', value: '3' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Africa',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇿🇦', label: 'South Africa', value: '4' },\n\t\t\t\t{ flag: '🇳🇬', label: 'Nigeria', value: '5' },\n\t\t\t\t{ flag: '🇲🇦', label: 'Morocco', value: '6' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Asia',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇻🇳', label: 'Vietnam', value: '7' },\n\t\t\t\t{ flag: '🇯🇵', label: 'Japan', value: '8' },\n\t\t\t\t{ flag: '🇮🇳', label: 'India', value: '9' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Europe',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇬🇧', label: 'United Kingdom', value: '10' },\n\t\t\t\t{ flag: '🇫🇷', label: 'France', value: '11' },\n\t\t\t\t{ flag: '🇩🇪', label: 'Germany', value: '12' },\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tcontinent: 'Oceania',\n\t\t\titems: [\n\t\t\t\t{ flag: '🇦🇺', label: 'Australia', value: '13' },\n\t\t\t\t{ flag: '🇳🇿', label: 'New Zealand', value: '14' },\n\t\t\t],\n\t\t},\n\t];\n\tprotected readonly selectedCountry = this.countries[2].items[0];\n}" } \ No newline at end of file diff --git a/public/registry/select-30.json b/public/registry/select-30.json index 79e8363c..e8ad299d 100644 --- a/public/registry/select-30.json +++ b/public/registry/select-30.json @@ -1,3 +1,3 @@ { - "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ntype Option = {\n\tvalue: string;\n\tlabel: string;\n\tavatarUrl: string;\n};\n\n@Component({\n\tselector: 'sim-select-30',\n\thost: { class: 'block w-full' },\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"{{\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tMarketing team\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\"{{\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select30Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'user1', label: 'Candice Wu', avatarUrl: 'candice-wu.jpg' },\n\t\t{ value: 'user2', label: 'Olivia Rhye', avatarUrl: 'olivia-rhye.jpg' },\n\t\t{ value: 'user3', label: 'Phoenix Baker', avatarUrl: 'phoenix-baker.jpg' },\n\t];\n}" + "content": "import { Component } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\n\ninterface Option {\n\tvalue: string;\n\tlabel: string;\n\tavatarUrl: string;\n}\n\n@Component({\n\tselector: 'sim-select-30',\n\thost: { class: 'block w-full' },\n\timports: [BrnSelectImports, HlmSelectImports, HlmFieldImports],\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tbutton]:w-full\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"{{\n\t\t\t\t\t\t\t{{ value.label }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tspan>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tMarketing team\n\t\t\t\t\t\t\t@for (option of options; track option.label) {\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\"{{\n\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n})\nexport class Select30Component {\n\tprotected readonly options: Option[] = [\n\t\t{ value: 'user1', label: 'Candice Wu', avatarUrl: 'candice-wu.jpg' },\n\t\t{ value: 'user2', label: 'Olivia Rhye', avatarUrl: 'olivia-rhye.jpg' },\n\t\t{ value: 'user3', label: 'Phoenix Baker', avatarUrl: 'phoenix-baker.jpg' },\n\t];\n}" } \ No newline at end of file diff --git a/public/registry/select-31.json b/public/registry/select-31.json index bebb10b2..2de07a1a 100644 --- a/public/registry/select-31.json +++ b/public/registry/select-31.json @@ -1,3 +1,3 @@ { - "content": "import { Component, computed, input } from '@angular/core';\nimport { BrnSelectImports } from '@spartan-ng/brain/select';\nimport { HlmFieldImports } from '@spartan-ng/helm/field';\nimport { HlmSelectImports } from '@spartan-ng/helm/select';\nimport { hlm } from '@spartan-ng/helm/utils';\n\ntype Option = {\n\tvalue: string;\n\tlabel: string;\n\tstyle: string;\n};\n\n@Component({\n\tselector: 'sim-placeholder-avatar',\n\ttemplate: `\n\t\t{{ avatarText() }}\n\t`,\n})\nexport class PlaceholderAvatar {\n\tpublic readonly option = input.required