primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-orderlist.mjs

@@ -50,6 +50,26 @@ class OrderListStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OrderListStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * OrderList is used to maneged the order of a collection.
+ *
+ * [Live Demo](https://primeng.org/orderlist)
+ *
+ * @module orderliststyle
+ *
+ */
+var OrderListClasses;
+(function (OrderListClasses) {
+    /**
+     * Class name of the root element
+     */
+    OrderListClasses["root"] = "p-orderlist";
+    /**
+     * Class name of the controls element
+     */
+    OrderListClasses["controls"] = "p-orderlist-controls";
+})(OrderListClasses || (OrderListClasses = {}));
 
 /**
  * OrderList is used to managed the order of a collection.
@@ -194,6 +214,31 @@ class OrderList extends BaseComponent {
     get value() {
         return this._value;
     }
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps = { severity: 'secondary' };
+    /**
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
+     * @group Props
+     */
+    moveUpButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move top button inside the component.
+     * @group Props
+     */
+    moveTopButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move down button inside the component.
+     * @group Props
+     */
+    moveDownButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move bottom button inside the component.
+     * @group Props
+     */
+    moveBottomButtonProps;
     /**
      * Callback to invoke on selection change.
      * @param {*} any - selection instance.
@@ -276,6 +321,20 @@ class OrderList extends BaseComponent {
         this.filterService = filterService;
         this.config = config;
     }
+    getButtonProps(direction) {
+        switch (direction) {
+            case 'up':
+                return { ...this.buttonProps, ...this.moveUpButtonProps };
+            case 'top':
+                return { ...this.buttonProps, ...this.moveTopButtonProps };
+            case 'down':
+                return { ...this.buttonProps, ...this.moveDownButtonProps };
+            case 'bottom':
+                return { ...this.buttonProps, ...this.moveBottomButtonProps };
+            default:
+                return this.buttonProps;
+        }
+    }
     ngOnInit() {
         super.ngOnInit();
         if (this.responsive) {
@@ -294,6 +353,9 @@ class OrderList extends BaseComponent {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
+                case 'option':
+                    this.itemTemplate = item.template;
+                    break;
                 case 'empty':
                     this.emptyMessageTemplate = item.template;
                     break;
@@ -745,7 +807,7 @@ class OrderList extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OrderList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: OrderList, selector: "p-orderList", inputs: { header: "header", style: "style", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", listStyle: "listStyle", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], controlsPosition: "controlsPosition", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", breakpoint: "breakpoint", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], trackBy: "trackBy", scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selection: "selection", value: "value" }, outputs: { selectionChange: "selectionChange", onReorder: "onReorder", onSelectionChange: "onSelectionChange", onFilterEvent: "onFilterEvent", onFocus: "onFocus", onBlur: "onBlur" }, providers: [OrderListStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["listelement"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: OrderList, selector: "p-orderList, p-orderlist", inputs: { header: "header", style: "style", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", listStyle: "listStyle", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], controlsPosition: "controlsPosition", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", breakpoint: "breakpoint", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], trackBy: "trackBy", scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selection: "selection", value: "value", buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps" }, outputs: { selectionChange: "selectionChange", onReorder: "onReorder", onSelectionChange: "onSelectionChange", onFilterEvent: "onFilterEvent", onFocus: "onFocus", onBlur: "onBlur" }, providers: [OrderListStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["listelement"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div
             [ngClass]="{
                 'p-orderlist p-component': true,
@@ -763,10 +825,10 @@ class OrderList extends BaseComponent {
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveUp()"
                     [attr.aria-label]="moveUpAriaLabel"
                     [attr.data-pc-section]="'moveUpButton'"
+                    [buttonProps]="getButtonProps('up')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -776,10 +838,10 @@ class OrderList extends BaseComponent {
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveTop()"
                     [attr.aria-label]="moveTopAriaLabel"
                     [attr.data-pc-section]="'moveTopButton'"
+                    [buttonProps]="getButtonProps('top')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -789,10 +851,10 @@ class OrderList extends BaseComponent {
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveDown()"
                     [attr.aria-label]="moveDownAriaLabel"
                     [attr.data-pc-section]="'moveDownButton'"
+                    [buttonProps]="getButtonProps('down')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -802,10 +864,10 @@ class OrderList extends BaseComponent {
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveBottom()"
                     [attr.aria-label]="moveBottomAriaLabel"
                     [attr.data-pc-section]="'moveBottomButton'"
+                    [buttonProps]="getButtonProps('bottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
@@ -817,10 +879,9 @@ class OrderList extends BaseComponent {
                     [multiple]="true"
                     [options]="value"
                     [(ngModel)]="d_selection"
-                    [style]="{ width: '15rem' }"
                     optionLabel="name"
                     [id]="id + '_list'"
-                    [ngStyle]="listStyle"
+                    [listStyle]="listStyle"
                     [striped]="stripedRows"
                     [tabindex]="tabindex"
                     (onFocus)="onListFocus($event)"
@@ -831,21 +892,32 @@ class OrderList extends BaseComponent {
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="filterPlaceholder"
                 >
                     <ng-container *ngIf="headerTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-option let-selected="selected" let-index="index">
+                            <ng-template
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: option, selected: selected, index: index }"
+                            ></ng-template>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "buttonProps", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i4.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleDownIcon), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleUpIcon), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Listbox), selector: "p-listbox", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange"] }, { kind: "directive", type: i0.forwardRef(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "buttonProps", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i4.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleDownIcon), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleUpIcon), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Listbox), selector: "p-listbox", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange"] }, { kind: "directive", type: i0.forwardRef(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: OrderList, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-orderList',
+                    selector: 'p-orderList, p-orderlist',
                     template: `
         <div
             [ngClass]="{
@@ -864,10 +936,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveUp()"
                     [attr.aria-label]="moveUpAriaLabel"
                     [attr.data-pc-section]="'moveUpButton'"
+                    [buttonProps]="getButtonProps('up')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -877,10 +949,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveTop()"
                     [attr.aria-label]="moveTopAriaLabel"
                     [attr.data-pc-section]="'moveTopButton'"
+                    [buttonProps]="getButtonProps('top')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -890,10 +962,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveDown()"
                     [attr.aria-label]="moveDownAriaLabel"
                     [attr.data-pc-section]="'moveDownButton'"
+                    [buttonProps]="getButtonProps('down')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -903,10 +975,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [disabled]="moveDisabled()"
                     pButton
                     pRipple
-                    class="p-button-icon-only"
                     (click)="moveBottom()"
                     [attr.aria-label]="moveBottomAriaLabel"
                     [attr.data-pc-section]="'moveBottomButton'"
+                    [buttonProps]="getButtonProps('bottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
@@ -918,10 +990,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [multiple]="true"
                     [options]="value"
                     [(ngModel)]="d_selection"
-                    [style]="{ width: '15rem' }"
                     optionLabel="name"
                     [id]="id + '_list'"
-                    [ngStyle]="listStyle"
+                    [listStyle]="listStyle"
                     [striped]="stripedRows"
                     [tabindex]="tabindex"
                     (onFocus)="onListFocus($event)"
@@ -932,12 +1003,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="filterPlaceholder"
                 >
                     <ng-container *ngIf="headerTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-option let-selected="selected" let-index="index">
+                            <ng-template
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: option, selected: selected, index: index }"
+                            ></ng-template>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
         </div>
@@ -1001,6 +1083,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], buttonProps: [{
+                type: Input
+            }], moveUpButtonProps: [{
+                type: Input
+            }], moveTopButtonProps: [{
+                type: Input
+            }], moveDownButtonProps: [{
+                type: Input
+            }], moveBottomButtonProps: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], onReorder: [{
@@ -1076,5 +1168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OrderList, OrderListModule };
+export { OrderList, OrderListClasses, OrderListModule, OrderListStyle };
 //# sourceMappingURL=primeng-orderlist.mjs.map