-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a599178
commit 2718c5c
Showing
10 changed files
with
91 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 19 additions & 12 deletions
31
...s/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,24 @@ | ||
| <a *ngIf="isLink" href="#" (click) = "goBack()"> | ||
| <ng-template [ngTemplateOutlet]="content"></ng-template> | ||
| <a *ngIf="buttonStyle === 'link'" class="go-back" data-bs-toggle="historyback" (click)="goBack()" [routerLink]="null"> | ||
| <ng-container *ngTemplateOutlet="content"></ng-container> | ||
| </a> | ||
| <it-button *ngIf = "!isLink" (click) = "goBack()" [color] = "buttonColor"> | ||
| <ng-template [ngTemplateOutlet]="content"></ng-template> | ||
|
|
||
| <it-button *ngIf="buttonStyle === 'button'" | ||
| color="primary" | ||
| class="go-back" | ||
| data-bs-toggle="historyback" | ||
| (click)="goBack()"> | ||
|
|
||
| <ng-container *ngTemplateOutlet="content"></ng-container> | ||
| </it-button> | ||
|
|
||
| <ng-template #content> | ||
| <it-icon *ngIf = "showIcon" | ||
| [name] = "icon" | ||
| [color] = "iconColor" | ||
| [size] = "iconSize" | ||
| [class]="iconClass"></it-icon> | ||
| <span [ngClass] = "{'visually-hidden': !showText}"> | ||
| {{ text }} | ||
| <it-icon *ngIf="isShowIcon" | ||
| size="sm" | ||
| [name]="direction === 'left' ? 'arrow-left' : 'arrow-up'" | ||
| [color]="buttonStyle === 'link' ? 'primary' : 'white'" | ||
| [class.me-2]="isShowText"></it-icon> | ||
|
|
||
| <span [class.visually-hidden]="!isShowText"> | ||
| {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}} | ||
| </span> | ||
| </ng-template> | ||
| </ng-template> |
3 changes: 3 additions & 0 deletions
3
...s/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| a.go-back { | ||
| cursor: pointer; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 49 additions & 54 deletions
103
...cts/design-angular-kit/src/lib/components/navigation/back-button/back-button.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,73 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { Location } from '@angular/common'; | ||
| import { IconColor, IconSize } from '../../../interfaces/icon'; | ||
| import { ButtonColor } from '../../../interfaces/core'; | ||
| import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input'; | ||
|
|
||
| @Component({ | ||
| selector: 'it-back-button', | ||
| templateUrl: './back-button.component.html' | ||
| templateUrl: './back-button.component.html', | ||
| styleUrls: ['./back-button.component.scss'], | ||
| exportAs: 'itBackButton' | ||
| }) | ||
| export class BackButtonComponent { | ||
|
|
||
| /** | ||
| * Indica se va mostrato un link invece che un bottone. | ||
| */ | ||
| @Input() | ||
| get isLink(): boolean { return this._isLink; } | ||
| set isLink(value: boolean) { | ||
| this._isLink = value; | ||
| if (value) { | ||
| this.iconColor = 'primary'; | ||
| } else { | ||
| this.iconColor = 'white'; | ||
| } | ||
| } | ||
| private _isLink = false; | ||
| iconColor: IconColor = 'white'; | ||
| * Back button style | ||
| * - <b>link</b>: use a link with icon and text | ||
| * - <b>button</b>: use a button with icon and text | ||
| * @default link | ||
| */ | ||
| @Input() buttonStyle: 'link' | 'button' = 'button'; | ||
|
|
||
| /** | ||
| * Indica se l'icona va mostrata o meno. | ||
| */ | ||
| @Input() | ||
| get showIcon(): boolean { return this._showIcon; } | ||
| set showIcon(value: boolean) { this._showIcon = value; } | ||
| private _showIcon = true; | ||
| * Button direction | ||
| * - <b>left</b>: Back direction | ||
| * - <b>up</b>: Upper direction | ||
| * @default left | ||
| */ | ||
| @Input() direction: 'left' | 'up' = 'left'; | ||
|
|
||
| /** | ||
| * Indica se il testo va mostrato o meno. | ||
| */ | ||
| @Input() | ||
| get showText(): boolean { return this._showText; } | ||
| set showText(value: boolean) { this._showText = value; } | ||
| private _showText = true; | ||
| * Show/Hide icon | ||
| * @default true | ||
| */ | ||
| @Input() showIcon: BooleanInput = true; | ||
|
|
||
| /** | ||
| * Indica se il tipo di BackButton è livello superiore o torna indietro. | ||
| */ | ||
| @Input() | ||
| get type(): 'tornaIndietro' | 'livelloSuperiore' { return this._type; } | ||
| set type(value: 'tornaIndietro' | 'livelloSuperiore') { | ||
| this._type = value; | ||
| if (value === 'tornaIndietro') { | ||
| this.icon = 'arrow-left'; | ||
| this.text = ' Torna indietro'; | ||
| } else if (value === 'livelloSuperiore') { | ||
| this.icon = 'arrow-up'; | ||
| this.text = ' Livello superiore'; | ||
| } | ||
| } | ||
| private _type: 'tornaIndietro' | 'livelloSuperiore' = 'tornaIndietro'; | ||
| icon = 'it-arrow-left'; | ||
| text = 'Torna indietro'; | ||
| * Show/Hide text | ||
| * @default true | ||
| */ | ||
| @Input() showText: BooleanInput = true; | ||
|
|
||
| iconSize: IconSize = 'sm'; | ||
| buttonColor: ButtonColor = 'primary'; | ||
| /** | ||
| * Custom back logic <br/> | ||
| * | ||
| * NOTE: to use 'this' need bind function <br/> | ||
| * @example backCbFn = this.errorCallback.bind(this); | ||
| * (errorCallback is your function, pass backCbFn to the component) | ||
| */ | ||
| @Input() backFn?: (location: Location) => void; | ||
|
|
||
| get iconClass(): string { | ||
| return this.showText ? 'me-2' : ''; | ||
| get isShowIcon(): boolean { | ||
| return isTrueBooleanInput(this.showIcon); | ||
| } | ||
|
|
||
| get isShowText(): boolean { | ||
| return isTrueBooleanInput(this.showText); | ||
| } | ||
|
|
||
| constructor( | ||
| public location: Location | ||
| ) { } | ||
| public readonly _location: Location | ||
| ) { | ||
| } | ||
|
|
||
| /** | ||
| * Go back function | ||
| */ | ||
| public goBack(): void { | ||
| if (this.backFn) { | ||
| return this.backFn(this._location); | ||
| } | ||
|
|
||
| goBack(): void { | ||
| this.location.back(); | ||
| this._location.back(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters