@obliczeniowo/elementary
Version:
Library made in Angular version 20
358 lines (350 loc) • 21.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component, input, HostListener, HostBinding, Directive, NgModule, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerComponent, LoadingModule } from '@obliczeniowo/elementary/loading';
import * as i1 from '@obliczeniowo/elementary/icons';
import { IconComponent, IconsModule } from '@obliczeniowo/elementary/icons';
import { Animations } from '@obliczeniowo/elementary/animations';
import { keys } from '@obliczeniowo/elementary/objects';
class ExpandButtonComponent {
isOpen = false;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ExpandButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ExpandButtonComponent, isStandalone: false, selector: "obl-expand-button", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "<obl-icon\n [width]=\"16\"\n name=\"expand\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n></obl-icon>\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}:host{display:flex;justify-content:center;align-items:center;background:none;color:inherit;min-width:24px;min-height:24px;border:none;padding:0;font:inherit;cursor:pointer;border:1px dotted transparent}:host:focus{border:1px dotted var(--default-border-outline-color)}:host path{stroke:var(--default-text-color)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }], animations: [
Animations.rotate180deg
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ExpandButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-expand-button', animations: [
Animations.rotate180deg
], standalone: false, template: "<obl-icon\n [width]=\"16\"\n name=\"expand\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n></obl-icon>\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}:host{display:flex;justify-content:center;align-items:center;background:none;color:inherit;min-width:24px;min-height:24px;border:none;padding:0;font:inherit;cursor:pointer;border:1px dotted transparent}:host:focus{border:1px dotted var(--default-border-outline-color)}:host path{stroke:var(--default-text-color)}\n"] }]
}], propDecorators: { isOpen: [{
type: Input
}] } });
/**
* Set class for the button element
*
* Default class name is: 'obl-button' you cen extend it by using input oblButton
* in such case the name of class will change to 'obl-button-'+this.oblButton
*
* You can use scss mixin to generate new set of styles:
*
* @example
*
* // in HTML
*
* <button oblButton="red">Some button</button>
*
* // in global scss file style.scss
*
* @use "node_modules/@obliczeniowo/elementary/styles/global.scss" as *;
*
* @include button-styles("red", #080808, black, red, white, #cc5d5d, white, gray);
*/
class ButtonDirective {
renderer;
elementRef;
viewContainerRef;
_oblButton;
_spinner;
_icon;
_name;
get oblButton() {
return this._oblButton;
}
/**
* Let you set default class if no extended class is set
*
* if extended is set then you can generate your own styles class using mixin
*
* @example
* @use "node_modules/@obliczeniowo/elementary/styles/buttons-styles.scss" as *;
*
* @include button-styles("red", #080808, black, red, white, #cc5d5d, white, gray);
*/
set oblButton(value) {
this.renderer.removeClass(this.elementRef.nativeElement, this.class());
this._oblButton = value;
this.renderer.addClass(this.elementRef.nativeElement, this.class());
}
/**
* Name of icon to display inside of button, when no icon set then no icon to display
*
* When loading = true icon is removed and spinner is displayed
*/
set icon(icon) {
const host = this.elementRef.nativeElement;
this._name = icon;
if (icon) {
if (!this._icon) {
this._icon = this.viewContainerRef.createComponent(IconComponent);
}
this._icon.setInput('name', icon);
this._icon.setInput('width', 'var(--obl-icon-width, 14px)');
if (host.firstChild) {
host.insertBefore(this._icon.location.nativeElement, host.firstChild);
}
else {
host.appendChild(this._icon.location.nativeElement);
}
}
else if (this._icon) {
host.removeChild(this._icon.location.nativeElement);
}
}
blockWhenLoading = true;
_loading;
/**
* If loading is set to true then button is disabled and spinner is added as first child of button
*
* on loading = false spinner is removed and if icon is set then icon displayed on his place
*/
set loading(loading) {
this._loading = loading;
const host = this.elementRef.nativeElement;
if (loading) {
if (!this._spinner) {
this._spinner = this.viewContainerRef.createComponent(SpinnerComponent);
if (host.innerText !== '') {
this._spinner.location.nativeElement.style.marginRight = '5px';
}
}
host.insertBefore(this._spinner.location.nativeElement, host.firstChild);
if (this._icon) {
host.removeChild(this._icon.location.nativeElement);
}
this.elementRef.nativeElement.disabled = true;
}
else if (this._spinner) {
host.removeChild(this._spinner.location.nativeElement);
if (this._icon && this._name) {
host.insertBefore(this._icon.location.nativeElement, host.firstChild);
}
this.elementRef.nativeElement.disabled = undefined;
}
}
/** */
toggle = input(false);
/** */
selected = false;
/**
* link to open when clicked
*/
link = input();
/**
* target option for link option only
*/
target = input('_self');
/**
* To handle disable state of button
*/
get load() {
// !!this._loading to prevent change after update stuff
return !!this._loading && this.blockWhenLoading;
}
clicked(event) {
if (this._loading && this.blockWhenLoading) {
return;
}
if (this.link()) {
window.open(this.link(), this.target());
}
if (this.toggle()) {
this.selected = !this.selected;
}
}
constructor(renderer, elementRef, viewContainerRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.viewContainerRef = viewContainerRef;
renderer.addClass(elementRef.nativeElement, 'obl-button');
}
ngAfterViewInit() {
this.icon = this._name;
this.loading = !!this._loading;
}
class(prefix = 'obl-button') {
if (this.oblButton) {
return `${prefix}-${this.oblButton}`;
}
return prefix;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: ButtonDirective, isStandalone: false, selector: "oblButton, [oblButton]", inputs: { oblButton: { classPropertyName: "oblButton", publicName: "oblButton", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, blockWhenLoading: { classPropertyName: "blockWhenLoading", publicName: "blockWhenLoading", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "clicked(event)" }, properties: { "class.selected": "this.selected", "class.loading": "this.load" } }, exportAs: ["oblButton"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: 'oblButton, [oblButton]',
exportAs: 'oblButton',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { oblButton: [{
type: Input
}], icon: [{
type: Input
}], blockWhenLoading: [{
type: Input
}], loading: [{
type: Input
}], selected: [{
type: HostBinding,
args: ['class.selected']
}, {
type: Input
}], load: [{
type: HostBinding,
args: ['class.loading']
}], clicked: [{
type: HostListener,
args: ['click', ['event']]
}] } });
class ActionDirective {
ref;
time;
dt = 0;
interval = 100;
element;
rect;
offset;
set message(message) {
this.element.innerText = message;
}
;
animEnd;
duration = 1000;
clicked() {
const parent = this.ref.nativeElement;
if (!this.time && !parent.classList.contains('loading')) {
document.body.appendChild(this.element);
this.rect = parent.getBoundingClientRect();
this.offset = { left: parent.offsetLeft, top: parent.offsetTop };
this.element.style.top = `${this.offset.top - 30}px`;
let left = this.offset.left - (this.element.clientWidth - this.rect.width) / 2;
const dx = window.innerWidth - document.body.clientWidth;
if (left + this.element.clientWidth >= document.body.clientWidth - dx) {
left = document.body.clientWidth - 5 - this.element.clientWidth;
}
else if (left < 0) {
left = 0;
}
this.element.style.left = `${left}px`;
this.time = setInterval(() => {
this.dt += this.interval;
this.element.style.opacity = `${1 - this.dt / this.duration}`;
this.element.style.top = `${this.offset.top - 30 - 50 * this.dt / this.duration}px`;
if (this.dt >= this.duration) {
// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
this.animEnd && this.animEnd();
this.ngOnDestroy();
}
}, this.interval);
}
}
constructor(ref) {
this.ref = ref;
this.element = document.createElement('div');
this.element.classList.add('animated-action');
const styles = {
padding: '5px 10px',
fontSize: '14px',
background: 'var(--default-background-color, white)',
color: 'var(--default-text-color, black)',
border: '1px solid gray',
borderRadius: '50px',
opacity: '1',
position: 'absolute',
width: 'fit-content'
};
keys(styles).forEach((key) => this.element.style[key] = styles[key]);
}
ngOnDestroy() {
if (this.time) {
clearInterval(this.time);
this.time = undefined;
this.dt = 0;
document.body.removeChild(this.element);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ActionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: ActionDirective, isStandalone: false, selector: "[oblAction]", inputs: { message: "message", animEnd: "animEnd", duration: "duration" }, host: { listeners: { "click": "clicked(event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[oblAction]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
type: Input
}], animEnd: [{
type: Input
}], duration: [{
type: Input
}], clicked: [{
type: HostListener,
args: ['click', ['event']]
}] } });
class ButtonsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ButtonsModule, declarations: [ExpandButtonComponent,
ButtonDirective,
ActionDirective], imports: [CommonModule,
IconsModule,
LoadingModule], exports: [ExpandButtonComponent,
ButtonDirective,
ActionDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ButtonsModule, imports: [CommonModule,
IconsModule,
LoadingModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ButtonsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ExpandButtonComponent,
ButtonDirective,
ActionDirective
],
imports: [
CommonModule,
IconsModule,
LoadingModule
],
exports: [
ExpandButtonComponent,
ButtonDirective,
ActionDirective
]
}]
}] });
class ProgressButtonComponent {
/** if not undefined then display progress bar with % value */
progress = input();
/** disable light effect */
light = input(true);
real = computed(() => {
return Math.min(Math.max(0, this.progress() || 0), 100);
});
get disabled() {
return this.progress();
}
button = true;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ProgressButtonComponent, isStandalone: true, selector: "button[obl-progress]", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "this.disabled", "class.obl-button": "this.button" } }, ngImport: i0, template: "@if (progress() === undefined) {\n <ng-content></ng-content>\n} @else {\n <div class=\"progress\">\n <div class=\"value\" [style.width.%]=\"real()\">\n @if (light()) {\n <div class=\"light\"></div>\n }\n </div>\n <div class=\"value-text\">{{ real() }} %</div>\n </div>\n}", styles: [":host{padding:0;height:var(--obl-progress-button-height, 50px);min-width:80px}:host:not([disabled]){padding:10px}.progress{display:flex;width:100%;position:relative;height:var(--obl-progress-button-height, 50px)}.progress .value{height:var(--obl-progress-button-height, 50px);background-color:var(--obl-progress-button-value-color, #0ce631)}.progress .value .light{height:calc(var(--obl-progress-button-height, 50px) / 3);background:linear-gradient(180deg,#fffc,#ffffffb3,#ffffff4d)}.progress .value-text{position:absolute;text-wrap:nowrap;display:flex;justify-content:center;align-items:center;inset:0;height:var(--obl-progress-button-height, 50px)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'button[obl-progress]', imports: [], template: "@if (progress() === undefined) {\n <ng-content></ng-content>\n} @else {\n <div class=\"progress\">\n <div class=\"value\" [style.width.%]=\"real()\">\n @if (light()) {\n <div class=\"light\"></div>\n }\n </div>\n <div class=\"value-text\">{{ real() }} %</div>\n </div>\n}", styles: [":host{padding:0;height:var(--obl-progress-button-height, 50px);min-width:80px}:host:not([disabled]){padding:10px}.progress{display:flex;width:100%;position:relative;height:var(--obl-progress-button-height, 50px)}.progress .value{height:var(--obl-progress-button-height, 50px);background-color:var(--obl-progress-button-value-color, #0ce631)}.progress .value .light{height:calc(var(--obl-progress-button-height, 50px) / 3);background:linear-gradient(180deg,#fffc,#ffffffb3,#ffffff4d)}.progress .value-text{position:absolute;text-wrap:nowrap;display:flex;justify-content:center;align-items:center;inset:0;height:var(--obl-progress-button-height, 50px)}\n"] }]
}], propDecorators: { disabled: [{
type: HostBinding,
args: ['attr.disabled']
}], button: [{
type: HostBinding,
args: ['class.obl-button']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { ActionDirective, ButtonDirective, ButtonsModule, ExpandButtonComponent, ProgressButtonComponent };
//# sourceMappingURL=obliczeniowo-elementary-buttons.mjs.map