@registrucentras/rc-ses-angular-components 0.2.0

package/projects/app/src/app/sample-form-multiple-steps/sample-form-multiple-steps.html

@@ -0,0 +1,283 @@
+<rc-ses-service-page>
+  <rc-ses-service-header
+    serviceName="Nekilnojamojo turto registro išrašas pagal nurodytą turto adresą"
+    serviceDescription="Šiame puslapyje Jūs galite užsisakyti Nekilnojamojo turto registro išrašus, pažymas bei kitus dokumentus. Užsakytą NTR išrašą, pažymą ar kitą dokumentą galėsite gauti elektroniniu būdu arba atsiimti pasirinktame VĮ Registrų centro padalinyje."
+    [path]="[{ label: 'Formos su vedliu pavyzdys', path: '/sample-form-multiple-steps'}]"
+  />
+  <rc-ses-service-wizard-steps
+    [steps]="[
+      { state: 'completed', label: 'Bazinė informacija'},
+      { state: 'active', label: 'Paslaugos užsakymas'},
+      { state: 'pending', label: 'Išdavimas'},
+      { state: 'pending', label: 'Reikalingos papildomos paslaugos'},
+      { state: 'pending', label: 'Terminai ir sąlygos'},
+    ]"
+  />
+  <rc-ses-service-form-container>
+    <mat-accordion rc-ses-accordion multi>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Bazinė informacija</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Paslaugos užsakymas</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+          <form [formGroup]="formStep1">
+            <rc-ses-form-field label="Tikslas">
+              <rc-ses-select
+                formControlName="purpose"
+                placeholder="Pasirinkite"
+                [options]="purposeOptions"
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="Teisinis pagrindas">
+              <rc-ses-select
+                formControlName="legalBasis"
+                placeholder="Pasirinkite"
+                [options]="legalBasisOptions"
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="Turto adresas">
+              <rc-ses-select
+                formControlName="propertyAddress"
+                placeholder="Pasirinkite"
+                [options]="propertyAddressOptions"
+                searchable
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="Sutikimas">
+              <rc-ses-agreement-checkbox
+                formControlName="agreement"
+                description="Pagal užsakymą gautus duomenis naudosiu nurodytam duomenų tikslui ir šių duomenų neatskleisiu tretiesiems asmenims."
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="Terminas">
+              <rc-ses-select
+                formControlName="deadline"
+                placeholder="Pasirinkite"
+                [options]="deadlineOptions"
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="Egzempliorių skaičius">
+              <rc-ses-number-stepper
+                formControlName="numberOfCopies"
+                placeholder="0"
+                [min]="0"
+                [max]="9"
+                [step]="1"
+              />
+            </rc-ses-form-field>
+          </form>
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Išdavimas</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+          <form [formGroup]="formStep2">
+            <rc-ses-message severity="warning">
+              Primename, kad atsiimant rezultatus padalinyje su savimi privalote turėti asmens tapatybę patvirtinantį dokumentą.
+            </rc-ses-message>
+
+            <rc-ses-form-field label="Išdavimo būdas">
+              <rc-ses-radio-button-group
+                formControlName="issueMethod"
+                [options]="issueMethodOptions"
+                displayAsButtons
+              />
+            </rc-ses-form-field>
+
+            <rc-ses-form-field label="RC padalinys">
+              <rc-ses-select
+                formControlName="rcBranch"
+                placeholder="Pasirinkite"
+                [options]="rcBranchOptions"
+                searchable
+              />
+              <mat-hint align="start">Informacija apie <a href="https://www.registrucentras.lt/p/1218" target="_blank">RC padalinius</a></mat-hint>
+            </rc-ses-form-field>
+          </form>
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Reikalingos papildomos paslaugos</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+          <form [formGroup]="formStep3">
+            <rc-ses-form-field label="Paslaugos pavadinimas">
+              <mat-form-field>
+                <input rc-ses-input matInput type="text" formControlName="additionalServices" />
+              </mat-form-field>
+            </rc-ses-form-field>
+          </form>
+        </div>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Terminai ir sąlygos</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+          <form [formGroup]="formStep4">
+            <rc-ses-form-field>
+              <rc-ses-agreement-checkbox
+                formControlName="termsAndConditionsAgreement"
+                flat
+              >
+              <b>Užsakydamas darbus esu susipažinęs su <a href="#" target="_blank">darbų atlikimo ir atlyginimo tvarka</a> ir įsipareigoju apmokėti už užsakytus darbus. Esu informuotas, kad per nurodytą terminą neapmokėjus apskaičiuoto mokesčio, darbų užsakymas per pasiriktą terminą nebus įvykdytas.</b>
+            </rc-ses-agreement-checkbox>
+            </rc-ses-form-field>
+          </form>
+        </div>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </rc-ses-service-form-container>
+</rc-ses-service-page>
+
+<!--
+<br />
+<br />
+<button rc-ses-button mat-button>RC SES basic button</button>
+&nbsp;
+<button rc-ses-button mat-button disabled>RC SES basic button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-button color="neutral">RC SES basic neutral button</button>
+&nbsp;
+<button rc-ses-button mat-button color="neutral" disabled>RC SES basic button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-flat-button>RC SES button</button>
+&nbsp;
+<button rc-ses-button mat-flat-button disabled>RC SES button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button>RC SES button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button disabled>RC SES button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-flat-button color="secondary">RC SES secondary button</button>
+&nbsp;
+<button rc-ses-button mat-flat-button color="secondary" disabled>RC SES secondary button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button color="secondary">RC SES secondary button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button color="secondary" disabled>RC SES secondary button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-flat-button color="neutral">RC SES neutral button</button>
+&nbsp;
+<button rc-ses-button mat-flat-button color="neutral" disabled>RC SES neutral button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button color="neutral">RC SES neutral button</button>
+&nbsp;
+<button rc-ses-button mat-stroked-button color="neutral" disabled>RC SES neutral button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-flat-button color="dark">RC SES dark button</button>
+&nbsp;
+<button rc-ses-button mat-flat-button color="dark" disabled>RC SES dark button</button>
+
+<br />
+<br />
+<button rc-ses-button mat-flat-button color="danger">RC SES danger button</button>
+&nbsp;
+<button rc-ses-button mat-flat-button color="danger" disabled>RC SES danger button</button>
+
+<br />
+<br />
+
+<rc-ses-form-field
+  label="Noice label"
+  labelSubtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" placeholder="Placeholder">
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+
+<rc-ses-form-field
+  label="Noice label"
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" placeholder="Placeholder">
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+
+<rc-ses-form-field
+  label="Noice label"
+  labelSubtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+  [formControl]="testInputFormControl"
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" [formControl]="testInputFormControl">
+    @if (testInputFormControl.hasError('required')) {
+      <mat-error>Duuuude</mat-error>
+    }
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+
+<rc-ses-form-field
+  label="Noice label"
+  labelSubtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" [(ngModel)]="value" required>
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+
+<rc-ses-form-field
+  label="Disabled"
+  labelSubtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" [(ngModel)]="value" disabled>
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+
+<rc-ses-form-field
+  label="Readonly"
+  labelSubtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+>
+  <mat-form-field>
+    <input rc-ses-input matInput type="text" [(ngModel)]="value" readonly>
+  </mat-form-field>
+</rc-ses-form-field>
+
+<br />
+<br />
+<br />
+<br />
+<br />
+<br /> -->

