Asymmetrik/ngx-starter

<form style="max-width: 800px">
    <h1 class="pb-3">Common Modal Module Examples</h1>

    <h2>Alert</h2>
    <div class="row">
        <div class="mb-3 col-6">
            <label class="form-label form-required" for="alertTitle">Title</label>
            <input
                class="form-control"
                id="alertTitle"
                name="alertTitle"
                type="text"
                placeholder="Enter title..."
                required
                [(ngModel)]="alertConfig.title"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label" for="alertOK">OK Text</label>
            <input
                class="form-control"
                id="alertOK"
                name="alertOK"
                type="text"
                placeholder="Enter OK text..."
                [(ngModel)]="alertConfig.okText"
            />
        </div>
        <div class="mb-3 col-12">
            <label class="form-label form-required" for="alertMessage">Message</label>
            <input
                class="form-control"
                id="alertMessage"
                name="alertMessage"
                type="text"
                placeholder="Enter message..."
                required
                [(ngModel)]="alertConfig.message"
            />
        </div>
    </div>
    <button class="me-3 btn btn-primary" type="button" (click)="showAlert()">Show Alert</button>
    Output: {{ alertOutput$ | async | json }}

    <h2 class="pt-5">Confirm</h2>
    <div class="row">
        <div class="mb-3 col-4">
            <label class="form-label form-required" for="confirmTitle">Title</label>
            <input
                class="form-control"
                id="confirmTitle"
                name="confirmTitle"
                type="text"
                placeholder="Enter title..."
                required
                [(ngModel)]="confirmConfig.title"
            />
        </div>
        <div class="mb-3 col-4">
            <label class="form-label" for="confirmOK">OK Text</label>
            <input
                class="form-control"
                id="confirmOK"
                name="confirmOK"
                type="text"
                placeholder="Enter OK text..."
                [(ngModel)]="confirmConfig.okText"
            />
        </div>
        <div class="mb-3 col-4">
            <label class="form-label" for="confirmCancel">Cancel Text</label>
            <input
                class="form-control"
                id="confirmCancel"
                name="confirmCancel"
                type="text"
                placeholder="Enter Cancel text..."
                [(ngModel)]="confirmConfig.cancelText"
            />
        </div>
        <div class="mb-3 col-12">
            <label class="form-label form-required" for="confirmMessage">Message</label>
            <input
                class="form-control"
                id="confirmMessage"
                name="confirmMessage"
                type="text"
                placeholder="Enter message..."
                required
                [(ngModel)]="confirmConfig.message"
            />
        </div>
    </div>
    <button class="me-3 btn btn-primary" type="button" (click)="showConfirm()">Show Confirm</button>
    Output: {{ confirmOutput$ | async | json }}

    <h2 class="pt-5">Prompt</h2>
    <div class="row">
        <div class="mb-3 col-6">
            <label class="form-label form-required" for="promptTitle">Title</label>
            <input
                class="form-control"
                id="promptTitle"
                name="promptTitle"
                type="text"
                placeholder="Enter title..."
                required
                [(ngModel)]="promptConfig.title"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label form-required" for="promptLabel">Input Label</label>
            <input
                class="form-control"
                id="promptLabel"
                name="promptLabel"
                type="text"
                placeholder="Enter input label..."
                required
                [(ngModel)]="promptConfig.inputLabel"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label" for="promptOK">OK Text</label>
            <input
                class="form-control"
                id="promptOK"
                name="promptOK"
                type="text"
                placeholder="Enter OK text..."
                [(ngModel)]="promptConfig.okText"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label" for="promptCancel">Cancel Text</label>
            <input
                class="form-control"
                id="promptCancel"
                name="promptCancel"
                type="text"
                placeholder="Enter Cancel text..."
                [(ngModel)]="promptConfig.cancelText"
            />
        </div>
        <div class="mb-3 col-12">
            <label class="form-label form-required" for="promptMessage">Message</label>
            <input
                class="form-control"
                id="promptMessage"
                name="promptMessage"
                type="text"
                placeholder="Enter message..."
                required
                [(ngModel)]="promptConfig.message"
            />
        </div>
    </div>
    <button class="me-3 btn btn-primary" type="button" (click)="showPrompt()">Show Prompt</button>
    Output: {{ promptOutput$ | async | json }}

    <h2 class="pt-5">Show</h2>
    <div class="row">
        <div class="mb-3 col-6">
            <label class="form-label form-required" for="showTitle">Title</label>
            <input
                class="form-control"
                id="showTitle"
                name="showTitle"
                type="text"
                placeholder="Enter title..."
                required
                [(ngModel)]="showConfig.title"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label" for="showOK">OK Text</label>
            <input
                class="form-control"
                id="showOK"
                name="showOK"
                type="text"
                placeholder="Enter OK text..."
                [(ngModel)]="showConfig.okText"
            />
        </div>
        <div class="mb-3 col-6">
            <label class="form-label" for="showCancel">Cancel Text</label>
            <input
                class="form-control"
                id="showCancel"
                name="showCancel"
                type="text"
                placeholder="Enter Cancel text..."
                [(ngModel)]="showConfig.cancelText"
            />
        </div>
        <div class="mb-3 col-12">
            <label class="form-label form-required" for="showMessage">Message</label>
            <input
                class="form-control"
                id="showMessage"
                name="showMessage"
                type="text"
                placeholder="Enter message..."
                required
                [(ngModel)]="showConfig.message"
            />
        </div>
        <div class="mb-3 col-12">
            <label class="form-label form-required" for="showInput">Inputs Config</label>
            <textarea
                class="form-control"
                id="showInput"
                name="showInput"
                type="text"
                placeholder="Enter input config..."
                required
                style="height: 6.5rem"
                [(ngModel)]="showInputConfig"
            ></textarea>
        </div>
    </div>
    <button class="me-3 btn btn-primary" type="button" (click)="showModal()">Show Modal</button>
    Output: {{ showOutput$ | async | json }}
</form>