@alfresco/adf-core
Version:
187 lines (180 loc) • 15.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, ViewChild, Component, EventEmitter, ContentChildren, ViewChildren, Output, Input, ChangeDetectionStrategy } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { startWith, map } from 'rxjs/operators';
import { TranslatePipe } from '@ngx-translate/core';
/*!
* @license
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/** @internal */
class BreadcrumbFocusDirective {
constructor(elementRef) {
this.elementRef = elementRef;
}
focusOnFirstFocusableElement() {
this.getFocusableElements(this.elementRef.nativeElement)[0].focus();
}
getFocusableElements(root) {
const allFocusableElements = `button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])`;
return Array.from(root.querySelectorAll(allFocusableElements)).filter((element) => !element.hasAttribute('disabled') && element.tabIndex >= 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: BreadcrumbFocusDirective, isStandalone: true, selector: "[adf-breadcrumb-focus]", host: { classAttribute: "adf-breadcrumb-focus" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbFocusDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[adf-breadcrumb-focus]',
host: {
class: 'adf-breadcrumb-focus'
}
}]
}], ctorParameters: () => [{ type: i0.ElementRef }] });
/*!
* @license
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class BreadcrumbItemComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "adf-breadcrumb-item", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["breadcrumbItemTemplate"], descendants: true, static: true }], ngImport: i0, template: `
<ng-template #breadcrumbItemTemplate>
<ng-content />
</ng-template>
`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'adf-breadcrumb-item',
template: `
<ng-template #breadcrumbItemTemplate>
<ng-content />
</ng-template>
`
}]
}], propDecorators: { templateRef: [{
type: ViewChild,
args: ['breadcrumbItemTemplate', { static: true }]
}] } });
/*!
* @license
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class BreadcrumbComponent {
constructor(cdr) {
this.cdr = cdr;
this._breadcrumbTemplateRefs = [];
this.compact = false;
this.compactChange = new EventEmitter();
this.selectedBreadcrumbs = [];
}
ngAfterContentInit() {
this.breadcrumbItems.changes
.pipe(startWith(this.breadcrumbItems), map((breadcrumbItems) => this.mapToTemplateRefs(breadcrumbItems)))
.subscribe((templateRefs) => {
this._breadcrumbTemplateRefs = templateRefs;
this.setBreadcrumbs(templateRefs);
});
}
ngOnChanges(changes) {
if (changes.compact) {
this.setBreadcrumbs(this._breadcrumbTemplateRefs);
}
}
toggleCompact(compact = false) {
this.compact = compact;
this.setBreadcrumbs(this._breadcrumbTemplateRefs);
this.compactChange.emit(this.compact);
if (!compact) {
this.breadcrumbFocusItems.get(1)?.focusOnFirstFocusableElement();
}
}
setBreadcrumbs(breadcrumbs) {
this.selectedBreadcrumbs = this.compact && breadcrumbs.length > 2 ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]] : [...breadcrumbs];
this.cdr.detectChanges();
}
mapToTemplateRefs(breadcrumbItems) {
return breadcrumbItems.toArray().map((breadcrumbItem) => breadcrumbItem.templateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BreadcrumbComponent, isStandalone: true, selector: "adf-breadcrumb", inputs: { compact: "compact" }, outputs: { compactChange: "compactChange" }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], viewQueries: [{ propertyName: "breadcrumbFocusItems", predicate: BreadcrumbFocusDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <nav class=\"adf-breadcrumb\" [class.adf-breadcrumb--compact]=\"compact\" [attr.aria-label]=\"'CORE.BREADCRUMBS.TITLE' | translate\" >\n <ol>\n <ng-container *ngFor=\"let breadcrumbTemplate of selectedBreadcrumbs; last as last\">\n <li adf-breadcrumb-focus class=\"adf-breadcrumb__item-wrapper\">\n <ng-container *ngTemplateOutlet=\"breadcrumbTemplate\" />\n <div *ngIf=\"!last\" class=\"adf-breadcrumb__chevron\" [class.adf-breadcrumb__chevron-before--compact]=\"compact\" ></div>\n </li>\n\n <li *ngIf=\"!last && compact === true\" class=\"adf-breadcrumb__show-all-button-wrapper\">\n <button\n mat-icon-button\n (click)=\"toggleCompact()\"\n color=\"primary\"\n [title]=\"'CORE.BREADCRUMBS.SHOWALL' | translate\"\n [attr.aria-label]=\"'CORE.BREADCRUMBS.SHOWALL' | translate\"\n >\n <mat-icon class=\"adf-breadcrumb__show-all-button-icon--rotate\">more_vert</mat-icon >\n </button>\n <div class=\"adf-breadcrumb__chevron\" [class.adf-breadcrumb__chevron-after--compact]=\"compact\" ></div>\n </li>\n </ng-container>\n </ol>\n </nav>\n</ng-container>\n", styles: ["ol{margin:0;padding:0;display:flex;flex-wrap:wrap;min-height:40px}.adf-breadcrumb__item-wrapper{display:flex;align-items:center}.adf-breadcrumb__chevron{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.229292 0.234315C-0.0751287 0.546734 -0.0751287 1.05327 0.229292 1.36569L2.79616 4L0.229293 6.63432C-0.0751284 6.94673 -0.0751284 7.45327 0.229293 7.76569C0.533714 8.0781 1.02728 8.0781 1.3317 7.76569L4.44943 4.56604L5.00098 4L1.3317 0.234315C1.02728 -0.0781049 0.533713 -0.0781049 0.229292 0.234315Z\" fill=\"%236B7280\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;width:5px;height:8px;margin:0 8px}:host-context([dir=rtl]) .adf-breadcrumb__chevron{transform:scaleX(-1)}.adf-breadcrumb__chevron-before--compact{margin:0 4px 0 8px}:host-context([dir=rtl]) .adf-breadcrumb__chevron-before--compact{margin:0 8px 0 4px}.adf-breadcrumb__chevron-after--compact{margin:0 8px 0 4px}:host-context([dir=rtl]) .adf-breadcrumb__chevron-after--compact{margin:0 4px 0 8px}.adf-breadcrumb__show-all-button-wrapper{display:flex;align-items:center}.adf-breadcrumb__show-all-button-icon--rotate{transform:rotate(90deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: BreadcrumbFocusDirective, selector: "[adf-breadcrumb-focus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'adf-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TranslatePipe, MatButtonModule, BreadcrumbFocusDirective], template: "<ng-container>\n <nav class=\"adf-breadcrumb\" [class.adf-breadcrumb--compact]=\"compact\" [attr.aria-label]=\"'CORE.BREADCRUMBS.TITLE' | translate\" >\n <ol>\n <ng-container *ngFor=\"let breadcrumbTemplate of selectedBreadcrumbs; last as last\">\n <li adf-breadcrumb-focus class=\"adf-breadcrumb__item-wrapper\">\n <ng-container *ngTemplateOutlet=\"breadcrumbTemplate\" />\n <div *ngIf=\"!last\" class=\"adf-breadcrumb__chevron\" [class.adf-breadcrumb__chevron-before--compact]=\"compact\" ></div>\n </li>\n\n <li *ngIf=\"!last && compact === true\" class=\"adf-breadcrumb__show-all-button-wrapper\">\n <button\n mat-icon-button\n (click)=\"toggleCompact()\"\n color=\"primary\"\n [title]=\"'CORE.BREADCRUMBS.SHOWALL' | translate\"\n [attr.aria-label]=\"'CORE.BREADCRUMBS.SHOWALL' | translate\"\n >\n <mat-icon class=\"adf-breadcrumb__show-all-button-icon--rotate\">more_vert</mat-icon >\n </button>\n <div class=\"adf-breadcrumb__chevron\" [class.adf-breadcrumb__chevron-after--compact]=\"compact\" ></div>\n </li>\n </ng-container>\n </ol>\n </nav>\n</ng-container>\n", styles: ["ol{margin:0;padding:0;display:flex;flex-wrap:wrap;min-height:40px}.adf-breadcrumb__item-wrapper{display:flex;align-items:center}.adf-breadcrumb__chevron{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.229292 0.234315C-0.0751287 0.546734 -0.0751287 1.05327 0.229292 1.36569L2.79616 4L0.229293 6.63432C-0.0751284 6.94673 -0.0751284 7.45327 0.229293 7.76569C0.533714 8.0781 1.02728 8.0781 1.3317 7.76569L4.44943 4.56604L5.00098 4L1.3317 0.234315C1.02728 -0.0781049 0.533713 -0.0781049 0.229292 0.234315Z\" fill=\"%236B7280\"/>%0A</svg>%0A');background-repeat:no-repeat;background-position:center;width:5px;height:8px;margin:0 8px}:host-context([dir=rtl]) .adf-breadcrumb__chevron{transform:scaleX(-1)}.adf-breadcrumb__chevron-before--compact{margin:0 4px 0 8px}:host-context([dir=rtl]) .adf-breadcrumb__chevron-before--compact{margin:0 8px 0 4px}.adf-breadcrumb__chevron-after--compact{margin:0 8px 0 4px}:host-context([dir=rtl]) .adf-breadcrumb__chevron-after--compact{margin:0 4px 0 8px}.adf-breadcrumb__show-all-button-wrapper{display:flex;align-items:center}.adf-breadcrumb__show-all-button-icon--rotate{transform:rotate(90deg)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { compact: [{
type: Input
}], compactChange: [{
type: Output
}], breadcrumbFocusItems: [{
type: ViewChildren,
args: [BreadcrumbFocusDirective]
}], breadcrumbItems: [{
type: ContentChildren,
args: [BreadcrumbItemComponent]
}] } });
/*!
* @license
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Generated bundle index. Do not edit.
*/
export { BreadcrumbComponent, BreadcrumbItemComponent };
//# sourceMappingURL=alfresco-adf-core-breadcrumbs.mjs.map