194 lines
9.2 KiB
HTML
194 lines
9.2 KiB
HTML
<div>
|
|
|
|
<p class="new-part">Tabbar (nbp-tab-bar):</p>
|
|
|
|
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
|
[nbpTabContent]="true">
|
|
</nbp-tab-bar>
|
|
|
|
<p class="new-part">Tabbar with title:</p>
|
|
|
|
<div class="nbp-tab-bar-title">
|
|
<div class="tab-bar-title">Title:</div>
|
|
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
|
[nbpTabContent]="true">
|
|
</nbp-tab-bar>
|
|
</div>
|
|
|
|
<p class="new-part">Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset) check devtools inspector
|
|
elements:</p>
|
|
<div class="nbp-tab-bar-title">
|
|
<div class="tab-bar-title">Title:</div>
|
|
<nbp-toggle-tabset>
|
|
<nbp-toggle-tab disabled="true" title="Scheda 0">
|
|
<h3>Scheda 0 - Selezionata</h3>
|
|
<span>{{ longText }}</span>
|
|
</nbp-toggle-tab>
|
|
<nbp-toggle-tab active="true" title="Scheda 1">
|
|
<h3>Scheda 1 - Selezionata</h3>
|
|
<span>{{ longText }}</span>
|
|
</nbp-toggle-tab>
|
|
<nbp-toggle-tab title="Scheda 2">
|
|
<h3>Scheda 2 - Selezionata</h3>
|
|
<span>{{ longText }}</span>
|
|
</nbp-toggle-tab>
|
|
<nbp-toggle-tab title="Scheda 3">
|
|
<h3>Scheda 3 - Selezionata</h3>
|
|
<span>{{ longText }}</span>
|
|
</nbp-toggle-tab>
|
|
</nbp-toggle-tabset>
|
|
</div>
|
|
|
|
<p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
|
|
<div>
|
|
<nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'">
|
|
<nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR"
|
|
nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'"
|
|
[nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY"
|
|
[nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4">
|
|
</nbp-input-text>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Calendar generic (nbp-input-container + nbp-calendar-generic)</p>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
|
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
|
[(ngModel)]="calendarModel">
|
|
</nbp-calendar-generic>
|
|
</nbp-input-container>
|
|
</div>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
|
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
|
|
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
|
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
|
</nbp-calendar-generic>
|
|
</nbp-input-container>
|
|
</div>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
|
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true"
|
|
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
|
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
|
</nbp-calendar-generic>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)</p>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-fid-calendar-generic [id]="'calendarId'" [name]="'calendarName'" [dateFormat]="'dd/MM/yyyy'"
|
|
[minDate]="fidMinDate" [maxDate]="fidMaxDate" [disabled]="false"
|
|
[(ngModel)]="fidCalendarModel" (dateChange)="onDateChange($event)">
|
|
</nbp-fid-calendar-generic>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
|
|
<p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
|
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
|
</nbp-combo>
|
|
</nbp-input-container>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
|
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true"
|
|
[disabled]="true">
|
|
</nbp-combo>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
|
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
|
</nbp-combo-filter>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
|
|
<div>
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
|
<nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT"
|
|
[nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible">
|
|
</nbp-combo-multi>
|
|
</nbp-input-container>
|
|
|
|
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
|
|
<nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY"
|
|
[nbpDataSource]="datasource" [(ngModel)]="selectedValues">
|
|
</nbp-combo-multi>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
|
|
<div>
|
|
<nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT">
|
|
<nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required"
|
|
[placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin"
|
|
[nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea>
|
|
</nbp-input-container>
|
|
</div>
|
|
|
|
<p class="new-part">Card (nbp-card)</p>
|
|
<div style="width: 250px">
|
|
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
|
|
[templateRef]="template4">
|
|
</nbp-card>
|
|
<ng-template #template4>
|
|
<div class="row">
|
|
<div class="col gap-1">
|
|
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
|
|
</nbp-button>
|
|
|
|
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
|
|
</nbp-button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<p class="new-part">Table (nbp-table)</p>
|
|
<div>
|
|
<nbp-table [scrollBar]="'auto'" ariaLabel="table" [nbpId]="'defTable1'" [nbpOptions]="tableOptions"
|
|
[nbpDataSource]="tableDs" [nbpAutoBind]="true" [nbpSelectionType]="tableSelectionType"
|
|
[nbpLayoutAuto]="true">
|
|
|
|
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpVisible]='true'>
|
|
</nbp-table-column>
|
|
|
|
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
|
|
[nbpSortable]="true" [nbpVisible]='true'>
|
|
</nbp-table-column>
|
|
</nbp-table>
|
|
</div>
|
|
|
|
<p class="new-part">Tree-table</p>
|
|
<div>
|
|
<!-- [paginationOptions]="table2PageConfig" -->
|
|
<isp-turbo-table [columns]="table2Columns" [datasource]="table2Data" [hasAccordionRows]="true"
|
|
[rowExpander]="table2RowExpander" tableMinWidth='35rem' ariaLabel="table with children"></isp-turbo-table>
|
|
</div>
|
|
|
|
<p class="new-part">Checkbox-table</p>
|
|
<nbp-table [scrollBar]="'auto'" [nbpId]="'defTable'" [nbpOptions]="simpleOptions"
|
|
[nbpDataSource]="campiStandardData" ariaLabel="multi selection table" [nbpAutoBind]="true"
|
|
[nbpSelectionType]="multi">
|
|
|
|
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpSortable]='true'
|
|
[nbpVisible]='true'>
|
|
</nbp-table-column>
|
|
|
|
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2' [nbpSortable]='true'
|
|
[nbpVisible]='true'>
|
|
</nbp-table-column>
|
|
|
|
</nbp-table>
|
|
</div> |