@ipi-soft/ng-components
Version:
Custom Angular Components
42 lines (38 loc) • 5.81 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input } from '@angular/core';
import { NgClass } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
const OpenCloseAnimation = trigger('openCloseAnimation', [
state('true', style({
height: '{{ height }}',
paddingBottom: '20px',
}), { params: { height: '*' } }),
state('false', style({
height: '0px',
paddingBottom: '0px',
})),
transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
]);
class IpiExpanderComponent {
constructor() {
this.isOpen = false;
this.maxHeight = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: IpiExpanderComponent, isStandalone: true, selector: "ipi-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--ipi-expander-background-color, #FFFFFF);border-radius:8px;border:var(--ipi-expander-border, 0px);box-shadow:var(--ipi-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--ipi-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--ipi-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--ipi-expander-chevron-color, #5D6068);border-left:2px solid var(--ipi-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--ipi-expander-chevron-open-color, #F96138);border-left:2px solid var(--ipi-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--ipi-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [OpenCloseAnimation] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiExpanderComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-expander', animations: [OpenCloseAnimation], imports: [
NgClass,
], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n <span class=\"title\">\n <ng-content select=\"[title]\"></ng-content>\n </span>\n\n <span class=\"chevron\"></span>\n </div>\n\n <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--ipi-expander-background-color, #FFFFFF);border-radius:8px;border:var(--ipi-expander-border, 0px);box-shadow:var(--ipi-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--ipi-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--ipi-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--ipi-expander-chevron-color, #5D6068);border-left:2px solid var(--ipi-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--ipi-expander-chevron-open-color, #F96138);border-left:2px solid var(--ipi-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--ipi-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
}], propDecorators: { isOpen: [{
type: Input
}], maxHeight: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiExpanderComponent };
//# sourceMappingURL=ipi-soft-ng-components-expander.mjs.map