import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { ShoelaceStyleAngularModule } from "shoelace-style-angular";

@NgModule({
    imports: [
        BrowserModule,
        // provide angular outputs for shoelace events:
        ShoelaceStyleAngularModule,
    ],
    // required 'cause shoelace based on Web Components:
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

import { setBasePath } from "@shoelace-style/shoelace";

setBasePath("/assets/shoelace");

import { Component } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: "app-greeter",
    template: `
        <sl-form [data]="form" (submit)="isDialogOpen = true">
            <sl-input name="username" label="Enter your name"></sl-input>
            <br />
            <sl-button submit [disabled]="form.invalid">Say Hello</sl-button>
        </sl-form>

        <sl-dialog label="Greetings" [(open)]="isDialogOpen">
            Hello,
            {{ form.get("username").value }}!
        </sl-dialog>
    `,
})
export class GreeterComponent {
    form = this.formBuilder.group({
        username: ["World", Validators.required],
    });

    isDialogOpen = false;

    constructor(private formBuilder: FormBuilder) {}
}