@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
30 lines • 9.25 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../command-palette.component";
export class BreadcrumbComponent {
constructor(commandPalette) {
this.commandPalette = commandPalette;
this.breadcrumbs = [];
}
selectBreadcrumb(crumb) {
const index = this.breadcrumbs.indexOf(crumb);
if (index == -1)
throw new Error("Something terrible happened.");
const layer = this.breadcrumbs.at(-1);
layer.destroying = true;
setTimeout(() => {
this.commandPalette.setCommandList(this.breadcrumbs.at(-2).commands);
this.commandPalette.breadcrumbs.pop();
this.commandPalette.activeIndex = layer.selectedIndex;
}, 190);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.CommandPaletteComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BreadcrumbComponent, isStandalone: true, selector: "ngx-commandpalette-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "@for (crumb of breadcrumbs; track crumb; let i = $index) {\n <div class=\"crumb\">\n <div\n class=\"crumb_inner\"\n [class.destroy]=\"crumb.destroying\"\n [class.root]=\"i == 0\"\n (click)=\"selectBreadcrumb(crumb)\"\n >\n {{crumb.action.label}}\n </div>\n </div>\n}\n", styles: [":host{display:flex}.crumb{overflow:hidden;height:26px;padding:0 16px;margin:0 -16px}.crumb .crumb_inner{--background-color: #3498db;color:#fff;position:relative;background:var(--background-color);padding:2px 5px 0 6px;margin-right:12px;text-align:center;white-space:pre;font-size:14px;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform var(--transition),opacity var(--transition),width var(--transition);animation:crumbIn var(--transition) 1}.crumb .crumb_inner.destroy{animation:crumbOut var(--transition) 1}.crumb .crumb_inner:before,.crumb .crumb_inner:after{content:\"\";position:absolute;top:0;border:0 solid var(--background-color);border-width:14px 8px;width:0;height:0}.crumb .crumb_inner:before{left:-14px;border-left-color:#0000}.crumb .crumb_inner:after{left:100%;border-color:#0000;border-left-color:var(--background-color)}.crumb .crumb_inner:hover{--background-color: #1abc9c}.crumb .crumb_inner:active{--background-color: #16a085}.crumb:nth-child(2n) .crumb_inner{--background-color: #2980b9}.crumb:first-child .crumb_inner{padding-left:6px;border-radius:4px 0 0 4px}.crumb:first-child .crumb_inner:before{border:none}.crumb:last-child:not(:only-child) .crumb_inner{padding-right:6px;border-radius:0 4px 4px 0}.crumb:last-child:not(:only-child) .crumb_inner:after{border:none}@keyframes crumbIn{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes crumbOut{to{transform:translate(-10px);opacity:0}0%{transform:translate(0);opacity:1}}mat-form-field input{transition:width .2s ease,opacity .15s 0ms cubic-bezier(.4,0,.2,1)!important}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-commandpalette-breadcrumb', standalone: true, template: "@for (crumb of breadcrumbs; track crumb; let i = $index) {\n <div class=\"crumb\">\n <div\n class=\"crumb_inner\"\n [class.destroy]=\"crumb.destroying\"\n [class.root]=\"i == 0\"\n (click)=\"selectBreadcrumb(crumb)\"\n >\n {{crumb.action.label}}\n </div>\n </div>\n}\n", styles: [":host{display:flex}.crumb{overflow:hidden;height:26px;padding:0 16px;margin:0 -16px}.crumb .crumb_inner{--background-color: #3498db;color:#fff;position:relative;background:var(--background-color);padding:2px 5px 0 6px;margin-right:12px;text-align:center;white-space:pre;font-size:14px;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform var(--transition),opacity var(--transition),width var(--transition);animation:crumbIn var(--transition) 1}.crumb .crumb_inner.destroy{animation:crumbOut var(--transition) 1}.crumb .crumb_inner:before,.crumb .crumb_inner:after{content:\"\";position:absolute;top:0;border:0 solid var(--background-color);border-width:14px 8px;width:0;height:0}.crumb .crumb_inner:before{left:-14px;border-left-color:#0000}.crumb .crumb_inner:after{left:100%;border-color:#0000;border-left-color:var(--background-color)}.crumb .crumb_inner:hover{--background-color: #1abc9c}.crumb .crumb_inner:active{--background-color: #16a085}.crumb:nth-child(2n) .crumb_inner{--background-color: #2980b9}.crumb:first-child .crumb_inner{padding-left:6px;border-radius:4px 0 0 4px}.crumb:first-child .crumb_inner:before{border:none}.crumb:last-child:not(:only-child) .crumb_inner{padding-right:6px;border-radius:0 4px 4px 0}.crumb:last-child:not(:only-child) .crumb_inner:after{border:none}@keyframes crumbIn{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes crumbOut{to{transform:translate(-10px);opacity:0}0%{transform:translate(0);opacity:1}}mat-form-field input{transition:width .2s ease,opacity .15s 0ms cubic-bezier(.4,0,.2,1)!important}\n"] }]
}], ctorParameters: () => [{ type: i1.CommandPaletteComponent }], propDecorators: { breadcrumbs: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vY29tbWFuZC1wYWxldHRlL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vY29tbWFuZC1wYWxldHRlL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBVWpELE1BQU0sT0FBTyxtQkFBbUI7SUFTNUIsWUFDWSxjQUF1QztRQUF2QyxtQkFBYyxHQUFkLGNBQWMsQ0FBeUI7UUFSMUMsZ0JBQVcsR0FLZCxFQUFFLENBQUM7SUFNVCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBSztRQUNsQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUM7WUFDWCxNQUFNLElBQUksS0FBSyxDQUFDLDhCQUE4QixDQUFDLENBQUM7UUFFcEQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0QyxLQUFLLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztRQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLGNBQWMsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUNyRSxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUN0QyxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFDO1FBQzFELENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNaLENBQUM7K0dBM0JRLG1CQUFtQjttR0FBbkIsbUJBQW1CLGlJQ1ZoQyxvV0FZQTs7NEZERmEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNJLCtCQUErQixjQUc3QixJQUFJOzRGQUlQLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tYW5kUGFsZXR0ZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbW1hbmQtcGFsZXR0ZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tbWFuZEFjdGlvbiB9IGZyb20gJy4uL2NvbW1hbmQtcGFsZXR0ZS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtY29tbWFuZHBhbGV0dGUtYnJlYWRjcnVtYicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2JyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJDb21wb25lbnQge1xuXG4gICAgQElucHV0KCkgYnJlYWRjcnVtYnM6IHtcbiAgICAgICAgYWN0aW9uOiBDb21tYW5kQWN0aW9uLFxuICAgICAgICBjb21tYW5kczogQ29tbWFuZEFjdGlvbltdLFxuICAgICAgICBkZXN0cm95aW5nOiBib29sZWFuLFxuICAgICAgICBzZWxlY3RlZEluZGV4OiBudW1iZXI7XG4gICAgfVtdID0gW107XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBjb21tYW5kUGFsZXR0ZTogQ29tbWFuZFBhbGV0dGVDb21wb25lbnRcbiAgICApIHtcblxuICAgIH1cblxuICAgIHNlbGVjdEJyZWFkY3J1bWIoY3J1bWIpIHtcbiAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLmJyZWFkY3J1bWJzLmluZGV4T2YoY3J1bWIpO1xuICAgICAgICBpZiAoaW5kZXggPT0gLTEpXG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJTb21ldGhpbmcgdGVycmlibGUgaGFwcGVuZWQuXCIpO1xuXG4gICAgICAgIGNvbnN0IGxheWVyID0gdGhpcy5icmVhZGNydW1icy5hdCgtMSk7XG4gICAgICAgIGxheWVyLmRlc3Ryb3lpbmcgPSB0cnVlO1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuY29tbWFuZFBhbGV0dGUuc2V0Q29tbWFuZExpc3QodGhpcy5icmVhZGNydW1icy5hdCgtMikuY29tbWFuZHMpO1xuICAgICAgICAgICAgdGhpcy5jb21tYW5kUGFsZXR0ZS5icmVhZGNydW1icy5wb3AoKTtcbiAgICAgICAgICAgIHRoaXMuY29tbWFuZFBhbGV0dGUuYWN0aXZlSW5kZXggPSBsYXllci5zZWxlY3RlZEluZGV4O1xuICAgICAgICB9LCAxOTApO1xuICAgIH1cbn1cbiIsIkBmb3IgKGNydW1iIG9mIGJyZWFkY3J1bWJzOyB0cmFjayBjcnVtYjsgbGV0IGkgPSAkaW5kZXgpIHtcbiAgICA8ZGl2IGNsYXNzPVwiY3J1bWJcIj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3M9XCJjcnVtYl9pbm5lclwiXG4gICAgICAgICAgICBbY2xhc3MuZGVzdHJveV09XCJjcnVtYi5kZXN0cm95aW5nXCJcbiAgICAgICAgICAgIFtjbGFzcy5yb290XT1cImkgPT0gMFwiXG4gICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0QnJlYWRjcnVtYihjcnVtYilcIlxuICAgICAgICA+XG4gICAgICAgICAgICAgICAge3tjcnVtYi5hY3Rpb24ubGFiZWx9fVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbn1cbiJdfQ==