package/projects/app/src/app/sample-form-multiple-steps/sample-form-multiple-steps.ts

@@ -0,0 +1,223 @@
+import { Component,  viewChild } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCommonModule } from '@angular/material/core';
+import { MatAccordion, MatExpansionModule } from '@angular/material/expansion';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { RcSesAccordionDirective } from '../../../../rc-ses/angular-components/src/lib/components/accordion/accordion';
+import { RcSesButtonDirective } from '../../../../rc-ses/angular-components/src/lib/components/button/button';
+import { RcSesFormFieldComponent } from '../../../../rc-ses/angular-components/src/lib/components/form/form-field/form-field';
+import { RcSesInputDirective } from '../../../../rc-ses/angular-components/src/lib/components/form/input/input/input';
+import { ServiceFormContainer } from '../../../../rc-ses/angular-components/src/lib/components/layout/service-form-container/service-form-container';
+import { ServiceHeader } from '../../../../rc-ses/angular-components/src/lib/components/layout/service-header/service-header';
+import { ServicePage } from '../../../../rc-ses/angular-components/src/lib/components/layout/service-page/service-page';
+import { ServiceWizardSteps } from '../../../../rc-ses/angular-components/src/lib/components/layout/service-wizard-steps/service-wizard-steps';
+import { MatSelectModule } from '@angular/material/select';
+import { RcSesSelectComponent } from '../../../../rc-ses/angular-components/src/lib/components/form/input/select/select';
+import { RcSesNumberStepperComponent } from '../../../../rc-ses/angular-components/src/lib/components/form/input/number-stepper/number-stepper';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { RcSesAgreementCheckboxComponent } from '../../../../rc-ses/angular-components/src/lib/components/form/input/agreement-checkbox/agreement-checkbox';
+import { RcSesMessageComponent } from '../../../../rc-ses/angular-components/src/lib/components/message/message';
+import { RcSesRadioButtonGroupComponent } from '../../../../rc-ses/angular-components/src/lib/components/form/input/radio-button-group/radio-button-group';
+import { RcSesIconsModule } from '../../../../rc-ses/angular-components/src/lib/components/icons/icons.module';
+
+@Component({
+  selector: 'sample-form-multiple-steps',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterOutlet,
+
+    MatButtonModule,
+    MatCommonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+
+    RcSesAccordionDirective,
+    RcSesAgreementCheckboxComponent,
+    RcSesButtonDirective,
+    RcSesFormFieldComponent,
+    RcSesIconsModule,
+    RcSesInputDirective,
+    RcSesMessageComponent,
+    RcSesNumberStepperComponent,
+    RcSesRadioButtonGroupComponent,
+    RcSesSelectComponent,
+
+    ServiceHeader,
+    ServicePage,
+    ServiceWizardSteps,
+    ServiceFormContainer,
+  ],
+  templateUrl: './sample-form-multiple-steps.html',
+  styleUrl: './sample-form-multiple-steps.scss',
+  providers: [
+    HttpClient,
+  ],
+})
+export class SampleFormMultipleStepsComponent {
+  accordion = viewChild.required(MatAccordion);
+
+  /*
+   * PASLAUGOS UŽSAKYMAS
+   */
+  formStep1 = new FormGroup({
+    purpose: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+    legalBasis: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+    propertyAddress: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+    agreement: new FormControl(
+      { value: false, disabled: false },
+      { validators: Validators.required },
+    ),
+    deadline: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+    numberOfCopies: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+  });
+
+  purposeOptions: { value: string, label: string, description?: string }[] = [
+    { value: 'tikslas1', label: 'Tikslas 1' },
+    { value: 'tikslas2', label: 'Tikslas 2' },
+    { value: 'tikslas3', label: 'Tikslas 3' },
+  ];
+
+  legalBasisOptions: { value: string, label: string, description?: string }[] = [
+    { value: 'teisinisPagrindas1', label: 'Teisinis pagrindas 1' },
+    { value: 'teisinisPagrindas2', label: 'Teisinis pagrindas 2' },
+    { value: 'teisinisPagrindas3', label: 'Teisinis pagrindas 3' },
+  ];
+
+  deadlineOptions: { value: string, label: string, description?: string }[] = [
+    { value: 'terminas-1', label: 'artimiausiu metu' },
+    { value: 'terminas-2', label: 'iki mėnesio pabaigos' },
+  ];
+
+  propertyAddressOptions: { value: string, label: string, description?: string }[] = [
+    { value: 'lvivo-g-7', label: 'Lvivo g. 7', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-9', label: 'Lvivo g. 9', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-11', label: 'Lvivo g. 11', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-11a', label: 'Lvivo g. 11A', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-12', label: 'Lvivo g. 12', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-13', label: 'Lvivo g. 13', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-13a', label: 'Lvivo g. 13A', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-13b', label: 'Lvivo g. 13B', description: 'Vilnius, Vilniaus m. sav. 09313' },
+    { value: 'lvivo-g-1c', label: 'Lvivo g. 13C', description: 'Vilnius, Vilniaus m. sav. 09313' },
+  ];
+
+  purposeOptionsWithDescription: { value: string, label: string, description?: string }[] = [
+    { value: 'tikslas1', label: 'Tikslas 1', description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.' },
+    { value: 'tikslas2', label: 'Tikslas 2', description: 'Lorem Ipsum is simply dummy text.' },
+    { value: 'tikslas3', label: 'Tikslas 3', description: 'Lorem Ipsum is simply dummy text of the printing industry.' },
+  ];
+
+  purposeGroups: { name: string, disabled: boolean, items: { value: string, label: string, description?: string }[] }[] = [
+    {
+      name: 'Grupė 1',
+      disabled: false,
+      items: [
+        { value: 'tikslas1', label: 'Tikslas 1' },
+        { value: 'tikslas2', label: 'Tikslas 2' },
+        { value: 'tikslas3', label: 'Tikslas 3' },
+      ],
+    },
+    {
+      name: 'Grupė 2',
+      disabled: false,
+      items: [
+        { value: 'tikslas4', label: 'Tikslas 4' },
+        { value: 'tikslas5', label: 'Tikslas 5' },
+        { value: 'tikslas6', label: 'Tikslas 6' },
+      ],
+    },
+  ];
+
+  /*
+   * IŠDAVIMAS
+   */
+  formStep2 = new FormGroup({
+    issueMethod: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+    rcBranch: new FormControl(
+      { value: '', disabled: false },
+      { validators: Validators.required },
+    ),
+  });
+
+  rcBranchOptions: { value: string, label: string, description?: string }[] = [
+    {
+      label: 'Lvivo g. 25-101',
+      value: 'vilnius',
+      description: '09320 Vilnius',
+    },
+    {
+      label: 'E. Ožeškienės g. 12',
+      value: 'kaunas',
+      description: '44252 Kaunas, (įėjimas iš L. Sapiegos gatvės pusės)',
+    },
+    {
+      label: 'Baltijos pr. 123-1',
+      value: 'klaipeda',
+      description: '93224 Klaipėda',
+    },
+    {
+      label: 'Baltijos pr. 123-1',
+      value: 'siauliai',
+      description: '78167 Šiauliai',
+    },
+    {
+      label: 'Baltijos pr. 123-1',
+      value: 'panevezys',
+      description: '35173 Panevėžys',
+    },
+  ];
+
+  issueMethodOptions: { value: string, label: string }[] = [
+    { label: 'El. paštu', value: 'email' },
+    { label: 'Padalinyje', value: 'branch' },
+    { label: 'Paštu Lietuvoje', value: 'mail-local' },
+    { label: 'Paštu užsienyje', value: 'mail-abroad' },
+  ];
+
+  /*
+   * REIKALINGOS PAPILDOMOS PASLAUGOS
+   */
+  formStep3 = new FormGroup({
+    additionalServices: new FormControl(
+      { value: 'Papildoma paslauga #1', disabled: true },
+    ),
+  });
+
+  /*
+   * TERMINAI IR SĄLYGOS
+   */
+  formStep4 = new FormGroup({
+    termsAndConditionsAgreement: new FormControl(
+      { value: false, disabled: false },
+    ),
+  });
+}