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

update ids & remove on push

Browse Source
This commit is contained in:
Dan Percic 2023-02-08 14:46:23 +02:00
parent 40517f145e
commit fe9a50d367
12 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" mat-button>
<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
<span>{{ label }}</span>
<mat-icon class="chevron-icon" svgIcon="iqser:arrow-down"></mat-icon>
</button>

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

@ -1,14 +1,15 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Component, Input } from '@angular/core';
import { randomString } from '../../utils';
@Component({
selector: 'iqser-chevron-button [label]',
templateUrl: './chevron-button.component.html',
styleUrls: ['./chevron-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChevronButtonComponent {
@Input() label!: string;
@Input() showDot = false;
@Input() primary = false;
@Input() disabled = false;
@Input() buttonId = `${randomString()}-chevron-button`;
}

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

@ -13,11 +13,12 @@
[class.primary]="type === circleButtonTypes.primary"
[class.warn]="type === circleButtonTypes.warn"
[disabled]="disabled"
[id]="id ? id : buttonId"
[id]="buttonId"
[type]="isSubmit ? 'submit' : 'button'"
mat-icon-button
>
<mat-icon [svgIcon]="icon"></mat-icon>
</button>
<div *ngIf="showDot" class="dot"></div>
</div>

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

@ -1,18 +1,17 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
import { IqserTooltipPosition, IqserTooltipPositions } from '../../utils';
import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
@Component({
selector: 'iqser-circle-button [icon]',
templateUrl: './circle-button.component.html',
styleUrls: ['./circle-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CircleButtonComponent implements OnInit {
readonly circleButtonTypes = CircleButtonTypes;
@Input() id!: string;
@Input() buttonId = `${randomString()}-circle-button`;
@Input() icon!: string;
@Input() tooltip?: string;
@Input() tooltipClass?: string;
@ -32,10 +31,6 @@ export class CircleButtonComponent implements OnInit {
constructor(private readonly _elementRef: ElementRef) {}
get buttonId(): string {
return `${Math.random().toString(36).substring(2, 9)}-button`;
}
ngOnInit(): void {
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);

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

@ -1,7 +1,7 @@
<button
(click)="!disabled && action.emit($event)"
[disabled]="disabled"
[id]="id ? id : buttonId"
[id]="buttonId"
[ngClass]="classes"
[type]="submit ? 'submit' : 'button'"
mat-button

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

@ -1,18 +1,16 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
import { randomString } from '../../utils';
@Component({
selector: 'iqser-icon-button [label]',
templateUrl: './icon-button.component.html',
styleUrls: ['./icon-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconButtonComponent {
readonly iconButtonTypes = IconButtonTypes;
readonly buttonId: string;
@Input() label!: string;
@Input() id?: string;
@Input() buttonId = `${randomString()}-icon-button`;
@Input() icon?: string;
@Input() showDot = false;
@Input() disabled = false;
@ -20,10 +18,6 @@ export class IconButtonComponent {
@Input() type: IconButtonType = IconButtonTypes.default;
@Output() readonly action = new EventEmitter<MouseEvent>();
constructor() {
this.buttonId = `${Math.random().toString(36).substring(2, 9)}-button`;
}
get classes(): Record<string, boolean> {
return {
overlay: this.showDot,

2
src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
View File

@ -33,7 +33,7 @@
[disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
[label]="config.confirmationText"
[type]="iconButtonTypes.primary"
id="confirm"
buttonId="confirm"
>
</iqser-icon-button>

2
src/lib/filtering/popup-filter/popup-filter.component.html
View File

@ -8,7 +8,7 @@
[label]="primaryGroup.label?.capitalize() || ('filter-menu.label' | translate)"
[matMenuTriggerFor]="filterMenu"
[showDot]="hasActiveFilters$ | async"
id="{{ primaryGroup.slug }}"
buttonId="{{ primaryGroup.slug }}"
></iqser-icon-button>
</ng-container>

3
src/lib/inputs/details-radio/details-radio.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Component, Input } from '@angular/core';
import { DetailsRadioOption } from './details-radio-option';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormFieldComponent } from '../form-field/form-field-component.directive';
@ -7,7 +7,6 @@ import { FormFieldComponent } from '../form-field/form-field-component.directive
selector: 'iqser-details-radio [options]',
templateUrl: './details-radio.component.html',
styleUrls: ['./details-radio.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,

6
src/lib/listing/page-header/page-header.component.html
View File

@ -44,11 +44,11 @@
<iqser-icon-button
(action)="config.action($event)"
*ngIf="!config.hide"
[buttonId]="config.label.replace('.', '-')"
[icon]="config.icon"
[id]="config.label.replace('.', '-')"
[iqserHelpMode]="config.helpModeKey"
[overlappingElements]="config.overlappingElements"
[label]="config.label | translate"
[overlappingElements]="config.overlappingElements"
[type]="config.type"
></iqser-icon-button>
</ng-container>
@ -58,9 +58,9 @@
<iqser-circle-button
(action)="config.action($event)"
*ngIf="!config.hide"
[buttonId]="config.id"
[disabled]="config.disabled$ && (config.disabled$ | async)"
[icon]="config.icon"
[id]="config.id"
[iqserHelpMode]="config.helpModeKey"
[overlappingElements]="config.overlappingElements"
[tooltipPosition]="'below'"

3
src/lib/upload-file/upload-file.component.ts
View File

@ -1,10 +1,9 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
@Component({
selector: 'iqser-upload-file',
templateUrl: './upload-file.component.html',
styleUrls: ['./upload-file.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UploadFileComponent {
@ViewChild('attachFileInput', { static: true }) attachFileInput!: ElementRef;

4
src/lib/utils/functions.ts
View File

@ -73,6 +73,10 @@ export function toNumber(str: string): number {
}
}
export function randomString() {
return Math.random().toString(36).substring(2, 9);
}
export function trackByFactory<T extends ITrackable<PrimaryKey>, PrimaryKey extends Id = T['id']>() {
return (_index: number, item: T): Id => item.id;
}