| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { forwardRef, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i1 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import { ObjectUtils } from 'primeng/utils';
|
|---|
| 6 | import * as i2 from 'primeng/ripple';
|
|---|
| 7 | import { RippleModule } from 'primeng/ripple';
|
|---|
| 8 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|---|
| 9 |
|
|---|
| 10 | const SELECTBUTTON_VALUE_ACCESSOR = {
|
|---|
| 11 | provide: NG_VALUE_ACCESSOR,
|
|---|
| 12 | useExisting: forwardRef(() => SelectButton),
|
|---|
| 13 | multi: true
|
|---|
| 14 | };
|
|---|
| 15 | class SelectButton {
|
|---|
| 16 | constructor(cd) {
|
|---|
| 17 | this.cd = cd;
|
|---|
| 18 | this.tabindex = 0;
|
|---|
| 19 | this.onOptionClick = new EventEmitter();
|
|---|
| 20 | this.onChange = new EventEmitter();
|
|---|
| 21 | this.onModelChange = () => { };
|
|---|
| 22 | this.onModelTouched = () => { };
|
|---|
| 23 | }
|
|---|
| 24 | getOptionLabel(option) {
|
|---|
| 25 | return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option.label != undefined ? option.label : option);
|
|---|
| 26 | }
|
|---|
| 27 | getOptionValue(option) {
|
|---|
| 28 | return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel || option.value === undefined ? option : option.value);
|
|---|
| 29 | }
|
|---|
| 30 | isOptionDisabled(option) {
|
|---|
| 31 | return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option.disabled !== undefined ? option.disabled : false);
|
|---|
| 32 | }
|
|---|
| 33 | writeValue(value) {
|
|---|
| 34 | this.value = value;
|
|---|
| 35 | this.cd.markForCheck();
|
|---|
| 36 | }
|
|---|
| 37 | registerOnChange(fn) {
|
|---|
| 38 | this.onModelChange = fn;
|
|---|
| 39 | }
|
|---|
| 40 | registerOnTouched(fn) {
|
|---|
| 41 | this.onModelTouched = fn;
|
|---|
| 42 | }
|
|---|
| 43 | setDisabledState(val) {
|
|---|
| 44 | this.disabled = val;
|
|---|
| 45 | this.cd.markForCheck();
|
|---|
| 46 | }
|
|---|
| 47 | onItemClick(event, option, index) {
|
|---|
| 48 | if (this.disabled || this.isOptionDisabled(option)) {
|
|---|
| 49 | return;
|
|---|
| 50 | }
|
|---|
| 51 | if (this.multiple) {
|
|---|
| 52 | if (this.isSelected(option))
|
|---|
| 53 | this.removeOption(option);
|
|---|
| 54 | else
|
|---|
| 55 | this.value = [...(this.value || []), this.getOptionValue(option)];
|
|---|
| 56 | }
|
|---|
| 57 | else {
|
|---|
| 58 | this.value = this.getOptionValue(option);
|
|---|
| 59 | }
|
|---|
| 60 | this.onOptionClick.emit({
|
|---|
| 61 | originalEvent: event,
|
|---|
| 62 | option: option,
|
|---|
| 63 | index: index
|
|---|
| 64 | });
|
|---|
| 65 | this.onModelChange(this.value);
|
|---|
| 66 | this.onChange.emit({
|
|---|
| 67 | originalEvent: event,
|
|---|
| 68 | value: this.value
|
|---|
| 69 | });
|
|---|
| 70 | }
|
|---|
| 71 | onBlur() {
|
|---|
| 72 | this.onModelTouched();
|
|---|
| 73 | }
|
|---|
| 74 | removeOption(option) {
|
|---|
| 75 | this.value = this.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.dataKey));
|
|---|
| 76 | }
|
|---|
| 77 | isSelected(option) {
|
|---|
| 78 | let selected = false;
|
|---|
| 79 | let optionValue = this.getOptionValue(option);
|
|---|
| 80 | if (this.multiple) {
|
|---|
| 81 | if (this.value) {
|
|---|
| 82 | for (let val of this.value) {
|
|---|
| 83 | if (ObjectUtils.equals(val, optionValue, this.dataKey)) {
|
|---|
| 84 | selected = true;
|
|---|
| 85 | break;
|
|---|
| 86 | }
|
|---|
| 87 | }
|
|---|
| 88 | }
|
|---|
| 89 | }
|
|---|
| 90 | else {
|
|---|
| 91 | selected = ObjectUtils.equals(this.getOptionValue(option), this.value, this.dataKey);
|
|---|
| 92 | }
|
|---|
| 93 | return selected;
|
|---|
| 94 | }
|
|---|
| 95 | }
|
|---|
| 96 | SelectButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 97 | SelectButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SelectButton, selector: "p-selectButton", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", tabindex: "tabindex", multiple: "multiple", style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", dataKey: "dataKey" }, outputs: { onOptionClick: "onOptionClick", onChange: "onChange" }, host: { classAttribute: "p-element" }, providers: [SELECTBUTTON_VALUE_ACCESSOR], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
|
|---|
| 98 | <div [ngClass]="'p-selectbutton p-buttonset p-component'" [ngStyle]="style" [class]="styleClass" role="group">
|
|---|
| 99 | <div *ngFor="let option of options; let i = index" #btn class="p-button p-component" [class]="option.styleClass" role="button" [attr.aria-pressed]="isSelected(option)"
|
|---|
| 100 | [ngClass]="{'p-highlight':isSelected(option),
|
|---|
| 101 | 'p-disabled': disabled || isOptionDisabled(option),
|
|---|
| 102 | 'p-button-icon-only': (option.icon && !getOptionLabel(option))}"
|
|---|
| 103 | (click)="onItemClick($event,option,i)" (keydown.enter)="onItemClick($event,option,i)"
|
|---|
| 104 | [attr.title]="option.title" [attr.aria-label]="option.label" (blur)="onBlur()" [attr.tabindex]="disabled ? null : tabindex" [attr.aria-labelledby]="this.getOptionLabel(option)" pRipple>
|
|---|
| 105 | <ng-container *ngIf="!itemTemplate else customcontent">
|
|---|
| 106 | <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="option.icon" *ngIf="option.icon"></span>
|
|---|
| 107 | <span class="p-button-label">{{getOptionLabel(option)}}</span>
|
|---|
| 108 | </ng-container>
|
|---|
| 109 | <ng-template #customcontent>
|
|---|
| 110 | <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>
|
|---|
| 111 | </ng-template>
|
|---|
| 112 | </div>
|
|---|
| 113 | </div>
|
|---|
| 114 | `, isInline: true, styles: [".p-button{margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative}.p-button-label{flex:1 1 auto}.p-button-icon-right{order:1}.p-button:disabled{cursor:default}.p-button-icon-only{justify-content:center}.p-button-icon-only .p-button-label{visibility:hidden;width:0;flex:0 0 auto}.p-button-vertical{flex-direction:column}.p-button-icon-bottom{order:2}.p-buttonset .p-button{margin:0}.p-buttonset .p-button:not(:last-child){border-right:0 none}.p-buttonset .p-button:not(:first-of-type):not(:last-of-type){border-radius:0}.p-buttonset .p-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0}.p-buttonset .p-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}.p-buttonset .p-button:focus{position:relative;z-index:1}.p-button-label{transition:all .2s}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 115 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButton, decorators: [{
|
|---|
| 116 | type: Component,
|
|---|
| 117 | args: [{ selector: 'p-selectButton', template: `
|
|---|
| 118 | <div [ngClass]="'p-selectbutton p-buttonset p-component'" [ngStyle]="style" [class]="styleClass" role="group">
|
|---|
| 119 | <div *ngFor="let option of options; let i = index" #btn class="p-button p-component" [class]="option.styleClass" role="button" [attr.aria-pressed]="isSelected(option)"
|
|---|
| 120 | [ngClass]="{'p-highlight':isSelected(option),
|
|---|
| 121 | 'p-disabled': disabled || isOptionDisabled(option),
|
|---|
| 122 | 'p-button-icon-only': (option.icon && !getOptionLabel(option))}"
|
|---|
| 123 | (click)="onItemClick($event,option,i)" (keydown.enter)="onItemClick($event,option,i)"
|
|---|
| 124 | [attr.title]="option.title" [attr.aria-label]="option.label" (blur)="onBlur()" [attr.tabindex]="disabled ? null : tabindex" [attr.aria-labelledby]="this.getOptionLabel(option)" pRipple>
|
|---|
| 125 | <ng-container *ngIf="!itemTemplate else customcontent">
|
|---|
| 126 | <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="option.icon" *ngIf="option.icon"></span>
|
|---|
| 127 | <span class="p-button-label">{{getOptionLabel(option)}}</span>
|
|---|
| 128 | </ng-container>
|
|---|
| 129 | <ng-template #customcontent>
|
|---|
| 130 | <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>
|
|---|
| 131 | </ng-template>
|
|---|
| 132 | </div>
|
|---|
| 133 | </div>
|
|---|
| 134 | `, providers: [SELECTBUTTON_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|---|
| 135 | 'class': 'p-element'
|
|---|
| 136 | }, styles: [".p-button{margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative}.p-button-label{flex:1 1 auto}.p-button-icon-right{order:1}.p-button:disabled{cursor:default}.p-button-icon-only{justify-content:center}.p-button-icon-only .p-button-label{visibility:hidden;width:0;flex:0 0 auto}.p-button-vertical{flex-direction:column}.p-button-icon-bottom{order:2}.p-buttonset .p-button{margin:0}.p-buttonset .p-button:not(:last-child){border-right:0 none}.p-buttonset .p-button:not(:first-of-type):not(:last-of-type){border-radius:0}.p-buttonset .p-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0}.p-buttonset .p-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}.p-buttonset .p-button:focus{position:relative;z-index:1}.p-button-label{transition:all .2s}\n"] }]
|
|---|
| 137 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
|
|---|
| 138 | type: Input
|
|---|
| 139 | }], optionLabel: [{
|
|---|
| 140 | type: Input
|
|---|
| 141 | }], optionValue: [{
|
|---|
| 142 | type: Input
|
|---|
| 143 | }], optionDisabled: [{
|
|---|
| 144 | type: Input
|
|---|
| 145 | }], tabindex: [{
|
|---|
| 146 | type: Input
|
|---|
| 147 | }], multiple: [{
|
|---|
| 148 | type: Input
|
|---|
| 149 | }], style: [{
|
|---|
| 150 | type: Input
|
|---|
| 151 | }], styleClass: [{
|
|---|
| 152 | type: Input
|
|---|
| 153 | }], ariaLabelledBy: [{
|
|---|
| 154 | type: Input
|
|---|
| 155 | }], disabled: [{
|
|---|
| 156 | type: Input
|
|---|
| 157 | }], dataKey: [{
|
|---|
| 158 | type: Input
|
|---|
| 159 | }], onOptionClick: [{
|
|---|
| 160 | type: Output
|
|---|
| 161 | }], onChange: [{
|
|---|
| 162 | type: Output
|
|---|
| 163 | }], itemTemplate: [{
|
|---|
| 164 | type: ContentChild,
|
|---|
| 165 | args: [TemplateRef]
|
|---|
| 166 | }] } });
|
|---|
| 167 | class SelectButtonModule {
|
|---|
| 168 | }
|
|---|
| 169 | SelectButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 170 | SelectButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButtonModule, declarations: [SelectButton], imports: [CommonModule, RippleModule], exports: [SelectButton] });
|
|---|
| 171 | SelectButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButtonModule, imports: [[CommonModule, RippleModule]] });
|
|---|
| 172 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SelectButtonModule, decorators: [{
|
|---|
| 173 | type: NgModule,
|
|---|
| 174 | args: [{
|
|---|
| 175 | imports: [CommonModule, RippleModule],
|
|---|
| 176 | exports: [SelectButton],
|
|---|
| 177 | declarations: [SelectButton]
|
|---|
| 178 | }]
|
|---|
| 179 | }] });
|
|---|
| 180 |
|
|---|
| 181 | /**
|
|---|
| 182 | * Generated bundle index. Do not edit.
|
|---|
| 183 | */
|
|---|
| 184 |
|
|---|
| 185 | export { SELECTBUTTON_VALUE_ACCESSOR, SelectButton, SelectButtonModule };
|
|---|
