@dotglitch/ngx-common
Version:
Angular components and utilities that are commonly used.
30 lines • 9.31 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.1.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.CommandPaletteComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", 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.1.2", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2NvbXBvbmVudHMvY29tbWFuZC1wYWxldHRlL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21tb24vc3JjL2NvbXBvbmVudHMvY29tbWFuZC1wYWxldHRlL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBVWpELE1BQU0sT0FBTyxtQkFBbUI7SUFTNUIsWUFDWSxjQUF1QztRQUF2QyxtQkFBYyxHQUFkLGNBQWMsQ0FBeUI7UUFSMUMsZ0JBQVcsR0FLZCxFQUFFLENBQUM7SUFNVCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBSztRQUNsQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUM7WUFDWCxNQUFNLElBQUksS0FBSyxDQUFDLDhCQUE4QixDQUFDLENBQUM7UUFFcEQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0QyxLQUFLLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztRQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLGNBQWMsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUNyRSxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUN0QyxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFDO1FBQzFELENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQTtJQUNYLENBQUM7OEdBM0JRLG1CQUFtQjtrR0FBbkIsbUJBQW1CLGlJQ1ZoQyxvV0FZQTs7MkZERmEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNJLCtCQUErQixjQUc3QixJQUFJOzRGQUlQLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tYW5kUGFsZXR0ZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbW1hbmQtcGFsZXR0ZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tbWFuZEFjdGlvbiB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL2NvbW1hbmQtcGFsZXR0ZS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtY29tbWFuZHBhbGV0dGUtYnJlYWRjcnVtYicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2JyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJDb21wb25lbnQge1xuXG4gICAgQElucHV0KCkgYnJlYWRjcnVtYnM6IHtcbiAgICAgICAgYWN0aW9uOiBDb21tYW5kQWN0aW9uLFxuICAgICAgICBjb21tYW5kczogQ29tbWFuZEFjdGlvbltdLFxuICAgICAgICBkZXN0cm95aW5nOiBib29sZWFuLFxuICAgICAgICBzZWxlY3RlZEluZGV4OiBudW1iZXJcbiAgICB9W10gPSBbXTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIGNvbW1hbmRQYWxldHRlOiBDb21tYW5kUGFsZXR0ZUNvbXBvbmVudFxuICAgICkge1xuXG4gICAgfVxuXG4gICAgc2VsZWN0QnJlYWRjcnVtYihjcnVtYikge1xuICAgICAgICBjb25zdCBpbmRleCA9IHRoaXMuYnJlYWRjcnVtYnMuaW5kZXhPZihjcnVtYik7XG4gICAgICAgIGlmIChpbmRleCA9PSAtMSlcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcIlNvbWV0aGluZyB0ZXJyaWJsZSBoYXBwZW5lZC5cIik7XG5cbiAgICAgICAgY29uc3QgbGF5ZXIgPSB0aGlzLmJyZWFkY3J1bWJzLmF0KC0xKTtcbiAgICAgICAgbGF5ZXIuZGVzdHJveWluZyA9IHRydWU7XG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5jb21tYW5kUGFsZXR0ZS5zZXRDb21tYW5kTGlzdCh0aGlzLmJyZWFkY3J1bWJzLmF0KC0yKS5jb21tYW5kcyk7XG4gICAgICAgICAgICB0aGlzLmNvbW1hbmRQYWxldHRlLmJyZWFkY3J1bWJzLnBvcCgpO1xuICAgICAgICAgICAgdGhpcy5jb21tYW5kUGFsZXR0ZS5hY3RpdmVJbmRleCA9IGxheWVyLnNlbGVjdGVkSW5kZXg7XG4gICAgICAgIH0sIDE5MClcbiAgICB9XG59XG4iLCJAZm9yIChjcnVtYiBvZiBicmVhZGNydW1iczsgdHJhY2sgY3J1bWI7IGxldCBpID0gJGluZGV4KSB7XG4gICAgPGRpdiBjbGFzcz1cImNydW1iXCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwiY3J1bWJfaW5uZXJcIlxuICAgICAgICAgICAgW2NsYXNzLmRlc3Ryb3ldPVwiY3J1bWIuZGVzdHJveWluZ1wiXG4gICAgICAgICAgICBbY2xhc3Mucm9vdF09XCJpID09IDBcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdEJyZWFkY3J1bWIoY3J1bWIpXCJcbiAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt7Y3J1bWIuYWN0aW9uLmxhYmVsfX1cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG59XG4iXX0=