src/components/sq-accordion/sq-collapse/sq-collapse.component.ts
Represents the SqCollapseComponent, a collapsible container component with customizable options.
Look the link about the component in original framework and the appearance
See https://css.squidit.com.br/components/accordion-collapse
Example :<sq-collapse [open]="true" color="blue" (openedEmitter)="onOpened($event)">
<ng-container header>
<div>Header Content</div>
</ng-container>
<div>Body Content</div>
</sq-collapse>| selector | sq-collapse |
| styleUrls | ./sq-collapse.component.scss |
| templateUrl | ./sq-collapse.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(colorsHelper: ColorsHelper, elementRef: ElementRef)
|
||||||||||||
|
Component Constructor
Parameters :
|
| class | |
Type : string
|
|
Default value : ''
|
|
|
Custom CSS class to be applied to the collapse component. |
|
| collapseButtonDisabled | |
Type : boolean
|
|
|
Indicates whether just the collapse dropdown button is disabled. |
|
| collapseButtonTooltip | |
Type : string
|
|
|
The tooltip for the collapse button. |
|
| color | |
Type : string
|
|
Default value : ''
|
|
|
The color scheme of the collapse component. |
|
| colorBackgroundIcon | |
Type : string
|
|
Default value : ''
|
|
|
The background color of the collapse icon. |
|
| colorIcons | |
Type : string
|
|
Default value : ''
|
|
|
The color of the collapse icons. |
|
| disabled | |
Type : boolean
|
|
|
Indicates whether the collapse is disabled. |
|
| fontSizeIcon | |
Type : string
|
|
|
The font size of the collapse icon. |
|
| heightIcon | |
Type : string
|
|
|
The height of the collapse icon. |
|
| loading | |
Type : boolean
|
|
|
Indicates whether the collapse is in a loading state. |
|
| noPadding | |
Type : boolean
|
|
Default value : false
|
|
|
Indicates whether to remove padding from the collapse content. |
|
| open | |
Type : boolean
|
|
Default value : false
|
|
|
Indicates whether the collapse is initially open. |
|
| openedEmitter | |
Type : EventEmitter<literal type>
|
|
|
Event emitter for when the collapse is opened or closed. |
|
| emit | ||||||||
emit(element: HTMLElement)
|
||||||||
|
Emits an event when the collapse is opened or closed.
Parameters :
Returns :
void
|
| Public Async toggleCollapse |
toggleCollapse()
|
|
Toggles the state of the collapse component.
Returns :
any
|
| Public colorsHelper |
Type : ColorsHelper
|
|
- The ColorsHelper instance
|
| Optional content |
Type : ElementRef
|
Decorators :
@ViewChild('content')
|
|
Reference to the content element. |
| Optional element |
Type : ElementRef
|
Decorators :
@ViewChild('element')
|
|
Reference to the element. |
| Public elementRef |
Type : ElementRef
|
|
- The ElementRef instance
|
| headerTemplate |
Type : TemplateRef<HTMLElement> | null
|
Default value : null
|
Decorators :
@ContentChild('header')
|
|
Reference to the header content template. |
| hoverHeader |
Default value : false
|
|
Indicates whether the mouse is hovering over the header. |
| hoverIcon |
Default value : false
|
|
Indicates whether the mouse is hovering over the collapse icon. |
| opening |
Type : boolean | string
|
Default value : false
|
|
Indicates whether the collapse is in the process of opening. |
| timeout |
Type : ReturnType<>
|
|
Timeout handler to open animation |
| Optional wrapper |
Type : ElementRef
|
Decorators :
@ViewChild('wrapper')
|
|
Wrapper body element. |
import { Component, ContentChild, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core'
import { ColorsHelper } from '../../../helpers/colors.helper'
import { useMemo } from '../../../helpers/memo.helper'
/**
* Represents the SqCollapseComponent, a collapsible container component with customizable options.
*
* Look the link about the component in original framework and the appearance
*
* @see {@link https://css.squidit.com.br/components/accordion-collapse}
*
* @example
* <sq-collapse [open]="true" color="blue" (openedEmitter)="onOpened($event)">
* <ng-container header>
* <div>Header Content</div>
* </ng-container>
* <div>Body Content</div>
* </sq-collapse>
*/
@Component({
selector: 'sq-collapse',
templateUrl: './sq-collapse.component.html',
styleUrls: ['./sq-collapse.component.scss'],
})
export class SqCollapseComponent {
/**
* Indicates whether the collapse is initially open.
*/
@Input() open = false
/**
* Indicates whether the collapse is in a loading state.
*/
@Input() loading?: boolean
/**
* Indicates whether the collapse is disabled.
*/
@Input() disabled?: boolean
/**
* Indicates whether just the collapse dropdown button is disabled.
*/
@Input() collapseButtonDisabled?: boolean
/**
* The tooltip for the collapse button.
*/
@Input() collapseButtonTooltip?: string
/**
* The color scheme of the collapse component.
*/
@Input() color = ''
/**
* The color of the collapse icons.
*/
@Input() colorIcons = ''
/**
* The background color of the collapse icon.
*/
@Input() colorBackgroundIcon = ''
/**
* The font size of the collapse icon.
*/
@Input() fontSizeIcon?: string
/**
* The height of the collapse icon.
*/
@Input() heightIcon?: string
/**
* Custom CSS class to be applied to the collapse component.
*/
@Input() class = ''
/**
* Indicates whether to remove padding from the collapse content.
*/
@Input() noPadding = false
/**
* Event emitter for when the collapse is opened or closed.
*/
@Output() openedEmitter: EventEmitter<{
open: boolean;
element: HTMLElement | ElementRef<any> | null;
}> = new EventEmitter()
/**
* Reference to the header content template.
*/
@ContentChild('header')
headerTemplate: TemplateRef<HTMLElement> | null = null
/**
* Reference to the element.
*/
@ViewChild('element') element?: ElementRef
/**
* Reference to the content element.
*/
@ViewChild('content') content?: ElementRef
/**
* Wrapper body element.
*/
@ViewChild('wrapper') wrapper?: ElementRef
/**
* Indicates whether the collapse is in the process of opening.
*/
opening: boolean | string = false
/**
* Indicates whether the mouse is hovering over the header.
*/
hoverHeader = false
/**
* Indicates whether the mouse is hovering over the collapse icon.
*/
hoverIcon = false
/**
* Timeout handler to open animation
*/
timeout!: ReturnType<typeof setTimeout>
/**
* Component Constructor
* @param colorsHelper - The ColorsHelper instance
* @param elementRef - The ElementRef instance
*/
constructor(public colorsHelper: ColorsHelper, public elementRef: ElementRef) { }
/**
* Toggles the state of the collapse component.
*/
public async toggleCollapse() {
if (!this.disabled && !this.collapseButtonDisabled && !this.loading && !this.opening) {
this.opening = this.wrapper?.nativeElement?.clientHeight + 'px'
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.opening = false
this.open = !this.open
}, 500)
}
}
/**
* Emits an event when the collapse is opened or closed.
* @param element - The HTML element associated with the collapse.
*/
emit(element: HTMLElement): void {
this.openedEmitter.emit({
open: !this.open,
element,
})
}
/**
* Sets the hover state for a given color.
* @param color - The color for which to set the hover state.
* @returns The modified color.
*/
setHover = useMemo((color: string) => {
return this.colorsHelper?.lightenDarkenColor(this.colorsHelper?.getCssVariableValue(color), -25)
})
}
<div [class]="'wrapper-collapse ' + class">
<header
#element
(click)="emit(element); toggleCollapse()"
class="header-collapse"
[ngStyle]="{
'background-color': hoverHeader ? setHover(color) : color,
'border-color': hoverHeader ? setHover(color) : color,
}"
[ngClass]="{
disabled: disabled,
loading: loading,
'not-header': !headerTemplate,
opened: open,
'p-0': noPadding
}"
(mouseover)="hoverHeader = true"
(mouseleave)="hoverHeader = false"
>
<span class="html" *ngIf="headerTemplate">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</span>
<div
class="wrapper-icons"
[ngClass]="{
disabled: collapseButtonDisabled
}"
[ngStyle]="{
color: colorIcons,
'background-color': hoverIcon ? setHover(colorBackgroundIcon) : colorBackgroundIcon,
'font-size': fontSizeIcon,
height: heightIcon,
'line-height': heightIcon
}"
[tooltip]="collapseButtonTooltip"
(mouseover)="hoverIcon = true"
(mouseleave)="hoverIcon = false"
>
<i
class="fa-solid fa-chevron-down icon"
[ngClass]="{
'fa-rotate-180': !disabled && open
}"
*ngIf="!loading"
></i>
<div *ngIf="loading" class="display-flex justify-content-center align-items-center" style="height: 100%">
<sq-loader color="inherit"></sq-loader>
</div>
</div>
</header>
<div
class="content animated scrollbar"
[ngClass]="{
open: open && !disabled && !loading,
disabled: disabled,
loading: loading,
opening: opening
}"
[ngStyle]="{
height: this.opening ? this.opening : null
}"
#content
>
@if(open) {
<div #wrapper>
<ng-content></ng-content>
</div>
}
</div>
</div>
./sq-collapse.component.scss
.wrapper-collapse {
display: block;
margin: 0.35rem auto;
.header-collapse {
display: flex;
align-items: stretch;
border-radius: 5px;
padding: 0.7rem 1.1rem;
background: var(--lilac_light);
transition: var(--transition);
&:hover,
&:focus {
background: var(--cian);
}
&.p-0 {
padding: 0;
}
span.html {
cursor: pointer;
display: inline-block;
width: calc(100% - 50px);
font-size: 1.1rem;
font-weight: 300;
transition: var(--transition);
margin: 0 1.1rem 0 0;
line-height: 25px;
}
.wrapper-icons {
cursor: pointer;
padding: 0;
margin: 0;
font-size: 1.1rem;
width: 45px;
height: 25px;
line-height: 25px;
transition: var(--transition);
position: relative;
overflow: hidden;
border-radius: 5px;
.icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
&.spinner-border {
color: inherit;
position: relative;
top: -3px;
width: 17px;
height: 17px;
}
}
}
&.disabled,
&.disabled:hover,
&.disabled:focus {
color: var(--color_text-icon_neutral_disabled) !important;
border-color: var(--color_border_input_disabled) !important;
background: var(--color_bg_input_disabled) !important;
span.html {
cursor: not-allowed;
color: var(--color_text-icon_neutral_disabled) !important;
}
.wrapper-icons {
cursor: not-allowed;
background: var(--color_bg_input_disabled) !important;
}
}
sq-loader {
display: inline-block;
}
&.loading {
.wrapper-icons,
span.html {
cursor: wait;
}
}
&.not-header {
width: 100%;
padding: 0.35rem;
display: inline-block;
text-align: center;
span.html {
width: calc(100% - 50px);
}
.wrapper-icons {
line-height: 35px;
}
}
}
.content {
border-radius: 0 0 5px 5px;
margin: 0;
transition: all 0.5s ease;
height: 0;
overflow: hidden;
visibility: hidden;
position: relative;
&.opening {
visibility: visible;
margin: 0 auto;
}
&.open {
margin: 0 auto;
height: auto;
visibility: visible;
overflow-y: auto;
}
&.loading,
&.disabled {
height: 0 !important;
max-height: 0;
opacity: 0;
margin: 0;
visibility: hidden;
}
}
}