Icard/angular-clarity-master(work.../node_modules/primeng/esm2022/fieldset/fieldset.mjs

298 lines
33 KiB
JavaScript
Raw Normal View History

2024-07-16 14:55:36 +00:00
import { animate, state, style, transition, trigger } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, NgModule, Output, ViewEncapsulation, booleanAttribute } from '@angular/core';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { MinusIcon } from 'primeng/icons/minus';
import { PlusIcon } from 'primeng/icons/plus';
import { RippleModule } from 'primeng/ripple';
import { UniqueComponentId } from 'primeng/utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/ripple";
/**
* Fieldset is a grouping component with the optional content toggle feature.
* @group Components
*/
export class Fieldset {
el;
/**
* Header text of the fieldset.
* @group Props
*/
legend;
/**
* When specified, content can toggled by clicking the legend.
* @group Props
* @defaultValue false
*/
toggleable;
/**
* Defines the default visibility state of the content.
* * @group Props
*/
collapsed = false;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Transition options of the panel animation.
* @group Props
*/
transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
/**
* Emits when the collapsed state changes.
* @param {boolean} value - New value.
* @group Emits
*/
collapsedChange = new EventEmitter();
/**
* Callback to invoke before panel toggle.
* @param {PanelBeforeToggleEvent} event - Custom toggle event
* @group Emits
*/
onBeforeToggle = new EventEmitter();
/**
* Callback to invoke after panel toggle.
* @param {PanelAfterToggleEvent} event - Custom toggle event
* @group Emits
*/
onAfterToggle = new EventEmitter();
templates;
get id() {
return UniqueComponentId();
}
get buttonAriaLabel() {
return this.legend;
}
animating;
headerTemplate;
contentTemplate;
collapseIconTemplate;
expandIconTemplate;
constructor(el) {
this.el = el;
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'header':
this.headerTemplate = item.template;
break;
case 'expandicon':
this.expandIconTemplate = item.template;
break;
case 'collapseicon':
this.collapseIconTemplate = item.template;
break;
case 'content':
this.contentTemplate = item.template;
break;
}
});
}
toggle(event) {
if (this.animating) {
return false;
}
this.animating = true;
this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed });
if (this.collapsed)
this.expand();
else
this.collapse();
this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed });
event.preventDefault();
}
onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'Space') {
this.toggle(event);
event.preventDefault();
}
}
expand() {
this.collapsed = false;
this.collapsedChange.emit(this.collapsed);
}
collapse() {
this.collapsed = true;
this.collapsedChange.emit(this.collapsed);
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
onToggleDone() {
this.animating = false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Fieldset, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: Fieldset, selector: "p-fieldset", inputs: { legend: "legend", toggleable: ["toggleable", "toggleable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", transitionOptions: "transitionOptions" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
<fieldset
[attr.id]="id"
[ngClass]="{ 'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable }"
[ngStyle]="style"
[class]="styleClass"
[attr.data-pc-name]="'fieldset'"
[attr.data-pc-section]="'root'"
>
<legend class="p-fieldset-legend" [attr.data-pc-section]="'legend'">
<ng-container *ngIf="toggleable; else legendContent">
<a [attr.id]="id + '_header'" pRipple tabindex="0" role="button" [attr.aria-controls]="id + '_content'" [attr.aria-expanded]="!collapsed" [attr.aria-label]="buttonAriaLabel" (click)="toggle($event)" (keydown)="onKeyDown($event)">
<ng-container *ngIf="collapsed">
<PlusIcon *ngIf="!expandIconTemplate" [styleClass]="'p-fieldset-toggler'" [attr.data-pc-section]="'togglericon'" />
<span *ngIf="expandIconTemplate" class="p-fieldset-toggler" [attr.data-pc-section]="'togglericon'">
<ng-container *ngTemplateOutlet="expandIconTemplate"></ng-container>
</span>
</ng-container>
<ng-container *ngIf="!collapsed">
<MinusIcon *ngIf="!collapseIconTemplate" [styleClass]="'p-fieldset-toggler'" [attr.aria-hidden]="true" [attr.data-pc-section]="'togglericon'" />
<span *ngIf="collapseIconTemplate" class="p-fieldset-toggler" [attr.data-pc-section]="'togglericon'">
<ng-container *ngTemplateOutlet="collapseIconTemplate"></ng-container>
</span>
</ng-container>
<ng-container *ngTemplateOutlet="legendContent"></ng-container>
</a>
</ng-container>
<ng-template #legendContent>
<span class="p-fieldset-legend-text" [attr.data-pc-section]="'legendtitle'">{{ legend }}</span>
<ng-content select="p-header"></ng-content>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</ng-template>
</legend>
<div
[attr.id]="id + '_content'"
role="region"
class="p-toggleable-content"
[@fieldsetContent]="collapsed ? { value: 'hidden', params: { transitionParams: transitionOptions, height: '0' } } : { value: 'visible', params: { transitionParams: animating ? transitionOptions : '0ms', height: '*' } }"
[attr.aria-labelledby]="id + '_header'"
[attr.aria-hidden]="collapsed"
[attr.data-pc-section]="'toggleablecontent'"
(@fieldsetContent.done)="onToggleDone()"
>
<div class="p-fieldset-content" [attr.data-pc-section]="'content'">
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
</div>
</fieldset>
`, isInline: true, styles: ["@layer primeng{.p-fieldset{min-width:initial}.p-fieldset-legend>a,.p-fieldset-legend>span{display:flex;align-items:center;justify-content:center}.p-fieldset-toggleable .p-fieldset-legend a{cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.p-fieldset-legend-text{line-height:1}.p-fieldset-toggleable.p-fieldset-expanded>.p-toggleable-content:not(.ng-animating){overflow:visible}.p-fieldset-toggleable .p-toggleable-content{overflow:hidden}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => MinusIcon), selector: "MinusIcon" }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "PlusIcon" }], animations: [
trigger('fieldsetContent', [
state('hidden', style({
height: '0'
})),
state('visible', style({
height: '*'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Fieldset, decorators: [{
type: Component,
args: [{ selector: 'p-fieldset', template: `
<fieldset
[attr.id]="id"
[ngClass]="{ 'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable }"
[ngStyle]="style"
[class]="styleClass"
[attr.data-pc-name]="'fieldset'"
[attr.data-pc-section]="'root'"
>
<legend class="p-fieldset-legend" [attr.data-pc-section]="'legend'">
<ng-container *ngIf="toggleable; else legendContent">
<a [attr.id]="id + '_header'" pRipple tabindex="0" role="button" [attr.aria-controls]="id + '_content'" [attr.aria-expanded]="!collapsed" [attr.aria-label]="buttonAriaLabel" (click)="toggle($event)" (keydown)="onKeyDown($event)">
<ng-container *ngIf="collapsed">
<PlusIcon *ngIf="!expandIconTemplate" [styleClass]="'p-fieldset-toggler'" [attr.data-pc-section]="'togglericon'" />
<span *ngIf="expandIconTemplate" class="p-fieldset-toggler" [attr.data-pc-section]="'togglericon'">
<ng-container *ngTemplateOutlet="expandIconTemplate"></ng-container>
</span>
</ng-container>
<ng-container *ngIf="!collapsed">
<MinusIcon *ngIf="!collapseIconTemplate" [styleClass]="'p-fieldset-toggler'" [attr.aria-hidden]="true" [attr.data-pc-section]="'togglericon'" />
<span *ngIf="collapseIconTemplate" class="p-fieldset-toggler" [attr.data-pc-section]="'togglericon'">
<ng-container *ngTemplateOutlet="collapseIconTemplate"></ng-container>
</span>
</ng-container>
<ng-container *ngTemplateOutlet="legendContent"></ng-container>
</a>
</ng-container>
<ng-template #legendContent>
<span class="p-fieldset-legend-text" [attr.data-pc-section]="'legendtitle'">{{ legend }}</span>
<ng-content select="p-header"></ng-content>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</ng-template>
</legend>
<div
[attr.id]="id + '_content'"
role="region"
class="p-toggleable-content"
[@fieldsetContent]="collapsed ? { value: 'hidden', params: { transitionParams: transitionOptions, height: '0' } } : { value: 'visible', params: { transitionParams: animating ? transitionOptions : '0ms', height: '*' } }"
[attr.aria-labelledby]="id + '_header'"
[attr.aria-hidden]="collapsed"
[attr.data-pc-section]="'toggleablecontent'"
(@fieldsetContent.done)="onToggleDone()"
>
<div class="p-fieldset-content" [attr.data-pc-section]="'content'">
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
</div>
</fieldset>
`, animations: [
trigger('fieldsetContent', [
state('hidden', style({
height: '0'
})),
state('visible', style({
height: '*'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'p-element'
}, styles: ["@layer primeng{.p-fieldset{min-width:initial}.p-fieldset-legend>a,.p-fieldset-legend>span{display:flex;align-items:center;justify-content:center}.p-fieldset-toggleable .p-fieldset-legend a{cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.p-fieldset-legend-text{line-height:1}.p-fieldset-toggleable.p-fieldset-expanded>.p-toggleable-content:not(.ng-animating){overflow:visible}.p-fieldset-toggleable .p-toggleable-content{overflow:hidden}}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { legend: [{
type: Input
}], toggleable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], collapsed: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], transitionOptions: [{
type: Input
}], collapsedChange: [{
type: Output
}], onBeforeToggle: [{
type: Output
}], onAfterToggle: [{
type: Output
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
export class FieldsetModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: FieldsetModule, declarations: [Fieldset], imports: [CommonModule, RippleModule, MinusIcon, PlusIcon], exports: [Fieldset, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldsetModule, imports: [CommonModule, RippleModule, MinusIcon, PlusIcon, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldsetModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, RippleModule, MinusIcon, PlusIcon],
exports: [Fieldset, SharedModule],
declarations: [Fieldset]
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGRzZXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvZmllbGRzZXQvZmllbGRzZXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFvQix1QkFBdUIsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBMEIsaUJBQWlCLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdE4sT0FBTyxFQUFlLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFOUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBR2xEOzs7R0FHRztBQThFSCxNQUFNLE9BQU8sUUFBUTtJQXVFRztJQXRFcEI7OztPQUdHO0lBQ00sTUFBTSxDQUFxQjtJQUNwQzs7OztPQUlHO0lBQ3FDLFVBQVUsQ0FBc0I7SUFDeEU7OztPQUdHO0lBQ3FDLFNBQVMsR0FBd0IsS0FBSyxDQUFDO0lBQy9FOzs7T0FHRztJQUNNLEtBQUssQ0FBOEM7SUFDNUQ7OztPQUdHO0lBQ00sVUFBVSxDQUFxQjtJQUN4Qzs7O09BR0c7SUFDTSxpQkFBaUIsR0FBVyxzQ0FBc0MsQ0FBQztJQUM1RTs7OztPQUlHO0lBQ08sZUFBZSxHQUEwQixJQUFJLFlBQVksRUFB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