mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 08:13:42 +00:00
[CL-707] Migrate CL codebase to signals (#15340)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<ng-template>
|
||||
@if (icon) {
|
||||
@if (icon(); as icon) {
|
||||
<i class="bwi {{ icon }} !tw-me-2" aria-hidden="true"></i>
|
||||
}
|
||||
<ng-content></ng-content>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// FIXME: Update this file to be type safe and remove this and next line
|
||||
// @ts-strict-ignore
|
||||
|
||||
import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
|
||||
import { Component, EventEmitter, Output, TemplateRef, ViewChild, input } from "@angular/core";
|
||||
import { QueryParamsHandling } from "@angular/router";
|
||||
|
||||
@Component({
|
||||
@@ -9,17 +9,13 @@ import { QueryParamsHandling } from "@angular/router";
|
||||
templateUrl: "./breadcrumb.component.html",
|
||||
})
|
||||
export class BreadcrumbComponent {
|
||||
@Input()
|
||||
icon?: string;
|
||||
readonly icon = input<string>();
|
||||
|
||||
@Input()
|
||||
route?: string | any[] = undefined;
|
||||
readonly route = input<string | any[]>();
|
||||
|
||||
@Input()
|
||||
queryParams?: Record<string, string> = {};
|
||||
readonly queryParams = input<Record<string, string>>({});
|
||||
|
||||
@Input()
|
||||
queryParamsHandling?: QueryParamsHandling;
|
||||
readonly queryParamsHandling = input<QueryParamsHandling>();
|
||||
|
||||
@Output()
|
||||
click = new EventEmitter();
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
@for (breadcrumb of beforeOverflow; track breadcrumb; let last = $last) {
|
||||
@if (breadcrumb.route) {
|
||||
@if (breadcrumb.route(); as route) {
|
||||
<a
|
||||
bitLink
|
||||
linkType="primary"
|
||||
class="tw-my-2 tw-inline-block"
|
||||
[routerLink]="breadcrumb.route"
|
||||
[queryParams]="breadcrumb.queryParams"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling"
|
||||
[routerLink]="route"
|
||||
[queryParams]="breadcrumb.queryParams()"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
|
||||
</a>
|
||||
}
|
||||
@if (!breadcrumb.route) {
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
bitLink
|
||||
@@ -39,18 +38,17 @@
|
||||
></button>
|
||||
<bit-menu #overflowMenu>
|
||||
@for (breadcrumb of overflow; track breadcrumb) {
|
||||
@if (breadcrumb.route) {
|
||||
@if (breadcrumb.route(); as route) {
|
||||
<a
|
||||
bitMenuItem
|
||||
linkType="primary"
|
||||
[routerLink]="breadcrumb.route"
|
||||
[queryParams]="breadcrumb.queryParams"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling"
|
||||
[routerLink]="route"
|
||||
[queryParams]="breadcrumb.queryParams()"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
|
||||
</a>
|
||||
}
|
||||
@if (!breadcrumb.route) {
|
||||
} @else {
|
||||
<button type="button" bitMenuItem linkType="primary" (click)="breadcrumb.onClick($event)">
|
||||
<ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
|
||||
</button>
|
||||
@@ -59,19 +57,18 @@
|
||||
</bit-menu>
|
||||
<i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
|
||||
@for (breadcrumb of afterOverflow; track breadcrumb; let last = $last) {
|
||||
@if (breadcrumb.route) {
|
||||
@if (breadcrumb.route(); as route) {
|
||||
<a
|
||||
bitLink
|
||||
linkType="primary"
|
||||
class="tw-my-2 tw-inline-block"
|
||||
[routerLink]="breadcrumb.route"
|
||||
[queryParams]="breadcrumb.queryParams"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling"
|
||||
[routerLink]="route"
|
||||
[queryParams]="breadcrumb.queryParams()"
|
||||
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
|
||||
</a>
|
||||
}
|
||||
@if (!breadcrumb.route) {
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
bitLink
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, ContentChildren, Input, QueryList } from "@angular/core";
|
||||
import { Component, ContentChildren, QueryList, input } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
import { IconButtonModule } from "../icon-button";
|
||||
@@ -19,8 +19,7 @@ import { BreadcrumbComponent } from "./breadcrumb.component";
|
||||
imports: [CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
|
||||
})
|
||||
export class BreadcrumbsComponent {
|
||||
@Input()
|
||||
show = 3;
|
||||
readonly show = input(3);
|
||||
|
||||
private breadcrumbs: BreadcrumbComponent[] = [];
|
||||
|
||||
@@ -31,14 +30,14 @@ export class BreadcrumbsComponent {
|
||||
|
||||
protected get beforeOverflow() {
|
||||
if (this.hasOverflow) {
|
||||
return this.breadcrumbs.slice(0, this.show - 1);
|
||||
return this.breadcrumbs.slice(0, this.show() - 1);
|
||||
}
|
||||
|
||||
return this.breadcrumbs;
|
||||
}
|
||||
|
||||
protected get overflow() {
|
||||
return this.breadcrumbs.slice(this.show - 1, -1);
|
||||
return this.breadcrumbs.slice(this.show() - 1, -1);
|
||||
}
|
||||
|
||||
protected get afterOverflow() {
|
||||
@@ -46,6 +45,6 @@ export class BreadcrumbsComponent {
|
||||
}
|
||||
|
||||
protected get hasOverflow() {
|
||||
return this.breadcrumbs.length > this.show;
|
||||
return this.breadcrumbs.length > this.show();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user