Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check for routerLink when using stop propagation

Browse Source
This commit is contained in:
Dan Percic 2023-03-30 14:06:31 +03:00
parent bb562d63fd
commit dbe1e9fae1
5 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/buttons/chevron-button/chevron-button.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { randomString } from '../../utils';
import { NgIf } from '@angular/common';
import { MatLegacyButtonModule } from '@angular/material/legacy-button';
@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
selector: 'iqser-chevron-button [label]',
templateUrl: './chevron-button.component.html',
styleUrls: ['./chevron-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, MatIconModule, MatLegacyButtonModule],
})

10
src/lib/buttons/circle-button/circle-button.component.html
View File

@ -1,15 +1,15 @@
<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
<button
(click)="performAction($event)"
[class.dark-bg]="type === circleButtonTypes.dark"
[class.dark-bg]="type === _circleButtonTypes.dark"
[class.grey-selected]="greySelected"
[class.help]="type === circleButtonTypes.help"
[class.help]="type === _circleButtonTypes.help"
[class.overlay]="showDot"
[class.primary]="type === circleButtonTypes.primary"
[class.warn]="type === circleButtonTypes.warn"
[class.primary]="type === _circleButtonTypes.primary"
[class.warn]="type === _circleButtonTypes.warn"
[disabled]="disabled"
[id]="buttonId"
[stopPropagation]="action.observed"
[stopPropagation]="action.observed && !_hasRouterLink"
[type]="isSubmit ? 'submit' : 'button'"
mat-icon-button
>

16
src/lib/buttons/circle-button/circle-button.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
@ -6,17 +6,17 @@ import { NgIf } from '@angular/common';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule } from '@angular/material/icon';
import { StopPropagationDirective } from '../../directives';
import { RouterLink } from '@angular/router';
@Component({
selector: 'iqser-circle-button [icon]',
templateUrl: './circle-button.component.html',
styleUrls: ['./circle-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
})
export class CircleButtonComponent implements OnInit {
readonly circleButtonTypes = CircleButtonTypes;
@Input() buttonId = `${randomString()}-circle-button`;
@Input() icon!: string;
@Input() tooltip?: string;
@ -32,14 +32,14 @@ export class CircleButtonComponent implements OnInit {
@Input() size = 34;
@Input() iconSize = 14;
@Output() readonly action = new EventEmitter<MouseEvent>();
protected readonly _circleButtonTypes = CircleButtonTypes;
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
@ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
constructor(private readonly _elementRef: ElementRef) {}
readonly #elementRef = inject(ElementRef<HTMLElement>);
ngOnInit(): void {
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);
this.#elementRef.nativeElement.style.setProperty('--size', `${this.size}px`);
this.#elementRef.nativeElement.style.setProperty('--iconSize', `${this.iconSize}px`);
}
performAction($event: MouseEvent) {

2
src/lib/buttons/icon-button/icon-button.component.html
View File

@ -3,7 +3,7 @@
[disabled]="disabled"
[id]="buttonId"
[ngClass]="classes"
[stopPropagation]="action.observed"
[stopPropagation]="action.observed && !_hasRouterLink"
[type]="submit ? 'submit' : 'button'"
mat-button
>

6
src/lib/buttons/icon-button/icon-button.component.ts
View File

@ -1,20 +1,21 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
import { randomString } from '../../utils';
import { NgClass, NgIf } from '@angular/common';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule } from '@angular/material/icon';
import { StopPropagationDirective } from '../../directives';
import { RouterLink } from '@angular/router';
@Component({
selector: 'iqser-icon-button [label]',
templateUrl: './icon-button.component.html',
styleUrls: ['./icon-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
})
export class IconButtonComponent {
readonly iconButtonTypes = IconButtonTypes;
@Input() label!: string;
@Input() buttonId = `${randomString()}-icon-button`;
@Input() icon?: string;
@ -23,6 +24,7 @@ export class IconButtonComponent {
@Input() submit = false;
@Input() type: IconButtonType = IconButtonTypes.default;
@Output() readonly action = new EventEmitter<MouseEvent>();
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
get classes(): Record<string, boolean> {
return {