@obliczeniowo/elementary
Version:
Library made in Angular version 20
576 lines (568 loc) • 39.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Input, HostBinding, Output, Component, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i3$1 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i2 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i4 from '@obliczeniowo/elementary/dropdown-select';
import { DropdownSelectModule } from '@obliczeniowo/elementary/dropdown-select';
import * as i3 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i4$1 from '@obliczeniowo/elementary/text-pipes';
import { TextPipesModule } from '@obliczeniowo/elementary/text-pipes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import { keys, keysValues } from '@obliczeniowo/elementary/objects';
import { cloneDeep } from 'lodash';
import * as i6 from '@obliczeniowo/elementary/badge';
import { BadgeDirective } from '@obliczeniowo/elementary/badge';
class SortingOptionComponent {
settings;
option = {
id: 0,
name: '',
order: 'ASC',
};
names = [];
translations = {};
mode = 'single';
changed = new EventEmitter();
nameChanged = new EventEmitter();
orderChanged = new EventEmitter();
add = new EventEmitter();
remove = new EventEmitter();
nameItems = [];
order = [
{
id: 'ASC',
text: 'Ascending',
},
{
id: 'DESC',
text: 'Descending',
},
];
disabled = false;
/**
* Enable type text animation for label
*/
labelAnimation = false;
constructor(settings) {
this.settings = settings;
this.labelAnimation = this.settings.labelAnimation.editInput;
}
ngOnChanges(changes) {
if (changes.names && this.names) {
this.nameItems = this.names.map((name) => ({
id: name.name,
text: name.text,
}));
}
if (changes.translations) {
this.order.forEach((order) => (order.text =
order.id === 'ASC'
? this.translations.Ascending || 'Ascending'
: this.translations.Descending || 'Descending'));
}
}
setOrder(order) {
this.option.order = order.id;
this.changed.emit(this.option);
this.orderChanged.emit(this.option);
}
setName(name) {
this.option.name = name.id;
this.changed.emit(this.option);
this.nameChanged.emit(this.option);
}
onChange = (value) => { };
onTouched = () => { };
writeValue(value) {
this.option = value.sort;
this.names = value.names || this.names;
this.nameItems = this.names.map((name) => ({
id: name.name,
text: name.text,
}));
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(disabled) {
this.disabled = disabled;
}
onAdd() {
if (this.option.name !== '') {
this.add.emit({ ...this.option });
this.option.name = '';
}
}
onRemove() {
if (this.option.name !== '') {
this.remove.emit(this.option);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortingOptionComponent, deps: [{ token: i1.InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: SortingOptionComponent, isStandalone: false, selector: "obl-sorting-option", inputs: { option: "option", names: "names", translations: "translations", mode: "mode", disabled: "disabled", labelAnimation: "labelAnimation" }, outputs: { changed: "changed", nameChanged: "nameChanged", orderChanged: "orderChanged", add: "add", remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SortingOptionComponent,
},
], usesOnChanges: true, ngImport: i0, template: "<obl-dropdown-select\n [label]=\"'Sort by' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"nameItems\"\n [select]=\"option.name\"\n [disabled]=\"disabled || mode === 'remove'\"\n (changed)=\"setName($event)\"\n></obl-dropdown-select>\n\n<obl-dropdown-select\n [label]=\"'Order' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"order\"\n [select]=\"option.order\"\n [disabled]=\"disabled\"\n (changed)=\"setOrder($event)\"\n></obl-dropdown-select>\n\n@if (mode !== 'single') {\n <button\n oblButton\n [disabled]=\"option.name === '' || undefined\"\n [icon]=\"mode === 'add' ? 'add' : 'subtract'\"\n (click)=\"mode === 'add' ? onAdd() : onRemove()\"\n ></button>\n}\n", styles: [":host{display:flex}obl-dropdown-select:first-of-type{max-width:200px}obl-dropdown-select:last-of-type{max-width:130px}button{margin-top:7px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: i4.DropdownSelectComponent, selector: "obl-dropdown-select", inputs: ["model", "items", "label", "labelAnimation", "templateSuffix", "templatePrefix", "search", "regExp", "select", "disabled"], outputs: ["changed"] }, { kind: "directive", type: i3.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "pipe", type: i4$1.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortingOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-sorting-option', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SortingOptionComponent,
},
], standalone: false, template: "<obl-dropdown-select\n [label]=\"'Sort by' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"nameItems\"\n [select]=\"option.name\"\n [disabled]=\"disabled || mode === 'remove'\"\n (changed)=\"setName($event)\"\n></obl-dropdown-select>\n\n<obl-dropdown-select\n [label]=\"'Order' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"order\"\n [select]=\"option.order\"\n [disabled]=\"disabled\"\n (changed)=\"setOrder($event)\"\n></obl-dropdown-select>\n\n@if (mode !== 'single') {\n <button\n oblButton\n [disabled]=\"option.name === '' || undefined\"\n [icon]=\"mode === 'add' ? 'add' : 'subtract'\"\n (click)=\"mode === 'add' ? onAdd() : onRemove()\"\n ></button>\n}\n", styles: [":host{display:flex}obl-dropdown-select:first-of-type{max-width:200px}obl-dropdown-select:last-of-type{max-width:130px}button{margin-top:7px;border-radius:5px}\n"] }]
}], ctorParameters: () => [{ type: i1.InputWrappersDefaultSettingsService }], propDecorators: { option: [{
type: Input
}], names: [{
type: Input
}], translations: [{
type: Input
}], mode: [{
type: Input
}], changed: [{
type: Output
}], nameChanged: [{
type: Output
}], orderChanged: [{
type: Output
}], add: [{
type: Output
}], remove: [{
type: Output
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], labelAnimation: [{
type: Input
}] } });
function sort(data, options) {
if (options.length) {
const sort = (first, second, order) => {
return order === 'ASC'
? first.localeCompare(second)
: second.localeCompare(first);
};
const sortNumbers = (first, second, order) => {
return order === 'ASC' ? first - second : second - first;
};
return data.sort((c, p) => {
let compare = 0;
for (const option of options) {
compare =
typeof c[option.name] === 'string' &&
typeof p[option.name] === 'string'
? sort(c[option.name].toString(), p[option.name].toString(), option.order)
: sortNumbers(c[option.name], p[option.name], option.order);
if (compare !== 0) {
break;
}
}
return compare;
});
}
else {
return data;
}
}
class SortComponent {
change;
globalSettings;
touchedDragBar = false;
settingsItems = [];
errors = {};
/** define if list is opened */
isOpen = false;
/** define if element is touched */
touched = false;
names = [];
options = [];
translations = {};
settings;
input;
disabled = false;
/**
* Enable type text animation for label
*/
labelAnimation = false;
settingsChanged = new EventEmitter();
output = new EventEmitter();
changed = new EventEmitter();
selected;
settingsName;
available = [];
constructor(change, globalSettings) {
this.change = change;
this.globalSettings = globalSettings;
this.labelAnimation = this.globalSettings.labelAnimation.editInput;
}
ngOnChanges(changes) {
if (changes.settings) {
if (this.settings) {
this.updateSettingsItems();
}
else {
this.settingsItems = [];
}
this.sort();
}
if (changes.input) {
this.sort();
}
if ((changes.names || changes.options) && this.names && this.options) {
this.setAvailable();
}
}
toggle(event, touched = this.touchedDragBar) {
if (touched) {
return;
}
event.stopPropagation();
this.touchedDragBar = false;
if (this.isOpen) {
this.isOpen = false;
}
else {
this.open();
}
}
close(touched = this.touchedDragBar) {
if (!touched) {
this.isOpen = false;
this.touchedDragBar = false;
}
else {
this.touchedDragBar = touched;
}
}
open() {
if (!this.isOpen) {
this.isOpen = true;
this.touchedDragBar = false;
setTimeout(() => {
this.checkSettingSelection();
});
}
}
checkSettingSelection() {
if (this.selected?.selected &&
JSON.stringify(this.selected.selected.templateData) !==
JSON.stringify(this.options)) {
this.selected.selected = undefined;
}
}
onTouchedDragBar(touched, element) {
this.touchedDragBar = touched;
element.parentElement.style.width = 0;
}
add(option) {
if (this.options.find((o) => o.name === option.name)) {
return;
}
option.id = this.options.length + 1;
this.options.push(option);
this.onChanged();
this.setAvailable();
}
remove(option) {
this.options = this.options.filter((sort) => sort.name !== option.name);
this.options.forEach((o, i) => (o.id = i));
this.onChanged();
this.setAvailable();
}
drop(event) {
moveItemInArray(this.options, event.previousIndex, event.currentIndex);
this.options.forEach((o, i) => (o.id = i));
this.onChange({ sort: this.options });
this.onChanged();
}
setAvailable() {
this.available = this.names.filter((name) => !this.options.find((option) => option.name === name.name));
}
sort() {
if (this.input) {
this.output.emit(sort(this.input, this.options));
}
}
onChange = (value) => { };
onTouched = () => { };
writeValue(value) {
this.options = value.sort;
this.names = value.names || this.names;
this.setAvailable();
}
changedOption(option, index) {
this.options[index] = option;
this.onChanged();
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(disabled) {
this.disabled = disabled;
}
setSettings(item) {
if (item.templateData) {
this.options = cloneDeep(item.templateData);
if (this.settingsName) {
this.settingsName.nativeElement.value = item.id.toString();
}
this.setAvailable();
this.onChange({ sort: this.options });
this.changed.emit(this.options);
}
}
check() {
const value = this.settingsName?.nativeElement.value;
const err = !value || value === '';
this.errors.settingsName =
(err && {
settingsNameError: !value || value === '',
}) ||
null;
}
onChanged() {
this.checkSettingSelection();
this.onChange({ sort: this.options });
this.changed.emit(this.options);
this.sort();
}
saveSettings(input) {
const name = input.value;
if (name && name !== '' && this.options) {
if (!keys(this.settings || {}).find((key) => key === name)) {
this.settings = {
...(this.settings || {}),
[name]: cloneDeep(this.options),
};
}
else {
if (this.settings) {
this.settings[name] = cloneDeep(this.options);
}
}
this.updateSettingsItems();
this.settingsChanged.emit(this.settings);
setTimeout(() => {
if (this.selected) {
this.selected.selected = this.selected.items.find((item) => item.id === name);
}
});
}
else {
this.errors.settingsName = {
settingsNameError: !name || name === '',
};
input.classList.add('ng-touched');
}
}
removeSettings(name) {
if (name && this.settings?.[name]) {
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete this.settings[name];
this.updateSettingsItems();
this.settingsChanged.emit(this.settings);
}
}
updateSettingsItems() {
this.settingsItems = keysValues(this.settings || {}).map(([key, value]) => ({
id: key,
text: key,
templateData: value,
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: SortComponent, isStandalone: false, selector: "obl-sort", inputs: { names: "names", options: "options", translations: "translations", settings: "settings", input: "input", disabled: "disabled", labelAnimation: "labelAnimation" }, outputs: { settingsChanged: "settingsChanged", output: "output", changed: "changed" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SortComponent,
},
], viewQueries: [{ propertyName: "selected", first: true, predicate: ["selectedSetting"], descendants: true }, { propertyName: "settingsName", first: true, predicate: ["settingsName"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button\n oblButton\n icon=\"asc\"\n oblBadge\n [show]=\"!!options.length\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n (click)=\"toggle($event, false)\"\n #parent\n></button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOffsetX]=\"2\"\n (overlayOutsideClick)=\"toggle($event)\"\n>\n <div\n class=\"dropdown-list\"\n [style.min-width.px]=\"376\"\n [style.max-width]=\"'100vw'\"\n #list\n cdkDrag\n >\n <obl-drag-bar\n (onTouched)=\"onTouchedDragBar($event, list)\"\n (onClose)=\"close(false)\"\n cdkDragHandle\n #dragbar\n ></obl-drag-bar>\n @if (settings) {\n <div class=\"row\">\n @if (settingsItems.length) {\n <obl-dropdown-select\n [label]=\"'Saved:' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"settingsItems\"\n (changed)=\"setSettings($event)\"\n #selectedSetting\n >\n @if (selectedSetting.selected) {\n <ng-container suffix>\n <button\n oblButton\n icon=\"subtract\"\n (click)=\"removeSettings(selectedSetting?.selected?.id)\"\n ></button>\n </ng-container>\n }\n </obl-dropdown-select>\n }\n <obl-input-wrapper\n [label]=\"'Setting name:' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [errors]=\"errors['settingsName']\"\n [translations]=\"translations\"\n >\n <input\n oblInput\n type=\"text\"\n (change)=\"check()\"\n #settingsName\n [required]=\"errors['settingsName']\"\n />\n <button\n suffix\n oblButton\n icon=\"save\"\n (click)=\"saveSettings(settingsName)\"\n ></button>\n </obl-input-wrapper>\n </div>\n }\n @if (options.length) {\n <div\n class=\"list\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n style=\"z-index: 100000\"\n >\n @for (option of options; let index = $index; track option;) {\n <obl-sorting-option\n [option]=\"option\"\n [names]=\"names\"\n mode=\"remove\"\n [translations]=\"translations\"\n [labelAnimation]=\"labelAnimation\"\n (remove)=\"remove($event)\"\n (changed)=\"changedOption($event, index)\"\n cdkDrag\n ></obl-sorting-option>\n }\n </div>\n }\n <obl-sorting-option\n [names]=\"available\"\n mode=\"add\"\n [translations]=\"translations\"\n [labelAnimation]=\"labelAnimation\"\n (add)=\"add($event)\"\n ></obl-sorting-option>\n </div>\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-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;max-width:100vw}.dropdown-list.disabled{color:var(--disabled-color)}.dropdown-list>obl-sorting-option{margin:5px}.dropdown-list .list{padding:5px;display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}:host button{--obl-icon-width: 23px;--obl-default-button-padding: 6px}.cdk-drag-preview{background-color:var(--default-background-color);z-index:10000!important}.row{display:flex;padding:5px;max-width:min(366px,100vw)}.row button{--obl-default-button-padding: 5px}.row button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.row button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}.row obl-dropdown-select,.row obl-input-wrapper{width:100%}\n"], dependencies: [{ 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: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.DropdownSelectComponent, selector: "obl-dropdown-select", inputs: ["model", "items", "label", "labelAnimation", "templateSuffix", "templatePrefix", "search", "regExp", "select", "disabled"], outputs: ["changed"] }, { kind: "component", type: i4.DragBarComponent, selector: "obl-drag-bar", outputs: ["onTouched", "onClose"] }, { kind: "directive", type: i3.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "directive", type: i1.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i1.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "directive", type: i6.BadgeDirective, selector: "[oblBadge]", inputs: ["show"] }, { kind: "component", type: SortingOptionComponent, selector: "obl-sorting-option", inputs: ["option", "names", "translations", "mode", "disabled", "labelAnimation"], outputs: ["changed", "nameChanged", "orderChanged", "add", "remove"] }, { kind: "pipe", type: i4$1.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-sort', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: SortComponent,
},
], standalone: false, template: "<button\n oblButton\n icon=\"asc\"\n oblBadge\n [show]=\"!!options.length\"\n cdkOverlayOrigin\n #dropDown=\"cdkOverlayOrigin\"\n (click)=\"toggle($event, false)\"\n #parent\n></button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropDown\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOffsetX]=\"2\"\n (overlayOutsideClick)=\"toggle($event)\"\n>\n <div\n class=\"dropdown-list\"\n [style.min-width.px]=\"376\"\n [style.max-width]=\"'100vw'\"\n #list\n cdkDrag\n >\n <obl-drag-bar\n (onTouched)=\"onTouchedDragBar($event, list)\"\n (onClose)=\"close(false)\"\n cdkDragHandle\n #dragbar\n ></obl-drag-bar>\n @if (settings) {\n <div class=\"row\">\n @if (settingsItems.length) {\n <obl-dropdown-select\n [label]=\"'Saved:' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [items]=\"settingsItems\"\n (changed)=\"setSettings($event)\"\n #selectedSetting\n >\n @if (selectedSetting.selected) {\n <ng-container suffix>\n <button\n oblButton\n icon=\"subtract\"\n (click)=\"removeSettings(selectedSetting?.selected?.id)\"\n ></button>\n </ng-container>\n }\n </obl-dropdown-select>\n }\n <obl-input-wrapper\n [label]=\"'Setting name:' | oblTranslation : translations\"\n [labelAnimation]=\"labelAnimation\"\n [errors]=\"errors['settingsName']\"\n [translations]=\"translations\"\n >\n <input\n oblInput\n type=\"text\"\n (change)=\"check()\"\n #settingsName\n [required]=\"errors['settingsName']\"\n />\n <button\n suffix\n oblButton\n icon=\"save\"\n (click)=\"saveSettings(settingsName)\"\n ></button>\n </obl-input-wrapper>\n </div>\n }\n @if (options.length) {\n <div\n class=\"list\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n style=\"z-index: 100000\"\n >\n @for (option of options; let index = $index; track option;) {\n <obl-sorting-option\n [option]=\"option\"\n [names]=\"names\"\n mode=\"remove\"\n [translations]=\"translations\"\n [labelAnimation]=\"labelAnimation\"\n (remove)=\"remove($event)\"\n (changed)=\"changedOption($event, index)\"\n cdkDrag\n ></obl-sorting-option>\n }\n </div>\n }\n <obl-sorting-option\n [names]=\"available\"\n mode=\"add\"\n [translations]=\"translations\"\n [labelAnimation]=\"labelAnimation\"\n (add)=\"add($event)\"\n ></obl-sorting-option>\n </div>\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-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;max-width:100vw}.dropdown-list.disabled{color:var(--disabled-color)}.dropdown-list>obl-sorting-option{margin:5px}.dropdown-list .list{padding:5px;display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}:host button{--obl-icon-width: 23px;--obl-default-button-padding: 6px}.cdk-drag-preview{background-color:var(--default-background-color);z-index:10000!important}.row{display:flex;padding:5px;max-width:min(366px,100vw)}.row button{--obl-default-button-padding: 5px}.row button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.row button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}.row obl-dropdown-select,.row obl-input-wrapper{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.InputWrappersDefaultSettingsService }], propDecorators: { names: [{
type: Input
}], options: [{
type: Input
}], translations: [{
type: Input
}], settings: [{
type: Input
}], input: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], labelAnimation: [{
type: Input
}], settingsChanged: [{
type: Output
}], output: [{
type: Output
}], changed: [{
type: Output
}], selected: [{
type: ViewChild,
args: ['selectedSetting']
}], settingsName: [{
type: ViewChild,
args: ['settingsName']
}] } });
class TableSortComponent {
sortName;
sortOrder;
position = 0;
sort = [];
changed = new EventEmitter();
order() {
const { sortOrder } = this;
if (sortOrder) {
return sortOrder === 'ASC' ? '↑' : '↓';
}
return ' ';
}
ngOnChanges(changes) {
if ((changes.sortName || changes.sortOrder) && this.sortOrder) {
this.set();
}
if (changes.sort) {
const find = this.sort.find(sort => sort.name === this.sortName);
this.position = this.sort.findIndex(sort => sort.name === this.sortName);
if (!find) {
this.sortOrder = undefined;
}
else {
this.sortOrder = find.order;
}
}
}
set() {
const find = this.sort.find(sort => sort.name === this.sortName);
this.position = this.sort.findIndex(sort => sort.name === this.sortName);
if (find && this.sortOrder) {
find.order = this.sortOrder;
}
else {
this.sort = this.sortOrder
? [
...this.sort,
{
id: 0,
name: this.sortName,
order: this.sortOrder,
},
]
: this.sort.filter(sort => sort.name !== this.sortName);
}
this.changed.emit(this.sort);
}
change() {
const { sortOrder } = this;
if (!sortOrder) {
this.sortOrder = 'ASC';
}
else {
this.sortOrder = sortOrder === 'ASC' ? 'DESC' : undefined;
}
this.set();
}
switchPos(event) {
this.sort = [this.sort.pop(), ...this.sort];
this.changed.emit(this.sort);
event.stopPropagation();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TableSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: TableSortComponent, isStandalone: false, selector: "thead td[obl-table-sort]", inputs: { sortName: "sortName", sort: "sort" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<button oblButton (click)=\"change()\">\n <ng-content></ng-content>\n\n <span>\n <span>{{ order() }}</span>\n @if (sort.length > 1 && position !== -1) {\n <button\n oblButton\n class=\"switch-position\"\n (click)=\"switchPos($event)\"\n >\n {{ position + 1 }}\n </button>\n }\n </span>\n</button>\n", styles: ["button{padding:5px;display:flex;align-items:center;gap:5px;width:100%;justify-content:space-between;background-color:inherit;color:inherit}button>span{display:flex;gap:5px;align-items:center}button:hover{background-color:inherit;color:inherit}.switch-position{height:18px;padding:0;font-size:small}.switch-position:hover{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i3.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TableSortComponent, decorators: [{
type: Component,
args: [{ selector: 'thead td[obl-table-sort]', standalone: false, template: "<button oblButton (click)=\"change()\">\n <ng-content></ng-content>\n\n <span>\n <span>{{ order() }}</span>\n @if (sort.length > 1 && position !== -1) {\n <button\n oblButton\n class=\"switch-position\"\n (click)=\"switchPos($event)\"\n >\n {{ position + 1 }}\n </button>\n }\n </span>\n</button>\n", styles: ["button{padding:5px;display:flex;align-items:center;gap:5px;width:100%;justify-content:space-between;background-color:inherit;color:inherit}button>span{display:flex;gap:5px;align-items:center}button:hover{background-color:inherit;color:inherit}.switch-position{height:18px;padding:0;font-size:small}.switch-position:hover{font-weight:700}\n"] }]
}], propDecorators: { sortName: [{
type: Input,
args: [{ required: true }]
}], sort: [{
type: Input
}], changed: [{
type: Output
}] } });
class SortingModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: SortingModule, declarations: [SortingOptionComponent,
SortComponent,
TableSortComponent], imports: [CommonModule,
OverlayModule,
DragDropModule,
DropdownSelectModule,
ButtonsModule,
TextPipesModule,
InputModule,
BadgeDirective], exports: [SortingOptionComponent,
SortComponent,
TableSortComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortingModule, imports: [CommonModule,
OverlayModule,
DragDropModule,
DropdownSelectModule,
ButtonsModule,
TextPipesModule,
InputModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SortingModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SortingOptionComponent,
SortComponent,
TableSortComponent
],
imports: [
CommonModule,
OverlayModule,
DragDropModule,
DropdownSelectModule,
ButtonsModule,
TextPipesModule,
InputModule,
BadgeDirective
],
exports: [
SortingOptionComponent,
SortComponent,
TableSortComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SortComponent, SortingModule, SortingOptionComponent, TableSortComponent };
//# sourceMappingURL=obliczeniowo-elementary-sorting.mjs.map