@obliczeniowo/elementary
Version:
Library made in Angular version 20
70 lines (65 loc) • 11.1 kB
JavaScript
import * as i3 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i0 from '@angular/core';
import { input, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import { Animations } from '@obliczeniowo/elementary/animations';
class DropdownButtonComponent {
buttons = input([]);
templateRef = input();
selected;
isOpen = false;
ngOnInit() {
if (this.buttons && !this.selected) {
this.selected = this.buttons()[0];
}
}
clicked(button) {
this.selected = button;
this.isOpen = false;
button.cb();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: DropdownButtonComponent, isStandalone: false, selector: "obl-dropdown-button", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (buttons().length) {\n <div class=\"button\" cdkOverlayOrigin #dropDown=\"cdkOverlayOrigin\">\n @if (selected) {\n <button (click)=\"selected.cb()\">\n <ng-container\n *ngTemplateOutlet=\"templateRef() || img; context: { $implicit: selected }\"\n ></ng-container>\n </button>\n }\n <obl-expand-button\n [isOpen]=\"isOpen\"\n (click)=\"isOpen = !isOpen\"\n ></obl-expand-button>\n </div>\n\n <ng-template\n #buttonsTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"isOpen = !isOpen\"\n >\n <div class=\"dropdown-buttons\">\n @for (button of buttons(); track $index) {\n @if (button !== selected) {\n <button (click)=\"clicked(button)\">\n <ng-container\n *ngTemplateOutlet=\"\n templateRef() || img;\n context: { $implicit: button }\n \"\n ></ng-container>\n </button>\n }\n }\n </div>\n </ng-template>\n}\n\n<ng-template #img let-button>\n @if (button.imgIcon) {\n <img [src]=\"button.imgIcon\" />\n }\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}.dropdown-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--default-background-color);border-radius:5px}.button{display:flex;align-items:center}button{background:none;color:inherit;border:none;padding:5px;font:inherit;cursor:pointer;outline:inherit}button:hover{background-color:var(--default-hover-color)}button.drop{width:20px;padding:5px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i3.ExpandButtonComponent, selector: "obl-expand-button", inputs: ["isOpen"] }], animations: [
Animations.rotate180deg
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dropdown-button', animations: [
Animations.rotate180deg
], standalone: false, template: "@if (buttons().length) {\n <div class=\"button\" cdkOverlayOrigin #dropDown=\"cdkOverlayOrigin\">\n @if (selected) {\n <button (click)=\"selected.cb()\">\n <ng-container\n *ngTemplateOutlet=\"templateRef() || img; context: { $implicit: selected }\"\n ></ng-container>\n </button>\n }\n <obl-expand-button\n [isOpen]=\"isOpen\"\n (click)=\"isOpen = !isOpen\"\n ></obl-expand-button>\n </div>\n\n <ng-template\n #buttonsTmpl\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"isOpen = !isOpen\"\n >\n <div class=\"dropdown-buttons\">\n @for (button of buttons(); track $index) {\n @if (button !== selected) {\n <button (click)=\"clicked(button)\">\n <ng-container\n *ngTemplateOutlet=\"\n templateRef() || img;\n context: { $implicit: button }\n \"\n ></ng-container>\n </button>\n }\n }\n </div>\n </ng-template>\n}\n\n<ng-template #img let-button>\n @if (button.imgIcon) {\n <img [src]=\"button.imgIcon\" />\n }\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}.dropdown-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--default-background-color);border-radius:5px}.button{display:flex;align-items:center}button{background:none;color:inherit;border:none;padding:5px;font:inherit;cursor:pointer;outline:inherit}button:hover{background-color:var(--default-hover-color)}button.drop{width:20px;padding:5px 0}\n"] }]
}] });
class DropdownButtonModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonModule, declarations: [DropdownButtonComponent], imports: [CommonModule,
OverlayModule,
ButtonsModule], exports: [DropdownButtonComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonModule, imports: [CommonModule,
OverlayModule,
ButtonsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DropdownButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DropdownButtonComponent
],
imports: [
CommonModule,
OverlayModule,
ButtonsModule
],
exports: [
DropdownButtonComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DropdownButtonComponent, DropdownButtonModule };
//# sourceMappingURL=obliczeniowo-elementary-dropdown-button.mjs.map